EuiValidatableControl convert to TS

src/components/form/validatable_control/index.ts

@@ -0,0 +1 @@
+export { EuiValidatableControl } from './validatable_control';

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

@@ -11,7 +11,6 @@ describe('EuiValidatableControl', () => {
       </EuiValidatableControl>
     );
 
-    expect(component)
-      .toMatchSnapshot();
+    expect(component).toMatchSnapshot();
   });
 });

src/components/form/validatable_control/validatable_control.tsx

@@ -0,0 +1,73 @@
+import {
+  Children,
+  cloneElement,
+  Component,
+  ReactElement,
+  ReactNode,
+} from 'react';
+import { CommonProps } from '../../common';
+
+export type HTMLConstraintValidityElement =
+  | HTMLButtonElement
+  | HTMLFieldSetElement
+  | HTMLInputElement
+  | HTMLObjectElement
+  | HTMLOutputElement
+  | HTMLSelectElement
+  | HTMLTextAreaElement
+  | Element & { setCustomValidity?: any };
+
+export type EuiNodeWithRef = ReactNode & {
+  ref?: (node: ReactNode) => void;
+};
+
+export interface EuiValidatableControlProps {
+  isInvalid?: boolean;
+  children?: EuiNodeWithRef;
+}
+
+export class EuiValidatableControl extends Component<
+  CommonProps & EuiValidatableControlProps
+> {
+  private control?: HTMLConstraintValidityElement;
+
+  updateValidity() {
+    if (
+      this.control == null ||
+      typeof this.control.setCustomValidity !== 'function'
+    ) {
+      return; // jsdom doesn't polyfill this for the server-side
+    }
+
+    if (this.props.isInvalid) {
+      this.control.setCustomValidity('Invalid');
+    } else {
+      this.control.setCustomValidity('');
+    }
+  }
+
+  componentDidMount() {
+    this.updateValidity();
+  }
+
+  componentDidUpdate() {
+    this.updateValidity();
+  }
+
+  setRef = (node: HTMLConstraintValidityElement) => {
+    this.control = node;
+
+    // Call the original ref, if any
+    const { ref } = this.props.children as EuiNodeWithRef;
+    if (typeof ref === 'function') {
+      ref(node);
+    }
+  };
+
+  render() {
+    const child = Children.only(this.props.children);
+    return cloneElement(child as ReactElement<any>, {
+      ref: this.setRef,
+    });
+  }
+}