From b7f3c5873e51d3ce96e7422cfa7d7f7213e32477 Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Fri, 18 Mar 2022 13:41:34 -0400 Subject: [PATCH 1/2] chore(code block): convert to ts --- .../CodeBlock/examples/CodeBlock.md | 200 +----------------- .../CodeBlock/examples/CodeBlockBasic.tsx | 59 ++++++ .../examples/CodeBlockExpandable.tsx | 88 ++++++++ 3 files changed, 149 insertions(+), 198 deletions(-) create mode 100644 packages/react-core/src/components/CodeBlock/examples/CodeBlockBasic.tsx create mode 100644 packages/react-core/src/components/CodeBlock/examples/CodeBlockExpandable.tsx diff --git a/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md b/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md index 3e9eadc7470..0e2876f417b 100644 --- a/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md +++ b/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md @@ -5,210 +5,14 @@ cssPrefix: pf-c-code-block propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode'] --- -import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; -import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; - ## Examples ### Basic -```js -import React from 'react'; -import { CodeBlock, CodeBlockAction, CodeBlockCode, ClipboardCopyButton, Button } from '@patternfly/react-core'; -import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; -import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; - -class BasicCodeBlock extends React.Component { - constructor(props) { - super(props); - this.timer = null; - - this.state = { - copied: false - }; - - this.clipboardCopyFunc = (event, text) => { - const clipboard = event.currentTarget.parentElement; - const el = document.createElement('textarea'); - el.value = text.toString(); - clipboard.appendChild(el); - el.select(); - document.execCommand('copy'); - clipboard.removeChild(el); - }; - - this.onClick = (event, text) => { - if (this.timer) { - window.clearTimeout(this.timer); - this.setState({ copied: false }); - } - this.clipboardCopyFunc(event, text); - this.setState({ copied: true }, () => { - this.timer = window.setTimeout(() => { - this.setState({ copied: false }); - this.timer = null; - }, 1000); - }); - }; - } - - render() { - const code = `apiVersion: helm.openshift.io/v1beta1/ -kind: HelmChartRepository -metadata: -name: azure-sample-repo -spec: -connectionConfig: -url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`; - - const actions = ( - - - this.onClick(e, code)} - exitDelay={600} - maxWidth="110px" - variant="plain" - > - {this.state.copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'} - - - - - - - ); - - return ( - - {code} - - ); - } -} +```ts file="./CodeBlockBasic.tsx" ``` ### Expandable -```js -import React from 'react'; -import { - CodeBlock, - CodeBlockAction, - CodeBlockCode, - ClipboardCopyButton, - ExpandableSection, - ExpandableSectionToggle, - Button -} from '@patternfly/react-core'; -import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; -import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; - -class BasicCodeBlock extends React.Component { - constructor(props) { - super(props); - this.timer = null; - - this.state = { - isExpanded: false, - copied: false - }; - - this.onToggle = isExpanded => { - this.setState({ - isExpanded - }); - }; - - this.clipboardCopyFunc = (event, text) => { - const clipboard = event.currentTarget.parentElement; - const el = document.createElement('textarea'); - el.value = text.toString(); - clipboard.appendChild(el); - el.select(); - document.execCommand('copy'); - clipboard.removeChild(el); - }; - - this.onClick = (event, text) => { - if (this.timer) { - window.clearTimeout(this.timer); - this.setState({ copied: false }); - } - this.clipboardCopyFunc(event, text); - this.setState({ copied: true }, () => { - this.timer = window.setTimeout(() => { - this.setState({ copied: false }); - this.timer = null; - }, 1000); - }); - }; - } - - render() { - const { isExpanded } = this.state; - - const copyBlock = `apiVersion: helm.openshift.io/v1beta1/ -kind: HelmChartRepository -metadata: -name: azure-sample-repo -spec: -connectionConfig: -url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`; - - const code = `apiVersion: helm.openshift.io/v1beta1/ -kind: HelmChartRepository -metadata: -name: azure-sample-repo`; - const expandedCode = `spec: -connectionConfig: -url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`; - - const actions = ( - - - this.onClick(e, copyBlock)} - exitDelay={600} - maxWidth="110px" - variant="plain" - > - {this.state.copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'} - - - - - - - ); - return ( - - - {code} - - {expandedCode} - - - - {isExpanded ? 'Show Less' : 'Show More'} - - - ); - } -} +```ts file="./CodeBlockExpandable.tsx" ``` diff --git a/packages/react-core/src/components/CodeBlock/examples/CodeBlockBasic.tsx b/packages/react-core/src/components/CodeBlock/examples/CodeBlockBasic.tsx new file mode 100644 index 00000000000..35cdd90c1fd --- /dev/null +++ b/packages/react-core/src/components/CodeBlock/examples/CodeBlockBasic.tsx @@ -0,0 +1,59 @@ +import React from 'react'; +import { CodeBlock, CodeBlockAction, CodeBlockCode, ClipboardCopyButton, Button } from '@patternfly/react-core'; +import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; + +export const BasicCodeBlock: React.FunctionComponent = () => { + const [copied, setCopied] = React.useState(false); + + const clipboardCopyFunc = (event, text) => { + const clipboard = event.currentTarget.parentElement; + const el = document.createElement('textarea'); + el.value = text.toString(); + clipboard.appendChild(el); + el.select(); + document.execCommand('copy'); + clipboard.removeChild(el); + }; + + const onClick = (event, text) => { + clipboardCopyFunc(event, text); + setCopied(true); + }; + + const code = `apiVersion: helm.openshift.io/v1beta1/ +kind: HelmChartRepository +metadata: +name: azure-sample-repo0oooo00ooo +spec: +connectionConfig: +url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`; + + const actions = ( + + + onClick(e, code)} + exitDelay={600} + maxWidth="110px" + variant="plain" + > + {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'} + + + + + + + ); + + return ( + + {code} + + ); +}; diff --git a/packages/react-core/src/components/CodeBlock/examples/CodeBlockExpandable.tsx b/packages/react-core/src/components/CodeBlock/examples/CodeBlockExpandable.tsx new file mode 100644 index 00000000000..2721b18fb4f --- /dev/null +++ b/packages/react-core/src/components/CodeBlock/examples/CodeBlockExpandable.tsx @@ -0,0 +1,88 @@ +import React from 'react'; +import { + CodeBlock, + CodeBlockAction, + CodeBlockCode, + ClipboardCopyButton, + ExpandableSection, + ExpandableSectionToggle, + Button +} from '@patternfly/react-core'; +import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; + +export const ExpandableCodeBlock: React.FunctionComponent = () => { + const [isExpanded, setIsExpanded] = React.useState(false); + const [copied, setCopied] = React.useState(false); + + const onToggle = isExpanded => { + setIsExpanded(isExpanded); + }; + + const clipboardCopyFunc = (event, text) => { + const clipboard = event.currentTarget.parentElement; + const el = document.createElement('textarea'); + el.value = text.toString(); + clipboard.appendChild(el); + el.select(); + document.execCommand('copy'); + clipboard.removeChild(el); + }; + + const onClick = (event, text) => { + clipboardCopyFunc(event, text); + setCopied(true); + }; + + const copyBlock = `apiVersion: helm.openshift.io/v1beta1/ +kind: HelmChartRepository +metadata: +name: azure-sample-repo +spec: +connectionConfig: +url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`; + + const code = `apiVersion: helm.openshift.io/v1beta1/ +kind: HelmChartRepository +metadata: +name: azure-sample-repo`; + const expandedCode = `spec: +connectionConfig: +url: https://raw.githubusercontent.com/Azure-Samples/helm-charts/master/docs`; + + const actions = ( + + + onClick(e, copyBlock)} + exitDelay={600} + maxWidth="110px" + variant="plain" + > + {copied ? 'Successfully copied to clipboard!' : 'Copy to clipboard'} + + + + + + + ); + + return ( + + + {code} + + {expandedCode} + + + + {isExpanded ? 'Show Less' : 'Show More'} + + + ); +}; From 24270978157fd96ea17e9f46fc97d94628a189cc Mon Sep 17 00:00:00 2001 From: jenny-s51 Date: Mon, 21 Mar 2022 09:26:05 -0400 Subject: [PATCH 2/2] add back imports --- .../react-core/src/components/CodeBlock/examples/CodeBlock.md | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md b/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md index 0e2876f417b..4dc66c8de13 100644 --- a/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md +++ b/packages/react-core/src/components/CodeBlock/examples/CodeBlock.md @@ -5,6 +5,9 @@ cssPrefix: pf-c-code-block propComponents: ['CodeBlock', 'CodeBlockAction', 'CodeBlockCode'] --- +import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; +import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon'; + ## Examples ### Basic