@douyinfe/semi-ui 2.34.0 → 2.34.1-alpha.3

package/lib/es/typography/util.js

@@ -1,7 +1,5 @@
-import _omit from "lodash/omit";
 import ReactDOM from 'react-dom';
 import React from 'react';
-
 /**
  * The logic of JS for text truncation is referenced from antd typography
  * https://github.com/ant-design/ant-design/blob/master/components/typography/util.tsx
@@ -9,6 +7,7 @@ import React from 'react';
  * For more thinking and analysis about this function, please refer to Feishu document
  * https://bytedance.feishu.cn/docs/doccnqovjjyoKm2U5O13bj30aTh
  */
+
 let ellipsisContainer;
 
 function pxToNumber(value) {
@@ -51,7 +50,6 @@ const getRenderText = function (originEle, rows) {
   const lineHeight = pxToNumber(originStyle.lineHeight);
   const maxHeight = Math.round(lineHeight * (rows + 1) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom)); // Set shadow
 
-  const maxWidth = parseInt(originStyle.width);
   ellipsisContainer.setAttribute('style', originCSS);
   ellipsisContainer.style.position = 'fixed';
   ellipsisContainer.style.left = '0';
@@ -65,32 +63,20 @@ const getRenderText = function (originEle, rows) {
   ReactDOM.render( /*#__PURE__*/React.createElement(React.Fragment, null), ellipsisContainer); // Check if ellipsis in measure div is height enough for content
 
   function inRange() {
-    if (originStyle.whiteSpace === 'nowrap') {
-      return ellipsisContainer.scrollWidth <= maxWidth;
-    }
-
+    // console.log('inrange?', ellipsisContainer.scrollHeight, ellipsisContainer.scrollHeight < maxHeight)
     return ellipsisContainer.scrollHeight < maxHeight;
   } // ========================= Find match ellipsis content =========================
   // Create origin content holder
 
 
   const ellipsisContentHolder = document.createElement('span');
-  const textNode = document.createTextNode(content);
-  ellipsisContentHolder.appendChild(textNode);
+  const ellipsisTextNode = document.createTextNode(suffix);
+  ellipsisContentHolder.appendChild(ellipsisTextNode);
+  ellipsisContainer.appendChild(ellipsisContentHolder);
+  fixedContent.map(node => node && ellipsisContainer.appendChild(node.cloneNode(true))); // Append before fixed nodes
 
-  if (suffix.length > 0) {
-    const ellipsisTextNode = document.createTextNode(suffix);
-    ellipsisContentHolder.appendChild(ellipsisTextNode);
-  }
-
-  ellipsisContainer.appendChild(ellipsisContentHolder); // Expand node needs to be added only when text needTruncated
-
-  Object.values(_omit(fixedContent, 'expand')).map(node => node && ellipsisContainer.appendChild(node.cloneNode(true)));
-
-  function appendExpandNode() {
-    ellipsisContainer.innerHTML = '';
-    ellipsisContainer.appendChild(ellipsisContentHolder);
-    Object.values(fixedContent).map(node => node && ellipsisContainer.appendChild(node.cloneNode(true)));
+  function appendChildNode(node) {
+    ellipsisContentHolder.insertBefore(node, ellipsisTextNode);
   }
 
   function getCurrentText(text, pos) {
@@ -100,7 +86,7 @@ const getRenderText = function (originEle, rows) {
       return ellipsisStr;
     }
 
-    if (ellipsisPos === 'end') {
+    if (ellipsisPos === 'end' || pos > end - pos) {
       return text.slice(0, pos) + ellipsisStr;
     }
 
@@ -122,8 +108,8 @@ const getRenderText = function (originEle, rows) {
         const currentStepText = getCurrentText(fullText, step);
         textNode.textContent = currentStepText;
 
-        if (inRange()) {
-          return currentStepText;
+        if (inRange() || !currentStepText) {
+          return step === fullText.length ? fullText : currentStepText;
         }
       }
     } else if (endLoc === 0) {
@@ -137,17 +123,9 @@ const getRenderText = function (originEle, rows) {
     return measureText(textNode, fullText, startLoc, midLoc, lastSuccessLoc);
   }
 
-  let resText = content; // First judge whether the total length of fullText, plus suffix (possible)
-  // and copied icon (possible) meets expectations？ 
-  // If it does not meet expectations, add an expand button to find the largest  content that meets size limit
-  // 首先判断总文本长度，加上可能有的 suffix，复制按钮长度，看结果是否符合预期
-  // 如果不符合预期，则再加上展开按钮，找最大符合尺寸的内容
-
-  if (!inRange()) {
-    appendExpandNode();
-    resText = measureText(textNode, content, 0, ellipsisPos === 'middle' ? Math.floor(content.length / 2) : content.length);
-  }
-
+  const textNode = document.createTextNode(content);
+  appendChildNode(textNode);
+  const resText = measureText(textNode, content);
   ellipsisContainer.innerHTML = '';
   return resText;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.34.0",
+    "version": "2.34.1-alpha.3",
     "description": "",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -17,12 +17,12 @@
         "lib/*"
     ],
     "dependencies": {
-        "@douyinfe/semi-animation": "2.34.0",
-        "@douyinfe/semi-animation-react": "2.34.0",
-        "@douyinfe/semi-foundation": "2.34.0",
-        "@douyinfe/semi-icons": "2.34.0",
-        "@douyinfe/semi-illustrations": "2.34.0",
-        "@douyinfe/semi-theme-default": "2.34.0",
+        "@douyinfe/semi-animation": "2.34.1-alpha.3",
+        "@douyinfe/semi-animation-react": "2.34.1-alpha.3",
+        "@douyinfe/semi-foundation": "2.34.1-alpha.3",
+        "@douyinfe/semi-icons": "2.34.1-alpha.3",
+        "@douyinfe/semi-illustrations": "2.34.1-alpha.3",
+        "@douyinfe/semi-theme-default": "2.34.1-alpha.3",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -69,7 +69,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "2b01016b32a9da9a7e50424235dd5fc5c5fae3c2",
+    "gitHead": "fc0c751427122de35d3bafb6e6d83a5f815d5f8e",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",
@@ -107,6 +107,7 @@
         "terser-webpack-plugin": "^4.2.3",
         "through2": "^4.0.2",
         "ts-loader": "^5.4.5",
+        "webpack": "^4.46.0",
         "webpackbar": "^5.0.0-3"
     }
 }