Skip to content

Commit 71bc809

Browse files
AdaltonLeiteAdaltonLeite
authored
Proposal change to the copied code (#852)
* feat: change copied action * feat: add ClipBoard component and fix minor bug on BuilderPage * remove unacessary css
1 parent d6f2061 commit 71bc809

File tree

8 files changed

+75
-60
lines changed

8 files changed

+75
-60
lines changed

‎src/components/BuilderPage.tsx

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import * as containerStyles from "../styles/container.module.css"
1919
import * as typographyStyles from "../styles/typography.module.css"
2020
import * as styles from "./BuilderPage.module.css"
2121
import CodeArea from "./CodeArea"
22+
import ClipBoard from "./ClipBoard"
2223

2324
const { useState, useRef, useEffect } = React
2425

@@ -404,18 +405,14 @@ function BuilderPage({
404405
}}
405406
>
406407
<div className={styles.buttonWrapper}>
407-
<button
408+
<ClipBoard
409+
onClick={() => copyClipBoard(generateCode(formData))}
408410
className={`${styles.button} ${styles.copyButton}`}
409-
onClick={() => {
410-
copyClipBoard(generateCode(formData))
411-
alert(generic.copied[currentLanguage])
412-
}}
413-
aria-label={generic.copied[currentLanguage]}
414-
>
415-
{generic.copy[currentLanguage]}
416-
</button>
411+
currentLanguage={currentLanguage}
412+
/>
417413
</div>
418-
<CodeArea rawData={generateCode(formData)} />
414+
415+
<CodeArea rawData={generateCode(formData)} withOutCopy />
419416
</section>
420417
</section>
421418
</div>

‎src/components/ClipBoard.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React, { useState } from "react"
2+
import generic from "../data/generic"
3+
4+
const ClipBoard = ({
5+
currentLanguage,
6+
className,
7+
onClick,
8+
}: {
9+
onClick: () => void
10+
className?: string
11+
currentLanguage: string
12+
}) => {
13+
const [copiedCode, setCopiedCode] = useState<boolean>(false)
14+
15+
React.useEffect(() => {
16+
if (copiedCode) {
17+
setTimeout(() => {
18+
setCopiedCode(false)
19+
}, 3000)
20+
}
21+
}, [copiedCode])
22+
23+
return (
24+
<button
25+
className={className}
26+
onClick={() => {
27+
onClick()
28+
setCopiedCode(true)
29+
}}
30+
aria-label={generic.copied[currentLanguage]}
31+
>
32+
{copiedCode
33+
? generic.codeCopied[currentLanguage]
34+
: generic.copy[currentLanguage]}
35+
</button>
36+
)
37+
}
38+
39+
export default ClipBoard

‎src/components/CodeArea.tsx

Lines changed: 5 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import * as React from "react"
22
import copyClipBoard from "./utils/copyClipBoard"
33
import { useStateMachine } from "little-state-machine"
4-
import generic from "../data/generic"
54
import { highlightAllUnder } from "prismjs"
5+
import ClipBoard from "./ClipBoard"
66
import * as styles from "./CodeArea.module.css"
77

88
export const CodeSandBoxLink = ({
@@ -145,16 +145,11 @@ export default function CodeArea({
145145
</button>
146146
)}
147147
{!withOutCopy && (
148-
<button
148+
<ClipBoard
149149
className={`${styles.button} ${styles.copyButton}`}
150-
onClick={() => {
151-
copyClipBoard(getData())
152-
alert(generic.copied[currentLanguage])
153-
}}
154-
aria-label={generic.copied[currentLanguage]}
155-
>
156-
{generic.copy[currentLanguage]}
157-
</button>
150+
onClick={() => copyClipBoard(getData())}
151+
currentLanguage={currentLanguage}
152+
/>
158153
)}
159154

160155
{((url && currentType === ToggleTypes.js) ||

‎src/components/DevTools.tsx

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import * as containerStyles from "../styles/container.module.css"
1616
import * as buttonStyles from "../styles/button.module.css"
1717
import * as getStartedStyle from "./GetStarted.module.css"
1818
import * as styles from "./DevTools.module.css"
19+
import ClipBoard from "./ClipBoard"
1920

2021
interface Props {
2122
defaultLang: string
@@ -87,18 +88,11 @@ export default ({ defaultLang, content }: Props) => {
8788
}`}
8889
>
8990
npm install -D @hookform/devtools
90-
<button
91+
<ClipBoard
9192
className={getStartedStyle.copyButton}
92-
onClick={() => {
93-
copyClipBoard("npm install -D @hookform/devtools")
94-
alert(generic.copied["en"])
95-
}}
96-
>
97-
<span>
98-
<span />
99-
</span>{" "}
100-
{generic.copy["en"]}
101-
</button>
93+
currentLanguage="en"
94+
onClick={() => copyClipBoard("npm install -D @hookform/devtools")}
95+
/>
10296
</span>
10397

10498
<p>{content.step2}</p>

‎src/components/GetStarted.tsx

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import generic from "../data/generic"
66
import copyClipBoard from "./utils/copyClipBoard"
77
import { useStateMachine } from "little-state-machine"
88
import * as styles from "./GetStarted.module.css"
9+
import ClipBoard from "./ClipBoard"
910

1011
export default function GetStarted({
1112
quickStartRef,
@@ -30,18 +31,11 @@ export default function GetStarted({
3031
}`}
3132
>
3233
npm install react-hook-form
33-
<button
34+
<ClipBoard
3435
className={styles.copyButton}
35-
onClick={() => {
36-
copyClipBoard("npm install react-hook-form")
37-
alert(generic.copied[currentLanguage])
38-
}}
39-
>
40-
<span>
41-
<span />
42-
</span>{" "}
43-
{generic.copy[currentLanguage]}
44-
</button>
36+
currentLanguage={currentLanguage}
37+
onClick={() => copyClipBoard("npm install react-hook-form")}
38+
/>
4539
</span>
4640

4741
<h2

‎src/components/GetStartedPage.tsx

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ import getStarted from "../data/en/getStarted"
3434
import TabGroup from "./TabGroup"
3535
import useController from "./codeExamples/useController"
3636
import useControllerTs from "./codeExamples/useControllerTs"
37+
import ClipBoard from "./ClipBoard"
3738

3839
const { useRef, useEffect } = React
3940
const enLinks = [
@@ -359,15 +360,13 @@ const Faq = ({ location, defaultLang, getStarted }: Props) => {
359360
}`}
360361
>
361362
npm install @hookform/resolvers yup
362-
<button
363+
<ClipBoard
363364
className={getStartedStyles.copyButton}
364-
onClick={() => {
365+
onClick={() =>
365366
copyClipBoard("npm install @hookform/resolvers yup")
366-
alert("Code copied into your clipboard.")
367-
}}
368-
>
369-
{generic.copy[currentLanguage]}
370-
</button>
367+
}
368+
currentLanguage={currentLanguage}
369+
/>
371370
</span>
372371

373372
{getStarted.schema.step2}

‎src/data/en/faq.tsx

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import * as tableStyles from "../../styles/table.module.css"
1010
import * as buttonStyles from "../../styles/button.module.css"
1111
import * as getStartedStyles from "../../components/GetStarted.module.css"
1212
import * as codeAreaStyles from "../../components/CodeArea.module.css"
13+
import ClipBoard from "../../components/ClipBoard"
1314

1415
export default {
1516
title: "FAQs",
@@ -708,18 +709,11 @@ export default {
708709
</p>
709710
<span>
710711
npm i mutationobserver-shim
711-
<button
712+
<ClipBoard
712713
className={getStartedStyles.copyButton}
713-
onClick={() => {
714-
copyClipBoard("npm i mutationobserver-shim")
715-
alert("Code copied into your clipboard.")
716-
}}
717-
>
718-
<span>
719-
<span />
720-
</span>{" "}
721-
Copy
722-
</button>
714+
onClick={() => copyClipBoard("npm i mutationobserver-shim")}
715+
currentLanguage="en"
716+
/>
723717
</span>
724718
</div>
725719
),

‎src/data/generic.tsx

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,9 @@ export default {
55
copy: {
66
en: "Copy",
77
},
8+
codeCopied: {
9+
en: "Copied",
10+
},
811
required: {
912
en: "Required",
1013
},

0 commit comments

Comments
 (0)