marmelab / aor-dependent-input Goto Github PK
View Code? Open in Web Editor NEWA component for displaying input depending on other inputs values in Admin-on-rest
License: MIT License
A component for displaying input depending on other inputs values in Admin-on-rest
License: MIT License
The DependentInput has weird behaviour with defaultValue and SelectInput
example below
when you click on the select it does not change value until you click on the same item again
if you remove defaultValue's or if you have only one DependentInput it works ok
<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;
};
yarn emits a warning:
warning "[email protected]" has incorrect peer dependency "admin-on-rest@~1.2.0".
I believe it is caused by this incorrect directive in package.json:
"peerDependencies": {
"admin-on-rest": "~1.0.2"
}
instead of
"peerDependencies": {
"admin-on-rest": "~1.3.2"
}
or a more relaxed one
yarn emits a warning:
warning "[email protected]" has incorrect peer dependency "admin-on-rest@~0.9.1".
I believe it is caused by this incorrect directive in package.json:
"peerDependencies": {
"admin-on-rest": "~0.9.1"
}
instead of
"peerDependencies": {
"admin-on-rest": "~1.0.2"
}
Hi.
Option 1:
import {DependentInput} from 'aor-dependent-input';
<TextField source="type" />
<DependentInput dependsOn="type" value="NATURAL" >
<TextField source="firstName" />
<TextField source="lastName" />
</DependentInput>
<DependentInput dependsOn="type" value="JURIDICAL" >
<TextField source="companyName" label="Company name"/>
</DependentInput>
Option 2:
import {DependentInput} from 'aor-dependent-input';
const isNatural = (record) => record.isNatural;
<TextField source="type" />
<DependentInput resolve={isNatural} >
<TextField source="firstName" />
<TextField source="lastName" />
</DependentInput>
Option 3:
const isNaturalUser = (value) => {value.startsWith('NATURAL');}
<TextField source="type" />
<DependentInput dependsOn="type" resolve={isNaturalUser} >
<TextField source="firstName" />
<TextField source="lastName" />
</DependentInput>
Used Versions:
"admin-on-rest": "^1.4.1",
"aor-dependent-input": "^1.2.0",
Could anyone help me?
Thanks you very much.
Could you make a new release for this commit:
7d9137d
?
Thanks.
I have 2 ReferenceInput. The thing I want is to pick a company and show only branches of that company. I try this but it does not work.
The branches have a field called motherID that connects them with the companies.
<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>
When you use an input field inside DependentInput and mention a defaultValue, the value is not filled:
Checkout:
https://codesandbox.io/s/v3o03kZL
Instructions:
The dependent field has a default value but it is not shown.
Hi,
I checked your example with your outer fetch, but I do not understand how to achieve a dependent input for a sub-resource, through AOR stateless functions (or not). The use case is that we want the "subCategories" field to be populated based on the "categories" field, to which there is a 'belongsTo' relationship.
<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>
This is the relationship:
"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!
When paired with https://github.com/MhdSyrwan/aor-embedded-array, the field values are always undefined:
Data:
{
some_array: [
{
type: 'other',
name: 'Some Name'
}
]
}
Component:
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>
Even if I use value
or resolve
, the value cannot be detected.
To be honest I'm unsure whether the problem is with the DependentInput
or EmbeddedArrayInput
Hi,
I think it is an issue with React 16 but I'm not sure.
I have this code:
React does not recognize the dependsOnValue
prop on a DOM element
<DependentInput dependsOn="country_id">
<StatesSelectInput source="state_id"/>
</DependentInput>
In my console I have this error:
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.
The error is clear, it is not urgent but just annoying.
Thanks.
The element if its contents should not be displayed output as an element
Hello,
I have two boolean inputs and I want to make true the second boolean when the first is toggled.
It is necessary that fields are both rendered at first time and none of them is hidden.
Does aor-dependent-input covers that functionality?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.