From 082e822e059ddf0084e1400942b2ecf880e0ae02 Mon Sep 17 00:00:00 2001 From: bill bittner <bittner.w@gmail.com> Date: Tue, 3 Jul 2018 10:56:00 -0700 Subject: [PATCH] separated out ClickToCopy component --- client/build/components/ClickToCopy/index.js | 85 ++++++++++++++++++++ client/build/containers/AssetInfo/view.js | 50 ++---------- client/src/components/ClickToCopy/index.jsx | 37 +++++++++ client/src/containers/AssetInfo/view.jsx | 31 +------ 4 files changed, 131 insertions(+), 72 deletions(-) create mode 100644 client/build/components/ClickToCopy/index.js create mode 100644 client/src/components/ClickToCopy/index.jsx diff --git a/client/build/components/ClickToCopy/index.js b/client/build/components/ClickToCopy/index.js new file mode 100644 index 00000000..eebf6845 --- /dev/null +++ b/client/build/components/ClickToCopy/index.js @@ -0,0 +1,85 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireDefault(require("react")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } _setPrototypeOf(subClass.prototype, superClass && superClass.prototype); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || function _getPrototypeOf(o) { return o.__proto__; }; return _getPrototypeOf(o); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +var ClickToCopy = +/*#__PURE__*/ +function (_React$Component) { + function ClickToCopy(props) { + var _this; + + _classCallCheck(this, ClickToCopy); + + _this = _possibleConstructorReturn(this, _getPrototypeOf(ClickToCopy).call(this, props)); + _this.copyToClipboard = _this.copyToClipboard.bind(_assertThisInitialized(_assertThisInitialized(_this))); + return _this; + } + + _createClass(ClickToCopy, [{ + key: "copyToClipboard", + value: function copyToClipboard(event) { + console.log('event:', event); + console.log('event.target:', event.target); + console.log('event.target.id:', event.target.id); + var elementToCopy = event.target.id; + var element = document.getElementById(elementToCopy); + element.select(); + + try { + document.execCommand('copy'); + } catch (err) { + this.setState({ + error: 'Oops, unable to copy' + }); + } + } + }, { + key: "render", + value: function render() { + var _this$props = this.props, + id = _this$props.id, + value = _this$props.value; + return _react.default.createElement("input", { + id: id, + value: value, + onClick: this.copyToClipboard, + type: "text", + className: "click-to-copy", + readOnly: true, + spellCheck: "false" + }); + } + }]); + + _inherits(ClickToCopy, _React$Component); + + return ClickToCopy; +}(_react.default.Component); + +var _default = ClickToCopy; +exports.default = _default; \ No newline at end of file diff --git a/client/build/containers/AssetInfo/view.js b/client/build/containers/AssetInfo/view.js index 69e29d3e..ce21e896 100644 --- a/client/build/containers/AssetInfo/view.js +++ b/client/build/containers/AssetInfo/view.js @@ -19,6 +19,8 @@ var _SpaceBetween = _interopRequireDefault(require("@components/SpaceBetween")); var _AssetShareButtons = _interopRequireDefault(require("@components/AssetShareButtons")); +var _ClickToCopy = _interopRequireDefault(require("@components/ClickToCopy")); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _typeof(obj) { if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } @@ -39,21 +41,6 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.getPrototypeOf || functio function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } -var ClickToCopy = function ClickToCopy(_ref) { - var id = _ref.id, - value = _ref.value, - copyToClipboard = _ref.copyToClipboard; - return _react.default.createElement("input", { - id: id, - value: value, - onClick: copyToClipboard, - type: "text", - className: "click-to-copy", - readOnly: true, - spellCheck: "false" - }); -}; - var AssetInfo = /*#__PURE__*/ function (_React$Component) { @@ -68,24 +55,6 @@ function (_React$Component) { } _createClass(AssetInfo, [{ - key: "copyToClipboard", - value: function copyToClipboard(event) { - console.log('event:', event); - console.log('event.target:', event.target); - console.log('event.target.id:', event.target.id); - var elementToCopy = event.target.id; - var element = document.getElementById(elementToCopy); - element.select(); - - try { - document.execCommand('copy'); - } catch (err) { - this.setState({ - error: 'Oops, unable to copy' - }); - } - } - }, { key: "render", value: function render() { var _this$props$asset = this.props.asset, @@ -122,23 +91,20 @@ function (_React$Component) { label: _react.default.createElement(_Label.default, { value: 'Link:' }), - content: _react.default.createElement(ClickToCopy, { + content: _react.default.createElement(_ClickToCopy.default, { id: 'short-link', - value: "".concat(host, "/").concat(shortId, "/").concat(name, ".").concat(fileExt), - copyToClipboard: this.copyToClipboard + value: "".concat(host, "/").concat(shortId, "/").concat(name, ".").concat(fileExt) }) })), _react.default.createElement(_Row.default, null, _react.default.createElement(_RowLabeled.default, { label: _react.default.createElement(_Label.default, { value: 'Embed:' }), - content: _react.default.createElement("div", null, contentType === 'video/mp4' ? _react.default.createElement(ClickToCopy, { + content: _react.default.createElement("div", null, contentType === 'video/mp4' ? _react.default.createElement(_ClickToCopy.default, { id: 'embed-text-video', - value: "<video width=\"100%\" controls poster=\"".concat(thumbnail, "\" src=\"").concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt, "\"/></video>"), - copyToClipboard: this.copyToClipboard - }) : _react.default.createElement(ClickToCopy, { + value: "<video width=\"100%\" controls poster=\"".concat(thumbnail, "\" src=\"").concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt, "\"/></video>") + }) : _react.default.createElement(_ClickToCopy.default, { id: 'embed-text-image', - value: "<img src=\"".concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt, "\"/>"), - copyToClipboard: this.copyToClipboard + value: "<img src=\"".concat(host, "/").concat(claimId, "/").concat(name, ".").concat(fileExt, "\"/>") })) })), _react.default.createElement(_Row.default, null, _react.default.createElement(_SpaceBetween.default, null, _react.default.createElement(_reactRouterDom.Link, { className: "link--primary", diff --git a/client/src/components/ClickToCopy/index.jsx b/client/src/components/ClickToCopy/index.jsx new file mode 100644 index 00000000..17068cbb --- /dev/null +++ b/client/src/components/ClickToCopy/index.jsx @@ -0,0 +1,37 @@ +import React from 'react'; + +class ClickToCopy extends React.Component { + constructor (props) { + super(props); + this.copyToClipboard = this.copyToClipboard.bind(this); + } + copyToClipboard (event) { + console.log('event:', event); + console.log('event.target:', event.target); + console.log('event.target.id:', event.target.id); + const elementToCopy = event.target.id; + const element = document.getElementById(elementToCopy); + element.select(); + try { + document.execCommand('copy'); + } catch (err) { + this.setState({error: 'Oops, unable to copy'}); + } + } + render () { + const {id, value} = this.props; + return ( + <input + id={id} + value={value} + onClick={this.copyToClipboard} + type='text' + className='click-to-copy' + readOnly + spellCheck='false' + /> + ); + } +} + +export default ClickToCopy; diff --git a/client/src/containers/AssetInfo/view.jsx b/client/src/containers/AssetInfo/view.jsx index 9ce7d090..35971427 100644 --- a/client/src/containers/AssetInfo/view.jsx +++ b/client/src/containers/AssetInfo/view.jsx @@ -5,39 +5,13 @@ import RowLabeled from '@components/RowLabeled'; import Row from '@components/Row'; import SpaceBetween from '@components/SpaceBetween'; import AssetShareButtons from '@components/AssetShareButtons'; - -const ClickToCopy = ({id, value, copyToClipboard}) => { - return ( - <input - id={id} - value={value} - onClick={copyToClipboard} - type='text' - className='click-to-copy' - readOnly - spellCheck='false' - /> - ); -}; +import ClickToCopy from '@components/ClickToCopy'; class AssetInfo extends React.Component { constructor (props) { super(props); this.copyToClipboard = this.copyToClipboard.bind(this); } - copyToClipboard (event) { - console.log('event:', event); - console.log('event.target:', event.target); - console.log('event.target.id:', event.target.id); - const elementToCopy = event.target.id; - const element = document.getElementById(elementToCopy); - element.select(); - try { - document.execCommand('copy'); - } catch (err) { - this.setState({error: 'Oops, unable to copy'}); - } - } render () { const { asset: { shortId, claimData : { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host } } } = this.props; return ( @@ -81,7 +55,6 @@ class AssetInfo extends React.Component { <ClickToCopy id={'short-link'} value={`${host}/${shortId}/${name}.${fileExt}`} - copyToClipboard={this.copyToClipboard} /> } /> @@ -98,13 +71,11 @@ class AssetInfo extends React.Component { <ClickToCopy id={'embed-text-video'} value={`<video width="100%" controls poster="${thumbnail}" src="${host}/${claimId}/${name}.${fileExt}"/></video>`} - copyToClipboard={this.copyToClipboard} /> ) : ( <ClickToCopy id={'embed-text-image'} value={`<img src="${host}/${claimId}/${name}.${fileExt}"/>`} - copyToClipboard={this.copyToClipboard} /> )} </div>