From 8cf947372e076b19c06fbff7df2c4a9ab01d9d77 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ju=CC=88rg=20Langhard?= Date: Thu, 29 Mar 2018 23:20:37 +0200 Subject: [PATCH 1/3] Add array sorting --- README.md | 2 ++ src/mui/input/EmbeddedArrayInput.js | 32 ++++++++++++++++++++++++++++- 2 files changed, 33 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index e6c1b25..15194c2 100644 --- a/README.md +++ b/README.md @@ -102,6 +102,8 @@ For primitive arrays, define the Views the same way but without the source prop You can make use of the translation system provided by `admin-on-rest` and set the following translation paths: 1. `aor.input.embedded_array.add` to set Add Button's label. 2. `aor.input.embedded_array.remove` to set Remove Button's label. +3. `aor.input.embedded_array.move_up` to set Move-Up Button's label. +4. `aor.input.embedded_array.move_down` to set Move-Down Button's label. Also, you can change the translation path's themselves by providing values for props `labelAdd` and `labelRemove`. diff --git a/src/mui/input/EmbeddedArrayInput.js b/src/mui/input/EmbeddedArrayInput.js index 2de63cc..67cb3d3 100644 --- a/src/mui/input/EmbeddedArrayInput.js +++ b/src/mui/input/EmbeddedArrayInput.js @@ -7,6 +7,8 @@ import FlatButton from 'material-ui/FlatButton'; import TextFieldLabel from 'material-ui/TextField/TextFieldLabel'; import ContentAdd from 'material-ui/svg-icons/content/add'; import ActionDeleteIcon from 'material-ui/svg-icons/action/delete'; +import HardwareKeyboardArrowUp from 'material-ui/svg-icons/hardware/keyboard-arrow-up'; +import HardwareKeyboardArrowDown from 'material-ui/svg-icons/hardware/keyboard-arrow-down'; import Divider from 'material-ui/Divider'; import { translate } from 'admin-on-rest'; @@ -54,6 +56,7 @@ export class EmbeddedArrayInput extends Component { allowEmpty: PropTypes.bool.isRequired, allowAdd: PropTypes.bool.isRequired, allowRemove: PropTypes.bool.isRequired, + allowSorting: PropTypes.bool.isRequired, arrayElStyle: PropTypes.object, basePath: PropTypes.string, children: PropTypes.node.isRequired, @@ -83,8 +86,11 @@ export class EmbeddedArrayInput extends Component { allowEmpty: true, allowAdd: true, allowRemove: true, + allowSorting: true, labelAdd: 'aor.input.embedded_array.add', labelRemove: 'aor.input.embedded_array.remove', + labelSortingUp: 'aor.input.embedded_array.sorting_up', + labelSortingDown: 'aor.input.embedded_array.sorting_down', insertDividers: true, actionsContainerStyle: { clear: 'both', @@ -115,12 +121,15 @@ export class EmbeddedArrayInput extends Component { renderListItem = ({ allowRemove, + allowSorting, items, inputs, member, index, translate, labelRemove, + labelSortingUp, + labelSortingDown, readOnly, disabled, customButtons, @@ -128,6 +137,8 @@ export class EmbeddedArrayInput extends Component { innerContainerStyle, }) => { const removeItem = () => items.remove(index); + const moveItemUp = () => {if (index !== 0) return items.move(index, index - 1)}; + const moveItemDown = () => {if (index !== items.length - 1) return items.move(index, index + 1)}; const passedProps = { resource: this.props.resource, basePath: this.props.basePath, @@ -150,7 +161,7 @@ export class EmbeddedArrayInput extends Component { , )} - {(customButtons || (allowRemove && !readOnly && !disabled)) && + {(customButtons || (allowRemove && !readOnly && !disabled) || (allowSorting && !readOnly && !disabled)) &&
{allowRemove && !readOnly && @@ -161,6 +172,23 @@ export class EmbeddedArrayInput extends Component { icon={} onClick={removeItem} />} + {allowSorting && + !readOnly && + !disabled && + + } + onClick={moveItemUp} + /> + } + onClick={moveItemDown} + /> + } {customButtons && customButtons.map(button => React.cloneElement(button, { items, index }))}
} @@ -176,6 +204,7 @@ export class EmbeddedArrayInput extends Component { labelAdd, allowAdd, allowRemove, + allowSorting, readOnly, disabled, customButtons, @@ -198,6 +227,7 @@ export class EmbeddedArrayInput extends Component { translate, labelRemove, allowRemove, + allowSorting, readOnly, disabled, customButtons, From 32745a98e068a780d63c032b4ea598c0fc0b3ad6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ju=CC=88rg=20Langhard?= Date: Wed, 11 Apr 2018 10:10:36 +0200 Subject: [PATCH 2/3] Renamed "sorting" to "ordering" --- src/mui/input/EmbeddedArrayInput.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/src/mui/input/EmbeddedArrayInput.js b/src/mui/input/EmbeddedArrayInput.js index 67cb3d3..2763c79 100644 --- a/src/mui/input/EmbeddedArrayInput.js +++ b/src/mui/input/EmbeddedArrayInput.js @@ -56,7 +56,7 @@ export class EmbeddedArrayInput extends Component { allowEmpty: PropTypes.bool.isRequired, allowAdd: PropTypes.bool.isRequired, allowRemove: PropTypes.bool.isRequired, - allowSorting: PropTypes.bool.isRequired, + allowOrdering: PropTypes.bool.isRequired, arrayElStyle: PropTypes.object, basePath: PropTypes.string, children: PropTypes.node.isRequired, @@ -86,11 +86,11 @@ export class EmbeddedArrayInput extends Component { allowEmpty: true, allowAdd: true, allowRemove: true, - allowSorting: true, + allowOrdering: true, labelAdd: 'aor.input.embedded_array.add', labelRemove: 'aor.input.embedded_array.remove', - labelSortingUp: 'aor.input.embedded_array.sorting_up', - labelSortingDown: 'aor.input.embedded_array.sorting_down', + labelOrderingUp: 'aor.input.embedded_array.ordering_up', + labelOrderingDown: 'aor.input.embedded_array.ordering_down', insertDividers: true, actionsContainerStyle: { clear: 'both', @@ -121,15 +121,15 @@ export class EmbeddedArrayInput extends Component { renderListItem = ({ allowRemove, - allowSorting, + allowOrdering, items, inputs, member, index, translate, labelRemove, - labelSortingUp, - labelSortingDown, + labelOrderingUp, + labelOrderingDown, readOnly, disabled, customButtons, @@ -161,7 +161,7 @@ export class EmbeddedArrayInput extends Component { , )} - {(customButtons || (allowRemove && !readOnly && !disabled) || (allowSorting && !readOnly && !disabled)) && + {(customButtons || (allowRemove && !readOnly && !disabled) || (allowOrdering && !readOnly && !disabled)) &&
{allowRemove && !readOnly && @@ -172,19 +172,19 @@ export class EmbeddedArrayInput extends Component { icon={} onClick={removeItem} />} - {allowSorting && + {allowOrdering && !readOnly && !disabled && } onClick={moveItemUp} /> } onClick={moveItemDown} /> @@ -204,7 +204,7 @@ export class EmbeddedArrayInput extends Component { labelAdd, allowAdd, allowRemove, - allowSorting, + allowOrdering, readOnly, disabled, customButtons, @@ -227,7 +227,7 @@ export class EmbeddedArrayInput extends Component { translate, labelRemove, allowRemove, - allowSorting, + allowOrdering, readOnly, disabled, customButtons, From 523deea72fca18dc0aa12730bc5c5dd70e4c9064 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ju=CC=88rg=20Langhard?= Date: Wed, 11 Apr 2018 11:19:54 +0200 Subject: [PATCH 3/3] Removed the "Move Up"-button from the first and the "Move Down"-button from the latest list Item. --- src/mui/input/EmbeddedArrayInput.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/mui/input/EmbeddedArrayInput.js b/src/mui/input/EmbeddedArrayInput.js index 2763c79..f82971c 100644 --- a/src/mui/input/EmbeddedArrayInput.js +++ b/src/mui/input/EmbeddedArrayInput.js @@ -139,6 +139,8 @@ export class EmbeddedArrayInput extends Component { const removeItem = () => items.remove(index); const moveItemUp = () => {if (index !== 0) return items.move(index, index - 1)}; const moveItemDown = () => {if (index !== items.length - 1) return items.move(index, index + 1)}; + const isFirstItemInList = () => {if (index === 0) return true}; + const isLatestItemInList = () => {if (index === items.length -1) return true}; const passedProps = { resource: this.props.resource, basePath: this.props.basePath, @@ -176,18 +178,22 @@ export class EmbeddedArrayInput extends Component { !readOnly && !disabled && + {!isFirstItemInList() && } onClick={moveItemUp} /> + } + {!isLatestItemInList() && } onClick={moveItemDown} /> + } } {customButtons && customButtons.map(button => React.cloneElement(button, { items, index }))}
}