diff --git a/package.json b/package.json index c417bf0..65b3d2d 100644 --- a/package.json +++ b/package.json @@ -108,8 +108,9 @@ "normalize.css": "^4.1.1", "postcss-loader": "^0.9.0", "query-string": "^4.1.0", - "react": "^15.0.0", + "react": "^15.1.0", "react-climb-social": "^2.0.0-alpha.4", + "react-copy-to-clipboard": "^4.1.0", "react-dom": "^15.0.0", "react-redux": "^4.0.0", "react-router": "^2.2.0", diff --git a/src/components/EmbedCode/EmbedCode.js b/src/components/EmbedCode/EmbedCode.js index 2806859..4aac1a3 100644 --- a/src/components/EmbedCode/EmbedCode.js +++ b/src/components/EmbedCode/EmbedCode.js @@ -1,5 +1,6 @@ import React, { PropTypes } from 'react'; import format from 'string-template'; +import CopyToClipboard from 'react-copy-to-clipboard'; const template = ` @@ -10,13 +11,43 @@ const template = ` `.replace(/\r?\n|\r/g, ''); -const EmbedCode = ({ collectionId: id, layoutName: layout }) => ( - {format(template, { id, layout })} -); +export class EmbedCode extends React.Component { + static propTypes = { + collectionId: PropTypes.string.isRequired, + layoutName: PropTypes.string.isRequired, + onCopy: PropTypes.func, + }; -EmbedCode.propTypes = { - collectionId: PropTypes.string.isRequired, - layoutName: PropTypes.string.isRequired, -}; + state = { + copied: false, + }; + + getText() { + const { collectionId: id, layoutName: layout } = this.props; + return format(template, { id, layout }); + } + + handleCopy() { + const { onCopy } = this.props; + if (onCopy) onCopy(); + this.setState({copied: true}, () => setTimeout(() => this.setState({copied: false}), 100)); + } + + render() { + const text = this.getText(); + const { copied } = this.state; + + return ( +
+ this.handleCopy()} + > + {text} + +
+ ); + } +} export default EmbedCode;