Convert EuiCopy component to TypeScript

CHANGELOG.md

@@ -3,6 +3,7 @@
 - Attach `noreferrer` also to links without `target="_blank"` ([#2008](https://github.com/elastic/eui/pull/2008))
 - Convert observer utility components to TypeScript ([#2009](https://github.com/elastic/eui/pull/2009))
 - Convert tool tip components to TypeScript ([#2013](https://github.com/elastic/eui/pull/2013))
+- Convert `EuiCopy` to TypeScript ([#2016](https://github.com/elastic/eui/pull/2016))
 
 **Bug fixes**
 

src/components/copy/copy.js → src/components/copy/copy.tsx

@@ -1,10 +1,34 @@
-import React from 'react';
-import PropTypes from 'prop-types';
+import React, { ReactElement, ReactNode } from 'react';
 import { copyToClipboard } from '../../services';
 import { EuiToolTip } from '../tool_tip';
 
-export class EuiCopy extends React.Component {
-  constructor(props) {
+interface Props {
+  /**
+   * Text that will be copied to clipboard when copy function is executed.
+   */
+  textToCopy: string;
+  /**
+   * Tooltip message displayed before copy function is called.
+   */
+  beforeMessage: ReactNode;
+  /**
+   * Tooltip message displayed after copy function is called that lets the user know that
+   * 'textToCopy' has been copied to the clipboard.
+   */
+  afterMessage?: string;
+  /**
+   * Function that must return a component. First argument is 'copy' function.
+   * Use your own logic to create the component that users interact with when triggering copy.
+   */
+  children(copy: () => void): ReactElement;
+}
+
+interface State {
+  tooltipText: ReactNode;
+}
+
+export class EuiCopy extends React.Component<Props, State> {
+  constructor(props: Props) {
     super(props);
 
     this.state = {
@@ -16,7 +40,7 @@ export class EuiCopy extends React.Component {
     const isCopied = copyToClipboard(this.props.textToCopy);
     if (isCopied) {
       this.setState({
-        tooltipText: this.props.afterMessage,
+        tooltipText: this.props.afterMessage || 'Copied',
       });
     }
   };
@@ -28,13 +52,7 @@ export class EuiCopy extends React.Component {
   };
 
   render() {
-    const {
-      children,
-      textToCopy,
-      beforeMessage,
-      afterMessage,
-      ...rest
-    } = this.props;
+    const { children, textToCopy, beforeMessage, ...rest } = this.props;
 
     return (
       // See `src/components/tool_tip/tool_tip.js` for explaination of below eslint-disable
@@ -48,31 +66,3 @@ export class EuiCopy extends React.Component {
     );
   }
 }
-
-EuiCopy.propTypes = {
-  /**
-   * Text that will be copied to clipboard when copy function is executed.
-   */
-  textToCopy: PropTypes.string.isRequired,
-
-  /**
-   * Tooltip message displayed before copy function is called.
-   */
-  beforeMessage: PropTypes.node,
-
-  /**
-   * Tooltip message displayed after copy function is called that lets the user know that
-   * 'textToCopy' has been copied to the clipboard.
-   */
-  afterMessage: PropTypes.string.isRequired,
-
-  /**
-   * Function that must return a component. First argument is 'copy' function.
-   * Use your own logic to create the component that users interact with when triggering copy.
-   */
-  children: PropTypes.func.isRequired,
-};
-
-EuiCopy.defaultProps = {
-  afterMessage: 'Copied',
-};