mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
* breaking: 打印功能使用 id 而不是 testid Closes #10123 * 修复文档错误 * 更新 snapshot
This commit is contained in:
parent
d6f8d77507
commit
be099ea5aa
@ -1452,7 +1452,9 @@ run action ajax
|
||||
|
||||
> 6.2.0 及以后版本
|
||||
|
||||
打印页面中的某个组件,对应的组件需要配置 `testid`,如果要打印多个,可以使用 `"testids": ["x", "y"]` 来打印多个组件
|
||||
打印页面中的某个组件,对应的组件需要配置 `id`,如果要打印多个,可以使用 `"ids": ["x", "y"]` 来打印多个组件,只支持主要是容器类组件 `crud`、`crud2`、`form`、`table`、`wrapper`、`container`、`flex`、`grid`、`grid2d`、`tableview`
|
||||
|
||||
> breaking:在 6.2.0 版本中配置是 testid,但这个配置会导致性能问题,所以新版使用 id 作为标识。
|
||||
|
||||
```schema
|
||||
{
|
||||
@ -1469,7 +1471,7 @@ run action ajax
|
||||
{
|
||||
actionType: 'print',
|
||||
args: {
|
||||
testid: 'mycrud'
|
||||
id: 'mycrud'
|
||||
}
|
||||
}
|
||||
]
|
||||
@ -1479,7 +1481,7 @@ run action ajax
|
||||
{
|
||||
"type": "crud",
|
||||
"api": "/api/mock2/sample",
|
||||
"testid": "mycrud",
|
||||
"id": "mycrud",
|
||||
"syncLocation": false,
|
||||
"columns": [
|
||||
{
|
||||
|
@ -10,8 +10,8 @@ import {
|
||||
export interface IPrintAction extends ListenerAction {
|
||||
actionType: 'copy';
|
||||
args: {
|
||||
testid?: string;
|
||||
testids?: string[];
|
||||
id?: string;
|
||||
ids?: string[];
|
||||
};
|
||||
}
|
||||
|
||||
@ -28,17 +28,15 @@ export class PrintAction implements RendererAction {
|
||||
renderer: ListenerContext,
|
||||
event: RendererEvent<any>
|
||||
) {
|
||||
if (action.args?.testid) {
|
||||
const element = document.querySelector(
|
||||
`[data-testid='${action.args.testid}']`
|
||||
);
|
||||
if (action.args?.id) {
|
||||
const element = document.querySelector(`[data-id='${action.args.id}']`);
|
||||
if (element) {
|
||||
printElements([element]);
|
||||
}
|
||||
} else if (action.args?.testids) {
|
||||
} else if (action.args?.ids) {
|
||||
const elements: Element[] = [];
|
||||
action.args.testids.forEach(testid => {
|
||||
const element = document.querySelector(`[data-testid='${testid}']`);
|
||||
action.args.ids.forEach(id => {
|
||||
const element = document.querySelector(`[data-id='${id}']`);
|
||||
if (element) {
|
||||
elements.push(element);
|
||||
}
|
||||
|
@ -25,6 +25,7 @@ exports[`doAction:crud reload 1`] = `
|
||||
</button>
|
||||
<div
|
||||
class="cxd-Crud is-loading"
|
||||
data-id="crud_reload"
|
||||
>
|
||||
<div
|
||||
class="cxd-Table cxd-Crud-body"
|
||||
@ -332,6 +333,7 @@ exports[`doAction:crud reload with data1 1`] = `
|
||||
</button>
|
||||
<div
|
||||
class="cxd-Crud is-loading"
|
||||
data-id="crud_reload"
|
||||
>
|
||||
<div
|
||||
class="cxd-Table cxd-Crud-body"
|
||||
@ -639,6 +641,7 @@ exports[`doAction:crud reload with data2 1`] = `
|
||||
</button>
|
||||
<div
|
||||
class="cxd-Crud is-loading"
|
||||
data-id="crud_reload"
|
||||
>
|
||||
<div
|
||||
class="cxd-Table cxd-Crud-body"
|
||||
|
@ -2665,6 +2665,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
|
||||
headerToolbarRender,
|
||||
footerToolbarRender,
|
||||
testIdBuilder,
|
||||
id,
|
||||
...rest
|
||||
} = this.props;
|
||||
|
||||
@ -2675,6 +2676,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
|
||||
'is-mobile': isMobile()
|
||||
})}
|
||||
style={style}
|
||||
data-id={id}
|
||||
{...testIdBuilder?.getChild('wrapper').getTestId()}
|
||||
>
|
||||
{filter && (!store.filterTogggable || store.filterVisible)
|
||||
|
@ -1322,6 +1322,7 @@ export default class CRUD2 extends React.Component<CRUD2Props, any> {
|
||||
columnsTogglable,
|
||||
headerToolbarClassName,
|
||||
footerToolbarClassName,
|
||||
id,
|
||||
...rest
|
||||
} = this.props;
|
||||
|
||||
@ -1331,6 +1332,7 @@ export default class CRUD2 extends React.Component<CRUD2Props, any> {
|
||||
'is-loading': store.loading
|
||||
})}
|
||||
style={style}
|
||||
data-id={id}
|
||||
>
|
||||
<div className={cx('Crud2-filter')}>
|
||||
{this.renderFilter(filterSchema)}
|
||||
|
@ -195,8 +195,7 @@ export default class Container<T> extends React.Component<
|
||||
wrapperCustomStyle,
|
||||
env,
|
||||
themeCss,
|
||||
baseControlClassName,
|
||||
testid
|
||||
baseControlClassName
|
||||
} = this.props;
|
||||
const finalDraggable: boolean = isPureVariable(draggable)
|
||||
? resolveVariableAndFilter(draggable, data, '| raw')
|
||||
@ -232,6 +231,7 @@ export default class Container<T> extends React.Component<
|
||||
onMouseEnter={this.handleMouseEnter}
|
||||
onMouseLeave={this.handleMouseLeave}
|
||||
style={buildStyle(style, data)}
|
||||
data-id={id}
|
||||
>
|
||||
{this.renderBody()}
|
||||
<CustomStyle
|
||||
|
@ -111,8 +111,7 @@ export default class Flex extends React.Component<FlexProps, object> {
|
||||
wrapperCustomStyle,
|
||||
env,
|
||||
themeCss,
|
||||
classnames: cx,
|
||||
testid
|
||||
classnames: cx
|
||||
} = this.props;
|
||||
const styleVar = buildStyle(style, data);
|
||||
const flexStyle = {
|
||||
@ -151,6 +150,7 @@ export default class Flex extends React.Component<FlexProps, object> {
|
||||
themeCss: wrapperCustomStyle
|
||||
})
|
||||
)}
|
||||
data-id={id}
|
||||
>
|
||||
{(Array.isArray(items) ? items : items ? [items] : []).map(
|
||||
(item, key) =>
|
||||
|
@ -212,8 +212,7 @@ export default class Grid<T> extends React.Component<GridProps & T, object> {
|
||||
id,
|
||||
wrapperCustomStyle,
|
||||
env,
|
||||
themeCss,
|
||||
testid
|
||||
themeCss
|
||||
} = this.props;
|
||||
const styleVar = buildStyle(style, data);
|
||||
return (
|
||||
@ -240,6 +239,7 @@ export default class Grid<T> extends React.Component<GridProps & T, object> {
|
||||
})
|
||||
)}
|
||||
style={styleVar}
|
||||
data-id={id}
|
||||
>
|
||||
{this.renderColumns(this.props.columns)}
|
||||
<Spinner loadingConfig={loadingConfig} overlay show={loading} />
|
||||
|
@ -172,8 +172,7 @@ export default class Grid2D extends React.Component<Grid2DProps, object> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const {grids, cols, gap, gapRow, width, rowHeight, style, testid} =
|
||||
this.props;
|
||||
const {grids, cols, gap, gapRow, width, rowHeight, style, id} = this.props;
|
||||
|
||||
const templateColumns = new Array(cols);
|
||||
templateColumns.fill('1fr');
|
||||
@ -215,7 +214,11 @@ export default class Grid2D extends React.Component<Grid2DProps, object> {
|
||||
gridTemplateRows: templateRows.join(' ')
|
||||
};
|
||||
|
||||
return <div style={curStyle}>{this.renderGrids()}</div>;
|
||||
return (
|
||||
<div style={curStyle} data-id={id}>
|
||||
{this.renderGrids()}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -2796,7 +2796,8 @@ export default class Table extends React.Component<TableProps, object> {
|
||||
autoFillHeight,
|
||||
autoGenerateFilter,
|
||||
mobileUI,
|
||||
testIdBuilder
|
||||
testIdBuilder,
|
||||
id
|
||||
} = this.props;
|
||||
|
||||
this.renderedToolbars = []; // 用来记录哪些 toolbar 已经渲染了,已经渲染了就不重复渲染了。
|
||||
@ -2815,6 +2816,7 @@ export default class Table extends React.Component<TableProps, object> {
|
||||
'Table--autoFillHeight': autoFillHeight
|
||||
})}
|
||||
style={store.buildStyles(style)}
|
||||
data-id={id}
|
||||
{...testIdBuilder?.getTestId()}
|
||||
>
|
||||
{autoGenerateFilter ? this.renderAutoFilterForm() : null}
|
||||
|
@ -276,7 +276,6 @@ export default class TableView extends React.Component<TableViewProps, object> {
|
||||
wrapperCustomStyle,
|
||||
env,
|
||||
themeCss,
|
||||
testid,
|
||||
baseControlClassName
|
||||
} = this.props;
|
||||
|
||||
@ -299,6 +298,7 @@ export default class TableView extends React.Component<TableViewProps, object> {
|
||||
})
|
||||
)}
|
||||
style={{width: width, borderCollapse: 'collapse'}}
|
||||
data-id={id}
|
||||
>
|
||||
{this.renderCaption()}
|
||||
{this.renderCols()}
|
||||
|
@ -59,15 +59,7 @@ export default class Wrapper extends React.Component<WrapperProps, object> {
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
className,
|
||||
size,
|
||||
classnames: cx,
|
||||
style,
|
||||
data,
|
||||
wrap,
|
||||
testid
|
||||
} = this.props;
|
||||
const {className, size, classnames: cx, style, data, wrap, id} = this.props;
|
||||
|
||||
// 期望不要使用,给 form controls 用法自动转换时使用的。
|
||||
if (wrap === false) {
|
||||
@ -82,6 +74,7 @@ export default class Wrapper extends React.Component<WrapperProps, object> {
|
||||
className
|
||||
)}
|
||||
style={buildStyle(style, data)}
|
||||
data-id={id}
|
||||
>
|
||||
{this.renderBody()}
|
||||
</div>
|
||||
|
Loading…
Reference in New Issue
Block a user