Merge branch 'develop' of github.com:Tencent/tdesign-react into zzk-u…

…pdate

CHANGELOG.md

@@ -5,14 +5,24 @@ toc: false
 spline: explain
 ---
 
+ ## 🌈 1.2.6 `2023-09-28` 
+### 🚀 Features
+- `Table`: 优化渲染次数 @chaishi ([#2514](https://github.com/Tencent/tdesign-react/pull/2514))
+- `card`: title使用`div`取代`span` 在自定义场景下更符合规范 @uyarn ([#2517](https://github.com/Tencent/tdesign-react/pull/2517))
+- `Tree`: Tree支持通过key匹配单一value指定滚动到特定位置，具体使用方式请参考示例代码 @uyarn ([#2519](https://github.com/Tencent/tdesign-react/pull/2519))
+### 🐞 Bug Fixes
+- `Form`: 修复 formList 嵌套数据获取异常 @honkinglin ([#2529](https://github.com/Tencent/tdesign-react/pull/2529))
+- `Table`: 修复数据切换时 `rowspanAndColspan` 渲染问题，[issue#2513](https://github.com/Tencent/tdesign-react/issues/2513) @chaishi ([#2514](https://github.com/Tencent/tdesign-react/pull/2514))
+- `Cascader`: hover 没有子节点数据的父节点时未更新子节点 @betavs ([#2528](https://github.com/Tencent/tdesign-react/pull/2528))
+- `Datepicker`: 修复切换月份失效问题 @honkinglin ([#2531](https://github.com/Tencent/tdesign-react/pull/2531))
+- `Dropdown`: 修复`Dropdown` disabled API失效的问题 @uyarn ([#2532](https://github.com/Tencent/tdesign-react/pull/2532))
+
  ## 🌈 1.2.5 `2023-09-14` 
 ### 🚀 Features
 - `steps`: 全局配置添加步骤条的已完成图标自定义 @Zzongke ([#2491](https://github.com/Tencent/tdesign-react/pull/2491))
 - `Table`: 可筛选表格，`onFilterChange` 事件新增参数 `trigger: 'filter-change' | 'confirm' | 'reset' | 'clear'`，表示触发筛选条件变化的来源 @chaishi ([#2492](https://github.com/Tencent/tdesign-react/pull/2492))
 - `Form`: trigger新增`submit`选项 @honkinglin ([#2507](https://github.com/Tencent/tdesign-react/pull/2507))
-- `ImageViewer`:
-  - `onIndexChange` 事件新增 `trigger` 枚举值 `current` @chaishi ([#2494](https://github.com/Tencent/tdesign-react/pull/2494))
-  - 
+- `ImageViewer`: `onIndexChange` 事件新增 `trigger` 枚举值 `current` @chaishi ([#2494](https://github.com/Tencent/tdesign-react/pull/2494))
 - `Image`:
     - 新增 `fallback`，表示图片的兜底图，原始图片加载失败时会显示兜底图 @chaishi ([#2494](https://github.com/Tencent/tdesign-react/pull/2494))
     - 新增支持 `src` 类型为 `File`，支持通过 `File` 预览图片 @chaishi ([#2494](https://github.com/Tencent/tdesign-react/pull/2494))

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-react",
   "purename": "tdesign",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "TDesign Component for React",
   "title": "tdesign-react",
   "main": "lib/index.js",
@@ -189,7 +189,7 @@
     "ts-node": "^10.4.0",
     "typescript": "~4.5.4",
     "vite": "^2.9.15",
-    "vite-plugin-istanbul": "^2.3.0",
+    "vite-plugin-istanbul": "^5.0.0",
     "vite-plugin-pwa": "^0.12.8",
     "vite-plugin-tdoc": "^2.0.1",
     "vitest": "^0.24.1",

src/cascader/core/effect.ts

@@ -24,7 +24,7 @@ export function expendClickEffect(
 
   if (isDisabled) return;
   // 点击展开节点，设置展开状态
-  if (propsTrigger === trigger && !node.isLeaf()) {
+  if (propsTrigger === trigger) {
     const expanded = node.setExpanded(true);
     treeStore.refreshNodes();
     treeStore.replaceExpanded(expanded);
@@ -102,7 +102,7 @@ export function valueChangeEffect(node: TreeNode, cascaderContext: CascaderConte
             .map((item) => item.value),
         );
 
-  setValue(resValue, 'check', node.getModel());
+  setValue(resValue, node.checked ? 'uncheck' : 'check', node.getModel());
 }
 
 /**

src/cascader/hooks.tsx

@@ -8,7 +8,7 @@ import { getTreeValue, getCascaderValue, isEmptyValues, isValueInvalid } from '.
 import { treeNodesEffect, treeStoreExpendEffect } from './core/effect';
 
 import useControlled from '../hooks/useControlled';
-import {
+import type {
   TreeNode,
   TreeNodeValue,
   TdCascaderProps,
@@ -17,6 +17,8 @@ import {
   CascaderValue,
 } from './interface';
 
+import type { TypeTreeNodeData } from '../_common/js/tree/types';
+
 export const useCascaderContext = (props: TdCascaderProps) => {
   const [innerValue, setInnerValue] = useControlled(props, 'value', props.onChange);
   const [innerPopupVisible, setPopupVisible] = useControlled(props, 'popupVisible', props.onPopupVisibleChange);
@@ -96,7 +98,7 @@ export const useCascaderContext = (props: TdCascaderProps) => {
           });
         },
       });
-      store.append(options);
+      store.append(options as Array<TypeTreeNodeData>);
       setTreeStore(store);
     } else {
       treeStore.reload(options);

src/date-picker/panel/PanelContent.tsx

@@ -62,20 +62,29 @@ export default function PanelContent(props: PanelContentProps) {
 
   const defaultTime = '00:00:00';
 
-  const onMonthChangeInner = useCallback((val: number) => {
-    onMonthChange?.(val, { partial });
+  const onMonthChangeInner = useCallback(
+    (val: number) => {
+      onMonthChange?.(val, { partial });
+    },
     // eslint-disable-next-line
-  }, []);
+    [partial],
+  );
 
-  const onYearChangeInner = useCallback((val: number) => {
-    onYearChange?.(val, { partial });
+  const onYearChangeInner = useCallback(
+    (val: number) => {
+      onYearChange?.(val, { partial });
+    },
     // eslint-disable-next-line
-  }, []);
+    [partial],
+  );
 
-  const onJumperClickInner = useCallback(({ trigger }) => {
-    onJumperClick?.({ trigger, partial });
+  const onJumperClickInner = useCallback(
+    ({ trigger }) => {
+      onJumperClick?.({ trigger, partial });
+    },
     // eslint-disable-next-line
-  }, []);
+    [partial],
+  );
 
   return (
     <div className={`${panelName}-content`}>

src/dropdown/Dropdown.tsx

@@ -48,6 +48,7 @@ const Dropdown: React.FC<DropdownProps> & {
   };
 
   const handleVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {
+    if (disabled) return;
     togglePopupVisible(visible);
     popupProps?.onVisibleChange?.(visible, context);
   };

src/form/hooks/useInstance.tsx

@@ -115,7 +115,8 @@ export default function useInstance(props: TdFormProps, formRef, formMapRef: Rea
     const fieldsValue = {};
 
     if (nameList === true) {
-      for (const [name, formItemRef] of formMapRef.current.entries()) {
+      // 嵌套数组子节点先添加导致外层数据覆盖因而需要倒序遍历
+      for (const [name, formItemRef] of [...formMapRef.current.entries()].reverse()) {
         const fieldValue = calcFieldValue(name, formItemRef?.current.getValue?.());
         merge(fieldsValue, fieldValue);
       }

src/locale/it_IT.ts

@@ -0,0 +1,5 @@
+import itIT from '../_common/js/global-config/locale/it_IT';
+import { GlobalConfigProvider } from '../config-provider/type';
+
+// 需要 GlobalConfigProvider 保证数据类型正确
+export default itIT as unknown as GlobalConfigProvider;

src/locale/ru_RU.ts

@@ -0,0 +1,5 @@
+import ruRU from '../_common/js/global-config/locale/ru_RU';
+import { GlobalConfigProvider } from '../config-provider/type';
+
+// 需要 GlobalConfigProvider 保证数据类型正确
+export default ruRU as unknown as GlobalConfigProvider;

src/locale/zh_TW.ts

@@ -0,0 +1,5 @@
+import zhTW from '../_common/js/global-config/locale/zh_TW';
+import { GlobalConfigProvider } from '../config-provider/type';
+
+// 需要 GlobalConfigProvider 保证数据类型正确
+export default zhTW as unknown as GlobalConfigProvider;

src/tag-input/useTagList.tsx

@@ -18,6 +18,7 @@ export default function useTagList(props: TagInputProps) {
     props;
   // handle controlled property and uncontrolled property
   const [tagValue, setTagValue] = useControlled(props, 'value', props.onChange);
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const [oldInputValue, setOldInputValue] = useState<InputValue>();
 
   // 点击标签关闭按钮，删除标签
@@ -58,7 +59,7 @@ export default function useTagList(props: TagInputProps) {
     const { e } = context;
     if (!tagValue || !tagValue.length) return;
     // 回车键删除，输入框值为空时，才允许 Backspace 删除标签
-    if (!oldInputValue && ['Backspace', 'NumpadDelete'].includes(e.key)) {
+    if (!value && ['Backspace', 'NumpadDelete'].includes(e.key)) {
       const index = tagValue.length - 1;
       const item = tagValue[index];
       const trigger = 'backspace';

src/timeline/TimelineItem.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useMemo } from 'react';
 import classNames from 'classnames';
+import omit from 'lodash/omit';
 import { TdTimelineItemProps } from './type';
 import { StyledProps } from '../common';
 import useConfig from '../hooks/useConfig';
@@ -11,6 +12,7 @@ import Loading from '../loading';
 export interface TimelineItemProps extends TdTimelineItemProps, StyledProps {
   children?: React.ReactNode;
   index?: number;
+  onClick?: (context: { e: React.MouseEvent<HTMLElement>; item: TdTimelineItemProps }) => void;
 }
 
 const DefaultTheme = ['default', 'primary', 'success', 'warning', 'error'];
@@ -27,6 +29,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
     content,
     label,
     loading = false,
+    onClick,
   } = props;
   const { theme, reverse, itemsStatus, layout, globalAlign, mode } = useContext(TimelineContext);
   const { classPrefix } = useConfig();
@@ -63,6 +66,10 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
     return ele;
   }, [dot, classPrefix]);
 
+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    onClick?.({ e, item: omit(props, ['children', 'index', 'onClick']) });
+  };
+
   // 节点类名
   const itemClassName = classNames(
     {
@@ -91,7 +98,7 @@ const TimelineItem: React.FC<TimelineItemProps> = (props) => {
   });
 
   return (
-    <li className={itemClassName} style={style}>
+    <li className={itemClassName} style={style} onClick={handleClick}>
       {mode === 'alternate' && label && <div className={labelClassName}>{label}</div>}
       <div className={`${classPrefix}-timeline-item__wrapper`}>
         <div className={dotClassName} style={{ borderColor: !DefaultTheme.includes(dotColor) && dotColor }}>

src/timeline/timeline.en-US.md

@@ -26,3 +26,4 @@ dotColor | String | primary | Typescript：`string` | N
 label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 labelAlign | String | - | options：left/right/top/bottom | N
 loading | Boolean | - | Whether it is in the loading state | N
+onClick | Function |  | Typescript：`(context: { e: MouseEvent; item: TdTimelineItemProps }) => void` [TdTimelineItemProps 详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/timeline/type.ts) <br/>  trigger on click. | N

src/timeline/timeline.md

@@ -26,3 +26,4 @@ dotColor | String | primary | 时间轴颜色，内置 `primary/warning/error/de
 label | TNode | - | 标签文本内容，可完全自定义。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 labelAlign | String | - | 标签信息相对于时间轴的位置，在 `mode='alternate'` 时生效，优先级高于 `Timeline.labelAlign`。可选项：left/right/top/bottom | N
 loading | Boolean | - | 是否处在加载状态 | N
+onClick | Function |  | TS 类型：`(context: { e: MouseEvent; item: TdTimelineItemProps }) => void` [TdTimelineItemProps 详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/timeline/type.ts) <br/> 点击时触发。 | N

src/tree-select/TreeSelect.tsx

@@ -93,7 +93,7 @@ const TreeSelect = forwardRef((props: TreeSelectProps, ref) => {
 
   /* ---------------------------------computed value---------------------------------------- */
 
-  const defaultFilter = (text, option) => {
+  const defaultFilter = (text: string, option: TreeOptionData) => {
     if (!text) return true;
     // 过滤时会有空节点影响判断
     if (!option.label && !option.value) return false;
@@ -182,7 +182,6 @@ const TreeSelect = forwardRef((props: TreeSelectProps, ref) => {
     });
     // 单选选择后收起弹框
     setPopupVisible(false, { ...context, trigger: 'trigger-element-click' });
-    filterInput && setFilterInput('', { trigger: 'change' });
   });
 
   const handleMultiChange = usePersistFn<TreeProps['onChange']>((value, context) => {
@@ -195,12 +194,10 @@ const TreeSelect = forwardRef((props: TreeSelectProps, ref) => {
           trigger: value.length > normalizedValue.length ? 'check' : 'uncheck',
         },
       );
-      filterInput && setFilterInput('', { trigger: 'change' });
     }
   });
 
   const onInnerPopupVisibleChange: SelectInputProps['onPopupVisibleChange'] = (visible, ctx) => {
-    !visible && filterInput && setFilterInput('', { trigger: 'clear' });
     setPopupVisible(visible, { e: ctx.e });
   };
 
@@ -273,7 +270,7 @@ const TreeSelect = forwardRef((props: TreeSelectProps, ref) => {
           ref={treeRef}
           hover
           transition
-          filter={handleFilter}
+          filter={filterInput ? handleFilter : null}
           data={data}
           disabled={disabled}
           empty={empty}

src/tree-select/__tests__/vitest-tree-select.test.jsx

@@ -168,6 +168,7 @@ describe('TreeSelect Component', () => {
 
   it('props.filter: priority of onSearch is higher than props.filter, props.filter is forbidden to work in this scene', async () => {
     const { container } = getTreeSelectMultipleMount(TreeSelect, {
+      // eslint-disable-next-line @typescript-eslint/no-empty-function
       onSearch: () => {},
       filter: (filterWord, option) => !filterWord || option.label === filterWord,
     });
@@ -176,7 +177,7 @@ describe('TreeSelect Component', () => {
     simulateInputChange(inputDom1, 'tdesign-react');
     await mockDelay(100);
     const tTreeItemNotTTreeItemHiddenDom = document.querySelectorAll('.t-tree__item:not(.t-tree__item--hidden)');
-    expect(tTreeItemNotTTreeItemHiddenDom.length).toBe(6);
+    expect(tTreeItemNotTTreeItemHiddenDom.length).toBe(8);
   });
 
   it('props.filter: multiple tree select, check filter nodes', async () => {
@@ -571,21 +572,6 @@ describe('TreeSelect Component', () => {
     expect(onFocusFn.mock.calls[0][0].e.type).toBe('focus');
   });
 
-  it('events.inputChange: clear filter words on change', async () => {
-    const onInputChangeFn1 = vi.fn();
-    const { container } = getTreeSelectMultipleMount(
-      TreeSelect,
-      { inputValue: 'tdesign-vue' },
-      { onInputChange: onInputChangeFn1 },
-    );
-    fireEvent.click(container.querySelector('.t-input'));
-    await mockDelay(200);
-    fireEvent.click(document.querySelector('.t-tree__item:first-child .t-checkbox__label'));
-    expect(onInputChangeFn1).toHaveBeenCalled();
-    expect(onInputChangeFn1.mock.calls[0][0]).toBe('');
-    expect(onInputChangeFn1.mock.calls[0][1].trigger).toBe('change');
-  });
-
   it('events.popupVisibleChange works fine', async () => {
     const onPopupVisibleChangeFn = vi.fn();
     const { container } = getTreeSelectMultipleMount(

src/tree-select/_example/lazy.jsx

@@ -15,7 +15,7 @@ const options = [
 ];
 
 export default function Example() {
-  const [value, setValue] = useState(null);
+  const [value, setValue] = useState('');
 
   function loadFunc(node) {
     return new Promise((resolve) => {
@@ -50,7 +50,7 @@ export default function Example() {
         treeProps={{ load: loadFunc, lazy: true }}
         onChange={(val) => {
           setValue(val);
-          console.log(val)
+          console.log(val);
         }}
       />
     </div>