Merge branch 'Tencent:develop' into fix/dialog

CHANGELOG.md

@@ -5,6 +5,46 @@ 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))
+- `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))
+- `Upload`: 文案列表支持显示缩略图 @chaishi ([#2494](https://github.com/Tencent/tdesign-react/pull/2494))
+- `Tree`:
+    - 支持虚拟滚动场景下通过`key`滚动到特定节点 @uyarn ([#2509](https://github.com/Tencent/tdesign-react/pull/2509))
+    - 虚拟滚动下 低于`threshold` 仍可运行scrollTo操作 @uyarn ([#2509](https://github.com/Tencent/tdesign-react/pull/2509))
+### 🐞 Bug Fixes
+- `GlobalConfig`: 修复切换多语言失效的问题 @uyarn ([#2501](https://github.com/Tencent/tdesign-react/pull/2501))
+- `Table`:
+    - 可筛选表格，修复 `resetValue` 在清空筛选时，未能重置到指定 `resetValue` 值的问题 @chaishi ([#2492](https://github.com/Tencent/tdesign-react/pull/2492))
+    - 树形结构表格，修复 expandedTreeNodes.sync 和 @expanded-tree-nodes-change 使用 expandTreeNodeOnClick  时无效问题 [tdesign-vue#2756](https://github.com/Tencent/tdesign-vue/issues/2756) @chaishi ([#2492](https://github.com/Tencent/tdesign-react/pull/2492))
+    - 单元格在编辑模式下，保存的时候对于链式的colKey处理错误，未能覆盖原来的值 @Empire-suy ([#2493](https://github.com/Tencent/tdesign-react/pull/2493))
+    - 可编辑表格，修复多个可编辑表格同时存在时，校验互相影响问题 @chaishi ([#2498](https://github.com/Tencent/tdesign-react/pull/2498))
+    - 单元格在编辑模式下，保存的时候对于链式的colKey处理错误，未能覆盖原来的值 @Empire-suy ([#2493](https://github.com/Tencent/tdesign-react/pull/2493))
+    - 修复使用 list 传 props 且 destroyOnHide 为 false 下， 会丢失 panel 内容的问题 @lzy2014love ([#2500](https://github.com/Tencent/tdesign-react/pull/2500))
+- `TagInput`: 修复折叠展示选项尺寸大小问题 @uyarn ([#2503](https://github.com/Tencent/tdesign-react/pull/2503))
+- `Tabs`: 修复使用 list 传 props 且 destroyOnHide 为 false 下， 会丢失 panel 内容的问题 @lzy2014love ([#2500](https://github.com/Tencent/tdesign-react/pull/2500))
+- `menu`: 修复菜单expandType默认模式下menuitem传递onClick不触发的问题 @Zzongke ([#2502](https://github.com/Tencent/tdesign-react/pull/2502))
+- `ImageViewer`: 修复无法通过 `visible` 直接打开预览弹框问题 @chaishi ([#2494](https://github.com/Tencent/tdesign-react/pull/2494))
+- `Tree`: 修复1.2.0版本后部分`TreeNodeModel`的操作失效的异常 @uyarn
+
  ## 🌈 1.2.4 `2023-08-31` 
 ### 🚀 Features
 - `Table`: 树形结构，没有设置 `expandedTreeNodes` 情况下，data 数据发生变化时，自动重置收起所有展开节点（如果希望保持展开节点，请使用属性 `expandedTreeNodes` 控制，[tdesign-vue#2735](https://github.com/Tencent/tdesign-vue/issues/2735) @chaishi ([#2470](https://github.com/Tencent/tdesign-react/pull/2470))

README-zh_CN.md

@@ -80,6 +80,12 @@ npm package 中提供了多种构建产物，可以阅读 [这里](https://githu
 
 TDesign 欢迎任何愿意参与贡献的参与者。如果需要本地运行代码或参与贡献，请先阅读[参与贡献](https://github.com/Tencent/tdesign-react/blob/develop/CONTRIBUTING.md)。
 
+# 反馈
+
+有任何问题，建议通过 [Github issues](https://github.com/Tencent/tdesign-react/issues) 反馈或扫码加入用户微信群。
+
+<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/React-IM.png" width="200" />
+
 # 开源协议
 
 TDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesign-react/LICENSE)。

README.md

@@ -80,6 +80,12 @@ TDesign also provides component libraries for other platforms and frameworks.
 
 Contributing is welcome. Read [guidelines for contributing](https://github.com/Tencent/tdesign-react/blob/develop/CONTRIBUTING.md) before submitting your [Pull Request](https://github.com/Tencent/tdesign-react/pulls).
 
+# Feedback
+
+Create your [Github issues](https://github.com/Tencent/tdesign-react/issues) or scan the QR code below to join our user groups
+
+<img src="https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/doc/React-IM.png" width="200" />
+
 # License
 
 The MIT License. Please see [the license file](./LICENSE) for more information.

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-react",
   "purename": "tdesign",
-  "version": "1.2.4",
+  "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/card/Card.tsx

@@ -85,9 +85,9 @@ const Card = forwardRef<HTMLDivElement, CardProps>((props, ref) => {
     [`${classPrefix}-card__description`]: description,
   });
 
-  const renderTitle = title ? <span className={titleClass}>{title}</span> : null;
+  const renderTitle = title ? <div className={titleClass}>{title}</div> : null;
 
-  const renderSubtitle = subtitle ? <span className={subtitleClass}>{subtitle}</span> : null;
+  const renderSubtitle = subtitle ? <div className={subtitleClass}>{subtitle}</div> : null;
 
   const renderDescription = description ? <p className={descriptionClass}>{description}</p> : null;
 

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);

src/config-provider/ConfigContext.tsx

@@ -17,17 +17,16 @@ export const defaultAnimation = {
   exclude: [],
 };
 
-type DefaultGlobalConfig = Partial<GlobalConfigProvider>
+type DefaultGlobalConfig = Partial<GlobalConfigProvider>;
 
 export const defaultGlobalConfig: DefaultGlobalConfig = {
   animation: defaultAnimation,
   classPrefix: defaultClassPrefix,
-  ...merge(defaultLocale, defaultConfig),
+  ...merge({}, defaultLocale, defaultConfig),
 };
 
 export type Locale = typeof defaultLocale;
 
-
 export const defaultContext = {
   globalConfig: defaultGlobalConfig,
 };

src/config-provider/ConfigProvider.tsx

@@ -16,12 +16,8 @@ export const merge = (src: GlobalConfigProvider, config: GlobalConfigProvider) =
   });
 
 export default function ConfigProvider({ children, globalConfig }: ConfigProviderProps) {
-  const mergedGlobalConfig = merge(defaultGlobalConfig, globalConfig);
-  return (
-    <ConfigContext.Provider value={{ globalConfig: mergedGlobalConfig }}>
-      {children}
-    </ConfigContext.Provider>
-  );
+  const mergedGlobalConfig = merge({ ...defaultGlobalConfig }, globalConfig);
+  return <ConfigContext.Provider value={{ globalConfig: mergedGlobalConfig }}>{children}</ConfigContext.Provider>;
 }
 
 ConfigProvider.displayName = 'ConfigProvider';

src/config-provider/config-provider.en-US.md

@@ -272,6 +272,7 @@ closeIcon | Function | - | Typescript：`TNode`。[see more ts definition](https
 
 name | type | default | description | required
 -- | -- | -- | -- | --
+checkIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 errorIcon | TElement | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 
 ### AlertConfig

src/config-provider/config-provider.md

@@ -302,6 +302,7 @@ closeIcon | Function | - | 关闭图标，【注意】使用渲染函数输出
 
 名称 | 类型 | 默认值 | 说明 | 必传
 -- | -- | -- | -- | --
+checkIcon | TElement | - | 已完成步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 errorIcon | TElement | - | 错误步骤图标，【注意】使用渲染函数输出图标组件。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 
 ### AlertConfig

src/config-provider/type.ts

@@ -789,6 +789,10 @@ export interface TagConfig {
 }
 
 export interface StepsConfig {
+  /**
+   * 已完成步骤图标，【注意】使用渲染函数输出图标组件
+   */
+  checkIcon?: TElement;
   /**
    * 错误步骤图标，【注意】使用渲染函数输出图标组件
    */

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/form.en-US.md

@@ -97,7 +97,7 @@ number | Boolean | - | \- | N
 pattern | Object | - | Typescript：`RegExp` | N
 required | Boolean | - | \- | N
 telnumber | Boolean | - | \- | N
-trigger | String | change | options: change/blur | N
+trigger | String | change | options: change/blur/submit | N
 type | String | error | options: error/warning | N
 url | Boolean / Object | - | Typescript：`boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N
 validator | Function | - | Typescript：`CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise<CustomValidateResolveType>` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N

src/form/form.md

@@ -187,7 +187,7 @@ number | Boolean | - | 内置校验方法，校验值是否为数字（1.2 、 1
 pattern | Object | - | 内置校验方法，校验值是否符合正则表达式匹配结果，示例：`{ pattern: /@qq.com/, message: '请输入 QQ 邮箱' }`。TS 类型：`RegExp` | N
 required | Boolean | - | 内置校验方法，校验值是否已经填写。该值为 true，默认显示必填标记，可通过设置 `requiredMark: false` 隐藏必填标记 | N
 telnumber | Boolean | - | 内置校验方法，校验值是否为手机号码，校验正则为 `/^1[3-9]\d{9}$/`，示例：`{ telnumber: true, message: '请输入正确的手机号码' }` | N
-trigger | String | change | 校验触发方式。可选项：change/blur | N
+trigger | String | change | 校验触发方式。可选项：change/blur/submit | N
 type | String | error | 校验未通过时呈现的错误信息类型，有 告警信息提示 和 错误信息提示 等两种。可选项：error/warning | N
 url | Boolean / Object | - | 内置校验方法，校验值是否为网络链接地址，[参数文档](https://github.com/validatorjs/validator.js)，示例：`{ url: { protocols: ['http','https','ftp'] }, message: '请输入正确的 Url 地址' }`。TS 类型：`boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N
 validator | Function | - | 自定义校验规则，示例：`{ validator: (val) => val.length > 0, message: '请输入内容'}`。TS 类型：`CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise<CustomValidateResolveType>` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/form/type.ts) | N

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/form/type.ts

@@ -300,7 +300,7 @@ export interface FormRule {
    * 校验触发方式
    * @default change
    */
-  trigger?: 'change' | 'blur';
+  trigger?: 'change' | 'blur' | 'submit';
   /**
    * 校验未通过时呈现的错误信息类型，有 告警信息提示 和 错误信息提示 等两种
    * @default error

src/hooks/useImagePreviewUrl.ts

@@ -0,0 +1,27 @@
+import { useEffect, useState } from 'react';
+import log from '../_common/js/log';
+import { getFileUrlByFileRaw } from '../_common/js/upload/utils';
+
+export function useImagePreviewUrl(imgUrl: string | File) {
+  const [previewUrl, setPreviewUrl] = useState('');
+
+  useEffect(() => {
+    if (!imgUrl) return;
+    if (typeof imgUrl === 'string') {
+      setPreviewUrl(imgUrl);
+      return;
+    }
+    getFileUrlByFileRaw(imgUrl).then(
+      (url) => {
+        setPreviewUrl(url);
+      },
+      () => {
+        log.error('Image', 'Image.src is not a valid file');
+      },
+    );
+  }, [imgUrl]);
+
+  return { previewUrl };
+}
+
+export default useImagePreviewUrl;

src/hooks/useVirtualScroll.ts

@@ -123,7 +123,8 @@ const useVirtualScroll = (container: MutableRefObject<HTMLElement>, params: UseV
   };
 
   const updateScrollTop = ({ index, top = 0, behavior }: ScrollToElementParams) => {
-    const scrollTop = trScrollTopHeightList.current[index] - containerHeight.current - top;
+    const containerCurrentHeight = containerHeight.current || container.current.getBoundingClientRect().height;
+    const scrollTop = trScrollTopHeightList.current[index] - containerCurrentHeight - top;
     container.current?.scrollTo({
       top: scrollTop,
       behavior: behavior || 'auto',
@@ -151,7 +152,14 @@ const useVirtualScroll = (container: MutableRefObject<HTMLElement>, params: UseV
   // 固定高度场景，可直接通过数据长度计算出最大滚动高度
   useEffect(
     () => {
-      if (!isVirtualScroll) return;
+      if (!isVirtualScroll) {
+        trScrollTopHeightList.current = getTrScrollTopHeightList(
+          trHeightList,
+          container.current?.getBoundingClientRect().height,
+        );
+        return;
+      }
+
       // 给数据添加下标
       addIndexToData(data);
       setScrollHeight(data.length * tScroll.rowHeight);

src/image-viewer/ImageViewer.tsx

@@ -45,7 +45,7 @@ const ImageViewer: React.FC<ImageViewerProps> = (originalProps) => {
   return (
     <>
       {uiImage}
-      {visibled &&
+      {(visibled || visible) &&
         createPortal(
           <ImageModal
             title={title}