I am now working on the project with react-admin, I want to show a confirm dialog instead of optimistic rendering when user clicks the save button. I set the undoable = false, but it's not working.
<Edit undoable={false} {...props}> </Edit>
Some hack with confirm dialog but it works. Use
handleSubmitWithRedirect
<Toolbar {...props}>
<SaveButton
label=“Approve”
redirect=“edit”
submitOnEnter={false}
icon={<></>}
invalid={false}
handleSubmitWithRedirect={
() => {
if(!window.confirm(‘Are you sure?’))
return false;
return props.handleSubmitWithRedirect();
}
}
/>
</Toolbar>
Related
Purpose:
After the keyboard pops up, a shortcut input box with the specified text appears above it. After clicking, the corresponding text such as"https://" or "www." will be appended to the dialog box.
Problem:
I can't get the value in the input dialog in real time and modify it by functions other than keyboard input.
effort made：
The dialog I'm using is referenced from react-native-dialogs。I can't find a way to pass state into the input area of this dialog.
Also didn't find a way to get the value of the live input.
I thought if there are other dialog components that support getting the value of the modified input, but I didn't find one.
Notice that the Dialog.Input of react-native-dialog is just a TextInput. Thus, we can achieve this as usual using the onChangeText callback and the value prop of TextInput.
Here is a minimal example.
const [visible, setVisible] = useState(false);
const [value, setValue] = useState("");
return (
<View style={styles.container}>
<Button title="Show dialog" onPress={() => setVisible(true)} />
<Dialog.Container visible={visible}>
<Dialog.Title>Please enter the url you want to bookmark</Dialog.Title>
<Dialog.Description>
Message - optional
</Dialog.Description>
<Dialog.Input onChangeText={setValue} value={value} />
<Dialog.Button label="Ok" onPress={() => setVisible(false)} />
<Dialog.Button label="Set Text via function" onPress={() => setValue("Hello World")} />
</Dialog.Container>
</View>
);
The state value will be updated while you are typing. You have access to it while the dialog is open. You can set the value manually by using the setValue function of the value state as usual. This can be done while the dialog is open.
Here is a little snack for showcasing.
I have a TabbedForm with 2 tabs, each tab having a single required() field. When I submit this form and the validation fails, I expect the unfocussed tab(s) to indicate that there is an error with a field within the tab (e.g. with a red underline or red text).
This appears to be working fine in a react-admin demo (https://marmelab.com/react-admin-demo/#/products/126) however even after looking a the source code for this example (https://github.com/marmelab/react-admin/blob/master/examples/demo/src/products/ProductEdit.tsx), I cannot seem to replicate the same functionality in my project.
I have the following code:
const App = () => {
const dataProvider = jsonServerProvider(
"https://jsonplaceholder.typicode.com"
);
return (
<Admin dataProvider={dataProvider}>
<Resource name="users" list={ListGuesser} edit={EditForm} />
</Admin>
);
};
export const EditForm = (props: EditProps) => {
return (
<Edit {...props}>
<TabbedForm>
<FormTab label="Tab 1">
<TextInput source="name" validate={required()} />
</FormTab>
<FormTab label="Tab 2">
<TextInput source="username" validate={required()} />
</FormTab>
</TabbedForm>
</Edit>
);
};
Image showing Tab 2 selected and is valid and there is a validation error on Tab 1, but no highlight on Tab 1 to tell the user that this is the Tab that has the error.
There has been a similar question asked here (Show Tab Form Validation For Inputs Not Direct Children Of <FormTab>) but the resolution does not apply to my problem.
Is there something I'm missing here?
plz check the demo source code: https://github.com/marmelab/react-admin/blob/master/examples/demo/src/products/ProductEdit.tsx, it's using validate function:
<RichTextInput source="description" label="" validate={req} />
and the "req" is defined at line 86:
const req = [required()];
I've encountered same problem, and solve it by using the way (validation function) of demo source code. HTH
The default behaviour of the filters in the list view of react-admin is to filter the list and cause an API call (presumably submit the form) on every change to the filter inputs. I would like an API call only to happen when an input onBlurs or when an explicit 'Search' button is clicked.
I have been playing with the onChange, onBlur functions of the inputs and the Filter, preventDefault, setFilters ... Nothing has come close to working but I include some template code below.
Perhaps I'd like to be able to specify the redux-form touchOnChange and touchOnBlur props but don't see any way of doing that.
How can this be achieved?
import { Filter, TextInput } from react-admin;
import { Button } from '#material-ui/core';
const MyFilter = (props) => {
return ( <Filter {...props} onChange={()=>{}}>
<TextInput label="Search" source="q" alwaysOn onBlur={()=>{}}/>
<Button alwaysOn onClick={(event)=>(props && props.setFilters(props.filterValues))}>SEARCH</Button>
<TextInput source="name"/>
</Filter> )
}
<Dialog.Container visible={this.state.dialogSendEmailVisible}>
<Dialog.Title>Password Recovery</Dialog.Title>
<Dialog.Input label="Email"></Dialog.Input>
<Dialog.Button label="OK" onPress={this.handleSendEmail} />
</Dialog.Container>
I have this simple dialog, this is being used for password recovery purposes. I am not a FE developer, and I am not finding how can I pass the value typed on Email field to handleSendEmail function. Github and npm pages do not have any example.
Github page: https://github.com/mmazzarolo/react-native-dialog
PS: This can be a very react native basic feature, but I am not findindg a way...
Assuming that the Dialog Inputs/Button extend React Native's own - then you can call:
onSubmitEditing and onChangeText
From the docs:
onSubmitEditing
Callback that is called when the text input's submit button is
pressed. Invalid if multiline={true} is specified.
TYPE REQUIRED
function No
And
onChangeText
Callback that is called when the text input's text changes. Changed
text is passed as an argument to the callback handler.
TYPE REQUIRED
function No
It means something like below:
<Dialog.Input label="Email"
onChangeText={email => this.setState({email})}
value={this.state.email}
onSubmitEditing={
(event) => this.doSomethingWithSubmit(event)
}
>
</Dialog.Input>
UPDATE
So I have tested this, and it works as below - side note - I'm using Typescript so just remove the types ( : string) etc:
In Render
return (
<View>
<View>
<Button onPress={this.showDialog}>
<Text>Show Dialog</Text>
</Button>
<Dialog.Container visible={true}>
<Dialog.Title>Password Recovery</Dialog.Title>
<Dialog.Input label="Email" onChangeText={(email : string) => this.handleEmail(email)}
></Dialog.Input>
<Dialog.Button label="OK" onPress={this.handleSendEmail} />
</Dialog.Container>
</View>
</View>
)
handleEmail:
private handleEmail = (email : string) => {
console.log("email");
console.log(email);
}
Result:
Further
As a side note of this project, I noticed when I used Live reload - that the Dialog was never re-rendered rather, rendered on top of the old Dialog. I would take this into consideration. Perhaps it was my environment, but everything else worked fine.
I'm using react-native-keyboard-spacer.
I want to implement the feature of automatically popping up the keyboard.
The documentation says onToggle method is called when when keyboard toggles. Two parameters passed through, keyboardState (boolean, true if keyboard shown) and keyboardSpace (height occupied by keyboard)
Can anyone show me an example of how to accomplish this?
onToggle() is only called after the keyboard is toggled. To achieve the functionality you desire, just use the built in method in TextInput to focus an input when a component finishes mounting:
componentDidMount() {
this._myTextInput.focus();
}
render() {
return (
<TextInput
style={{height: 40}}
ref={component => this._myTextInput = component}
/>
);
}
onToggle get's called when the keyboard is either shown or hidden. If you want to pop up the keyboard without the user clicking anything, then you would need to focus() on a textInput.
handleOnToggle(keyboardState, keyboardSpace) {
// Do whatever you want with keyboardState
}
render() {
return <View>
<KeyboardSpacer onToggle={this.handleOnToggle} />
</View>
}