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

package/src/components/ra-forms/TabbedForm.tsx

@@ -1,3 +1,5 @@
+import { Box } from '@mui/material';
+import { styled } from '@mui/system';
 import {
   TabbedForm as RaTabbedForm,
   TabbedFormProps as RaTabbedFormProps,
@@ -5,12 +7,10 @@ import {
   SaveButton,
   TabProps
 } from 'react-admin';
-import MainCard from '../MainCard';
 import { useResourceTitle } from '../../hooks';
-import Toolbar from './Toolbar';
-import { styled } from '@mui/system';
 import ActionsMenu from '../ActionsMenu';
-import { Box } from '@mui/material';
+import MainCard from '../MainCard';
+import Toolbar from './Toolbar';
 
 export type TabbedFormProps = RaTabbedFormProps & {
   modal?: boolean;
@@ -40,10 +40,30 @@ const StyledTabbedForm = styled(RaTabbedForm, {
   }
 }));
 
-const TabbedFormWithNoPadding = ({ children }: { children: React.ReactNode }) => <>{children}</>;
+function TabbedFormWithNoPadding({ children }: { children: React.ReactNode }): JSX.Element {
+  return <>{children}</>;
+}
 
-const TabbedForm = (props: TabbedFormProps) => {
-  const { title: _title, modal, content, subheader, secondary, sx, noPadding, ...rest } = props;
+export function TabbedForm(props: TabbedFormProps): JSX.Element {
+  const {
+    title: _title,
+    modal,
+    content,
+    subheader,
+    secondary = (
+      <ActionsMenu>
+        <DeleteWithConfirmButton />
+      </ActionsMenu>
+    ),
+    sx,
+    noPadding,
+    toolbar = (
+      <Toolbar>
+        <SaveButton type="button" />
+      </Toolbar>
+    ),
+    ...rest
+  } = props;
   const title = useResourceTitle(_title);
 
   return (
@@ -72,10 +92,10 @@ const TabbedForm = (props: TabbedFormProps) => {
       divider
     >
       {/** @ts-ignore */}
-      <StyledTabbedForm toolbar={<Toolbar />} component={noPadding ? TabbedFormWithNoPadding : undefined} {...rest} />
+      <StyledTabbedForm toolbar={toolbar} component={noPadding ? TabbedFormWithNoPadding : undefined} {...rest} />
     </MainCard>
   );
-};
+}
 export type StackTabProps = TabProps & {
   children: React.ReactNode;
 };
@@ -84,24 +104,13 @@ export type StackTabProps = TabProps & {
  * Useful when you have tabbed form with noPadding and you want to add padding to the tabs.
  * This component render inside a TabbedForm with noPadding and add padding to the tabs.
  */
-const TabStack = ({ children, ...props }: StackTabProps): JSX.Element => (
-  <RaTabbedForm.Tab {...props}>
-    <Box sx={{ width: '100%', p: 2.5 }}>{children}</Box>
-  </RaTabbedForm.Tab>
-);
-
-TabbedForm.defaultProps = {
-  toolbar: (
-    <Toolbar>
-      <SaveButton type="button" />
-    </Toolbar>
-  ),
-  secondary: (
-    <ActionsMenu>
-      <DeleteWithConfirmButton />
-    </ActionsMenu>
-  )
-};
+function TabStack({ children, ...props }: StackTabProps): JSX.Element {
+  return (
+    <RaTabbedForm.Tab {...props}>
+      <Box sx={{ width: '100%', p: 2.5 }}>{children}</Box>
+    </RaTabbedForm.Tab>
+  );
+}
 
 TabbedForm.Tab = RaTabbedForm.Tab;
 TabbedForm.TabStack = TabStack;

package/src/components/ra-forms/TableForm/TableFormIterator.tsx

@@ -19,7 +19,6 @@ import { FormDataConsumer, RaRecord, useRecordContext, useTranslate, useTranslat
 import { styled, useTheme } from '@mui/material/styles';
 import ActionsMenu from '../../ActionsMenu';
 import { PlusCircleOutlined } from '@ant-design/icons';
-import PropTypes from 'prop-types';
 import { TableFormIteratorContext } from '../../../contexts';
 import { TableFormIteratorItem } from './TableFormIteratorItem';
 import { UseFieldArrayReturn, useFormContext } from 'react-hook-form';
@@ -43,7 +42,7 @@ import get from 'lodash/get';
  * @param props
  * @returns
  */
-const TableFormIterator = (props: TableFormIteratorProps) => {
+export function RawTableFormIterator(props: TableFormIteratorProps): ReactElement | null {
   const {
     children,
     resource,
@@ -252,9 +251,9 @@ const TableFormIterator = (props: TableFormIteratorProps) => {
       </div>
     </TableFormIteratorContext.Provider>
   ) : null;
-};
+}
 
-const AddTableRow = (props: any) => {
+function AddTableRow(props: any): JSX.Element {
   const { label, disableAdd, onClick, inset } = props;
   const theme = useTheme();
   // @ts-ignore
@@ -276,9 +275,9 @@ const AddTableRow = (props: any) => {
         ))}
     </Stack>
   );
-};
+}
 
-const StyledTableFormIterator = styled(TableFormIterator, {
+export const TableFormIterator = styled(RawTableFormIterator, {
   name: 'RaApplicaTableFormIterator',
   slot: 'Root'
 })(({ theme }) => ({
@@ -295,33 +294,6 @@ const StyledTableFormIterator = styled(TableFormIterator, {
   }
 }));
 
-AddTableRow.propTypes = {
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  source: PropTypes.string,
-  defaultValue: PropTypes.any
-};
-
-TableFormIterator.propTypes = {
-  addButton: PropTypes.element,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  field: PropTypes.object,
-  fields: PropTypes.array,
-  fieldState: PropTypes.object,
-  formState: PropTypes.object,
-  record: PropTypes.object,
-  source: PropTypes.string,
-  label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  resource: PropTypes.string,
-  translate: PropTypes.func,
-  disableAdd: PropTypes.bool,
-  enableClearAll: PropTypes.bool,
-  disableRemove: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
-  TransitionProps: PropTypes.shape({}),
-  empty: PropTypes.oneOfType([PropTypes.node, PropTypes.string]),
-  template: PropTypes.object
-};
-
 export interface TableFormIteratorProps extends Partial<UseFieldArrayReturn> {
   addButton?: ReactElement;
   children?: ReactNode;
@@ -345,4 +317,4 @@ export interface TableFormIteratorProps extends Partial<UseFieldArrayReturn> {
   inset?: boolean;
 }
 
-export default StyledTableFormIterator;
+export default TableFormIterator;

package/src/components/ra-forms/TableForm/TableFormIteratorItem.tsx

@@ -1,12 +1,11 @@
-import * as React from 'react';
-
 import { Children, ReactElement, ReactNode, cloneElement, isValidElement, useMemo } from 'react';
 import { Confirm, useTranslate } from 'react-admin';
+import { RaRecord } from 'ra-core';
 import { Stack, TableCell, Typography } from '@mui/material';
 import { TableFormIteratorItemContext, TableFormIteratorItemContextValue } from '../../../contexts';
-import ActionsMenu from '../../ActionsMenu';
-import { RaRecord } from 'ra-core';
 import { useTableFormIterator } from '../../../hooks';
+import * as React from 'react';
+import ActionsMenu from '../../ActionsMenu';
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const TableFormIteratorItem = React.forwardRef((props: TableFormIteratorItemProps, ref: any) => {

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

@@ -1,4 +1,2 @@
-import TableFormIterator from './TableFormIterator';
+export * from './TableFormIterator';
 export * from './TableFormIteratorItem';
-
-export default TableFormIterator;

package/src/components/ra-forms/{Toolbar.jsx → Toolbar.tsx}

@@ -1,10 +1,10 @@
-import { Toolbar as RaToolbar } from 'react-admin';
 import { styled } from '@mui/system';
+import { Toolbar as RaToolbar, ToolbarProps } from 'react-admin';
 
 const StyledToolbar = styled(RaToolbar, {
   name: 'RaApplicaToolbar',
   slot: 'Root'
-})(({ theme }) => ({
+})(({ theme }: { theme: any }) => ({
   ...theme.mixins.toolbar,
   backgroundColor: theme.palette.background.paper,
   justifyContent: 'flex-end',
@@ -21,14 +21,9 @@ const StyledToolbar = styled(RaToolbar, {
   }
 }));
 
-const Toolbar = (props) => <StyledToolbar {...props} />;
-
-Toolbar.defaultProps = {
-  ...RaToolbar.defaultProps
-};
-
-Toolbar.propTypes = {
-  ...RaToolbar.propTypes
-};
+export function Toolbar(props: ToolbarProps): JSX.Element {
+  // @ts-ignore
+  return <StyledToolbar {...props} />;
+}
 
 export default Toolbar;

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

@@ -0,0 +1,12 @@
+export * from './CardForm';
+export * from './ChangePasswordForm';
+export * from './Create';
+export * from './Edit';
+export * from './FormHeader';
+export * from './LongForm';
+export * from './Show';
+export * from './SimpleForm';
+export * from './SimpleFormIterator';
+export * from './TabbedForm';
+export * from './TableForm';
+export * from './Toolbar';

package/src/components/ra-inputs/ArrayInput.tsx

@@ -1,7 +1,6 @@
-import LabeledArrayInput, { LabeledArrayInputProps } from './LabeledArrayInput';
 import { ArrayInput as RaArrayInput, ArrayInputProps as RaArrayInputProps } from 'react-admin';
-
 import { styled } from '@mui/material/styles';
+import LabeledArrayInput, { LabeledArrayInputProps } from './LabeledArrayInput';
 
 const StyledArrayInput = styled(RaArrayInput, {
   name: 'ApplicaArrayInput',
@@ -34,17 +33,18 @@ export type ArrayInputProps = RaArrayInputProps &
  * @param {ArrayInputProps}
  * @returns {React.ReactElement}
  */
-const ArrayInput = ({ label, addLabel, source, helperText, divider = true, ...props }: ArrayInputProps): React.ReactElement => (
-  <LabeledArrayInput
-    label={label}
-    addLabel={addLabel}
-    source={source}
-    helperText={helperText}
-    divider={divider}
-    fullWidth={props?.fullWidth}
-  >
-    <StyledArrayInput source={source} label={false} {...props} />
-  </LabeledArrayInput>
-);
-
+export function ArrayInput({ label, addLabel, source, helperText, divider = true, ...props }: ArrayInputProps): React.ReactElement {
+  return (
+    <LabeledArrayInput
+      label={label}
+      addLabel={addLabel}
+      source={source}
+      helperText={helperText}
+      divider={divider}
+      fullWidth={props?.fullWidth}
+    >
+      <StyledArrayInput source={source} label={false} {...props} />
+    </LabeledArrayInput>
+  );
+}
 export default ArrayInput;

package/src/components/ra-inputs/AttachmentInput.tsx

@@ -1,11 +1,8 @@
-/* eslint-disable no-console */
-import { FileInputProps, FileInput as RaFileInput, useInput, useRecordContext } from 'react-admin';
-
 import { AttachmentField } from '../ra-fields';
+import { FileInputProps, FileInput as RaFileInput, useInput, useRecordContext } from 'react-admin';
+import { styled } from '@mui/material/styles';
 import LabeledInput from './LabeledInput';
-import PropTypes from 'prop-types';
 import React from 'react';
-import { styled } from '@mui/material/styles';
 
 const removeDeleteIfNecessary = (disabled: boolean) => {
   if (disabled) {
@@ -56,7 +53,7 @@ export type AttachmentInputProps = FileInputProps & {
 };
 
 /**
- * Consente di definire un campo di tipo input all'interno del quale è possibile caricare uno o più file.
+ * Allows you to define an input field inside which you can upload one or more files.
  *
  * @example
  * <AttachmentInput source="attachments" title="name" accept="image/*" multiple>
@@ -64,33 +61,28 @@ export type AttachmentInputProps = FileInputProps & {
  * @param {AttachmentInputProps}
  * @returns
  */
-const AttachmentInput = ({ children, disabled, type, ...props }: AttachmentInputProps): JSX.Element => {
+export function AttachmentInput({
+  // @ts-ignore
+  children = <AttachmentField title="name" source="path" />,
+  multiple = true,
+  disabled = false,
+  type = 'attachment',
+  ...props
+}: AttachmentInputProps): JSX.Element {
   const record = useRecordContext(props);
   const property = props?.source;
   const entityId = record?.id;
   useInput({ source: `__${type}__${props?.source}`, defaultValue: props?.source });
   return (
     /** @ts-ignore */
-    <LabeledInput {...props}>
+    <LabeledInput {...props} disabled={disabled}>
       {/** @ts-ignore */}
-      <StyledFileInput disabled={disabled}>{React.cloneElement(children, { ...children.props, entityId, property })}</StyledFileInput>
+      <StyledFileInput type={type} multiple={multiple} disabled={disabled}>
+        {/* @ts-ignore */}
+        {React.cloneElement(children, { ...children.props, entityId, property })}
+      </StyledFileInput>
     </LabeledInput>
   );
-};
-
-AttachmentInput.propTypes = {
-  ...RaFileInput.propTypes,
-  children: PropTypes.node,
-  multiple: PropTypes.bool,
-  disabled: PropTypes.bool
-};
-
-AttachmentInput.defaultProps = {
-  /** @ts-ignore */
-  children: <AttachmentField title="name" source="path" />,
-  multiple: true,
-  disabled: false,
-  type: 'attachment'
-};
+}
 
 export default AttachmentInput;

package/src/components/ra-inputs/AutocompleteArrayInput.tsx

@@ -0,0 +1,27 @@
+import { AutocompleteArrayInputProps, AutocompleteArrayInput as RaAutocompleteArrayInput } from 'react-admin';
+import { styled } from '@mui/material/styles';
+import LabeledInput from './LabeledInput';
+
+// @ts-ignore
+const StyledAutocompleteArrayInput = styled(RaAutocompleteArrayInput, {
+  name: 'StyledAutocompleteInput',
+  root: 'root'
+})(({ label }) => ({
+  '& legend': {
+    width: label === false ? 0 : 'auto'
+  },
+  '& .MuiAutocomplete-inputRoot': {
+    padding: `0px 9px`
+  }
+}));
+
+export function AutocompleteArrayInput({ size = 'small', ...props }: AutocompleteArrayInputProps): JSX.Element {
+  return (
+    // @ts-ignore
+    <LabeledInput {...props}>
+      <StyledAutocompleteArrayInput size={size} />
+    </LabeledInput>
+  );
+}
+
+export default AutocompleteArrayInput;

package/src/components/ra-inputs/{AutocompleteInput.jsx → AutocompleteInput.tsx}

@@ -1,7 +1,8 @@
-import LabeledInput from './LabeledInput';
-import { AutocompleteInput as RaAutocompleteInput } from 'react-admin';
+import { AutocompleteInputProps, AutocompleteInput as RaAutocompleteInput } from 'react-admin';
 import { styled } from '@mui/material/styles';
+import LabeledInput from './LabeledInput';
 
+// @ts-ignore
 const StyledAutocompleteInput = styled(RaAutocompleteInput, {
   name: 'StyledAutocompleteInput',
   root: 'root'
@@ -9,11 +10,7 @@ const StyledAutocompleteInput = styled(RaAutocompleteInput, {
   '& legend': {
     width: label === false ? 0 : 'auto'
   },
-  // '& label.MuiFormLabel-root[data-shrink="false"]': {
-  //   minHeight: '18px'
-  // },
   '& .MuiAutocomplete-inputRoot': {
-    // Serve ad allineare l'altezza di un input di tipo Autocomplete a quella degli altri campi utilizzati.
     padding: `0px 9px`
   },
   '& .MuiOutlinedInput-root.MuiInputBase-sizeSmall': {
@@ -21,24 +18,17 @@ const StyledAutocompleteInput = styled(RaAutocompleteInput, {
   }
 }));
 
-const AutocompleteInput = (props) => {
+export function AutocompleteInput({ size = 'small', ...props }: AutocompleteInputProps): JSX.Element {
   // Sanitize props removing "perPage":
+  // @ts-ignore
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const { perPage, ...rest } = props;
   return (
+    // @ts-ignore
     <LabeledInput {...rest}>
-      <StyledAutocompleteInput />
+      <StyledAutocompleteInput size={size} />
     </LabeledInput>
   );
-};
-AutocompleteInput.propTypes = {
-  ...RaAutocompleteInput.propTypes,
-  ...LabeledInput.propTypes
-};
-
-AutocompleteInput.defaultProps = {
-  ...RaAutocompleteInput.defaultProps,
-  size: 'small'
-};
+}
 
 export default AutocompleteInput;

package/src/components/ra-inputs/{BooleanInput.jsx → BooleanInput.tsx}

@@ -1,21 +1,22 @@
+import { BooleanInputProps, BooleanInput as RaBooleanInput } from 'react-admin';
 import { styled } from '@mui/material/styles';
 import { useTheme } from '@emotion/react';
 import LabeledInput from './LabeledInput';
-import PropTypes from 'prop-types';
-import { BooleanInput as RaBooleanInput } from 'react-admin';
 
-const ApplicaStyledBooleanInput = styled(RaBooleanInput, {
+const StyledBooleanInput = styled(RaBooleanInput, {
   name: 'RaApplicaBooleanInput',
   slot: 'Root'
 })(() => ({
   marginTop: '0 !important'
 }));
 
-const BooleanInput = ({ ...props }) => {
+export function BooleanInput({ ...props }: BooleanInputProps): JSX.Element {
   const theme = useTheme();
   return (
+    // @ts-ignore
     <LabeledInput {...props}>
-      <ApplicaStyledBooleanInput
+      {/** @ts-ignore */}
+      <StyledBooleanInput
         sx={{
           '& .MuiFormControlLabel-root': {
             marginLeft: '0 !important',
@@ -23,21 +24,13 @@ const BooleanInput = ({ ...props }) => {
           },
           '& .MuiSwitch-root': {
             margin: '0 !important',
+            // @ts-ignore
             marginTop: props.display === 'legend' ? 0 : `${theme.spacing(1)} !important`
           }
         }}
       />
     </LabeledInput>
   );
-};
-BooleanInput.defaultProps = {
-  ...RaBooleanInput.defaultProps,
-  ...LabeledInput.defaultProps
-};
-BooleanInput.propTypes = {
-  ...RaBooleanInput.propTypes,
-  ...LabeledInput.propTypes,
-  horizontal: PropTypes.bool
-};
+}
 
 export default BooleanInput;

package/src/components/ra-inputs/DateInput.tsx

@@ -0,0 +1,24 @@
+import { DateInputProps, DateInput as RaDateInput } from 'react-admin';
+import { styled } from '@mui/material/styles';
+import LabeledInput from './LabeledInput';
+
+const StyledDateInput = styled(RaDateInput, {
+  name: 'RaApplicaDateInput',
+  slot: 'root'
+})(({ label }) => ({
+  '& legend': {
+    width: label === false ? 0 : 'auto'
+  }
+}));
+
+export function DateInput(props: DateInputProps): JSX.Element {
+  return (
+    // @ts-ignore
+    <LabeledInput {...props}>
+      {/** @ts-ignore */}
+      <StyledDateInput />
+    </LabeledInput>
+  );
+}
+
+export default DateInput;

package/src/components/ra-inputs/DateTimeInput.tsx

@@ -1,7 +1,6 @@
 import { DateTimeInputProps, DateTimeInput as RaDateTimeInput } from 'react-admin';
-
-import LabeledInput from './LabeledInput';
 import { styled } from '@mui/material/styles';
+import LabeledInput from './LabeledInput';
 
 const StyledDateInput = styled(RaDateTimeInput, {
   name: 'RaApplicaDateTimeInput',
@@ -12,21 +11,14 @@ const StyledDateInput = styled(RaDateTimeInput, {
   }
 }));
 
-const DateTimeInput = (props: DateTimeInputProps) => (
-  /** @ts-ignore */
-  <LabeledInput {...props}>
-    {/** @ts-ignore */}
-    <StyledDateInput />
-  </LabeledInput>
-);
-
-DateTimeInput.propTypes = {
-  ...RaDateTimeInput.propTypes,
-  ...LabeledInput.propTypes
-};
-
-DateTimeInput.defaultProps = {
-  ...LabeledInput.defaultProps
-};
+export function DateTimeInput(props: DateTimeInputProps): JSX.Element {
+  return (
+    /** @ts-ignore */
+    <LabeledInput {...props}>
+      {/** @ts-ignore */}
+      <StyledDateInput />
+    </LabeledInput>
+  );
+}
 
 export default DateTimeInput;

package/src/components/ra-inputs/{FileInput.jsx → FileInput.tsx}

@@ -1,12 +1,10 @@
-import { FileInput as RaFileInput, useRecordContext } from 'react-admin';
-import React, { useMemo } from 'react';
-
 import { FileField } from '../ra-fields';
-import LabeledInput from './LabeledInput';
-import PropTypes from 'prop-types';
+import { FileInput as RaFileInput, FileInputProps as RaFileInputProps, useRecordContext } from 'react-admin';
 import { get } from 'lodash';
 import { styled } from '@mui/material/styles';
 import { useWatch } from 'react-hook-form';
+import LabeledInput from './LabeledInput';
+import React, { useMemo } from 'react';
 
 const StyledFileInput = styled(RaFileInput, {
   name: 'RaApplicaFileInput',
@@ -32,6 +30,12 @@ const StyledFileInput = styled(RaFileInput, {
   }
 }));
 
+export type FileInputProps = {
+  source: string;
+  title?: string;
+  children?: React.ReactNode;
+} & RaFileInputProps;
+
 /**
  * FileInput is designed to be used as single input. It does not support multiple files and
  * can be used only for base64 encoded files using applica framework.
@@ -46,7 +50,7 @@ const StyledFileInput = styled(RaFileInput, {
  * in conjuction with Applica Framework backend API services.
  *
  */
-const FileInput = ({ children, title, ...props }) => {
+export function FileInput({ children = <FileField source="" title="" />, title, ...props }: FileInputProps): JSX.Element {
   const file = useWatch({ name: props.source });
   const record = useRecordContext(props);
   const { source } = props;
@@ -66,33 +70,28 @@ const FileInput = ({ children, title, ...props }) => {
   }, [record, source, file]);
 
   return (
+    // @ts-ignore
     <LabeledInput {...props}>
+      {/* @ts-ignore */}
       <StyledFileInput>
-        {React.cloneElement(children, {
-          ...children.props,
-          title: title || source,
-          source,
-          record: {
-            ...record,
-            [source]: file?.title || get(record, source),
-            [`_${source}`]: file?.src || get(record, `_${source}`),
-            [title || source]: filename
-          }
-        })}
+        {
+          /** @ts-ignore */
+          React.cloneElement(children, {
+            // @ts-ignore
+            ...children.props,
+            title: title || source,
+            source,
+            record: {
+              ...record,
+              [source]: file?.title || get(record, source),
+              [`_${source}`]: file?.src || get(record, `_${source}`),
+              [title || source]: filename
+            }
+          })
+        }
       </StyledFileInput>
     </LabeledInput>
   );
-};
-
-FileInput.propTypes = {
-  ...RaFileInput.propTypes,
-  source: PropTypes.string,
-  title: PropTypes.string,
-  children: PropTypes.node
-};
-
-FileInput.defaultProps = {
-  children: <FileField />
-};
+}
 
 export default FileInput;