@douyinfe/semi-ui 2.3.0-beta.0 → 2.4.0

package/treeSelect/index.tsx

@@ -23,7 +23,8 @@ import {
     getValueOrKey,
     normalizeKeyList,
     calcDisabledKeys,
-    normalizeValue
+    normalizeValue,
+    updateKeys,
 } from '@douyinfe/semi-foundation/tree/treeUtil';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/treeSelect/constants';
 import { numbers as popoverNumbers } from '@douyinfe/semi-foundation/popover/constants';
@@ -362,7 +363,7 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
         if (
             treeData &&
             props.motion &&
-            !isEqual(new Set(Object.keys(newState.keyEntities)), new Set(Object.keys(prevState.keyEntities)))
+            !isEqual(Object.keys(newState.keyEntities), Object.keys(prevState.keyEntities))
         ) {
             if (prevProps && props.motion) {
                 newState.motionKeys = new Set([]);
@@ -432,11 +433,15 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                 );
             } else if (treeData) {
                 // If `treeData` changed, we also need check it
-                newState.selectedKeys = findKeysForValues(
-                    normalizeValue(props.value, withObject) || '',
-                    valueEntities,
-                    isMultiple
-                );
+                if (props.value) {
+                    newState.selectedKeys = findKeysForValues(
+                        normalizeValue(props.value, withObject) || '',
+                        valueEntities,
+                        isMultiple
+                    );
+                } else {
+                    newState.selectedKeys = updateKeys(prevState.selectedKeys, keyEntities);
+                }
             }
         } else {
             // checkedKeys: multiple mode controlled || data changed
@@ -456,11 +461,15 @@ class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState> {
                 );
             } else if (treeData) {
                 // If `treeData` changed, we also need check it
-                checkedKeyValues = findKeysForValues(
-                    normalizeValue(props.value, withObject) || [],
-                    valueEntities,
-                    isMultiple
-                );
+                if (props.value) {
+                    checkedKeyValues = findKeysForValues(
+                        normalizeValue(props.value, withObject) || [],
+                        valueEntities,
+                        isMultiple
+                    );
+                } else {
+                    checkedKeyValues = updateKeys(prevState.checkedKeys, keyEntities);
+                }
             }
 
             if (checkedKeyValues) {

package/typography/_story/typography.stories.js

@@ -309,6 +309,14 @@ export const EllipsisMultiple = () => (
       Web 应用。 区别于其他的设计系统而言，Semi Design
       以用户中心、内容优先、设计人性化为设计理念，具有四大优势。
     </Paragraph>
+    <br />
+    <Paragraph ellipsis={{ rows: 3, expandable: true }} style={{ width: 300, whiteSpace: 'pre-line' }}>
+      {'这是一个多行截断的\n例子： Semi Design 是由互娱社区\n前端团队与 UED 团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有四大优势。'}
+    </Paragraph>
+    <br />
+    <Paragraph ellipsis={{ rows: 3, expandable: true }} style={{ width: 300, whiteSpace: 'pre-wrap' }}>
+      {'这是一个多行截断的\n例子： Semi Des    ign 是由互               娱社区\n前端团队与 UED      团队共同设计开发并维护的设计系统。设计系统包含设计语言以及一整套可复用的前端组件，帮助设计师与开发者更容易地打造高质量的、用户体验一致的、符合设计规范的 Web 应用。 区别于其他的设计系统而言，Semi Design 以用户中心、内容优先、设计人性化为设计理念，具有四大优势。'}
+    </Paragraph>
   </div>
 );
 

package/typography/util.tsx

@@ -63,7 +63,6 @@ const getRenderText = (
 
     // clean up css overflow
     ellipsisContainer.style.textOverflow = 'clip';
-    ellipsisContainer.style.whiteSpace = 'normal';
     ellipsisContainer.style.webkitLineClamp = 'none';
 
     // Render fake container

package/upload/fileCard.tsx

@@ -163,8 +163,8 @@ class FileCard extends PureComponent<FileCardProps> {
                 {showReplace && replace}
                 {showPicInfo && picInfo}
                 {!disabled && (
-                    <div className={closeCls}>
-                        <IconClose tabIndex={0} role="button" size="extra-small" onClick={e => this.onRemove(e)} />
+                    <div className={closeCls} onClick={e => this.onRemove(e)}>
+                        <IconClose tabIndex={0} role="button" size="extra-small" />
                     </div>
                 )}
                 {this.renderPicValidateMsg()}