93 lines
2.9 KiB
JavaScript
93 lines
2.9 KiB
JavaScript
import { Component } from "@wordpress/element";
|
|
import { safeDecodeURIComponent, addQueryArgs } from "@wordpress/url";
|
|
import { TextControl, Button, Flex } from "@wordpress/components";
|
|
import { withSelect } from "@wordpress/data";
|
|
import { useCopyToClipboard } from "@wordpress/compose";
|
|
import { store as editorStore } from "@wordpress/editor";
|
|
import { __ } from "@wordpress/i18n";
|
|
|
|
import CONSTANTS from "./constants";
|
|
const { META_KEY, QUERY_PARAM } = CONSTANTS;
|
|
|
|
/**
|
|
* Taken from PostPublishPanelPostpublish (@wordpress/editor)
|
|
*/
|
|
|
|
const CopyButton = ({ text, onCopy, children, ...props }) => {
|
|
const ref = useCopyToClipboard(text, onCopy);
|
|
return (
|
|
<Button variant="secondary" ref={ref} {...props}>
|
|
{children}
|
|
</Button>
|
|
);
|
|
};
|
|
|
|
class CopyUrl extends Component {
|
|
constructor() {
|
|
super(...arguments);
|
|
this.state = {
|
|
showCopyConfirmation: false,
|
|
};
|
|
this.onCopy = this.onCopy.bind(this);
|
|
this.onSelectInput = this.onSelectInput.bind(this);
|
|
}
|
|
|
|
componentWillUnmount() {
|
|
clearTimeout(this.dismissCopyConfirmation);
|
|
}
|
|
|
|
onCopy() {
|
|
this.setState({
|
|
showCopyConfirmation: true,
|
|
});
|
|
|
|
clearTimeout(this.dismissCopyConfirmation);
|
|
this.dismissCopyConfirmation = setTimeout(() => {
|
|
this.setState({
|
|
showCopyConfirmation: false,
|
|
});
|
|
}, 4000);
|
|
}
|
|
|
|
onSelectInput(event) {
|
|
event.target.select();
|
|
}
|
|
|
|
render() {
|
|
const url = addQueryArgs(this.props.postLink, {
|
|
[QUERY_PARAM]: this.props.secretKey,
|
|
});
|
|
return (
|
|
<div>
|
|
<label htmlFor="sppp-link-field" className="screen-reader-text">
|
|
{__("Share this URL", "sharable-password-protected-posts")}
|
|
</label>
|
|
<Flex className="sppp__link-copy">
|
|
<TextControl
|
|
id="sppp-link-field"
|
|
className="sppp__link-field"
|
|
readOnly
|
|
label={__("Secret URL:", "sharable-password-protected-posts")}
|
|
value={safeDecodeURIComponent(url)}
|
|
onFocus={this.onSelectInput}
|
|
/>
|
|
<CopyButton text={url} onCopy={this.onCopy} className="sppp__copy-button">
|
|
{this.state.showCopyConfirmation
|
|
? __("Copied!", "sharable-password-protected-posts")
|
|
: __("Copy", "sharable-password-protected-posts")}
|
|
</CopyButton>
|
|
</Flex>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withSelect((select) => {
|
|
const { getEditedPostAttribute, getPermalink } = select(editorStore);
|
|
|
|
return {
|
|
postLink: getPermalink(),
|
|
secretKey: getEditedPostAttribute("meta")[META_KEY],
|
|
};
|
|
})(CopyUrl);
|