Convert form control layout to ts

CHANGELOG.md

@@ -2,6 +2,7 @@
 
 - Added a `column` direction option to `EuiFlexGrid` ([#2073](https://github.com/elastic/eui/pull/2073))
 - Updated `EuiSuperDatePicker`'s  commonly used date/times to display as columns. ([#2073](https://github.com/elastic/eui/pull/2073))
+- Added TypeScript definition for `EuiFormControlLayout` ([#2086](https://github.com/elastic/eui/pull/2086))
 
 **Bug fixes**
 

src/components/date_picker/__snapshots__/date_picker.test.js.snap

@@ -6,7 +6,6 @@ exports[`EuiDatePicker is rendered 1`] = `
     className="euiDatePicker euiDatePicker--shadow"
   >
     <EuiFormControlLayout
-      compressed={false}
       fullWidth={false}
       icon="calendar"
       isLoading={false}

src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.js.snap

@@ -9,8 +9,6 @@ exports[`EuiSuperDatePicker is rendered 1`] = `
   <EuiFlexItem>
     <EuiFormControlLayout
       className="euiSuperDatePicker"
-      compressed={false}
-      isLoading={false}
       prepend={
         <EuiQuickSelectPopover
           applyRefreshInterval={null}

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

@@ -1,6 +1,5 @@
 import React from 'react';
 import { render, mount } from 'enzyme';
-import sinon from 'sinon';
 
 import { findTestSubject, requiredProps } from '../../../test';
 
@@ -63,15 +62,15 @@ describe('EuiFormControlLayout', () => {
         test('is called when clicked', () => {
           const icon = {
             type: 'alert',
-            onClick: sinon.spy(),
+            onClick: jest.fn(),
             'data-test-subj': 'myIcon',
           };
 
           const component = mount(<EuiFormControlLayout icon={icon} />);
 
           const closeButton = findTestSubject(component, 'myIcon');
           closeButton.simulate('click');
-          expect(icon.onClick.called).toBe(true);
+          expect(icon.onClick).toBeCalled();
         });
       });
     });
@@ -92,15 +91,15 @@ describe('EuiFormControlLayout', () => {
 
         test('is called when clicked', () => {
           const clear = {
-            onClick: sinon.spy(),
+            onClick: jest.fn(),
             'data-test-subj': 'clearButton',
           };
 
           const component = mount(<EuiFormControlLayout clear={clear} />);
 
           const closeButton = findTestSubject(component, 'clearButton');
           closeButton.simulate('click');
-          expect(clear.onClick.called).toBe(true);
+          expect(clear.onClick).toBeCalled();
         });
       });
     });

src/components/form/form_control_layout/form_control_layout.tsx

@@ -0,0 +1,161 @@
+import React, {
+  cloneElement,
+  Component,
+  HTMLAttributes,
+  ReactElement,
+  ReactNode,
+} from 'react';
+import classNames from 'classnames';
+
+import {
+  EuiFormControlLayoutIcons,
+  EuiFormControlLayoutIconsProps,
+} from './form_control_layout_icons';
+import { CommonProps } from '../../common';
+
+export { ICON_SIDES } from './form_control_layout_icons';
+
+type ReactElements = ReactElement | ReactElement[];
+
+// if `prepend` and/or `append` is specified then `children` must be undefined or a single ReactElement
+interface AppendWithChildren {
+  append: ReactElements;
+  children?: ReactElement;
+}
+interface PrependWithChildren {
+  prepend: ReactElements;
+  children?: ReactElement;
+}
+type SiblingsWithChildren = AppendWithChildren | PrependWithChildren;
+
+type ChildrenOptions =
+  | SiblingsWithChildren
+  | {
+      append?: undefined | null;
+      prepend?: undefined | null;
+      children?: ReactNode;
+    };
+
+type EuiFormControlLayoutProps = CommonProps &
+  HTMLAttributes<HTMLDivElement> &
+  ChildrenOptions & {
+    /**
+     * Creates an input group with element(s) coming before children
+     */
+    prepend?: ReactElements;
+    /**
+     * Creates an input group with element(s) coming after children
+     */
+    append?: ReactElements;
+    icon?: EuiFormControlLayoutIconsProps['icon'];
+    clear?: EuiFormControlLayoutIconsProps['clear'];
+    fullWidth?: boolean;
+    isLoading?: boolean;
+    className?: string;
+    compressed?: boolean;
+    readOnly?: boolean;
+  };
+
+function isChildrenIsReactElement(
+  append: EuiFormControlLayoutProps['append'],
+  prepend: EuiFormControlLayoutProps['prepend'],
+  children: EuiFormControlLayoutProps['children']
+): children is ReactElement {
+  return (!!append || !!prepend) && children != null;
+}
+
+export class EuiFormControlLayout extends Component<EuiFormControlLayoutProps> {
+  render() {
+    const {
+      children,
+      icon,
+      clear,
+      fullWidth,
+      isLoading,
+      compressed,
+      className,
+      prepend,
+      append,
+      readOnly,
+      ...rest
+    } = this.props;
+
+    const classes = classNames(
+      'euiFormControlLayout',
+      {
+        'euiFormControlLayout--fullWidth': fullWidth,
+        'euiFormControlLayout--compressed': compressed,
+        'euiFormControlLayout--readOnly': readOnly,
+        'euiFormControlLayout--group': prepend || append,
+      },
+      className
+    );
+
+    const prependNodes = this.renderPrepends();
+    const appendNodes = this.renderAppends();
+
+    let clonedChildren;
+    if (isChildrenIsReactElement(append, prepend, children)) {
+      clonedChildren = cloneElement(children, {
+        className: `${
+          children.props.className
+        } euiFormControlLayout__child--noStyle`,
+      });
+    }
+
+    return (
+      <div className={classes} {...rest}>
+        {prependNodes}
+        <div className="euiFormControlLayout__childrenWrapper">
+          {clonedChildren || children}
+
+          <EuiFormControlLayoutIcons
+            icon={icon}
+            clear={clear}
+            isLoading={isLoading}
+          />
+        </div>
+        {appendNodes}
+      </div>
+    );
+  }
+
+  renderPrepends() {
+    const { prepend } = this.props;
+
+    if (!prepend) {
+      return;
+    }
+
+    const prependNodes = React.Children.map(prepend, (item, index) =>
+      this.createSideNode(item, 'prepend', index)
+    );
+
+    return prependNodes;
+  }
+
+  renderAppends() {
+    const { append } = this.props;
+
+    if (!append) {
+      return;
+    }
+
+    const appendNodes = React.Children.map(append, (item, index) =>
+      this.createSideNode(item, 'append', index)
+    );
+
+    return appendNodes;
+  }
+
+  createSideNode(
+    node: ReactElement,
+    side: 'append' | 'prepend',
+    key: React.Key
+  ) {
+    return cloneElement(node, {
+      className: `euiFormControlLayout__${side}`,
+      key: key,
+    });
+  }
+}

src/components/form/form_control_layout/form_control_layout_clear_button.tsx

@@ -5,8 +5,11 @@ import { CommonProps } from '../../common';
 import { EuiIcon } from '../../icon';
 import { EuiI18n } from '../../i18n';
 
+export type EuiFormControlLayoutClearButtonProps = CommonProps &
+  ButtonHTMLAttributes<HTMLButtonElement>;
+
 export const EuiFormControlLayoutClearButton: FunctionComponent<
-  CommonProps & ButtonHTMLAttributes<HTMLButtonElement>
+  EuiFormControlLayoutClearButtonProps
 > = ({ className, onClick, ...rest }) => {
   const classes = classNames('euiFormControlLayoutClearButton', className);