fix(下拉选项配置): 增加取消操作

Change-Id: I9af236209c8889fa1142177d6a3f8e11ede7b14a
This commit is contained in:
wibetter 2022-07-07 11:24:03 +08:00
parent 943586ba62
commit 1bb451c28f

View File

@ -322,7 +322,7 @@ export default class OptionControl extends React.Component<
} else {
options = options.map((item, itemIndex) => ({
...item,
checked: itemIndex === index
checked: itemIndex === index ? checked : false // 支持重复点击取消选中
}));
}
@ -473,7 +473,7 @@ export default class OptionControl extends React.Component<
}
renderOption(props: any) {
const {checked, index, editing, multipleProps} = props;
const {checked, index, editing, multipleProps, closeDefaultCheck} = props;
const ctx: Partial<TextControlSchema> = this.props.data;
const isMultiple = ctx?.multiple === true || multipleProps;
@ -562,6 +562,31 @@ export default class OptionControl extends React.Component<
</div>
) : null;
const operationBtn = [
{
type: 'button',
className: 'ae-OptionControlItem-action',
label: '编辑',
onClick: () => this.toggleEdit(index)
},
{
type: 'button',
className: 'ae-OptionControlItem-action',
label: '删除',
onClick: () => this.handleDelete(index)
}
]
// 选中时增加取消操作
if (!closeDefaultCheck && checked) {
operationBtn.unshift({
type: 'button',
className: 'ae-OptionControlItem-action',
label: '取消选中',
onClick: () => this.handleToggleDefaultValue(index, false)
})
}
return (
<li className="ae-OptionControlItem" key={index}>
<div className="ae-OptionControlItem-Main">
@ -575,9 +600,7 @@ export default class OptionControl extends React.Component<
className="ae-OptionControlItem-checkbox"
checked={checked}
type={isMultiple ? 'checkbox' : 'radio'}
onChange={(checked: any, shift?: boolean) =>
this.handleToggleDefaultValue(index, checked, shift)
}
onChange={(newChecked: any, shift?: boolean) => this.handleToggleDefaultValue(index, newChecked, shift)}
/>
</span>
)}
@ -597,20 +620,7 @@ export default class OptionControl extends React.Component<
closeOnClick: true,
align: 'right',
menuClassName: 'ae-OptionControlItem-ulmenu',
buttons: [
{
type: 'button',
className: 'ae-OptionControlItem-action',
label: '编辑',
onClick: () => this.toggleEdit(index)
},
{
type: 'button',
className: 'ae-OptionControlItem-action',
label: '删除',
onClick: () => this.handleDelete(index)
}
]
buttons: operationBtn
})}
</div>
{editDom}