playbook_ui_docs 14.17.0.pre.alpha.play2065passphrasewithselect7273 → 14.17.0.pre.alpha.play2065passphrasewithselect7295
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.jsx +54 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/_copy_button_hook.md +3 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_copy_button/docs/index.js +2 -1
- data/dist/playbook-doc.js +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: c3fd7e2bc6f3ddbca137ddf0f76fe34479d3bc585ac7478f3616a127d3deaad7
|
|
4
|
+
data.tar.gz: c89143e2b1a3a18228ff7b50242ac163dc13caea72187f9ca21530dc557d4530
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8f5d631aa25edabb18a89eb7b53304d99ed69ae12c827010aabc3058e525219af09cd5c10e4f4cb07429f6a9b4fb7f58afc1023a53805b61d57ab99060e5cc56
|
|
7
|
+
data.tar.gz: dbbc538c71f446bc5c95ff14204de4e63da9355f404737169b1589d34205d26d321f5486c770437949f0cf0373c18ef4d0eb22a6f31d44fc3eeb290dd2845ed9
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import React, { useEffect, useState } from 'react'
|
|
2
|
+
import usePBCopy from '../../pb_copy_button/usePBCopy'
|
|
3
|
+
import Body from '../../pb_body/_body'
|
|
4
|
+
import Textarea from '../../pb_textarea/_textarea'
|
|
5
|
+
import Tooltip from '../../pb_tooltip/_tooltip'
|
|
6
|
+
|
|
7
|
+
const CopyButtonHook = ({...props}) => {
|
|
8
|
+
// This is how you can use the copy button hook to copy text to the clipboard
|
|
9
|
+
// eslint-disable-next-line no-unused-vars
|
|
10
|
+
const [copied, copyToClipboard] = usePBCopy({ from: 'hookbody' })
|
|
11
|
+
// I added a tooltip so it looks better in the ui
|
|
12
|
+
const [showTooltip, setShowTooltip] = useState(false)
|
|
13
|
+
|
|
14
|
+
const handleCopy = () => {
|
|
15
|
+
copyToClipboard()
|
|
16
|
+
setShowTooltip(true)
|
|
17
|
+
setTimeout(() => setShowTooltip(false), 1500)
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
const el = document.getElementById('hookbody')
|
|
22
|
+
if (!el) return
|
|
23
|
+
|
|
24
|
+
el.addEventListener('click', handleCopy)
|
|
25
|
+
return () => {
|
|
26
|
+
el.removeEventListener('click', handleCopy)
|
|
27
|
+
}
|
|
28
|
+
}, [copyToClipboard])
|
|
29
|
+
|
|
30
|
+
return (
|
|
31
|
+
<div>
|
|
32
|
+
<Tooltip
|
|
33
|
+
delay={{ close: 1000 }}
|
|
34
|
+
forceOpenTooltip={showTooltip}
|
|
35
|
+
placement="top"
|
|
36
|
+
showTooltip={false}
|
|
37
|
+
text="Copied!"
|
|
38
|
+
>
|
|
39
|
+
<Body
|
|
40
|
+
cursor="pointer"
|
|
41
|
+
id="hookbody"
|
|
42
|
+
text="I'm a custom copy hook! Click this body to copy this text!"
|
|
43
|
+
/>
|
|
44
|
+
</Tooltip>
|
|
45
|
+
|
|
46
|
+
<Textarea
|
|
47
|
+
{...props}
|
|
48
|
+
placeholder="Paste here"
|
|
49
|
+
/>
|
|
50
|
+
</div>
|
|
51
|
+
)
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
export default CopyButtonHook
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
We provide a `usePBCopy` hook that you can import to your project. This hook will return a function that you can call to copy the text to the clipboard.
|
|
2
|
+
|
|
3
|
+
`usePBCopy({ from: 'your_id' })` will grab the `innerText` from `your_id` element, or `value` if it is an input element.
|
|
@@ -1,2 +1,3 @@
|
|
|
1
1
|
export { default as CopyButtonDefault } from './_copy_button_default.jsx'
|
|
2
|
-
export { default as CopyButtonFrom } from './_copy_button_from.jsx'
|
|
2
|
+
export { default as CopyButtonFrom } from './_copy_button_from.jsx'
|
|
3
|
+
export { default as CopyButtonHook } from './_copy_button_hook.jsx'
|