@applica-software-guru/react-admin 1.4.226 → 1.5.230

package/src/components/ra-fields/AttachmentField.tsx

@@ -1,28 +1,11 @@
-import BaseAttachmentField, { BaseAttachmentFieldProps } from './BaseAttachmentField';
+import { BaseAttachmentField, BaseAttachmentFieldProps } from '@/components/ra-fields/BaseAttachmentField';
 import { Box, Typography } from '@mui/material';
-import { useDataProvider, useRecordContext, useResourceContext, useTranslate } from 'react-admin';
-import { useCallback, useEffect, useMemo, useState } from 'react';
-
 import dayjs from 'dayjs';
 import { get } from 'lodash';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useDataProvider, useRecordContext, useResourceContext, useTranslate } from 'react-admin';
 
-export type AttachmentFieldProps = BaseAttachmentFieldProps & {
-  title: string;
-  entityId?: string;
-  property?: string;
-  disabled?: boolean;
-  /**
-   * Allows you to define the base resource to use, for REST calls, to retrieve user data associated with the single attachment.
-   * If not specified, the default value is 'entities/user'.
-   */
-  userResource?: string;
-  /**
-   * If true, the user data associated with the single attachment will be displayed.
-   */
-  showUser?: boolean;
-};
-
-export function AttachmentField({
+function AttachmentField({
   entityId,
   property,
   disabled,
@@ -65,7 +48,7 @@ export function AttachmentField({
       .getOne(userResource, { id: record?.userId })
       .then(({ data }) => setUser(data))
       .catch(() => setUser(null));
-  }, [record, dataProvider, userResource]);
+  }, [record, dataProvider, userResource, showUser]);
 
   return (
     <BaseAttachmentField
@@ -78,17 +61,35 @@ export function AttachmentField({
           <Typography variant="subtitle1">{get(_record, props?.title || props?.source)}</Typography>
           <Typography variant="caption" color="secondary">
             {get(_record, 'sizeDescription')}
-            {showUser && user && ` | `}
-            {showUser &&
-              user &&
-              translate('ra.attachment.info', {
-                user: user?.name,
-                created: dayjs(_record?.createdAt).format('DD/MM/YYYY HH:mm')
-              })}
+            {showUser && user ? ` | ` : null}
+            {showUser && user
+              ? translate('ra.attachment.info', {
+                  user: user?.name,
+                  created: dayjs(_record?.createdAt).format('DD/MM/YYYY HH:mm')
+                })
+              : null}
           </Typography>
         </Box>
       }
     />
   );
 }
-export default AttachmentField;
+
+type AttachmentFieldProps = BaseAttachmentFieldProps & {
+  title: string;
+  entityId?: string;
+  property?: string;
+  disabled?: boolean;
+  /**
+   * Allows you to define the base resource to use, for REST calls, to retrieve user data associated with the single attachment.
+   * If not specified, the default value is 'entities/user'.
+   */
+  userResource?: string;
+  /**
+   * If true, the user data associated with the single attachment will be displayed.
+   */
+  showUser?: boolean;
+};
+
+export { AttachmentField };
+export type { AttachmentFieldProps };

package/src/components/ra-fields/BaseAttachmentField.tsx

@@ -1,30 +1,15 @@
-import { useRecordContext, useTranslate } from 'ra-core';
 import { Typography } from '@mui/material';
-import { get } from 'lodash';
 import { styled } from '@mui/material/styles';
+import { get } from 'lodash';
+import { useRecordContext, useTranslate } from 'ra-core';
 
-const Root = styled('div', { overridesResolver: (props, styles) => styles.root })({ display: 'inline-block' });
+const Root = styled('div', { overridesResolver: (_, styles) => styles.root })({ display: 'inline-block' });
 
 const StyledList = styled('ul')({
   display: 'inline-block'
 });
 
-export type BaseAttachmentFieldProps = {
-  src: string;
-  title: string | ((record: any) => string) | JSX.Element;
-  target: string;
-  download: boolean | string;
-  ping: string;
-  rel: string;
-  emptyText: string;
-  source: string;
-  className: string;
-  disabled?: boolean;
-  record: any;
-  onClick: (e: any) => void;
-};
-
-export function BaseAttachmentField(props: BaseAttachmentFieldProps): JSX.Element | any {
+function BaseAttachmentField(props: BaseAttachmentFieldProps): JSX.Element | any {
   const { className, emptyText, source, title, ...rest } = props;
   const record = useRecordContext(props);
   const sourceValue = get(record, source);
@@ -33,7 +18,7 @@ export function BaseAttachmentField(props: BaseAttachmentFieldProps): JSX.Elemen
   if (!sourceValue) {
     return emptyText ? (
       <Typography component="span" variant="body2" className={className} {...rest}>
-        {emptyText && translate(emptyText, { _: emptyText })}
+        {emptyText ? translate(emptyText, { _: emptyText }) : null}
       </Typography>
     ) : (
       <Root className={className} {...rest} />
@@ -60,4 +45,20 @@ export function BaseAttachmentField(props: BaseAttachmentFieldProps): JSX.Elemen
   );
 }
 
-export default BaseAttachmentField;
+type BaseAttachmentFieldProps = {
+  src: string;
+  title: string | ((record: any) => string) | JSX.Element;
+  target: string;
+  download: boolean | string;
+  ping: string;
+  rel: string;
+  emptyText: string;
+  source: string;
+  className: string;
+  disabled?: boolean;
+  record: any;
+  onClick: (e: any) => void;
+};
+
+export { BaseAttachmentField };
+export type { BaseAttachmentFieldProps };

package/src/components/ra-fields/CoverField.tsx

@@ -1,13 +1,14 @@
+import { ImageField } from '@/components/ra-fields/ImageField';
 import { useMemo } from 'react';
-import { ImageField } from './ImageField';
 import { FieldProps, useRecordContext } from 'react-admin';
 
-export type CoverFieldProps = {
+type CoverFieldProps = {
   width?: number | string;
   height?: number | string;
   circle?: boolean;
   justify?: 'flex-start' | 'center' | 'flex-end';
 } & FieldProps;
+
 /**
  * A component that displays an image in a circle or square (with minimum radius).
  *
@@ -24,7 +25,7 @@ export type CoverFieldProps = {
  * // With custom width/height:
  * <CoverField source="image" width={100} height={100} />
  */
-export function CoverField({
+function CoverField({
   width: defaultWidth = 150,
   height: defaultHeight = 150,
   circle: defaultCircle = false,
@@ -63,4 +64,6 @@ export function CoverField({
     />
   );
 }
-export default CoverField;
+
+export { CoverField };
+export type { CoverFieldProps };

package/src/components/ra-fields/DateAgoField.tsx

@@ -1,31 +1,36 @@
-import { DateField, DateFieldProps, useLocaleState, useRecordContext } from 'react-admin';
-import { Fragment, useMemo } from 'react';
 import { Typography } from '@mui/material';
 import dayjs from 'dayjs';
-import { get } from 'lodash';
-import relativeTime from 'dayjs/plugin/relativeTime';
 import 'dayjs/locale/en';
 import 'dayjs/locale/it';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import { get } from 'lodash';
+import { useMemo } from 'react';
+import { DateField, DateFieldProps, useLocaleState, useRecordContext } from 'react-admin';
 
 dayjs.extend(relativeTime);
 
-export type DateAgoFieldProps = {
-  source: string;
-} & DateFieldProps;
-
-export function DateAgoField(props: DateAgoFieldProps): JSX.Element {
+function DateAgoField(props: DateAgoFieldProps): JSX.Element {
   const record = useRecordContext(props);
   const [locale] = useLocaleState();
-  const fromNow = useMemo(() => dayjs(get(record, props?.source)).locale(locale).fromNow(), [record, props?.source, locale]);
+  const fromNow = useMemo(
+    () => dayjs(get(record, props?.source)).locale(locale).fromNow(),
+    [record, props?.source, locale]
+  );
 
   return (
-    <Fragment>
+    <>
       <DateField record={record} source={props.source} showTime />
       <br />
       <Typography variant="caption" color="textSecondary">
         {fromNow}
       </Typography>
-    </Fragment>
+    </>
   );
 }
-export default DateAgoField;
+
+type DateAgoFieldProps = {
+  source: string;
+} & DateFieldProps;
+
+export { DateAgoField };
+export type { DateAgoFieldProps };

package/src/components/ra-fields/DateField.tsx

@@ -1,11 +1,12 @@
-import { DateFieldProps, DateField as RaDateField } from 'react-admin';
 import { styled } from '@mui/material/styles';
+import { DateFieldProps, DateField as RaDateField } from 'react-admin';
 
 const StyledDateField = styled(RaDateField, { slot: 'Root' })(() => ({}));
 
-export function DateField({ variant = 'body1', ...props }: DateFieldProps): JSX.Element {
+function DateField({ variant = 'body1', ...props }: DateFieldProps): JSX.Element {
   // @ts-ignore
   return <StyledDateField {...props} variant={variant} />;
 }
 
-export default DateField;
+export { DateField };
+export type { DateFieldProps };

package/src/components/ra-fields/EmailField.tsx

@@ -1,10 +1,11 @@
-import { EmailFieldProps, EmailField as RaEmailField } from 'react-admin';
 import { styled } from '@mui/material/styles';
+import { EmailFieldProps, EmailField as RaEmailField } from 'react-admin';
 
 const StyledEmailField = styled(RaEmailField, { slot: 'Root' })(() => ({}));
 
-export function EmailField({ variant = 'body1', ...props }: EmailFieldProps): JSX.Element {
+function EmailField({ variant = 'body1', ...props }: EmailFieldProps): JSX.Element {
   return <StyledEmailField {...props} variant={variant} />;
 }
 
-export default EmailField;
+export { EmailField };
+export type { EmailFieldProps };

package/src/components/ra-fields/FileField.tsx

@@ -1,19 +1,19 @@
-import { FileField as RaFileField, FileFieldProps as RaFileFieldProps, useRecordContext } from 'react-admin';
-import { get } from 'lodash';
 import { styled } from '@mui/material/styles';
+import { get } from 'lodash';
 import { useCallback } from 'react';
+import { FileField as RaFileField, FileFieldProps as RaFileFieldProps, useRecordContext } from 'react-admin';
 
-const StyledFileField = styled(RaFileField, { slot: 'root' })(() => ({}));
-
-export type FileFieldProps = {
+type FileFieldProps = {
   source: string;
   title: string;
 } & RaFileFieldProps;
 
+const StyledFileField = styled(RaFileField, { slot: 'root' })(() => ({}));
+
 /**
  * This component works with Base64 files.
  */
-export function FileField({ ...props }: FileFieldProps): JSX.Element {
+function FileField({ ...props }: FileFieldProps): JSX.Element {
   const record = useRecordContext(props);
   const handleClick = useCallback(
     (event: Event) => {
@@ -38,4 +38,5 @@ export function FileField({ ...props }: FileFieldProps): JSX.Element {
   );
 }
 
-export default FileField;
+export { FileField };
+export type { FileFieldProps };

package/src/components/ra-fields/FunctionField.tsx

@@ -1,7 +1,8 @@
 import { FunctionFieldProps, FunctionField as RaFunctionField } from 'react-admin';
 
-export function FunctionField({ variant = 'body1', ...props }: FunctionFieldProps): JSX.Element {
+function FunctionField({ variant = 'body1', ...props }: FunctionFieldProps): JSX.Element {
   return <RaFunctionField {...props} variant={variant} />;
 }
 
-export default FunctionField;
+export { FunctionField };
+export type { FunctionFieldProps };

package/src/components/ra-fields/ImageField.tsx

@@ -1,11 +1,12 @@
-import { ImageFieldProps, ImageField as RaImageField } from 'react-admin';
 import { styled } from '@mui/material/styles';
+import { ImageFieldProps, ImageField as RaImageField } from 'react-admin';
 
 const StyledImageField = styled(RaImageField, { slot: 'root' })(() => ({}));
 
-export function ImageField(props: ImageFieldProps): JSX.Element {
+function ImageField(props: ImageFieldProps): JSX.Element {
   const source = `_${props?.source}`;
   return <StyledImageField {...props} source={source} />;
 }
 
-export default ImageField;
+export { ImageField };
+export type { ImageFieldProps };

package/src/components/ra-fields/LocalizedTextField.tsx

@@ -1,39 +1,40 @@
-import _ from 'lodash';
-import { TextFieldProps } from 'ra-ui-materialui';
+import { Tooltip } from '@/components/@extended';
+import { TextField } from '@/components/ra-fields/TextField';
+import { useSx } from '@/hooks';
+import { localizedValueHasAllLocales } from '@/utils';
+import { FlagFilled, FlagOutlined } from '@ant-design/icons';
 import { Stack, Typography, useTheme } from '@mui/material';
+import _ from 'lodash';
 import { useLocaleState, useLocales, useRecordContext } from 'ra-core';
-import { TextField } from './TextField';
-import { FlagOutlined, FlagFilled } from '@ant-design/icons';
-import { useSx } from '../../hooks';
-import { localizedValueHasAllLocales } from '../../utils';
+import { TextFieldProps } from 'ra-ui-materialui';
 import { ReactElement, useMemo } from 'react';
-import { Tooltip } from '../@extended';
 
-export type ILocalizedTextFieldProps = TextFieldProps;
+type ILocalizedTextFieldProps = TextFieldProps;
 
-export function LocalizedTextField(props: ILocalizedTextFieldProps): JSX.Element {
-  const theme = useTheme(),
-    locales = useLocales(),
-    { source = '' } = props,
-    record = useRecordContext(props),
-    value = record[source],
-    isMissingLocalizations = !localizedValueHasAllLocales(value, locales),
-    sx = useSx(props, { flex: 1 }),
-    [currentLocale] = useLocaleState(),
-    IconElement: ReactElement = useMemo(() => {
-      return isMissingLocalizations ? <FlagFilled style={{ color: theme.palette.warning.main }} /> : <FlagOutlined />;
-    }, [isMissingLocalizations]),
-    tooltipTitle = useMemo(() => {
-      return (
-        <Stack>
-          {_.map(locales, (l, index) => {
-            return <Typography key={index}>{`${l.locale.toUpperCase()}: ${(value ?? {})[l.locale] ?? ''}`}</Typography>;
-          })}
-        </Stack>
-      );
-    }, [value, locales]);
+function LocalizedTextField(props: ILocalizedTextFieldProps): JSX.Element {
+  const theme = useTheme();
+  const locales = useLocales();
+  const { source = '' } = props;
+  const record = useRecordContext(props);
+  const value = record[source];
+  const isMissingLocalizations = !localizedValueHasAllLocales(value, locales);
+  const sx = useSx(props, { flex: 1 });
+  const [currentLocale] = useLocaleState();
+  const IconElement: ReactElement = useMemo(() => {
+    return isMissingLocalizations ? <FlagFilled style={{ color: theme.palette.warning.main }} /> : <FlagOutlined />;
+  }, [isMissingLocalizations, theme.palette.warning.main]);
+  const tooltipTitle = useMemo(() => {
+    return (
+      <Stack>
+        {_.map(locales, (l, index) => {
+          return <Typography key={index}>{`${l.locale.toUpperCase()}: ${(value ?? {})[l.locale] ?? ''}`}</Typography>;
+        })}
+      </Stack>
+    );
+  }, [value, locales]);
 
   return (
+    // @ts-ignore
     <Tooltip title={tooltipTitle} arrow={false}>
       <Stack alignItems="center" direction="row" gap={1}>
         {IconElement}
@@ -42,5 +43,5 @@ export function LocalizedTextField(props: ILocalizedTextFieldProps): JSX.Element
     </Tooltip>
   );
 }
-
-export default LocalizedTextField;
+export type { ILocalizedTextFieldProps };
+export { LocalizedTextField };

package/src/components/ra-fields/ReadonlyField.tsx

@@ -1,10 +1,10 @@
-import { FieldTitle, useRecordContext, useResourceContext } from 'react-admin';
+import { useAppState } from '@/components/AppStateProvider';
+import { useSx } from '@/hooks';
 import { InputLabel, Tooltip, Typography } from '@mui/material';
-import React, { Fragment, useMemo } from 'react';
-
-import { get } from 'lodash';
 import { styled } from '@mui/material/styles';
-import { useAppConfig, useSx } from '../../hooks';
+import { get } from 'lodash';
+import React, { Children, PropsWithChildren, useMemo } from 'react';
+import { FieldTitle, useRecordContext, useResourceContext } from 'react-admin';
 
 type StyledFieldProps = {
   theme?: any;
@@ -27,24 +27,23 @@ const StyledField = styled('div')(({ theme, fullWidth }: StyledFieldProps) => ({
   }
 }));
 
-export type BasicFieldProps = {
+type BasicFieldProps = {
   source: string;
   defaultValue: any;
   record: any;
 };
 
-const BasicField = ({ source, defaultValue = ' ', ...props }: BasicFieldProps) => {
+function BasicField({ source, defaultValue = ' ', ...props }: BasicFieldProps): JSX.Element {
   const record = useRecordContext(props);
   const value = get(record, source, defaultValue);
   return <Typography {...props} dangerouslySetInnerHTML={{ __html: value && value !== null ? value : defaultValue }} />;
-};
+}
 
-export type ContentWrapperProps = {
+type ContentWrapperProps = PropsWithChildren<{
   title: string | boolean;
-  children: React.ReactNode;
-};
+}>;
 
-const ContentWrapper = ({ title, children }: ContentWrapperProps) => {
+function ContentWrapper({ title, children }: ContentWrapperProps): JSX.Element | null {
   if (children === null || children === undefined) return null;
   if (typeof title === 'string' || title === true) {
     return (
@@ -54,19 +53,9 @@ const ContentWrapper = ({ title, children }: ContentWrapperProps) => {
     );
   }
   return children as React.ReactElement<any, any>;
-};
-
-export type ReadonlyFieldProps = {
-  defaultValue: any;
-  tooltip: string | boolean | ((record: any) => string);
-  source: string;
-  label: string;
-  name: string;
-  children: React.ReactElement<any, any>;
-  fullWidth?: boolean;
-};
+}
 
-export function ReadonlyField({
+function ReadonlyField({
   label,
   source,
   defaultValue = '&nbsp;',
@@ -74,9 +63,11 @@ export function ReadonlyField({
   tooltip: _tooltip,
   ...props
 }: ReadonlyFieldProps): JSX.Element {
-  const { getCurrentDialog } = useAppConfig();
+  const Child = Children.only(children);
+  const { getCurrentDialog } = useAppState();
   const record = useRecordContext(props);
   const resource = useResourceContext(props as any);
+  // WARN: This is a hack to get the resource from the dialog, but it's not the best way to do it.
   const dialogResource = getCurrentDialog();
 
   const tooltip = useMemo(() => {
@@ -91,22 +82,35 @@ export function ReadonlyField({
   const sx = useSx(props, { width: props?.fullWidth ? '100%' : 'auto' });
   return (
     <ContentWrapper title={tooltip}>
-      <Fragment>
+      <>
         <InputLabel sx={{ pt: 1 }}>
           <FieldTitle label={label} source={source} resource={dialogResource || resource} />
         </InputLabel>
         <StyledField {...props}>
-          {React.cloneElement(children, {
-            source,
-            record,
-            defaultValue,
-            resource: dialogResource || resource,
-            sx
-          })}
+          {React.isValidElement(Child)
+            ? React.cloneElement(Child, {
+                ...Child.props,
+                source,
+                record,
+                defaultValue,
+                resource: dialogResource || resource,
+                sx
+              })
+            : null}
         </StyledField>
-      </Fragment>
+      </>
     </ContentWrapper>
   );
 }
 
-export default ReadonlyField;
+type ReadonlyFieldProps = PropsWithChildren<{
+  defaultValue: any;
+  tooltip: string | boolean | ((record: any) => string);
+  source: string;
+  label: string;
+  name: string;
+  fullWidth?: boolean;
+}>;
+
+export { ReadonlyField };
+export type { ReadonlyFieldProps };

package/src/components/ra-fields/ReferenceManyField.tsx

@@ -1,6 +1,10 @@
-import { Pagination, ReferenceManyField as RaReferenceManyField, ReferenceManyFieldProps as RaReferenceManyFieldProps } from 'react-admin';
 import { styled } from '@mui/system';
 import React from 'react';
+import {
+  Pagination,
+  ReferenceManyField as RaReferenceManyField,
+  ReferenceManyFieldProps as RaReferenceManyFieldProps
+} from 'react-admin';
 
 type StyledDivProps = {
   children?: React.ReactNode;
@@ -10,9 +14,10 @@ type StyledRootProps = ReferenceManyFieldProps & {
   theme?: any;
   bulkActionButtons?: boolean | any;
 };
-const StyledDiv = function ({ children = null, className = '' }: StyledDivProps) {
+
+function StyledDiv({ children = null, className = '' }: StyledDivProps) {
   return <div className={className}>{children}</div>;
-};
+}
 
 const StyledRoot = styled(StyledDiv, { slot: 'root' })(({ theme, bulkActionButtons }: StyledRootProps) => {
   return {
@@ -71,14 +76,6 @@ const StyledRoot = styled(StyledDiv, { slot: 'root' })(({ theme, bulkActionButto
   };
 });
 
-export type ReferenceManyFieldProps = RaReferenceManyFieldProps & {
-  /**
-   * Default undefined, serve ad aggiungere un padding superiore al componente per consentire
-   * la visualizzazione della toolbar delle bulk action buttons.
-   */
-  bulkActionButtons?: boolean | any;
-};
-
 /**
  * This component allows you to manage the display of a list of records related to a main record.
  * This component is a customized version of the ReferenceManyField component of React-Admin.
@@ -97,7 +94,7 @@ export type ReferenceManyFieldProps = RaReferenceManyFieldProps & {
  *   </Datagrid>
  * </ReferenceManyField>
  */
-export function ReferenceManyField(props: ReferenceManyFieldProps): JSX.Element {
+function ReferenceManyField(props: ReferenceManyFieldProps): JSX.Element {
   return (
     <StyledRoot {...props}>
       {/** @ts-ignore */}
@@ -106,4 +103,13 @@ export function ReferenceManyField(props: ReferenceManyFieldProps): JSX.Element
   );
 }
 
-export default ReferenceManyField;
+type ReferenceManyFieldProps = RaReferenceManyFieldProps & {
+  /**
+   * Default undefined, serve ad aggiungere un padding superiore al componente per consentire
+   * la visualizzazione della toolbar delle bulk action buttons.
+   */
+  bulkActionButtons?: boolean | any;
+};
+
+export { ReferenceManyField };
+export type { ReferenceManyFieldProps };

package/src/components/ra-fields/SizeField.tsx

@@ -2,11 +2,7 @@ import { Typography } from '@mui/material';
 import { get } from 'lodash';
 import { FieldProps, useRecordContext } from 'react-admin';
 
-export type SizeFieldProps = {
-  source: string;
-} & FieldProps;
-
-export function SizeField({ source, ...props }: SizeFieldProps): JSX.Element {
+function SizeField({ source, ...props }: SizeFieldProps): JSX.Element {
   const record = useRecordContext(props);
   const size = get(record, source, 0);
   const sizeInKb = size / 1024;
@@ -28,4 +24,9 @@ export function SizeField({ source, ...props }: SizeFieldProps): JSX.Element {
   );
 }
 
-export default SizeField;
+type SizeFieldProps = {
+  source: string;
+} & FieldProps;
+
+export { SizeField };
+export type { SizeFieldProps };

package/src/components/ra-fields/TextField.tsx

@@ -1,11 +1,12 @@
-import { TextField as RaTextField, TextFieldProps } from 'react-admin';
 import { styled } from '@mui/material/styles';
+import { TextField as RaTextField, TextFieldProps } from 'react-admin';
 
 const StyledTextField = styled(RaTextField, { slot: 'Root' })(() => ({}));
 
-export function TextField({ variant = 'body1', ...props }: TextFieldProps): JSX.Element {
+function TextField({ variant = 'body1', ...props }: TextFieldProps): JSX.Element {
   // @ts-ignore
   return <StyledTextField {...props} variant={variant} />;
 }
 
-export default TextField;
+export { TextField };
+export type { TextFieldProps };