function Form(props) {
var objBarCode;
if (props.record && props.record.type === "STOCK") {
objBarCode = < TextInput source="barcode" label="Bar Code" / >;
}
return (
< SimpleForm {...props} >
< TextInput source="item" label="item" validate={[required]} / >
< TextInput source="name" label="Name" validate={[required]} / >
< SelectInput
source="type"
label="Type"
validate={[required]}
choices={[
{ id: "STOCK", name: "Stock" },
{ id: "RMK", name: "Remark" },
{ id: "SVR", name: "Services" }
]}
/ >
{objBarCode}
< /SimpleForm >
);
}
How can I achieve something like this, where some inputs only appear by some conditions? The above code does not rerender when the condition value changes. The goal was to have the Textinput Bar Code only appear when type="STOCK"
This won't be easy. You'll have to implement a custom input which will get the current value for the condition from the redux form state and decide what to display accordingly.
I suggest you create it as a wrapper or HOC so that you can reuse it.
You'll also have to explore the Admin-on-rest source to find the form key in redux and redux-form documentation for how to get the value.
However as this is a very common scenario, I'll see what we can do to make it easier:
We just released aor-dependent-input ! Let us know if that works for you :)
Related
I want to use the same logic when I press the APPLY button but with the ENTER key.
How do I do that?
filterParams: {
closeOnApply:true,
buttons: ['reset', 'apply'],
values: parentCampaignAndNodes.PaymentGroups
},
As you might have found out by now, you can remove the Apply button (by setting filterParams: { buttons: [] } in your column definitions) and then values are submitted onchange.
The solution you ask for is indeed still not available through the AgGrid API. I do have a workaround, but beware it uses direct DOM bindings which is not recommended when working with React.
const applyFilterOnEnter: AgGridReactProps['onFilterOpened'] = ev => {
const inputElem = ev.eGui.querySelector('.ag-filter-body .ag-input-field');
const applyButtonElem = ev.eGui.querySelector('.ag-filter-apply-panel button[ref=applyFilterButton]');
if (inputElem && applyButtonElem) {
inputElem.addEventListener('keydown', keyEv => {
if ((keyEv as KeyboardEvent).key === 'Enter') {
(applyButtonElem as HTMLButtonElement).click();
}
});
}
};
return <AgGridReact
onFilterOpened={applyFilterOnEnter}
/>
I have a FieldArray, and I want to change one of the Field's component type when adding a new line of Fields for it ( this.props.array.push("xxx", { obj })).
For example, I have a value named summaryNo.
When summaryNo === 0, I want the Field became a Picker. Else, as a simeple input Field.
Is that possible? I gave a try like the below codes:
export const renderInputOrPicker = ({ input, label, children, ...custom) => {
if (input.value instanceof Array && input.value[0] === "toBeAPicker") {
return (
<Picker mode="dropdown" {...input}
selectedValue={input.value[1]}
onValueChange={(value) => {
setTimeout(() => {
input.onChange(value);
}, 10);
}} children={children} {...custom} />
);
} else {
return (
<Item regular>
<Input {...input} />
</Item>
);
}
};
Any suggestion?
Thanks.
I thought I have figured a way out. I just don't need the input Field. What I want to do is to have a Field that can display "true" or "false" and can be controlled by the disable status.
The Picker Field can do that already. Which means I can let it read-only or editable and showing the current value.
All in all, I am still looking for the answer, a better solution for this redux form scenario!
Thanks.
I'm trying to implement this with elasticsearch and it is working But how i can force this show results which can be different from the searched terms? For example i search ardino, The elasticsearch give me the word arduino but then react-select does not show that result because ardino does not contain arduino. I know the idea of this library is exactly that and it is working ok, but i have most of the things already implemented and it is only missing that part.
The handle is giving the right behavior and it is populating the options correctly.
Thank you
<Select
name= {this.state.selectedOption}
value={this.state.selectedOption}
isSearchable={true}
onChange = {(val) => {
this._handleSearch(val.value)
}}
onInputChange = {(val) => {
this._handleSearch(val)
}}
options={this.state.options}
/>
I would recommend using the Async component which can simplify your code. You will not need the onChange handler anymore.
isSearcheable is true by default, no need to specify.
In answer to your question: Make sure you are passing in label and value keys with each result option. If you want to customize any of the results, for example adding the search term in the results, you can manually manipulate the options array.
import React, {Component} from 'react';
import AsyncSelect from 'react-select/lib/Async';
class Search extends Component {
state = {inputValue: ""}
onInputChange = (inputValue) => {
this.setState({ inputValue });
};
getSearchResults = async (inputValue) => {
// elastic search results
let options = await fetch(`searchElastic/${inputValue}`);
// input value of drop-down
const inputValue = this.state.inputValue;
// manually add input field as an option in drop-down
if (inputValue.length > 0)
options.unshift({label: inputValue, value: inputValue})
// async handling of new props
return options.map(opt => {
return {label: opt.name, value: opt.value}
})
}
render() {
return <AsyncSelect
onInputChange={this.onInputChange}
loadOptions={this.getSearchResults}
/>
}
}
export default Search;
I have a problem with persisting user's data in a react-native application I am currently working on with my team. We have an app with a list of events and when you click on an event, it opens up the event details page and shows a menu to choose yes/no/maybe (attendance menu) which the user can toggle to select whether or not they are attending the event. Our code looks like this:
import React from 'react';
import { AsyncStorage, Text, View, StyleSheet, Picker } from 'react-native';
export class PickerMenu extends React.Component {
state = { choice: '' }
componentDidMount = () => AsyncStorage.getItem('choice').then((value) => this.setState({ 'choice': value }))
setName = (value) => {
AsyncStorage.setItem('choice', value);
this.setState({ 'choice': value });
}
render() {
return (
<View>
<Picker selectedValue = {this.state.choice} onValueChange = {this.setName} itemStyle = {styles.item}>
<Picker.Item label = "Yes" value = "yes" />
<Picker.Item label = "Maybe" value = "maybe" />
<Picker.Item label = "No" value = "no" />
</Picker>
</View>
);
}
}
We are running the build on Xcode. We want the user's choice to still be present after the page has been refreshed or the app has closed - this works HOWEVER,the choice that the user has selected, stays the same for every event. E.g. if they select 'Maybe' for event 1, the selection 'maybe' is highlighted for every other event in our app.
We had an idea of grabbing unique event IDs and implementing this into the AsyncStorage function but we are unsure of how to do this.
Any help will be great and much appreciated - thank-you!
In this case you need to use the async/await to store at the async storage
like this:
setName = async (value) => {
await AsyncStorage.setItem('choice', value);
this.setState({ 'choice': value });
}
Hope i have helped!
Some useful links for you:
https://facebook.github.io/react-native/docs/asyncstorage.html
I have several dropdowns, all have the same initial options.
(they may be initialized with one value at the beggining).
I am looking for solution to a case when choosing one option in one dropdown - it will no longer show as an option in the other dropdowns.
I saw this solution in AngularJS and didn't succeed making it work in Angular 2 RC 4:
https://stackoverflow.com/a/28918935
In addition I saw that pipes are not recommended for filtering as of Angular.io:
The Angular team and many experienced Angular developers strongly
recommend that you move filtering and sorting logic into the component
itself.
I got a solution for this issue:
In html:
<select [ngModel]='currValue'
(change)="update($event.target.value, i, $event.target.options.selectedIndex)"
name="{{i}}"
#select>
<option *ngFor="let currItem of items | distinctValue: selectedList: select.value: i: currValue; let j=index"
value="{{currItem}}">{{currItem}}</option>
</select>
In ts:
selectedList: any = [];
when changing the selected value of select - push the item into the selectedList and remove the previous selected value of this element from the selectedList so it could be picked again.
In DistinctValue.pipe.ts:
transform(itemsList: any, filtersList: any, excludeItem: any, row: any, currItem: any) {
return itemsList.filter(function(option:any) {
let keepItem: boolean = true;
let currFilter: number = 0;
// Check if the option should be filtered
while ((keepItem) && (currFilter < filtersList.length)) {
// If option exists in filters list and not this item
if ( (option.fieldname != currItem.fieldname)
(option.fieldname != excludeItem.fieldname) &&
(option.fieldname == filtersList[currFilter].fieldname) ) {
keepItem = false;
}
currFilter++;
}
return keepItem;
});
}
you could write a custom filter pipe.
in html:
options | optionFilter:optionToRemove
js:
#Pipe({
name: 'optionFilter'
})
class OptionFilterPipe implements PipeTransform {
public transform(options, optionToRemove) {
return options.filter(function(option) {return option.id !== optionToRemove.id)};
}
}