@flatbiz/antd/dist/text-overflow-Bk9MC6Cg.js

/*! @flatjs/forge MIT @flatbiz/antd */

import { b as _objectSpread2 } from './_rollupPluginBabelHelpers-BYm17lo8.js';
import { isString } from '@dimjs/lang/is-string';
import { useRef, useMemo, memo } from 'react';
import { classNames } from '@dimjs/utils/class-names/class-names';
import { useSize } from 'ahooks';
import { Tooltip } from 'antd';
import { fbaHooks } from './fba-hooks/index.js';
import { jsxs, jsx } from 'react/jsx-runtime';

var OverflowAuto = function OverflowAuto(props) {
  var rootRef = useRef(null);
  var size = useSize(rootRef);
  var parentNodeWidth = (size === null || size === void 0 ? void 0 : size.width) || 0;
  var hideTextRef = useRef(null);
  var hideTextSize = useSize(hideTextRef);

  // 文本宽度是否溢出
  var isTextOverflow = fbaHooks.useMemoCustom(function () {
    if (!(hideTextSize !== null && hideTextSize !== void 0 && hideTextSize.width) || !parentNodeWidth) return false;
    return hideTextSize.width > parentNodeWidth;
  }, [hideTextSize === null || hideTextSize === void 0 ? void 0 : hideTextSize.width, parentNodeWidth]);
  return /*#__PURE__*/jsxs("div", {
    className: classNames('text-overflow', {
      'tow-trigger': props.onClick
    }),
    ref: rootRef,
    children: [/*#__PURE__*/jsx("span", {
      className: "tow-hidden",
      children: /*#__PURE__*/jsx("span", {
        className: "tow-inner-text",
        ref: hideTextRef,
        children: props.text
      })
    }), /*#__PURE__*/jsx(Tooltip, {
      title: isTextOverflow && !props.hideTip ? props.text : undefined,
      children: /*#__PURE__*/jsx("span", {
        className: "tow-content",
        children: /*#__PURE__*/jsx("span", {
          className: "tow-show-text",
          onClick: props.onClick,
          children: props.text
        })
      })
    })]
  });
};

var OverflowLength = function OverflowLength(props) {
  var rootRef = useRef(null);
  var size = useSize(rootRef);
  var maxLength = props.maxLength;
  var parentNodeWidth = (size === null || size === void 0 ? void 0 : size.width) || 0;
  var text = props.text;
  var hideTextRef = useRef(null);
  var hideTextSize = useSize(hideTextRef);
  var needCut = text.length > maxLength;
  var cutedTextWidth = (hideTextSize === null || hideTextSize === void 0 ? void 0 : hideTextSize.width) || 0;
  var showCustomEllipsis = needCut && cutedTextWidth < parentNodeWidth;
  var isTextOverflow = parentNodeWidth < cutedTextWidth + 1 || needCut;
  var cutValue = text.substring(0, props.maxLength);
  return /*#__PURE__*/jsxs("div", {
    className: classNames('text-overflow', {
      'tow-trigger': props.onClick
    }),
    ref: rootRef,
    children: [/*#__PURE__*/jsx("span", {
      className: "tow-hidden",
      children: /*#__PURE__*/jsx("span", {
        className: "tow-inner-text",
        ref: hideTextRef,
        children: cutValue
      })
    }), /*#__PURE__*/jsx(Tooltip, {
      title: isTextOverflow && !props.hideTip ? text : undefined,
      children: showCustomEllipsis ? /*#__PURE__*/jsx("span", {
        className: "tow-cut-content",
        children: /*#__PURE__*/jsxs("span", {
          className: "tow-show-text",
          onClick: props.onClick,
          children: [cutValue, "..."]
        })
      }) : /*#__PURE__*/jsx("span", {
        className: "tow-content",
        children: /*#__PURE__*/jsx("span", {
          className: "tow-show-text",
          onClick: props.onClick,
          children: text
        })
      })
    })]
  });
};

var OverflowWidth = function OverflowWidth(props) {
  var rootRef = useRef(null);
  var rootSize = useSize(rootRef);
  var maxWidth = props.maxWidth || 0;
  var hideTextRef = useRef(null);
  var hideTextSize = useSize(hideTextRef);
  var handleResult = useMemo(function () {
    if (!(hideTextSize !== null && hideTextSize !== void 0 && hideTextSize.width) || !(rootSize !== null && rootSize !== void 0 && rootSize.width)) return undefined;
    if (rootSize.width < maxWidth) {
      if (hideTextSize.width > rootSize.width) {
        return {
          isTextOverflow: true
        };
      }
    }
    if (hideTextSize.width < maxWidth) return undefined;
    if (hideTextSize.width > maxWidth) {
      return {
        isTextOverflow: true,
        width: maxWidth
      };
    }
    return undefined;
  }, [hideTextSize === null || hideTextSize === void 0 ? void 0 : hideTextSize.width, maxWidth]);
  var isTextOverflow = handleResult === null || handleResult === void 0 ? void 0 : handleResult.isTextOverflow;
  return /*#__PURE__*/jsxs("div", {
    className: classNames('text-overflow', {
      'tow-trigger': props.onClick
    }),
    ref: rootRef,
    children: [/*#__PURE__*/jsx("span", {
      className: "tow-hidden",
      children: /*#__PURE__*/jsx("span", {
        className: "tow-inner-text",
        ref: hideTextRef,
        children: props.text
      })
    }), /*#__PURE__*/jsx(Tooltip, {
      title: isTextOverflow && !props.hideTip ? props.text : undefined,
      children: /*#__PURE__*/jsx("span", {
        className: "tow-content",
        style: {
          width: handleResult === null || handleResult === void 0 ? void 0 : handleResult.width
        },
        children: /*#__PURE__*/jsx("span", {
          className: "tow-show-text",
          onClick: props.onClick,
          children: props.text
        })
      })
    })]
  });
};

var InnerTextOverflow = function InnerTextOverflow(props) {
  if (props.maxLength && isString(props.text)) {
    return /*#__PURE__*/jsx(OverflowLength, _objectSpread2({}, props));
  }
  if (props.maxWidth) {
    return /*#__PURE__*/jsx(OverflowWidth, _objectSpread2({}, props));
  }
  return /*#__PURE__*/jsx(OverflowAuto, _objectSpread2({}, props));
};

/**
 * 内容溢出截取，并在尾部添加...，被截取的添加Tooltip显示完整数据
 * ```
 * 控制文本显示三种方式
 * 1. 通过 maxLength 控制超长
 * 2. 通过 maxWidth 控制超长
 * 3. 与父节点宽度比较，控制超长
 * 4. 优先级  maxLength > maxWidth
 *
 * 注意：
 * 1. 当前节点父节点需要添加 overflow-x: hidden;
 * 2. 如果父节点设置flex-shrink会有影响，可复写flex-shrink: initial;
 * 3. 与 Table columns render结合使用，需要配置ellipsis=true
 *    例如：<Table columns={[{
             ...
             render: (value) => {
               return <TextOverflow text={value} />;
             },
             ellipsis: true,
           }]} />
    4. 与 Table columns render结合使用，如果Table配置了 scroll={{ x: 'max-content' }}后，不能与TextOverflow maxWidth结合使用
 * ```
 */
var TextOverflow = /*#__PURE__*/memo(InnerTextOverflow, function (pre, next) {
  if (pre.text !== next.text || pre.maxLength !== next.maxLength || pre.maxWidth !== pre.maxWidth) {
    return false;
  }
  return true;
});

export { TextOverflow as T };
//# sourceMappingURL=text-overflow-Bk9MC6Cg.js.map