antd-mobile 5.38.0 → 5.38.1

package/2x/bundle/antd-mobile.cjs.development.js

@@ -13774,6 +13774,113 @@ function betweenInclusive(i2, e2, n2) {
 !function(i2) {
   i2[i2.unit_1 = 1] = "unit_1", i2[i2.unit_2 = 2] = "unit_2", i2[i2.unit_4 = 4] = "unit_4";
 }(n || (n = {}));
+const ELLIPSIS_TEXT = "...";
+const measureStyle = {
+  visibility: "hidden",
+  whiteSpace: "inherit",
+  lineHeight: "inherit",
+  fontSize: "inherit"
+};
+function useMeasure(containerRef, content, rows, direction, expanded, expandNode, collapseNode) {
+  const contentChars = React$1.useMemo(() => runes(content), [content]);
+  const [maxHeight, setMaxHeight] = React$1.useState(0);
+  const [walkingIndexes, setWalkingIndexes] = React$1.useState([0, 0]);
+  const midIndex = Math.ceil((walkingIndexes[0] + walkingIndexes[1]) / 2);
+  const [status, setStatus] = React$1.useState(
+    100
+    /* STABLE_NO_ELLIPSIS */
+  );
+  const singleRowMeasureRef = React$1.useRef(null);
+  const fullMeasureRef = React$1.useRef(null);
+  const midMeasureRef = React$1.useRef(null);
+  const startMeasure = useEvent(() => {
+    setStatus(
+      1
+      /* PREPARE */
+    );
+    setWalkingIndexes([0, direction === "middle" ? Math.ceil(contentChars.length / 2) : contentChars.length]);
+  });
+  React$1.useLayoutEffect(() => {
+    startMeasure();
+  }, [contentChars, rows]);
+  React$1.useLayoutEffect(() => {
+    var _a, _b;
+    if (status === 1) {
+      const fullMeasureHeight = ((_a = fullMeasureRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+      const singleRowMeasureHeight = ((_b = singleRowMeasureRef.current) === null || _b === void 0 ? void 0 : _b.offsetHeight) || 0;
+      const rowMeasureHeight = singleRowMeasureHeight * rows;
+      if (fullMeasureHeight <= rowMeasureHeight) {
+        setStatus(
+          100
+          /* STABLE_NO_ELLIPSIS */
+        );
+      } else {
+        setMaxHeight(rowMeasureHeight);
+        setStatus(
+          2
+          /* MEASURE_WALKING */
+        );
+      }
+    }
+  }, [status]);
+  React$1.useLayoutEffect(() => {
+    var _a;
+    if (status === 2) {
+      const diff = walkingIndexes[1] - walkingIndexes[0];
+      const midHeight = ((_a = midMeasureRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+      if (diff > 1) {
+        if (midHeight > maxHeight) {
+          setWalkingIndexes([walkingIndexes[0], midIndex]);
+        } else {
+          setWalkingIndexes([midIndex, walkingIndexes[1]]);
+        }
+      } else {
+        if (midHeight > maxHeight) {
+          setWalkingIndexes([walkingIndexes[0], walkingIndexes[0]]);
+        } else {
+          setWalkingIndexes([walkingIndexes[1], walkingIndexes[1]]);
+        }
+        setStatus(
+          99
+          /* STABLE_ELLIPSIS */
+        );
+      }
+    }
+  }, [status, walkingIndexes]);
+  const renderContent = (index2) => {
+    const prefixContent = contentChars.slice(0, index2);
+    const suffixContent = contentChars.slice(contentChars.length - index2);
+    return React$1.createElement(React$1.Fragment, null, direction === "start" && React$1.createElement(React$1.Fragment, null, expandNode, ELLIPSIS_TEXT), direction !== "start" && prefixContent.join(""), direction === "middle" && React$1.createElement(React$1.Fragment, null, ELLIPSIS_TEXT, expandNode, ELLIPSIS_TEXT), direction !== "end" && suffixContent.join(""), direction === "end" && React$1.createElement(React$1.Fragment, null, ELLIPSIS_TEXT, expandNode));
+  };
+  const finalContent = React$1.useMemo(() => {
+    if (expanded || status === 100) {
+      return React$1.createElement(React$1.Fragment, {
+        key: "display"
+      }, content, status === 99 && collapseNode);
+    }
+    if (status === 99) {
+      return renderContent(midIndex);
+    }
+    return null;
+  }, [expanded, status, content, collapseNode, midIndex]);
+  const allNodes = React$1.createElement(React$1.Fragment, null, status === 1 && React$1.createElement("div", {
+    key: "full",
+    "aria-hidden": true,
+    ref: fullMeasureRef,
+    style: measureStyle
+  }, content, expandNode), status === 1 && React$1.createElement("div", {
+    key: "stable",
+    "aria-hidden": true,
+    ref: singleRowMeasureRef,
+    style: measureStyle
+  }, " "), status === 2 && React$1.createElement("div", {
+    key: "walking-mid",
+    "aria-hidden": true,
+    ref: midMeasureRef,
+    style: measureStyle
+  }, renderContent(midIndex)), finalContent);
+  return [allNodes, startMeasure];
+}
 const classPrefix$U = `adm-ellipsis`;
 const defaultProps$F = {
   direction: "end",
@@ -13788,140 +13895,40 @@ const defaultProps$F = {
 };
 const Ellipsis = (p) => {
   const props = mergeProps(defaultProps$F, p);
+  const {
+    content,
+    direction,
+    rows,
+    expandText,
+    collapseText,
+    stopPropagationForActionButtons,
+    onContentClick,
+    defaultExpanded
+  } = props;
   const rootRef = React$1.useRef(null);
-  const expandElRef = React$1.useRef(null);
-  const collapseElRef = React$1.useRef(null);
-  const [ellipsised, setEllipsised] = React$1.useState({});
-  const [expanded, setExpanded] = React$1.useState(props.defaultExpanded);
-  const [exceeded, setExceeded] = React$1.useState(false);
-  const chars = React$1.useMemo(() => runes(props.content), [props.content]);
-  function getSubString(start2, end) {
-    return chars.slice(start2, end).join("");
-  }
-  function calcEllipsised() {
-    var _a, _b;
-    const root2 = rootRef.current;
-    if (!root2)
-      return;
-    const originDisplay = root2.style.display;
-    root2.style.display = "block";
-    const originStyle = window.getComputedStyle(root2);
-    const container = document.createElement("div");
-    const styleNames = Array.prototype.slice.apply(originStyle);
-    styleNames.forEach((name) => {
-      container.style.setProperty(name, originStyle.getPropertyValue(name));
-    });
-    root2.style.display = originDisplay;
-    container.style.height = "auto";
-    container.style.minHeight = "auto";
-    container.style.maxHeight = "auto";
-    container.style.textOverflow = "clip";
-    container.style.webkitLineClamp = "unset";
-    container.style.display = "block";
-    const lineHeight = pxToNumber(originStyle.lineHeight);
-    const maxHeight = Math.floor(lineHeight * (props.rows + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
-    container.innerText = props.content;
-    document.body.appendChild(container);
-    if (container.offsetHeight <= maxHeight) {
-      setExceeded(false);
-    } else {
-      let check = function(left, right) {
-        if (right - left <= 1) {
-          if (props.direction === "end") {
-            return {
-              leading: getSubString(0, left) + "..."
-            };
-          } else {
-            return {
-              tailing: "..." + getSubString(right, end)
-            };
-          }
-        }
-        const middle2 = Math.round((left + right) / 2);
-        if (props.direction === "end") {
-          container.innerHTML = getSubString(0, middle2) + "..." + actionText;
-        } else {
-          container.innerHTML = actionText + "..." + getSubString(middle2, end);
-        }
-        if (container.offsetHeight <= maxHeight) {
-          if (props.direction === "end") {
-            return check(middle2, right);
-          } else {
-            return check(left, middle2);
-          }
-        } else {
-          if (props.direction === "end") {
-            return check(left, middle2);
-          } else {
-            return check(middle2, right);
-          }
-        }
-      }, checkMiddle = function(leftPart, rightPart) {
-        if (leftPart[1] - leftPart[0] <= 1 && rightPart[1] - rightPart[0] <= 1) {
-          return {
-            leading: getSubString(0, leftPart[0]) + "...",
-            tailing: "..." + getSubString(rightPart[1], end)
-          };
-        }
-        const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
-        const rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
-        container.innerHTML = getSubString(0, leftPartMiddle) + "..." + actionText + "..." + getSubString(rightPartMiddle, end);
-        if (container.offsetHeight <= maxHeight) {
-          return checkMiddle([leftPartMiddle, leftPart[1]], [rightPart[0], rightPartMiddle]);
-        } else {
-          return checkMiddle([leftPart[0], leftPartMiddle], [rightPartMiddle, rightPart[1]]);
-        }
-      };
-      setExceeded(true);
-      const end = props.content.length;
-      const collapseEl = typeof props.collapseText === "string" ? props.collapseText : (_a = collapseElRef.current) === null || _a === void 0 ? void 0 : _a.innerHTML;
-      const expandEl = typeof props.expandText === "string" ? props.expandText : (_b = expandElRef.current) === null || _b === void 0 ? void 0 : _b.innerHTML;
-      const actionText = expanded ? collapseEl : expandEl;
-      const middle = Math.floor((0 + end) / 2);
-      const ellipsised2 = props.direction === "middle" ? checkMiddle([0, middle], [middle, end]) : check(0, end);
-      setEllipsised(ellipsised2);
-    }
-    document.body.removeChild(container);
-  }
-  useResizeEffect(calcEllipsised, rootRef);
-  useIsomorphicLayoutEffect$3(() => {
-    calcEllipsised();
-  }, [props.content, props.direction, props.rows, props.expandText, props.collapseText]);
-  const expandActionElement = !!props.expandText && withStopPropagation(props.stopPropagationForActionButtons, React$1.createElement("a", {
-    ref: expandElRef,
+  const [expanded, setExpanded] = React$1.useState(defaultExpanded);
+  const expandNode = expandText ? withStopPropagation(stopPropagationForActionButtons, React$1.createElement("a", {
     onClick: () => {
       setExpanded(true);
     }
-  }, props.expandText));
-  const collapseActionElement = !!props.collapseText && withStopPropagation(props.stopPropagationForActionButtons, React$1.createElement("a", {
-    ref: collapseElRef,
+  }, expandText)) : null;
+  const collapseNode = collapseText ? withStopPropagation(stopPropagationForActionButtons, React$1.createElement("a", {
     onClick: () => {
       setExpanded(false);
     }
-  }, props.collapseText));
-  const renderContent = () => {
-    if (!exceeded)
-      return props.content;
-    if (expanded)
-      return React$1.createElement(React$1.Fragment, null, props.content, collapseActionElement);
-    return React$1.createElement(React$1.Fragment, null, ellipsised.leading, expandActionElement, ellipsised.tailing);
-  };
+  }, collapseText)) : null;
+  const [measureNodes, forceResize] = useMeasure(rootRef, content, rows, direction, expanded, expandNode, collapseNode);
+  useResizeEffect(forceResize, rootRef);
   return withNativeProps(props, React$1.createElement("div", {
     ref: rootRef,
     className: classPrefix$U,
     onClick: (e2) => {
       if (e2.target === e2.currentTarget) {
-        props.onContentClick(e2);
+        onContentClick(e2);
       }
     }
-  }, renderContent()));
+  }, measureNodes));
 };
-function pxToNumber(value) {
-  if (!value)
-    return 0;
-  const match = value.match(/^\d*(\.\d*)?/);
-  return match ? Number(match[0]) : 0;
-}
 const EmptyIcon = (props) => {
   return withNativeProps(props, React$1.createElement("svg", {
     viewBox: "0 0 64 41"