fix: 修改 withStore 更新逻辑修复 #9435

This commit is contained in:
2betop 2024-01-29 11:42:34 +08:00
parent 70c8d300e4
commit cce881170d
12 changed files with 379 additions and 15 deletions

View File

@ -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,

View File

@ -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' : '',

View File

@ -23,6 +23,8 @@
* 20. CRUD表头查询字段更新后严格比较场景
* 21. reUseRow为false强制清空表格状态
* 22. reload
* 23. Nested CRUD change to normal CRUD
* 24. CRUD toolbar form
*/
import {

View File

@ -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=""

View File

@ -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"

View File

@ -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"

View File

@ -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"

View File

@ -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"

View File

@ -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"

View File

@ -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
}
]
});
});

View File

@ -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');
});

View File

@ -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({