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..f82971c 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, + allowOrdering: 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, + allowOrdering: true, labelAdd: 'aor.input.embedded_array.add', labelRemove: 'aor.input.embedded_array.remove', + labelOrderingUp: 'aor.input.embedded_array.ordering_up', + labelOrderingDown: 'aor.input.embedded_array.ordering_down', insertDividers: true, actionsContainerStyle: { clear: 'both', @@ -115,12 +121,15 @@ export class EmbeddedArrayInput extends Component { renderListItem = ({ allowRemove, + allowOrdering, items, inputs, member, index, translate, labelRemove, + labelOrderingUp, + labelOrderingDown, readOnly, disabled, customButtons, @@ -128,6 +137,10 @@ 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 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, @@ -150,7 +163,7 @@ export class EmbeddedArrayInput extends Component { , )} - {(customButtons || (allowRemove && !readOnly && !disabled)) && + {(customButtons || (allowRemove && !readOnly && !disabled) || (allowOrdering && !readOnly && !disabled)) &&