- Notifications
You must be signed in to change notification settings - Fork10
Embedded Arrays for Admin On Rest
License
MhdSyrwan/aor-embedded-array
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
A custom field/input component forAdmin-on-rest that provides the ability to represent embedded arrays.
Install with:
npm install --save aor-embedded-array
or
yarn add aor-embedded-array
Define theCreate andEdit View like this:
<EmbeddedArrayInputsource="links"><LongTextInputsource="url"/><LongTextInputsource="context"/><EmbeddedArrayInputsource="metadata"><TextInputsource="name"/><TextInputsource="value"/></EmbeddedArrayInput></EmbeddedArrayInput>
Define theShow andList View like this:
<EmbeddedArrayFieldsource="links"><UrlFieldsource="url"/><TextFieldsource="context"/><EmbeddedArrayFieldsource="metadata"><TextFieldsource="name"/><TextFieldsource="value"/></EmbeddedArrayField></EmbeddedArrayField>
For primitive arrays, define the Views the same way but without the source prop for the unique child:
<EmbeddedArrayInputsource="links"><LongTextInput/></EmbeddedArrayInput>
importFlatButtonfrom'material-ui/FlatButton';importActionDeleteIconfrom'material-ui/svg-icons/action/delete';constCustomDeleteButton=({items, index})=>(<FlatButtonkey={index}secondarylabel="Delete"icon={<ActionDeleteIcon/>}onClick={()=>{// Take custom actionconsole.log(items,index);items.remove(index);}}/>)
varstyle={actionsContainerStyle:{display:"inline-block",clear:"both",float:"right",padding:"2em 0em 0em 0em"}}<EmbeddedArrayInputsource="links"actionsContainerStyle={style.actionsContainerStyle}customButtons={[<CustomDeleteButtonkey={0}/>]}><UrlFieldsource="url"/><TextFieldsource="context"/> </EmbeddedArrayInput>
You can make use of the translation system provided byadmin-on-rest and set the following translation paths:
aor.input.embedded_array.addto set Add Button's label.aor.input.embedded_array.removeto set Remove Button's label.
Also, you can change the translation path's themselves by providing values for propslabelAdd andlabelRemove.
You can learn more about admin-on-rest's translation system from this link:https://marmelab.com/admin-on-rest/Translation.html
There are four style props you can pass to customize style, those areactionsContainerStyle,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 passinsertDividers value astrue orfalse to get the divider or not. Default value forinsertDividers is true.
About
Embedded Arrays for Admin On Rest
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Uh oh!
There was an error while loading.Please reload this page.
Contributors4
Uh oh!
There was an error while loading.Please reload this page.