mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-29 18:48:45 +08:00
fix: 修改 withStore 更新逻辑修复 #9435
This commit is contained in:
parent
70c8d300e4
commit
cce881170d
@ -181,11 +181,8 @@ export function HocStoreFactory(renderer: {
|
||||
// 需要重新监听
|
||||
this.unReaction?.();
|
||||
this.unReaction = reaction(
|
||||
() => JSON.stringify(getExprProperties(props, store.data)),
|
||||
() =>
|
||||
this.setState({
|
||||
...getExprProperties(this.props, store.data)
|
||||
})
|
||||
() => getExprProperties(this.props, store.data),
|
||||
(exprProps: any) => this.setState(exprProps)
|
||||
);
|
||||
}
|
||||
|
||||
@ -270,7 +267,7 @@ export function HocStoreFactory(renderer: {
|
||||
props.store?.storeType === 'ComboStore'
|
||||
? undefined
|
||||
: syncDataFromSuper(
|
||||
props.data,
|
||||
store.data,
|
||||
(props.data as any).__super,
|
||||
(prevProps.data as any).__super,
|
||||
store,
|
||||
|
@ -15,6 +15,7 @@ import {ThemeProps, themeable, isNumeric, autobind, ucFirst} from 'amis-core';
|
||||
export type ValueType = string | number;
|
||||
|
||||
export interface NumberProps extends ThemeProps {
|
||||
name?: string;
|
||||
placeholder?: string;
|
||||
max?: ValueType;
|
||||
min?: ValueType;
|
||||
@ -317,7 +318,8 @@ export class NumberInput extends React.Component<NumberProps, NumberState> {
|
||||
inputRef,
|
||||
keyboard,
|
||||
inputControlClassName,
|
||||
mobileUI
|
||||
mobileUI,
|
||||
name
|
||||
} = this.props;
|
||||
const precisionProps: any = {
|
||||
precision: NumberInput.normalizePrecision(precision, step)
|
||||
@ -325,6 +327,7 @@ export class NumberInput extends React.Component<NumberProps, NumberState> {
|
||||
|
||||
return (
|
||||
<InputNumber
|
||||
name={name}
|
||||
className={cx(
|
||||
className,
|
||||
showSteps === false ? 'no-steps' : '',
|
||||
|
@ -23,6 +23,8 @@
|
||||
* 20. CRUD表头查询字段更新后严格比较场景
|
||||
* 21. 通过reUseRow为false强制清空表格状态
|
||||
* 22. reload 后清空选项
|
||||
* 23. Nested CRUD change to normal CRUD
|
||||
* 24. CRUD toolbar form
|
||||
*/
|
||||
|
||||
import {
|
||||
|
@ -1874,6 +1874,7 @@ exports[`Renderer:checkboxes with creatable & createBtnLabel & addControls & add
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="value"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value=""
|
||||
|
@ -959,6 +959,7 @@ exports[`Renderer:combo with conditions: add button open 1`] = `
|
||||
aria-valuenow="0"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="number"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="1239"
|
||||
|
@ -89,6 +89,7 @@ exports[`Renderer:formula 1`] = `
|
||||
aria-valuenow="1"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="a"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="1"
|
||||
@ -155,6 +156,7 @@ exports[`Renderer:formula 1`] = `
|
||||
aria-valuenow="2"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="b"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="2"
|
||||
@ -221,6 +223,7 @@ exports[`Renderer:formula 1`] = `
|
||||
aria-valuenow="3"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="sum1"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="3"
|
||||
@ -287,6 +290,7 @@ exports[`Renderer:formula 1`] = `
|
||||
aria-valuenow="4"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="sum2"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="4"
|
||||
@ -353,6 +357,7 @@ exports[`Renderer:formula 1`] = `
|
||||
aria-valuenow="5"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="sum3"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="5"
|
||||
@ -419,6 +424,7 @@ exports[`Renderer:formula 1`] = `
|
||||
aria-valuenow="5"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="sum4"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="5"
|
||||
|
@ -999,6 +999,7 @@ exports[`Renderer:input-table init display 1`] = `
|
||||
aria-valuenow="0"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="aaa"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="0"
|
||||
@ -1220,6 +1221,7 @@ exports[`Renderer:input-table init display 1`] = `
|
||||
aria-valuenow="234"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="score"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="234"
|
||||
@ -1273,6 +1275,7 @@ exports[`Renderer:input-table init display 1`] = `
|
||||
aria-valuenow="234"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="score"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="234"
|
||||
@ -1329,6 +1332,7 @@ exports[`Renderer:input-table init display 1`] = `
|
||||
aria-valuenow="1"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="level"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="1"
|
||||
@ -1418,6 +1422,7 @@ exports[`Renderer:input-table init display 1`] = `
|
||||
aria-valuenow="0"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="score"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="0"
|
||||
@ -1471,6 +1476,7 @@ exports[`Renderer:input-table init display 1`] = `
|
||||
aria-valuenow="0"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="score"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="0"
|
||||
@ -1527,6 +1533,7 @@ exports[`Renderer:input-table init display 1`] = `
|
||||
aria-valuenow="0"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="level"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="0"
|
||||
@ -1845,6 +1852,7 @@ exports[`Renderer:input-table with combo column 1`] = `
|
||||
aria-valuenow="88"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="score"
|
||||
placeholder="请手动输入分数"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
|
@ -89,6 +89,7 @@ exports[`Renderer:number 1`] = `
|
||||
aria-valuenow="456"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="a"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="456"
|
||||
@ -194,6 +195,7 @@ exports[`Renderer:number with big value 1`] = `
|
||||
aria-valuenow="99999999999999999.99"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="number"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="99999999999999999.99"
|
||||
@ -312,6 +314,7 @@ exports[`Renderer:number with borderMode 1`] = `
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="number"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value=""
|
||||
@ -430,6 +433,7 @@ exports[`Renderer:number with borderMode 2`] = `
|
||||
<input
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="number"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value=""
|
||||
@ -549,6 +553,7 @@ exports[`Renderer:number with precision and default value 1`] = `
|
||||
aria-valuenow="2.99"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="number"
|
||||
role="spinbutton"
|
||||
step="0.01"
|
||||
value="2.99"
|
||||
@ -668,6 +673,7 @@ exports[`Renderer:number with prefix & suffix & kilobitSeparator 1`] = `
|
||||
aria-valuenow="123456"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="number"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="$123,456%"
|
||||
@ -798,6 +804,7 @@ exports[`Renderer:number with step & precision & displayMode & keyboard 1`] = `
|
||||
aria-valuenow="14.111"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="number"
|
||||
role="spinbutton"
|
||||
step="3"
|
||||
value="14.111"
|
||||
@ -926,6 +933,7 @@ exports[`Renderer:number with unitOptions 1`] = `
|
||||
aria-valuenow="99"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="number"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="99"
|
||||
|
@ -144,6 +144,7 @@ exports[`Renderer:rating with allowClear 1`] = `
|
||||
aria-valuenow="0"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="rating"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="0"
|
||||
@ -442,6 +443,7 @@ exports[`Renderer:rating with colors & inactiveColor 1`] = `
|
||||
aria-valuenow="3"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="rating"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="3"
|
||||
@ -745,6 +747,7 @@ exports[`Renderer:rating with readOnly 1`] = `
|
||||
aria-valuenow="5"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="rating"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="5"
|
||||
@ -937,6 +940,7 @@ exports[`Renderer:rating with texts & textPosition & textClassName 1`] = `
|
||||
aria-valuenow="5"
|
||||
autocomplete="off"
|
||||
class="cxd-Number-input"
|
||||
name="rating"
|
||||
role="spinbutton"
|
||||
step="1"
|
||||
value="5"
|
||||
|
@ -647,3 +647,165 @@ test('Renderer:input-table init display', async () => {
|
||||
replaceReactAriaIds(container);
|
||||
expect(container).toMatchSnapshot();
|
||||
});
|
||||
|
||||
// 对应 github issue: https://github.com/baidu/amis/issues/8263
|
||||
test('Renderer:input-table formula', async () => {
|
||||
const onSubmit = jest.fn();
|
||||
const {container} = render(
|
||||
amisRender(
|
||||
{
|
||||
type: 'page',
|
||||
title: '测试3',
|
||||
body: [
|
||||
{
|
||||
type: 'form',
|
||||
title: '表单',
|
||||
submitText: 'Submit',
|
||||
body: [
|
||||
{
|
||||
type: 'input-number',
|
||||
label: '数字',
|
||||
name: 'number',
|
||||
keyboard: true
|
||||
},
|
||||
{
|
||||
type: 'table-view',
|
||||
trs: [
|
||||
{
|
||||
background: '#F7F7F7',
|
||||
tds: [
|
||||
{
|
||||
body: {
|
||||
type: 'tpl',
|
||||
wrapperComponent: '',
|
||||
tpl: '保费信息'
|
||||
}
|
||||
},
|
||||
{
|
||||
body: {
|
||||
type: 'tpl',
|
||||
wrapperComponent: '',
|
||||
tpl: '首年保费'
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
tds: [
|
||||
{
|
||||
rowspan: 1,
|
||||
body: {
|
||||
type: 'tpl',
|
||||
wrapperComponent: '',
|
||||
tpl: '美元'
|
||||
}
|
||||
},
|
||||
{
|
||||
body: [
|
||||
{
|
||||
type: 'input-number',
|
||||
name: 'dollar',
|
||||
keyboard: true,
|
||||
step: 1
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'input-table',
|
||||
name: 'table',
|
||||
label: '表格表单',
|
||||
columns: [
|
||||
{
|
||||
label: '名称',
|
||||
name: 'name',
|
||||
type: 'input-text'
|
||||
},
|
||||
{
|
||||
label: '分数1',
|
||||
name: 'score1',
|
||||
type: 'input-number'
|
||||
},
|
||||
{
|
||||
label: '分数',
|
||||
type: 'input-number',
|
||||
name: 'score',
|
||||
value: '${score1 * dollar}'
|
||||
}
|
||||
],
|
||||
strictMode: false,
|
||||
needConfirm: false,
|
||||
canAccessSuperData: true
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
regions: ['body', 'header'],
|
||||
data: {
|
||||
table: [
|
||||
{
|
||||
name: 'aaa',
|
||||
score1: 1
|
||||
},
|
||||
{
|
||||
name: 'bbb',
|
||||
score1: 2
|
||||
},
|
||||
{
|
||||
name: 'ccc',
|
||||
score1: 3
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
onSubmit: onSubmit
|
||||
},
|
||||
makeEnv({})
|
||||
)
|
||||
);
|
||||
|
||||
await wait(200);
|
||||
const dollor = container.querySelector('input[name=dollar]');
|
||||
expect(dollor).toBeInTheDocument();
|
||||
|
||||
fireEvent.change(dollor!, {target: {value: '22'}});
|
||||
|
||||
await wait(400);
|
||||
|
||||
const inputs = container.querySelectorAll('input[name=score]');
|
||||
expect(inputs.length).toBe(3);
|
||||
|
||||
expect(inputs[0]).toHaveValue('22');
|
||||
expect(inputs[1]).toHaveValue('44');
|
||||
expect(inputs[2]).toHaveValue('66');
|
||||
|
||||
const submitBtn = container.querySelector('button[type=submit]');
|
||||
fireEvent.click(submitBtn!);
|
||||
await wait(200);
|
||||
|
||||
expect(onSubmit).toBeCalled();
|
||||
expect(onSubmit.mock.calls[0][0]).toEqual({
|
||||
dollar: 22,
|
||||
table: [
|
||||
{
|
||||
name: 'aaa',
|
||||
score1: 1,
|
||||
score: 22
|
||||
},
|
||||
{
|
||||
name: 'bbb',
|
||||
score1: 2,
|
||||
score: 44
|
||||
},
|
||||
{
|
||||
name: 'ccc',
|
||||
score1: 3,
|
||||
score: 66
|
||||
}
|
||||
]
|
||||
});
|
||||
});
|
||||
|
@ -5,15 +5,11 @@
|
||||
* 2. 触发方式 & 是否显示icon & 标题 & 位置 & 触发条件
|
||||
* 3. offset 偏移量
|
||||
* 4. 展示模式和尺寸
|
||||
* 5. Renderer:Picker with overflowConfig
|
||||
*/
|
||||
|
||||
import React from 'react';
|
||||
import {
|
||||
render,
|
||||
fireEvent,
|
||||
cleanup,
|
||||
screen
|
||||
} from '@testing-library/react';
|
||||
import {render, fireEvent, cleanup, screen} from '@testing-library/react';
|
||||
import '../../src';
|
||||
import {render as amisRender} from '../../src';
|
||||
import {wait, makeEnv} from '../helper';
|
||||
@ -335,10 +331,184 @@ describe('5. Renderer:Picker with overflowConfig', () => {
|
||||
|
||||
await wait(500);
|
||||
|
||||
const tags = container.querySelectorAll('.cxd-Crud-selection .cxd-Crud-value');
|
||||
const tags = container.querySelectorAll(
|
||||
'.cxd-Crud-selection .cxd-Crud-value'
|
||||
);
|
||||
/** tag 元素数量正确 */
|
||||
expect(tags?.length).toEqual(3);
|
||||
/** 收纳标签文案正确 */
|
||||
expect(tags[tags?.length - 1]).toHaveTextContent('+ 1 ...');
|
||||
});
|
||||
});
|
||||
|
||||
// 对应 issue https://github.com/baidu/amis/issues/9435
|
||||
test('6. picker with toolbar form', async () => {
|
||||
const {container, rerender, getByText, getByPlaceholderText, baseElement} =
|
||||
render(
|
||||
amisRender({
|
||||
type: 'picker',
|
||||
name: 'type4',
|
||||
joinValues: true,
|
||||
valueField: 'id',
|
||||
labelField: 'engine',
|
||||
label: 'Picker',
|
||||
embed: true,
|
||||
source: {
|
||||
method: 'get',
|
||||
url: '/api/mock2/crud/tree?waitSeconds=1',
|
||||
mockResponse: {
|
||||
status: 200,
|
||||
data: {
|
||||
count: 6,
|
||||
rows: [
|
||||
{
|
||||
engine: 'Trident - afurms',
|
||||
browser: 'Internet Explorer 4.0',
|
||||
platform: 'Win 95+',
|
||||
version: '4',
|
||||
grade: 'X',
|
||||
id: 1,
|
||||
children: [
|
||||
{
|
||||
engine: 'Trident - f7006',
|
||||
browser: 'Internet Explorer 5.0',
|
||||
platform: 'Win 95+',
|
||||
version: '5',
|
||||
grade: 'C',
|
||||
id: 2
|
||||
},
|
||||
{
|
||||
engine: 'Trident - t6r3s4',
|
||||
browser: 'Internet Explorer 5.5',
|
||||
platform: 'Win 95+',
|
||||
version: '5.5',
|
||||
grade: 'A',
|
||||
id: 3
|
||||
},
|
||||
{
|
||||
engine: 'Trident - 3a99nb',
|
||||
browser: 'Internet Explorer 6',
|
||||
platform: 'Win 98+',
|
||||
version: '6',
|
||||
grade: 'A',
|
||||
id: 4
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
engine: 'Trident - plb6cd',
|
||||
browser: 'Internet Explorer 7',
|
||||
platform: 'Win XP SP2+',
|
||||
version: '7',
|
||||
grade: 'A',
|
||||
id: 5,
|
||||
children: [
|
||||
{
|
||||
engine: 'Trident - dpgbw',
|
||||
browser: 'AOL browser (AOL desktop)',
|
||||
platform: 'Win XP',
|
||||
version: '6',
|
||||
grade: 'A',
|
||||
id: 6
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
engine: 'Gecko - syo6k7',
|
||||
browser: 'Firefox 1.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '1.7',
|
||||
grade: 'A',
|
||||
id: 7
|
||||
},
|
||||
{
|
||||
engine: 'Gecko - xha3vk',
|
||||
browser: 'Firefox 1.5',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '1.8',
|
||||
grade: 'A',
|
||||
id: 8
|
||||
},
|
||||
{
|
||||
engine: 'Gecko - wc71bb',
|
||||
browser: 'Firefox 2.0',
|
||||
platform: 'Win 98+ / OSX.2+',
|
||||
version: '1.8',
|
||||
grade: 'A',
|
||||
id: 9
|
||||
},
|
||||
{
|
||||
engine: 'Gecko - xfqpti',
|
||||
browser: 'Firefox 3.0',
|
||||
platform: 'Win 2k+ / OSX.3+',
|
||||
version: '1.9',
|
||||
grade: 'A',
|
||||
id: 10
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
size: 'lg',
|
||||
value: '4,5',
|
||||
multiple: true,
|
||||
pickerSchema: {
|
||||
mode: 'table',
|
||||
name: 'thelist',
|
||||
draggable: true,
|
||||
headerToolbar: {
|
||||
type: 'form',
|
||||
wrapWithPanel: false,
|
||||
target: 'thelist',
|
||||
body: [
|
||||
{
|
||||
type: 'input-group',
|
||||
label: false,
|
||||
className: 'select-searchbox',
|
||||
body: [
|
||||
{
|
||||
type: 'select',
|
||||
name: 'keywordType',
|
||||
options: [
|
||||
{
|
||||
label: 'id',
|
||||
value: 'id'
|
||||
},
|
||||
{
|
||||
label: '名称',
|
||||
value: 'name'
|
||||
}
|
||||
],
|
||||
selectFirst: true
|
||||
},
|
||||
{
|
||||
type: 'input-text',
|
||||
name: 'keyword',
|
||||
size: 'md'
|
||||
},
|
||||
{
|
||||
type: 'submit',
|
||||
icon: 'fa fa-search'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
name: 'engine',
|
||||
label: 'Rendering engine',
|
||||
sortable: true,
|
||||
searchable: true,
|
||||
type: 'text',
|
||||
toggled: true
|
||||
}
|
||||
]
|
||||
}
|
||||
})
|
||||
);
|
||||
|
||||
await wait(200);
|
||||
expect(container.querySelector('.cxd-Select-value')).toBeInTheDocument();
|
||||
expect(container.querySelector('.cxd-Select-value')).toHaveTextContent('id');
|
||||
});
|
||||
|
@ -445,7 +445,8 @@ export default class NumberControl extends React.Component<
|
||||
themeCss,
|
||||
inputControlClassName,
|
||||
id,
|
||||
env
|
||||
env,
|
||||
name
|
||||
} = this.props;
|
||||
const {unit} = this.state;
|
||||
const finalPrecision = this.filterNum(precision);
|
||||
@ -486,6 +487,7 @@ export default class NumberControl extends React.Component<
|
||||
)}
|
||||
>
|
||||
<NumberInput
|
||||
name={name}
|
||||
inputControlClassName={cx(
|
||||
inputControlClassName,
|
||||
setThemeClassName({
|
||||
|
Loading…
Reference in New Issue
Block a user