I have a react-admin based site working nicely.
Though i have an issue with the sidebar menu. If i click one of the items twice it clears all the form inputs. This is a link to an edit form of the resource item (in this case the current user profile):
<MenuItemLink to={"/users/" + user.id} primaryText="Profile" leftIcon={createElement(UserIcon)} onClick={onMenuTap}/>
with resource that looks like:
<Resource name="users" list={UserList} edit={UserEdit} create={UserCreate} icon={UserIcon} />
where UserEdit is
export const UserEdit = (props) => {
<Edit title={<UserEmail />} actions={<UserEditActions />} {...props}>
<SimpleForm validate={validateUserSave}>
<DisabledInput source="email"/>
<TextInput label="First Name" source="firstName" />
<TextInput label="Last Name" source="lastName" />
...
on first click all the inputs are populated from my REST api, but on 2nd tap (menu item selected) - all the form values are cleared...
Any ideas?
It is indeed a bug, I opened an issue on React Admin:
[#2291] Double-click on a Icon from the Menu reset the edition form
[#2322] Fix resetform when navigating to same page
A fix will be published with react-admin#2.3.2!
Thanks for reporting the issue.
Related
In react-admin we have ReferenceManyField. It would be fantastic to have also a component called ReferenceManyInput, with a functionallity very similar to the ArrayInput component (add, remove buttons) but with reference to a resource.
¿Does any one know if they have intention to include it or is there any workaround to achieve this?
The use case is:
I have a form for creating/editing an entity where one of its properties is an array of other related entities. I would like to add and/or remove new elements to that array and when submitting the main entity, it creates/updates/remove the related entity and the main entity.
Maybe I am asking for too much...
Thanks in advance
You're in luck: <ReferenceManyInput> was just published as part of React-admin Enterprise Edition. It works just like ReferenceManyField:
import {
Edit,
SimpleForm,
TextInput,
NumberInput,
ReferenceInput,
SelectInput,
} from 'react-admin';
import { ReferenceManyInput } from '#react-admin/ra-relationships';
const ProductEdit = () => (
<Edit mutationMode="optimistic">
<SimpleForm>
<TextInput source="name" />
<NumberInput source="price" />
<ReferenceInput source="category_id" reference="categories" />
<ReferenceManyInput reference="variants" target="product_id">
<SimpleFormIterator inline>
<TextInput source="sku" />
<SelectInput source="size" choices={sizes} />
<SelectInput source="color" choices={colors} />
<NumberInput source="stock" defaultValue={0} />
</SimpleFormIterator>
</ReferenceManyInput>
</SimpleForm>
</Edit>
);
The result looks like:
Check https://marmelab.com/ra-enterprise/modules/ra-relationships#referencemanyinput for details.
I have a simple form to edit camera
export const CameraEdit: FC<ResourceComponentProps> = (props: ResourceComponentProps) => (
<Edit {...props}>
<SimpleForm>
<TextInput source="name" />
<TextInput source="connection" />
<Button variant="contained" label="Preview"></Button>
</SimpleForm>
</Edit>
);
When I click on Preview button I want to
fetch preview from backend (using GraphQL)
download the image
show it on the right side of form
I don't know how to:
issue additional async query (not related to editing data) as in normal react app I had container and component
download the image (result of query)
add additional div to SimpleForm - I've read it can handle only direct inputs
I have simple react-admin edit form with ReferenceInput. The problem is that ReferenceInput never show progress bar, so it might be confusing for users to see no options while it's loading.
I manually set delay 2 seconds on API calls but ReferenceInput never show loading state.
import React from 'react';
import { ReferenceInput, ReferenceArrayInput, required, SelectArrayInput, SelectInput, SimpleForm, TextInput } from 'react-admin';
const ModelForm = props => (
<SimpleForm {...props}>
<TextInput source="name" validate={[required()]} />
<ReferenceInput reference="goods_types" source="goodsType" validate={[required()]}>
<SelectInput optionText="name" />
</ReferenceInput>
<ReferenceInput reference="manufacturers" source="manufacturer" validate={[required()]}>
<SelectInput optionText="name" />
</ReferenceInput>
<ReferenceArrayInput reference="manufacturers" source="manufacturer" format={v => [v]} validate={[required()]}>
<SelectArrayInput optionText="name" />
</ReferenceArrayInput>
</SimpleForm>
);
export default ModelForm;
Just for test I added ReferenceArrayInput component and it does show loading progress bar.
Is it bug in react-admin? Or am I missing something?
React-admin: 3.11.1
React Admin introduced a timeout with default value of 1000. The loading component only appear after this time. You can override this value by passing a prop to the component.
ref: https://github.com/marmelab/react-admin/blob/ea1f85c73f5be8f12544a0fccf32e4f6bd7452be/packages/ra-ui-materialui/src/layout/LinearProgress.tsx
I have a shopping list but I want to see the detail in the same list. With what element can I make the touch of the arrow to show me the detail.
List
<List {...props} >
<Datagrid rowClick="edit" expand={<ItemsProductos />}>
<TextField source="id" />
<TextField source="numero" label="Numero Comprobante" />
<DateField source="fecha" />
</Datagrid>
</List>
React-admin will pass the current record to the component used as expand prop, so you can write your <ItemProductos> component as follows:
const ItemProductos == ({ record }) => (
<span>{record.fecha}</span>
);
This is documented in the react-admin documentation:
https://marmelab.com/react-admin/List.html#expand
I need to customize Edit component in two ways:
Add custom button, but not to the upper panel (with 'List' and
'Refresh' buttons), but at the bottom of the component (next to the default 'Save'
button).
Turn off redirect on default 'Save' button click (to make it just
save and stay on page).
How do I achieve this?
I came accross this unanswered question. Since I just did something like this very recently myself I will share how I did it here. I am using admin on rest 1.4.0 btw.
So, on your <Edit> component, add this toolbar={<MyCustomToolbar />}. Then create a custom toolbar with your buttons in it. On the button you can use redirect to redirect to another page.
Code example:
import { SaveButton, Toolbar, TextInput, Edit, SimpleForm } from 'admin-on-rest';
const MyToolbar = props =>
<Toolbar {...props} >
<SaveButton label="Save & to dashboard" redirect="/" />
.. more buttons here..
</Toolbar>;
export const EditForm = (props) => (
<Edit title="Edit" {...props}>
<SimpleForm toolbar={<MyToolbar />}>
<TextInput source="company_website" type="url" />
<TextInput source="address_street" />
<TextInput source="address_zip" />
<TextInput source="address_unitnr" />
<TextInput source="address_city" />
</SimpleForm>
</Edit>
);
Hope this helps!