@applica-software-guru/react-admin 1.5.234 → 1.5.235

package/package.json

@@ -115,5 +115,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.234"
+  "version": "1.5.235"
 }

package/src/components/ra-buttons/CreateInDialogButton.tsx

@@ -1,25 +1,9 @@
-import { useAppConfig } from '@/components/AppStateProvider';
 import { Toolbar } from '@/components/ra-forms';
-import ContentAdd from '@mui/icons-material/Add';
-import { Dialog, Fab, useMediaQuery } from '@mui/material';
-import { SxProps, Theme, styled } from '@mui/material/styles';
-import clsx from 'clsx';
+import { Breakpoint, Dialog } from '@mui/material';
+import { CreateBase, UseCreateMutateParams, useResourceContext } from 'ra-core';
+import { Button, CreateButton, CreateButtonProps, CreateProps, SaveButton } from 'ra-ui-materialui';
 import React, { Children, PropsWithChildren, useCallback, useState } from 'react';
-import {
-  Button,
-  CreateButtonClasses,
-  CreateContextProvider,
-  CreateControllerProps,
-  CreateControllerResult,
-  RedirectionSideEffect,
-  SaveButton,
-  UseCreateMutateParams,
-  useCreateController,
-  useNotify,
-  useRedirect,
-  useResourceContext,
-  useTranslate
-} from 'react-admin';
+import { FieldValues, useFormContext } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
 
 function updateColl(old: any, data: any) {
@@ -43,80 +27,74 @@ function setListQueryData(res: any, data: any) {
   return res && res.data ? { ...res, data: updateColl(res.data, data), total: res.total + 1 } : res;
 }
 
-function CreateInDialogButton({
-  fullWidth = true,
-  maxWidth = 'md',
-  label = 'ra.action.create',
-  record,
-  redirect,
-  scrollToTop = true,
-  className,
-  sx,
-  style,
-  fab = true,
-  onSubmit,
-  onSuccess,
-  onError,
-  ...controllerProps
-}: CreateInDialogButtonProps): JSX.Element {
-  const [open, setOpen] = useState(false);
-  const translate = useTranslate();
-  const resource = useResourceContext();
-  const { openDialog, closeDialog } = useAppConfig();
-  const handleOpen = useCallback(() => openDialog(resource, () => setOpen(true)), [openDialog, resource]);
-  const handleClose = useCallback(() => closeDialog(resource, () => setOpen(false)), [closeDialog, resource]);
-  const isMobile = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
-  const isSmall = fab && isMobile;
-  return (
-    <>
-      {isSmall ? (
-        <StyledFab
-          // @ts-expect-error WARN: Why state prop not exists on styled fab?
-          state={scrollStates[String(scrollToTop)]}
-          color="primary"
-          className={clsx(CreateButtonClasses.floating, className)}
-          aria-label={label ? translate(label) : null}
-          onClick={handleOpen}
-        >
-          <ContentAdd />
-        </StyledFab>
-      ) : (
-        <Button sx={sx} label={label} onClick={handleOpen} style={style}>
-          <ContentAdd />
-        </Button>
-      )}
-      <Dialog open={open} scroll="body" onClose={handleClose} fullWidth={fullWidth} maxWidth={maxWidth}>
-        <CreateInDialogContent
-          {...controllerProps}
-          redirect={redirect}
-          record={record}
-          onClose={handleClose}
-          onSubmit={onSubmit}
-          onSuccess={onSuccess}
-          onError={onError}
-        />
-      </Dialog>
-    </>
+type ResponsiveButtonProps = CreateButtonProps & {
+  label?: string;
+  onClick?: () => void;
+};
+function ResponsiveButton(props: ResponsiveButtonProps): JSX.Element {
+  const handleClick = useCallback(
+    (event: any) => {
+      (event as Event).preventDefault();
+      (event as Event).stopPropagation();
+      props?.onClick?.();
+    },
+    [props]
   );
+  return <CreateButton {...props} onClick={handleClick} />;
 }
+type CloseDialogFunction = () => void;
+type SubmitFunction = (values: FieldValues, closeDialog: CloseDialogFunction) => void;
+type SubmitButtonProps = {
+  onSubmit: SubmitFunction;
+  closeDialog: CloseDialogFunction;
+};
+function SubmitButton(props: SubmitButtonProps) {
+  const { onSubmit, closeDialog } = props;
+  const { handleSubmit } = useFormContext();
+  const handleClick = useCallback(
+    (event: any) => {
+      (event as Event).preventDefault();
+      (event as Event).stopPropagation();
+      handleSubmit((fieldValues) => onSubmit(fieldValues, closeDialog))();
+    },
+    [handleSubmit, onSubmit, closeDialog]
+  );
+  return <Button onClick={handleClick} label="ra.action.save" color="primary" variant="contained" size="medium" />;
+}
+type CreateInDialogButtonProps = PropsWithChildren &
+  CreateProps &
+  ResponsiveButtonProps & {
+    maxWidth: Breakpoint;
+    fullWidth?: boolean;
+    fullScreen?: boolean;
 
-function CreateInDialogContent({
-  onClose,
-  record,
-  children,
-  redirect: _redirect = false,
-  onSubmit,
-  onSuccess,
-  onError,
-  ...props
-}: CreateInDialogContentProps) {
-  const Child = Children.only(children);
+    /**
+     * Custom handler for the submit event, in this case you are responsible for closing the dialog.
+     * @example
+     *
+     * const handleSubmit = (values, closeDialog) => {
+     *  console.log(values); // { title: 'Hello World' }
+     *  closeDialog();
+     * }
+     * <CreateInDialogButton onSubmit={handleSubmit}>
+     *  <SimpleForm>
+     *    <TextInput source="title" />
+     *  </SimpleForm>
+     * </CreateInDialogButton>
+     *
+     */
+    onSubmit?: SubmitFunction;
+  };
+function CreateInDialogButton(props: CreateInDialogButtonProps) {
+  const { children, maxWidth = 'md', fullWidth = true, fullScreen, onSubmit, mutationOptions, ...rest } = props;
   const queryClient = useQueryClient();
   const resource = useResourceContext();
-  const redirect = useRedirect();
-  const notify = useNotify();
+  const Child = Children.only(children);
+  const [open, setOpen] = useState(false);
+  const handleOpen = useCallback(() => setOpen(true), []);
+  const handleClose = useCallback(() => setOpen(false), []);
   const handleSuccess = useCallback(
-    (data: any, variables: UseCreateMutateParams<any>, context: unknown) => {
+    (data: any, params: UseCreateMutateParams<any>, context: unknown) => {
       const now = Date.now();
       const updatedAt = now;
 
@@ -130,139 +108,44 @@ function CreateInDialogContent({
       queryClient.setQueriesData([resource, 'getManyReference'], (res: any) => setManyReferenceQueryData(res, data), {
         updatedAt
       });
-
-      onClose();
-      notify('ra.notification.created');
-      if (_redirect !== undefined) {
-        redirect(_redirect as RedirectionSideEffect, resource, data.id, data);
-      }
-      if (onSuccess) {
-        onSuccess(data, onClose);
-      }
-      if (props?.mutationOptions?.onSuccess) {
-        props.mutationOptions.onSuccess(data, variables, { ...(context as any), onClose });
-      }
-    },
-    [onClose, onSuccess, queryClient, resource, notify, redirect, _redirect, props?.mutationOptions]
-  );
-  const { save, ...createProps } = useCreateController({
-    ...props,
-    mutationOptions: {
-      ...props?.mutationOptions,
-      onSuccess: handleSuccess,
-      onError: onError
-    }
-  });
-  const handleSave = useCallback(
-    (record: any) => {
-      if (onSubmit) {
-        onSubmit(record, onClose);
-      } else if (save) {
-        save(record);
-      }
+      handleClose();
+      props?.mutationOptions?.onSuccess?.(data, params, context);
     },
-    [onSubmit, save, onClose]
+    [handleClose, props.mutationOptions, queryClient, resource]
   );
+
   return (
-    <CreateContextProvider
-      value={
-        {
-          record: record,
-          save: handleSave,
-          saving: createProps?.saving,
-          redirect: _redirect
-        } as CreateControllerResult
-      }
-    >
-      {React.isValidElement(Child)
-        ? React.cloneElement(Child, {
-            ...Child.props,
-            modal: true,
-            toolbar: (
-              <Toolbar>
-                <Button
-                  variant="text"
-                  size="medium"
-                  label="ra.action.cancel"
-                  onClick={onClose}
-                  disabled={createProps?.saving}
-                />
-                <SaveButton type="button" disabled={createProps?.saving} />
-              </Toolbar>
-            )
-          })
-        : null}
-    </CreateContextProvider>
+    <>
+      <ResponsiveButton {...rest} onClick={handleOpen} />
+      <CreateBase
+        {...props}
+        mutationOptions={{
+          ...mutationOptions,
+          onSuccess: handleSuccess
+        }}
+      >
+        <Dialog open={open} onClose={handleClose} maxWidth={maxWidth} fullWidth={fullWidth} fullScreen={fullScreen}>
+          {React.isValidElement(Child)
+            ? React.cloneElement(Child, {
+                ...Child.props,
+                modal: true,
+                toolbar: (
+                  <Toolbar>
+                    <Button variant="text" size="medium" label="ra.action.cancel" onClick={handleClose} />
+                    {onSubmit ? (
+                      <SubmitButton onSubmit={onSubmit!} closeDialog={handleClose} />
+                    ) : (
+                      <SaveButton type="button" />
+                    )}
+                  </Toolbar>
+                )
+              })
+            : null}
+        </Dialog>
+      </CreateBase>
+    </>
   );
 }
 
-const scrollStates = {
-  true: { _scrollToTop: true },
-  false: {}
-} as any;
-
-const StyledFab = styled(Fab, { overridesResolver: (_props, styles) => styles.root })(({ theme }) => ({
-  [`&.${CreateButtonClasses.floating}`]: {
-    color: theme.palette.getContrastText(theme.palette.primary.main),
-    margin: 0,
-    top: 'auto',
-    right: 20,
-    bottom: 60,
-    left: 'auto',
-    position: 'fixed',
-    zIndex: 1000
-  }
-}));
-
-type CreateInDialogButtonProps = CreateControllerProps &
-  PropsWithChildren<{
-    fullWidth?: boolean;
-    maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false;
-    label?: string;
-    record?: any;
-    redirect?: RedirectionSideEffect;
-    scrollToTop?: boolean;
-    className?: string;
-    sx?: SxProps;
-    style?: React.CSSProperties;
-    /**
-     * If set to false, the button will always render as a regular button, regardless of the screen size.
-     */
-    fab: boolean;
-    /**
-     * @deprecated Use mutationOptions.onSubmit instead
-     */
-    onSubmit?: (record: any, close: () => void) => void;
-    /**
-     * @deprecated Use mutationOptions.onSuccess instead
-     */
-    onSuccess?: (data: any) => void;
-    /**
-     *
-     * @deprecated Use mutationOptions.onError instead
-     */
-    onError?: (error: any) => void;
-  }>;
-
-type CreateInDialogContentProps = CreateControllerProps &
-  PropsWithChildren<{
-    onClose: () => void;
-    record?: any;
-    redirect: RedirectionSideEffect | boolean | undefined;
-    /**
-     * You can use it to handle the form submission yourself.
-     * Good luck with that.
-     */
-    onSubmit?: (record: any, close: () => void) => void;
-    /**
-     * @deprecated Use mutationOptions.onSuccess instead
-     */
-    onSuccess?: (data: any, close: () => void) => void;
-    /**
-     * @deprecated Use mutationOptions.onError instead
-     */
-    onError?: (error: any) => void;
-  }>;
-
 export { CreateInDialogButton };
 export type { CreateInDialogButtonProps };

package/src/components/ra-buttons/EditInDialogButton.tsx

@@ -1,119 +1,84 @@
-import { useAppConfig } from '@/components/AppStateProvider';
 import { Toolbar } from '@/components/ra-forms';
-import { Edit } from '@mui/icons-material';
 import { Breakpoint, Dialog } from '@mui/material';
+import { EditBase, UseUpdateMutateParams, useRecordContext } from 'ra-core';
+import { Button, EditButton, EditProps, SaveButton } from 'ra-ui-materialui';
 import React, { Children, PropsWithChildren, useCallback, useState } from 'react';
-import {
-  Button,
-  EditContextProvider,
-  EditControllerProps,
-  SaveButton,
-  useEditController,
-  useGetOne,
-  useNotify,
-  useRecordContext,
-  useResourceContext
-} from 'react-admin';
 
-type EditInDialogContentProps = EditControllerProps &
-  PropsWithChildren<{
-    onClose: () => void;
-  }>;
-function EditInDialogContent({ onClose, children, mutationMode = 'pessimistic', ...props }: EditInDialogContentProps) {
-  const Child = Children.only(children);
-  const notify = useNotify();
-  const record = useRecordContext();
-  const resource = useResourceContext();
-  const { id } = record;
-  const { isLoading, data } = useGetOne(resource, { id });
-  const { onSuccess } = props;
+type ResponsiveButtonProps = {
+  label?: string;
+  onClick: () => void;
+};
 
-  const handleSuccess = useCallback(
-    (...args: any) => {
-      notify('ra.notification.updated', {
-        type: 'info',
-        messageArgs: {
-          smart_count: 1
-        }
-      });
-      onClose();
-      if (onSuccess) {
-        onSuccess(...args);
-      }
+function ResponsiveButton(props: ResponsiveButtonProps): JSX.Element {
+  const handleClick = useCallback(
+    (event: any) => {
+      (event as Event).preventDefault();
+      (event as Event).stopPropagation();
+      props?.onClick?.();
     },
-    [onClose, notify, onSuccess]
-  );
-  const { save, saving } = useEditController({
-    ...props,
-    resource,
-    id,
-    mutationMode,
-    mutationOptions: {
-      ...props?.mutationOptions,
-      onSuccess: handleSuccess
-    }
-  });
-
-  return (
-    <EditContextProvider
-      // @ts-ignore
-      value={{
-        record: data,
-        isLoading,
-        save: save,
-        saving: saving
-      }}
-    >
-      {React.isValidElement(Child)
-        ? React.cloneElement(Child, {
-            ...Child.props,
-            modal: true,
-            toolbar: (
-              <Toolbar>
-                <Button variant="text" size="medium" label="ra.action.cancel" onClick={onClose} />
-                <SaveButton type="button" />
-              </Toolbar>
-            )
-          })
-        : null}
-    </EditContextProvider>
+    [props]
   );
+  return <EditButton {...props} onClick={handleClick} />;
 }
 
-function EditInDialogButton({
-  fullWidth = true,
-  maxWidth = 'md',
-  label = 'ra.action.edit',
-  style,
-  children,
-  ...props
-}: EditInDialogButtonProps): JSX.Element {
+type EditInDialogButtonProps = PropsWithChildren &
+  EditProps &
+  ResponsiveButtonProps & {
+    maxWidth: Breakpoint;
+    fullWidth?: boolean;
+    fullScreen?: boolean;
+  };
+function EditInDialogButton(props: EditInDialogButtonProps): JSX.Element {
+  const { children, maxWidth = 'md', fullWidth = true, fullScreen, mutationOptions, ...rest } = props;
   const [open, setOpen] = useState(false);
-  const { openDialog, closeDialog } = useAppConfig();
-  const resource = useResourceContext();
-  const handleOpen = useCallback(() => openDialog(resource, () => setOpen(true)), [openDialog, resource]);
-  const handleClose = useCallback(() => closeDialog(resource, () => setOpen(false)), [closeDialog, resource]);
+  const Child = Children.only(children);
+  const handleOpen = useCallback(() => setOpen(true), []);
+  const handleClose = useCallback(() => setOpen(false), []);
+  const handleSuccess = useCallback(
+    (data: any, params: UseUpdateMutateParams<any>, context: unknown) => {
+      handleClose();
+      props?.mutationOptions?.onSuccess?.(data, params, context);
+    },
+    [handleClose, props.mutationOptions]
+  );
+  const record = useRecordContext();
   return (
     <>
-      <Button label={label} onClick={handleOpen} style={style}>
-        <Edit />
-      </Button>
-      <Dialog open={open} scroll="body" onClose={handleClose} fullWidth={fullWidth} maxWidth={maxWidth}>
-        <EditInDialogContent {...props} onClose={handleClose}>
-          {children}
-        </EditInDialogContent>
-      </Dialog>
+      <ResponsiveButton {...rest} onClick={handleOpen} />
+      <EditBase
+        {...props}
+        id={record.id}
+        mutationMode="pessimistic"
+        mutationOptions={{
+          ...mutationOptions,
+          onSuccess: handleSuccess
+        }}
+      >
+        <Dialog
+          open={open}
+          onClose={handleClose}
+          fullWidth={fullWidth}
+          maxWidth={maxWidth}
+          fullScreen={fullScreen}
+          keepMounted={false}
+        >
+          {React.isValidElement(Child)
+            ? React.cloneElement(Child, {
+                ...Child.props,
+                modal: true,
+                toolbar: (
+                  <Toolbar>
+                    <Button variant="text" size="medium" label="ra.action.cancel" onClick={handleClose} />
+                    <SaveButton type="button" />
+                  </Toolbar>
+                )
+              })
+            : null}
+        </Dialog>
+      </EditBase>
     </>
   );
 }
 
-type EditInDialogButtonProps = EditControllerProps &
-  PropsWithChildren<{
-    fullWidth?: boolean;
-    maxWidth?: false | Breakpoint | undefined;
-    label?: string;
-    style?: React.CSSProperties;
-  }>;
-
 export { EditInDialogButton };
 export type { EditInDialogButtonProps };

package/src/playground/App.jsx

@@ -45,6 +45,7 @@ function App() {
       <Resource name="entities/user" {...entities.user} />
       <Resource name="entities/i18n-message" {...entities.i18nMessage} />
       <Resource name="entities/device" {...entities.device} />
+      <Resource name="entities/category" {...entities.category} />
       <CustomRoutes noLayout>
         <Route path="/register" element={<RegisterPage name={APP_NAME} copy="Test" version={build.version} />} />
         <Route path="/recover" element={<RecoverPage name={APP_NAME} copy="Test" version={build.version} />} />

package/src/playground/components/ra-forms/CategoryForm.jsx

@@ -0,0 +1,12 @@
+import { BooleanInput, SimpleForm, TextInput } from '@/';
+
+function CategoryForm(props) {
+  return (
+    <SimpleForm {...props}>
+      <TextInput source="description" fullWidth />
+      <BooleanInput source="active" />
+    </SimpleForm>
+  );
+}
+
+export { CategoryForm };

package/src/playground/components/ra-forms/index.jsx

@@ -1,3 +1,4 @@
+export * from './CategoryForm';
 export * from './DeviceForm';
 export * from './I18nMessageForm';
 export * from './TestModelForm';

package/src/playground/components/ra-lists/CategoryList.jsx

@@ -0,0 +1,62 @@
+import { CategoryForm } from '@/playground/components';
+import {
+  ActionsMenu,
+  CreateInDialogButton,
+  Datagrid,
+  EditInDialogButton,
+  Empty,
+  FilterButton,
+  List,
+  SearchInput,
+  SimpleForm,
+  TextField,
+  TextInput,
+  required
+} from '@applica-software-guru/react-admin';
+
+function CategoryAddButton() {
+  return (
+    <CreateInDialogButton maxWidth="sm" redirect="list" size="small" variant="text">
+      <CategoryForm />
+    </CreateInDialogButton>
+  );
+}
+
+function CategorySubmitButton() {
+  function handleSubmit(values) {
+    console.log(values);
+  }
+  return (
+    <CreateInDialogButton onSubmit={handleSubmit} redirect="list" label="Submit">
+      <SimpleForm>
+        <TextInput source="description" validate={required()} fullWidth />
+      </SimpleForm>
+    </CreateInDialogButton>
+  );
+}
+
+function CategoryList() {
+  return (
+    <List
+      filters={[<SearchInput key="keyword" source="keyword" alwaysOn />]}
+      actions={
+        <>
+          <FilterButton />
+          <ActionsMenu>
+            <CategoryAddButton />
+            <CategorySubmitButton />
+          </ActionsMenu>
+        </>
+      }
+      empty={<Empty actions={<CategoryAddButton />} />}
+    >
+      <Datagrid>
+        <TextField source="description" />
+        <EditInDialogButton>
+          <CategoryForm />
+        </EditInDialogButton>
+      </Datagrid>
+    </List>
+  );
+}
+export { CategoryList };

package/src/playground/components/ra-lists/index.jsx

@@ -1,3 +1,4 @@
+export * from './CategoryList';
 export * from './DeviceList';
 export * from './I18nMessageList';
 export * from './UserList';

package/src/playground/entities/category.jsx

@@ -0,0 +1,26 @@
+import { Create, Edit } from '@/';
+import { CategoryForm, CategoryList } from '@/playground/components';
+
+function CategoryCreate() {
+  return (
+    <Create>
+      <CategoryForm />
+    </Create>
+  );
+}
+
+function CategoryEdit() {
+  return (
+    <Edit>
+      <CategoryForm />
+    </Edit>
+  );
+}
+export const category = {
+  list: CategoryList,
+  edit: CategoryEdit,
+  create: CategoryCreate,
+  options: {
+    group: 'control-panel'
+  }
+};

package/src/playground/entities/index.jsx

@@ -1,3 +1,4 @@
+export * from './category';
 export * from './device';
 export * from './i18n-message';
 export * from './notification';