From 6f15e6166ffe9f6828e301b9fcd17514484dd909 Mon Sep 17 00:00:00 2001 From: scottybollinger Date: Mon, 10 Jun 2019 15:35:30 -0500 Subject: [PATCH 1/7] Add TypeScript definititions to Copy component --- src/components/copy/index.d.ts | 23 +++++++++++++++++++++++ src/components/index.d.ts | 1 + 2 files changed, 24 insertions(+) create mode 100644 src/components/copy/index.d.ts diff --git a/src/components/copy/index.d.ts b/src/components/copy/index.d.ts new file mode 100644 index 00000000000..89274a120ed --- /dev/null +++ b/src/components/copy/index.d.ts @@ -0,0 +1,23 @@ +import { SFC } from 'react'; +import { CommonProps } from '../common'; + +declare module '@elastic/eui' { + /** + * A function that returns a DOM node. + */ + export interface EuiCopyElement { + (): HTMLElement; + } + /** + * EuiCopy type defs + * + * @see './copy.js' + */ + interface EuiCopyProps { + children: EuiCopyElement; + textToCopy: string; + afterMessage: string; + } + + export const EuiCopy: SFC; +} diff --git a/src/components/index.d.ts b/src/components/index.d.ts index fadcac60c2f..4f50f5686ad 100644 --- a/src/components/index.d.ts +++ b/src/components/index.d.ts @@ -3,6 +3,7 @@ /// /// /// +/// /// /// /// From da63aae7f64029d46cb79096b1359f0458b9d9b2 Mon Sep 17 00:00:00 2001 From: Scotty Bollinger Date: Mon, 10 Jun 2019 15:45:29 -0500 Subject: [PATCH 2/7] Update CHANGELOG.md --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 093aff78ac4..d2820edb45a 100644 --- a/CHANGELOG.md +++ b/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)) +- Adds TypeScript definitions to `EuiCopy` ([#2016](https://github.com/elastic/eui/pull/2016)) **Bug fixes** From 7497baf59cff43492f246afb69f18f37b5c447b4 Mon Sep 17 00:00:00 2001 From: scottybollinger Date: Mon, 10 Jun 2019 16:19:52 -0500 Subject: [PATCH 3/7] Convert EuiCopy to TypeScript --- CHANGELOG.md | 2 +- src/components/copy/{copy.js => copy.tsx} | 70 ++++++++++------------ src/components/copy/index.d.ts | 23 ------- src/components/copy/{index.js => index.ts} | 0 src/components/index.d.ts | 1 - 5 files changed, 31 insertions(+), 65 deletions(-) rename src/components/copy/{copy.js => copy.tsx} (70%) delete mode 100644 src/components/copy/index.d.ts rename src/components/copy/{index.js => index.ts} (100%) diff --git a/CHANGELOG.md b/CHANGELOG.md index d2820edb45a..7428057659a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,7 +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)) -- Adds TypeScript definitions to `EuiCopy` ([#2016](https://github.com/elastic/eui/pull/2016)) +- Convert `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 70% rename from src/components/copy/copy.js rename to src/components/copy/copy.tsx index 7c8bcfd10a3..353e1811316 100644 --- a/src/components/copy/copy.js +++ b/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 { + 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', -}; diff --git a/src/components/copy/index.d.ts b/src/components/copy/index.d.ts deleted file mode 100644 index 89274a120ed..00000000000 --- a/src/components/copy/index.d.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { SFC } from 'react'; -import { CommonProps } from '../common'; - -declare module '@elastic/eui' { - /** - * A function that returns a DOM node. - */ - export interface EuiCopyElement { - (): HTMLElement; - } - /** - * EuiCopy type defs - * - * @see './copy.js' - */ - interface EuiCopyProps { - children: EuiCopyElement; - textToCopy: string; - afterMessage: string; - } - - export const EuiCopy: SFC; -} 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 diff --git a/src/components/index.d.ts b/src/components/index.d.ts index 4f50f5686ad..fadcac60c2f 100644 --- a/src/components/index.d.ts +++ b/src/components/index.d.ts @@ -3,7 +3,6 @@ /// /// /// -/// /// /// /// From 6538ad7022410c0c275cfcbe4d75fee8a6916d07 Mon Sep 17 00:00:00 2001 From: scottybollinger Date: Mon, 10 Jun 2019 16:39:53 -0500 Subject: [PATCH 4/7] Add CommonProps --- src/components/copy/copy.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/copy/copy.tsx b/src/components/copy/copy.tsx index 353e1811316..a36dd2d6ed5 100644 --- a/src/components/copy/copy.tsx +++ b/src/components/copy/copy.tsx @@ -1,8 +1,9 @@ import React, { ReactElement, ReactNode } from 'react'; +import { CommonProps } from '../common'; import { copyToClipboard } from '../../services'; import { EuiToolTip } from '../tool_tip'; -interface Props { +interface Props extends CommonProps { /** * Text that will be copied to clipboard when copy function is executed. */ From d7fdc74b49eb0875310877d976ba34b6b9dbc44b Mon Sep 17 00:00:00 2001 From: scottybollinger Date: Mon, 10 Jun 2019 17:12:07 -0500 Subject: [PATCH 5/7] Updates per CR --- CHANGELOG.md | 8 ++++---- src/components/copy/copy.tsx | 20 +++++++++++++++----- 2 files changed, 19 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 7428057659a..1e066c2161e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +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)) -- Convert `EuiCopy` to TypeScript ([#2016](https://github.com/elastic/eui/pull/2016)) +- 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.tsx b/src/components/copy/copy.tsx index a36dd2d6ed5..826547cc19c 100644 --- a/src/components/copy/copy.tsx +++ b/src/components/copy/copy.tsx @@ -3,7 +3,7 @@ import { CommonProps } from '../common'; import { copyToClipboard } from '../../services'; import { EuiToolTip } from '../tool_tip'; -interface Props extends CommonProps { +interface EuiCopyProps extends CommonProps { /** * Text that will be copied to clipboard when copy function is executed. */ @@ -24,12 +24,16 @@ interface Props extends CommonProps { children(copy: () => void): ReactElement; } -interface State { +interface EuiCopyState { tooltipText: ReactNode; } -export class EuiCopy extends React.Component { - constructor(props: Props) { +export class EuiCopy extends React.Component { + static defaultProps = { + afterMessage: 'Copied', + }; + + constructor(props: EuiCopyProps) { super(props); this.state = { @@ -53,7 +57,13 @@ export class EuiCopy extends React.Component { }; render() { - const { children, textToCopy, beforeMessage, ...rest } = this.props; + const { + children, + textToCopy, + beforeMessage, + afterMessage, + ...rest + } = this.props; return ( // See `src/components/tool_tip/tool_tip.js` for explaination of below eslint-disable From a77aaaca2ce9fbc56e06027842feadbaaf9fb9e2 Mon Sep 17 00:00:00 2001 From: scottybollinger Date: Tue, 11 Jun 2019 11:03:20 -0500 Subject: [PATCH 6/7] Make beforeMessage prop optional --- src/components/copy/copy.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/copy/copy.tsx b/src/components/copy/copy.tsx index 826547cc19c..25c24f83b9f 100644 --- a/src/components/copy/copy.tsx +++ b/src/components/copy/copy.tsx @@ -11,7 +11,7 @@ interface EuiCopyProps extends CommonProps { /** * Tooltip message displayed before copy function is called. */ - beforeMessage: ReactNode; + beforeMessage?: ReactNode; /** * Tooltip message displayed after copy function is called that lets the user know that * 'textToCopy' has been copied to the clipboard. From c4ab049b0194f7c09100ee64d02529bbdb75c39a Mon Sep 17 00:00:00 2001 From: scottybollinger Date: Tue, 11 Jun 2019 11:49:28 -0500 Subject: [PATCH 7/7] Remove redundant fallback value --- src/components/copy/copy.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/copy/copy.tsx b/src/components/copy/copy.tsx index 25c24f83b9f..9ba2356cb2b 100644 --- a/src/components/copy/copy.tsx +++ b/src/components/copy/copy.tsx @@ -45,7 +45,7 @@ export class EuiCopy extends React.Component { const isCopied = copyToClipboard(this.props.textToCopy); if (isCopied) { this.setState({ - tooltipText: this.props.afterMessage || 'Copied', + tooltipText: this.props.afterMessage, }); } };