diff --git a/README.md b/README.md index e6c1b25..d639bd9 100644 --- a/README.md +++ b/README.md @@ -147,3 +147,18 @@ labelStyle: { ``` You can also pass `insertDividers` value as `true` or `false` to get the divider or not. Default value for `insertDividers` is true. + +### Limit list items + +There is a prop named `maxItems`: + +```jsx + + + + + + + + +``` \ No newline at end of file diff --git a/src/mui/input/EmbeddedArrayInput.js b/src/mui/input/EmbeddedArrayInput.js index 2de63cc..1d89620 100644 --- a/src/mui/input/EmbeddedArrayInput.js +++ b/src/mui/input/EmbeddedArrayInput.js @@ -75,6 +75,8 @@ export class EmbeddedArrayInput extends Component { labelContainerStyle: PropTypes.object, labelStyle: PropTypes.object, insertDividers: PropTypes.bool, + maxItems: PropTypes.number, + maxItemsCount: PropTypes.bool, }; static defaultProps = { @@ -86,6 +88,7 @@ export class EmbeddedArrayInput extends Component { labelAdd: 'aor.input.embedded_array.add', labelRemove: 'aor.input.embedded_array.remove', insertDividers: true, + maxItemsCount: true, actionsContainerStyle: { clear: 'both', margin: '1em', @@ -182,8 +185,12 @@ export class EmbeddedArrayInput extends Component { actionsContainerStyle, innerContainerStyle, insertDividers, + maxItems, + maxItemsCount, } = this.props; const createItem = () => items.push(); + const isMaxItemsReached = () => {return (maxItems && maxItems === items.length) ? true : false}; + const showMaxItemsCount = () => {return (maxItems && maxItemsCount) ? ' ('+items.length+'/'+maxItems+')' : '';} ; return (
@@ -212,10 +219,11 @@ export class EmbeddedArrayInput extends Component { {allowAdd && !readOnly && !disabled && + !isMaxItemsReached() && } - label={translate(labelAdd, { _: 'Add' })} + label={translate(labelAdd, { _: 'Add' })+showMaxItemsCount()} onClick={createItem} />}