Admin-on-rest: Hide the form. Input depends on a different input value.

Question

I could not find a way to hide the input, it depends on some value of the entry. I tried to get import { formValueSelector } from 'redux-form'to get the current state, but I failed.

export default props => 
    <Edit {...props}>
        <SimpleForm>
            <DisabledInput source="id"/>
            <NumberInput options={opts} source="age" />
            {
            props.record.age > 18 &&
                <TextInput options={opts} source="question"/>
            }
        </SimpleForm>
    </Edit>

Answer 1

You can use marmelab / aor-dependent-input , this is a component to display input depending on other input values.

Usage example:

import React from 'react';
import {
    Create, SimpleForm, TextInput, DisabledInput, NumberInput
} from 'admin-on-rest';
import DependentInput from 'aor-dependent-input';

const checkAge = (age) => {
    return parseInt(age, 10) > 18;
};

const UserCreate = (props) => (
    <Create {...props}>
        <SimpleForm>
            <DisabledInput source="id"/>
            <NumberInput source="age" step="1" />

            <DependentInput dependsOn="age" resolve={checkAge}>
                <TextInput source="question"/>
            </DependentInput>
        </SimpleForm>
    </Create>
);

export default UserCreate;

Answer 2

record , . , formValueSelector, , .

- :

// in src/ConditionalInput.js
import React from 'react';
import { connect } from 'react-redux';
import { formValueSelector } from 'redux-form'
import { TextInput } from 'admin-on-rest/lib/mui`;

const ConditionalInput = ({ isDisplayed, condition, children, ...rest }) => 
    isDisplayed 
        ? React.cloneElement(children, rest)
        : null;

function mapStateToProps(state, props) {
    return {
        isDisplayed: props.condition(formValueSelector('record-form')),
    }
}

export default connect(mapStateToProps)(ConditionalInput);

// in your EditView
export default props => 
<Edit {...props}>
    <SimpleForm>
        <DisabledInput source="id"/>
        <NumberInput options={opts} source="age" />
        <ConditionalInput condition={selector => selector('age') > 18}>
            <TextInput options={opts} source="question"/>
        </ConditionalInput>
    </SimpleForm>
</Edit>

Answer 3

, , , , :

• selector
• Trying to access touched of undefined

, - -: https://github.com/marmelab/admin-on-rest/blob/master/docs/Inputs.md. , <Field> meta input. , , , .

const ConditionalChildRendering = ({isDisplayed, condition, children, ...rest}) => {
  return isDisplayed
    ? React.cloneElement(children, rest)
    : null;
}

const ConditionalInput = connect((state, props) => {
  return  {
      isDisplayed: props.condition(formValueSelector('record-form'), state),
  }
})(ConditionalChildRendering);

...

let conditionalTextField = ({meta, input, name, ...rest}) => {
    return <ConditionalInput {...rest}>
        <TextInput source={name} meta={meta} input={input} {...rest}  />
    </ConditionalInput>;
};

<Field 
    component={conditionalTextField} 
    name="postcode" 
    condition={(selector,state) => selector(state, 'somefield') === 'somevalue'} />

, . , , <Field> component. ( - , , PLS , , )