@sky-mavis/tanto-widget/dist/cjs/components/copy-button/CopyButton.cjs

Tanto Widget

'use strict';

var jsxRuntime = require('@emotion/react/jsx-runtime');
var react = require('@emotion/react');
var react$1 = require('motion/react');
var m = require('motion/react-m');
var react$2 = require('react');
var CheckCircleFillIcon = require('../../assets/CheckCircleFillIcon.cjs');
var CopyIcon = require('../../assets/CopyIcon.cjs');
var Box = require('../box/Box.cjs');
var Button = require('../button/Button.cjs');

function _interopNamespaceDefault(e) {
  var n = Object.create(null);
  if (e) {
    Object.keys(e).forEach(function (k) {
      if (k !== 'default') {
        var d = Object.getOwnPropertyDescriptor(e, k);
        Object.defineProperty(n, k, d.get ? d : {
          enumerable: true,
          get: function () { return e[k]; }
        });
      }
    });
  }
  n.default = e;
  return Object.freeze(n);
}

var m__namespace = /*#__PURE__*/_interopNamespaceDefault(m);

const DEFAULT_ANIMATION_DURATION = 1_500;
function useClipboard(value, duration = DEFAULT_ANIMATION_DURATION) {
  const [copied, setCopied] = react$2.useState(false);
  const handleCopy = react$2.useCallback(async () => {
    if (copied || !value) return;
    try {
      await navigator.clipboard.writeText(value.trim());
      setCopied(true);
    } catch {}
  }, [value, copied]);
  react$2.useEffect(() => {
    if (!copied) return;
    const timer = setTimeout(() => setCopied(false), duration);
    return () => clearTimeout(timer);
  }, [copied, duration]);
  return {
    copied,
    handleCopy
  };
}
function CopyButton({
  intent = 'secondary',
  size = 'xsmall',
  value,
  children,
  ...rest
}) {
  const theme = react.useTheme();
  const {
    copied,
    handleCopy
  } = useClipboard(value);
  const containerStyles = {
    align: 'center',
    gap: children ? 4 : 0,
    mx: children ? 0 : -2
  };
  return jsxRuntime.jsx(Button.Button, {
    intent: intent,
    size: size,
    onClick: handleCopy,
    disabled: !value,
    ...rest,
    children: jsxRuntime.jsxs(Box.Box, {
      ...containerStyles,
      children: [jsxRuntime.jsx(react$1.AnimatePresence, {
        mode: "popLayout",
        initial: false,
        children: jsxRuntime.jsx(m__namespace.div, {
          initial: {
            opacity: 0,
            scale: 0.5,
            rotate: copied ? -180 : 180
          },
          animate: {
            opacity: 1,
            scale: 1,
            rotate: 0
          },
          exit: {
            opacity: 0,
            scale: 0.5,
            rotate: copied ? 180 : -180
          },
          transition: {
            type: 'spring',
            stiffness: 300,
            damping: copied ? 20 : 30
          },
          children: copied ? jsxRuntime.jsx(CheckCircleFillIcon.CheckCircleFillIcon, {
            color: theme.successColor,
            size: 18
          }) : jsxRuntime.jsx(CopyIcon.CopyIcon, {
            size: 18
          })
        }, copied.toString())
      }), children && jsxRuntime.jsx("div", {
        children: children
      })]
    })
  });
}

exports.CopyButton = CopyButton;