@applica-software-guru/react-admin 1.3.144 → 1.3.145

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@applica-software-guru/react-admin",
-  "version": "1.3.144",
+  "version": "1.3.145",
   "private": false,
   "repository": {
     "type": "git",

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

@@ -0,0 +1,141 @@
+import * as React from 'react';
+import { Children, ReactNode, cloneElement, isValidElement, useCallback } from 'react';
+import PropTypes from 'prop-types';
+import { styled, lighten } from '@mui/material/styles';
+import clsx from 'clsx';
+import Toolbar from '@mui/material/Toolbar';
+import Typography from '@mui/material/Typography';
+
+import IconButton from '@mui/material/IconButton';
+import CloseIcon from '@mui/icons-material/Close';
+import { useTranslate, sanitizeListRestProps, useListContext, Identifier } from 'ra-core';
+import { TopToolbar } from 'react-admin';
+
+const BulkActionsToolbar = (props: BulkActionsToolbarProps) => {
+  const { label = 'ra.action.bulk_actions', children, className, ...rest } = props;
+  const { filterValues, resource, selectedIds = [], onUnselectItems } = useListContext(props);
+
+  const translate = useTranslate();
+
+  const handleUnselectAllClick = useCallback(() => {
+    onUnselectItems();
+  }, [onUnselectItems]);
+
+  return (
+    <Root className={className}>
+      <Toolbar
+        data-test="bulk-actions-toolbar"
+        className={clsx(BulkActionsToolbarClasses.toolbar, {
+          [BulkActionsToolbarClasses.collapsed]: selectedIds.length === 0
+        })}
+        {...sanitizeListRestProps(rest)}
+      >
+        <div className={BulkActionsToolbarClasses.title}>
+          <IconButton
+            className={BulkActionsToolbarClasses.icon}
+            aria-label={translate('ra.action.unselect')}
+            title={translate('ra.action.unselect')}
+            onClick={handleUnselectAllClick}
+            size="small"
+          >
+            <CloseIcon fontSize="small" />
+          </IconButton>
+          <Typography color="inherit" variant="subtitle1">
+            {translate(label, {
+              _: label,
+              // eslint-disable-next-line camelcase
+              smart_count: selectedIds.length
+            })}
+          </Typography>
+        </div>
+        <TopToolbar className={BulkActionsToolbarClasses.topToolbar}>
+          {Children.map(children, (child) =>
+            isValidElement<any>(child)
+              ? cloneElement(child, {
+                  filterValues,
+                  resource,
+                  selectedIds
+                })
+              : null
+          )}
+        </TopToolbar>
+      </Toolbar>
+    </Root>
+  );
+};
+
+BulkActionsToolbar.propTypes = {
+  children: PropTypes.node,
+  label: PropTypes.string
+};
+
+export interface BulkActionsToolbarProps {
+  children?: ReactNode;
+  label?: string;
+  selectedIds?: Identifier[];
+  className?: string;
+}
+
+const PREFIX = 'RaBulkActionsToolbar';
+
+export const BulkActionsToolbarClasses = {
+  toolbar: `${PREFIX}-toolbar`,
+  topToolbar: `${PREFIX}-topToolbar`,
+  buttons: `${PREFIX}-buttons`,
+  collapsed: `${PREFIX}-collapsed`,
+  title: `${PREFIX}-title`,
+  icon: `${PREFIX}-icon`
+};
+
+const Root = styled('div', {
+  name: PREFIX,
+  overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({
+  position: 'relative',
+  [`& .${BulkActionsToolbarClasses.toolbar}`]: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    zIndex: 3,
+    color: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.text.primary,
+    justifyContent: 'space-between',
+    backgroundColor: theme.palette.mode === 'light' ? lighten(theme.palette.primary.light, 0.8) : theme.palette.primary.dark,
+    minHeight: theme.spacing(6),
+    height: theme.spacing(6),
+    transform: `translateY(-${theme.spacing(6)})`,
+    transition: `${theme.transitions.create('height')}, ${theme.transitions.create('min-height')}, ${theme.transitions.create(
+      'transform'
+    )}`,
+    borderTopLeftRadius: theme.shape.borderRadius,
+    borderTopRightRadius: theme.shape.borderRadius
+  },
+
+  [`& .${BulkActionsToolbarClasses.topToolbar}`]: {
+    paddingBottom: theme.spacing(1),
+    minHeight: 'auto',
+    [theme.breakpoints.down('sm')]: {
+      backgroundColor: 'transparent'
+    }
+  },
+
+  [`& .${BulkActionsToolbarClasses.buttons}`]: {},
+
+  [`& .${BulkActionsToolbarClasses.collapsed}`]: {
+    minHeight: 0,
+    height: 0,
+    transform: `translateY(0)`,
+    overflowY: 'hidden'
+  },
+
+  [`& .${BulkActionsToolbarClasses.title}`]: {
+    display: 'flex',
+    flex: '0 0 auto'
+  },
+
+  [`& .${BulkActionsToolbarClasses.icon}`]: {
+    marginLeft: '-0.5em',
+    marginRight: '0.5em'
+  }
+}));
+
+export default BulkActionsToolbar;

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

@@ -0,0 +1,100 @@
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import { useListContext, Button } from 'react-admin';
+import { Box, Fab, Fade, List, ListItem, Popover, Theme, useMediaQuery } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+const noSpaceOutside = {
+  p: 0,
+  m: 0
+};
+const moreSpaceInside = {
+  p: 2,
+  m: 0,
+  borderRadius: 0,
+  width: '100%'
+};
+
+const BulkFloatingActionsToolbar = (props: BulkFloatingActionsToolbarProps) => {
+  const { children } = props;
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget);
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+  const isSmall = useMediaQuery((theme: Theme) => theme.breakpoints.down('md'));
+  const open = Boolean(anchorEl);
+  const id = open ? 'simple-popover' : undefined;
+  const { filterValues, resource, selectedIds = [], onUnselectItems } = useListContext(props);
+
+  const handleUnselectAllClick = React.useCallback(() => {
+    onUnselectItems();
+    setAnchorEl(null);
+  }, [onUnselectItems, setAnchorEl]);
+
+  return (
+    <Fade in={selectedIds !== undefined && selectedIds.length > 0}>
+      <Box
+        sx={{
+          position: 'fixed',
+          bottom: '16px',
+          right: '16px'
+        }}
+      >
+        <Fab color="primary" aria-label="manage" onClick={handleClick}>
+          {selectedIds?.length}
+        </Fab>
+        <Popover
+          id={id}
+          open={open}
+          anchorEl={anchorEl}
+          onClose={handleClose}
+          anchorOrigin={{
+            vertical: 'top',
+            horizontal: isSmall ? 'center' : 'right'
+          }}
+          transformOrigin={{
+            vertical: 'bottom',
+            horizontal: isSmall ? 'center' : 'right'
+          }}
+          disableScrollLock
+          elevation={10}
+        >
+          <List sx={noSpaceOutside}>
+            <ListItem sx={noSpaceOutside}>
+              <Button onClick={handleUnselectAllClick} sx={moreSpaceInside} label="ra.action.unselect" startIcon={<CloseIcon />}>
+                <CloseIcon />
+              </Button>
+            </ListItem>
+            {React.Children.map(children, (child) => (
+              <ListItem sx={noSpaceOutside}>
+                {React.isValidElement<any>(child)
+                  ? React.cloneElement(child, {
+                      filterValues,
+                      resource,
+                      selectedIds,
+                      sx: moreSpaceInside,
+                      ...(child.props?.popover ? { closePopover: handleClose } : {})
+                    })
+                  : null}
+              </ListItem>
+            ))}
+          </List>
+        </Popover>
+      </Box>
+    </Fade>
+  );
+};
+
+BulkFloatingActionsToolbar.propTypes = {
+  children: PropTypes.node
+};
+
+export interface BulkFloatingActionsToolbarProps {
+  children?: React.ReactNode | React.ReactNode[];
+}
+
+export default BulkFloatingActionsToolbar;

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

@@ -0,0 +1,345 @@
+import {
+  DatagridProps as RaDatagridProps,
+  DatagridHeader,
+  DatagridLoading,
+  DatagridBody,
+  PureDatagridBody,
+  BulkDeleteButton,
+  ListNoResults,
+  DatagridClasses,
+  DatagridRoot
+} from 'react-admin';
+
+import * as React from 'react';
+import { cloneElement, createElement, isValidElement, useCallback, useRef, useEffect, FC, useMemo } from 'react';
+import PropTypes from 'prop-types';
+import { sanitizeListRestProps, useListContext, Identifier } from 'ra-core';
+import { Table } from '@mui/material';
+import clsx from 'clsx';
+import union from 'lodash/union';
+import difference from 'lodash/difference';
+import DatagridContextProvider from './DatagridContextProvider';
+import BulkActionsToolbar from '../BulkActionsToolbar';
+
+const defaultBulkActionButtons = <BulkDeleteButton />;
+
+export type DatagridProps = RaDatagridProps & {
+  /**
+   * An alternative to bulkActionButtons, to be used when the actions are too complex to be expressed.
+   * In this case you are free to fully control the rendering of the bulk actions toolbar.
+   * @see BulkActionsToolbar
+   * @example <caption>Using the BulkActionsToolbar component</caption>
+   * import { BulkActionsToolbar } from '@applica-software-guru/react-admin';
+   * import { BulkDeleteButton } from 'react-admin';
+   *
+   * const PostBulkActionButtons = props => (
+   *    <BulkActionsToolbar {...props}>
+   *       <BulkDeleteButton />
+   *      // add your custom actions here
+   *   </BulkActionsToolbar>
+   * );
+   *
+   * @example <caption>Using BulkFloatingActionsToolbar component</caption>
+   * import { BulkActionsToolbar } from '@applica-software-guru/react-admin';
+   * import { BulkDeleteButton } from 'react-admin';
+   *
+   * const PostBulkActionButtons = props => (
+   *   <BulkActionsToolbar {...props}>
+   *      <BulkDeleteButton />
+   *     // add your custom actions here
+   *   </BulkActionsToolbar>
+   * );
+   *
+   */
+  bulkActionsToolbar: React.ReactNode | React.FC | boolean;
+};
+
+/**
+ * The Datagrid component renders a list of records as a table.
+ * It is usually used as a child of the <List> and <ReferenceManyField> components.
+ *
+ * Props:
+ *  - body
+ *  - bulkActionButtons
+ *  - children
+ *  - empty
+ *  - expand
+ *  - header
+ *  - hover
+ *  - isRowExpandable
+ *  - isRowSelectable
+ *  - optimized
+ *  - rowClick
+ *  - rowSx
+ *  - size
+ *  - sx
+ *
+ * @example // Display all posts as a datagrid
+ * const postRowSx = (record, index) => ({
+ *     backgroundColor: record.nb_views >= 500 ? '#efe' : 'white',
+ * });
+ * export const PostList = () => (
+ *     <List>
+ *         <Datagrid rowSx={postRowSx}>
+ *             <TextField source="id" />
+ *             <TextField source="title" />
+ *             <TextField source="body" />
+ *             <EditButton />
+ *         </Datagrid>
+ *     </List>
+ * );
+ *
+ * @example // Display all the comments of the current post as a datagrid
+ * <ReferenceManyField reference="comments" target="post_id">
+ *     <Datagrid>
+ *         <TextField source="id" />
+ *         <TextField source="body" />
+ *         <DateField source="created_at" />
+ *         <EditButton />
+ *     </Datagrid>
+ * </ReferenceManyField>
+ *
+ * @example // Usage outside of a <List> or a <ReferenceManyField>.
+ *
+ * const sort = { field: 'published_at', order: 'DESC' };
+ *
+ * export const MyCustomList = (props) => {
+ *     const { data, total, isLoading } = useGetList(
+ *         'posts',
+ *         { pagination: { page: 1, perPage: 10 }, sort: sort }
+ *     );
+ *
+ *     return (
+ *         <Datagrid
+ *             data={data}
+ *             total={total}
+ *             isLoading={isLoading}
+ *             sort={sort}
+ *             selectedIds={[]}
+ *             setSort={() => {
+ *                 console.log('set sort');
+ *             }}
+ *             onSelect={() => {
+ *                 console.log('on select');
+ *             }}
+ *             onToggleItem={() => {
+ *                 console.log('on toggle item');
+ *             }}
+ *         >
+ *             <TextField source="id" />
+ *             <TextField source="title" />
+ *         </Datagrid>
+ *     );
+ * }
+ */
+export const Datagrid: FC<DatagridProps> = React.forwardRef((props, ref) => {
+  const {
+    optimized = false,
+    body = optimized ? PureDatagridBody : DatagridBody,
+    header = DatagridHeader,
+    children,
+    className,
+    empty = DefaultEmpty,
+    expand,
+    bulkActionsToolbar = false,
+    bulkActionButtons = defaultBulkActionButtons,
+    hover,
+    isRowSelectable,
+    isRowExpandable,
+    resource,
+    rowClick,
+    rowSx,
+    rowStyle,
+    size = 'small',
+    sx,
+    expandSingle = false,
+    ...rest
+  } = props;
+
+  const { sort, data, isLoading, onSelect, onToggleItem, selectedIds, setSort, total } = useListContext(props);
+
+  const hasBulkActions = !!bulkActionButtons !== false;
+
+  const contextValue = useMemo(() => ({ isRowExpandable, expandSingle }), [isRowExpandable, expandSingle]);
+
+  const lastSelected = useRef(null);
+
+  useEffect(() => {
+    if (!selectedIds || selectedIds.length === 0) {
+      lastSelected.current = null;
+    }
+  }, [JSON.stringify(selectedIds)]); // eslint-disable-line react-hooks/exhaustive-deps
+
+  // we manage row selection at the datagrid level to allow shift+click to select an array of rows
+  const handleToggleItem = useCallback(
+    // @ts-ignore
+    (id, event) => {
+      const ids = data.map((record) => record.id);
+      const lastSelectedIndex = ids.indexOf(lastSelected.current);
+      lastSelected.current = event.target.checked ? id : null;
+
+      if (event.shiftKey && lastSelectedIndex !== -1) {
+        const index = ids.indexOf(id);
+        const idsBetweenSelections = ids.slice(Math.min(lastSelectedIndex, index), Math.max(lastSelectedIndex, index) + 1);
+
+        const newSelectedIds = event.target.checked
+          ? union(selectedIds, idsBetweenSelections)
+          : difference(selectedIds, idsBetweenSelections);
+
+        onSelect(
+          isRowSelectable
+            ? newSelectedIds.filter((id: Identifier) => isRowSelectable(data.find((record) => record.id === id)))
+            : newSelectedIds
+        );
+      } else {
+        onToggleItem(id);
+      }
+    },
+    [data, isRowSelectable, onSelect, onToggleItem, selectedIds]
+  );
+
+  if (isLoading === true) {
+    return (
+      <DatagridLoading
+        className={className}
+        expand={expand}
+        hasBulkActions={hasBulkActions}
+        nbChildren={React.Children.count(children)}
+        size={size}
+      />
+    );
+  }
+
+  /**
+   * Once loaded, the data for the list may be empty. Instead of
+   * displaying the table header with zero data rows,
+   * the Datagrid displays the empty component.
+   */
+  if (data == null || data.length === 0 || total === 0) {
+    if (empty) {
+      return empty;
+    }
+
+    return null;
+  }
+
+  /**
+   * After the initial load, if the data for the list isn't empty,
+   * and even if the data is refreshing (e.g. after a filter change),
+   * the datagrid displays the current data.
+   */
+  return (
+    <DatagridContextProvider value={contextValue}>
+      <DatagridRoot sx={sx} className={clsx(DatagridClasses.root, className)}>
+        {bulkActionsToolbar != null && isValidElement(bulkActionsToolbar) ? (
+          cloneElement<any>(bulkActionsToolbar, {
+            selectedIds,
+            total
+          })
+        ) : bulkActionButtons !== false ? (
+          <BulkActionsToolbar>{isValidElement(bulkActionButtons) ? bulkActionButtons : defaultBulkActionButtons}</BulkActionsToolbar>
+        ) : null}
+        <div className={DatagridClasses.tableWrapper}>
+          <Table ref={ref} className={DatagridClasses.table} size={size} {...sanitizeRestProps(rest)}>
+            {createOrCloneElement(
+              header,
+              {
+                children,
+                sort,
+                data,
+                hasExpand: !!expand,
+                hasBulkActions,
+                isRowSelectable,
+                onSelect,
+                resource,
+                selectedIds,
+                setSort
+              },
+              children
+            )}
+            {createOrCloneElement(
+              body,
+              {
+                expand,
+                rowClick,
+                data,
+                hasBulkActions,
+                hover,
+                onToggleItem: handleToggleItem,
+                resource,
+                rowSx,
+                rowStyle,
+                selectedIds,
+                isRowSelectable
+              },
+              children
+            )}
+          </Table>
+        </div>
+      </DatagridRoot>
+    </DatagridContextProvider>
+  );
+});
+
+// @ts-ignore
+const createOrCloneElement = (element, props, children) =>
+  isValidElement(element) ? cloneElement(element, props, children) : createElement(element, props, children);
+
+Datagrid.propTypes = {
+  // @ts-ignore
+  body: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
+  // @ts-ignore-line
+  bulkActionButtons: PropTypes.oneOfType([PropTypes.bool, PropTypes.element]),
+  children: PropTypes.node.isRequired,
+  className: PropTypes.string,
+  // @ts-ignore
+  sort: PropTypes.exact({
+    field: PropTypes.string,
+    order: PropTypes.oneOf(['ASC', 'DESC'] as const)
+  }),
+  data: PropTypes.arrayOf(PropTypes.any),
+  empty: PropTypes.element,
+  // @ts-ignore
+  expand: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
+  // @ts-ignore
+  header: PropTypes.oneOfType([PropTypes.element, PropTypes.elementType]),
+  hover: PropTypes.bool,
+  isLoading: PropTypes.bool,
+  onSelect: PropTypes.func,
+  onToggleItem: PropTypes.func,
+  resource: PropTypes.string,
+  // @ts-ignore
+  rowClick: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.bool]),
+  rowSx: PropTypes.func,
+  rowStyle: PropTypes.func,
+  selectedIds: PropTypes.arrayOf(PropTypes.any),
+  setSort: PropTypes.func,
+  total: PropTypes.number,
+  isRowSelectable: PropTypes.func,
+  isRowExpandable: PropTypes.func,
+  expandSingle: PropTypes.bool
+};
+
+const injectedProps = [
+  'isRequired',
+  'setFilter',
+  'setPagination',
+  'limitChoicesToValue',
+  'translateChoice',
+  // Datagrid may be used as an alternative to SelectInput
+  'field',
+  'fieldState',
+  'formState'
+];
+
+// @ts-ignore
+const sanitizeRestProps = (props) =>
+  Object.keys(sanitizeListRestProps(props))
+    .filter((propName) => !injectedProps.includes(propName))
+    .reduce((acc, key) => ({ ...acc, [key]: props[key] }), {});
+
+Datagrid.displayName = 'Datagrid';
+
+const DefaultEmpty = <ListNoResults />;
+
+export default Datagrid;

package/src/components/ra-lists/Datagrid/DatagridContext.ts

@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import { RaRecord } from 'ra-core';
+
+const DatagridContext = createContext<DatagridContextValue>({});
+
+DatagridContext.displayName = 'DatagridContext';
+
+export type DatagridContextValue = {
+    isRowExpandable?: (record: RaRecord) => boolean;
+    expandSingle?: boolean;
+};
+
+export default DatagridContext;

package/src/components/ra-lists/Datagrid/DatagridContextProvider.tsx

@@ -0,0 +1,8 @@
+import React, { ReactElement, ReactNode } from 'react';
+import DatagridContext, { DatagridContextValue } from './DatagridContext';
+
+const DatagridContextProvider = ({ children, value }: { children: ReactNode; value: DatagridContextValue }): ReactElement => (
+  <DatagridContext.Provider value={value}>{children}</DatagridContext.Provider>
+);
+
+export default DatagridContextProvider;

package/src/components/ra-lists/{Datagrid.tsx → Datagrid/index.tsx}

@@ -1,8 +1,9 @@
-import { DatagridProps, Datagrid as RaDatagrid } from 'react-admin';
+import { Datagrid as RaDatagrid } from './Datagrid';
+import { DatagridProps } from 'react-admin';
 
 import { styled } from '@mui/material/styles';
 
-const ApplicaStyledDatagrid = styled(RaDatagrid, {
+const StyledDatagrid = styled(RaDatagrid, {
   name: 'ApplicaDatagrid',
   slot: 'root'
 })(() => ({
@@ -40,13 +41,9 @@ const ApplicaStyledDatagrid = styled(RaDatagrid, {
  * @param {DatagridProps} props
  * @returns {JSX.Element}
  */
-const Datagrid = (props: DatagridProps): JSX.Element => <ApplicaStyledDatagrid {...props} />;
-
-Datagrid.propTypes = {
-  ...RaDatagrid.propTypes
-};
-Datagrid.defaultProps = {
-  ...RaDatagrid.defaultProps
+const Datagrid = (props: DatagridProps): JSX.Element => {
+  // @ts-ignore
+  return <StyledDatagrid {...props} />;
 };
 
 export default Datagrid;

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

@@ -1,5 +1,6 @@
-import Datagrid from './Datagrid';
-import Empty from './Empty';
-import List from './List';
-import NotificationList from './NotificationList';
-export { Datagrid, Empty, NotificationList, List };
+export { default as Datagrid } from './Datagrid';
+export { default as Empty } from './Empty';
+export { default as NotificationList } from './NotificationList';
+export { default as List } from './List';
+export { default as BulkActionsToolbar } from './BulkActionsToolbar';
+export { default as BulkFloatingActionsToolbar } from './BulkFloatingActionsToolbar';

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

@@ -0,0 +1,18 @@
+import { LongForm, MainCard, TextInput } from '@applica-software-guru/react-admin';
+import { Grid } from '@mui/material';
+
+const TestModelForm = () => (
+  <LongForm>
+    <LongForm.Tab id="root" label="Root">
+      <MainCard title="Info">
+        <Grid container spacing={2}>
+          <Grid item xs={12}>
+            <TextInput source="name" fullWidth />
+          </Grid>
+        </Grid>
+      </MainCard>
+    </LongForm.Tab>
+  </LongForm>
+);
+
+export default TestModelForm;