@douyinfe/semi-ui/lib/cjs/typography/copyable.js

A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.Copyable = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _index = _interopRequireDefault(require("../tooltip/index"));
var _constants = require("@douyinfe/semi-foundation/lib/cjs/typography/constants");
var _copyTextToClipboard = _interopRequireDefault(require("copy-text-to-clipboard"));
var _classnames = _interopRequireDefault(require("classnames"));
var _function = require("@douyinfe/semi-foundation/lib/cjs/utils/function");
var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
var _semiIcons = require("@douyinfe/semi-icons");
var _isEnterPress = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/isEnterPress"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const prefixCls = _constants.cssClasses.PREFIX;
class Copyable extends _react.default.PureComponent {
  constructor(props) {
    super(props);
    this.copy = e => {
      const {
        content,
        duration,
        onCopy
      } = this.props;
      const res = (0, _copyTextToClipboard.default)(content);
      onCopy && onCopy(e, content, res);
      this.setCopied(content, duration);
    };
    this.setCopied = (item, timer) => {
      this.setState({
        copied: true,
        item
      });
      this._timeId = setTimeout(() => {
        this.resetCopied();
      }, timer * 1000);
    };
    this.resetCopied = () => {
      if (this._timeId) {
        clearTimeout(this._timeId);
        this._timeId = null;
        this.setState({
          copied: false,
          item: ''
        });
      }
    };
    this.renderSuccessTip = () => {
      const {
        successTip
      } = this.props;
      if (typeof successTip !== 'undefined') {
        return successTip;
      }
      return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
        componentName: "Typography"
      }, locale => (/*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_semiIcons.IconTick, null), locale.copied)));
    };
    this.renderCopyIcon = () => {
      const {
        icon
      } = this.props;
      const copyProps = {
        role: "button",
        tabIndex: 0,
        onClick: this.copy,
        onKeyPress: e => (0, _isEnterPress.default)(e) && this.copy(e)
      };
      {/* TODO: replace `a` tag with `span` in next major version
         NOTE: may have effect on style */
      }
      const defaultIcon =
      /*#__PURE__*/
      // eslint-disable-next-line jsx-a11y/anchor-is-valid
      _react.default.createElement("a", {
        className: `${prefixCls}-action-copy-icon`
      }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconCopy, Object.assign({
        onClick: this.copy
      }, copyProps)));
      return /*#__PURE__*/_react.default.isValidElement(icon) ? /*#__PURE__*/_react.default.cloneElement(icon, copyProps) : defaultIcon;
    };
    this.state = {
      copied: false,
      item: ''
    };
  }
  componentWillUnmount() {
    if (this._timeId) {
      clearTimeout(this._timeId);
      this._timeId = null;
    }
  }
  render() {
    const {
      style,
      className,
      forwardRef,
      copyTip,
      render
    } = this.props;
    const {
      copied
    } = this.state;
    const finalCls = (0, _classnames.default)(className, {
      [`${prefixCls}-action-copy`]: !copied,
      [`${prefixCls}-action-copied`]: copied
    });
    if (render) {
      return render(copied, this.copy, this.props);
    }
    return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
      componentName: "Typography"
    }, locale => (/*#__PURE__*/_react.default.createElement("span", {
      style: Object.assign({
        marginLeft: '4px'
      }, style),
      className: finalCls,
      ref: forwardRef
    }, copied ? this.renderSuccessTip() : (/*#__PURE__*/_react.default.createElement(_index.default, {
      content: typeof copyTip !== 'undefined' ? copyTip : locale.copy
    }, this.renderCopyIcon())))));
  }
}
exports.Copyable = Copyable;
Copyable.propTypes = {
  content: _propTypes.default.string,
  onCopy: _propTypes.default.func,
  successTip: _propTypes.default.node,
  copyTip: _propTypes.default.node,
  duration: _propTypes.default.number,
  style: _propTypes.default.object,
  className: _propTypes.default.string,
  icon: _propTypes.default.node
};
Copyable.defaultProps = {
  content: '',
  onCopy: _function.noop,
  duration: 3,
  style: {},
  className: ''
};
var _default = exports.default = Copyable;