diff --git a/CHANGELOG.md b/CHANGELOG.md index 093aff78ac4..1e066c2161e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,8 +1,9 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- 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)) +- Attached `noreferrer` also to links without `target="_blank"` ([#2008](https://github.com/elastic/eui/pull/2008)) +- Converted observer utility components to TypeScript ([#2009](https://github.com/elastic/eui/pull/2009)) +- Converted tool tip components to TypeScript ([#2013](https://github.com/elastic/eui/pull/2013)) +- Converted `EuiCopy` to TypeScript ([#2016](https://github.com/elastic/eui/pull/2016)) **Bug fixes** diff --git a/src/components/copy/copy.js b/src/components/copy/copy.tsx similarity index 75% rename from src/components/copy/copy.js rename to src/components/copy/copy.tsx index 7c8bcfd10a3..9ba2356cb2b 100644 --- a/src/components/copy/copy.js +++ b/src/components/copy/copy.tsx @@ -1,10 +1,39 @@ -import React from 'react'; -import PropTypes from 'prop-types'; +import React, { ReactElement, ReactNode } from 'react'; +import { CommonProps } from '../common'; import { copyToClipboard } from '../../services'; import { EuiToolTip } from '../tool_tip'; -export class EuiCopy extends React.Component { - constructor(props) { +interface EuiCopyProps extends CommonProps { + /** + * 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 EuiCopyState { + tooltipText: ReactNode; +} + +export class EuiCopy extends React.Component { + static defaultProps = { + afterMessage: 'Copied', + }; + + constructor(props: EuiCopyProps) { super(props); this.state = { @@ -48,31 +77,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', -}; diff --git a/src/components/copy/index.js b/src/components/copy/index.ts similarity index 100% rename from src/components/copy/index.js rename to src/components/copy/index.ts