@applica-software-guru/react-admin 1.5.237 → 1.5.240

package/package.json

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

package/src/components/ActionsMenu.tsx

@@ -21,6 +21,11 @@ const StyledMenuPopover = styled(MenuPopover, {
     margin: 0,
     '& .MuiButton-startIcon': {
       marginRight: theme.spacing(0)
+    },
+    [theme.breakpoints.down('sm')]: {
+      '&>.MuiSvgIcon-root, & svg': {
+        marginRight: theme.spacing(0)
+      }
     }
   }
 }));

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

@@ -0,0 +1,84 @@
+import { Button as MuiButton } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import { LocationDescriptor, Button as RaButton, ButtonProps as RaButtonProps, useTranslate } from 'react-admin';
+
+type ButtonProps = RaButtonProps & {
+  /**
+   * Disable icon only in small screens.
+   */
+  disableIconOnly?: boolean;
+};
+
+const PREFIX = 'RaButton';
+function getLinkParams(locationDescriptor?: LocationDescriptor | string) {
+  // eslint-disable-next-line eqeqeq
+  if (locationDescriptor == undefined) {
+    return undefined;
+  }
+
+  if (typeof locationDescriptor === 'string') {
+    return { to: locationDescriptor };
+  }
+
+  const { redirect, replace, state, ...to } = locationDescriptor;
+  return {
+    to,
+    redirect,
+    replace,
+    state
+  };
+}
+const StyledButton = styled(MuiButton, {
+  name: PREFIX,
+  overridesResolver: (_props, styles) => styles.root
+})({
+  '&.MuiButton-sizeSmall': {
+    // fix for icon misalignment on small buttons, see https://github.com/mui/material-ui/pull/30240
+    lineHeight: 1.5
+  }
+});
+
+/**
+ * A button that can be displayed as a floating button on small screens.
+ * @param props The component props.
+ * @returns The component.
+ */
+function Button(props: ButtonProps): JSX.Element {
+  const {
+    disableIconOnly = false,
+    label,
+    children,
+    className,
+    color,
+    size,
+    disabled,
+    alignIcon,
+    to: locationDescriptor,
+    ...rest
+  } = props;
+  const translate = useTranslate();
+  const linkParams = getLinkParams(locationDescriptor);
+
+  if (disableIconOnly) {
+    const translatedLabel = label ? translate(label, { _: label }) : undefined;
+    return (
+      <StyledButton
+        className={className}
+        color={color}
+        size={size}
+        aria-label={translatedLabel}
+        disabled={disabled}
+        startIcon={alignIcon === 'left' && children ? children : undefined}
+        endIcon={alignIcon === 'right' && children ? children : undefined}
+        {...linkParams}
+        {...rest}
+      >
+        {translatedLabel}
+      </StyledButton>
+    );
+  }
+  return <RaButton {...props} />;
+}
+
+export { Button };
+export type { ButtonProps };

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

@@ -1,7 +1,9 @@
+import { Button as RaButton } from './Button';
 import { Toolbar } from '@/components/ra-forms';
-import { Breakpoint, Dialog } from '@mui/material';
-import { CreateBase, UseCreateMutateParams, useResourceContext } from 'ra-core';
-import { Button, CreateButton, CreateButtonProps, CreateProps, SaveButton } from 'ra-ui-materialui';
+import { PlusCircleOutlined } from '@ant-design/icons';
+import { Breakpoint, Button, Dialog } from '@mui/material';
+import { CreateBase, UseCreateMutateParams, useResourceContext, useTranslate } from 'ra-core';
+import { ButtonProps, CreateButton, CreateButtonProps, CreateProps, SaveButton } from 'ra-ui-materialui';
 import React, { Children, PropsWithChildren, useCallback, useState } from 'react';
 import { FieldValues, useFormContext } from 'react-hook-form';
 import { useQueryClient } from 'react-query';
@@ -27,11 +29,14 @@ function setListQueryData(res: any, data: any) {
   return res && res.data ? { ...res, data: updateColl(res.data, data), total: res.total + 1 } : res;
 }
 
-type ResponsiveButtonProps = CreateButtonProps & {
-  label?: string;
-  onClick?: () => void;
-};
+type ResponsiveButtonProps = CreateButtonProps &
+  ButtonProps & {
+    label?: string;
+    onClick?: () => void;
+    disableFloatingButton?: boolean;
+  };
 function ResponsiveButton(props: ResponsiveButtonProps): JSX.Element {
+  const { disableFloatingButton, startIcon = <PlusCircleOutlined />, ...rest } = props;
   const handleClick = useCallback(
     (event: any) => {
       (event as Event).preventDefault();
@@ -40,7 +45,15 @@ function ResponsiveButton(props: ResponsiveButtonProps): JSX.Element {
     },
     [props]
   );
-  return <CreateButton {...props} onClick={handleClick} />;
+  return disableFloatingButton ? (
+    <RaButton {...rest} onClick={handleClick}>
+      {startIcon as any}
+    </RaButton>
+  ) : (
+    <CreateButton {...props} onClick={handleClick}>
+      {startIcon as any}
+    </CreateButton>
+  );
 }
 type CloseDialogFunction = () => void;
 type SubmitFunction = (values: FieldValues, closeDialog: CloseDialogFunction) => void;
@@ -51,6 +64,7 @@ type SubmitButtonProps = {
 function SubmitButton(props: SubmitButtonProps) {
   const { onSubmit, closeDialog } = props;
   const { handleSubmit } = useFormContext();
+  const translate = useTranslate();
   const handleClick = useCallback(
     (event: any) => {
       (event as Event).preventDefault();
@@ -59,7 +73,11 @@ function SubmitButton(props: SubmitButtonProps) {
     },
     [handleSubmit, onSubmit, closeDialog]
   );
-  return <Button onClick={handleClick} label="ra.action.save" color="primary" variant="contained" size="medium" />;
+  return (
+    <Button onClick={handleClick} color="primary" variant="contained" size="medium">
+      {translate('ra.action.save')}
+    </Button>
+  );
 }
 type CreateInDialogButtonProps = PropsWithChildren &
   CreateProps &
@@ -67,6 +85,12 @@ type CreateInDialogButtonProps = PropsWithChildren &
     maxWidth: Breakpoint;
     fullWidth?: boolean;
     fullScreen?: boolean;
+    /**
+     * Indicates whether the floating button should be disabled.
+     * Default is false, this mean that the floating button will be displayed on small screens.
+     * **If you have multiple buttons on the same page, they will be displayed over each other! **
+     */
+    disableFloatingButton?: boolean;
     scroll: 'paper' | 'body' | undefined;
     /**
      * Custom handler for the submit event, in this case you are responsible for closing the dialog.
@@ -89,6 +113,7 @@ function CreateInDialogButton(props: CreateInDialogButtonProps) {
   const { children, maxWidth = 'md', fullWidth = true, fullScreen, onSubmit, mutationOptions, scroll, ...rest } = props;
   const queryClient = useQueryClient();
   const resource = useResourceContext();
+  const translate = useTranslate();
   const Child = Children.only(children);
   const [open, setOpen] = useState(false);
   const handleOpen = useCallback(() => setOpen(true), []);
@@ -116,7 +141,7 @@ function CreateInDialogButton(props: CreateInDialogButtonProps) {
 
   return (
     <>
-      <ResponsiveButton {...rest} onClick={handleOpen} />
+      <ResponsiveButton {...(rest as any)} onClick={handleOpen} />
       <CreateBase
         {...props}
         mutationOptions={{
@@ -131,6 +156,11 @@ function CreateInDialogButton(props: CreateInDialogButtonProps) {
           maxWidth={maxWidth}
           fullWidth={fullWidth}
           fullScreen={fullScreen}
+          sx={{
+            '& .MuiToolbar-root': {
+              position: 'relative !important'
+            }
+          }}
         >
           {React.isValidElement(Child)
             ? React.cloneElement(Child, {
@@ -138,7 +168,9 @@ function CreateInDialogButton(props: CreateInDialogButtonProps) {
                 modal: true,
                 toolbar: (
                   <Toolbar>
-                    <Button variant="text" size="medium" label="ra.action.cancel" onClick={handleClose} />
+                    <Button variant="text" size="medium" onClick={handleClose}>
+                      {translate('ra.action.cancel')}
+                    </Button>
                     {onSubmit ? (
                       <SubmitButton onSubmit={onSubmit!} closeDialog={handleClose} />
                     ) : (

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

@@ -1,8 +1,10 @@
+import { Button } from './Button';
 import { Toolbar } from '@/components/ra-forms';
 import { Breakpoint, Dialog } from '@mui/material';
 import { EditBase, UseUpdateMutateParams, useRecordContext } from 'ra-core';
-import { Button, EditButton, EditProps, SaveButton } from 'ra-ui-materialui';
+import { EditButton, EditProps, SaveButton } from 'ra-ui-materialui';
 import React, { Children, PropsWithChildren, useCallback, useState } from 'react';
+import { FieldValues, useFormContext } from 'react-hook-form';
 
 type ResponsiveButtonProps = {
   label?: string;
@@ -21,6 +23,34 @@ function ResponsiveButton(props: ResponsiveButtonProps): JSX.Element {
   return <EditButton {...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
+      disableIconOnly
+      onClick={handleClick}
+      color="primary"
+      variant="contained"
+      size="medium"
+      label="ra.action.save"
+    />
+  );
+}
 type EditInDialogButtonProps = PropsWithChildren &
   EditProps &
   ResponsiveButtonProps & {
@@ -28,9 +58,25 @@ type EditInDialogButtonProps = PropsWithChildren &
     fullWidth?: boolean;
     fullScreen?: boolean;
     scroll: 'paper' | 'body' | undefined;
+    /**
+     * 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 EditInDialogButton(props: EditInDialogButtonProps): JSX.Element {
-  const { children, maxWidth = 'md', fullWidth = true, fullScreen, mutationOptions, scroll, ...rest } = props;
+  const { children, maxWidth = 'md', fullWidth = true, fullScreen, mutationOptions, onSubmit, scroll, ...rest } = props;
   const [open, setOpen] = useState(false);
   const Child = Children.only(children);
   const handleOpen = useCallback(() => setOpen(true), []);
@@ -63,6 +109,11 @@ function EditInDialogButton(props: EditInDialogButtonProps): JSX.Element {
           maxWidth={maxWidth}
           fullScreen={fullScreen}
           keepMounted={false}
+          sx={{
+            '& .MuiToolbar-root': {
+              position: 'relative !important'
+            }
+          }}
         >
           {React.isValidElement(Child)
             ? React.cloneElement(Child, {
@@ -70,8 +121,18 @@ function EditInDialogButton(props: EditInDialogButtonProps): JSX.Element {
                 modal: true,
                 toolbar: (
                   <Toolbar>
-                    <Button variant="text" size="medium" label="ra.action.cancel" onClick={handleClose} />
-                    <SaveButton type="button" />
+                    <Button
+                      disableIconOnly
+                      variant="text"
+                      size="medium"
+                      onClick={handleClose}
+                      label="ra.action.cancel"
+                    />
+                    {onSubmit ? (
+                      <SubmitButton onSubmit={onSubmit!} closeDialog={handleClose} />
+                    ) : (
+                      <SaveButton type="button" />
+                    )}
                   </Toolbar>
                 )
               })

package/src/components/ra-buttons/index.ts

@@ -1,3 +1,4 @@
+export * from './Button';
 export * from './CreateInDialogButton';
 export * from './EditInDialogButton';
 export * from './ImpersonateUserButton';

package/src/components/ra-forms/Toolbar.tsx

@@ -6,6 +6,7 @@ const StyledToolbar = styled(RaToolbar, { slot: 'Root' })(({ theme }: { theme: a
   ...theme.mixins.toolbar,
   backgroundColor: theme.palette.background.paper,
   justifyContent: 'flex-end',
+  position: 'initial !important',
 
   '& .RaToolbar-defaultToolbar': {
     justifyContent: 'right',
@@ -20,8 +21,7 @@ const StyledToolbar = styled(RaToolbar, { slot: 'Root' })(({ theme }: { theme: a
 }));
 
 function Toolbar(props: ToolbarProps): JSX.Element {
-  // @ts-ignore
-  return <StyledToolbar {...props} />;
+  return <StyledToolbar {...(props as any)} />;
 }
 
 export { Toolbar };

package/src/index.ts

@@ -13,7 +13,6 @@ export {
   ArrayInputContext,
   BooleanField,
   BulkDeleteWithConfirmButton,
-  Button,
   ChipField,
   Confirm,
   CreateButton,

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

@@ -16,7 +16,7 @@ import {
 
 function CategoryAddButton() {
   return (
-    <CreateInDialogButton maxWidth="sm" redirect="list" size="small" variant="text">
+    <CreateInDialogButton maxWidth="sm" redirect="list" size="medium" variant="text">
       <CategoryForm />
     </CreateInDialogButton>
   );
@@ -27,7 +27,7 @@ function CategorySubmitButton() {
     console.log(values);
   }
   return (
-    <CreateInDialogButton onSubmit={handleSubmit} redirect="list" label="Submit">
+    <CreateInDialogButton onSubmit={handleSubmit} redirect="list" label="Submit" size="medium">
       <SimpleForm>
         <TextInput source="description" validate={required()} fullWidth />
       </SimpleForm>
@@ -55,6 +55,9 @@ function CategoryList() {
         <EditInDialogButton>
           <CategoryForm />
         </EditInDialogButton>
+        <EditInDialogButton label="Edit with Submit" onSubmit={console.log}>
+          <CategoryForm />
+        </EditInDialogButton>
       </Datagrid>
     </List>
   );

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

@@ -41,15 +41,15 @@ function RolesInput({ record, source, roles, ...props }) {
   );
 }
 
-function ImageField({ record }) {
+function ImageField(record) {
   return <CoverField source="image" record={record} width={50} height={50} circle />;
 }
 
-function NameField({ record }) {
+function NameField(record) {
   return record.name;
 }
 
-function SecondaryField({ record }) {
+function SecondaryField(record) {
   return record.email;
 }