A custom field/input component for Admin-on-rest that provides the ability to represent embedded arrays.
Install with:
npm install --save aor-embedded-arrayor
yarn add aor-embedded-arrayDefine the Create and Edit View like this:
<EmbeddedArrayInput source="links">
<LongTextInput source="url" />
<LongTextInput source="context" />
<EmbeddedArrayInput source="metadata">
<TextInput source="name" />
<TextInput source="value" />
</EmbeddedArrayInput>
</EmbeddedArrayInput>Define the Show and List View like this:
<EmbeddedArrayField source="links">
<UrlField source="url" />
<TextField source="context" />
<EmbeddedArrayField source="metadata">
<TextField source="name" />
<TextField source="value" />
</EmbeddedArrayField>
</EmbeddedArrayField>For primitive arrays, define the Views the same way but without the source prop for the unique child:
<EmbeddedArrayInput source="links">
<LongTextInput />
</EmbeddedArrayInput> import FlatButton from 'material-ui/FlatButton';
import ActionDeleteIcon from 'material-ui/svg-icons/action/delete';
const CustomDeleteButton = ({items, index}) => (
<FlatButton
key={index}
secondary
label="Delete"
icon={<ActionDeleteIcon />}
onClick={() => {
// Take custom action
console.log(items, index);
items.remove(index);
}}
/>
) var style = {
actionsContainerStyle: {
display: "inline-block",
clear: "both",
float: "right",
padding: "2em 0em 0em 0em"
}
}
<EmbeddedArrayInput source="links"
actionsContainerStyle={style.actionsContainerStyle}
customButtons={[<CustomDeleteButton key={0}/>]}
>
<UrlField source="url" />
<TextField source="context" />
</EmbeddedArrayInput>You can make use of the translation system provided by admin-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 props labelAdd and labelRemove.
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 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.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent