@applica-software-guru/react-admin 1.3.182 → 1.3.184

package/src/components/ra-custom/ListItem.tsx

@@ -1,8 +1,6 @@
 import { Button, ButtonProps, Stack, Typography } from '@mui/material';
 import { FieldTitle, useRecordContext, useResourceContext } from 'ra-core';
 import React, { ElementType } from 'react';
-
-import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import { useAppConfig } from '../../hooks';
 
@@ -47,10 +45,10 @@ const defaultIconStyle = {
  * @param {ListItemProps} props
  * @returns {JSX.Element}
  */
-const ListItem = ({
+export function ListItem({
   source,
   label,
-  variant,
+  variant = 'body1',
   record: providedRecord,
   spaceBottom,
   spaceTop,
@@ -60,7 +58,7 @@ const ListItem = ({
   button,
   buttonProps,
   ...props
-}: ListItemProps): JSX.Element => {
+}: ListItemProps): JSX.Element {
   const { getCurrentDialog } = useAppConfig();
   const resource = useResourceContext(props as any);
   const dialogResource = getCurrentDialog();
@@ -109,39 +107,6 @@ const ListItem = ({
       </Stack>
     </Stack>
   );
-};
-
-ListItem.propTypes = {
-  source: PropTypes.string,
-  label: PropTypes.string,
-  record: PropTypes.object,
-  variant: PropTypes.oneOf([
-    'body1',
-    'body2',
-    'caption',
-    'button',
-    'h1',
-    'h2',
-    'h3',
-    'h4',
-    'h5',
-    'h6',
-    'inherit',
-    'overline',
-    'subtitle1',
-    'subtitle2'
-  ]),
-  spaceTop: PropTypes.bool,
-  spaceBottom: PropTypes.bool,
-  leftIcon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element, PropTypes.func]),
-  rightIcon: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element, PropTypes.func]),
-  component: PropTypes.oneOfType([PropTypes.elementType, PropTypes.element, PropTypes.func]),
-  buttonProps: PropTypes.object,
-  button: PropTypes.string
-};
-
-ListItem.defaultProps = {
-  variant: 'body1'
-};
+}
 
 export default ListItem;

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

@@ -0,0 +1 @@
+export * from './ListItem';

package/src/components/ra-fields/{ActionsField.jsx → ActionsField.tsx}

@@ -1,9 +1,13 @@
 import { CloneButton, DeleteWithConfirmButton, EditButton } from 'react-admin';
-
 import ActionsMenu from '../ActionsMenu';
-import PropTypes from 'prop-types';
 
-const ActionsField = ({ canEdit, canDelete, canClone }) => {
+export type ActionsFieldProps = {
+  canEdit?: boolean;
+  canDelete?: boolean;
+  canClone?: boolean;
+};
+
+export function ActionsField({ canEdit = true, canDelete = true, canClone = false }: ActionsFieldProps): JSX.Element | null {
   if (!canEdit && !canDelete && !canClone) {
     return null;
   }
@@ -15,18 +19,6 @@ const ActionsField = ({ canEdit, canDelete, canClone }) => {
       {canClone && <CloneButton />}
     </ActionsMenu>
   );
-};
-
-ActionsField.defaultProps = {
-  canEdit: true,
-  canDelete: true,
-  canClone: false
-};
-
-ActionsField.propTypes = {
-  canEdit: PropTypes.bool,
-  canDelete: PropTypes.bool,
-  canClone: PropTypes.bool
-};
+}
 
 export default ActionsField;

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

@@ -1,9 +1,8 @@
 import BaseAttachmentField, { BaseAttachmentFieldProps } from './BaseAttachmentField';
 import { Box, Typography } from '@mui/material';
-import { FileField as RaFileField, useDataProvider, useRecordContext, useResourceContext, useTranslate } from 'react-admin';
+import { useDataProvider, useRecordContext, useResourceContext, useTranslate } from 'react-admin';
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
-import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
 import { get } from 'lodash';
 
@@ -23,14 +22,14 @@ export type AttachmentFieldProps = BaseAttachmentFieldProps & {
   showUser?: boolean;
 };
 
-const AttachmentField = ({
+export function AttachmentField({
   entityId,
   property,
   disabled,
   showUser = false,
   userResource = 'entities/user',
   ...props
-}: AttachmentFieldProps) => {
+}: AttachmentFieldProps): JSX.Element {
   const [user, setUser] = useState<any>(null);
   const record = useRecordContext(props);
   const dataProvider = useDataProvider();
@@ -91,14 +90,5 @@ const AttachmentField = ({
       }
     />
   );
-};
-
-AttachmentField.propTypes = {
-  // @ts-ignore
-  ...RaFileField.propTypes,
-  source: PropTypes.string,
-  title: PropTypes.string,
-  disabled: PropTypes.bool
-};
-
+}
 export default AttachmentField;

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

@@ -1,6 +1,4 @@
 import { useRecordContext, useTranslate } from 'ra-core';
-
-import PropTypes from 'prop-types';
 import { Typography } from '@mui/material';
 import { get } from 'lodash';
 import { styled } from '@mui/material/styles';
@@ -31,7 +29,7 @@ export type BaseAttachmentFieldProps = {
   onClick: (e: any) => void;
 };
 
-export const BaseAttachmentField = (props: BaseAttachmentFieldProps): JSX.Element | any => {
+export function BaseAttachmentField(props: BaseAttachmentFieldProps): JSX.Element | any {
   const { className, emptyText, source, title, ...rest } = props;
   const record = useRecordContext(props);
   const sourceValue = get(record, source);
@@ -65,18 +63,6 @@ export const BaseAttachmentField = (props: BaseAttachmentFieldProps): JSX.Elemen
       {titleValue}
     </Root>
   );
-};
-
-BaseAttachmentField.propTypes = {
-  className: PropTypes.string,
-  emptyText: PropTypes.string,
-  source: PropTypes.string.isRequired,
-  src: PropTypes.string,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-  target: PropTypes.string,
-  download: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  ping: PropTypes.string,
-  rel: PropTypes.string
-};
+}
 
 export default BaseAttachmentField;

package/src/components/ra-fields/{CoverField.jsx → CoverField.tsx}

@@ -1,9 +1,13 @@
-import React, { useMemo } from 'react';
-
-import ImageField from './ImageField';
-import PropTypes from 'prop-types';
-import { useRecordContext } from 'react-admin';
+import { useMemo } from 'react';
+import { ImageField } from './ImageField';
+import { FieldProps, useRecordContext } from 'react-admin';
 
+export 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).
  *
@@ -20,14 +24,14 @@ import { useRecordContext } from 'react-admin';
  * // With custom width/height:
  * <CoverField source="image" width={100} height={100} />
  */
-const CoverField = ({
-  width: defaultWidth,
-  height: defaultHeight,
-  circle: defaultCircle,
-  justify: defaultJustify,
+export function CoverField({
+  width: defaultWidth = 150,
+  height: defaultHeight = 150,
+  circle: defaultCircle = false,
+  justify: defaultJustify = 'flex-start',
   record: _propRecord,
   ...props
-}) => {
+}: CoverFieldProps): JSX.Element {
   const sx = useMemo(
     () => ({
       width: typeof defaultWidth === 'number' ? `${defaultWidth}px !important` : `${defaultWidth} !important`,
@@ -41,7 +45,7 @@ const CoverField = ({
 
   return (
     <ImageField
-      sx={(theme) => ({
+      sx={(theme: any) => ({
         margin: 0,
         display: 'flex',
         justifyContent: defaultJustify,
@@ -58,20 +62,5 @@ const CoverField = ({
       record={record}
     />
   );
-};
-CoverField.defaultProps = {
-  ...ImageField.defaultProps,
-  width: 150,
-  height: 150,
-  circle: false,
-  justify: 'flex-start'
-};
-CoverField.propTypes = {
-  ...ImageField.propTypes,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  circle: PropTypes.bool,
-  justify: PropTypes.oneOf(['flex-start', 'center', 'flex-end'])
-};
-
+}
 export default CoverField;

package/src/components/ra-fields/{DateAgoField.jsx → DateAgoField.tsx}

@@ -1,7 +1,5 @@
-import { DateField, useLocaleState, useRecordContext } from 'react-admin';
-import React, { Fragment, useMemo } from 'react';
-
-import PropTypes from 'prop-types';
+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';
@@ -11,7 +9,11 @@ import 'dayjs/locale/it';
 
 dayjs.extend(relativeTime);
 
-const DateAgoField = (props) => {
+export type DateAgoFieldProps = {
+  source: string;
+} & DateFieldProps;
+
+export 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]);
@@ -25,10 +27,5 @@ const DateAgoField = (props) => {
       </Typography>
     </Fragment>
   );
-};
-DateAgoField.displayName = 'DateAgoField';
-DateAgoField.propTypes = {
-  source: PropTypes.string.isRequired
-};
-
+}
 export default DateAgoField;

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

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

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

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

package/src/components/ra-fields/{FileField.jsx → FileField.tsx}

@@ -1,6 +1,4 @@
-import { FileField as RaFileField, useRecordContext } from 'react-admin';
-
-import PropTypes from 'prop-types';
+import { FileField as RaFileField, FileFieldProps as RaFileFieldProps, useRecordContext } from 'react-admin';
 import { get } from 'lodash';
 import { styled } from '@mui/material/styles';
 import { useCallback } from 'react';
@@ -10,13 +8,18 @@ const StyledFileField = styled(RaFileField, {
   slot: 'root'
 })(() => ({}));
 
+export type FileFieldProps = {
+  source: string;
+  title: string;
+} & RaFileFieldProps;
+
 /**
  * This component works with Base64 files.
  */
-const FileField = ({ ...props }) => {
+export function FileField({ ...props }: FileFieldProps): JSX.Element {
   const record = useRecordContext(props);
   const handleClick = useCallback(
-    (event) => {
+    (event: Event) => {
       event.preventDefault();
       event.stopPropagation();
       const base64 = get(record, `_${props?.source}`, get(record, props?.source));
@@ -28,13 +31,14 @@ const FileField = ({ ...props }) => {
     },
     [props?.source, record, props?.title]
   );
-  return <StyledFileField {...props} record={record} onClick={handleClick} />;
-};
-
-FileField.propTypes = {
-  ...RaFileField.propTypes,
-  source: PropTypes.string,
-  title: PropTypes.string
-};
+  return (
+    <StyledFileField
+      {...props}
+      record={record}
+      // @ts-ignore
+      onClick={handleClick}
+    />
+  );
+}
 
 export default FileField;

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

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

package/src/components/ra-fields/{ImageField.jsx → ImageField.tsx}

@@ -1,5 +1,4 @@
-import PropTypes from 'prop-types';
-import { ImageField as RaImageField } from 'react-admin';
+import { ImageFieldProps, ImageField as RaImageField } from 'react-admin';
 import { styled } from '@mui/material/styles';
 
 const StyledImageField = styled(RaImageField, {
@@ -7,14 +6,9 @@ const StyledImageField = styled(RaImageField, {
   slot: 'root'
 })(() => ({}));
 
-const ImageField = (props) => {
+export function ImageField(props: ImageFieldProps): JSX.Element {
   const source = `_${props?.source}`;
   return <StyledImageField {...props} source={source} />;
-};
-
-ImageField.propTypes = {
-  ...RaImageField.propTypes,
-  source: PropTypes.string
-};
+}
 
 export default ImageField;

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

@@ -2,16 +2,16 @@ import _ from 'lodash';
 import { TextFieldProps } from 'ra-ui-materialui';
 import { Stack, Typography, useTheme } from '@mui/material';
 import { useLocaleState, useLocales, useRecordContext } from 'ra-core';
-import TextField from './TextField';
+import { TextField } from './TextField';
 import { FlagOutlined, FlagFilled } from '@ant-design/icons';
 import { useSx } from '../../hooks';
 import { localizedValueHasAllLocales } from '../../utils';
 import { ReactElement, useMemo } from 'react';
 import { Tooltip } from '../@extended';
 
-type ILocalizedTextFieldProps = TextFieldProps;
+export type ILocalizedTextFieldProps = TextFieldProps;
 
-function LocalizedTextField(props: ILocalizedTextFieldProps) {
+export function LocalizedTextField(props: ILocalizedTextFieldProps): JSX.Element {
   const theme = useTheme(),
     locales = useLocales(),
     { source = '' } = props,

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

@@ -66,14 +66,14 @@ export type ReadonlyFieldProps = {
   fullWidth?: boolean;
 };
 
-const ReadonlyField = ({
+export function ReadonlyField({
   label,
   source,
   defaultValue = ' ',
   children = <BasicField source={''} defaultValue={undefined} record={undefined} />,
   tooltip: _tooltip,
   ...props
-}: ReadonlyFieldProps) => {
+}: ReadonlyFieldProps): JSX.Element {
   const { getCurrentDialog } = useAppConfig();
   const record = useRecordContext(props);
   const resource = useResourceContext(props as any);
@@ -107,5 +107,6 @@ const ReadonlyField = ({
       </Fragment>
     </ContentWrapper>
   );
-};
+}
+
 export default ReadonlyField;

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

@@ -1,39 +1,19 @@
-import PropTypes from 'prop-types';
 import { Pagination, ReferenceManyField as RaReferenceManyField, ReferenceManyFieldProps as RaReferenceManyFieldProps } from 'react-admin';
 import { styled } from '@mui/system';
 import React from 'react';
 
-export type StyledDivProps = {
+type StyledDivProps = {
   children?: React.ReactNode;
   className?: string;
 };
-
-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;
-};
-
-export type StyledRootProps = ReferenceManyFieldProps & {
+type StyledRootProps = ReferenceManyFieldProps & {
   theme?: any;
   bulkActionButtons?: boolean | any;
 };
-const StyledDiv = function ({ children, className }: StyledDivProps) {
+const StyledDiv = function ({ children = null, className = '' }: StyledDivProps) {
   return <div className={className}>{children}</div>;
 };
 
-StyledDiv.defaultProps = {
-  children: null,
-  className: ''
-};
-
-StyledDiv.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-
 const StyledRoot = styled(StyledDiv, {
   name: 'RaApplicaReferenceManyField',
   slot: 'root'
@@ -95,14 +75,21 @@ const StyledRoot = styled(StyledDiv, {
   };
 });
 
+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;
+};
+
 /**
- * Consente di gestire la visualizzazione di una lista di record correlati ad un record principale.
- * Questo componente è una versione customizzata del componente ReferenceManyField di React-Admin.
+ * 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.
  *
- * Se vuoi visualizzare record e non mostrare l'elenco delle azioni disponibili (bulk action buttons)
- * puoi impostare la prop bulkActionButtons a false e, successivamente, se utilizzi un componente interno di tipo <Datagrid />
- * devi impostare la stessa proprietà, bulkActionButtons, a false (in questo modo viene completamente eliminato il padding
- * superiore del componente <Datagrid />).
+ * If you want to display records and not show the list of available actions (bulk action buttons)
+ * you can set the bulkActionButtons prop to false and, subsequently, if you use an internal component of type <Datagrid />
+ * you must set the same property, bulkActionButtons, to false (in this way the top padding of the <Datagrid /> component is completely removed).
  *
  * @example
  * import { ReferenceManyField, Datagrid } from '@applica-software-guru/react-admin';
@@ -117,11 +104,13 @@ const StyledRoot = styled(StyledDiv, {
  * @param props {ReferenceManyFieldProps}
  * @returns {JSX.Element}
  */
-const ReferenceManyField = (props: ReferenceManyFieldProps) => (
-  <StyledRoot {...props}>
-    {/** @ts-ignore */}
-    <RaReferenceManyField pagination={<Pagination />} {...props} />
-  </StyledRoot>
-);
+export function ReferenceManyField(props: ReferenceManyFieldProps): JSX.Element {
+  return (
+    <StyledRoot {...props}>
+      {/** @ts-ignore */}
+      <RaReferenceManyField pagination={<Pagination />} {...props} />
+    </StyledRoot>
+  );
+}
 
 export default ReferenceManyField;

package/src/components/ra-fields/{SizeField.jsx → SizeField.tsx}

@@ -1,8 +1,12 @@
-import PropTypes from 'prop-types';
 import { Typography } from '@mui/material';
 import { get } from 'lodash';
-import { useRecordContext } from 'react-admin';
-const SizeField = ({ source, ...props }) => {
+import { FieldProps, useRecordContext } from 'react-admin';
+
+export type SizeFieldProps = {
+  source: string;
+} & FieldProps;
+
+export function SizeField({ source, ...props }: SizeFieldProps): JSX.Element {
   const record = useRecordContext(props);
   const size = get(record, source, 0);
   const sizeInKb = size / 1024;
@@ -22,11 +26,6 @@ const SizeField = ({ source, ...props }) => {
       {value}
     </Typography>
   );
-};
-
-SizeField.propTypes = {
-  record: PropTypes.object,
-  source: PropTypes.string
-};
+}
 
 export default SizeField;

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

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

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

@@ -0,0 +1,14 @@
+export * from './ActionsField';
+export * from './AttachmentField';
+export * from './CoverField';
+export * from './DateAgoField';
+export * from './DateField';
+export * from './EmailField';
+export * from './FileField';
+export * from './FunctionField';
+export * from './ImageField';
+export * from './LocalizedTextField';
+export * from './ReadonlyField';
+export * from './ReferenceManyField';
+export * from './SizeField';
+export * from './TextField';