From 9b80305323f90295485368c9bb3b4910d7614362 Mon Sep 17 00:00:00 2001 From: yupeng12 Date: Tue, 23 Apr 2024 16:26:58 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E8=A1=A5=E5=85=85CRUD2=20testid?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-ui/src/components/table/Cell.tsx | 6 +++++- packages/amis-ui/src/components/table/Row.tsx | 6 +++++- packages/amis-ui/src/components/table/index.tsx | 8 +++++++- packages/amis/src/renderers/CRUD2.tsx | 1 - packages/amis/src/renderers/Operation.tsx | 14 ++++++++++++-- packages/amis/src/renderers/Table2/index.tsx | 11 +++++++++-- 6 files changed, 38 insertions(+), 8 deletions(-) diff --git a/packages/amis-ui/src/components/table/Cell.tsx b/packages/amis-ui/src/components/table/Cell.tsx index e6efd50db..22832f258 100644 --- a/packages/amis-ui/src/components/table/Cell.tsx +++ b/packages/amis-ui/src/components/table/Cell.tsx @@ -8,6 +8,7 @@ import React from 'react'; import {ThemeProps, ClassNamesFn} from 'amis-core'; import {ColumnProps} from './index'; +import type {TestIdBuilder} from 'amis-core'; const zIndex = 1; @@ -26,6 +27,7 @@ export interface Props extends ThemeProps { col?: string; index?: number; classnames: ClassNamesFn; + testIdBuilder?: TestIdBuilder; } export default class BodyCell extends React.PureComponent { @@ -48,7 +50,8 @@ export default class BodyCell extends React.PureComponent { depth, col, wrapperComponent: Component, - classnames: cx + classnames: cx, + testIdBuilder } = this.props; return ( @@ -62,6 +65,7 @@ export default class BodyCell extends React.PureComponent { style={fixed ? {position: 'sticky', zIndex, ...style} : {...style}} data-depth={depth || null} data-col={col} + {...testIdBuilder?.getTestId()} > {children} diff --git a/packages/amis-ui/src/components/table/Row.tsx b/packages/amis-ui/src/components/table/Row.tsx index fba9a64db..a33b76240 100644 --- a/packages/amis-ui/src/components/table/Row.tsx +++ b/packages/amis-ui/src/components/table/Row.tsx @@ -18,6 +18,7 @@ import { hasFixedColumn, levelsSplit } from './util'; +import type {TestIdBuilder} from 'amis-core'; export interface Props extends ThemeProps { data: any; @@ -53,6 +54,7 @@ export interface Props extends ThemeProps { expandedRowClassName: string; expandedRowRender?: Function; isExpanded: boolean; + testIdBuilder?: TestIdBuilder; [propName: string]: any; // 对应checkbox属性 } @@ -204,6 +206,7 @@ class BodyRow extends React.PureComponent { onMouseLeave, onClick, onChange, + testIdBuilder, ...rest } = this.props; @@ -223,6 +226,7 @@ class BodyRow extends React.PureComponent { const cells = tdColumns.map((item, i) => { // 为了支持灵活合并单元格，renderers层的Table2传递的render方法，返回{children: , props: {rowSpan, colSpan}} // 但直接使用amis-ui的table，render方法一般直接返回ReactElement + const cellIDBuilder = testIdBuilder?.getChild(`cell-${i}`); const render = item.render && typeof item.render === 'function' ? item.render(data[item.name], data, rowIndex, i, levelsSplit(levels)) @@ -256,6 +260,7 @@ class BodyRow extends React.PureComponent { [`${className}`]: !!className })} col={i > -1 ? i.toString() : undefined} + testIdBuilder={cellIDBuilder} >
{ ); }); - const rowClassNameClass = rowClassName && typeof rowClassName === 'function' ? rowClassName(data, rowIndex) diff --git a/packages/amis-ui/src/components/table/index.tsx b/packages/amis-ui/src/components/table/index.tsx index 7b536e296..0a5ec8ee6 100644 --- a/packages/amis-ui/src/components/table/index.tsx +++ b/packages/amis-ui/src/components/table/index.tsx @@ -43,6 +43,8 @@ import { getSortData } from './util'; +import type {TestIdBuilder} from 'amis-core'; + export interface ColumnProps { title: string | React.ReactNode | Function; name: string; @@ -176,6 +178,7 @@ export interface TableProps extends ThemeProps, LocaleProps, SpinnerExtraProps { */ autoFillHeight?: boolean | AutoFillHeightObject; lazyRenderAfter?: boolean; + testIdBuilder?: TestIdBuilder; } export interface ScrollProps { @@ -995,7 +998,8 @@ export class Table extends React.PureComponent { columns, lazyRenderAfter, classPrefix, - classnames: cx + classnames: cx, + testIdBuilder } = this.props; const rowSelectionKeyField = this.getRowSelectionKeyField(); @@ -1003,6 +1007,7 @@ export class Table extends React.PureComponent { this.state.selectedRowKeys, key => key === data[rowSelectionKeyField] ); + const rowTIDBuilder = testIdBuilder?.getChild(`row-${rowIndex}`); const childrenColumnName = this.getChildrenColumnName(); // 当前行是否可展开 @@ -1070,6 +1075,7 @@ export class Table extends React.PureComponent { lazyRenderAfter={lazyRenderAfter} classnames={cx} classPrefix={classPrefix} + testIdBuilder={rowTIDBuilder} {...checkboxProps} />, children diff --git a/packages/amis/src/renderers/CRUD2.tsx b/packages/amis/src/renderers/CRUD2.tsx index 1389f465c..78c521d42 100644 --- a/packages/amis/src/renderers/CRUD2.tsx +++ b/packages/amis/src/renderers/CRUD2.tsx @@ -1313,7 +1313,6 @@ export default class CRUD2 extends React.Component { columnsTogglable, headerToolbarClassName, footerToolbarClassName, - testid, ...rest } = this.props; diff --git a/packages/amis/src/renderers/Operation.tsx b/packages/amis/src/renderers/Operation.tsx index 4664946d0..f80f983d7 100644 --- a/packages/amis/src/renderers/Operation.tsx +++ b/packages/amis/src/renderers/Operation.tsx @@ -36,7 +36,14 @@ export class OperationField extends React.Component { static defaultProps: Partial = {}; render() { - const {className, style, buttons, render, classnames: cx} = this.props; + const { + className, + style, + buttons, + render, + classnames: cx, + testIdBuilder + } = this.props; return (
@@ -53,7 +60,10 @@ export class OperationField extends React.Component { ...(button as any) }, { - key: index + key: index, + testIdBuilder: testIdBuilder?.getChild( + `button-${button.testid || button.id || index}` + ) } ) ) diff --git a/packages/amis/src/renderers/Table2/index.tsx b/packages/amis/src/renderers/Table2/index.tsx index 10bef2ed4..d6c48944f 100644 --- a/packages/amis/src/renderers/Table2/index.tsx +++ b/packages/amis/src/renderers/Table2/index.tsx @@ -57,6 +57,8 @@ import './TableCell'; import './ColumnToggler'; import {SchemaQuickEdit} from '../QuickEdit'; +import type {TestIdBuilder} from 'amis-core'; + /** * Table 表格2渲染器。 * 文档：https://aisuda.bce.baidu.com/amis/zh-CN/components/table2 @@ -877,7 +879,8 @@ export default class Table2 extends React.Component { itemBadge, data, classnames: cx, - env + env, + testIdBuilder } = this.props; const cols: Array = []; @@ -950,6 +953,9 @@ export default class Table2 extends React.Component { const item = store.getRowByIndex(rowIndex, [...(levels || [])]) || {}; + const itemIDBuilder = testIdBuilder?.getChild( + `row-${rowIndex}-cell-${colIndex}` + ); const obj = { children: this.renderCellSchema(column, { @@ -982,7 +988,8 @@ export default class Table2 extends React.Component { }, row: item, showBadge, - itemBadge + itemBadge, + testIdBuilder: itemIDBuilder }), props };