+
# 开源协议
TDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesign-react/LICENSE)。
diff --git a/README.md b/README.md
index 1f9deee5ab..fb65a17ded 100644
--- a/README.md
+++ b/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
+
+{title}
: null;
- const renderSubtitle = subtitle ? {subtitle} : null;
+ const renderSubtitle = subtitle ? {subtitle}
: null;
const renderDescription = description ? {description}
: null; diff --git a/src/cascader/core/effect.ts b/src/cascader/core/effect.ts index 7006c653fb..75ea42344b 100644 --- a/src/cascader/core/effect.ts +++ b/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); diff --git a/src/config-provider/ConfigContext.tsx b/src/config-provider/ConfigContext.tsx index b559f4341c..92d8a1fb7e 100644 --- a/src/config-provider/ConfigContext.tsx +++ b/src/config-provider/ConfigContext.tsx @@ -17,17 +17,16 @@ export const defaultAnimation = { exclude: [], }; -type DefaultGlobalConfig = Partial
diff --git a/src/dropdown/Dropdown.tsx b/src/dropdown/Dropdown.tsx
index b473d0a20c..3924f22a2c 100644
--- a/src/dropdown/Dropdown.tsx
+++ b/src/dropdown/Dropdown.tsx
@@ -48,6 +48,7 @@ const Dropdown: React.FC & {
};
const handleVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {
+ if (disabled) return;
togglePopupVisible(visible);
popupProps?.onVisibleChange?.(visible, context);
};
diff --git a/src/form/form.en-US.md b/src/form/form.en-US.md
index 355e63aad7..df0aacadb4 100644
--- a/src/form/form.en-US.md
+++ b/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` `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
diff --git a/src/form/form.md b/src/form/form.md
index 7bffc42941..c29eefa879 100644
--- a/src/form/form.md
+++ b/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` `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
diff --git a/src/form/hooks/useInstance.tsx b/src/form/hooks/useInstance.tsx
index 21aea8697d..74123687c9 100644
--- a/src/form/hooks/useInstance.tsx
+++ b/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);
}
diff --git a/src/form/type.ts b/src/form/type.ts
index 440b0f94ca..178119685b 100644
--- a/src/form/type.ts
+++ b/src/form/type.ts
@@ -300,7 +300,7 @@ export interface FormRule {
* 校验触发方式
* @default change
*/
- trigger?: 'change' | 'blur';
+ trigger?: 'change' | 'blur' | 'submit';
/**
* 校验未通过时呈现的错误信息类型，有 告警信息提示 和 错误信息提示 等两种
* @default error
diff --git a/src/hooks/useImagePreviewUrl.ts b/src/hooks/useImagePreviewUrl.ts
new file mode 100644
index 0000000000..24690cf6a6
--- /dev/null
+++ b/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;
diff --git a/src/hooks/useVirtualScroll.ts b/src/hooks/useVirtualScroll.ts
index 2307790bac..617e8e669f 100644
--- a/src/hooks/useVirtualScroll.ts
+++ b/src/hooks/useVirtualScroll.ts
@@ -123,7 +123,8 @@ const useVirtualScroll = (container: MutableRefObject, 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, params: UseV
// 固定高度场景，可直接通过数据长度计算出最大滚动高度
useEffect(
() => {
- if (!isVirtualScroll) return;
+ if (!isVirtualScroll) {
+ trScrollTopHeightList.current = getTrScrollTopHeightList(
+ trHeightList,
+ container.current?.getBoundingClientRect().height,
+ );
+ return;
+ }
+
// 给数据添加下标
addIndexToData(data);
setScrollHeight(data.length * tScroll.rowHeight);
diff --git a/src/image-viewer/ImageViewer.tsx b/src/image-viewer/ImageViewer.tsx
index 354283e8e2..1fc1330be4 100644
--- a/src/image-viewer/ImageViewer.tsx
+++ b/src/image-viewer/ImageViewer.tsx
@@ -45,7 +45,7 @@ const ImageViewer: React.FC = (originalProps) => {
return (
<>
{uiImage}
- {visibled &&
+ {(visibled || visible) &&
createPortal(
{
const { classPrefix } = useConfig();
@@ -42,8 +44,8 @@ interface ImageModelItemProps {
rotateZ: number;
scale: number;
mirror: number;
- src: string;
- preSrc?: string;
+ src: string | File;
+ preSrc?: string | File;
errorText: string;
}
@@ -62,9 +64,12 @@ export const ImageModelItem: React.FC = ({ rotateZ, scale,
const preImgStyle = { transform: `rotateZ(${rotateZ}deg) scale(${scale})`, display: !loaded ? 'block' : 'none' };
const boxStyle = { transform: `translate(${position[0]}px, ${position[1]}px) scale(${mirror}, 1)` };
+ const { previewUrl: preSrcImagePreviewUrl } = useImagePreviewUrl(preSrc);
+ const { previewUrl: mainImagePreviewUrl } = useImagePreviewUrl(src);
+
useEffect(() => {
setError(false);
- }, [src]);
+ }, [preSrcImagePreviewUrl, mainImagePreviewUrl]);
return (
@@ -369,6 +375,7 @@ export const ImageModal: React.FC
@@ -77,7 +82,7 @@ export const ImageModelItem: React.FC = ({ rotateZ, scale,
event.stopPropagation();
onMouseDown(event);
}}
- src={preSrc}
+ src={preSrcImagePreviewUrl}
style={preImgStyle}
data-testid="img-drag"
alt="image"
@@ -91,7 +96,7 @@ export const ImageModelItem: React.FC = ({ rotateZ, scale,
event.stopPropagation();
onMouseDown(event);
}}
- src={src}
+ src={mainImagePreviewUrl}
onLoad={() => setLoaded(true)}
onError={() => setError(true)}
style={imgStyle}
@@ -220,11 +225,16 @@ export const ImageViewerUtils: React.FC = ({
};
type ImageViewerHeaderProps = {
- onImgClick: (index: number) => void;
+ onImgClick: (index: number, ctx: { trigger: 'current' }) => void;
images: ImageInfo[];
currentIndex: number;
};
+function OneImagePreview({ image, classPrefix }: { image: ImageInfo; classPrefix: string }) {
+ const { previewUrl } = useImagePreviewUrl(image.thumbnail || image.mainImage);
+ return 
+
))}
| N -onIndexChange | Function | | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' }) => void`
| N +onIndexChange | Function | | Typescript：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`
| N diff --git a/src/image-viewer/image-viewer.md b/src/image-viewer/image-viewer.md index 9d2a86ec51..80211f04f5 100644 --- a/src/image-viewer/image-viewer.md +++ b/src/image-viewer/image-viewer.md @@ -11,17 +11,17 @@ closeBtn | TNode | true | 是否展示关闭按钮，值为 `true` 显示默认 closeOnOverlay | Boolean | - | 是否在点击遮罩层时，触发预览关闭 | N draggable | Boolean | undefined | 是否允许拖拽调整位置。`mode=modal` 时，默认不允许拖拽；`mode=modeless` 时，默认允许拖拽 | N imageScale | Object | - | 图片缩放相关配置。`imageScale.max` 缩放的最大比例；`imageScale.min` 缩放的最小比例；`imageScale.step` 缩放的步长速度。TS 类型：`ImageScale` `interface ImageScale { max: number; min: number; step: number }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/image-viewer/type.ts) | N -images | Array | [] | 图片数组。`mainImage` 表示主图，必传；`thumbnail` 表示缩略图，如果不存在，则使用主图显示；`download` 是否允许下载图片，默认允许下载。示例: `['img_url_1', 'img_url_2']`，`[{ thumbnail: 'small_image_url', mainImage: 'big_image_url', download: false }]`。TS 类型：`Array
关闭时触发，事件参数包含触发关闭的来源：关闭按钮、遮罩层、ESC 键 | N -onIndexChange | Function | | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' }) => void`
预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N +onIndexChange | Function | | TS 类型：`(index: number, context: { trigger: 'prev' \| 'next' \| 'current' }) => void`
预览图片切换时触发，`context.prev` 切换到上一张图片，`context.next` 切换到下一张图片 | N diff --git a/src/image-viewer/type.ts b/src/image-viewer/type.ts index 72ee218898..790113d7c1 100644 --- a/src/image-viewer/type.ts +++ b/src/image-viewer/type.ts @@ -29,13 +29,15 @@ export interface TdImageViewerProps { * 图片数组。`mainImage` 表示主图，必传；`thumbnail` 表示缩略图，如果不存在，则使用主图显示；`download` 是否允许下载图片，默认允许下载。示例: `['img_url_1', 'img_url_2']`，`[{ thumbnail: 'small_image_url', mainImage: 'big_image_url', download: false }]` * @default [] */ - images?: Array
{loading || (
)}
@@ -188,7 +215,7 @@ const InternalImage: React.ForwardRefRenderFunction props.overlayContent works fine 1`] = `
>
![]()
![]()
![]()
`, [MDN Definition](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)。options: no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url | N
+shape | String | square | options: circle/round/square | N
+src | String / Object | - | src attribute of `![]()
`. image File can also be loaded。Typescript：`string \| File` | N
+srcset | Object | - | for `.avif` and `.webp` image url, load `srcset` before `src`。Typescript：`ImageSrcset` `interface ImageSrcset { 'image/avif': string; 'image/webp': string; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/image/type.ts) | N
onError | Function | | Typescript：`(context: { e: ImageEvent }) => void`
trigger on image load failed | N onLoad | Function | | Typescript：`(context: { e: ImageEvent }) => void`
trigger on image loaded | N diff --git a/src/image/image.md b/src/image/image.md index 34b46aae03..25c004e456 100644 --- a/src/image/image.md +++ b/src/image/image.md @@ -9,6 +9,7 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N alt | String | - | 图片描述 | N error | TNode | - | 自定义图片加载失败状态下的显示内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +fallback | String | - | 图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error` | N fit | String | fill | 图片填充模式。可选项：contain/cover/fill/none/scale-down | N gallery | Boolean | false | 是否展示为图集样式 | N lazy | Boolean | false | 是否开启图片懒加载 | N @@ -17,8 +18,9 @@ overlayContent | TNode | - | 图片上方的浮层内容。TS 类型：`string \ overlayTrigger | String | always | 浮层 `overlayContent` 出现的时机。可选项：always/hover | N placeholder | TNode | - | 占位元素，展示层级低于 `loading` `error` 和图片本身，值类型为字符串时表示占位图片地址。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N position | String | center | 等同于原生的 object-position 属性，可选值为 top right bottom left 或 string，可以自定义任何单位，px 或者 百分比 | N +referrerpolicy | String | - | `![]()
` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)。可选项：no-referrer/no-referrer-when-downgrade/origin/origin-when-cross-origin/same-origin/strict-origin/strict-origin-when-cross-origin/unsafe-url | N
shape | String | square | 图片圆角类型。可选项：circle/round/square | N
-src | String | - | 图片链接 | N
-srcset | Object | - | 图片地址，支持特殊格式的图片，如 `.avif` 和 `.webp`。TS 类型：`ImageSrcset` `interface ImageSrcset { 'image/avif': string; 'image/webp': string; }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/image/type.ts) | N
+src | String / Object | - | 用于显示图片的链接或原始图片文件对象。TS 类型：`string \| File` | N
+srcset | Object | - | 图片链接集合，用于支持特殊格式的图片，如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式，浏览器不支持的情况下，加载 `src` 设置的图片地址。TS 类型：`ImageSrcset` `interface ImageSrcset { 'image/avif': string; 'image/webp': string; }`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/image/type.ts) | N
onError | Function | | TS 类型：`(context: { e: ImageEvent }) => void`
图片加载失败时触发 | N onLoad | Function | | TS 类型：`(context: { e: ImageEvent }) => void`
图片加载完成时触发 | N diff --git a/src/image/type.ts b/src/image/type.ts index 71988ee16f..0ba1f34a85 100644 --- a/src/image/type.ts +++ b/src/image/type.ts @@ -16,6 +16,11 @@ export interface TdImageProps { * 自定义图片加载失败状态下的显示内容 */ error?: TNode; + /** + * 图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error` + * @default '' + */ + fallback?: string; /** * 图片填充模式 * @default fill @@ -53,18 +58,29 @@ export interface TdImageProps { * @default center */ position?: string; + /** + * `![]()
` 标签的原生属性，[MDN 定义](https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Referrer-Policy)
+ */
+ referrerpolicy?:
+ | 'no-referrer'
+ | 'no-referrer-when-downgrade'
+ | 'origin'
+ | 'origin-when-cross-origin'
+ | 'same-origin'
+ | 'strict-origin'
+ | 'strict-origin-when-cross-origin'
+ | 'unsafe-url';
/**
* 图片圆角类型
* @default square
*/
shape?: 'circle' | 'round' | 'square';
/**
- * 图片链接
- * @default ''
+ * 用于显示图片的链接或原始图片文件对象
*/
- src?: string;
+ src?: string | File;
/**
- * 图片地址，支持特殊格式的图片，如 `.avif` 和 `.webp`
+ * 图片链接集合，用于支持特殊格式的图片，如 `.avif` 和 `.webp`。会优先加载 `srcset` 中的图片格式，浏览器不支持的情况下，加载 `src` 设置的图片地址
*/
srcset?: ImageSrcset;
/**
diff --git a/src/menu/HeadMenu.tsx b/src/menu/HeadMenu.tsx
index 1078da4692..d4fa900280 100644
--- a/src/menu/HeadMenu.tsx
+++ b/src/menu/HeadMenu.tsx
@@ -49,8 +49,8 @@ const HeadMenu: FC = (props) => {
value={currentChildListValues.includes(value.active) ? value.active : currentChildListValues[0]}
onChange={value.onChange}
>
- {childList.map(({ props }) => (
- ((props, ref) => {
const tableElmRef = useRef();
const bottomContentRef = useRef();
const [tableFootHeight, setTableFootHeight] = useState(0);
+ const allTableClasses = useClassName();
+
const { classPrefix, virtualScrollClasses, tableLayoutClasses, tableBaseClass, tableColFixedClasses } =
- useClassName();
+ allTableClasses;
// 表格基础样式类
const { tableClasses, sizeClassNames, tableContentStyles, tableElementStyles } = useStyle(props);
const { isMultipleHeader, spansAndLeafNodes, thList } = useTableHeader({ columns: props.columns });
@@ -422,7 +424,7 @@ const BaseTable = forwardRef((props, ref) => {
return affixedFooter;
};
- const tableBodyProps = {
+ const tableBodyProps: TableBodyProps = {
classPrefix,
ellipsisOverlayClassName: props.size !== 'medium' ? sizeClassNames[props.size] : '',
rowAndColFixedPosition,
@@ -431,10 +433,11 @@ const BaseTable = forwardRef((props, ref) => {
virtualConfig,
handleRowMounted: virtualConfig.handleRowMounted,
columns: spansAndLeafNodes?.leafColumns || columns,
- tableElm: tableRef.current,
- tableContentElm: tableContentRef.current,
- tableWidth: tableWidth.current,
+ tableRef,
+ tableContentRef,
+ tableWidth,
isWidthOverflow,
+ allTableClasses,
rowKey: props.rowKey || 'id',
scroll: props.scroll,
cellEmptyContent: props.cellEmptyContent,
@@ -483,15 +486,15 @@ const BaseTable = forwardRef((props, ref) => {
),
// eslint-disable-next-line
[
- tableBodyProps.classPrefix,
+ allTableClasses,
tableBodyProps.ellipsisOverlayClassName,
tableBodyProps.rowAndColFixedPosition,
tableBodyProps.showColumnShadow,
tableBodyProps.data,
tableBodyProps.columns,
- tableBodyProps.tableElm,
- tableBodyProps.tableContentElm,
- tableBodyProps.tableWidth,
+ tableRef,
+ tableContentRef,
+ tableWidth,
isWidthOverflow,
props.rowKey,
props.rowClassName,
diff --git a/src/table/Cell.tsx b/src/table/Cell.tsx
index 980e3d3be2..eec7f5e1c1 100644
--- a/src/table/Cell.tsx
+++ b/src/table/Cell.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEvent } from 'react';
+import React, { MouseEvent, MutableRefObject } from 'react';
import classNames from 'classnames';
import isFunction from 'lodash/isFunction';
import get from 'lodash/get';
@@ -27,7 +27,7 @@ export interface CellProps {
cellSpans: RowspanColspan;
cellEmptyContent: TdBaseTableProps['cellEmptyContent'];
tableClassNames: TableClassName;
- tableElm?: HTMLDivElement;
+ tableRef?: MutableRefObject;
classPrefix?: string;
overlayClassName?: string;
pagination?: PaginationProps;
@@ -95,7 +95,7 @@ function renderEllipsisCell(cellParams: BaseTableCellParams, param
}
const Cell = (props: CellProps) => {
- const { cellParams, tableClassNames, tableElm, columnLength, classPrefix, overlayClassName, pagination } = props;
+ const { cellParams, tableClassNames, tableRef, columnLength, classPrefix, overlayClassName, pagination } = props;
const { col, colIndex, rowIndex } = cellParams;
const { cellSpans, dataLength, rowAndColFixedPosition, cellEmptyContent, rowspanAndColspan, onClick } = props;
const { tableColFixedClasses, tdEllipsisClass, tableBaseClass, tdAlignClasses, tableDraggableClasses } =
@@ -127,7 +127,13 @@ const Cell = (props: CellProps) => {
onClick={onClick}
>
{col.ellipsis
- ? renderEllipsisCell(cellParams, { cellNode, tableElm, columnLength, classPrefix, overlayClassName })
+ ? renderEllipsisCell(cellParams, {
+ cellNode,
+ tableElm: tableRef.current,
+ columnLength,
+ classPrefix,
+ overlayClassName,
+ })
: cellNode}
);
diff --git a/src/table/EditableCell.tsx b/src/table/EditableCell.tsx
index 9dffcbec81..062dda0d28 100644
--- a/src/table/EditableCell.tsx
+++ b/src/table/EditableCell.tsx
@@ -221,7 +221,7 @@ const EditableCell = (props: EditableCellProps) => {
const params = {
...cellParams,
value: val,
- editedRow: { ...props.row, [props.col.colKey]: val },
+ editedRow: set({ ...props.row }, props.col.colKey, val),
};
props.onChange?.(params);
props.onRuleChange?.(params);
diff --git a/src/table/EnhancedTable.tsx b/src/table/EnhancedTable.tsx
index fc6a85c874..135ecfedf4 100644
--- a/src/table/EnhancedTable.tsx
+++ b/src/table/EnhancedTable.tsx
@@ -17,7 +17,8 @@ const EnhancedTable = forwardRef((props,
const primaryTableRef = useRef();
// treeInstanceFunctions 属于对外暴露的 Ref 方法
- const { store, dataSource, formatTreeColumn, swapData, ...treeInstanceFunctions } = useTreeData(props);
+ const { store, dataSource, formatTreeColumn, swapData, onExpandFoldIconClick, ...treeInstanceFunctions } =
+ useTreeData(props);
const treeDataMap = store?.treeDataMap;
@@ -48,7 +49,7 @@ const EnhancedTable = forwardRef((props,
const onEnhancedTableRowClick: TdPrimaryTableProps['onRowClick'] = (p) => {
if (props.tree?.expandTreeNodeOnClick) {
- treeInstanceFunctions.toggleExpandData(
+ onExpandFoldIconClick(
{
row: p.row,
rowIndex: p.index,
diff --git a/src/table/TBody.tsx b/src/table/TBody.tsx
index 4444de8e23..e744ed245d 100644
--- a/src/table/TBody.tsx
+++ b/src/table/TBody.tsx
@@ -1,11 +1,11 @@
-import React, { useMemo } from 'react';
+import React, { MutableRefObject, useMemo } from 'react';
import camelCase from 'lodash/camelCase';
import get from 'lodash/get';
import pick from 'lodash/pick';
import classNames from 'classnames';
import TR, { ROW_LISTENERS, TABLE_PROPS } from './TR';
import { useLocaleReceiver } from '../locale/LocalReceiver';
-import useClassName from './hooks/useClassName';
+import { TableClassName } from './hooks/useClassName';
import useRowspanAndColspan from './hooks/useRowspanAndColspan';
import { BaseTableProps, RowAndColFixedPosition } from './interface';
import { TdBaseTableProps } from './type';
@@ -19,13 +19,14 @@ export interface TableBodyProps extends BaseTableProps {
// 固定列 left/right 具体值
rowAndColFixedPosition?: RowAndColFixedPosition;
showColumnShadow?: { left: boolean; right: boolean };
- tableElm?: HTMLDivElement;
- tableContentElm?: HTMLDivElement;
+ tableRef?: MutableRefObject;
+ tableContentRef?: MutableRefObject;
cellEmptyContent: TdBaseTableProps['cellEmptyContent'];
- tableWidth?: number;
+ tableWidth?: MutableRefObject;
isWidthOverflow?: boolean;
virtualConfig: VirtualScrollConfig;
pagination?: PaginationProps;
+ allTableClasses?: TableClassName;
handleRowMounted?: (rowData: any) => void;
}
@@ -58,10 +59,12 @@ export const extendTableProps = [
export default function TBody(props: TableBodyProps) {
// 如果不是变量复用，没必要对每一个参数进行解构（解构过程需要单独的内存空间存储临时变量）
- const { data, columns, rowKey, firstFullRow, lastFullRow, virtualConfig } = props;
+ const { data, columns, rowKey, firstFullRow, lastFullRow, virtualConfig, allTableClasses } = props;
const [global, t] = useLocaleReceiver('table');
- const { tableFullRowClasses, tableBaseClass } = useClassName();
+ const { tableFullRowClasses, tableBaseClass } = allTableClasses;
const { skipSpansMap } = useRowspanAndColspan(data, columns, rowKey, props.rowspanAndColspan);
+ const columnLength = columns.length;
+ const dataLength = data?.length;
const tbodyClasses = useMemo(() => [tableBaseClass.body], [tableBaseClass.body]);
const hasFullRowConfig = useMemo(() => firstFullRow || lastFullRow, [firstFullRow, lastFullRow]);
@@ -104,69 +107,77 @@ export default function TBody(props: TableBodyProps) {
);
};
- const columnLength = columns.length;
- const dataLength = data?.length;
- const trNodeList = [];
-
- const properties = [
- 'classPrefix',
- 'ellipsisOverlayClassName',
- 'rowAndColFixedPosition',
- 'scroll',
- 'tableElm',
- 'tableContentElm',
- 'trs',
- 'bufferSize',
- 'isVirtual',
- 'rowHeight',
- 'scrollType',
- ];
- data?.forEach((row, rowIndex) => {
- const trProps = {
- ...pick(props, TABLE_PROPS),
- rowKey: props.rowKey || 'id',
- row,
- columns,
- // eslint-disable-next-line
- rowIndex: row.__VIRTUAL_SCROLL_INDEX || rowIndex,
- dataLength,
- skipSpansMap,
- virtualConfig,
- classPrefix: props.classPrefix,
- ellipsisOverlayClassName: props.ellipsisOverlayClassName,
- ...pick(props, properties),
- pagination: props.pagination,
- };
- if (props.onCellClick) {
- trProps.onCellClick = props.onCellClick;
- }
-
- const trNode = (
- ;
bufferSize?: number;
scroll?: InfinityScroll;
- tableElm?: HTMLDivElement;
- tableContentElm?: HTMLDivElement;
+ tableRef?: MutableRefObject;
+ tableContentRef?: MutableRefObject;
pagination?: PaginationProps;
virtualConfig?: VirtualScrollConfig;
onRowMounted?: (data: any) => void;
@@ -72,7 +72,7 @@ export default function TR(props: TrProps) {
dataLength,
fixedRows,
scroll,
- tableContentElm,
+ tableContentRef,
rowAndColFixedPosition,
virtualConfig,
onRowMounted,
@@ -102,7 +102,7 @@ export default function TR(props: TrProps) {
}, [row, rowClassName, rowIndex, rowKey, trStyles?.classes]);
const useLazyLoadParams = useMemo(() => ({ ...scroll, rowIndex }), [scroll, rowIndex]);
- const { hasLazyLoadHolder, tRowHeight } = useLazyLoad(tableContentElm, trRef, useLazyLoadParams);
+ const { hasLazyLoadHolder, tRowHeight } = useLazyLoad(tableContentRef.current, trRef, useLazyLoadParams);
useEffect(() => {
if (virtualConfig.isVirtualScroll && trRef.current) {
@@ -123,7 +123,7 @@ export default function TR(props: TrProps) {
colIndex,
};
let spanState = null;
- if (props.skipSpansMap.size) {
+ if (props.skipSpansMap?.size) {
const cellKey = getCellKey(row, props.rowKey, col.colKey, colIndex);
spanState = props.skipSpansMap.get(cellKey) || {};
spanState?.rowspan > 1 && (cellSpans.rowspan = spanState.rowspan);
@@ -149,7 +149,7 @@ export default function TR(props: TrProps) {
tableClassNames={classNames}
rowspanAndColspan={props.rowspanAndColspan}
onClick={onClick}
- tableElm={props.tableElm}
+ tableRef={props.tableRef}
classPrefix={props.classPrefix}
overlayClassName={props.ellipsisOverlayClassName}
pagination={props.pagination}
diff --git a/src/table/_example/editable-cell.jsx b/src/table/_example/editable-cell.jsx
index e0b5f4a923..5c6d55d869 100644
--- a/src/table/_example/editable-cell.jsx
+++ b/src/table/_example/editable-cell.jsx
@@ -115,6 +115,7 @@ export default function EditableCellTable() {
title: '申请事项',
colKey: 'letters',
cell: ({ row }) => row?.letters?.join('、'),
+ width: 280,
edit: {
keepEditMode: true,
component: Select,
diff --git a/src/table/_example/editable-row.jsx b/src/table/_example/editable-row.jsx
index b4e7c578c4..b525e03a63 100644
--- a/src/table/_example/editable-row.jsx
+++ b/src/table/_example/editable-row.jsx
@@ -187,6 +187,7 @@ export default function EditableRowTable() {
title: '申请事项',
colKey: 'letters',
cell: ({ row }) => row?.letters?.join('、'),
+ width: 200,
edit: {
component: Select,
// props, 透传全部属性到 Select 组件
@@ -229,7 +230,6 @@ export default function EditableRowTable() {
{
title: '操作栏',
colKey: 'operate',
- width: 150,
cell: ({ row }) => {
const editable = editableRowKeys.includes(row.key);
return (
diff --git a/src/table/hooks/tree-store.ts b/src/table/hooks/tree-store.ts
index 7dd07e841a..e176ba2149 100644
--- a/src/table/hooks/tree-store.ts
+++ b/src/table/hooks/tree-store.ts
@@ -1,7 +1,7 @@
/* eslint-disable class-methods-use-this */
/* eslint-disable no-param-reassign */
import get from 'lodash/get';
-import { isRowSelectedDisabled } from '../utils';
+import { isRowSelectedDisabled } from '../../_common/js/table/utils';
import { PrimaryTableCol, TableRowState, TableRowValue, TableRowData } from '../type';
import log from '../../_common/js/log';
diff --git a/src/table/hooks/useClassName.ts b/src/table/hooks/useClassName.ts
index 7fd82c6662..353d89d83c 100644
--- a/src/table/hooks/useClassName.ts
+++ b/src/table/hooks/useClassName.ts
@@ -1,187 +1,191 @@
+import { useMemo } from 'react';
import useConfig from '../../hooks/useConfig';
export default function useClassName() {
const { classPrefix } = useConfig();
- const classNames = {
- classPrefix,
- tableBaseClass: {
- table: `${classPrefix}-table`,
- columnResizableTable: `${classPrefix}-table--column-resizable`,
- body: `${classPrefix}-table__body`,
- overflowVisible: `${classPrefix}-table--overflow-visible`,
- content: `${classPrefix}-table__content`,
- topContent: `${classPrefix}-table__top-content`,
- bottomContent: `${classPrefix}-table__bottom-content`,
- paginationWrap: `${classPrefix}-table__pagination-wrap`,
- tdLastRow: `${classPrefix}-table__td-last-row`,
- tdFirstCol: `${classPrefix}-table__td-first-col`,
- thCellInner: `${classPrefix}-table__th-cell-inner`,
- tableRowEdit: `${classPrefix}-table--row-edit`,
- cellEditable: `${classPrefix}-table__cell--editable`,
- cellEditWrap: `${classPrefix}-table__cell-wrap`,
- bordered: `${classPrefix}-table--bordered`,
- striped: `${classPrefix}-table--striped`,
- hover: `${classPrefix}-table--hoverable`,
- loading: `${classPrefix}-table--loading`,
- rowspanAndColspan: `${classPrefix}-table--rowspan-colspan`,
- empty: `${classPrefix}-table__empty`,
- emptyRow: `${classPrefix}-table__empty-row`,
- headerFixed: `${classPrefix}-table--header-fixed`,
- columnFixed: `${classPrefix}-table--column-fixed`,
- widthOverflow: `${classPrefix}-table--width-overflow`,
- multipleHeader: `${classPrefix}-table--multiple-header`,
- footerAffixed: `${classPrefix}-table--footer-affixed`,
- horizontalBarAffixed: `${classPrefix}-table--horizontal-bar-affixed`,
- affixedHeader: `${classPrefix}-table--affixed-header`,
- affixedHeaderElm: `${classPrefix}-table__affixed-header-elm`,
- affixedFooterElm: `${classPrefix}-table__affixed-footer-elm`,
- affixedFooterWrap: `${classPrefix}-table__affixed-footer-wrap`,
- // 边框模式，固定表头，横向滚动时，右侧添加边线，分隔滚动条
- scrollbarDivider: `${classPrefix}-table__scroll-bar-divider`,
- // 当用户设置 height 为固定高度，为保证行元素铺满 table，则需设置 table 元素高度为 100%
- fullHeight: `${classPrefix}-table--full-height`,
- // 拖拽列时的标记线
- resizeLine: `${classPrefix}-table__resize-line`,
- obviousScrollbar: `${classPrefix}-table__scrollbar--obvious`,
- affixedHeaderWrap: `${classPrefix}-table__affixed-header-elm-wrap`,
- },
-
- tdAlignClasses: {
- left: `${classPrefix}-align-left`,
- right: `${classPrefix}-align-right`,
- center: `${classPrefix}-align-center`,
- },
-
- tableHeaderClasses: {
- header: `${classPrefix}-table__header`,
- thBordered: `${classPrefix}-table__header-th--bordered`,
- fixed: `${classPrefix}-table__header--fixed`,
- multipleHeader: `${classPrefix}-table__header--multiple`,
- },
-
- tableFooterClasses: {
- footer: `${classPrefix}-table__footer`,
- fixed: `${classPrefix}-table__footer--fixed`,
- },
-
- tableAlignClasses: {
- top: `${classPrefix}-vertical-align-top`,
- middle: `${classPrefix}-vertical-align-middle`,
- bottom: `${classPrefix}-vertical-align-bottom`,
- },
-
- tableRowFixedClasses: {
- top: `${classPrefix}-table__row--fixed-top`,
- bottom: `${classPrefix}-table__row--fixed-bottom`,
- firstBottom: `${classPrefix}-table__row--fixed-bottom-first`,
- withoutBorderBottom: `${classPrefix}-table__row--without-border-bottom`,
- },
-
- tableColFixedClasses: {
- left: `${classPrefix}-table__cell--fixed-left`,
- right: `${classPrefix}-table__cell--fixed-right`,
- lastLeft: `${classPrefix}-table__cell--fixed-left-last`,
- firstRight: `${classPrefix}-table__cell--fixed-right-first`,
- leftShadow: `${classPrefix}-table__content--scrollable-to-left`,
- rightShadow: `${classPrefix}-table__content--scrollable-to-right`,
- },
-
- tableLayoutClasses: {
- auto: `${classPrefix}-table--layout-auto`,
- fixed: `${classPrefix}-table--layout-fixed`,
- },
-
- tdEllipsisClass: `${classPrefix}-table-td--ellipsis`,
-
- // 行通栏，一列铺满整行
- tableFullRowClasses: {
- base: `${classPrefix}-table__row--full`,
- innerFullRow: `${classPrefix}-table__row-full-inner`,
- innerFullElement: `${classPrefix}-table__row-full-element`,
- firstFullRow: `${classPrefix}-table__first-full-row`,
- lastFullRow: `${classPrefix}-table__last-full-row`,
- },
-
- // 展开/收起行，全部类名
- tableExpandClasses: {
- iconBox: `${classPrefix}-table__expand-box`,
- iconCell: `${classPrefix}-table__expandable-icon-cell`,
- row: `${classPrefix}-table__expanded-row`,
- rowInner: `${classPrefix}-table__expanded-row-inner`,
- expanded: `${classPrefix}-table__row--expanded`,
- collapsed: `${classPrefix}-table__row--collapsed`,
- },
-
- // 排序功能，全部类名
- tableSortClasses: {
- sortable: `${classPrefix}-table__cell--sortable`,
- sortColumn: `${classPrefix}-table__sort-column`,
- title: `${classPrefix}-table__cell--title`,
- trigger: `${classPrefix}-table__cell--sort-trigger`,
- doubleIcon: `${classPrefix}-table__double-icons`,
- sortIcon: `${classPrefix}-table__sort-icon`,
- iconDirection: {
- asc: `${classPrefix}-table-sort-asc`,
- desc: `${classPrefix}-table-sort-desc`,
- },
- iconActive: `${classPrefix}-table__sort-icon--active`,
- iconDefault: `${classPrefix}-icon-sort--default`,
- },
-
- // 行选中功能，全部类名
- tableSelectedClasses: {
- selected: `${classPrefix}-table__row--selected`,
- disabled: `${classPrefix}-table__row--disabled`,
- checkCell: `${classPrefix}-table__cell-check`,
- },
-
- // 过滤功能，全部类名
- tableFilterClasses: {
- filterable: `${classPrefix}-table__cell--filterable`,
- popup: `${classPrefix}-table__filter-pop`,
- icon: `${classPrefix}-table__filter-icon`,
- popupContent: `${classPrefix}-table__filter-pop-content`,
- result: `${classPrefix}-table__filter-result`,
- inner: `${classPrefix}-table__row-filter-inner`,
- bottomButtons: `${classPrefix}-table__filter--bottom-buttons`,
- contentInner: `${classPrefix}-table__filter-pop-content-inner`,
- iconWrap: `${classPrefix}-table__filter-icon-wrap`,
- },
-
- // 通用类名
- asyncLoadingClass: `${classPrefix}-table__async-loading`,
- isFocusClass: `${classPrefix}-is-focus`,
- isLoadingClass: `${classPrefix}-is-loading`,
- isLoadMoreClass: `${classPrefix}-is-load-more`,
-
- // 树形结构类名
- tableTreeClasses: {
- col: `${classPrefix}-table__tree-col`,
- inlineCol: `${classPrefix}-table__tree-col--inline`,
- icon: `${classPrefix}-table__tree-op-icon`,
- leafNode: `${classPrefix}-table__tree-leaf-node`,
- },
-
- // 拖拽功能类名
- tableDraggableClasses: {
- rowDraggable: `${classPrefix}-table--row-draggable`,
- rowHandlerDraggable: `${classPrefix}-table--row-handler-draggable`,
- colDraggable: `${classPrefix}-table--col-draggable`,
- handle: `${classPrefix}-table__handle-draggable`,
- ghost: `${classPrefix}-table__ele--draggable-ghost`,
- chosen: `${classPrefix}-table__ele--draggable-chosen`,
- dragging: `${classPrefix}-table__ele--draggable-dragging`,
- dragSortTh: `${classPrefix}-table__th--drag-sort`,
- },
-
- virtualScrollClasses: {
- cursor: `${classPrefix}-table__virtual-scroll-cursor`,
- header: `${classPrefix}-table__virtual-scroll-header`,
- },
-
- positiveRotate90: `${classPrefix}-positive-rotate-90`,
- negativeRotate180: `${classPrefix}-negative-rotate-180`,
- };
+ const classNames = useMemo(
+ () => ({
+ classPrefix,
+ tableBaseClass: {
+ table: `${classPrefix}-table`,
+ columnResizableTable: `${classPrefix}-table--column-resizable`,
+ body: `${classPrefix}-table__body`,
+ overflowVisible: `${classPrefix}-table--overflow-visible`,
+ content: `${classPrefix}-table__content`,
+ topContent: `${classPrefix}-table__top-content`,
+ bottomContent: `${classPrefix}-table__bottom-content`,
+ paginationWrap: `${classPrefix}-table__pagination-wrap`,
+ tdLastRow: `${classPrefix}-table__td-last-row`,
+ tdFirstCol: `${classPrefix}-table__td-first-col`,
+ thCellInner: `${classPrefix}-table__th-cell-inner`,
+ tableRowEdit: `${classPrefix}-table--row-edit`,
+ cellEditable: `${classPrefix}-table__cell--editable`,
+ cellEditWrap: `${classPrefix}-table__cell-wrap`,
+ bordered: `${classPrefix}-table--bordered`,
+ striped: `${classPrefix}-table--striped`,
+ hover: `${classPrefix}-table--hoverable`,
+ loading: `${classPrefix}-table--loading`,
+ rowspanAndColspan: `${classPrefix}-table--rowspan-colspan`,
+ empty: `${classPrefix}-table__empty`,
+ emptyRow: `${classPrefix}-table__empty-row`,
+ headerFixed: `${classPrefix}-table--header-fixed`,
+ columnFixed: `${classPrefix}-table--column-fixed`,
+ widthOverflow: `${classPrefix}-table--width-overflow`,
+ multipleHeader: `${classPrefix}-table--multiple-header`,
+ footerAffixed: `${classPrefix}-table--footer-affixed`,
+ horizontalBarAffixed: `${classPrefix}-table--horizontal-bar-affixed`,
+ affixedHeader: `${classPrefix}-table--affixed-header`,
+ affixedHeaderElm: `${classPrefix}-table__affixed-header-elm`,
+ affixedFooterElm: `${classPrefix}-table__affixed-footer-elm`,
+ affixedFooterWrap: `${classPrefix}-table__affixed-footer-wrap`,
+ // 边框模式，固定表头，横向滚动时，右侧添加边线，分隔滚动条
+ scrollbarDivider: `${classPrefix}-table__scroll-bar-divider`,
+ // 当用户设置 height 为固定高度，为保证行元素铺满 table，则需设置 table 元素高度为 100%
+ fullHeight: `${classPrefix}-table--full-height`,
+ // 拖拽列时的标记线
+ resizeLine: `${classPrefix}-table__resize-line`,
+ obviousScrollbar: `${classPrefix}-table__scrollbar--obvious`,
+ affixedHeaderWrap: `${classPrefix}-table__affixed-header-elm-wrap`,
+ },
+
+ tdAlignClasses: {
+ left: `${classPrefix}-align-left`,
+ right: `${classPrefix}-align-right`,
+ center: `${classPrefix}-align-center`,
+ },
+
+ tableHeaderClasses: {
+ header: `${classPrefix}-table__header`,
+ thBordered: `${classPrefix}-table__header-th--bordered`,
+ fixed: `${classPrefix}-table__header--fixed`,
+ multipleHeader: `${classPrefix}-table__header--multiple`,
+ },
+
+ tableFooterClasses: {
+ footer: `${classPrefix}-table__footer`,
+ fixed: `${classPrefix}-table__footer--fixed`,
+ },
+
+ tableAlignClasses: {
+ top: `${classPrefix}-vertical-align-top`,
+ middle: `${classPrefix}-vertical-align-middle`,
+ bottom: `${classPrefix}-vertical-align-bottom`,
+ },
+
+ tableRowFixedClasses: {
+ top: `${classPrefix}-table__row--fixed-top`,
+ bottom: `${classPrefix}-table__row--fixed-bottom`,
+ firstBottom: `${classPrefix}-table__row--fixed-bottom-first`,
+ withoutBorderBottom: `${classPrefix}-table__row--without-border-bottom`,
+ },
+
+ tableColFixedClasses: {
+ left: `${classPrefix}-table__cell--fixed-left`,
+ right: `${classPrefix}-table__cell--fixed-right`,
+ lastLeft: `${classPrefix}-table__cell--fixed-left-last`,
+ firstRight: `${classPrefix}-table__cell--fixed-right-first`,
+ leftShadow: `${classPrefix}-table__content--scrollable-to-left`,
+ rightShadow: `${classPrefix}-table__content--scrollable-to-right`,
+ },
+
+ tableLayoutClasses: {
+ auto: `${classPrefix}-table--layout-auto`,
+ fixed: `${classPrefix}-table--layout-fixed`,
+ },
+
+ tdEllipsisClass: `${classPrefix}-table-td--ellipsis`,
+
+ // 行通栏，一列铺满整行
+ tableFullRowClasses: {
+ base: `${classPrefix}-table__row--full`,
+ innerFullRow: `${classPrefix}-table__row-full-inner`,
+ innerFullElement: `${classPrefix}-table__row-full-element`,
+ firstFullRow: `${classPrefix}-table__first-full-row`,
+ lastFullRow: `${classPrefix}-table__last-full-row`,
+ },
+
+ // 展开/收起行，全部类名
+ tableExpandClasses: {
+ iconBox: `${classPrefix}-table__expand-box`,
+ iconCell: `${classPrefix}-table__expandable-icon-cell`,
+ row: `${classPrefix}-table__expanded-row`,
+ rowInner: `${classPrefix}-table__expanded-row-inner`,
+ expanded: `${classPrefix}-table__row--expanded`,
+ collapsed: `${classPrefix}-table__row--collapsed`,
+ },
+
+ // 排序功能，全部类名
+ tableSortClasses: {
+ sortable: `${classPrefix}-table__cell--sortable`,
+ sortColumn: `${classPrefix}-table__sort-column`,
+ title: `${classPrefix}-table__cell--title`,
+ trigger: `${classPrefix}-table__cell--sort-trigger`,
+ doubleIcon: `${classPrefix}-table__double-icons`,
+ sortIcon: `${classPrefix}-table__sort-icon`,
+ iconDirection: {
+ asc: `${classPrefix}-table-sort-asc`,
+ desc: `${classPrefix}-table-sort-desc`,
+ },
+ iconActive: `${classPrefix}-table__sort-icon--active`,
+ iconDefault: `${classPrefix}-icon-sort--default`,
+ },
+
+ // 行选中功能，全部类名
+ tableSelectedClasses: {
+ selected: `${classPrefix}-table__row--selected`,
+ disabled: `${classPrefix}-table__row--disabled`,
+ checkCell: `${classPrefix}-table__cell-check`,
+ },
+
+ // 过滤功能，全部类名
+ tableFilterClasses: {
+ filterable: `${classPrefix}-table__cell--filterable`,
+ popup: `${classPrefix}-table__filter-pop`,
+ icon: `${classPrefix}-table__filter-icon`,
+ popupContent: `${classPrefix}-table__filter-pop-content`,
+ result: `${classPrefix}-table__filter-result`,
+ inner: `${classPrefix}-table__row-filter-inner`,
+ bottomButtons: `${classPrefix}-table__filter--bottom-buttons`,
+ contentInner: `${classPrefix}-table__filter-pop-content-inner`,
+ iconWrap: `${classPrefix}-table__filter-icon-wrap`,
+ },
+
+ // 通用类名
+ asyncLoadingClass: `${classPrefix}-table__async-loading`,
+ isFocusClass: `${classPrefix}-is-focus`,
+ isLoadingClass: `${classPrefix}-is-loading`,
+ isLoadMoreClass: `${classPrefix}-is-load-more`,
+
+ // 树形结构类名
+ tableTreeClasses: {
+ col: `${classPrefix}-table__tree-col`,
+ inlineCol: `${classPrefix}-table__tree-col--inline`,
+ icon: `${classPrefix}-table__tree-op-icon`,
+ leafNode: `${classPrefix}-table__tree-leaf-node`,
+ },
+
+ // 拖拽功能类名
+ tableDraggableClasses: {
+ rowDraggable: `${classPrefix}-table--row-draggable`,
+ rowHandlerDraggable: `${classPrefix}-table--row-handler-draggable`,
+ colDraggable: `${classPrefix}-table--col-draggable`,
+ handle: `${classPrefix}-table__handle-draggable`,
+ ghost: `${classPrefix}-table__ele--draggable-ghost`,
+ chosen: `${classPrefix}-table__ele--draggable-chosen`,
+ dragging: `${classPrefix}-table__ele--draggable-dragging`,
+ dragSortTh: `${classPrefix}-table__th--drag-sort`,
+ },
+
+ virtualScrollClasses: {
+ cursor: `${classPrefix}-table__virtual-scroll-cursor`,
+ header: `${classPrefix}-table__virtual-scroll-header`,
+ },
+
+ positiveRotate90: `${classPrefix}-positive-rotate-90`,
+ negativeRotate180: `${classPrefix}-negative-rotate-180`,
+ }),
+ [classPrefix],
+ );
return classNames;
}
diff --git a/src/table/hooks/useDragSort.ts b/src/table/hooks/useDragSort.ts
index 789bd7afe4..42171d59ba 100644
--- a/src/table/hooks/useDragSort.ts
+++ b/src/table/hooks/useDragSort.ts
@@ -10,7 +10,7 @@ import useLatest from '../../_util/useLatest';
import log from '../../_common/js/log';
import swapDragArrayElement from '../../_common/js/utils/swapDragArrayElement';
import { BaseTableColumns } from '../interface';
-import { getColumnDataByKey, getColumnIndexByKey } from '../utils';
+import { getColumnDataByKey, getColumnIndexByKey } from '../../_common/js/table/utils';
export default function useDragSort(
props: TdPrimaryTableProps,
diff --git a/src/table/hooks/useEditableRow.ts b/src/table/hooks/useEditableRow.ts
index db5ef07ae0..01687c4214 100644
--- a/src/table/hooks/useEditableRow.ts
+++ b/src/table/hooks/useEditableRow.ts
@@ -4,7 +4,7 @@ import isFunction from 'lodash/isFunction';
import { PrimaryTableProps } from '../interface';
import { validate } from '../../form/formModel';
import { AllValidateResult } from '../../form';
-import { getEditableKeysMap } from '../utils';
+import { getEditableKeysMap } from '../../_common/js/table/utils';
import { PrimaryTableRowEditContext, TableRowData, TableErrorListMap } from '../type';
export type ErrorListObjectType = PrimaryTableRowEditContext & { errorList: AllValidateResult[] };
@@ -14,9 +14,8 @@ export interface TablePromiseErrorData {
errorMap: TableErrorListMap;
}
-const cellRuleMap = new Map[]>();
-
export function useEditableRow(props: PrimaryTableProps) {
+ const cellRuleMap = useMemo(() => new Map[]>(), []);
const { editableRowKeys } = props;
// 校验不通过的错误信息，其中 key 值为 [rowValue, col.colKey].join('__')
const [errorListMap, setErrorListMap] = useState({});
diff --git a/src/table/hooks/useFilter.tsx b/src/table/hooks/useFilter.tsx
index b9ca1768ed..fad1cbc7e6 100644
--- a/src/table/hooks/useFilter.tsx
+++ b/src/table/hooks/useFilter.tsx
@@ -2,10 +2,11 @@ import React, { useEffect, useState, MutableRefObject } from 'react';
import isFunction from 'lodash/isFunction';
import useClassName from './useClassName';
import TButton from '../../button';
-import { TdPrimaryTableProps, PrimaryTableCol, TableRowData, FilterValue } from '../type';
+import { TdPrimaryTableProps, PrimaryTableCol, TableRowData, FilterValue, TableFilterChangeContext } from '../type';
import useControlled from '../../hooks/useControlled';
import TableFilterController from '../FilterController';
import { useLocaleReceiver } from '../../locale/LocalReceiver';
+import { getColumnsResetValue } from '../../_common/js/table/utils';
function isFilterValueExist(value: any) {
const isArrayTrue = value instanceof Array && value.length;
@@ -27,6 +28,7 @@ function filterEmptyData(data: FilterValue) {
}
export default function useFilter(props: TdPrimaryTableProps, primaryTableRef: MutableRefObject) {
+ const { columns } = props;
const [locale, t] = useLocaleReceiver('table');
const { tableFilterClasses, isFocusClass } = useClassName();
const [isTableOverflowHidden, setIsTableOverflowHidden] = useState();
@@ -101,12 +103,16 @@ export default function useFilter(props: TdPrimaryTableProps, primaryTableRef: M
};
setInnerFilterValue(filterValue);
if (!column.filter.showConfirmAndReset) {
- emitFilterChange(filterValue, column);
+ emitFilterChange(filterValue, 'filter-change', column);
}
}
- function emitFilterChange(filterValue: FilterValue, column?: PrimaryTableCol) {
- setTFilterValue(filterValue, { col: column });
+ function emitFilterChange(
+ filterValue: FilterValue,
+ trigger: TableFilterChangeContext['trigger'],
+ column?: PrimaryTableCol,
+ ) {
+ setTFilterValue(filterValue, { col: column, trigger });
props.onChange?.({ filter: filterValue }, { trigger: 'filter' });
}
@@ -122,15 +128,16 @@ export default function useFilter(props: TdPrimaryTableProps, primaryTableRef: M
column.filter.resetValue ||
'',
};
- emitFilterChange(filterValue, column);
+ emitFilterChange(filterValue, 'reset', column);
}
function onResetAll() {
- emitFilterChange({}, undefined);
+ const resetValue: { [key: string]: any } = getColumnsResetValue(columns);
+ emitFilterChange(resetValue, 'clear', undefined);
}
function onConfirm(column: PrimaryTableCol) {
- emitFilterChange(innerFilterValue, column);
+ emitFilterChange(innerFilterValue, 'confirm', column);
}
// 图标：内置图标，组件自定义图标，全局配置图标
diff --git a/src/table/hooks/useRowSelect.tsx b/src/table/hooks/useRowSelect.tsx
index d03f305273..6e3a34ca2a 100644
--- a/src/table/hooks/useRowSelect.tsx
+++ b/src/table/hooks/useRowSelect.tsx
@@ -13,7 +13,7 @@ import {
TdBaseTableProps,
TdPrimaryTableProps,
} from '../type';
-import { isRowSelectedDisabled } from '../utils';
+import { isRowSelectedDisabled } from '../../_common/js/table/utils';
import { TableClassName } from './useClassName';
import Checkbox from '../../checkbox';
import Radio from '../../radio';
diff --git a/src/table/hooks/useRowspanAndColspan.ts b/src/table/hooks/useRowspanAndColspan.ts
index c4ff27dc39..d041772b12 100644
--- a/src/table/hooks/useRowspanAndColspan.ts
+++ b/src/table/hooks/useRowspanAndColspan.ts
@@ -23,10 +23,14 @@ export default function useRowspanAndColspan(
rowKey: string,
rowspanAndColspan: TableRowspanAndColspanFunc,
) {
- const [skipSpansMap] = useState(new Map());
+ const [skipSpansMap, setKipSnapsMap] = useState(new Map());
// 计算单元格是否跳过渲染
- const onTrRowspanOrColspan = (params: BaseTableCellParams, skipSpansValue: SkipSpansValue) => {
+ const onTrRowspanOrColspan = (
+ params: BaseTableCellParams,
+ skipSpansValue: SkipSpansValue,
+ map: Map,
+ ) => {
const { rowIndex, colIndex } = params;
if (!skipSpansValue.rowspan && !skipSpansValue.colspan) return;
const maxRowIndex = rowIndex + (skipSpansValue.rowspan || 1);
@@ -36,22 +40,22 @@ export default function useRowspanAndColspan(
if (i !== rowIndex || j !== colIndex) {
if (!data[i] || !columns[j]) return;
const cellKey = getCellKey(data[i], rowKey, columns[j].colKey, j);
- const state = skipSpansMap.get(cellKey) || {};
+ const state = map.get(cellKey) || {};
state.skipped = true;
- skipSpansMap.set(cellKey, state);
+ map.set(cellKey, state);
}
}
}
};
// 计算单元格是否需要设置 rowspan 和 colspan
- const updateSkipSpansMap = (
+ const getSkipSpansMap = (
data: TableRowData[],
columns: BaseTableCol[],
rowspanAndColspan: TableRowspanAndColspanFunc,
) => {
- skipSpansMap.clear();
if (!data || !rowspanAndColspan) return;
+ const map: Map = new Map();
for (let i = 0, len = data.length; i < len; i++) {
const row = data[i];
for (let j = 0, colLen = columns.length; j < colLen; j++) {
@@ -63,22 +67,26 @@ export default function useRowspanAndColspan(
colIndex: j,
};
const cellKey = getCellKey(row, rowKey, col.colKey, j);
- const state = skipSpansMap.get(cellKey) || {};
+ const state = map.get(cellKey) || {};
const o = rowspanAndColspan(params) || {};
if (o.rowspan || o.colspan || state.rowspan || state.colspan) {
o.rowspan && (state.rowspan = o.rowspan);
o.colspan && (state.colspan = o.colspan);
- skipSpansMap.set(cellKey, state);
+ map.set(cellKey, state);
}
- onTrRowspanOrColspan?.(params, state);
+ onTrRowspanOrColspan?.(params, state, map);
}
}
+ return map;
};
useEffect(() => {
- updateSkipSpansMap(data, columns, rowspanAndColspan);
+ if (!rowspanAndColspan) return;
+ skipSpansMap.clear();
+ const result = getSkipSpansMap(data, columns, rowspanAndColspan);
+ setKipSnapsMap(result);
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [data, columns, rowspanAndColspan]);
- return { skipSpansMap, updateSkipSpansMap };
+ return { skipSpansMap, getSkipSpansMap };
}
diff --git a/src/table/hooks/useTreeData.tsx b/src/table/hooks/useTreeData.tsx
index 9e2da7292f..24b458156d 100644
--- a/src/table/hooks/useTreeData.tsx
+++ b/src/table/hooks/useTreeData.tsx
@@ -309,6 +309,7 @@ export default function useTreeData(props: TdEnhancedTableProps) {
getTreeNode,
resetData,
getTreeExpandedRow,
+ onExpandFoldIconClick,
};
}
diff --git a/src/table/table.en-US.md b/src/table/table.en-US.md
index 076edecc01..aa4799b372 100644
--- a/src/table/table.en-US.md
+++ b/src/table/table.en-US.md
@@ -142,7 +142,7 @@ onDataChange | Function | | Typescript：`(data: Array, context: TableDataCh
onDisplayColumnsChange | Function | | Typescript：`(value: CheckboxGroupValue) => void`
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
| N onDragSort | Function | | Typescript：`(context: DragSortContext) => void`
trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T; data: T[]; newData: T[]; currentData?: T[]; e: SortableEvent; sort: 'row' \| 'col' }`
`import { SortableEvent, SortableOptions } from 'sortablejs'`
| N onExpandChange | Function | | Typescript：`(expandedRowKeys: Array, options: ExpandOptions) => void`
trigger on expand row keys changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface ExpandOptions { expandedRowData: Array; currentRowData: T }`
| N -onFilterChange | Function | | Typescript：`(filterValue: FilterValue, context: { col?: PrimaryTableCol }) => void`
trigger on filter value changing | N +onFilterChange | Function | | Typescript：`(filterValue: FilterValue, context: TableFilterChangeContext) => void`
trigger on filter value changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableFilterChangeContext { col?: PrimaryTableCol; trigger: 'filter-change' \| 'confirm' \| 'reset' \| 'clear' }`
| N onRowEdit | Function | | Typescript：`(context: PrimaryTableRowEditContext) => void`
trigger on row data is editing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type PrimaryTableRowEditContext = PrimaryTableCellParams & { value: any; editedRow: T }`
| N onRowValidate | Function | | Typescript：`(context: PrimaryTableRowValidateContext) => void`
trigger after row data validated。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type PrimaryTableRowValidateContext = { result: TableRowValidateResult[]; trigger: TableValidateTrigger }`
`type TableValidateTrigger = 'self' \| 'parent'`
`export type TableRowValidateResult = PrimaryTableCellParams & { errorList: AllValidateResult[]; value: any }`
| N onSelectChange | Function | | Typescript：`(selectedRowKeys: Array, options: SelectOptions) => void`
trigger on select changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface SelectOptions { selectedRowData: Array; type: 'uncheck' \| 'check'; currentRowKey?: string; currentRowData?: T }`
| N diff --git a/src/table/table.md b/src/table/table.md index e760c4f1bc..6ef1d1c87c 100644 --- a/src/table/table.md +++ b/src/table/table.md @@ -142,7 +142,7 @@ onDataChange | Function | | TS 类型：`(data: Array, context: TableDataCha
onDisplayColumnsChange | Function | | TS 类型：`(value: CheckboxGroupValue) => void`
确认列配置时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
| N onDragSort | Function | | TS 类型：`(context: DragSortContext) => void`
拖拽排序时触发，`data` 表示排序前的数据，`newData` 表示拖拽排序结束后的新数据，`sort=row` 表示行拖拽事件触发，`sort=col` 表示列拖拽事件触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface DragSortContext { currentIndex: number; current: T; targetIndex: number; target: T; data: T[]; newData: T[]; currentData?: T[]; e: SortableEvent; sort: 'row' \| 'col' }`
`import { SortableEvent, SortableOptions } from 'sortablejs'`
| N onExpandChange | Function | | TS 类型：`(expandedRowKeys: Array, options: ExpandOptions) => void`
展开行发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface ExpandOptions { expandedRowData: Array; currentRowData: T }`
| N -onFilterChange | Function | | TS 类型：`(filterValue: FilterValue, context: { col?: PrimaryTableCol }) => void`
过滤参数发生变化时触发，泛型 T 指表格数据类型 | N +onFilterChange | Function | | TS 类型：`(filterValue: FilterValue, context: TableFilterChangeContext) => void`
过滤参数发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableFilterChangeContext { col?: PrimaryTableCol; trigger: 'filter-change' \| 'confirm' \| 'reset' \| 'clear' }`
| N onRowEdit | Function | | TS 类型：`(context: PrimaryTableRowEditContext) => void`
行编辑时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type PrimaryTableRowEditContext = PrimaryTableCellParams & { value: any; editedRow: T }`
| N onRowValidate | Function | | TS 类型：`(context: PrimaryTableRowValidateContext) => void`
行编辑校验完成后触发，即组件实例方法 `validateRowData` 执行结束后触发。`result` 表示校验结果，`trigger=self` 表示编辑组件内部触发的校验，`trigger='parent'` 表示表格父组件触发的校验。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type PrimaryTableRowValidateContext = { result: TableRowValidateResult[]; trigger: TableValidateTrigger }`
`type TableValidateTrigger = 'self' \| 'parent'`
`export type TableRowValidateResult = PrimaryTableCellParams & { errorList: AllValidateResult[]; value: any }`
| N onSelectChange | Function | | TS 类型：`(selectedRowKeys: Array, options: SelectOptions) => void`
选中行发生变化时触发，泛型 T 指表格数据类型。两个参数，第一个参数为选中行 keys，第二个参数为更多参数，具体如下：`type = uncheck` 表示当前行操作为「取消行选中」；`type = check` 表示当前行操作为「行选中」； `currentRowKey` 表示当前操作行的 rowKey 值； `currentRowData` 表示当前操作行的行数据。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface SelectOptions { selectedRowData: Array; type: 'uncheck' \| 'check'; currentRowKey?: string; currentRowData?: T }`
| N diff --git a/src/table/type.ts b/src/table/type.ts index 5a57c6e085..ad8fc49bae 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -558,7 +558,7 @@ export interface TdPrimaryTableProps
/**
* 过滤参数发生变化时触发，泛型 T 指表格数据类型
*/
- onFilterChange?: (filterValue: FilterValue, context: { col?: PrimaryTableCol }) => void;
+ onFilterChange?: (filterValue: FilterValue, context: TableFilterChangeContext) => void;
/**
* 行编辑时触发
*/
@@ -1096,6 +1096,11 @@ export interface ExpandOptions {
currentRowData: T;
}
+export interface TableFilterChangeContext {
+ col?: PrimaryTableCol;
+ trigger: 'filter-change' | 'confirm' | 'reset' | 'clear';
+}
+
export type PrimaryTableRowEditContext = PrimaryTableCellParams & { value: any; editedRow: T };
export type PrimaryTableRowValidateContext = { result: TableRowValidateResult[]; trigger: TableValidateTrigger };
diff --git a/src/table/utils.ts b/src/table/utils.ts
index 737c9fd492..76d9c8d967 100644
--- a/src/table/utils.ts
+++ b/src/table/utils.ts
@@ -4,7 +4,6 @@ import isObject from 'lodash/isObject';
import {
BaseTableCellParams,
CellData,
- PrimaryTableCol,
RowClassNameParams,
TableColumnClassName,
TableRowData,
@@ -94,75 +93,8 @@ export function formatClassNames(
return arr;
}
-export function filterDataByIds(
- data: Array
props.placeholder works fine 1`] = `
{
+ const timer = setTimeout(() => {
+ setSrc('https://tdesign.gtimg.com/demo/demo-image-1.png');
+ }, 100);
+
+ return () => {
+ clearTimeout(timer);
+ };
+ }, []);
+
return (
{
['fill', 'contain', 'cover', 'none', 'scale-down'].map(item => (
默认错误
{
@@ -59,7 +59,7 @@ export default function PlaceholderImage() {
自定义错误
-
diff --git a/src/image/image.en-US.md b/src/image/image.en-US.md
index 47417d94b5..0639351646 100644
--- a/src/image/image.en-US.md
+++ b/src/image/image.en-US.md
@@ -9,16 +9,18 @@ className | String | - | 类名 | N
style | Object | - | 样式，Typescript：`React.CSSProperties` | N
alt | String | - | \- | N
error | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-fit | String | fill | options：contain/cover/fill/none/scale-down | N
+fallback | String | - | display `fallback` image on `src` loading failed. you can also use `error` to define more complex error content | N
+fit | String | fill | options: contain/cover/fill/none/scale-down | N
gallery | Boolean | false | \- | N
lazy | Boolean | false | \- | N
loading | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
overlayContent | TNode | - | overlay on the top of image。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-overlayTrigger | String | always | options：always/hover | N
+overlayTrigger | String | always | options: always/hover | N
placeholder | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
position | String | center | \- | N
-shape | String | square | options：circle/round/square | N
-src | String | - | \- | N
-srcset | Object | - | for `.avif` and `.webp` image url。Typescript：`ImageSrcset` `interface ImageSrcset { 'image/avif': string; 'image/webp': string; }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/image/type.ts) | N
+referrerpolicy | String | - | attribute of `trigger on image load failed | N onLoad | Function | | Typescript：`(context: { e: ImageEvent }) => void`
trigger on image loaded | N diff --git a/src/image/image.md b/src/image/image.md index 34b46aae03..25c004e456 100644 --- a/src/image/image.md +++ b/src/image/image.md @@ -9,6 +9,7 @@ className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N alt | String | - | 图片描述 | N error | TNode | - | 自定义图片加载失败状态下的显示内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N +fallback | String | - | 图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error` | N fit | String | fill | 图片填充模式。可选项：contain/cover/fill/none/scale-down | N gallery | Boolean | false | 是否展示为图集样式 | N lazy | Boolean | false | 是否开启图片懒加载 | N @@ -17,8 +18,9 @@ overlayContent | TNode | - | 图片上方的浮层内容。TS 类型：`string \ overlayTrigger | String | always | 浮层 `overlayContent` 出现的时机。可选项：always/hover | N placeholder | TNode | - | 占位元素，展示层级低于 `loading` `error` 和图片本身，值类型为字符串时表示占位图片地址。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N position | String | center | 等同于原生的 object-position 属性，可选值为 top right bottom left 或 string，可以自定义任何单位，px 或者 百分比 | N +referrerpolicy | String | - | `
图片加载失败时触发 | N onLoad | Function | | TS 类型：`(context: { e: ImageEvent }) => void`
图片加载完成时触发 | N diff --git a/src/image/type.ts b/src/image/type.ts index 71988ee16f..0ba1f34a85 100644 --- a/src/image/type.ts +++ b/src/image/type.ts @@ -16,6 +16,11 @@ export interface TdImageProps { * 自定义图片加载失败状态下的显示内容 */ error?: TNode; + /** + * 图片加载失败时，显示当前链接设置的图片地址。如果要使用组件图标或完全自定义加载失败时显示的内容，请更为使用 `error` + * @default '' + */ + fallback?: string; /** * 图片填充模式 * @default fill @@ -53,18 +58,29 @@ export interface TdImageProps { * @default center */ position?: string; + /** + * `
[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
| N onDragSort | Function | | Typescript：`(context: DragSortContext
trigger on drag sort。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface DragSortContext
`import { SortableEvent, SortableOptions } from 'sortablejs'`
| N onExpandChange | Function | | Typescript：`(expandedRowKeys: Array
trigger on expand row keys changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface ExpandOptions
| N -onFilterChange | Function | | Typescript：`(filterValue: FilterValue, context: { col?: PrimaryTableCol
trigger on filter value changing | N +onFilterChange | Function | | Typescript：`(filterValue: FilterValue, context: TableFilterChangeContext
trigger on filter value changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableFilterChangeContext
| N onRowEdit | Function | | Typescript：`(context: PrimaryTableRowEditContext
trigger on row data is editing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type PrimaryTableRowEditContext
| N onRowValidate | Function | | Typescript：`(context: PrimaryTableRowValidateContext
trigger after row data validated。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type PrimaryTableRowValidateContext
`type TableValidateTrigger = 'self' \| 'parent'`
`export type TableRowValidateResult
| N onSelectChange | Function | | Typescript：`(selectedRowKeys: Array
trigger on select changing。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface SelectOptions
| N diff --git a/src/table/table.md b/src/table/table.md index e760c4f1bc..6ef1d1c87c 100644 --- a/src/table/table.md +++ b/src/table/table.md @@ -142,7 +142,7 @@ onDataChange | Function | | TS 类型：`(data: Array
确认列配置时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`import { CheckboxGroupValue } from '@Checkbox'`
| N onDragSort | Function | | TS 类型：`(context: DragSortContext
拖拽排序时触发，`data` 表示排序前的数据，`newData` 表示拖拽排序结束后的新数据，`sort=row` 表示行拖拽事件触发，`sort=col` 表示列拖拽事件触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface DragSortContext
`import { SortableEvent, SortableOptions } from 'sortablejs'`
| N onExpandChange | Function | | TS 类型：`(expandedRowKeys: Array
展开行发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface ExpandOptions
| N -onFilterChange | Function | | TS 类型：`(filterValue: FilterValue, context: { col?: PrimaryTableCol
过滤参数发生变化时触发，泛型 T 指表格数据类型 | N +onFilterChange | Function | | TS 类型：`(filterValue: FilterValue, context: TableFilterChangeContext
过滤参数发生变化时触发，泛型 T 指表格数据类型。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface TableFilterChangeContext
| N onRowEdit | Function | | TS 类型：`(context: PrimaryTableRowEditContext
行编辑时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type PrimaryTableRowEditContext
| N onRowValidate | Function | | TS 类型：`(context: PrimaryTableRowValidateContext
行编辑校验完成后触发，即组件实例方法 `validateRowData` 执行结束后触发。`result` 表示校验结果，`trigger=self` 表示编辑组件内部触发的校验，`trigger='parent'` 表示表格父组件触发的校验。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`type PrimaryTableRowValidateContext
`type TableValidateTrigger = 'self' \| 'parent'`
`export type TableRowValidateResult
| N onSelectChange | Function | | TS 类型：`(selectedRowKeys: Array
选中行发生变化时触发，泛型 T 指表格数据类型。两个参数，第一个参数为选中行 keys，第二个参数为更多参数，具体如下：`type = uncheck` 表示当前行操作为「取消行选中」；`type = check` 表示当前行操作为「行选中」； `currentRowKey` 表示当前操作行的 rowKey 值； `currentRowData` 表示当前操作行的行数据。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/table/type.ts)。
`interface SelectOptions
| N diff --git a/src/table/type.ts b/src/table/type.ts index 5a57c6e085..ad8fc49bae 100644 --- a/src/table/type.ts +++ b/src/table/type.ts @@ -558,7 +558,7 @@ export interface TdPrimaryTableProps