Am using react-admin #2.5.3.
I would like to show the DOB of people who turn to 18 today using <DateField/>, but passing the value in this way does not work.
This function is just for admin, so admin can check if a user is using his real age by checking his ID photo and the DOB of people who turns to 18 years old "today" to see if his birthday is after this dob_18.
Because that dob_18 is based on the current date, so I would like to calculate from client-side, the source field of should be name of the property in record based on its doc https://marmelab.com/react-admin/Fields.html, but not sure why doesn't work in this case.
// custom function to manipulate date field
const calculateTime = () => { ... }
<Show title={<IDPhotosTitle />} {...props}>
<TabbedShowLayout>
<Tab label="ID">
...
<DateField
record={{"dob_18": calculateTime()}}
source="dob_18"
label="DOB Check"
showTime
/>
...
</Tab>
</TabbedShowLayout>
</Show>
Can I ask, how can I give <DateField/> a custom value calculated in client-side?
Related
My use case is that when a user filters the table data using search, I'd like to be able to use an external widget to perform actions on each row of that data as it is shown in the table.
Right now I dump all my data into cols={MyData} and sort through data[index] but ideally I'd like to be perform operations with something like currentlyDisplayedTableData[index].
There doesn't seem to be a documented way of doing this so I have no attempt to show, I'm just wondering if someone may have encountered this problem and could show me the light.
re: https://github.com/mbrn/material-table/issues/1124
Just thought I should share another tip, if you just want to intercept/intervene and operate on the currently displayed data before render you can override the component for the table body as Tyler showed in the "issue" link.
But instead of adding a render method, like Tyler did, you can just intercept the props on it's "way down" like this and inject it in the next component (Body, Row, etc.
Note; look for EditRow and other components in https://material-table.com/#/docs/features/component-overriding
<MaterialTable
//...
/**
* be aware when making changes on data that there is a tableData object attached
* rowData: {
* name: 'some name',
* tableData : {id: 3}
* }
*/
components={{
Body: (props) => {
//intervene before rendering table
console.log("tampering with some table data ", props);
console.log(" -- table data looks like this ", props.renderData);
// do stuff..
const myRenderData = props.renderData;
return (
<>
<MTableBody {...props} renderData={myRenderData} />
{/* to show that you will make impact */}
{/* <MTableBody {...props} renderData={[]} /> */}
</>
)
},
Row: (props) => {
//intervene before rendering row
console.log("tampering with some row data ", props);
console.log(" -- row data looks like this ", props.data);
console.log(" -- row table data looks like this ", props.data.tableData);
// do stuff..
const myRenderData = props.data;
return (
<>
<MTableBodyRow {...props} data={myRenderData} />
</>
)
}
}}
#imjared
I found this thread, via the issue, today and have now worked on and tested two working solutions for how to get hold on the filtered data. Maybe thisos what you want, or at least can hint you where to go, so I thought I should share it =)
Option 1 - listen for changes in MaterialTable.state.data with reference. (useRef, and UseEffect)
Option 2 - built in MaterialTable.onSearchChange combined with reference to MaterialTable.state.data
note, I have included 2 flavors of option 2.
Thanks #tylercaceres for the example you provided, it didn't fit for me but gave me a hint on how to do it.
Code is found here: MaterialTableGettingHoldOfRenderData.js
material-table example getting filtered data, the tables current view data, including 2 options and some other examples of actions/buttons, how to use SvgIcon from Material-UI
I have a field where I only want the length to be 3 numbers long max. I am using Yup, however, it only notifies the user of the error, it doesn't stop the user from entering a number longer than desired.
To fix this I created a function that slices the input value. This looks like it works, it keeps the length in the form field to what I want, however, when I click submit the value for the field is the unsliced version.
Here is my code...
<TextInput
style={styles.text}
value={_checkLength(values.number, 3)}
onChangeText={handleChange('number')}
onBlur={() => setFieldTouched('number')}
placeholder="Number"
/>
My _checkLength function is simple...
_checkLength = (value, length) => {
return value.slice(0, length)
}
Why is this not working?
Leaving this answer so people can see how to use setFieldValue, but #Carlos had the correct and obvious answer. That is to simply use maxLength={num}
Credit to #MohammedAshfaq . His answer is correct but I wanted to provide exact code that needs to be updated. The answer was to run setFieldValue by putting it in the onChangeText field. I had to pass in the value and then run my function using that passed in value. Now, when I submit it submits the proper value returned from the _checkLength function.
<TextInput
style={styles.text}
value={values.number}
onChangeText={(value) => setFieldValue('number', _checkLength(value, 3))}
onBlur={() => setFieldTouched('number')}
placeholder="Uniform Number"
/>
My code is similar to this example presented in the doc. However, I've noticed that the asyncValidate function receives undefined for any field specified in the asyncBlurFields array as soon as I unFocus from that field. However, it returns the right values when I submit the form or unFocus from a different field.
For example, if I have asyncBlurFields: ['username', 'firstname'] and there's a value in both fields, I'll see username as undefined in the values passed to asyncValidatewhen I unFocus from username but the value of firstname will be present. If I then unFocus from firstname, the value of firstname will now be undefined while that of username will be present. Both values will be present when I submit the form. It seems similar to the question raised in issue #1834. However, I don't understand the response given in that issue. Could someone please help me with an example or further explanation.
I'm using version 7.0.1 of redux-form and version 0.45.1 of react-native.
I've figured it out. Here's what my renderInput() now looks like. The important thing here is the line with onBlur=...
renderInput({
input,
label,
type,
meta: { asyncValidating, touched, error, active }
}) {
return (
<Item>
<Input
placeholder={label}
{...input}
type={type}
onBlur={() => input.onBlur(input.value)}
/>
</Item>
);
}
<Text>aircraft</Text>
I need to get aircraft in Text, and change the value of Text dynamically. How could I do?
You can access it like this (example: https://rnplay.org/apps/ACHJEQ)
<Text ref={(elem) => this.textElem = elem}>Hello world!</Text>
and then:
console.log('textElem content', this.textElem.props.children);
But you can't set it since it's a (read-only) prop.
Well... various ways to do this.
For example:
<Text>{this.state.aircraftText}</Text>
and then just change the state variable. You could also implement it sth like:
<Text>{ (this.state.checkIfTrue) ? 'Boeing787' : 'Airbus 320' } </Text>
this checks if this.state.checkIfTrue results to true and displays either 'Boeing787' or 'Airbus 320'.
This should give you a first idea.
I simply want to call a function with the text of a TextInput once editing of the text is done. Something like below
<TextInput onSubmitEnding={(text) => submitText(text)}>
But obviously the text is not passed as argument to onSubmitEnding, . onChangeText has it. But I really want the text after the user is done editing. So whats the simplest means to do this,
1º onSubmitEnding is not a valid event, the correct one is onSubmitEditing.
2º You can get the input value using event.nativeEvent.text
Your code should look like this
<TextInput onSubmitEnding={(event) => this.submitText(event.nativeEvent.text)}>
I'm not forcing you to certain pattern, but you should have your TextInput's value in a state. Then:
...
this.state = {
textInputValue: ''
}
...
submitText() {
console.log(this.state.textInputValue)
}
...
<TextInput
value={this.state.textInputValue}
onChangeText={(text) => this.setState({textInputValue: text})}
onSubmitEditing={() => this.submitText()} />
is completely valid. Here's a live example: https://rnplay.org/apps/wirurQ