diff --git a/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx b/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx index b4338b36ce7..1ad5059fed3 100644 --- a/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx +++ b/packages/react-core/src/components/ClipboardCopy/ClipboardCopy.tsx @@ -21,9 +21,10 @@ export enum ClipboardCopyVariant { } export interface ClipboardCopyState { - text: string | number; + text: string; expanded: boolean; copied: boolean; + textWhenExpanded: string; } export interface ClipboardCopyProps extends Omit, 'onChange'>, OUIAProps { @@ -72,7 +73,7 @@ export interface ClipboardCopyProps extends Omit /** A function that is triggered on clicking the copy button. */ onCopy?: (event: React.ClipboardEvent, text?: React.ReactNode) => void; /** A function that is triggered on changing the text. */ - onChange?: (event: React.FormEvent, text?: string | number) => void; + onChange?: (event: React.FormEvent, text?: string) => void; /** The text which is copied. */ children: React.ReactNode; /** Additional actions for inline-compact clipboard copy. Should be wrapped with ClipboardCopyAction. */ @@ -88,12 +89,12 @@ class ClipboardCopy extends React.Component { if (prevProps.children !== this.props.children) { - this.setState({ text: this.props.children as string | number }); + this.setState({ text: this.props.children as string }); } }; @@ -136,11 +137,16 @@ class ClipboardCopy extends React.Component { + updateText = (event: React.FormEvent, text: string) => { this.setState({ text }); this.props.onChange(event, text); }; + updateTextWhenExpanded = (event: React.FormEvent, text: string) => { + this.setState({ textWhenExpanded: text }); + this.props.onChange(event, text); + }; + render = () => { const { /* eslint-disable @typescript-eslint/no-unused-vars */ @@ -229,7 +235,14 @@ class ClipboardCopy extends React.Component { + this.expandContent(_event); + if (this.state.expanded) { + this.setState({ text: this.state.textWhenExpanded }); + } else { + this.setState({ textWhenExpanded: this.state.text }); + } + }} id={`${toggleIdPrefix}${id}`} textId={`${textIdPrefix}${id}`} contentId={`${contentIdPrefix}${id}`} @@ -239,7 +252,7 @@ class ClipboardCopy extends React.Component { - onCopy(event, this.state.text); + onCopy(event, this.state.expanded ? this.state.textWhenExpanded : this.state.text); this.setState({ copied: true }); }} onTooltipHidden={() => this.setState({ copied: false })} @@ -266,7 +279,7 @@ class ClipboardCopy extends React.Component {this.state.text}