From ffe15c573585d17c2d809d6cca6bb5ab2a6a9829 Mon Sep 17 00:00:00 2001 From: yupeng12 Date: Wed, 24 Apr 2024 14:56:20 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20CRUD2=20head=20=E6=93=8D=E4=BD=9C?= =?UTF-8?q?=E6=94=AF=E6=8C=81testid?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/amis-ui/src/components/icons.tsx | 7 ++++- .../amis-ui/src/components/table/Head.tsx | 14 ++++++++- .../src/components/table/HeadCellDropDown.tsx | 3 ++ .../src/components/table/HeadCellFilter.tsx | 10 ++++++- .../src/components/table/HeadCellSort.tsx | 14 +++++++-- .../amis-ui/src/components/table/index.tsx | 5 +++- .../Table2/HeadCellSearchDropdown.tsx | 30 +++++++++++++++---- packages/amis/src/renderers/Table2/index.tsx | 1 + 8 files changed, 72 insertions(+), 12 deletions(-) diff --git a/packages/amis-ui/src/components/icons.tsx b/packages/amis-ui/src/components/icons.tsx index 018ed2cbd..2a6b1e3b8 100644 --- a/packages/amis-ui/src/components/icons.tsx +++ b/packages/amis-ui/src/components/icons.tsx @@ -110,6 +110,7 @@ import ScaleOrigin from '../icons/scale-origin.svg'; import If from '../icons/if.svg'; import isObject from 'lodash/isObject'; +import type {TestIdBuilder} from 'amis-core'; // 兼容原来的用法，后续不直接试用。 @@ -284,10 +285,12 @@ export function Icon({ onTouchMove, onTouchEnd, onTouchCancel, - style + style, + testIdBuilder }: { icon: string; iconContent?: string; + testIdBuilder?: TestIdBuilder; } & React.ComponentProps) { let cx = iconCx || cxClass; @@ -356,6 +359,7 @@ export function Icon({ className={cx(iconContent, className, classNameProp)} ref={refFn} style={style} + {...testIdBuilder?.getTestId()} > ); } @@ -370,6 +374,7 @@ export function Icon({ // @ts-ignore icon={icon} style={style} + {...testIdBuilder?.getTestId()} /> ); } diff --git a/packages/amis-ui/src/components/table/Head.tsx b/packages/amis-ui/src/components/table/Head.tsx index afa96bf4b..e751f8f97 100644 --- a/packages/amis-ui/src/components/table/Head.tsx +++ b/packages/amis-ui/src/components/table/Head.tsx @@ -23,6 +23,7 @@ import Cell from './Cell'; import HeadCellSort from './HeadCellSort'; import HeadCellFilter from './HeadCellFilter'; import HeadCellSelect from './HeadCellSelect'; +import type {TestIdBuilder} from 'amis-core'; export interface Props extends ThemeProps { draggable: boolean; @@ -48,6 +49,7 @@ export interface Props extends ThemeProps { onSelectAll: Function; onFilter?: Function; onResizeMouseDown: Function; + testIdBuilder?: TestIdBuilder; } export default class Head extends React.PureComponent { @@ -121,7 +123,8 @@ export default class Head extends React.PureComponent { onSort, onSelectAll, onFilter, - onResizeMouseDown + onResizeMouseDown, + testIdBuilder } = this.props; const {thColumns, tdColumns} = getBuildColumns(columns); @@ -177,6 +180,7 @@ export default class Head extends React.PureComponent { col="drag" classnames={cx} classPrefix={classPrefix} + testIdBuilder={testIdBuilder?.getChild(`drag-${index}`)} > ) : null} {!draggable && selectable && index === 0 ? ( @@ -189,6 +193,7 @@ export default class Head extends React.PureComponent { col="select" classnames={cx} classPrefix={classPrefix} + testIdBuilder={testIdBuilder?.getChild(`select-${index}`)} > {rowSelectionType !== 'radio' ? [ @@ -234,6 +239,9 @@ export default class Head extends React.PureComponent { onSort={(payload: SortProps) => { onSort && onSort(payload, item); }} + testIdBuilder={testIdBuilder?.getChild( + `sort-${colIndex}` + )} > ); } @@ -247,6 +255,9 @@ export default class Head extends React.PureComponent { column={item} popOverContainer={popOverContainer} onFilter={onFilter} + testIdBuilder={testIdBuilder?.getChild( + `filter-${colIndex}` + )} > ); } @@ -301,6 +312,7 @@ export default class Head extends React.PureComponent { })} depth={item.depth} col={String(colIndex)} + testIdBuilder={testIdBuilder?.getChild(`cell-${colIndex}`)} > {typeof item.title === 'function' ? item.title(children) diff --git a/packages/amis-ui/src/components/table/HeadCellDropDown.tsx b/packages/amis-ui/src/components/table/HeadCellDropDown.tsx index 575c5ef5f..85e91a4d4 100644 --- a/packages/amis-ui/src/components/table/HeadCellDropDown.tsx +++ b/packages/amis-ui/src/components/table/HeadCellDropDown.tsx @@ -16,6 +16,8 @@ import { PopOver } from 'amis-core'; +import type {TestIdBuilder} from 'amis-core'; + export interface FilterPayload { closeDropdown?: boolean; } @@ -38,6 +40,7 @@ export interface Props extends ThemeProps, LocaleProps { setSelectedKeys?: (keys: Array | string) => void; classnames: ClassNamesFn; classPrefix: string; + testIdBuilder?: TestIdBuilder; } export interface State { diff --git a/packages/amis-ui/src/components/table/HeadCellFilter.tsx b/packages/amis-ui/src/components/table/HeadCellFilter.tsx index 4b5aaa35a..22af4904f 100644 --- a/packages/amis-ui/src/components/table/HeadCellFilter.tsx +++ b/packages/amis-ui/src/components/table/HeadCellFilter.tsx @@ -21,6 +21,7 @@ import HeadCellDropDown, { import CheckBox from '../Checkbox'; import Button from '../Button'; import {Icon} from '../icons'; +import type {TestIdBuilder} from 'amis-core'; export interface Props extends ThemeProps, LocaleProps { column: any; @@ -30,6 +31,7 @@ export interface Props extends ThemeProps, LocaleProps { popOverContainer?: () => HTMLElement; classnames: ClassNamesFn; classPrefix: string; + testIdBuilder?: TestIdBuilder; } export interface OptionProps { @@ -92,7 +94,8 @@ export class HeadCellFilter extends React.PureComponent { column, popOverContainer, classnames: cx, - classPrefix: ns + classPrefix: ns, + testIdBuilder } = this.props; const filterProps = { @@ -110,6 +113,7 @@ export class HeadCellFilter extends React.PureComponent { onClick={() => this.handleClick(confirm, setSelectedKeys, [option.value]) } + {...testIdBuilder?.getChild(`${index}`).getTestId()} > {option.text} @@ -126,6 +130,7 @@ export class HeadCellFilter extends React.PureComponent { ) } checked={option.selected} + testIdBuilder={testIdBuilder?.getChild(`ckbx-${index}`)} > {option.text} @@ -140,6 +145,7 @@ export class HeadCellFilter extends React.PureComponent { size={'xs'} level={'primary'} onClick={() => this.handleConfirmClick(confirm)} + testIdBuilder={testIdBuilder?.getChild(`btn-confirm`)} > 确定 @@ -148,6 +154,7 @@ export class HeadCellFilter extends React.PureComponent { onClick={() => this.handleCancelClick(confirm, setSelectedKeys) } + testIdBuilder={testIdBuilder?.getChild(`btn-cancel`)} > 取消 @@ -169,6 +176,7 @@ export class HeadCellFilter extends React.PureComponent { icon="column-filter" className="icon" iconContent="table-filter-icon" + testIdBuilder={testIdBuilder?.getChild(`icon`)} /> } active={ diff --git a/packages/amis-ui/src/components/table/HeadCellSort.tsx b/packages/amis-ui/src/components/table/HeadCellSort.tsx index f84e6ec8f..0a4bcfb45 100644 --- a/packages/amis-ui/src/components/table/HeadCellSort.tsx +++ b/packages/amis-ui/src/components/table/HeadCellSort.tsx @@ -14,12 +14,14 @@ import { } from 'amis-core'; import {Icon} from '../icons'; import {ColumnProps} from './index'; +import type {TestIdBuilder} from 'amis-core'; export interface Props extends ThemeProps, LocaleProps { column: ColumnProps; onSort?: (payload: {orderBy: string; orderDir: string}) => any; active?: boolean; classnames: ClassNamesFn; + testIdBuilder?: TestIdBuilder; } export interface State { @@ -50,11 +52,12 @@ export class HeadCellSort extends React.PureComponent { } render() { - const {active, column, onSort, classnames: cx} = this.props; + const {active, column, onSort, classnames: cx, testIdBuilder} = this.props; return ( { let sortPayload: State = { orderBy: '', @@ -97,6 +100,7 @@ export class HeadCellSort extends React.PureComponent { icon="sort-desc" className="icon" iconContent="table-sort-down" + testIdBuilder={testIdBuilder?.getChild('desc')} /> { active && this.state.orderDir === 'asc' ? 'is-active' : '' )} > - + { icon="sort-default" className="icon" iconContent="table-sort-default" + testIdBuilder={testIdBuilder?.getChild('default')} /> diff --git a/packages/amis-ui/src/components/table/index.tsx b/packages/amis-ui/src/components/table/index.tsx index 0a5ec8ee6..8d0795e69 100644 --- a/packages/amis-ui/src/components/table/index.tsx +++ b/packages/amis-ui/src/components/table/index.tsx @@ -685,9 +685,11 @@ export class Table extends React.PureComponent { dataSource, onSort, onSelectAll, - onFilter + onFilter, + testIdBuilder } = this.props; + console.log(testIdBuilder); const rowSelectionKeyField = this.getRowSelectionKeyField(); const dataList = rowSelection && rowSelection.getCheckboxProps @@ -754,6 +756,7 @@ export class Table extends React.PureComponent { }} onFilter={onFilter} onResizeMouseDown={this.onResizeMouseDown.bind(this)} + testIdBuilder={testIdBuilder?.getChild('head')} > ); } diff --git a/packages/amis/src/renderers/Table2/HeadCellSearchDropdown.tsx b/packages/amis/src/renderers/Table2/HeadCellSearchDropdown.tsx index 56edfa56f..463406c39 100644 --- a/packages/amis/src/renderers/Table2/HeadCellSearchDropdown.tsx +++ b/packages/amis/src/renderers/Table2/HeadCellSearchDropdown.tsx @@ -46,7 +46,14 @@ export class HeadCellSearchDropDown extends React.Component< } buildSchema() { - const {searchable, sortable, name, label, translate: __} = this.props; + const { + searchable, + sortable, + name, + label, + translate: __, + testIdBuilder + } = this.props; let schema: any; @@ -58,7 +65,8 @@ export class HeadCellSearchDropDown extends React.Component< type: 'text', name, placeholder: label, - clearable: true + clearable: true, + testid: testIdBuilder?.getChild(name)?.getTestIdValue() } ] }; @@ -81,6 +89,9 @@ export class HeadCellSearchDropDown extends React.Component< { type: searchable.type || 'text', name: searchable.name || name, + testid: testIdBuilder + ?.getChild(searchable.name || name) + ?.getTestIdValue(), placeholder: label, ...searchable } @@ -132,23 +143,27 @@ export class HeadCellSearchDropDown extends React.Component< wrapperComponent: 'div', wrapWithPanel: true, title: false, + testid: testIdBuilder?.getChild('form')?.getTestIdValue(), actions: [ { type: 'button', label: __('reset'), - actionType: 'clear-and-submit' + actionType: 'clear-and-submit', + testid: testIdBuilder?.getChild('btn-reset')?.getTestIdValue() }, { type: 'button', label: __('cancel'), - actionType: 'cancel' + actionType: 'cancel', + testid: testIdBuilder?.getChild('btn-cancel')?.getTestIdValue() }, { label: __('search'), type: 'submit', - primary: true + primary: true, + testid: testIdBuilder?.getChild('btn-search')?.getTestIdValue() } ] }; @@ -242,7 +257,8 @@ export class HeadCellSearchDropDown extends React.Component< orderBy, popOverContainer, classPrefix: ns, - classnames: cx + classnames: cx, + testIdBuilder } = this.props; const formSchema = this.buildSchema(); @@ -261,6 +277,7 @@ export class HeadCellSearchDropDown extends React.Component< icon="search" className="icon" iconContent="table-search-icon" + testIdBuilder={testIdBuilder?.getChild('search-icon')} /> } popOverContainer={ @@ -284,6 +301,7 @@ export class HeadCellSearchDropDown extends React.Component< } }) as JSX.Element; }} + testIdBuilder={testIdBuilder} > ); } diff --git a/packages/amis/src/renderers/Table2/index.tsx b/packages/amis/src/renderers/Table2/index.tsx index d6c48944f..879fb7950 100644 --- a/packages/amis/src/renderers/Table2/index.tsx +++ b/packages/amis/src/renderers/Table2/index.tsx @@ -1054,6 +1054,7 @@ export default class Table2 extends React.Component { searchable={column.searchable} onSearch={this.handleSearch} key={'th-search-' + col} + testIdBuilder={testIdBuilder?.getChild(`head-search-${col}`)} /> ); }