@storybook/design-system/dist/components/clipboard/Clipboard.js

Storybook design system

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Clipboard = void 0;

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

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

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

var _copyToClipboard = _interopRequireDefault(require("copy-to-clipboard"));

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

var _theming = require("@storybook/theming");

var _TooltipNote = require("../tooltip/TooltipNote");

var _WithTooltip = _interopRequireDefault(require("../tooltip/WithTooltip"));

var _excluded = ["children", "toCopy", "getCopyContent", "copyOptions", "resetTimeout", "renderCopiedTooltip", "renderUncopiedTooltip"];

function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }

function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }

var Tooltip = ( /*#__PURE__*/0, _theming.styled)(_WithTooltip["default"], process.env.NODE_ENV === "production" ? {
  target: "e1lzlo4x0"
} : {
  target: "e1lzlo4x0",
  label: "Tooltip"
})(process.env.NODE_ENV === "production" ? {
  name: "e0dnmk",
  styles: "cursor:pointer"
} : {
  name: "e0dnmk",
  styles: "cursor:pointer",
  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
});

var Clipboard = function Clipboard(_ref) {
  var children = _ref.children,
      toCopy = _ref.toCopy,
      getCopyContent = _ref.getCopyContent,
      copyOptions = _ref.copyOptions,
      resetTimeout = _ref.resetTimeout,
      renderCopiedTooltip = _ref.renderCopiedTooltip,
      renderUncopiedTooltip = _ref.renderUncopiedTooltip,
      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);

  var _useState = (0, _react.useState)(false),
      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
      copied = _useState2[0],
      setCopied = _useState2[1];

  (0, _react.useEffect)(function () {
    var timeoutId;

    if (copied && timeoutId) {
      clearTimeout(timeoutId);
    }

    if (copied && resetTimeout) {
      timeoutId = setTimeout(function () {
        return setCopied(false);
      }, resetTimeout);
    }

    return function () {
      clearTimeout(timeoutId);
    };
  }, [copied]);

  var copy = function copy() {
    if ((0, _copyToClipboard["default"])(toCopy || getCopyContent(), copyOptions)) {
      setCopied(true);
    }
  };

  return /*#__PURE__*/_react["default"].createElement(Tooltip, (0, _extends2["default"])({
    onClick: copy,
    hasChrome: false,
    tooltip: copied ? renderCopiedTooltip : renderUncopiedTooltip
  }, props), typeof children === 'function' ? children(copied) : children);
};

exports.Clipboard = Clipboard;
Clipboard.defaultProps = {
  copyOptions: undefined,
  renderCopiedTooltip: function renderCopiedTooltip() {
    return /*#__PURE__*/_react["default"].createElement(_TooltipNote.TooltipNote, {
      note: "Copied"
    });
  },
  renderUncopiedTooltip: function renderUncopiedTooltip() {
    return /*#__PURE__*/_react["default"].createElement(_TooltipNote.TooltipNote, {
      note: "Copy to clipboard"
    });
  },
  resetTimeout: 3000,
  toCopy: undefined,
  getCopyContent: function getCopyContent() {
    return '';
  }
};