fix: add disableEditKeys prop in AddSelect component

1. add disableEditKeys prop in AddSelect component to handle if disable the remove button and edit item

Change-Id: Icedad9b2e4ff29f38f00235a88b1dbe8e44df888
This commit is contained in:
zhangke 2022-12-12 13:47:35 +08:00
parent c7e19491fe
commit 594db17643

View File

@ -36,6 +36,7 @@ export default class index extends Component {
optionsByIndex: PropTypes.bool, // special: index=0, use [options[0]]; index=1 use [options[1]]; index >= options.length, options
initValue: PropTypes.array,
readonlyKeys: PropTypes.array,
disableEditKeys: PropTypes.array,
};
static defaultProps = {
@ -48,6 +49,7 @@ export default class index extends Component {
optionsByIndex: false,
initValue: [],
readonlyKeys: [],
disableEditKeys: [],
};
constructor(props) {
@ -108,9 +110,10 @@ export default class index extends Component {
};
// eslint-disable-next-line no-shadow
canRemove = (index) => {
canRemove = (index, item) => {
const isDisabledKey = this.checkDisabledKey(item);
const { minCount } = this.props;
return index >= minCount;
return index >= minCount && !isDisabledKey;
};
// eslint-disable-next-line no-shadow
@ -152,6 +155,13 @@ export default class index extends Component {
return options;
};
checkDisabledKey = (item) => {
const { key = '' } = item.value || {};
const { disableEditKeys = [] } = this.props;
const isDisabledKey = disableEditKeys.indexOf(key) >= 0;
return isDisabledKey;
};
renderTip() {
const { tips } = this.props;
if (tips) {
@ -198,6 +208,7 @@ export default class index extends Component {
const ItemComponent = itemComponent;
const { key = '' } = item.value || {};
const keyReadonly = readonlyKeys.indexOf(key) >= 0;
const isDisabledKey = this.checkDisabledKey(item);
return (
<ItemComponent
{...this.props}
@ -205,6 +216,7 @@ export default class index extends Component {
value={item.value}
index={index}
keyReadonly={keyReadonly}
disabled={isDisabledKey}
onChange={(newValue) => {
this.onItemChange(newValue, index);
}}
@ -221,7 +233,7 @@ export default class index extends Component {
type="link"
onClick={() => this.removeItem(index)}
className={classnames(styles.float, styles['remove-btn'])}
disabled={!this.canRemove(index)}
disabled={!this.canRemove(index, it)}
>
<MinusCircleFilled />
</Button>