@alicloud/console-components-truncate/esm/components/Truncate.js

React component for Alibaba Cloud.

import React, { useMemo } from 'react';
import { SizeMe } from 'react-sizeme';
import classnames from 'classnames';
import { WRAPPER_CLASS_NAME } from '../constants.js';
import { Wrapper } from '../styles/Truncate.js';
import TruncateByLength from './TruncateByLength.js';
import TruncateByWidth from './TruncateByWidth.js';

/**
 * 一般来说，都可以通过react-sizeme的refreshMode:"debounce"来提高首屏渲染性能，
 * 避免react-sizeme对DOM的度量阻塞渲染。
 * 保险起见，我们通过一个配置来开启这个行为，不要影响已有用户
 */
var debouncedMesure = function () {
  if (window['console-components-truncate-mesure'] === 'debounce') {
    return true;
  }
  return false;
}();
function NewWrapper(props) {
  var className = props.className,
    children = props.children,
    style = props.style;
  return /*#__PURE__*/React.createElement(Wrapper, {
    className: classnames(WRAPPER_CLASS_NAME, className),
    style: style
  }, children);
}
function Truncate(props) {
  var children = props.children,
    _a = props.type,
    type = _a === void 0 ? 'length' : _a,
    value = props.value,
    threshold = props.threshold,
    tooltip = props.tooltip,
    showTooltip = props.showTooltip,
    _b = props.align,
    align = _b === void 0 ? 'r' : _b,
    _c = props.omission,
    omission = _c === void 0 ? '...' : _c,
    tooltipMaxWidth = props.tooltipMaxWidth,
    className = props.className,
    style = props.style,
    updaterRef = props.updaterRef,
    isOverflowChange = props.isOverflowChange,
    popupStyle = props.popupStyle,
    popupClassName = props.popupClassName,
    patchPopupProps = props.patchPopupProps;
  var actualShowTooltip = useMemo(function () {
    // 旧版组件支持tooltip prop，且'enable'表示true
    if (showTooltip !== undefined) {
      return showTooltip;
    }
    if (tooltip !== undefined) {
      return tooltip === true || tooltip === 'enable';
    }
    return true;
  }, [showTooltip, tooltip]);
  var actualThreshold = useMemo(function () {
    if (threshold !== undefined) {
      return threshold;
    }
    if (value !== undefined) {
      // 旧版API： value可以为30、'30'、'30px'
      if (typeof value === 'number') {
        // value可以是40
        return value;
      }
      var parsed = parseInt(value, 10);
      if (!Number.isNaN(parsed)) {
        // value可以是'40'
        return parsed;
      }
      if (type === 'width' && typeof value === 'string') {
        // 仅当type为'width'时，value可以是'40px'这种【非纯数字字符串】
        return value;
      }
      // eslint-disable-next-line no-console
      console.error("type can't be string unless type is 'width', using default: 30");
    }
    return 30;
  }, [threshold, type, value]);
  var TruncateComponent = useMemo(function () {
    if (type === 'length' &&
    // type 视为 'length' 的前提：
    typeof children === 'string' && actualThreshold !== 'auto') {
      return /*#__PURE__*/React.createElement(Wrapper, {
        className: className,
        style: style
      }, /*#__PURE__*/React.createElement(TruncateByLength, {
        threshold: actualThreshold,
        omission: omission,
        showTooltip: actualShowTooltip,
        align: align,
        tooltipMaxWidth: tooltipMaxWidth,
        popupStyle: popupStyle,
        popupClassName: popupClassName,
        patchPopupProps: patchPopupProps
      }, children));
    }
    // 其余情况 type 视为 'width'
    if (actualThreshold === 'auto') {
      return /*#__PURE__*/React.createElement(SizeMe, {
        noPlaceholder: true,
        refreshMode: debouncedMesure ? 'debounce' : undefined
      }, function (_a) {
        var size = _a.size;
        /**
         * 获得可用宽度（即Wrapper的宽度）
         * 设置一个超大的Threshold，使得react-sizeme能拿到完整内容的宽度
         */
        var actualActualThreshold = !size.width ? 5000 : size.width;
        return /*#__PURE__*/React.createElement(Wrapper, {
          className: className,
          style: style
        }, /*#__PURE__*/React.createElement(TruncateByWidth, {
          threshold: actualActualThreshold,
          omission: omission,
          showTooltip: actualShowTooltip,
          align: align,
          tooltipMaxWidth: tooltipMaxWidth,
          updaterRef: updaterRef,
          isOverflowChange: isOverflowChange,
          popupStyle: popupStyle,
          popupClassName: popupClassName,
          patchPopupProps: patchPopupProps
        }, children));
      });
    }
    return /*#__PURE__*/React.createElement(NewWrapper, {
      className: className,
      style: style
    }, /*#__PURE__*/React.createElement(TruncateByWidth, {
      threshold: actualThreshold,
      omission: omission,
      showTooltip: actualShowTooltip,
      align: align,
      tooltipMaxWidth: tooltipMaxWidth,
      updaterRef: updaterRef,
      isOverflowChange: isOverflowChange,
      popupStyle: popupStyle,
      popupClassName: popupClassName,
      patchPopupProps: patchPopupProps
    }, children));
  }, [children, type, align, omission, tooltipMaxWidth, className, style, updaterRef, isOverflowChange, popupStyle, popupClassName, patchPopupProps, actualShowTooltip, actualThreshold]);
  return TruncateComponent;
}

export { Truncate as default };