aor-embedded-array

A custom field/input component for Admin-on-rest that provides the ability to represent embedded arrays.

Installation

Install with:

``sh
npm install --save aor-embedded-array
`

or

`sh
yarn add aor-embedded-array
`

Usage

$3

Define the Create and Edit View like this:

`jsx








`

Define the Show and List View like this:

`jsx








`

For primitive arrays, define the Views the same way but without the source prop for the unique child:

`jsx



`

$3

`jsx
import FlatButton from 'material-ui/FlatButton';
import ActionDeleteIcon from 'material-ui/svg-icons/action/delete';
const CustomDeleteButton = ({items, index}) => (
key={index}
secondary
label="Delete"
icon={}
onClick={() => {
// Take custom action
console.log(items, index);
items.remove(index);
}}
/>
)
`

`jsx
var style = {
actionsContainerStyle: {
display: "inline-block",
clear: "both",
float: "right",
padding: "2em 0em 0em 0em"
}
}
actionsContainerStyle={style.actionsContainerStyle}
customButtons={[]}
>



`

$3

There are four style props you can pass to customize style, those are actionsContainerStyle, innerContainerStyle, labelStyle & insertDividers.

Default values of those are as follows

`js
actionsContainerStyle: {
clear: 'both',
margin: '1em',
display: 'block',
textAlign: 'right',
},
`

`js
innerContainerStyle: {
padding: '0 1em 1em 1em',
width: '90%',
display: 'inline-block',
},
`

`js
labelContainerStyle: {
padding: '1.2em 1em 0 0',
width: '90%',
display: 'inline-block',
},
`

`js
labelStyle: {
top: 0,
position: 'relative',
textTransform: 'capitalize',
},
`

You can also pass insertDividers value as true or false to get the divider or not. Default value for insertDividers` is true.