test/amis
1
0
Fork 0
mirror of https://gitee.com/baidu/amis.git synced 2024-11-30 02:48:55 +08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

feat: table行支持双击事件

Browse Source
This commit is contained in:
ranqirong 2023-05-24 23:46:01 +08:00
parent 6c583f720f
commit cad283e00e
6 changed files with 78 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
docs/zh-CN/components/table.md
View File

@ -1872,7 +1872,8 @@ popOver 的其它配置请参考 [popover](./popover)
| columnSearch | `searchName: string` 列搜索列名<br/>`searchValue: string` 列搜索数据 | 点击列搜索时触发 |
| orderChange | `movedItems: item[]` 已排序数据 | 手动拖拽行排序时触发 |
| columnToggled | `columns: item[]` 当前显示的列配置数据 | 点击自定义列时触发 |
| rowClick | `item: object` 行点击数据<br/>`index: number` 行索引 | 点击整行时触发 |
| rowClick | `item: object` 行点击数据<br/>`index: number` 行索引 | 单击整行时触发 |
| rowDbClick | `item: object` 行点击数据<br/>`index: number` 行索引 | 双击整行时触发 |
| rowMouseEnter | `item: object` 行移入数据<br/>`index: number` 行索引 | 移入整行时触发 |
| rowMouseLeave | `item: object` 行移出数据<br/>`index: number` 行索引 | 移出整行时触发 |

38
packages/amis/__tests__/renderers/Table.test.tsx
View File

@ -1,5 +1,5 @@
import React = require('react');
import {render, waitFor} from '@testing-library/react';
import {fireEvent, render, waitFor, screen} from '@testing-library/react';
import '../../src';
import {render as amisRender} from '../../src';
import {makeEnv, wait} from '../helper';
@ -981,3 +981,39 @@ describe('Renderer:table selectable & itemCheckableOn', () => {
).toBeInTheDocument();
});
});
describe('dbClick', () => {
test('should call the function when double clicking a row of the table rows', async () => {
const fn = jest.fn();
const schema: any = {
type: 'table',
data: {
items: rows
},
columns: [
{
name: 'engine',
label: 'Engine'
}
],
onEvent: {
rowDbClick: {
actions: [
{
actionType: 'custom',
script: fn
}
]
}
}
};
render(amisRender(schema, {}, makeEnv({})));
await waitFor(() => {
const ele = screen.getAllByText('Trident');
fireEvent.dblClick(ele[0]);
expect(fn).toBeCalledTimes(1);
});
});
});

7
packages/amis/src/renderers/Table/TableBody.tsx
View File

@ -27,6 +27,10 @@ export interface TableBodyProps extends LocaleProps {
) => React.ReactNode;
onCheck: (item: IRow, value: boolean, shift?: boolean) => void;
onRowClick: (item: IRow, index: number) => Promise<RendererEvent<any> | void>;
onRowDbClick: (
item: IRow,
index: number
) => Promise<RendererEvent<any> | void>;
onRowMouseEnter: (
item: IRow,
index: number
@ -80,6 +84,7 @@ export class TableBody extends React.Component<TableBodyProps> {
footableColumns,
itemAction,
onRowClick,
onRowDbClick,
onRowMouseEnter,
onRowMouseLeave
} = this.props;
@ -111,6 +116,7 @@ export class TableBody extends React.Component<TableBodyProps> {
// todo 先注释 quickEditEnabled={item.depth === 1}
onQuickChange={onQuickChange}
onRowClick={onRowClick}
onRowDbClick={onRowDbClick}
onRowMouseEnter={onRowMouseEnter}
onRowMouseLeave={onRowMouseLeave}
{...rowProps}
@ -139,6 +145,7 @@ export class TableBody extends React.Component<TableBodyProps> {
onAction={onAction}
onCheck={onCheck}
onRowClick={onRowClick}
onRowDbClick={onRowDbClick}
onRowMouseEnter={onRowMouseEnter}
onRowMouseLeave={onRowMouseLeave}
footableMode

6
packages/amis/src/renderers/Table/TableContent.tsx
View File

@ -44,6 +44,10 @@ export interface TableContentProps extends LocaleProps {
) => React.ReactNode;
onCheck: (item: IRow, value: boolean, shift?: boolean) => void;
onRowClick: (item: IRow, index: number) => Promise<RendererEvent<any> | void>;
onRowDbClick: (
item: IRow,
index: number
) => Promise<RendererEvent<any> | void>;
onRowMouseEnter: (
item: IRow,
index: number
@ -139,6 +143,7 @@ export class TableContent extends React.Component<TableContentProps> {
renderCell,
onCheck,
onRowClick,
onRowDbClick,
onRowMouseEnter,
onRowMouseLeave,
rowClassName,
@ -247,6 +252,7 @@ export class TableContent extends React.Component<TableContentProps> {
renderCell={renderCell}
onCheck={onCheck}
onRowClick={onRowClick}
onRowDbClick={onRowDbClick}
onRowMouseEnter={onRowMouseEnter}
onRowMouseLeave={onRowMouseLeave}
onQuickChange={onQuickChange}

12
packages/amis/src/renderers/Table/TableRow.tsx
View File

@ -8,6 +8,10 @@ import {isClickOnInput, createObject} from 'amis-core';
interface TableRowProps extends Pick<RendererProps, 'render'> {
onCheck: (item: IRow) => Promise<void>;
onRowClick: (item: IRow, index: number) => Promise<RendererEvent<any> | void>;
onRowDbClick: (
item: IRow,
index: number
) => Promise<RendererEvent<any> | void>;
onRowMouseEnter: (
item: IRow,
index: number
@ -43,6 +47,7 @@ export class TableRow extends React.Component<TableRowProps> {
this.handleQuickChange = this.handleQuickChange.bind(this);
this.handleChange = this.handleChange.bind(this);
this.handleItemClick = this.handleItemClick.bind(this);
this.handleDbClick = this.handleDbClick.bind(this);
this.handleMouseEnter = this.handleMouseEnter.bind(this);
this.handleMouseLeave = this.handleMouseLeave.bind(this);
}
@ -85,6 +90,11 @@ export class TableRow extends React.Component<TableRowProps> {
}
}
handleDbClick(e: React.MouseEvent<HTMLTableRowElement>) {
const {item, itemIndex, onRowDbClick} = this.props;
onRowDbClick?.(item?.data, itemIndex);
}
handleAction(e: React.UIEvent<any>, action: Action, ctx: any) {
const {onAction, item} = this.props;
onAction && onAction(e, action, ctx || item.locals);
@ -162,6 +172,7 @@ export class TableRow extends React.Component<TableRowProps> {
? this.handleItemClick
: undefined
}
onDoubleClick={this.handleDbClick}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
className={cx(itemClassName, {
@ -230,6 +241,7 @@ export class TableRow extends React.Component<TableRowProps> {
? this.handleItemClick
: undefined
}
onDoubleClick={this.handleDbClick}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
data-index={item.depth === 1 ? item.newIndex : undefined}

14
packages/amis/src/renderers/Table/index.tsx
View File

@ -553,6 +553,7 @@ export default class Table extends React.Component<TableProps, object> {
this.subFormRef = this.subFormRef.bind(this);
this.handleColumnToggle = this.handleColumnToggle.bind(this);
this.handleRowClick = this.handleRowClick.bind(this);
this.handleRowDbClick = this.handleRowDbClick.bind(this);
this.handleRowMouseEnter = this.handleRowMouseEnter.bind(this);
this.handleRowMouseLeave = this.handleRowMouseLeave.bind(this);
@ -930,6 +931,17 @@ export default class Table extends React.Component<TableProps, object> {
);
}
handleRowDbClick(item: IRow, index: number) {
const {dispatchEvent, store, data} = this.props;
return dispatchEvent(
'rowDbClick',
createObject(data, {
item,
index
})
);
}
handleRowMouseEnter(item: IRow, index: number) {
const {dispatchEvent, store, data} = this.props;
return dispatchEvent(
@ -2472,6 +2484,7 @@ export default class Table extends React.Component<TableProps, object> {
renderCell={this.renderCell}
onCheck={this.handleCheck}
onRowClick={this.handleRowClick}
onRowDbClick={this.handleRowDbClick}
onRowMouseEnter={this.handleRowMouseEnter}
onRowMouseLeave={this.handleRowMouseLeave}
onQuickChange={store.dragging ? undefined : this.handleQuickChange}
@ -2962,6 +2975,7 @@ export default class Table extends React.Component<TableProps, object> {
renderCell={this.renderCell}
onCheck={this.handleCheck}
onRowClick={this.handleRowClick}
onRowDbClick={this.handleRowDbClick}
onRowMouseEnter={this.handleRowMouseEnter}
onRowMouseLeave={this.handleRowMouseLeave}
onQuickChange={store.dragging ? undefined : this.handleQuickChange}