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

package/lib/cjs/typography/base.js

@@ -0,0 +1,714 @@
+"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: ''
+};