@mapbox/react-copy-button - npm Package Compare versions

Comparing version 0.4.6 to 0.5.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+<a name="0.5.0"></a>
+# [0.5.0](https://github.com/mapbox/mapbox-react-components/compare/@mapbox/react-copy-button@0.4.6...@mapbox/react-copy-button@0.5.0) (2018-04-05)
+
+
+### Features
+
+* **react-copiable:** Add react-copiable component ([#306](https://github.com/mapbox/mapbox-react-components/issues/306)) ([0bf5305](https://github.com/mapbox/mapbox-react-components/commit/0bf5305))
+
+
+
+
 <a name="0.4.6"></a>
@@ -8,0 +19,0 @@ ## [0.4.6](https://github.com/mapbox/mapbox-react-components/compare/@mapbox/react-copy-button@0.4.5...@mapbox/react-copy-button@0.4.6) (2018-02-26)

dist/copy-button.js

@@ -23,5 +23,5 @@ 'use strict';
 
-var _execcommandCopy = require('execcommand-copy');
+var _clipboardMin = require('clipboard/dist/clipboard.min.js');
 
-var _execcommandCopy2 = _interopRequireDefault(_execcommandCopy);
+var _clipboardMin2 = _interopRequireDefault(_clipboardMin);
 
@@ -67,18 +67,30 @@ var _reactIconButton = require('@mapbox/react-icon-button');
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = CopyButton.__proto__ || Object.getPrototypeOf(CopyButton)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      actionCompleted: false
-    }, _this.copy = function () {
-      if (_this.props.onCopy) {
-        _this.props.onCopy(_this.props.text);
+      showingFeedback: false
+    }, _this.handleCopyButtonClick = function () {
+      // Clipboard.js attaches its own click handlers for copying
+      var _this$props = _this.props,
+          onCopy = _this$props.onCopy,
+          text = _this$props.text;
+
+      if (onCopy) {
+        onCopy(text);
       }
-      _execcommandCopy2.default.copy(_this.props.text);
-      _this.completeAction();
-    }, _this.completeAction = function () {
-      _this.setState({ actionCompleted: true });
+      _this.showFeedback();
+    }, _this.showFeedback = function () {
+      _this.setState({ showingFeedback: true });
       _this.revertTimer = setTimeout(function () {
-        _this.setState({ actionCompleted: false });
+        _this.setState({ showingFeedback: false });
       }, _this.props.feedbackTime);
     }, _this.setContainer = function (element) {
+      if (!element) return;
+      var textEl = _this.props.textEl;
+
       _this.container = element;
+      if (!textEl && _clipboardMin2.default.isSupported()) {
+        _this.setClipboard(element);
+      }
     }, _this.getContainer = function () {
       return _this.container;
+    }, _this.setClipboard = function (element) {
+      _this.clipboard = new _clipboardMin2.default(element);
     }, _temp), _possibleConstructorReturn(_this, _ret);
@@ -90,7 +102,28 @@ }
   _createClass(CopyButton, [{
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      if (this.props.textEl && _clipboardMin2.default.isSupported()) {
+        this.setClipboard(this.props.textEl);
+      }
+    }
+  }, {
     key: 'componentWillUnmount',
     value: function componentWillUnmount() {
       if (this.revertTimer) clearTimeout(this.revertTimer);
+      if (this.clipboard) {
+        this.clipboard.destroy();
+      }
     }
   }, {
+    key: 'componentWillReceiveProps',
+    value: function componentWillReceiveProps(nextProps) {
+      var copyAvailable = _clipboardMin2.default.isSupported();
+      if (nextProps.textEl !== this.props.textEl && copyAvailable) {
+        this.setClipboard(nextProps.textEl);
+      }
+      if (!copyAvailable && this.clipboard) {
+        this.clipboard.destroy();
+      }
+    }
+  }, {
     key: 'render',
@@ -100,23 +133,25 @@ value: function render() {
           state = this.state;
+      // don't render the button if you can't use it to copy,
+      // or are in Node during a static build
 
-      // Do not try to execute execcomandCopy functions in Node during a static
-      // build.
-
-      if (typeof window !== 'undefined' && !_execcommandCopy2.default.available()) {
+      if (typeof document !== 'undefined' && !_clipboardMin2.default.isSupported()) {
         return null;
       }
 
-      var text = state.actionCompleted ? 'Copied!' : 'Copy';
-      var icon = state.actionCompleted ? 'check' : 'clipboard';
+      var tooltipText = state.showingFeedback ? 'Copied!' : 'Copy';
+      var icon = state.showingFeedback ? 'check' : 'clipboard';
+
       var extraProps = (0, _frontendUtilOmit2.default)(this.props, CopyButton.propNames);
       var iconButtonProps = props.iconButtonProps;
       var tooltipProps = {
-        content: text
+        content: tooltipText
       };
 
-      if (props.iconButtonProps.tooltipProps) tooltipProps = (0, _xtend2.default)(tooltipProps, props.iconButtonProps.tooltipProps);
+      if (props.iconButtonProps.tooltipProps) {
+        tooltipProps = (0, _xtend2.default)(tooltipProps, props.iconButtonProps.tooltipProps);
+      }
       iconButtonProps.tooltipProps = tooltipProps;
 
       var button = null;
-      if (state.actionCompleted) {
+      if (state.showingFeedback) {
         // When the action is complete, we switch from the tooltip-powered IconButton
@@ -146,3 +181,3 @@ // to a regular old button a regular old Popover. We do this so we can
               { className: 'block txt-s' },
-              text
+              tooltipText
             )
@@ -153,3 +188,3 @@ )
         button = _react2.default.createElement(_reactIconButton2.default, _extends({
-          onClick: this.copy,
+          onClick: this.handleCopyButtonClick,
           icon: icon
@@ -159,5 +194,12 @@ }, iconButtonProps, extraProps));
 
+      // data-clipboard-text and the container ref are used by clipboard.js
+      // to copy text if you do not pass in a textEl as a prop.
+      // Note that this wont have as nice a failure mode.
       return _react2.default.createElement(
         'div',
-        { ref: this.setContainer, className: 'inline-block' },
+        {
+          ref: this.setContainer,
+          className: 'inline-block',
+          'data-clipboard-text': this.props.text
+        },
         button
@@ -174,2 +216,7 @@ );
   text: _propTypes2.default.string.isRequired,
+  /**
+   * Pass in an element containing text to copy instead of the raw text to provide a better fallback,
+   * where the text is selected for you if execcopy is not supported
+   */
+  textEl: _propTypes2.default.object,
   /** The interval for which `Copied!` is displayed to the user. */
@@ -185,3 +232,3 @@ feedbackTime: _propTypes2.default.number,
 };
-CopyButton.propNames = ['text', 'feedbackTime', 'onCopy', 'iconButtonProps'];
+CopyButton.propNames = ['text', 'feedbackTime', 'onCopy', 'iconButtonProps', 'textEl'];
 CopyButton.defaultProps = {
@@ -188,0 +235,0 @@ feedbackTime: 800,

package.json

 {
   "name": "@mapbox/react-copy-button",
-  "version": "0.4.6",
+  "version": "0.5.0",
   "description": "A Mapbox React component.",
@@ -12,5 +12,5 @@ "files": [
     "@mapbox/react-icon": "^0.2.2",
-    "@mapbox/react-icon-button": "^0.3.8",
-    "@mapbox/react-popover": "^0.6.4",
-    "execcommand-copy": "^1.3.0"
+    "@mapbox/react-icon-button": "^0.3.9",
+    "@mapbox/react-popover": "^0.6.5",
+    "clipboard": "^2.0.0"
   },
@@ -17,0 +17,0 @@ "peerDependencies": {

Fixed alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

14318

increased by23.31%

Number of package files

5

increased by25%

Lines of code

204

increased by39.73%

Number of medium supply chain risk alerts

0

decreased by-100%

Dependency changes

• + Addedclipboard@^2.0.0

• + Addedclipboard@2.0.11(transitive)

• + Addeddelegate@3.2.0(transitive)

• + Addedgood-listener@1.2.2(transitive)

• + Addedselect@1.1.2(transitive)

• + Addedtiny-emitter@2.1.0(transitive)

• - Removedexeccommand-copy@^1.3.0

• - Removedexeccommand-copy@1.3.0(transitive)

• Updated@mapbox/react-icon-button@^0.3.9

• Updated@mapbox/react-popover@^0.6.5