I basically have a record with a parameters property that is an array. Each parameter has a type and a value and the value is dependent on the type. E.g. type string means that value can be "foo" or "bar" while type bool means that it has to be true or false.
This is modeled as a SelectInput for the type and a type dependent input for the value (e.g. BooleanInput, TextInput, ..). The inputs are inside a FormDataConsumer, so that the correct value input according to type can be rendered. Something like the following
const renderValueInput = (type, getSource) => {
switch (type) {
case 'bool':
return <BooleanInput source={getSource('value')} label="Value" fullWidth />;
default:
return <TextInput source={getSource('value')} label="Value" fullWidth />;
}
};
return (
<ArrayInput source="parameters">
<SimpleFormIterator>
<FormDataConsumer>
{({ getSource, scopedFormData }) => (
<>
<SelectInput
source={getSource('type')}
label="Type"
choices={[
{ id: 'bool', name: 'Boolean' },
{ id: 'string', name: 'String' },
]}
/>
{ scopedFormData && renderValueInput(scopedFormData.type, getSource) }
</>
)}
</FormDataConsumer>
</SimpleFormIterator>
</ArrayInput>
);
So far this is working fine and rendering the correct components, but if the type is changed apparently the form state is not updated for the value. E.g. if the type is changed from bool to string the value stays true or false in the state. But if I change anything in the value input the state is updated again.
I'm now wondering how I can update the form state for value when changing the type? Any ideas? Or is the model / concept that I chose simply wrong?
I'm also not sure if this is a react-final-form or react-admin "problem" tbh.
Related
I'm using an old version (2.9) of the React-Admin framework and having trouble validating a SimpleForm field.
I realize upgrading to a newer version is the way to go, but that will be a while.
I'm validating a field in a SimpleForm.
My validatefunction (below) returns an integer, 0 or above.
I want the validation to pass when that value is 0, but fail when the value is > 0. Currently, the form vails validation in all cases. Instead, I want it only fail when the return value is > 0.
Is there some way to specify that using some kind of expression on the validate line in the SimpleForm below?
const MyComponent = ({ dispatch, dataProvider, ...props }) => {
return (
<React.Fragment>
<SimpleForm>
...
<ReferenceInput
source="somefield"
validate={[ required(), validatefunction ]}
>
<SelectInput optionText="name" />
</ReferenceInput>
...
</SimpleForm>
</React.Fragment>
)
}
A better approach might be for my validatefunction to return undefined when the validation passes. But for reasons outside the scope here I haven't yet gotten that working.
Your validateFunction should return a string if there is an error.
const validatefunction = (value) => {
const validatorValue = oldValidateFunction(value);
if (validatorValue > 0) {
return 'error this does not validate';
}
}
See https://marmelab.com/react-admin/doc/2.9/CreateEdit.html#per-input-validation-custom-function-validator for the documentation of input validators.
I am trying to pass a saved search term string to prefill into google places autocomplete's input field. The setAddressText method they offer successfully prefills the input, but it does not trigger the search, so no dropdown options open. Only once you type something does the query run, so its obviously listening for an onChangeText event before it runs the query. I therefore don't see the point in the setAddressText method, if you then have to type again anyway. Surely there must be a way to trigger the search, without having to add / takeaway characters manually with the keyboard from the existing search term.
const { googleApiKey } = config
const ref = useRef()
useEffect(() => {
ref.current?.setAddressText(initialValue)
}, [])
return (
<View sx={{ flex: 1 }}>
<GooglePlacesAutocomplete
ref={ref}
placeholder={placeholder}
listViewDisplayed="true"
fetchDetails={true}
textInputProps={{
autoFocus: true,
...sx
}}
onPress={(data, details = null) => {
console.log("data", data, "details", details)
}}
query={{
key: googleApiKey,
language: "en",
components: "country:gb",
types: types ? types : null
}}
/>
</View>
)
}
Any wisdom on this would be greatly appreciated!
Full Disclosure: I maintain this library.
This is not currently supported by the library.
There is a feature request open here.
I think I am not understanding the documentation correctly.
The documentation says: that is takes a Function that return a position: Number, or a stepStatus: which takes a String to render custom content inside step
My goal is to render a check mark instead of a number as it is by default.
I tried to return a string of 'test' and it does not work.
<StepIndicator
customStyles={customStyles}
currentPosition={this.state.currentPosition}
stepCount={this.state.stepCount}
renderStepIndicator={() => {
this.renderStepIndicator();
}}
labels={labels}
/>
and this is the function that return a string
renderStepIndicator() {
return 'test';
}
I am not sure what I am missing here. also I want to return an icon of checkmark. I have seen people doin git but I am not sure how if this only takes a string or an integer.
Here this function returns two parameters step position and step status. You can use this function like this,
<StepIndicator
customStyles={customStyles}
currentPosition={this.state.currentPosition}
stepCount={this.state.stepCount}
renderStepIndicator={(stepPosition,stepStatus) => {
this.renderStepIndicator(stepPosition,stepStatus);
}}
labels={labels}
/>
And the render function is like,
renderStepIndicator(stepPosition, stepStatus) {
return <Icon name={"check"} size={20} color={stepStatus === 'finished' ? "green" : "gray"} /> ;
}
This function render check icon. If you step was complete it show green check otherwise gray check.
For more details you can check this example,
https://github.com/24ark/react-native-step-indicator/blob/master/example/src/HorizontalStepIndicator.tsx
The above solution does not work for me so tried some changes and after some time I got this working solution if some are still facing this issue try using this code.
1. Put this code in your StepIndicator props
renderStepIndicator={({ position, stepStatus }) =>
renderStepIndicatorRender(position, stepStatus)
}
2. Create a function to render the icon
const renderStepIndicatorRender = (stepPosition, stepStatus) => {
return stepStatus === "finished" ? (
<Icon name="check" size={12} color="#fff" />
) : (
<Text>{stepPosition}</Text>
);
This code uses field.type which is a string to determine what component to render.
The SelectOptionsOverlay component will render a CardFormSelectField (type=="select") with its options.
CardFormTextAreaOverlay will render a CardFormTextAreaField (type=="textarea"), and this component will never try to use options or any other property not present in CardFormTextAreaField.
export type CardFormSelectField = {
title: string,
type: string,
placeholder: string,
options: string[]
};
export type CardFormTextAreaField = {
title: string,
type: string
};
export type CardFormField = CardFormSelectField | CardFormTextAreaField;
overlay(field: CardFormField): ?(SelectOptionsOverlay | CardFormTextAreaOverlay) {
const props = {...};
switch (field.type) {
case "select":
return <SelectOptionsOverlay {...props} />;
case "textarea":
return <CardFormTextAreaOverlay {...props} />;
}
}
The switch statement keeps this all safe. However, Flow doesn't "know about" the switch statement and its safety benefits, so it complains:
Cannot return <SelectOptionsOverlay /> because:
Either React.Element [1] is incompatible with SelectOptionsOverlay [2].
Or React.Element [1] is incompatible with CardFormTextAreaOverlay [2].
[1] is the return statement and [2] is the type declaration for the function's return value: ?(SelectOptionsOverlay | CardFormTextAreaOverlay)
There is also a corresponding error on the second return statement (for CardFormTextAreaOverlay).
I'm actually having trouble understanding what this means, let alone if it's possible to fix it.
On the other hand, which I understand much better, if I remove the type annotation for the return statement, Flow only complains on the return statement with SelectOptionsOverlay, complaining about how the field prop may contain options and placeholder which is not present in CardFormTextAreaField.
That's true, but the switch statement should protect us from having bad props in our actual return. But you can't switch on FlowType can you? Since Flow isn't actual JS?
If it's possible and makes sense for your code, you can specialize the type property for each CardFormField. For example, instead of type: string for CardFormSelectField, you could have type: "select". This way, Flow knows that when it enters the case "select" block, props must be of the type CardFormSelectField. Currently, there is no way for Flow to associate each case statement with a specific type in the union type.
import React from 'react';
type CardFormSelectField = {|
title: string,
type: "select", // NEW!
placeholder: string,
options: string[]
|};
type CardFormTextAreaField = {|
title: string,
type: "textarea", // NEW!
|};
type CardFormField = CardFormSelectField | CardFormTextAreaField;
function SelectOptionsOverlay(props: CardFormSelectField) {
return "SelectOptionsOverlay";
}
function CardFormTextAreaOverlay(props: CardFormTextAreaField) {
return "CardFormTextAreaOverlay";
}
function Overlay(props: CardFormField) {
switch (props.type) {
case "select":
(props: CardFormSelectField);
return <SelectOptionsOverlay {...props} />;
case "textarea":
(props: CardFormTextAreaField);
return <CardFormTextAreaOverlay {...props} />;
}
}
Try Flow
When I create an Input like:
The rendering is ok, but when submiting I get the error:
index.js:1446 Warning: Missing translation for key: "Cannot read property 'name' of null"
export const PatientCreate = props => (
<Create {...props}>
<SimpleForm>
<NumberInput source="bsn" />
<TextInput source="patientname.firstname" />
<BooleanInput source="active" />
</SimpleForm>
</Create>
);
When I remove the nested item patientname.firstname, everythings works correctlty..Anyone idea ?
Using Prisma server data, but the error is in Create, before a put is happening, so I think I has something to do with react-admin..
Model is (Prisma MongoDB):
type Patient {
id: ID! #id
bsn: Int #unique
active: Boolean! #default(value: true)
patientname: Patientname
deceased: DateTime
}
type Patientname #embedded {
firstname: String
}
In React-admin documentaion:
https://marmelab.com/admin-on-rest/Inputs.html#textinput
<TextInput source="author.firstName" />
Tnx I anyone can help me ...
Paul
In your i18n translation files need to respect the nested reference.
React admin tries to translate using property `resources.[resourcename].fields.[fieldname] (see docs) if none is present it uses the string on source prop. If you have nested resources and no translation file with nested reference that error will be presented because can't find nested source.
If you create a translation file like this:
const language = {
resources: {
patient: {
patientname: {
firstname: "firstname"
}
}
}
};
Your problem is fixed. Take note that you need to add this translation resource to react-admin, more information can be found here.