admin-on-rest Reusable groups of input fields

Question

I would like to reuse blocks of input fields. e.g. Use the same group of fields in both Create and Edit forms rather than repeating the code in multiple places.

Documentation shows an example but it uses < Field > elements and trying to use the standard elements like < TextInput > gives errors. https://marmelab.com/blog/2017/01/13/admin-on-rest-0-7.html#use-your-own-component

Is there some scoping issue or something preventing this from working?

I would have expected the following to work fine:

const AddressInputs = (props) => (
    <span>
        <TextField source="address" {...props} />

        {/* Changing from TextField to TextInput gives errors
         /  <TextInput source="address" {...props} />
        */}
    </span>
)

export const ItemEdit = (props) => (
    <Edit {...props}>
        <SimpleForm>
            <AddressInputs />
        </SimpleForm>
    </Edit>
);

What errors are you getting? This should be quite possible. – kunal pareek Nov 06 '17 at 10:58 — kunal pareek, Nov 06 '17 at 10:58

score 4 · Answer 1 · answered Nov 10 '17 at 18:52

Similar to this

You need to use Field from redux-form to decorate your AOR inputs and use TextField from AOR and pass {...props} as pointed by kunal pareek

import React from 'react';
import {
    LongTextInput,
    ImageField,
    ImageInput,
    TextField
} from 'admin-on-rest';
import { Field } from 'redux-form';


const CustomGroupComp = (props) => (
    <div>
        <TextField source="status" {...props} />
        <Field name="staffComment" component={LongTextInput} label="staffComment" {...props}  />
        <Field name="adminComment" component={LongTextInput}  label="resources.faults.fields.adminComment" {...props} />
        <Field multiple name="fileA" component={ImageInput} accept="image/*">
            <ImageField source="path" title="title"/>
        </Field>
    </div>
);

export default CustomGroupComp;

admin-on-rest Reusable groups of input fields

1 Answers1