@douyinfe/semi-ui 2.1.0-next.0 → 2.1.0

package/lib/cjs/typography/base.js

@@ -1,714 +0,0 @@
-"use strict";
-
-var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
-
-var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
-
-var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-
-_Object$defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = void 0;
-
-var _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
-
-var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
-
-var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
-
-var _bind = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/bind"));
-
-var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
-
-var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
-
-var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _constants = require("@douyinfe/semi-foundation/lib/cjs/typography/constants");
-
-var _typography = _interopRequireDefault(require("./typography"));
-
-var _copyable = _interopRequireDefault(require("./copyable"));
-
-var _lodashEs = require("lodash-es");
-
-var _index = _interopRequireDefault(require("../tooltip/index"));
-
-var _index2 = _interopRequireDefault(require("../popover/index"));
-
-var _util = _interopRequireDefault(require("./util"));
-
-var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
-
-var _localeConsumer = _interopRequireDefault(require("../locale/localeConsumer"));
-
-var _utils = require("../_utils");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof _WeakMap !== "function") return null; var cacheBabelInterop = new _WeakMap(); var cacheNodeInterop = new _WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = _Object$defineProperty && _Object$getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? _Object$getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { _Object$defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-var __rest = void 0 && (void 0).__rest || function (s, e) {
-  var t = {};
-
-  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
-
-  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
-    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
-  }
-  return t;
-};
-
-const prefixCls = _constants.cssClasses.PREFIX;
-const ELLIPSIS_STR = '...';
-
-const wrapperDecorations = (props, content) => {
-  const {
-    mark,
-    code,
-    underline,
-    strong,
-    link,
-    disabled
-  } = props;
-  let wrapped = content;
-
-  const wrap = (isNeeded, tag) => {
-    let wrapProps = {};
-
-    if (!isNeeded) {
-      return;
-    }
-
-    if (typeof isNeeded === 'object') {
-      wrapProps = (0, _assign.default)({}, isNeeded);
-    }
-
-    wrapped = /*#__PURE__*/_react.default.createElement(tag, wrapProps, wrapped);
-  };
-
-  wrap(mark, 'mark');
-  wrap(code, 'code');
-  wrap(underline && !link, 'u');
-  wrap(strong, 'strong');
-  wrap(props.delete, 'del');
-  wrap(link, disabled ? 'span' : 'a');
-  return wrapped;
-};
-
-class Base extends _react.Component {
-  constructor(props) {
-    super(props);
-
-    this.onResize = () => {
-      var _context;
-
-      if (this.rafId) {
-        window.cancelAnimationFrame(this.rafId);
-      }
-
-      this.rafId = window.requestAnimationFrame((0, _bind.default)(_context = this.getEllipsisState).call(_context, this));
-    }; // if need to use js overflowed:
-    // 1. text is expandable 2. expandText need to be shown  3. has extra operation 4. text need to ellipse from mid
-
-
-    this.canUseCSSEllipsis = () => {
-      const {
-        copyable
-      } = this.props;
-      const {
-        expandable,
-        expandText,
-        pos,
-        suffix
-      } = this.getEllipsisOpt();
-      return !expandable && (0, _lodashEs.isUndefined)(expandText) && !copyable && pos === 'end' && !suffix.length;
-    };
-    /**
-     * whether truncated
-     *  rows < = 1 if there is overflow content, return true
-     *  rows > 1 if there is overflow height, return true
-     * @param {Number} rows
-     * @returns {Boolean}
-     */
-
-
-    this.shouldTruncated = rows => {
-      if (!rows || rows < 1) {
-        return false;
-      }
-
-      const updateOverflow = rows <= 1 ? this.wrapperRef.current.scrollWidth > this.wrapperRef.current.clientWidth : this.wrapperRef.current.scrollHeight > this.wrapperRef.current.offsetHeight;
-      return updateOverflow;
-    };
-
-    this.showTooltip = () => {
-      const {
-        isOverflowed,
-        isTruncated,
-        expanded
-      } = this.state;
-      const {
-        showTooltip,
-        expandable,
-        expandText
-      } = this.getEllipsisOpt();
-      const overflowed = !expanded && (isOverflowed || isTruncated);
-      const noExpandText = !expandable && (0, _lodashEs.isUndefined)(expandText);
-      const show = noExpandText && overflowed && showTooltip;
-
-      if (!show) {
-        return show;
-      }
-
-      const defaultOpts = {
-        type: 'tooltip',
-        opts: {}
-      };
-
-      if (typeof showTooltip === 'object') {
-        if (showTooltip.type && showTooltip.type.toLowerCase() === 'popover') {
-          return (0, _lodashEs.merge)({
-            opts: {
-              style: {
-                width: '240px'
-              },
-              showArrow: true
-            }
-          }, showTooltip);
-        }
-
-        return (0, _assign.default)((0, _assign.default)({}, defaultOpts), showTooltip);
-      }
-
-      return defaultOpts;
-    };
-    /**
-     * Triggered when the fold button is clicked to save the latest expanded state
-     * @param {Event} e
-     */
-
-
-    this.toggleOverflow = e => {
-      const {
-        onExpand,
-        expandable,
-        collapsible
-      } = this.getEllipsisOpt();
-      const {
-        expanded
-      } = this.state;
-      onExpand && onExpand(!expanded, e);
-
-      if (expandable && !expanded || collapsible && expanded) {
-        this.setState({
-          expanded: !expanded,
-          first: false
-        });
-      }
-    };
-
-    this.getEllipsisOpt = () => {
-      const {
-        ellipsis
-      } = this.props;
-
-      if (!ellipsis) {
-        return {};
-      }
-
-      const opt = (0, _assign.default)({
-        rows: 1,
-        expandable: false,
-        pos: 'end',
-        suffix: '',
-        showTooltip: false,
-        collapsible: false,
-        expandText: ellipsis.expandable ? this.expandStr : undefined,
-        collapseText: ellipsis.collapsible ? this.collapseStr : undefined
-      }, typeof ellipsis === 'object' ? ellipsis : null);
-      return opt;
-    };
-
-    this.renderExpandable = () => {
-      const {
-        expandText,
-        expandable,
-        collapseText,
-        collapsible
-      } = this.getEllipsisOpt();
-      const {
-        expanded,
-        first
-      } = this.state;
-      const noExpandText = !expandable && (0, _lodashEs.isUndefined)(expandText);
-      const noCollapseText = !collapsible && (0, _lodashEs.isUndefined)(collapseText);
-      let text;
-
-      if (!expanded && !noExpandText) {
-        text = expandText;
-      } else if (expanded && !first && !noCollapseText) {
-        // if expanded is true but the text is initally mounted, we dont show collapseText
-        text = collapseText;
-      }
-
-      if (!noExpandText || !noCollapseText) {
-        return /*#__PURE__*/_react.default.createElement("a", {
-          className: "".concat(prefixCls, "-ellipsis-expand"),
-          key: "expand",
-          ref: this.expandRef,
-          "aria-label": text,
-          onClick: this.toggleOverflow
-        }, text);
-      }
-
-      return null;
-    };
-    /**
-     * 获取文本的缩略class和style
-     *
-     * 截断类型：
-     *  - CSS 截断，仅在 rows=1 且没有 expandable、pos、suffix 时生效
-     *  - JS 截断，应对 CSS 无法阶段的场景
-     * 相关变量
-     *  props:
-     *      - ellipsis:
-     *          - rows
-     *          - expandable
-     *          - pos
-     *          - suffix
-     *  state:
-     *      - isOverflowed，文本是否处于overflow状态
-     *      - expanded，文本是否处于折叠状态
-     *      - isTruncated，文本是否被js截断
-     *
-     * Get the abbreviated class and style of the text
-     *
-     * Truncation type:
-     *  -CSS truncation, which only takes effect when rows = 1 and there is no expandable, pos, suffix
-     *  -JS truncation, dealing with scenarios where CSS cannot stage
-     * related variables
-     *  props:
-     *      -ellipsis:
-     *          -rows
-     *          -expandable
-     *          -pos
-     *          -suffix
-     *  state:
-     *      -isOverflowed, whether the text is in an overflow state
-     *      -expanded, whether the text is in a collapsed state
-     *      -isTruncated, whether the text is truncated by js
-     * @returns {Object}
-     */
-
-
-    this.getEllipsisStyle = () => {
-      const {
-        ellipsis
-      } = this.props;
-      const {
-        expandable
-      } = this.getEllipsisOpt();
-
-      if (!ellipsis) {
-        return {
-          ellipsisCls: '',
-          ellipsisStyle: {} // ellipsisAttr: {}
-
-        };
-      }
-
-      const {
-        rows
-      } = this.getEllipsisOpt();
-      const {
-        isOverflowed,
-        expanded,
-        isTruncated
-      } = this.state;
-      const useCSS = !expanded && this.canUseCSSEllipsis();
-      const ellipsisCls = (0, _classnames.default)({
-        ["".concat(prefixCls, "-ellipsis")]: true,
-        ["".concat(prefixCls, "-ellipsis-single-line")]: rows === 1,
-        ["".concat(prefixCls, "-ellipsis-multiple-line")]: rows > 1,
-        ["".concat(prefixCls, "-ellipsis-overflow-ellipsis")]: rows === 1 && useCSS
-      });
-      const ellipsisStyle = useCSS && rows > 1 ? {
-        WebkitLineClamp: rows
-      } : {};
-      return {
-        ellipsisCls,
-        ellipsisStyle: isOverflowed ? ellipsisStyle : {}
-      };
-    };
-
-    this.renderEllipsisText = opt => {
-      const {
-        suffix
-      } = opt;
-      const {
-        children
-      } = this.props;
-      const {
-        isTruncated,
-        expanded,
-        isOverflowed,
-        ellipsisContent
-      } = this.state;
-
-      if (expanded || !isTruncated) {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children, suffix && suffix.length ? suffix : null);
-      }
-
-      return /*#__PURE__*/_react.default.createElement("span", null, ellipsisContent, suffix);
-    };
-
-    this.state = {
-      editable: false,
-      copied: false,
-      // ellipsis
-      // if text is overflow in container
-      isOverflowed: true,
-      ellipsisContent: null,
-      expanded: false,
-      // if text is truncated with js
-      isTruncated: false,
-      // record if has click expanded
-      first: true,
-      prevChildren: null
-    };
-    this.wrapperRef = /*#__PURE__*/_react.default.createRef();
-    this.expandRef = /*#__PURE__*/_react.default.createRef();
-    this.copyRef = /*#__PURE__*/_react.default.createRef();
-  }
-
-  componentDidMount() {
-    if (this.props.ellipsis) {
-      this.getEllipsisState();
-      window.addEventListener('resize', this.onResize);
-    }
-  }
-
-  static getDerivedStateFromProps(props, prevState) {
-    const {
-      prevChildren
-    } = prevState;
-    const newState = {};
-    newState.prevChildren = props.children;
-
-    if (props.ellipsis && prevChildren !== props.children) {
-      // reset ellipsis state if children update
-      newState.isOverflowed = true;
-      newState.ellipsisContent = null;
-      newState.expanded = false;
-      newState.isTruncated = false;
-      newState.first = true;
-    }
-
-    return newState;
-  }
-
-  componentDidUpdate(prevProps) {
-    // Render was based on outdated refs and needs to be rerun
-    if (this.props.children !== prevProps.children) {
-      this.forceUpdate();
-
-      if (this.props.ellipsis) {
-        this.getEllipsisState();
-      }
-    }
-  }
-
-  componentWillUnmount() {
-    if (this.props.ellipsis) {
-      window.removeEventListener('resize', this.onResize);
-    }
-
-    if (this.rafId) {
-      window.cancelAnimationFrame(this.rafId);
-    }
-  }
-
-  getEllipsisState() {
-    const {
-      rows,
-      suffix,
-      pos
-    } = this.getEllipsisOpt();
-    const {
-      children
-    } = this.props; // wait until element mounted
-
-    if (!this.wrapperRef || !this.wrapperRef.current) {
-      this.onResize();
-      return false;
-    }
-
-    const {
-      ellipsisContent,
-      isOverflowed,
-      isTruncated,
-      expanded
-    } = this.state;
-    const updateOverflow = this.shouldTruncated(rows);
-    const canUseCSSEllipsis = this.canUseCSSEllipsis();
-    const needUpdate = updateOverflow !== isOverflowed;
-
-    if (!rows || rows < 0 || expanded) {
-      return undefined;
-    }
-
-    if (canUseCSSEllipsis) {
-      if (needUpdate) {
-        this.setState({
-          expanded: !updateOverflow
-        });
-      }
-
-      return undefined;
-    }
-
-    const extraNode = [this.expandRef.current, this.copyRef && this.copyRef.current];
-    (0, _warning.default)('children' in this.props && typeof children !== 'string', "[Semi Typography] 'Only children with pure text could be used with ellipsis at this moment.");
-    const content = (0, _util.default)(_reactDom.default.findDOMNode(this.wrapperRef.current), rows, children, extraNode, ELLIPSIS_STR, suffix, pos);
-
-    if (children === content) {
-      this.setState({
-        expanded: true
-      });
-    } else if (ellipsisContent !== content || isOverflowed !== updateOverflow) {
-      this.setState({
-        ellipsisContent: content,
-        isOverflowed: updateOverflow,
-        isTruncated: children !== content
-      });
-    }
-
-    return undefined;
-  }
-
-  renderOperations() {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, this.renderExpandable(), this.renderCopy());
-  }
-
-  renderCopy() {
-    const {
-      copyable,
-      children
-    } = this.props;
-
-    if (!copyable) {
-      return null;
-    }
-
-    let copyContent;
-    let hasObject = false;
-
-    if ((0, _isArray.default)(children)) {
-      copyContent = '';
-      (0, _forEach.default)(children).call(children, value => {
-        if (typeof value === 'object') {
-          hasObject = true;
-        }
-
-        copyContent += String(value);
-      });
-    } else if (typeof children !== 'object') {
-      copyContent = String(children);
-    } else {
-      hasObject = true;
-      copyContent = String(children);
-    }
-
-    (0, _warning.default)(hasObject, 'Children in Typography is a object, it will case a [object Object] mistake when copy to clipboard.');
-    const copyConfig = (0, _assign.default)({
-      content: copyContent,
-      duration: 3
-    }, typeof copyable === 'object' ? copyable : null);
-    return /*#__PURE__*/_react.default.createElement(_copyable.default, (0, _assign.default)({}, copyConfig, {
-      forwardRef: this.copyRef
-    }));
-  }
-
-  renderIcon() {
-    const {
-      icon,
-      size
-    } = this.props;
-
-    if (!icon) {
-      return null;
-    }
-
-    const iconSize = size === 'small' ? 'small' : 'default';
-    return /*#__PURE__*/_react.default.createElement("span", {
-      className: "".concat(prefixCls, "-icon")
-    }, (0, _utils.isSemiIcon)(icon) ? /*#__PURE__*/_react.default.cloneElement(icon, {
-      size: iconSize
-    }) : icon);
-  }
-
-  renderContent() {
-    var _context2, _context3, _context4, _context5;
-
-    const _a = this.props,
-          {
-      component,
-      children,
-      className,
-      type,
-      spacing,
-      disabled,
-      style,
-      ellipsis,
-      icon,
-      size,
-      link,
-      heading
-    } = _a,
-          rest = __rest(_a, ["component", "children", "className", "type", "spacing", "disabled", "style", "ellipsis", "icon", "size", "link", "heading"]);
-
-    const textProps = (0, _lodashEs.omit)(rest, ['strong', 'editable', 'mark', 'copyable', 'underline', 'code', // 'link',
-    'delete']);
-    const iconNode = this.renderIcon();
-    const ellipsisOpt = this.getEllipsisOpt();
-    const {
-      ellipsisCls,
-      ellipsisStyle
-    } = this.getEllipsisStyle();
-    let textNode = ellipsis ? this.renderEllipsisText(ellipsisOpt) : children;
-    const linkCls = (0, _classnames.default)({
-      ["".concat(prefixCls, "-link-text")]: link,
-      ["".concat(prefixCls, "-link-underline")]: this.props.underline && link
-    });
-    textNode = wrapperDecorations(this.props, /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, iconNode, this.props.link ? /*#__PURE__*/_react.default.createElement("span", {
-      className: linkCls
-    }, textNode) : textNode));
-    const hTagReg = /^h[1-6]$/;
-    const wrapperCls = (0, _classnames.default)(className, ellipsisCls, {
-      // [`${prefixCls}-primary`]: !type || type === 'primary',
-      [(0, _concat.default)(_context2 = "".concat(prefixCls, "-")).call(_context2, type)]: type && !link,
-      [(0, _concat.default)(_context3 = "".concat(prefixCls, "-")).call(_context3, size)]: size,
-      ["".concat(prefixCls, "-link")]: link,
-      ["".concat(prefixCls, "-disabled")]: disabled,
-      [(0, _concat.default)(_context4 = "".concat(prefixCls, "-")).call(_context4, spacing)]: spacing,
-      [(0, _concat.default)(_context5 = "".concat(prefixCls, "-")).call(_context5, heading)]: (0, _lodashEs.isString)(heading) && hTagReg.test(heading)
-    });
-    return /*#__PURE__*/_react.default.createElement(_typography.default, (0, _assign.default)({
-      className: wrapperCls,
-      style: (0, _assign.default)((0, _assign.default)({}, style), ellipsisStyle),
-      component: component,
-      forwardRef: this.wrapperRef
-    }, textProps), textNode, this.renderOperations());
-  }
-
-  renderTipWrapper() {
-    const {
-      children
-    } = this.props;
-    const showTooltip = this.showTooltip();
-    const content = this.renderContent();
-
-    if (showTooltip) {
-      const {
-        type,
-        opts
-      } = showTooltip;
-
-      if (type.toLowerCase() === 'popover') {
-        return /*#__PURE__*/_react.default.createElement(_index2.default, (0, _assign.default)({
-          content: children,
-          position: "top"
-        }, opts), content);
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({
-        content: children,
-        position: "top"
-      }, opts), content);
-    } else {
-      return content;
-    }
-  }
-
-  render() {
-    return /*#__PURE__*/_react.default.createElement(_localeConsumer.default, {
-      componentName: "Typography"
-    }, locale => {
-      this.expandStr = locale.expand;
-      this.collapseStr = locale.collapse;
-      return this.renderTipWrapper();
-    });
-  }
-
-}
-
-exports.default = Base;
-Base.propTypes = {
-  children: _propTypes.default.node,
-  copyable: _propTypes.default.oneOfType([_propTypes.default.shape({
-    text: _propTypes.default.string,
-    onCopy: _propTypes.default.func,
-    successTip: _propTypes.default.node,
-    copyTip: _propTypes.default.node
-  }), _propTypes.default.bool]),
-  delete: _propTypes.default.bool,
-  disabled: _propTypes.default.bool,
-  // editable: PropTypes.bool,
-  ellipsis: _propTypes.default.oneOfType([_propTypes.default.shape({
-    rows: _propTypes.default.number,
-    expandable: _propTypes.default.bool,
-    expandText: _propTypes.default.string,
-    onExpand: _propTypes.default.func,
-    suffix: _propTypes.default.string,
-    showTooltip: _propTypes.default.oneOfType([_propTypes.default.shape({
-      type: _propTypes.default.string,
-      opts: _propTypes.default.object
-    }), _propTypes.default.bool]),
-    collapsible: _propTypes.default.bool,
-    collapseText: _propTypes.default.string,
-    pos: _propTypes.default.oneOf(['end', 'middle'])
-  }), _propTypes.default.bool]),
-  mark: _propTypes.default.bool,
-  underline: _propTypes.default.bool,
-  link: _propTypes.default.oneOfType([_propTypes.default.object, _propTypes.default.bool]),
-  spacing: _propTypes.default.oneOf(_constants.strings.SPACING),
-  strong: _propTypes.default.bool,
-  size: _propTypes.default.oneOf(_constants.strings.SIZE),
-  type: _propTypes.default.oneOf(_constants.strings.TYPE),
-  style: _propTypes.default.object,
-  className: _propTypes.default.string,
-  icon: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.string]),
-  heading: _propTypes.default.string,
-  component: _propTypes.default.string
-};
-Base.defaultProps = {
-  children: null,
-  copyable: false,
-  delete: false,
-  disabled: false,
-  // editable: false,
-  ellipsis: false,
-  icon: '',
-  mark: false,
-  underline: false,
-  strong: false,
-  link: false,
-  type: 'primary',
-  spacing: 'normal',
-  size: 'normal',
-  style: {},
-  className: ''
-};