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

package/package.json

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

package/src/components/ra-forms/LongForm/Form.tsx

@@ -12,11 +12,12 @@ type IFormProps = IProviderProps &
     spacing?: number;
     tabsDisposition: Disposition;
     contentDisposition: Disposition;
+    errorCount: boolean;
   };
 
 function Form(props: IFormProps) {
   const { tabsDisposition, contentDisposition, spacing = 2 } = props,
-    providerProps = _.pick(props, ['syncWithLocation']),
+    providerProps = _.pick(props, ['syncWithLocation', 'errorCount']),
     baseFormProps = _.omit(props, ['tabsDisposition', 'contentDisposition', 'syncWithLocation']),
     { top: sidebarTop, bottom: sidebarBottom } = useSidebarChildren(props),
     contentChildren = useBaseItemChildren(props);

package/src/components/ra-forms/LongForm/NavMenu.tsx

@@ -1,6 +1,17 @@
 import _ from 'lodash';
 import { Avatar } from '../../@extended';
-import { Card, Collapse, List, ListItem, ListItemProps, ListItemIcon, ListItemText, ListItemButton, ListItemAvatar } from '@mui/material';
+import {
+  Card,
+  Collapse,
+  List,
+  ListItem,
+  ListItemProps,
+  ListItemIcon,
+  ListItemText,
+  ListItemButton,
+  ListItemAvatar,
+  Badge
+} from '@mui/material';
 import { useSetActiveItem, useSyncWithLocation } from './Provider';
 import { IItem } from './types';
 import { useCallback, useEffect, useMemo, useState } from 'react';
@@ -44,7 +55,7 @@ function NavMenu() {
 function NavMenuItem(props: INavMenuItemProps) {
   const translate = useTranslate() ?? _.identity,
     navMenuItemProps = useNavMenuItem(props),
-    { selected, label, icon, onClick: _onClick, badge, items, isGroup, level } = navMenuItemProps,
+    { selected, label, icon, onClick: _onClick, badge, items, isGroup, level, errors = 0 } = navMenuItemProps,
     { spacing } = useThemeConfig(),
     [open, setOpen] = useState(selected),
     onClick = useCallback(
@@ -68,7 +79,18 @@ function NavMenuItem(props: INavMenuItemProps) {
       <ListItem {...listItemProps} disablePadding>
         <ListItemButton selected={selected && !isGroup} onClick={onClick} sx={{ pl: spacing * level }}>
           {hasIcon && <ListItemIcon>{icon}</ListItemIcon>}
-          <ListItemText inset={!hasIcon} primary={translate(label)} />
+          <ListItemText
+            inset={!hasIcon}
+            primary={
+              errors === 0 ? (
+                translate(label)
+              ) : (
+                <Badge variant="dot" color="error" sx={{ '& > .MuiBadge-badge': { transform: 'scale(1) translate(125%, 0)' } }}>
+                  {translate(label)}
+                </Badge>
+              )
+            }
+          />
           {badge && (
             <ListItemAvatar>
               <Avatar type="filled" size="xs" color={badge.color ?? 'default'}>

package/src/components/ra-forms/LongForm/Provider.tsx

@@ -10,16 +10,19 @@ enum ActionType {
   SET_SYNC_WITH_LOCATION = 'setSyncWithLocation',
   SET_ACTIVE_ITEM = 'setActiveItem',
   ADD_ITEM = 'addItem',
-  REMOVE_ITEM = 'removeItem'
+  REMOVE_ITEM = 'removeItem',
+  SET_ERROR_COUNT = 'setErrorCount'
 }
 
 type IProviderProps = React.PropsWithChildren<{
   syncWithLocation?: boolean;
   rootMatchString?: string;
+  errorCount?: boolean;
 }>;
 type IState = {
   formRootPath?: string;
   syncWithLocation: boolean;
+  errorCount: boolean;
   items: Array<IItem>;
   activeItem?: string;
 };
@@ -32,6 +35,10 @@ type IAction =
       type: ActionType.SET_SYNC_WITH_LOCATION;
       payload: boolean;
     }
+  | {
+      type: ActionType.SET_ERROR_COUNT;
+      payload: boolean;
+    }
   | {
       type: ActionType.SET_ACTIVE_ITEM;
       payload?: string;
@@ -58,6 +65,8 @@ function reducer(state: IState, action: IAction): IState {
       return _.extend(newState, { formRootPath: payload });
     case ActionType.SET_SYNC_WITH_LOCATION:
       return _.extend(newState, { syncWithLocation: payload });
+    case ActionType.SET_ERROR_COUNT:
+      return _.extend(newState, { errorCount: payload });
     case ActionType.SET_ACTIVE_ITEM:
       return _.includes(getItemsIds(state.items), payload) ? _.extend(newState, { activeItem: payload }) : newState;
     case ActionType.ADD_ITEM: {
@@ -91,6 +100,7 @@ function reducer(state: IState, action: IAction): IState {
 
 const DefaultState: IState = {
   syncWithLocation: true,
+  errorCount: true,
   items: [],
   activeItem: undefined
 };
@@ -99,6 +109,7 @@ const Context = createContext<IContext | undefined>(undefined);
 
 function Provider(props: IProviderProps) {
   const syncWithLocation = Boolean(props.syncWithLocation ?? true),
+    errorCount = Boolean(props.errorCount ?? true),
     { rootMatchString } = props,
     { pathname } = useLocation(),
     [state, dispatch] = useReducer(reducer, _.cloneDeep(DefaultState)),
@@ -140,6 +151,13 @@ function Provider(props: IProviderProps) {
     });
   }, [syncWithLocation, dispatch]);
 
+  useEffect(() => {
+    dispatch({
+      type: ActionType.SET_ERROR_COUNT,
+      payload: Boolean(errorCount)
+    });
+  }, [errorCount, dispatch]);
+
   useEffect(() => {
     if (syncWithLocation && formRootPath !== undefined) {
       let locationItem = pathname.replace(formRootPath, '').replace(new RegExp(/^\/?/), '');
@@ -201,6 +219,11 @@ function useSyncWithLocation(): boolean {
   return state.syncWithLocation;
 }
 
+function useErrorCount(): boolean {
+  const state = useFormState();
+  return state.errorCount;
+}
+
 function useSetActiveItem(): (activeItem: string) => void {
   const dispatch = useFormDispatch(),
     setActiveItem = useCallback(
@@ -246,5 +269,15 @@ function useRemoveItem(): (item: string | IItem) => void {
   return removeItem;
 }
 
-export { Provider, useItems, useSyncWithLocation, useFormRootPath, useActiveItem, useSetActiveItem, useAddItem, useRemoveItem };
+export {
+  Provider,
+  useItems,
+  useSyncWithLocation,
+  useFormRootPath,
+  useActiveItem,
+  useSetActiveItem,
+  useAddItem,
+  useRemoveItem,
+  useErrorCount
+};
 export type { IProviderProps };

package/src/components/ra-forms/LongForm/Tab.tsx

@@ -1,22 +1,53 @@
 import _ from 'lodash';
 import { Box } from '@mui/material';
-import React, { Children, cloneElement, isValidElement, useEffect, useMemo } from 'react';
-import { useAddItem, useRemoveItem } from './Provider';
+import React, { Children, ReactElement, ReactNode, cloneElement, isValidElement, useEffect, useMemo } from 'react';
+import { useAddItem, useRemoveItem, useErrorCount } from './Provider';
 import { Optional } from 'src/types';
 import { IItem } from './types';
 import { useIsActive } from './hooks';
 import { getId } from './utils';
+import { useFormState } from 'react-hook-form';
 
-type IBaseItemProps = React.PropsWithChildren<Optional<IItem, 'id' | 'index'>>;
+type IBaseItemProps = React.PropsWithChildren<Optional<IItem, 'id' | 'index'> & { sources: Array<string> }>;
 type ITabProps = IBaseItemProps;
 type IGroupProps = IBaseItemProps;
 
+function walkChildren(children: ReactNode = [], callback: (el: ReactElement) => void) {
+  const _children = _.isArray(children) ? children : [children],
+    validChildren = _.filter(_children, (child) => isValidElement(child));
+  _.each(validChildren, (child) => {
+    callback(child);
+    walkChildren(child?.props?.children ?? [], callback);
+  });
+}
+
 function BaseItem(props: IBaseItemProps) {
-  const { label, icon, badge, index = 0 } = props,
+  const { errors } = useFormState(),
+    countErrors = useErrorCount(),
+    { label, icon, badge, index = 0, children } = props,
     id = getId(props),
     addItem = useAddItem(),
     removeItem = useRemoveItem(),
-    visible = useIsActive(id);
+    visible = useIsActive(id),
+    sources: Array<string> = [];
+
+  if (countErrors) {
+    if (props.sources !== undefined) {
+      sources.push(...props.sources);
+    } else {
+      walkChildren(children, (el) => {
+        if (el?.props?.source !== undefined) {
+          sources.push(el.props.source);
+        }
+      });
+    }
+  }
+
+  const errorsCount = _.chain(sources)
+    .uniq()
+    .map((s) => _.get(errors, s))
+    .reject((s) => s === undefined)
+    .value().length;
 
   useEffect(() => {
     addItem({
@@ -24,12 +55,13 @@ function BaseItem(props: IBaseItemProps) {
       index: index,
       label: label,
       icon: icon,
-      badge: badge
+      badge: badge,
+      errors: errorsCount
     });
     return () => {
       removeItem(id);
     };
-  }, [addItem, removeItem, label, icon, id, badge, index]);
+  }, [addItem, removeItem, label, icon, id, badge, index, errorsCount]);
 
   /* All tabs are rendered (not only the one in focus), to allow validation
   on tabs not in focus. The tabs receive a `hidden` property, which they'll

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

@@ -6,6 +6,7 @@ import {
   useActiveItem,
   useItems,
   useSyncWithLocation,
+  useErrorCount,
   useSetActiveItem,
   useAddItem,
   useRemoveItem,
@@ -21,6 +22,7 @@ type IForm = typeof Form & {
   Provider: typeof Provider;
   useItems: typeof useItems;
   useSyncWithLocation: typeof useSyncWithLocation;
+  useErrorCount: typeof useErrorCount;
   useFormRootPath: typeof useFormRootPath;
   useActiveItem: typeof useActiveItem;
   useSetActiveItem: typeof useSetActiveItem;
@@ -44,6 +46,7 @@ DefaultForm.Content = Content;
 DefaultForm.Provider = Provider;
 DefaultForm.useItems = useItems;
 DefaultForm.useSyncWithLocation = useSyncWithLocation;
+DefaultForm.useErrorCount = useErrorCount;
 DefaultForm.useFormRootPath = useFormRootPath;
 DefaultForm.useActiveItem = useActiveItem;
 DefaultForm.useSetActiveItem = useSetActiveItem;

package/src/components/ra-forms/LongForm/types.ts

@@ -15,6 +15,7 @@ type IItem = {
     content: string | number;
     color?: 'default' | 'error' | 'info' | 'primary' | 'secondary' | 'success' | 'warning';
   };
+  errors?: number;
 };
 
 export type { Disposition, IItem };

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;