@applica-software-guru/react-admin 1.5.294 → 1.5.295

package/package.json

@@ -106,5 +106,5 @@
   "type": "module",
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
-  "version": "1.5.294"
+  "version": "1.5.295"
 }

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

@@ -1,6 +1,7 @@
 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';
+import { Button as RaButton, ButtonProps as RaButtonProps, useTranslate } from 'react-admin';
+import { Path } from 'react-router';
 
 type ButtonProps = RaButtonProps & {
   /**
@@ -80,5 +81,11 @@ function Button(props: ButtonProps): JSX.Element {
   return <RaButton {...props} />;
 }
 
+type LocationDescriptor = Partial<Path> & {
+  redirect?: boolean;
+  state?: any;
+  replace?: boolean;
+};
+
 export { Button };
-export type { ButtonProps };
+export type { ButtonProps, LocationDescriptor };

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

@@ -0,0 +1,169 @@
+import * as React from 'react';
+import ContentAdd from '@mui/icons-material/Add';
+import { Fab, Theme, useMediaQuery } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import clsx from 'clsx';
+import isEqual from 'lodash/isEqual';
+import merge from 'lodash/merge';
+import PropTypes from 'prop-types';
+import { useCreatePath, useResourceContext, useTranslate } from 'ra-core';
+import { Link, To } from 'react-router-dom';
+
+import { Button, ButtonProps, LocationDescriptor } from './Button';
+
+/**
+ * Opens the Create view of a given resource
+ *
+ * Renders as a regular button on desktop, and a Floating Action Button
+ * on mobile.
+ *
+ * @example // basic usage
+ * import { CreateButton } from 'react-admin';
+ *
+ * const CommentCreateButton = () => (
+ *     <CreateButton label="Create comment" />
+ * );
+ */
+function CreateBtn(props: CreateButtonProps) {
+  const {
+    className,
+    icon = defaultIcon,
+    label = 'ra.action.create',
+    resource: resourceProp,
+    scrollToTop = true,
+    variant,
+    to: locationDescriptor,
+    state: initialState = {},
+    disableFloatingButton = false,
+    ...rest
+  } = props;
+
+  const resource = useResourceContext(props);
+  const createPath = useCreatePath();
+  const translate = useTranslate();
+  const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
+  const state = merge({}, scrollStates.get(String(scrollToTop)), initialState);
+  // Duplicated behaviour of Button component (legacy use) which will be removed in v5.
+  const linkParams = getLinkParams(locationDescriptor);
+
+  return !disableFloatingButton && isSmall ? (
+    <StyledFab
+      component={Link}
+      to={createPath({ resource, type: 'create' })}
+      state={state}
+      // @ts-ignore FabProps ships its own runtime palette `FabPropsColorOverrides` provoking an overlap error with `ButtonProps`
+      color="primary"
+      className={clsx(CreateButtonClasses.floating, className)}
+      aria-label={label ? translate(label) : 'ra.action.create'}
+      {...rest}
+      {...linkParams}
+    >
+      {icon}
+    </StyledFab>
+  ) : (
+    <StyledButton
+      component={Link}
+      to={createPath({ resource, type: 'create' })}
+      state={state}
+      className={clsx(CreateButtonClasses.root, className)}
+      label={label}
+      variant={variant}
+      {...(rest as any)}
+      {...linkParams}
+    >
+      {icon}
+    </StyledButton>
+  );
+}
+
+const defaultIcon = <ContentAdd />;
+
+// avoids using useMemo to get a constant value for the link state
+const scrollStates = new Map([
+  ['true', { _scrollToTop: true }],
+  ['false', {}]
+]);
+
+interface Props {
+  resource?: string;
+  icon?: React.ReactElement;
+  scrollToTop?: boolean;
+  to?: LocationDescriptor | To;
+  state?: any;
+}
+
+interface DisableFloatingButtonProps {
+  disableFloatingButton?: boolean;
+}
+
+type CreateButtonProps = DisableFloatingButtonProps & Props & Omit<ButtonProps, 'to'>;
+
+CreateBtn.propTypes = {
+  resource: PropTypes.string,
+  className: PropTypes.string,
+  icon: PropTypes.element,
+  label: PropTypes.string
+};
+
+const PREFIX = 'RaCreateButton';
+
+const CreateButtonClasses = {
+  root: `${PREFIX}-root`,
+  floating: `${PREFIX}-floating`
+};
+
+const StyledFab = styled(Fab, {
+  name: PREFIX,
+  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
+  }
+})) as unknown as typeof Fab;
+
+const StyledButton = styled(Button, {
+  name: PREFIX,
+  overridesResolver: (_props, styles) => styles.root
+})({});
+
+function arePropsEqual(prevProps: CreateButtonProps, nextProps: CreateButtonProps) {
+  return (
+    prevProps.resource === nextProps.resource &&
+    prevProps.label === nextProps.label &&
+    prevProps.translate === nextProps.translate &&
+    prevProps.disabled === nextProps.disabled &&
+    isEqual(prevProps.to, nextProps.to) &&
+    isEqual(prevProps.state, nextProps.state)
+  );
+}
+
+const CreateButton = React.memo(CreateBtn, arePropsEqual);
+
+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
+  };
+}
+
+export { CreateButton, CreateButtonClasses };
+export type { CreateButtonProps };

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

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

package/src/components/ra-forms/TableForm/{CreateButton.tsx → TableCreateButton.tsx}

@@ -13,7 +13,7 @@ interface CreateButtonProps {
   children: React.ReactNode;
 }
 
-function CreateButton(props: CreateButtonProps): JSX.Element {
+function TableCreateButton(props: CreateButtonProps): JSX.Element {
   const { label, disableAdd, inset, source, template } = props;
   const [open, setOpen] = React.useState(false);
   const { append } = useArrayInput();
@@ -55,4 +55,4 @@ function CreateButton(props: CreateButtonProps): JSX.Element {
   );
 }
 
-export { CreateButton };
+export { TableCreateButton };

package/src/components/ra-forms/TableForm/TableFormIterator.tsx

@@ -1,6 +1,6 @@
 import { Field } from './Field';
 import { AddTableRow } from './AddTableRow';
-import { CreateButton } from './CreateButton';
+import { TableCreateButton } from './TableCreateButton';
 import { EditButton } from './EditButton';
 import { ActionsMenu } from '@/components/ActionsMenu';
 import { TableFormIteratorContext } from '@/components/ra-forms/TableForm/TableFormIteratorContext';
@@ -167,7 +167,7 @@ function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | nul
           disableAdd,
           template,
           onClick:
-            addButton?.type !== CreateButton
+            addButton?.type !== TableCreateButton
               ? handleAddButtonClick((props?.addButton as any)?.props?.onClick)
               : undefined,
           inset
@@ -349,7 +349,7 @@ type ITableForm = typeof TableFormIterator & {
    *     </Grid>
    *   </Grid>
    */
-  CreateButton: typeof CreateButton;
+  CreateButton: typeof TableCreateButton;
 
   /**
    * TableFormiterator allows a child EditButton which will render an edit button in the ActionsMenu of each row.
@@ -407,7 +407,7 @@ type ITableForm = typeof TableFormIterator & {
 
 const DefaultTableForm = TableFormIterator as ITableForm;
 
-DefaultTableForm.CreateButton = CreateButton;
+DefaultTableForm.CreateButton = TableCreateButton;
 DefaultTableForm.EditButton = EditButton;
 DefaultTableForm.Field = Field;
 

package/src/components/ra-forms/TableForm/index.ts

@@ -1,7 +1,7 @@
 export * from './AddTableRow';
-export * from './CreateButton';
 export * from './EditButton';
 export * from './Field';
+export * from './TableCreateButton';
 export * from './TableFormIterator';
 export * from './TableFormIteratorContext';
 export * from './TableFormIteratorItem';

package/src/components/ra-lists/List.tsx

@@ -122,6 +122,9 @@ const StyledList = styled(RaList, { slot: 'root' })(({ theme }) => ({
       minHeight: 80,
       alignItems: 'center',
       padding: theme.spacing(2.5),
+      [theme.breakpoints.down('sm')]: {
+        flexDirection: 'row'
+      },
       '& form': {
         alignItems: 'center',
         minHeight: 'auto',

package/src/index.ts

@@ -15,7 +15,6 @@ export {
   BulkDeleteWithConfirmButton,
   ChipField,
   Confirm,
-  CreateButton,
   CreateContextProvider,
   CustomRoutes,
   DeleteWithConfirmButton,

package/dist/components/ra-forms/TableForm/CreateButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CreateButton.d.ts","sourceRoot":"","sources":["../../../../../src/components/ra-forms/TableForm/CreateButton.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAG1B,UAAU,iBAAiB;IACzB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,GAAG,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,GAAG,GAAG,CAAC,OAAO,CAwC3D;AAED,OAAO,EAAE,YAAY,EAAE,CAAC"}