blockstack-ui/dist/components/copy/index.js

Blockstack UI components built with css-in-js and styled-system.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.Copy = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

require("core-js/modules/es6.function.bind");

var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));

var _react = _interopRequireDefault(require("react"));

var _ = require("../../");

var _ContentCopyIcon = _interopRequireDefault(require("mdi-react/ContentCopyIcon"));

var _reactPowerplug = require("react-powerplug");

var _reactCopyToClipboard = require("react-copy-to-clipboard");

var Copy = function Copy(_ref) {
  var _ref$value = _ref.value,
      value = _ref$value === void 0 ? '' : _ref$value,
      rest = (0, _objectWithoutPropertiesLoose2.default)(_ref, ["value"]);
  return value === '' ? console.error('You need to pass a value to be copied') : _react.default.createElement(_reactPowerplug.State, {
    initial: {
      copied: false
    }
  }, function (_ref2) {
    var copied = _ref2.state.copied,
        setState = _ref2.setState;

    var handleCopy = function handleCopy() {
      setState(function (state) {
        return {
          copied: !state.copied
        };
      });
    };

    var resetState = function resetState() {
      setState(function () {
        return {
          copied: false
        };
      });
    };

    return _react.default.createElement(_reactPowerplug.Hover, null, function (_ref3) {
      var hovered = _ref3.hovered,
          bind = _ref3.bind;
      return _react.default.createElement(_.Flex, (0, _extends2.default)({
        color: "hsl(205, 30%, 70%)" /// abstract out
        ,
        alignItems: "center",
        justifyContent: "center",
        opacity: hovered ? 1 : 0.5,
        cursor: "pointer"
      }, bind, {
        onMouseLeave: function onMouseLeave() {
          bind.onMouseLeave();

          if (copied) {
            resetState();
          }
        }
      }, rest), _react.default.createElement(_.Tooltip, {
        text: copied ? 'Copied!' : 'Copy'
      }, _react.default.createElement(_reactCopyToClipboard.CopyToClipboard, {
        text: value,
        onCopy: handleCopy
      }, _react.default.createElement(_.Flex, {
        py: 2,
        px: 3
      }, _react.default.createElement(_ContentCopyIcon.default, {
        size: 18
      })))));
    });
  });
};

exports.Copy = Copy;