Merge branch 'main' into release

DouyinFE · Jan 7, 2025 · af6186c · af6186c
2 parents 45726b4 + d9e931c
commit af6186c
Show file tree

Hide file tree

Showing 12 changed files with 88 additions and 147 deletions.
diff --git a/content/navigation/tabs/index-en-US.md b/content/navigation/tabs/index-en-US.md
@@ -824,7 +824,7 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
 
 -   **Why typography with ellipses in Tabs doesn't work?**
 
-    Because when Tabs renders TabPane, the default is to render display: none. At this point these components cannot get the correct width or height values. It is recommended to enable lazyRender in version 1.x, or disable keepDOM. Version 0.x needs to use tabList notation.
+    Because when Tabs renders TabPane, the default is to render display: none. At this point these components cannot get the correct width or height values. It is recommended to enable lazyRender in or disable keepDOM.
 
 -   **Why are the height or width values wrong when using components such as Collapse/Collapsible/Resizable Table in Tabs?**
 

diff --git a/content/navigation/tabs/index.md b/content/navigation/tabs/index.md
@@ -840,7 +840,7 @@ WAI-ARIA: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/
 
 -   **为什么在 Tabs 中使用 Typography 的省略 ellipsis 失效？**
 
-    因为 Tabs 渲染 TabPane 时，默认是全部渲染 display: none。此时这些组件无法获取到正确的宽度或高度值。建议 1.x 的版本开启 lazyRender，或者关闭 keepDOM。0.x 的版本需要使用 tabList 的写法。
+    因为 Tabs 渲染 TabPane 时，默认是全部渲染 display: none。此时这些组件无法获取到正确的宽度或高度值。建议开启 lazyRender，或者关闭 keepDOM。
 
 -   **为什么在 Tabs 中使用 Collapse/Collapsible/Resizable Table 等组件的高度或宽度值不对？**
 

diff --git a/content/start/changelog/index-en-US.md b/content/start/changelog/index-en-US.md
@@ -16,6 +16,14 @@ Version：Major.Minor.Patch (follow the **Semver** specification)
 
 ---
 
+#### 🎉 2.72.2 (2025-01-06)
+- 【Fix】
+    - Fix the problem that Cascader's placeHolder and searchPlaceholder cannot be updated dynamically
+
+#### 🎉 2.72.1 (2025-01-02)
+- 【Fix】
+    - Fixed the problem of Typography’s JS omitting calculation error when display is none [#2656](https://github.com/DouyinFE/semi-design/pull/2656)
+
 #### 🎉 2.72.0 (2024-12-20)
 - 【Fix】
   - Fix the problem of JsonViewer using Chinese input method incorrectly [#2616](https://github.com/DouyinFE/semi-design/pull/2616)

diff --git a/content/start/changelog/index.md b/content/start/changelog/index.md
@@ -13,6 +13,14 @@ Semi 版本号遵循 **Semver** 规范（主版本号-次版本号-修订版本
 -   修订版本号（patch）：仅会进行 bugfix，发布时间不限
 -   不同版本间的详细关系，可查阅 [FAQ](/zh-CN/start/faq)
 
+#### 🎉 2.72.2 (2025-01-06)
+- 【Fix】
+    - 修复 Cascader 的 placeHolder，searchPlaceholder 无法动态更新问题 [#2663](https://github.com/DouyinFE/semi-design/pull/2663)
+
+#### 🎉 2.72.1 (2025-01-02)
+- 【Fix】
+    - 修复在 display 为 none 时，Typography 的JS 省略计算错误问题 [#2656](https://github.com/DouyinFE/semi-design/pull/2656)
+
 #### 🎉 2.72.0 (2024-12-20)
 - 【Fix】
   - 修复 JsonViewer使用中文输入法错误的问题 [#2616](https://github.com/DouyinFE/semi-design/pull/2616)

diff --git a/packages/semi-foundation/button/iconButton.scss b/packages/semi-foundation/button/iconButton.scss
@@ -4,6 +4,14 @@
 $module: #{$prefix}-button;
 
 .#{$module} {
+    @keyframes #{$prefix}-animation-rotate {
+        from {
+            transform: rotate(0);
+        }
+        to {
+            transform: rotate(360deg);
+        }
+    }
     &.#{$module}-with-icon {
         display: inline-flex;
         align-items: center;

diff --git a/packages/semi-foundation/dragMove/foundation.ts b/packages/semi-foundation/dragMove/foundation.ts
@@ -46,9 +46,21 @@ export default class DragMoveFoundation<P = Record<string, any>, S = Record<stri
         this.element = element;
         this.element.style.position = 'absolute';
         this.handler.style.cursor = 'move';
+        this._registerStartEvent();
+    }
+
+    _registerStartEvent = () => {
+        this.handler.addEventListener('mousedown', this.onMouseDown);
+        this.handler.addEventListener('touchstart', this.onTouchStart);
+    }
+
+    _unRegisterStartEvent = () => {
+        this.handler.removeEventListener('mousedown', this.onMouseDown);
+        this.handler.removeEventListener('touchstart', this.onTouchStart);
     }
 
     destroy() {
+        this._unRegisterStartEvent();
         this._unRegisterEvent();
     }
 

diff --git a/packages/semi-ui/cascader/_story/cascader.stories.jsx b/packages/semi-ui/cascader/_story/cascader.stories.jsx
@@ -2470,4 +2470,30 @@ export const UnRelated = () => {
       onSelect={onSelect}
     />
   )
-}
+}
+
+export const PlaceHolderChange = () => {
+  const [p, setP] = useState('please select');
+
+  const onButtonClick = useCallback(() => {
+    const random = Math.floor(Math.random() * 100 % 10);
+    setP(`please select ${random}`)
+  }, []);
+
+  return (
+    <div>
+      <Button onClick={onButtonClick}>Click me change placeholder</Button>
+      <br /><br />
+      <Cascader
+        style={{ width: 300 }}
+        treeData={treeData2}
+        // placeholder={p}
+        searchPlaceholder={p}
+        filterTreeNode
+        motion={false}
+        multiple
+        showClear
+      />
+    </div>
+  )
+} 
diff --git a/packages/semi-ui/cascader/index.tsx b/packages/semi-ui/cascader/index.tsx
@@ -430,10 +430,15 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
     }
 
     static getDerivedStateFromProps(props: CascaderProps, prevState: CascaderState) {
-        const { multiple, value, defaultValue, onChangeWithObject, leafOnly, autoMergeValue, checkRelation } = props;
+        const { multiple, value, defaultValue, onChangeWithObject, leafOnly, autoMergeValue, checkRelation, searchPlaceholder, placeholder } = props;
         const { prevProps } = prevState;
         let keyEntities = prevState.keyEntities || {};
         const newState: Partial<CascaderState> = {};
+
+        const newPlaceholder = searchPlaceholder || placeholder;
+        if (newPlaceholder !== prevState.inputPlaceHolder) {
+            newState.inputPlaceHolder = newPlaceholder;
+        }
         const needUpdate = (name: string) => {
             const firstInProps = isEmpty(prevProps) && name in props;
             const nameHasChange = prevProps && !isEqual(prevProps[name], props[name]);
@@ -600,7 +605,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
 
     renderTagInput() {
         const { size, disabled, placeholder, maxTagCount, showRestTagsPopover, restTagsPopoverProps, checkRelation } = this.props;
-        const { inputValue, checkedKeys, keyEntities, resolvedCheckedKeys } = this.state;
+        const { inputValue, checkedKeys, keyEntities, resolvedCheckedKeys, inputPlaceHolder } = this.state;
         const tagInputcls = cls(`${prefixcls}-tagInput-wrapper`);
         const realKeys = this.mergeType === strings.NONE_MERGE_TYPE  || checkRelation === strings.UN_RELATED ?
             checkedKeys : resolvedCheckedKeys;
@@ -619,7 +624,7 @@ class Cascader extends BaseComponent<CascaderProps, CascaderState> {
                 onInputChange={this.handleInputChange}
                 // TODO Modify logic, not modify type
                 onRemove={this.onRemoveInTagInput}
-                placeholder={placeholder}
+                placeholder={inputPlaceHolder}
                 expandRestTagsOnClick={false}
             />
         );

diff --git a/packages/semi-ui/dragMove/index.ts b/packages/semi-ui/dragMove/index.ts
@@ -130,20 +130,6 @@ export default class DragMove extends BaseComponent<DragMoveProps, null> {
                     ref.current = node;
                 }
             },
-            onMouseDown: (e: MouseEvent) => {
-                this.foundation.onMouseDown(e);
-                const { onMouseDown } = children.props;
-                if (typeof onMouseDown === 'function') {
-                    onMouseDown(e);
-                }
-            },
-            onTouchStart: (e: TouchEvent) => {
-                this.foundation.onTouchStart(e);
-                const { onMouseMove } = children.props;
-                if (typeof onMouseMove === 'function') {
-                    onMouseMove(e);
-                }
-            },
         });
         return newChildren;
     }

diff --git a/packages/semi-ui/jsonViewer/index.tsx b/packages/semi-ui/jsonViewer/index.tsx
@@ -56,6 +56,7 @@ class JsonViewerCom extends BaseComponent<JsonViewerProps, JsonViewerState> {
     private editorRef: React.RefObject<HTMLDivElement>;
     private searchInputRef: React.RefObject<HTMLInputElement>;
     private replaceInputRef: React.RefObject<HTMLInputElement>;
+    private isComposing: boolean = false;
 
     foundation: JsonViewerFoundation;
 
@@ -191,6 +192,16 @@ class JsonViewerCom extends BaseComponent<JsonViewerProps, JsonViewerState> {
                     className={`${prefixCls}-search-bar-input`}
                     onChange={(_value, e) => {
                         e.preventDefault();
+                        if (!this.isComposing) {
+                            this.searchHandler();
+                        }
+                        this.searchInputRef.current?.focus();
+                    }}
+                    onCompositionStart={() => {
+                        this.isComposing = true;
+                    }}
+                    onCompositionEnd={() => {
+                        this.isComposing = false;
                         this.searchHandler();
                         this.searchInputRef.current?.focus();
                     }}

diff --git a/packages/semi-ui/typography/util.tsx b/packages/semi-ui/typography/util.tsx
@@ -66,7 +66,7 @@ const getRenderText = (
     ellipsisContainer.style.left = '0';
     // 当 window.getComputedStyle 得到的 width 值为 auto 时，通过 getBoundingClientRect 得到准确宽度
     // When the width value obtained by window.getComputedStyle is auto, get the exact width through getBoundingClientRect
-    if (originStyle.getPropertyValue('width') === 'auto') {
+    if (originStyle.getPropertyValue('width') === 'auto' && originEle.offsetWidth) {
         ellipsisContainer.style.width = `${originEle.offsetWidth}px`;
     } 
     ellipsisContainer.style.height = 'auto';