We have the following that displays a select style UX:
<ReferenceInput source="visibility.visibilityId" reference="projectVisibilities" allowEmpty>
<SelectInput optionText="visibility" />
</ReferenceInput>
We want to add in parentheses the description within visibility.
Something like this :
<ReferenceInput source="visibility.visibilityId" reference="projectVisibilities" allowEmpty>
<SelectInput optionText={["visibility", "(", "description", ")" } />
</ReferenceInput>
An unfound string would be rendered as a regular string and visibility and description as the optionText of the select input, after joining the array.
Is this something already possible?
optionText accepts a function, so you can shape the option text at will:
const optionRenderer = choice => `${choice.visibility} (${choice.description})`;
<SelectInput optionText={optionRenderer} />
optionText even accepts a React Element, that will be cloned and receive the related choice as the record prop. You can use Field components there:
const DescriptionField = ({ record }) => <span>{record.visibility} ({record.description})</span>;
<SelectInput optionText={<DescriptionField />}/>
Note that this is clearly documented in the React-admin documentation:
https://marmelab.com/react-admin/Inputs.html#selectinput
Related
Calling a ReferenceInput with an AutocompleteInput grabs the right document, and returns the "name" to the input but when you save it saves the document id to the source not the value of "name". Apparanetly React-admin does not allow anything but id to be saved natively, but the name is stored in the input until the document is saved. Is there any way to get the name from the input, and pass it to the format command maybe?
Expected result: input saves the value of the name from the document
<ReferenceInput label="Name" source="name" reference="profiles" filterToQuery={searchText => ({ name: searchText })} >
<AutocompleteInput optionText="name" source="name" resettable="true" shouldRenderSuggestions="true" />
</ReferenceInput>
This is correct - the default property of the object react-admin uses inside choice inputs (Select / Autocomplete) is the id. To override this behaviour you only have to pass one more prop to the <AutocompleteInput/> which is the optionValue e.g.:
<AutocompleteInput optionValue="name" ... />
And it should do exactly as you want it to.
I want to pass id or key values onChangeText but it or i can only pass text value from Input TextField. How do i pass both id and text
<Input
id={i}
key={i}
placeholder={`Question ${i}`}
onChangeText={(e) => this.editQuestion(e)}
/>
You can use function currying to do this.
First, set up your function inside the class to take the ID as a parameter and return a function that takes the event as a parameter:
editQuestion = id => e => {
console.log(id);
console.log(e);
}
Then you can call it like this:
<Input
id={i}
key={i}
placeholder={`Question ${i}`}
onChangeText={this.editQuestion(i)}
/>
HackerNoon have a good article on this if you're interested in learning more.
I went through React-Native docs to figure out what is renderRow() but for some reason I am unable to comprehend what does it say from Facebook React-Native docs
This what the official docs says
renderRow
(rowData, sectionID, rowID, highlightRow) => renderable
Takes a data entry from the data source and its ids and should return a renderable component to be rendered as the row. By default the data is exactly what was put into the data source, but it's also possible to provide custom extractors. ListView can be notified when a row is being highlighted by calling highlightRow(sectionID, rowID). This sets a boolean value of adjacentRowHighlighted in renderSeparator, allowing you to control the separators above and below the highlighted row. The highlighted state of a row can be reset by calling highlightRow(null).
[Question:] Can someone please explain me this with example?
ListView is deprecated, use FlatList instead with the equivalent renderItem method. This is responsible of the actual rendering of each row based on the data records:
const data = [
{ key: '1', label: 'foo' },
{ key: '2', label: 'bar' }
]
renderTheItem = ({item}) => {
return <Text>{item.label}</Text>
}
<FlatList
data={data}
renderItem={this.renderTheItem}
/>
And the rendered result will be something like this:
<View> --> coming from FlatList wrapper
<Text key="1">foo</Text> --> coming from the custom renderTheItem function
<Text key="2">bar</Text>
</View>
It is mandatory to either add a unique key prop for each data record, or define a keyExtractor function. Also important to destruct the item in the renderer function with ({item}) as it has other meta parameters as written in documentation of FlatList.
renderItem({ item, index, separators}) => {}
Let's say I have the following array in my create form
const CreateDefaults = {Inputs: [{id: "ID1", param: "a"},{id: "ID2", param: "b"}]};
and then I want to show extra TextInput only when id==="ID2"
export const MyCreate = withStyles(myStyles)(({ classes, ...props }) => (
<Create {...props}>
<SimpleForm defaultValue={CreateDefaults}>
<ArrayInput source="Inputs" {...props}>
<SimpleFormIterator {...props}>
<DisabledInput source="id" />
{/*this does not work*/}
{this.id === "ID2" ? (<TextInput source="ParamValue"/>) :null}
</SimpleFormIterator>
</ArrayInput>
</SimpleForm>
</Create>
));
How can I do something like that? I know that for the whole form, one can use FormDataConsumer. However, what can one do inside ArrayInput/SimpleFormIterator for each iteration?
How to access current object in iteration? I tried something like the answer given to the 'Custom Input do not receive record when inside ArrayInput' issue in the react-admin github page, but it still does not receive the record in custom input.
From the latest documentation here, you can see that if you use FormDataConsumer that is within an ArrayInput, you have a parameter called scopedFormData that you can use to get the current record and dereference that to get whatever fields you need. It usually also goes hand in hand with the getSource function you can use when setting the source within your FormDataConsumer.
three questions:
1) if you have multiple textInput fields how do you determine which one is being used?
2) with both onchangeText and onsubmitEditing what is being returned to the function
onSubmitEditing={()=>{this.clearText()}}
onChangeText={(text) => {this.captureInput(text)}}
I get that in onChangeText() text gives me the value in the input field. Are there any other parameters being passed back to that function?
Also, in onsubmitEditing() how do I access the event parameters being passed to clearText()?
I've read the documentation found here DOCS but it doesn't answer my question
3) Where in the documentation do you find these answers?
1) You just call different handlers to handle them separately:
<TextInput onChangeText={text => this.handleFirstInput(text)} />
<TextInput onChangeText={text => this.handleSecondInput(text)} />
2) There's no other parameters passed to them. What else do you need? You can set a ref on them but avoid that if possible.