@prefect9/ui/components/CopyField/index.js

UI React components

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.copy = copy;
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = require("react");
var _isType = require("@prefect9/is-type");
var _datetime = _interopRequireDefault(require("@prefect9/datetime"));
var _anim = _interopRequireDefault(require("@prefect9/anim"));
var _Checkmark = _interopRequireDefault(require("./Checkmark"));
var _icons = _interopRequireDefault(require("../../icons"));
var _styles = _interopRequireDefault(require("../../styles.css"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function copy(copyText) {
  const textarea = document.createElement('textarea');
  textarea.style.position = 'fixed';
  textarea.style.top = '-9999px';
  textarea.style.left = '-9999px';
  document.body.appendChild(textarea);
  textarea.value = copyText;
  textarea.focus();
  textarea.select();
  document.execCommand('copy');
  document.body.removeChild(textarea);
}
function CopyField(_ref) {
  let {
    children,
    content,
    value,
    checkmark: userCheckmark,
    prefixContainer = null,
    postfixContainer = null
  } = _ref;
  const [checkmarkTo, setCheckmarkTo] = (0, _react.useState)(null);
  const clickHandler = (0, _react.useCallback)(e => {
    e.preventDefault();
    if (!(0, _isType.isStr)(value)) return;
    copy(value);
    const showCheckmarkTo = new _datetime.default();
    showCheckmarkTo.modify('+2 second');
    setCheckmarkTo(showCheckmarkTo);
  }, [value]);
  const [showBtn, setShowBtn] = (0, _react.useState)(true);
  const [percent, setPercent] = (0, _react.useState)(null);
  (0, _react.useEffect)(() => {
    let now = new _datetime.default();
    const hideCheckmark = () => {
      setCheckmarkTo(null);
      setShowBtn(true);
      setPercent(null);
    };
    if (!checkmarkTo || now.bigThen(checkmarkTo)) return hideCheckmark;
    const animate = () => {
      now = new _datetime.default();
      let delta = now.delta(checkmarkTo);
      if (delta >= 0) return hideCheckmark();
      delta += 2000;
      const newPercent = delta * 100 / 2000;
      setShowBtn(false);
      setPercent(newPercent);
      (0, _anim.default)(animate);
    };
    animate();
  }, [checkmarkTo]);
  let checkmark;
  if ((0, _isType.isFunc)(userCheckmark)) checkmark = userCheckmark(percent !== null && percent !== void 0 ? percent : 0);else if ((0, _isType.isObj)(userCheckmark)) checkmark = userCheckmark;else checkmark = /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkmark.default, {
    percent: percent
  });
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: "prefect9-field prefect9-field__copy",
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
      className: "prefect9-field__container prefect9-field__container__ico-right",
      children: [prefixContainer, /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        className: "prefect9-field__input",
        children: children ? children : content ? content : value
      }), showBtn ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.default.Copy, {
        className: "prefect9-field__copy-btn prefect9-field__ico-right",
        onClick: clickHandler
      }) : checkmark, postfixContainer]
    })
  });
}
var _default = exports.default = CopyField;