diff --git a/packages/strapi-helper-plugin/package.json b/packages/strapi-helper-plugin/package.json index eab0270584..d8be1a7497 100644 --- a/packages/strapi-helper-plugin/package.json +++ b/packages/strapi-helper-plugin/package.json @@ -112,4 +112,4 @@ "styled-components": "^3.2.6", "whatwg-fetch": "^2.0.3" } -} +} \ No newline at end of file diff --git a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/index.js b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/index.js index cda53f42bd..6947938b30 100644 --- a/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/index.js +++ b/packages/strapi-plugin-content-manager/admin/src/components/SelectMany/index.js @@ -25,7 +25,7 @@ class SelectMany extends React.PureComponent { state = { isLoading: true, options: [], - toSkip: 0, + start: 0, }; componentDidMount() { @@ -34,8 +34,7 @@ class SelectMany extends React.PureComponent { componentDidUpdate(prevProps, prevState) { if (isEmpty(prevProps.record) && !isEmpty(this.props.record)) { - const values = (get(this.props.record, this.props.relation.alias) || []) - .map(el => (el.id || el._id)); + const values = (get(this.props.record, this.props.relation.alias) || []).map(el => el.id || el._id); const options = this.state.options.filter(el => { return !values.includes(el.value.id || el.value._id); @@ -44,7 +43,7 @@ class SelectMany extends React.PureComponent { this.state.options = options; } - if (prevState.toSkip !== this.state.toSkip) { + if (prevState.start !== this.state.start) { this.getOptions(''); } } @@ -52,7 +51,7 @@ class SelectMany extends React.PureComponent { getOptions = query => { const params = { _limit: 20, - _start: this.state.toSkip, + _start: this.state.start, source: this.props.relation.plugin || 'content-manager', }; @@ -72,19 +71,19 @@ class SelectMany extends React.PureComponent { params, }) .then(response => { + /* eslint-disable indent */ const options = isArray(response) ? response.map(item => ({ - value: item, - label: templateObject({ mainField: this.props.relation.displayedAttribute }, item) - .mainField, - })) + value: item, + label: templateObject({ mainField: this.props.relation.displayedAttribute }, item).mainField, + })) : [ - { - value: response, - label: response[this.props.relation.displayedAttribute], - }, - ]; - + { + value: response, + label: response[this.props.relation.displayedAttribute], + }, + ]; + /* eslint-enable indent */ const newOptions = cloneDeep(this.state.options); options.map(option => { // Don't add the values when searching @@ -103,19 +102,19 @@ class SelectMany extends React.PureComponent { }); }; - handleInputChange = (value) => { + handleInputChange = value => { const clonedOptions = this.state.options; const filteredValues = clonedOptions.filter(data => includes(data.label, value)); if (filteredValues.length === 0) { return this.getOptions(value); } - } + }; handleChange = value => { // Remove new added value from available option; - this.state.options = this.state.options.filter(el => - !((el.value._id || el.value.id) === (value.value.id || value.value._id)) + this.state.options = this.state.options.filter( + el => !((el.value._id || el.value.id) === (value.value.id || value.value._id)), ); this.props.onAddRelationalItem({ @@ -127,12 +126,12 @@ class SelectMany extends React.PureComponent { handleBottomScroll = () => { this.setState(prevState => { return { - toSkip: prevState.toSkip + 20, + start: prevState.start + 1, }; }); - } + }; - handleRemove = (index) => { + handleRemove = index => { const values = get(this.props.record, this.props.relation.alias); // Add removed value from available option; @@ -149,7 +148,7 @@ class SelectMany extends React.PureComponent { key: this.props.relation.alias, index, }); - } + }; // Redirect to the edit page handleClick = (item = {}) => { @@ -158,20 +157,18 @@ class SelectMany extends React.PureComponent { id: item.value.id || item.value._id, source: this.props.relation.plugin, }); - } + }; render() { - const description = this.props.relation.description ? ( -

{this.props.relation.description}

- ) : ( - '' - ); + const description = this.props.relation.description ?

{this.props.relation.description}

: ''; const value = get(this.props.record, this.props.relation.alias) || []; /* eslint-disable jsx-a11y/label-has-for */ return (
4 && styles.selectManyUpdate}`}> - + {description}