aor-embedded-array
A custom field/input component for Admin-on-rest that provides the ability to represent embedded arrays.
Installation
Install with:
npm install --save aor-embedded-array
or
yarn add aor-embedded-array
Usage
Basic Usage
Define the Create
and Edit
View like this:
<EmbeddedArrayInput ="links"> <LongTextInput ="url" /> <LongTextInput ="context" /> <EmbeddedArrayInput ="metadata"> <TextInput ="name" /> <TextInput ="value" /> </EmbeddedArrayInput> </EmbeddedArrayInput>
Define the Show
and List
View like this:
<EmbeddedArrayField ="links"> <UrlField ="url" /> <TextField ="context" /> <EmbeddedArrayField ="metadata"> <TextField ="name" /> <TextField ="value" /> </EmbeddedArrayField> </EmbeddedArrayField>
For primitive arrays, define the Views the same way but without the source prop for the unique child:
<EmbeddedArrayInput ="links"> <LongTextInput /> </EmbeddedArrayInput>
Using Custom action buttons
import FlatButton from 'material-ui/FlatButton'; import ActionDeleteIcon from 'material-ui/svg-icons/action/delete'; const CustomDeleteButton = items index <FlatButton = ="Delete" = = />
var style = actionsContainerStyle: display: "inline-block" clear: "both" float: "right" padding: "2em 0em 0em 0em" <EmbeddedArrayInput ="links" = = > <UrlField ="url" /> <TextField ="context" /> </EmbeddedArrayInput>
Passing props to customize style
There are four style props you can pass to customize style, those are actionsContainerStyle
, innerContainerStyle
, labelStyle
& insertDividers
.
Default values of those are as follows
actionsContainerStyle: clear: 'both' margin: '1em' display: 'block' textAlign: 'right'
innerContainerStyle: padding: '0 1em 1em 1em' width: '90%' display: 'inline-block'
labelContainerStyle: padding: '1.2em 1em 0 0' width: '90%' display: 'inline-block'
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.