EuiFieldNumber: converted to Typescript (#2685)

* Converts EuiFieldNumber to Typescript

* Adds PR number

* Removes unnecessary function

* Fixes what was requested in the PR's review

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiFieldNumber` to Typescript ([#2685](https://github.com/elastic/eui/pull/2685))
 - Converted `EuiFieldPassword` to Typescript ([#2683](https://github.com/elastic/eui/pull/2683))
 - Converted `EuiHighlight` to Typescript ([#2681](https://github.com/elastic/eui/pull/2681))
 - Added `data-test-subj` property to the `EuiCodeEditor` component ([#2689](https://github.com/elastic/eui/pull/2689))

src/components/form/field_number/field_number.tsx

@@ -0,0 +1,107 @@
+import React, { InputHTMLAttributes, Ref, FunctionComponent } from 'react';
+import { CommonProps } from '../../common';
+import classNames from 'classnames';
+
+import { EuiFormControlLayout } from '../form_control_layout';
+
+import { EuiValidatableControl } from '../validatable_control';
+
+export type EuiFieldNumberProps = InputHTMLAttributes<HTMLInputElement> &
+  CommonProps & {
+    value?: number | '';
+    icon?: string;
+    isInvalid?: boolean;
+    fullWidth?: boolean;
+    isLoading?: boolean;
+    readOnly?: boolean;
+    min?: number;
+    max?: number;
+    step?: number;
+    inputRef?: Ref<HTMLInputElement>;
+
+    /**
+     * Creates an input group with element(s) coming before input
+     */
+    prepend?: JSX.Element | JSX.Element[];
+
+    /**
+     * Creates an input group with element(s) coming after input
+     */
+    append?: string;
+
+    /**
+     * Completely removes form control layout wrapper and ignores
+     * icon, prepend, and append. Best used inside EuiFormControlLayoutDelimited.
+     */
+    controlOnly?: boolean;
+
+    /**
+     * when `true` creates a shorter height input
+     */
+    compressed?: boolean;
+  };
+
+export const EuiFieldNumber: FunctionComponent<EuiFieldNumberProps> = ({
+  className,
+  icon,
+  id,
+  placeholder,
+  name,
+  min,
+  max,
+  value,
+  isInvalid,
+  fullWidth = false,
+  isLoading = false,
+  compressed = false,
+  prepend,
+  append,
+  inputRef,
+  readOnly,
+  controlOnly,
+  ...rest
+}) => {
+  const classes = classNames('euiFieldNumber', className, {
+    'euiFieldNumber--withIcon': icon,
+    'euiFieldNumber--fullWidth': fullWidth,
+    'euiFieldNumber--compressed': compressed,
+    'euiFieldNumber--inGroup': prepend || append,
+    'euiFieldNumber-isLoading': isLoading,
+  });
+
+  const control = (
+    <EuiValidatableControl isInvalid={isInvalid}>
+      <input
+        type="number"
+        id={id}
+        min={min}
+        max={max}
+        name={name}
+        value={value}
+        placeholder={placeholder}
+        readOnly={readOnly}
+        className={classes}
+        ref={inputRef}
+        {...rest}
+      />
+    </EuiValidatableControl>
+  );
+
+  if (controlOnly) {
+    return control;
+  }
+
+  return (
+    <EuiFormControlLayout
+      icon={icon}
+      fullWidth={fullWidth}
+      isLoading={isLoading}
+      compressed={compressed}
+      readOnly={readOnly}
+      prepend={prepend}
+      append={append}
+      inputId={id}>
+      {control}
+    </EuiFormControlLayout>
+  );
+};

src/components/form/field_number/index.ts

@@ -0,0 +1 @@
+export { EuiFieldNumber, EuiFieldNumberProps } from './field_number';

src/components/form/index.d.ts

@@ -1,5 +1,4 @@
 import { CommonProps } from '../common';
-/// <reference path="./field_number/index.d.ts" />
 /// <reference path="./field_search/index.d.ts" />
 /// <reference path="./field_text/index.d.ts" />
 /// <reference path="./form_row/index.d.ts" />