fix: autoFill 在选项有联动配置时会出现重复触发 (#4614)

This commit is contained in:
liaoxuezhi 2022-06-14 18:05:57 +08:00 committed by GitHub
parent 1de20ffa02
commit c0e4b82ff9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 10 additions and 509 deletions

View File

@ -12,6 +12,7 @@
"stop": "fis3 server stop", "stop": "fis3 server stop",
"dev": "fis3 release -cwd ./public", "dev": "fis3 release -cwd ./public",
"deploy-gh-page": "sh ./deploy-gh-pages.sh", "deploy-gh-page": "sh ./deploy-gh-pages.sh",
"build": "npm run build --workspaces",
"test": "npm test --workspaces", "test": "npm test --workspaces",
"prepare": "husky install", "prepare": "husky install",
"coverage": "jest --coverage", "coverage": "jest --coverage",

View File

@ -324,8 +324,11 @@ export function registerOptionsControl(config: OptionsConfig) {
this.toDispose.push( this.toDispose.push(
reaction( reaction(
() => JSON.stringify(formItem.options), () =>
() => this.mounted && this.syncAutoFill(formItem.tmpValue) JSON.stringify(formItem.getSelectedOptions(formItem.tmpValue)),
() =>
this.mounted &&
this.syncAutoFill(formItem.getSelectedOptions(formItem.tmpValue))
) )
); );
// 默认全选。这里会和默认值\回填值逻辑冲突所以如果有配置source则不执行默认全选 // 默认全选。这里会和默认值\回填值逻辑冲突所以如果有配置source则不执行默认全选
@ -365,10 +368,6 @@ export function registerOptionsControl(config: OptionsConfig) {
componentDidMount() { componentDidMount() {
this.mounted = true; this.mounted = true;
this.normalizeValue(); this.normalizeValue();
if (this.props.value) {
this.syncAutoFill(this.props.value);
}
} }
shouldComponentUpdate(nextProps: OptionsProps) { shouldComponentUpdate(nextProps: OptionsProps) {
@ -452,7 +451,6 @@ export function registerOptionsControl(config: OptionsConfig) {
if (prevProps.value !== props.value || formItem?.expressionsInOptions) { if (prevProps.value !== props.value || formItem?.expressionsInOptions) {
formItem.syncOptions(undefined, props.data); formItem.syncOptions(undefined, props.data);
this.syncAutoFill(props.value);
} }
} }
@ -486,7 +484,7 @@ export function registerOptionsControl(config: OptionsConfig) {
} }
} }
syncAutoFill(value: any) { syncAutoFill(selectedOptions: Array<any>) {
const {autoFill, multiple, onBulkChange, data} = this.props; const {autoFill, multiple, onBulkChange, data} = this.props;
const formItem = this.props.formItem as IFormItemStore; const formItem = this.props.formItem as IFormItemStore;
@ -496,7 +494,6 @@ export function registerOptionsControl(config: OptionsConfig) {
!isEmpty(autoFill) && !isEmpty(autoFill) &&
formItem.filteredOptions.length formItem.filteredOptions.length
) { ) {
const selectedOptions = formItem.getSelectedOptions(value);
const toSync = dataMapping( const toSync = dataMapping(
autoFill, autoFill,
multiple multiple

View File

@ -1213,299 +1213,6 @@ exports[`Renderer:range:showSteps 1`] = `
</div> </div>
`; `;
exports[`Renderer:range:showSteps 2`] = `
<div>
<div
class="cxd-Panel cxd-Panel--default cxd-Panel--form"
style="position: relative;"
>
<div
class="cxd-Panel-heading"
>
<h3
class="cxd-Panel-title"
>
<span
class="cxd-TplField"
>
<span>
The form
</span>
</span>
</h3>
</div>
<div
class="cxd-Panel-body"
>
<form
class="cxd-Form cxd-Form--normal"
novalidate=""
>
<input
style="display: none;"
type="submit"
/>
<div
class="cxd-Form-item cxd-Form-item--normal"
data-role="form-item"
>
<div
class="cxd-RangeControl cxd-InputRange cxd-Form-control"
>
<div
class="cxd-InputRange-wrap"
>
<div
class="cxd-InputRange-track cxd-InputRange-track--background"
>
<div
class="cxd-InputRange-track-active"
style="width: 0%; left: 0%;"
/>
<div>
<span
class="cxd-InputRange-track-dot"
style="left: 10%;"
/>
<span
class="cxd-InputRange-track-dot"
style="left: 20%;"
/>
<span
class="cxd-InputRange-track-dot"
style="left: 30%;"
/>
<span
class="cxd-InputRange-track-dot"
style="left: 40%;"
/>
<span
class="cxd-InputRange-track-dot"
style="left: 50%;"
/>
<span
class="cxd-InputRange-track-dot"
style="left: 60%;"
/>
<span
class="cxd-InputRange-track-dot"
style="left: 70%;"
/>
<span
class="cxd-InputRange-track-dot"
style="left: 80%;"
/>
<span
class="cxd-InputRange-track-dot"
style="left: 90%;"
/>
</div>
<div
class="cxd-InputRange-handle"
style="left: 0%; z-index: 1; position: relative;"
>
<div
class="cxd-InputRange-handle-icon"
>
<icon-mock
classname="icon icon-slider-handle"
icon="slider-handle"
/>
</div>
<div
class="cxd-InputRange-label pos-top"
style="position: relative;"
>
<span>
0
</span>
<div
class="resize-sensor"
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
class="resize-sensor-expand"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
/>
</div>
<div
class="resize-sensor-shrink"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
/>
</div>
<div
class="resize-sensor-appear"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
/>
</div>
</div>
<div
class="resize-sensor"
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
class="resize-sensor-expand"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
/>
</div>
<div
class="resize-sensor-shrink"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
/>
</div>
<div
class="resize-sensor-appear"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
/>
</div>
</div>
</div>
</div>
<div
class="cxd-InputRange-input"
>
<div
class="cxd-Number cxd-Number--borderFull"
>
<div
class="cxd-Number-handler-wrap"
>
<span
aria-disabled="false"
aria-label="Increase Value"
class="cxd-Number-handler cxd-Number-handler-up"
role="button"
unselectable="on"
>
<span
class="cxd-Number-handler-up-inner"
unselectable="on"
/>
</span>
<span
aria-disabled="true"
aria-label="Decrease Value"
class="cxd-Number-handler cxd-Number-handler-down cxd-Number-handler-down-disabled"
role="button"
unselectable="on"
>
<span
class="cxd-Number-handler-down-inner"
unselectable="on"
/>
</span>
</div>
<div
class="cxd-Number-input-wrap"
>
<input
aria-valuemax="10"
aria-valuemin="0"
aria-valuenow="0"
autocomplete="off"
class="cxd-Number-input"
role="spinbutton"
step="1"
value="0"
/>
</div>
</div>
</div>
<a
class="cxd-InputRange-clear"
>
<icon-mock
classname="icon icon-close"
icon="close"
/>
</a>
</div>
</div>
</form>
</div>
<div
class="resize-sensor"
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
class="resize-sensor-expand"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
/>
</div>
<div
class="resize-sensor-shrink"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
/>
</div>
<div
class="resize-sensor-appear"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
/>
</div>
</div>
</div>
`;
exports[`Renderer:range:tooltipVisible 1`] = ` exports[`Renderer:range:tooltipVisible 1`] = `
<div> <div>
<div <div
@ -1694,203 +1401,6 @@ exports[`Renderer:range:tooltipVisible 1`] = `
</div> </div>
<div
class="resize-sensor-appear"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
/>
</div>
</div>
</div>
`;
exports[`Renderer:range:tooltipVisible 2`] = `
<div>
<div
class="cxd-Panel cxd-Panel--default cxd-Panel--form"
style="position: relative;"
>
<div
class="cxd-Panel-heading"
>
<h3
class="cxd-Panel-title"
>
<span
class="cxd-TplField"
>
<span>
The form
</span>
</span>
</h3>
</div>
<div
class="cxd-Panel-body"
>
<form
class="cxd-Form cxd-Form--normal"
novalidate=""
>
<input
style="display: none;"
type="submit"
/>
<div
class="cxd-Form-item cxd-Form-item--normal"
data-role="form-item"
>
<div
class="cxd-RangeControl cxd-InputRange cxd-Form-control"
>
<div
class="cxd-InputRange-wrap"
>
<div
class="cxd-InputRange-track cxd-InputRange-track--background"
>
<div
class="cxd-InputRange-track-active"
style="width: 0%; left: 0%;"
/>
<div
class="cxd-InputRange-handle"
style="left: 0%; z-index: 1; position: relative;"
>
<div
class="cxd-InputRange-handle-icon"
>
<icon-mock
classname="icon icon-slider-handle"
icon="slider-handle"
/>
</div>
<div
class="cxd-InputRange-label pos-right cxd-InputRange-label-visible"
style="position: relative;"
>
<span>
0
</span>
<div
class="resize-sensor"
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
class="resize-sensor-expand"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
/>
</div>
<div
class="resize-sensor-shrink"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
/>
</div>
<div
class="resize-sensor-appear"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
/>
</div>
</div>
<div
class="resize-sensor"
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
class="resize-sensor-expand"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
/>
</div>
<div
class="resize-sensor-shrink"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
/>
</div>
<div
class="resize-sensor-appear"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</div>
<div
class="resize-sensor"
style="position: absolute; left: 0px; top: 0px; right: 0px; bottom: 0px; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
class="resize-sensor-expand"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0px; top: 0px; width: 10px; height: 10px;"
/>
</div>
<div
class="resize-sensor-shrink"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;"
>
<div
style="position: absolute; left: 0; top: 0; width: 200%; height: 200%"
/>
</div>
<div <div
class="resize-sensor-appear" class="resize-sensor-appear"
style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;" style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: scroll; z-index: -1; visibility: hidden;animation-name: apearSensor; animation-duration: 0.2s;"

View File

@ -527,8 +527,6 @@ exports[`Renderer:text type is password 1`] = `
</div> </div>
`; `;
exports[`Renderer:text type is password: validate fail 1`] = `<div />`;
exports[`Renderer:text type is url: validate fail 1`] = ` exports[`Renderer:text type is url: validate fail 1`] = `
<div> <div>
<div <div
@ -1068,8 +1066,6 @@ exports[`Renderer:text with clearable 1`] = `
</div> </div>
`; `;
exports[`Renderer:text with clearable: validate success 1`] = `<div />`;
exports[`Renderer:text with counter 1`] = ` exports[`Renderer:text with counter 1`] = `
<div> <div>
<div <div
@ -1740,8 +1736,6 @@ exports[`Renderer:text with options 1`] = `
</div> </div>
`; `;
exports[`Renderer:text with options 2`] = `<div />`;
exports[`Renderer:text with options and multiple: first option selected 1`] = ` exports[`Renderer:text with options and multiple: first option selected 1`] = `
<div> <div>
<div <div
@ -2496,8 +2490,6 @@ exports[`Renderer:text with options and multiple: second option selected 1`] = `
</div> </div>
`; `;
exports[`Renderer:text with options and multiple: select first option 1`] = `<div />`;
exports[`Renderer:text with options: options is open 1`] = ` exports[`Renderer:text with options: options is open 1`] = `
<div> <div>
<div <div

View File

@ -87,7 +87,7 @@ export class ControlGroupRenderer extends React.Component<InputGroupProps> {
const subSchema: any = control; const subSchema: any = control;
return render(`${index}`, subSchema, { return render(`${index}`, subSchema, {
disabled, disabled: control.disabled || disabled,
formMode: subFormMode || mode || formMode, formMode: subFormMode || mode || formMode,
formHorizontal: subFormHorizontal || horizontal || formHorizontal, formHorizontal: subFormHorizontal || horizontal || formHorizontal,
...otherProps ...otherProps

View File

@ -22,5 +22,6 @@
"composite": true "composite": true
}, },
"types": ["typePatches"], "types": ["typePatches"],
"references": [{"path": "packages/amis"}] "references": [{"path": "packages/amis"}],
"include": ["**.ts", "**.tsx", "packages/amis-ui/src/custom.d.ts"]
} }