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

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.296"
 }

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

@@ -2,7 +2,7 @@ import { MainCard } from '@/components/MainCard';
 import { ListView } from '@/components/ra-lists/ListView';
 import { styled } from '@mui/system';
 import { ListBase, RaRecord } from 'ra-core';
-import { ReactElement } from 'react';
+import React, { ReactElement } from 'react';
 import { ListProps } from 'react-admin';
 import { Pagination } from '@/components/Pagination/Pagination';
 
@@ -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',
@@ -190,10 +193,12 @@ const StyledList = styled(RaList, { slot: 'root' })(({ theme }) => ({
 }));
 
 function List(props: ListProps): ReactElement {
+  const Wrapper = props.aside ? React.Fragment : MainCard;
+
   return (
-    <MainCard content={false}>
+    <Wrapper {...(!props.aside && { content: false })}>
       <StyledList {...props} pagination={<Pagination />} />
-    </MainCard>
+    </Wrapper>
   );
 }
 

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

@@ -1,14 +1,20 @@
 /* eslint-disable filenames/match-regex */
 import { Error } from '@/components/Layout/Error';
-import { Card } from '@mui/material';
-import { styled } from '@mui/material/styles';
+import { Card, CardContent } from '@mui/material';
+import { styled, useTheme } from '@mui/material/styles';
 import { SxProps } from '@mui/system';
 import clsx from 'clsx';
 import { RaRecord, useListContext } from 'ra-core';
 import { ElementType, ReactElement, ReactNode, cloneElement } from 'react';
 import * as React from 'react';
-import { ListActions as DefaultActions, Pagination as DefaultPagination, Empty, ListToolbar, Title } from 'react-admin';
-
+import {
+  ListActions as DefaultActions,
+  Pagination as DefaultPagination,
+  Empty,
+  ListToolbar,
+  SavedQueriesListClasses,
+  Title
+} from 'react-admin';
 const defaultActions = <DefaultActions />;
 const defaultPagination = <DefaultPagination />;
 const defaultEmpty = <Empty />;
@@ -31,6 +37,8 @@ function ListView<RecordType extends RaRecord = any>(props: ListViewProps): Reac
     ...rest
   } = props;
   const { defaultTitle, data, error, isLoading, filterValues, resource } = useListContext<RecordType>(props);
+  const theme = useTheme() as any;
+  const isAsideValidElement = React.isValidElement(aside);
 
   if (!children || (!data && isLoading && emptyWhileLoading)) {
     return null;
@@ -38,7 +46,19 @@ function ListView<RecordType extends RaRecord = any>(props: ListViewProps): Reac
 
   function renderList() {
     return (
-      <div className={ListClasses.main}>
+      <div
+        className={ListClasses.main}
+        style={{
+          border: isAsideValidElement ? '1px solid' : 'none',
+          borderRadius: isAsideValidElement ? 4 : 0,
+          borderColor: isAsideValidElement
+            ? theme.palette.mode === 'dark'
+              ? theme.palette.divider
+              : theme.palette.grey.A800
+            : 'transparent',
+          backgroundColor: isAsideValidElement ? theme.palette.background.paper : 'transparent'
+        }}
+      >
         {filters || actions ? (
           <ListToolbar className={ListClasses.actions} filters={filters} actions={actions} hasCreate={hasCreate} />
         ) : null}
@@ -77,17 +97,46 @@ function ListView<RecordType extends RaRecord = any>(props: ListViewProps): Reac
     <Root className={clsx('list-page', className)} {...rest}>
       <Title title={title} defaultTitle={defaultTitle} preferenceKey={`${resource}.list.title`} />
       {shouldRenderEmptyPage ? renderEmpty() : renderList()}
-      {aside}
+      {isAsideValidElement ? <AsideCard aside={aside} /> : null}
     </Root>
   );
 }
 
+interface AsideCardProps {
+  aside: React.ReactElement;
+}
+
+function AsideCard({ aside }: AsideCardProps): ReactElement {
+  const order = (aside?.props as { order?: number })?.order ?? -1;
+  const theme = useTheme() as any;
+
+  return (
+    <Card
+      className={ListClasses.asideCard}
+      sx={{
+        order,
+        mr: order === -1 ? 2 : 0,
+        ml: order !== -1 ? 2 : 0,
+        width: 200,
+        border: '1px solid',
+        borderRadius: 1,
+        borderColor: theme.palette.mode === 'dark' ? theme.palette.divider : theme.palette.grey.A800,
+        backgroundColor: theme.palette.background.paper,
+        backgroundImage: 'none'
+      }}
+    >
+      <CardContent sx={{ pt: 1 }}>{cloneElement(aside, {})}</CardContent>
+    </Card>
+  );
+}
+
 const PREFIX = 'RaList';
 const ListClasses = {
   main: `${PREFIX}-main`,
   content: `${PREFIX}-content`,
   actions: `${PREFIX}-actions`,
-  noResults: `${PREFIX}-noResults`
+  noResults: `${PREFIX}-noResults`,
+  asideCard: `${PREFIX}-asideCard`
 };
 
 interface ListViewProps {
@@ -356,7 +405,22 @@ const Root = styled('div', {
 
   [`& .${ListClasses.actions}`]: {},
 
-  [`& .${ListClasses.noResults}`]: {}
+  [`& .${ListClasses.noResults}`]: {},
+
+  [`& .${ListClasses.asideCard}`]: {
+    [theme.breakpoints.down('md')]: {
+      display: 'none'
+    },
+    [`& .${SavedQueriesListClasses.floatingIcon}`]: {
+      fontSize: '1.125rem'
+    },
+    [`& .${SavedQueriesListClasses.floatingTooltip}`]: {
+      top: '-1.2em'
+    },
+    '& form': {
+      marginTop: theme.spacing(2)
+    }
+  }
 }));
 
 export { ListView };

package/src/index.ts

@@ -15,7 +15,6 @@ export {
   BulkDeleteWithConfirmButton,
   ChipField,
   Confirm,
-  CreateButton,
   CreateContextProvider,
   CustomRoutes,
   DeleteWithConfirmButton,
@@ -24,6 +23,9 @@ export {
   EditContextProvider,
   FieldTitle,
   FilterButton,
+  FilterList,
+  FilterListItem,
+  FilterLiveSearch,
   Form,
   FormDataConsumer,
   HttpError,
@@ -38,6 +40,7 @@ export {
   Resource,
   ResourceContextProvider,
   SaveButton,
+  SavedQueriesList,
   SimpleFormIteratorContext,
   SimpleShowLayout,
   SingleFieldList,

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"}