Translate EuiFormRow to TypeScript

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiFormRow` to Typescript ([#2712](https://github.com/elastic/eui/pull/2712))
 - Added `nested` glyph to `EuiIcon` ([#2707](https://github.com/elastic/eui/pull/2707))
 - Added `tableLayout` prop to `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` to provide the option of auto layout ([#2697](https://github.com/elastic/eui/pull/2697))
 

package.json

@@ -86,6 +86,7 @@
     "@types/react-is": "^16.7.1",
     "@types/react-virtualized": "^9.18.7",
     "@types/resize-observer-browser": "^0.1.1",
+    "@types/sinon": "^7.5.1",
     "@types/tabbable": "^3.1.0",
     "@types/uuid": "^3.4.4",
     "@typescript-eslint/eslint-plugin": "^1.13.0",

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

@@ -19,6 +19,7 @@ describe('EuiFormRow', () => {
   });
 
   test('no children is an error', () => {
+    // @ts-ignore
     expect(() => <EuiFormRow {...requiredProps} />).toThrow();
   });
 

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

@@ -1,13 +1,12 @@
-import React, { cloneElement, Component, Children } from 'react';
-import PropTypes from 'prop-types';
+import React, {cloneElement, Component, Children, HTMLAttributes, ReactNode} from 'react';
 import classNames from 'classnames';
+import {CommonProps, keysOf} from '../../common';
 
-import { get } from '../../../services/objects';
-import { withRequiredProp } from '../../../utils/prop_types/with_required_prop';
+import {get} from '../../../services/objects';
 
-import { EuiFormHelpText } from '../form_help_text';
-import { EuiFormErrorText } from '../form_error_text';
-import { EuiFormLabel } from '../form_label';
+import {EuiFormHelpText} from '../form_help_text';
+import {EuiFormErrorText} from '../form_error_text';
+import {EuiFormLabel} from '../form_label';
 
 import makeId from './make_id';
 
@@ -21,10 +20,46 @@ const displayToClassNameMap = {
     'euiFormRow--compressed euiFormRow--horizontal euiFormRow--hasSwitch',
 };
 
-export const DISPLAYS = Object.keys(displayToClassNameMap);
+export const DISPLAYS = keysOf(displayToClassNameMap);
 
-export class EuiFormRow extends Component {
-  constructor(props) {
+export type EuiFormRowDisplayKeys = keyof typeof displayToClassNameMap;
+
+interface EuiFormRowState {
+  isFocused: boolean;
+  id: string;
+};
+
+export type EuiFormRowProps = CommonProps
+  & HTMLAttributes<HTMLDivElement & HTMLFieldSetElement>
+  & {
+  display?: EuiFormRowDisplayKeys;
+  hasEmptyLabelSpace?: boolean;
+  fullWidth?: boolean;
+  describedByIds?: string[];
+  labelType?: 'label' | 'legend';
+  hasChildLabel?: boolean;
+  children: ReactNode;
+  label?: ReactNode;
+  labelAppend?: any;
+  id?: string;
+  isInvalid?: boolean;
+  error?: ReactNode | Array<ReactNode>;
+  helpText?: ReactNode;
+  compressed?: boolean;
+  displayOnly?: boolean;
+};
+
+export class EuiFormRow extends Component<EuiFormRowProps, EuiFormRowState> {
+  static defaultProps = {
+    display: 'row',
+    hasEmptyLabelSpace: false,
+    fullWidth: false,
+    describedByIds: [],
+    labelType: 'label',
+    hasChildLabel: true,
+  };
+
+  constructor(props: EuiFormRowProps) {
     super(props);
 
     this.state = {
@@ -36,7 +71,7 @@ export class EuiFormRow extends Component {
     this.onBlur = this.onBlur.bind(this);
   }
 
-  onFocus(...args) {
+  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) {
@@ -48,7 +83,7 @@ export class EuiFormRow extends Component {
     });
   }
 
-  onBlur(...args) {
+  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) {
@@ -81,16 +116,19 @@ export class EuiFormRow extends Component {
       ...rest
     } = this.props;
 
-    const { id } = this.state;
+    const {id} = this.state;
 
     /**
      * Remove when `compressed` is deprecated
      */
-    let shimDisplay;
+    let shimDisplay: EuiFormRowDisplayKeys;
     if (compressed && display === 'row') {
       shimDisplay = 'rowCompressed';
     } else {
-      shimDisplay = display;
+      /**
+       * Safe use of ! as prop default is 'row'
+       */
+      shimDisplay = display!;
     }
 
     /**
@@ -151,7 +189,7 @@ export class EuiFormRow extends Component {
             isInvalid={isInvalid}
             aria-invalid={isInvalid}
             htmlFor={!isLegend && hasChildLabel ? id : undefined}
-            type={labelType}>
+            type={labelType as 'label' | undefined}>
             {label}
           </EuiFormLabel>
           {labelAppend && ' '}
@@ -160,8 +198,11 @@ export class EuiFormRow extends Component {
       );
     }
 
-    const optionalProps = {};
-    const describingIds = [...describedByIds];
+    const optionalProps: React.AriaAttributes = {};
+    /**
+     * Safe use of ! as default prop is []
+     */
+    const describingIds = [...describedByIds!];
 
     if (optionalHelpText) {
       describingIds.push(optionalHelpText.props.id);
@@ -175,6 +216,7 @@ export class EuiFormRow extends Component {
       optionalProps['aria-describedby'] = describingIds.join(' ');
     }
 
+    // @ts-ignore
     const field = cloneElement(Children.only(children), {
       id,
       onFocus: this.onFocus,
@@ -184,7 +226,10 @@ export class EuiFormRow extends Component {
 
     const fieldWrapperClasses = classNames('euiFormRow__fieldWrapper', {
       euiFormRow__fieldWrapperDisplayOnly:
-        displayOnly || display.startsWith('center'),
+      /**
+       * Safe use of ! as default prop is 'row'
+       */
+        displayOnly || display!.startsWith('center'),
     });
 
     const Element = labelType === 'legend' ? 'fieldset' : 'div';
@@ -201,72 +246,3 @@ export class EuiFormRow extends Component {
     );
   }
 }
-
-EuiFormRow.propTypes = {
-  children: PropTypes.element.isRequired,
-  className: PropTypes.string,
-  /**
-   * Escape hatch to not render duplicate labels if the child also renders a label
-   */
-  hasChildLabel: PropTypes.bool,
-  label: PropTypes.node,
-  /**
-   * Sets the type of html element the label should be based
-   * on the form row contents. For instance checkbox groups
-   * should use 'legend' instead of the default 'label'
-   */
-  labelType: PropTypes.oneOf(['label', 'legend']),
-  /**
-   * Adds an extra node to the right of the form label without
-   * being contained inside the form label. Good for things
-   * like documentation links.
-   */
-  labelAppend: withRequiredProp(
-    PropTypes.node,
-    'label',
-    'appending to the label requires that the label also exists'
-  ),
-  id: PropTypes.string,
-  isInvalid: PropTypes.bool,
-  error: PropTypes.oneOfType([
-    PropTypes.node,
-    PropTypes.arrayOf(PropTypes.node),
-  ]),
-  helpText: PropTypes.node,
-  hasEmptyLabelSpace: PropTypes.bool,
-  fullWidth: PropTypes.bool,
-  /**
-   * IDs of additional elements that should be part of children's `aria-describedby`
-   */
-  describedByIds: PropTypes.array,
-  /**
-   * **DEPRECATED: use `display: rowCompressed` instead.**
-   * When `true`, tightens up the spacing.
-   */
-  compressed: PropTypes.bool,
-  /**
-   * When `rowCompressed`, just tightens up the spacing;
-   * Set to `columnCompressed` if compressed
-   * and horizontal layout is needed.
-   * Set to `center` or `centerCompressed` to align non-input
-   * content better with inline rows.
-   * Set to `columnCompressedSwitch` if the form control being passed
-   * as the child is a switch.
-   */
-  display: PropTypes.oneOf(DISPLAYS),
-  /**
-   * **DEPRECATED: use `display: center` instead.**
-   * Vertically centers non-input style content so it aligns
-   * better with input style content.
-   */
-  displayOnly: PropTypes.bool,
-};
-
-EuiFormRow.defaultProps = {
-  display: 'row',
-  hasEmptyLabelSpace: false,
-  fullWidth: false,
-  describedByIds: [],
-  labelType: 'label',
-  hasChildLabel: true,
-};

src/components/form/form_row/index.d.ts

@@ -9,7 +9,7 @@ import {
 
 declare module '@elastic/eui' {
   /**
-   * @see './form_row.js'
+   * @see './form_row.ts'
    */
   export type EuiFormRowCommonProps = CommonProps & {
     error?: ReactNode | ReactNode[];