wix-style-react/dist/src/providers/useCopyClipboard/useCopyClipboard.js

wix-style-react

"use strict";

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

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

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

var _react = require("react");

var _createToggleSelection = require("./createToggleSelection");

/**
 * @typedef {Object} Clipboard
 * @prop {boolean} isCopied - a return boolean with status of clipboard action
 * @prop {function} copyToClipboard - a return function that allows to initiate copying
 * @prop {function} resetState - an optional return function
 */

/**
 * A custom hook for copying to clipboard. Returns copying to clipboard status and function to initiate copying to clipboard
 * @param {Object} props -  an object for value, onCopy, and resetTimeout props
 * @param {string} props.value -  a string that should be copied to clipboard
 * @param {function} [props.onCopy] - an optional parameter to apply additional logic when copying to clipboard
 * @param {number} [props.resetTimeout] - an optional parameter to set interval which after copying to clipboard will reset status
 * @return {Clipboard}
 */
function useCopyClipboard(_ref) {
  var value = _ref.value,
      onCopy = _ref.onCopy,
      resetTimeout = _ref.resetTimeout;

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

  var copyToClipboard = (0, _react.useCallback)(function () {
    var range = document.createRange();
    var copyElement = createCopyElement(value);
    var selection = window.getSelection();

    var _onCopy = function _onCopy(event) {
      event.stopPropagation();

      if (onCopy) {
        onCopy();
      }
    };

    var registerCopyEvent = function registerCopyEvent() {
      copyElement.addEventListener('copy', _onCopy);
      document.body.appendChild(copyElement);
    };

    var copy = function copy() {
      var _createToggleSelectio = (0, _createToggleSelection.createToggleSelection)(),
          unselectCurrent = _createToggleSelectio.unselectCurrent,
          selectPrevious = _createToggleSelectio.selectPrevious;

      unselectCurrent();
      range.selectNodeContents(copyElement);
      selection.addRange(range);
      setCopied(document.execCommand('copy'));
      selectPrevious();
    };

    var cleanup = function cleanup() {
      if (selection) {
        if (typeof selection.removeRange === 'function') {
          selection.removeRange(range);
        } else {
          selection.removeAllRanges();
        }

        if (copyElement) {
          copyElement.removeEventListener('copy', _onCopy);
          document.body.removeChild(copyElement);
        }
      }
    };

    registerCopyEvent();
    copy();
    cleanup();
  }, [value, onCopy]);
  var reset = (0, _react.useCallback)(function () {
    setCopied(null);
  }, [setCopied]);
  (0, _react.useEffect)(function () {
    var timeout;

    if (isCopied && resetTimeout) {
      timeout = setTimeout(reset, resetTimeout);
    }

    return function () {
      clearTimeout(timeout);
    };
  }, [isCopied, reset, resetTimeout]);
  (0, _react.useEffect)(reset, [value, reset]);
  return {
    isCopied: isCopied,
    copyToClipboard: copyToClipboard,
    reset: reset
  };
}

var createCopyElement = function createCopyElement(value) {
  var copyElement = document.createElement('span');
  copyElement.textContent = value;
  copyElement.style = {
    // reset browser defaults
    all: 'unset',
    // make content copyable
    whiteSpace: 'pre',
    MozUserSelect: 'text',
    msUserSelect: 'text',
    userSelect: 'text',
    // hide element above screen
    position: 'fixed',
    top: '-100%',
    opacity: 0
  };
  return copyElement;
};

var _default = useCopyClipboard;
exports["default"] = _default;