React Admin Dialog Crud

This package contains three components, each respectively designed to display, create, and edit content within a dialog.

Install

yarn install @dslab/ra-dialog-crud

React Admin Show in Dialog Button

This React Admin component renders a button opening a <Show> view inside a dialog, hence allowing to show a record without leaving the current view.

Usage

import { ShowInDialogButton } from '@dslab/ra-dialog-crud';
import {
    Datagrid,
    EmailField,
    List,
    SimpleShowLayout,
    TextField,
} from 'react-admin';

export const UserList = () => (
    <List>
        <Datagrid>
            <TextField source="first_name" />
            <TextField source="last_name" />
            <EmailField source="email" />

            <ShowInDialogButton>
                <SimpleShowLayout>
                    <TextField source="first_name" />
                    <TextField source="last_name" />
                    <TextField source="email" />
                </SimpleShowLayout>
            </ShowInDialogButton>
        </Datagrid>
    </List>
);

Props

The component accepts the following props:

| Prop | Required | Type | Default | Description | | ----------------------- | -------- | -------------------------- | ------- | -------------------------------------------------------------------------- | | children | Required | ReactNode | | The content of the dialog | | title | Optional | string or ReactElement | | The title of the dialog | | maxWidth | Optional | string | sm | The max width of the dialog | | fullWidth | Optional | boolean | false | If true, the dialog stretches to the full width of the screen | | resource | Optional | string | | The resource name | | label | Optional | string | | Allows to override the default button label. I18N is supported | | id | Optional | string or number | | The record id. If not provided, it will be deduced from the record context | | queryOptions | Optional | object | | Options for the dataProvider.getOne() call | | disableAuthentication | Optional | boolean | | Set to true to disable the authentication check | | emptyWhileLoading | Optional | boolean | | Set to true to show a loading indicator while the list is loading | | sx | Optional | object | | Override the styles applied to the dialog component |

React Admin Create in Dialog Button

This React Admin component offers a way to open a <Create> view inside a dialog, hence allowing to create a new record without leaving the current view.

Usage

import { CreateInDialogButton } from '@dslab/ra-dialog-crud';
import {
    Datagrid,
    EmailField,
    List,
    SimpleForm,
    TextField,
    TextInput,
    TopToolbar,
} from 'react-admin';

const ListActions = () => (
    <TopToolbar>
        <CreateInDialogButton>
            <SimpleForm>
                <TextInput source="first_name" />
                <TextInput source="last_name" />
                <TextInput source="email" />
            </SimpleForm>
        </CreateInDialogButton>
    </TopToolbar>
);

export const UserList = () => (
    <List actions={<ListActions />}>
        <Datagrid>
            <TextField source="first_name" />
            <TextField source="last_name" />
            <EmailField source="email" />
        </Datagrid>
    </List>
);

Props

The component accepts the following props:

| Prop | Required | Type | Default | Description | | ----------------------- | -------- | -------------------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- | | children | Required | ReactNode | | The content of the dialog | | title | Optional | string or ReactElement | | The title of the dialog | | maxWidth | Optional | string | sm | The max width of the dialog | | fullWidth | Optional | boolean | false | If true, the dialog stretches to the full width of the screen | | resource | Optional | string | | The resource name | | label | Optional | string | | Allows to override the default button label. I18N is supported | | mutationOptions | Optional | object | | Options for the dataProvider.create() call | | disableAuthentication | Optional | boolean | | Set to true to disable the authentication check | | transform | Optional | function | | Allows to transform a record after the user has submitted the form but before the record is passed to dataProvider.create() | | record | Optional | object | | Allows to initialize the form with non-empty values | | sx | Optional | object | | Override the styles applied to the dialog component |

React Admin Edit in Dialog Button

This React Admin component renders a button opening an <Edit> view inside a dialog, hence allowing to edit a record without leaving the current view.

Usage

import { EditInDialogButton } from '@dslab/ra-dialog-crud';
import {
    Datagrid,
    EmailField,
    List,
    SimpleForm,
    TextField,
    TextInput,
} from 'react-admin';

export const UserList = () => (
    <List>
        <Datagrid>
            <TextField source="first_name" />
            <TextField source="last_name" />
            <EmailField source="email" />

            <EditInDialogButton>
                <SimpleForm>
                    <TextInput source="first_name" />
                    <TextInput source="last_name" />
                    <TextInput source="email" />
                </SimpleForm>
            </EditInDialogButton>
        </Datagrid>
    </List>
);

Props

The component accepts the following props:

| Prop | Required | Type | Default | Description | | ----------------------- | -------- | -------------------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | children | Required | ReactNode | | The content of the dialog | | title | Optional | string or ReactElement | | The title of the dialog | | maxWidth | Optional | string | sm | The max width of the dialog | | fullWidth | Optional | boolean | false | If true, the dialog stretches to the full width of the screen | | resource | Optional | string | | The resource name | | label | Optional | string | | Allows to override the default button label. I18N is supported | | queryOptions | Optional | object | | Options for the dataProvider.getOne() call | | mutationOptions | Optional | object | | Options for the dataProvider.update() call | | mutationMode | Optional | string | undoable | The mode that determines when the side effects (redirection, notifications, etc.) are executed. React-admin offers three modes for mutations: pessimistic, optimistic and undoable | | id | Optional | string or number | | The record id. If not provided, it will be deduced from the record context | | disableAuthentication | Optional | boolean | | Set to true to disable the authentication check | | transform | Optional | function | | Allows to transform a record after the user has submitted the form but before the record is passed to dataProvider.update() | | emptyWhileLoading | Optional | boolean | | Set to true to show a loading indicator while the list is loading | | sx | Optional | object | | Override the styles applied to the dialog component |

Author

SmartCommunityLab

• Website: http://www.smartcommunitylab.it/
• Github: @smartcommunitylab

Show your support

Give a ⭐️ if this project helped you!

License

Copyright © 2023 SmartCommunityLab. This project is MIT licensed.