marmelab / aor-dependent-input Goto Github PK

    <Create title={<TitleCreate />}{...props}>
        <SimpleForm validate={validateCreateEdit}>

            <ReferenceInput label="CATEGORY" source="cat_id" reference="categories" allowEmpty
                            perPage={100}
                            sort={{field: 'name', order: 'ASC'}}
            >
                <SelectInput optionText="name" />
            </ReferenceInput>

            <ReferenceInput label="SUBCATEGORY" source="subCat_id" reference="subCategories" allowEmpty
                            perPage={100}
                            sort={{field: 'name', order: 'ASC'}}
            >
                <SelectInput optionText="name" />
            </ReferenceInput>

        </SimpleForm>
    </Create>

  "relations": {
    "category": {
      "type": "belongsTo",
      "model": "category",
      "foreignKey": "cat_id"
    }
  }
````

I do not understand how this can be done based on the above generic AOR code.

Thanks for any hints or added documentation!

  "peerDependencies": {
    "admin-on-rest": "~0.9.1"
  }

  "peerDependencies": {
    "admin-on-rest": "~1.0.2"
  }

  "peerDependencies": {
    "admin-on-rest": "~1.0.2"
  }

  "peerDependencies": {
    "admin-on-rest": "~1.3.2"
  }

 <DependentInput dependsOn="country_id">
              <StatesSelectInput source="state_id"/>
            </DependentInput>

Warning: React does not recognize the `dependsOnValue` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `dependsonvalue` instead. If you accidentally passed it from a parent component, remove it from the DOM element.

{
    some_array: [
        {
            type: 'other',
            name: 'Some Name'
        }
    ]
}

const doResolve = (value) => {
    console.log(value);
    return true;
}

...

<EmbeddedArrayInput label="" source="some_array">
    <TextInput label="Type" source="type"/>
    <DependentInput dependsOn="type" resolve={doResolve}>
        <TextInput label="Name" source="name"/>
    </DependentInput>
</EmbeddedArrayInput>

<SimpleForm>
  <SelectInput source="type" choices={[
    {
      id: 'pc',
      name: 'pc',
    },
    {
      id: 'server',
      name: 'server',
    },
    {
      id: 'gateway',
      name: 'gateway',
    },
    {
      id: 'acnetel',
      name: 'acnetel',
    },
  ]} defaultValue="gateway" />

        <DependentInput resolve={switchType('gateway')}>
          <TextInput source="nat" defaultValue="gateway"  />
        </DependentInput>

        <DependentInput resolve={switchType('pc')}>
          <TextInput source="not" defaultValue="pc" />
        </DependentInput>

        <DependentInput resolve={switchType('server')}>
          <TextInput source="nit" defaultValue="server" />
        </DependentInput>

        <DependentInput resolve={switchType('acnetel')}>
          <TextInput source="net" defaultValue="acntel" />
        </DependentInput>
</SimpleForm>

const switchType = (value) => (values) => {
  return values['type'] === value;
};

    <ReferenceInput  source="CompanyID" reference="companies" allowEmpty alwaysOn>
    <SelectInput optionText={choice => `${choice.name}`} />
    </ReferenceInput>

    <DependentInput dependsOn="CompanyID" >
    <ReferenceInput  source="BranchID" reference="branches" allowEmpty alwaysOn>
    <SelectInput optionText={choice => `${choice.tmima  +" "+ choice.address}`} />
    </ReferenceInput>
    </DependentInput>