@stokr/components-library/dist/utils/copyToClipboard.js

STOKR - Components Library

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.CopyToClipBoardTooltip = void 0;
Object.defineProperty(exports, "CopyToClipboard", {
  enumerable: true,
  get: function () {
    return _reactCopyToClipboard.CopyToClipboard;
  }
});
exports.withCopyToClipboard = exports.useCopyToClipboard = exports.copyTextToClipboard = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactCopyToClipboard = require("react-copy-to-clipboard");
var _reactTippy = require("react-tippy");
var _CryptoAddress = require("../components/CryptoAddress/CryptoAddress.styles");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
/**
 * Utility function to copy text to clipboard
 * @param {string} text - The text to copy to clipboard
 * @param {Function} onCopy - Optional callback function called when copy is successful
 * @param {Function} onError - Optional callback function called when copy fails
 * @returns {Promise<boolean>} - Returns true if copy was successful, false otherwise
 */
const copyTextToClipboard = async (text, onCopy, onError) => {
  try {
    // Use the native clipboard API if available
    if (navigator.clipboard && window.isSecureContext) {
      await navigator.clipboard.writeText(text);
      if (onCopy) onCopy(text, true);
      return true;
    } else {
      // Fallback for older browsers or non-secure contexts
      const textArea = document.createElement('textarea');
      textArea.value = text;
      textArea.style.position = 'fixed';
      textArea.style.left = '-999999px';
      textArea.style.top = '-999999px';
      document.body.appendChild(textArea);
      textArea.focus();
      textArea.select();
      const successful = document.execCommand('copy');
      document.body.removeChild(textArea);
      if (successful) {
        if (onCopy) onCopy(text, true);
        return true;
      } else {
        if (onError) onError(new Error('Failed to copy text'));
        return false;
      }
    }
  } catch (error) {
    if (onError) onError(error);
    return false;
  }
};

/**
 * Higher-order component that wraps a component with copy-to-clipboard functionality
 * @param {React.Component} WrappedComponent - The component to wrap
 * @param {Object} options - Configuration options
 * @param {string} options.textProp - The prop name that contains the text to copy (default: 'text')
 * @param {string} options.onCopyProp - The prop name for the onCopy callback (default: 'onCopy')
 * @param {string} options.onErrorProp - The prop name for the onError callback (default: 'onError')
 * @returns {React.Component} - Wrapped component with copy functionality
 */
exports.copyTextToClipboard = copyTextToClipboard;
const withCopyToClipboard = function (WrappedComponent) {
  let options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
  const {
    textProp = 'text',
    onCopyProp = 'onCopy',
    onErrorProp = 'onError'
  } = options;
  return function CopyToClipboardWrapper(props) {
    const text = props[textProp];
    const onCopy = props[onCopyProp];
    const onError = props[onErrorProp];
    const handleCopy = () => {
      if (text) {
        copyTextToClipboard(text, onCopy, onError);
      }
    };
    return /*#__PURE__*/_react.default.createElement(_reactCopyToClipboard.CopyToClipboard, {
      text: text,
      onCopy: handleCopy
    }, /*#__PURE__*/_react.default.createElement(WrappedComponent, props));
  };
};

/**
 * React hook for copy-to-clipboard functionality
 * @param {string} text - The text to copy
 * @returns {Object} - Object containing copy function and copy state
 */
exports.withCopyToClipboard = withCopyToClipboard;
const useCopyToClipboard = text => {
  const [copied, setCopied] = _react.default.useState(false);
  const copy = _react.default.useCallback(async customText => {
    const textToCopy = customText || text;
    const success = await copyTextToClipboard(textToCopy, () => setCopied(true), () => setCopied(false));
    if (success) {
      // Reset copied state after 2 seconds
      setTimeout(() => setCopied(false), 2000);
    }
    return success;
  }, [text]);
  return {
    copy,
    copied
  };
};
exports.useCopyToClipboard = useCopyToClipboard;
const CopyToClipBoardTooltip = _ref => {
  let {
    value,
    buttonStyle
  } = _ref;
  const [copied, setCopied] = (0, _react.useState)(false);
  return /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
    position: "top",
    title: copied ? 'Copied to clipboard!' : 'Click to copy to clipboard.',
    theme: "light",
    arrow: true,
    hideOnClick: false,
    onHidden: () => setCopied(false),
    duration: 200
  }, /*#__PURE__*/_react.default.createElement(_reactCopyToClipboard.CopyToClipboard, {
    text: value,
    onCopy: () => setCopied(true)
  }, /*#__PURE__*/_react.default.createElement(_CryptoAddress.CopyToClipboardButton, {
    style: buttonStyle
  })));
};

// Export the original CopyToClipboard component for direct use if needed
exports.CopyToClipBoardTooltip = CopyToClipBoardTooltip;