/
index.js
74 lines (59 loc) · 1.64 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
/**
* External dependencies
*/
import classnames from 'classnames';
import { noop } from 'lodash';
/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { speak } from '@wordpress/a11y';
import { Button } from '@wordpress/components';
import { useEffect, useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import { copyToClipboard } from '../../utils';
const CopyPatternButton = ( { isSmall = false, onSuccess = noop, content } ) => {
const [ copied, setCopied ] = useState( false );
if ( ! content ) {
// Grab the pattern markup from hidden input
const blockData = document.getElementById( 'block-data' );
content = JSON.parse( decodeURIComponent( blockData.value ) );
}
const handleClick = ( { target } ) => {
const success = copyToClipboard( content );
setCopied( success );
// Make sure we reset focus in case it was lost in the 'copy' command.
target.focus();
if ( success ) {
onSuccess();
} else {
// TODO Handle error case
}
};
useEffect( () => {
if ( ! copied ) {
return;
}
speak( __( 'Copied pattern to clipboard.', 'wporg-patterns' ) );
const timer = setTimeout( () => setCopied( false ), 20000 );
return () => {
clearTimeout( timer );
};
}, [ copied ] );
let label = __( 'Copy Pattern', 'wporg-patterns' );
if ( isSmall ) {
label = copied ? __( 'Copied', 'wporg-patterns' ) : __( 'Copy', 'wporg-patterns' );
}
const classes = classnames( {
'pattern-copy-button': true,
'is-small-label': isSmall,
} );
return (
<Button className={ classes } isPrimary onClick={ handleClick }>
{ label }
</Button>
);
};
export default CopyPatternButton;