converts EuiForm (and family) to TypeScript

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiForm` to TypeScript, added many missing `/form` Prop types ([#2896](https://github.com/elastic/eui/pull/2896))
 - Empty table th elements replaced with td in `EuiTable`. ([#2934](https://github.com/elastic/eui/pull/2934))
 - Added default prompt text to `aria-describedby` for `EuiFilePicker` ([#2919](https://github.com/elastic/eui/pull/2919))
 - Added SASS variables for text variants of the primary palette `$euiColorPrimaryText`, `$euiColorSecondaryText`, etc... Updated components to use these new variables. ([#2873](https://github.com/elastic/eui/pull/2873))

src/components/basic_table/basic_table.tsx

@@ -16,7 +16,7 @@ import { CommonProps } from '../common';
 import { isFunction } from '../../services/predicate';
 import { get } from '../../services/objects';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
-import { EuiCheckbox } from '../form/checkbox/checkbox';
+import { EuiCheckbox } from '../form';
 
 import {
   EuiTable,

src/components/card/checkable_card/checkable_card.tsx

@@ -1,8 +1,12 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import classNames from 'classnames';
 
-import { EuiRadio, EuiRadioProps } from '../../form/radio';
-import { EuiCheckbox, EuiCheckboxProps } from '../../form/checkbox';
+import {
+  EuiRadio,
+  EuiRadioProps,
+  EuiCheckbox,
+  EuiCheckboxProps,
+} from '../../form';
 
 interface EuiCheckableCardBaseProps {
   id: string;

src/components/color_picker/color_picker.tsx

@@ -17,11 +17,11 @@ import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiColorPickerSwatch } from './color_picker_swatch';
 import { EuiFocusTrap } from '../focus_trap';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
-import { EuiFieldText } from '../form/field_text';
 import {
+  EuiFieldText,
   EuiFormControlLayout,
   EuiFormControlLayoutProps,
-} from '../form/form_control_layout';
+} from '../form';
 import { EuiI18n } from '../i18n';
 import { EuiPopover } from '../popover';
 import { VISUALIZATION_COLORS, keyCodes } from '../../services';

src/components/color_picker/color_stops/color_stop_thumb.tsx

@@ -20,13 +20,12 @@ import { keyCodes } from '../../../services';
 import { EuiButtonIcon } from '../../button';
 import { EuiColorPicker, EuiColorPickerProps } from '../color_picker';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
-// @ts-ignore
 import { EuiFieldNumber, EuiFieldText, EuiFormRow } from '../../form';
 import { EuiI18n } from '../../i18n';
-import { EuiRangeThumb } from '../../form/range/range_thumb';
 import { EuiPopover } from '../../popover';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiSpacer } from '../../spacer';
+import { EuiRangeThumb } from '../../form/range/range_thumb';
 
 export interface ColorStop {
   stop: number;
@@ -310,15 +309,14 @@ export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps> = ({
                 <EuiFormRow
                   label={stopLabel}
                   display="rowCompressed"
-                  readOnly={readOnly}
                   isInvalid={stopIsInvalid}
                   error={stopIsInvalid ? stopErrorMessage : null}>
                   <EuiFieldNumber
                     inputRef={setNumberInputRef}
                     compressed={true}
                     readOnly={readOnly}
-                    min={isRangeMin || min == null ? null : localMin}
-                    max={isRangeMax || max == null ? null : localMax}
+                    min={isRangeMin || min == null ? undefined : localMin}
+                    max={isRangeMax || max == null ? undefined : localMax}
                     value={isStopInvalid(stop) ? '' : stop}
                     isInvalid={stopIsInvalid}
                     onChange={handleStopInputChange}
@@ -328,10 +326,7 @@ export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps> = ({
             </EuiI18n>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFormRow
-              grow="false"
-              display="rowCompressed"
-              hasEmptyLabelSpace={true}>
+            <EuiFormRow display="rowCompressed" hasEmptyLabelSpace={true}>
               <EuiI18n
                 token="euiColorStopThumb.removeLabel"
                 default="Remove this stop">
@@ -374,7 +369,6 @@ export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps> = ({
                 <EuiFormRow
                   label={hexLabel}
                   display="rowCompressed"
-                  readOnly={readOnly}
                   isInvalid={colorIsInvalid}
                   error={colorIsInvalid ? hexErrorMessage : null}>
                   <EuiFieldText

src/components/color_picker/color_stops/color_stops.tsx

@@ -21,10 +21,10 @@ import {
 
 import { EuiColorPickerProps } from '../';
 import { EuiI18n } from '../../i18n';
+import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiRangeHighlight } from '../../form/range/range_highlight';
 import { EuiRangeTrack } from '../../form/range/range_track';
 import { EuiRangeWrapper } from '../../form/range/range_wrapper';
-import { EuiScreenReaderOnly } from '../../accessibility';
 
 export interface EuiColorStopsProps extends CommonProps {
   addColor?: ColorStop['color'];

src/components/datagrid/column_selector.tsx

@@ -11,13 +11,10 @@ import {
   EuiDataGridColumn,
   EuiDataGridColumnVisibility,
 } from './data_grid_types';
-// @ts-ignore-next-line
 import { EuiPopover, EuiPopoverFooter, EuiPopoverTitle } from '../popover';
 import { EuiI18n } from '../i18n';
-// @ts-ignore-next-line
 import { EuiButtonEmpty } from '../button';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
-// @ts-ignore-next-line
 import { EuiSwitch, EuiFieldText } from '../form';
 import {
   EuiDragDropContext,
@@ -150,9 +147,10 @@ export const useColumnSelector = (
                             checked={visibleColumnIds.has(id)}
                             compressed
                             className="euiSwitch--mini"
-                            onChange={({
-                              currentTarget: { checked },
-                            }: React.FormEvent<HTMLInputElement>) => {
+                            onChange={event => {
+                              const {
+                                target: { checked },
+                              } = event;
                               const nextVisibleColumns = sortedColumns.filter(
                                 columnId =>
                                   checked

src/components/form/checkbox/index.ts

@@ -1,7 +1,6 @@
-export { EuiCheckbox, EuiCheckboxProps, EuiCheckboxType } from './checkbox';
+export { EuiCheckbox, EuiCheckboxProps } from './checkbox';
 export {
   EuiCheckboxGroup,
   EuiCheckboxGroupProps,
   EuiCheckboxGroupOption,
-  EuiCheckboxGroupIdToSelectedMap,
 } from './checkbox_group';

src/components/form/field_text/index.ts

@@ -1 +1 @@
-export { EuiFieldText } from './field_text';
+export { EuiFieldText, EuiFieldTextProps } from './field_text';

src/components/form/form.js → src/components/form/form.tsx

@@ -1,20 +1,32 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { EuiCallOut } from '../call_out';
 import { EuiI18n } from '../i18n';
+import { CommonProps } from '../common';
 
-export const EuiForm = ({ children, className, isInvalid, error, ...rest }) => {
+export type EuiFormProps = CommonProps &
+  HTMLAttributes<HTMLDivElement> & {
+    isInvalid?: boolean;
+    error?: ReactNode | ReactNode[];
+  };
+
+export const EuiForm: FunctionComponent<EuiFormProps> = ({
+  children,
+  className,
+  isInvalid,
+  error,
+  ...rest
+}) => {
   const classes = classNames('euiForm', className);
 
-  let optionalErrors;
+  let optionalErrors: JSX.Element | null = null;
 
   if (error) {
     const errorTexts = Array.isArray(error) ? error : [error];
     optionalErrors = (
       <ul>
-        {errorTexts.map(error => (
-          <li className="euiForm__error" key={error}>
+        {errorTexts.map((error, index) => (
+          <li className="euiForm__error" key={index}>
             {error}
           </li>
         ))}
@@ -29,7 +41,7 @@ export const EuiForm = ({ children, className, isInvalid, error, ...rest }) => {
       <EuiI18n
         token="euiForm.addressFormErrors"
         default="Please address the errors in your form.">
-        {addressFormErrors => (
+        {(addressFormErrors: string) => (
           <EuiCallOut
             className="euiForm__errors"
             title={addressFormErrors}
@@ -48,11 +60,3 @@ export const EuiForm = ({ children, className, isInvalid, error, ...rest }) => {
     </div>
   );
 };
-
-EuiForm.propTypes = {
-  isInvalid: PropTypes.bool,
-  error: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.arrayOf(PropTypes.node),
-  ]),
-};

src/components/form/form_control_layout/form_control_layout_delimited.tsx

@@ -12,7 +12,9 @@ import {
   EuiFormControlLayoutProps,
 } from './form_control_layout';
 
-type EuiFormControlLayoutDelimitedProps = Partial<EuiFormControlLayoutProps> & {
+export type EuiFormControlLayoutDelimitedProps = Partial<
+  EuiFormControlLayoutProps
+> & {
   /**
    * Left side control
    */

src/components/form/form_control_layout/index.ts

@@ -1,13 +1,8 @@
 export {
   EuiFormControlLayout,
   EuiFormControlLayoutProps,
-  ICON_SIDES,
 } from './form_control_layout';
 export {
-  EuiFormControlLayoutClearButton,
-} from './form_control_layout_clear_button';
-export {
-  EuiFormControlLayoutCustomIcon,
-} from './form_control_layout_custom_icon';
-
-export { EuiFormControlLayoutDelimited } from './form_control_layout_delimited';
+  EuiFormControlLayoutDelimited,
+  EuiFormControlLayoutDelimitedProps,
+} from './form_control_layout_delimited';

src/components/form/form_error_text/form_error_text.tsx

@@ -3,9 +3,14 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../../common';
 
-export const EuiFormErrorText: FunctionComponent<
-  CommonProps & HTMLAttributes<HTMLDivElement>
-> = ({ children, className, ...rest }) => {
+export type EuiFormErrorTextProps = CommonProps &
+  HTMLAttributes<HTMLDivElement>;
+
+export const EuiFormErrorText: FunctionComponent<EuiFormErrorTextProps> = ({
+  children,
+  className,
+  ...rest
+}) => {
   const classes = classNames('euiFormErrorText', className);
 
   return (

src/components/form/form_error_text/index.ts

@@ -1 +1 @@
-export { EuiFormErrorText } from './form_error_text';
+export { EuiFormErrorText, EuiFormErrorTextProps } from './form_error_text';

src/components/form/form_help_text/form_help_text.tsx

@@ -3,9 +3,13 @@ import React, { FunctionComponent, HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../../common';
 
-export const EuiFormHelpText: FunctionComponent<
-  CommonProps & HTMLAttributes<HTMLDivElement>
-> = ({ children, className, ...rest }) => {
+export type EuiFormHelpTextProps = CommonProps & HTMLAttributes<HTMLDivElement>;
+
+export const EuiFormHelpText: FunctionComponent<EuiFormHelpTextProps> = ({
+  children,
+  className,
+  ...rest
+}) => {
   const classes = classNames('euiFormHelpText', className);
 
   return (

src/components/form/form_help_text/index.ts

@@ -1 +1 @@
-export { EuiFormHelpText } from './form_help_text';
+export { EuiFormHelpText, EuiFormHelpTextProps } from './form_help_text';

src/components/form/form_label/index.ts

@@ -1 +1 @@
-export { EuiFormLabel } from './form_label';
+export { EuiFormLabel, EuiFormLabelProps } from './form_label';

src/components/form/form_row/form_row.tsx

@@ -104,19 +104,12 @@ export class EuiFormRow extends Component<EuiFormRowProps, EuiFormRowState> {
     hasChildLabel: true,
   };
 
-  constructor(props: EuiFormRowProps) {
-    super(props);
-
-    this.state = {
-      isFocused: false,
-      id: props.id || makeId(),
-    };
-
-    this.onFocus = this.onFocus.bind(this);
-    this.onBlur = this.onBlur.bind(this);
-  }
+  state: EuiFormRowState = {
+    isFocused: false,
+    id: this.props.id || makeId(),
+  };
 
-  onFocus(...args: any[]) {
+  onFocus = (...args: any[]) => {
     // Doing this to allow onFocus to be called correctly from the child input element as this component overrides it
     const onChildFocus = get(this.props, 'children.props.onFocus');
     if (onChildFocus) {
@@ -126,9 +119,9 @@ export class EuiFormRow extends Component<EuiFormRowProps, EuiFormRowState> {
     this.setState({
       isFocused: true,
     });
-  }
+  };
 
-  onBlur(...args: any[]) {
+  onBlur = (...args: any[]) => {
     // Doing this to allow onBlur to be called correctly from the child input element as this component overrides it
     const onChildBlur = get(this.props, 'children.props.onBlur');
     if (onChildBlur) {
@@ -138,7 +131,7 @@ export class EuiFormRow extends Component<EuiFormRowProps, EuiFormRowState> {
     this.setState({
       isFocused: false,
     });
-  }
+  };
 
   render() {
     const {

src/components/form/index.ts

@@ -0,0 +1,21 @@
+export * from './checkbox';
+export * from './described_form_group';
+export * from './field_number';
+export * from './field_password';
+export * from './field_search';
+export * from './field_text';
+export * from './file_picker';
+export * from './form';
+export * from './form_control_layout';
+export * from './form_error_text';
+export * from './form_fieldset';
+export * from './form_help_text';
+export * from './form_label';
+export * from './form_row';
+export * from './radio';
+export * from './range';
+export * from './select';
+export * from './super_select';
+export * from './switch';
+export * from './text_area';
+export * from './validatable_control';