EuiValidatableControl convert to TS (#1879)

* `EuiValidatableControl` convert to TS

* `EuiValidatableControl` code review fix

* `EuiValidatableControl` updated changelog

CHANGELOG.md

@@ -1,5 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Converted `EuiValidatableControl` to TS ([#1879](https://github.com/elastic/eui/pull/1879))
+
 **Bug fixes**
 
 - Fixed overflow scrolling of `EuiModal` and `EuiConfirmModal` for Chrome and Safari ([#1902](https://github.com/elastic/eui/pull/1902))

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,61 @@
+import { Children, cloneElement, Component, ReactElement } from 'react';
+import { CommonProps } from '../../common';
+
+export interface HTMLConstraintValidityElement extends Element {
+  setCustomValidity: (error: string) => void;
+}
+
+export interface ReactElementWithRef extends ReactElement {
+  ref?: (element: HTMLConstraintValidityElement) => void;
+}
+
+export interface EuiValidatableControlProps {
+  isInvalid?: boolean;
+  children: ReactElementWithRef;
+}
+
+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 = (element: HTMLConstraintValidityElement) => {
+    this.control = element;
+
+    // Call the original ref, if any
+    const { ref } = this.props.children;
+    if (typeof ref === 'function') {
+      ref(element);
+    }
+  };
+
+  render() {
+    const child = Children.only(this.props.children);
+    return cloneElement(child, {
+      ref: this.setRef,
+    });
+  }
+}