aor-embedded-array

    0.1.0 • Public • Published

    npm npm npm Travis

    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 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>

    Using Custom action buttons

     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>

    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.

    Keywords

    none

    Install

    npm i aor-embedded-array

    DownloadsWeekly Downloads

    74

    Version

    0.1.0

    License

    MIT

    Unpacked Size

    137 kB

    Total Files

    34

    Last publish

    Collaborators

    • mhdsyrwan