@applica-software-guru/react-admin 1.0.39 → 1.0.40

package/package.json

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

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

@@ -0,0 +1,39 @@
+import LabeledArrayInput, { LabeledArrayInputProps } from './LabeledArrayInput';
+import { ArrayInput as RaArrayInput, ArrayInputProps as RaArrayInputProps } from 'react-admin';
+
+import { styled } from '@mui/material/styles';
+
+const StyledArrayInput = styled(RaArrayInput, {
+  name: 'ApplicaArrayInput',
+  slot: 'root'
+})(({ theme }) => ({
+  '& label:first-of-type': {
+    marginTop: theme.spacing(2)
+  },
+  marginTop: '0 !important',
+  '& .RaSimpleFormIterator-line > .RaSimpleFormIterator-form': {
+    paddingBottom: theme.spacing(0.5),
+    '& > div': {
+      width: '100%'
+    }
+  }
+}));
+
+export type ArrayInputProps = RaArrayInputProps & LabeledArrayInputProps;
+
+/**
+ * Espone un componente di tipo ArrayInput con stile grafico di Applica.
+ * Se vuoi utilizzare il componente puro di react-admin puoi usare RaArrayInput esposto nella libreria.
+ *
+ * @param {ArrayInputProps}
+ * @returns {React.ReactElement}
+ */
+const ArrayInput = ({ children, label, addLabel, source, helperText, ...props }: ArrayInputProps): React.ReactElement => (
+  <LabeledArrayInput label={label} addLabel={addLabel} source={source} helperText={helperText} divider>
+    <StyledArrayInput source={source} label={false} {...props}>
+      {children}
+    </StyledArrayInput>
+  </LabeledArrayInput>
+);
+
+export default ArrayInput;

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

@@ -0,0 +1,116 @@
+import { FormHelperText, InputLabel, Stack, SxProps } from '@mui/material';
+
+import { FieldTitle } from 'react-admin';
+import PropTypes from 'prop-types';
+import React from 'react';
+import { useAppConfig } from '../../hooks';
+import { useFormContext } from 'react-hook-form';
+import { useTheme } from '@emotion/react';
+
+export type LabeledArrayInputProps = {
+  label?: string | boolean;
+  addLabel?: boolean;
+  resource?: string;
+  isRequired?: boolean;
+  source: string;
+  display?: 'legend' | 'label';
+  helperText?: string | boolean;
+  divider?: boolean;
+  sx?: SxProps;
+  children: React.ReactElement;
+};
+
+/**
+ * Consente di visualizzare un array di input con un label e un helper text con lo stile del tema Mantis.
+ *
+ * @param {LabeledArrayInputProps}
+ * @returns {React.ReactElement}
+ */
+const LabeledArrayInput = ({
+  label,
+  children,
+  display,
+  helperText,
+  sx,
+  addLabel,
+  divider,
+  ...props
+}: LabeledArrayInputProps): React.ReactElement => {
+  const theme = useTheme() as any;
+  const { getCurrentDialog } = useAppConfig();
+  const { source, resource, isRequired } = props;
+  const { getFieldState, formState } = useFormContext();
+  const { error } = getFieldState(source, formState);
+  const dialogResource = getCurrentDialog();
+
+  return (
+    <Stack
+      spacing={1}
+      sx={{
+        '& .MuiFormHelperText-root': {
+          // @see: https://github.com/marmelab/react-admin/blob/master/packages/ra-ui-materialui/src/input/SelectArrayInput.tsx#L340
+          // the 'invalid' prop is not used inside the react-admin component. This is necessary if we want to support
+          // remove error message colorization when the field is in error state.
+          color: error ? theme.palette.error.main : theme.palette.text.secondary,
+          '& span': {
+            display: 'none'
+          }
+        },
+        ...sx
+      }}
+    >
+      {display === 'label' && label !== false && addLabel !== false && (
+        <InputLabel
+          error={!!error}
+          sx={{
+            borderBottom: divider ? `1px solid ${theme.palette.divider}` : 'none',
+            pb: divider ? 1 : 0,
+            mt: divider ? 1 : 0
+          }}
+        >
+          <FieldTitle label={label} source={source} resource={dialogResource || resource} isRequired={isRequired} />
+        </InputLabel>
+      )}
+      {React.isValidElement(children)
+        ? React.cloneElement(children, {
+            // @ts-ignore
+            ...children.props,
+            ...props,
+            label: display === 'legend' ? label : false
+          })
+        : children}
+      {display === 'label' && helperText && (
+        <FormHelperText
+          sx={{
+            pl: 1.8,
+            pb: 2,
+            marginTop: '0 !important'
+          }}
+          error={!!error}
+        >
+          {helperText}
+        </FormHelperText>
+      )}
+    </Stack>
+  );
+};
+
+LabeledArrayInput.propTypes = {
+  sx: PropTypes.object,
+  children: PropTypes.element,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  addLabel: PropTypes.bool,
+  resource: PropTypes.string,
+  isRequired: PropTypes.bool,
+  source: PropTypes.string,
+  display: PropTypes.oneOf(['legend', 'label']),
+  helperText: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+  divider: PropTypes.bool
+};
+
+LabeledArrayInput.defaultProps = {
+  display: 'label',
+  divider: false
+};
+
+export default LabeledArrayInput;

package/src/components/ra-inputs/LabeledInput.jsx

@@ -42,11 +42,13 @@ const LabeledInput = ({ label, children, display, helperText, sx, addLabel, divi
           <FieldTitle label={label} source={source} resource={dialogResource || resource} isRequired={isRequired} />
         </InputLabel>
       )}
-      {React.cloneElement(children, {
-        ...children.props,
-        ...props,
-        label: display === 'legend' ? label : false
-      })}
+      {React.isValidElement(children)
+        ? React.cloneElement(children, {
+            ...children.props,
+            ...props,
+            label: display === 'legend' ? label : false
+          })
+        : children}
       {display === 'label' && helperText && (
         <FormHelperText
           sx={{

package/src/components/ra-inputs/index.jsx

@@ -1,23 +1,24 @@
-import ArrayInput from './ArrayInput'
-import AttachmentInput from './AttachmentInput'
-import AutocompleteArrayInput from './AutocompleteArrayInput'
-import AutocompleteInput from './AutocompleteInput'
-import BooleanInput from './BooleanInput'
-import DateInput from './DateInput'
-import FileInput from './FileInput'
-import ImageInput from './ImageInput'
-import LabeledInput from './LabeledInput'
-import NumberInput from './NumberInput'
-import RecordInput from './RecordInput'
-import ReferenceArrayInput from './ReferenceArrayInput'
-import ReferenceInput from './ReferenceInput'
-import ReferenceManyInput from './ReferenceManyInput'
-import SearchInput from './SearchInput'
-import SelectArrayInput from './SelectArrayInput'
-import SelectInput from './SelectInput'
-import SmartTextInput from './SmartTextInput'
-import TextInput from './TextInput'
-import TimeInput from './TimeInput'
+import ArrayInput from './ArrayInput';
+import AttachmentInput from './AttachmentInput';
+import AutocompleteArrayInput from './AutocompleteArrayInput';
+import AutocompleteInput from './AutocompleteInput';
+import BooleanInput from './BooleanInput';
+import DateInput from './DateInput';
+import FileInput from './FileInput';
+import ImageInput from './ImageInput';
+import LabeledArrayInput from './LabeledArrayInput';
+import LabeledInput from './LabeledInput';
+import NumberInput from './NumberInput';
+import RecordInput from './RecordInput';
+import ReferenceArrayInput from './ReferenceArrayInput';
+import ReferenceInput from './ReferenceInput';
+import ReferenceManyInput from './ReferenceManyInput';
+import SearchInput from './SearchInput';
+import SelectArrayInput from './SelectArrayInput';
+import SelectInput from './SelectInput';
+import SmartTextInput from './SmartTextInput';
+import TextInput from './TextInput';
+import TimeInput from './TimeInput';
 export {
   ArrayInput,
   AttachmentInput,
@@ -28,6 +29,7 @@ export {
   FileInput,
   ImageInput,
   LabeledInput,
+  LabeledArrayInput,
   NumberInput,
   RecordInput,
   ReferenceArrayInput,
@@ -38,5 +40,5 @@ export {
   SelectInput,
   SmartTextInput,
   TextInput,
-  TimeInput,
-}
+  TimeInput
+};

package/src/index.jsx

@@ -7,6 +7,7 @@ export * from './contexts';
 export * from './utils';
 
 export {
+  ArrayInput as RaArrayInput,
   ArrayInputContext,
   BooleanField,
   BulkDeleteWithConfirmButton,
@@ -41,6 +42,7 @@ export {
   Resource,
   ResourceContextProvider,
   SaveButton,
+  SimpleFormIterator as RaSimpleFormIterator,
   SimpleFormIteratorContext,
   SimpleList,
   SingleFieldList,

package/dist/components/ra-inputs/ArrayInput.d.ts

@@ -1,6 +0,0 @@
-export default ArrayInput;
-declare function ArrayInput(props: any): import("react/jsx-runtime").JSX.Element;
-declare namespace ArrayInput {
-    const propTypes: any;
-}
-//# sourceMappingURL=ArrayInput.d.ts.map

package/dist/components/ra-inputs/ArrayInput.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"ArrayInput.d.ts","sourceRoot":"","sources":["../../../../src/components/ra-inputs/ArrayInput.jsx"],"names":[],"mappings":";AAiBA,iFAIC"}

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

@@ -1,29 +0,0 @@
-import LabeledInput from './LabeledInput';
-import { ArrayInput as RaArrayInput } from 'react-admin';
-import { styled } from '@mui/material/styles';
-
-const StyledArrayInput = styled(RaArrayInput, {
-  name: 'RaApplicaArrayInput',
-  slot: 'root'
-})(({ theme }) => ({
-  marginTop: '0 !important',
-  '& .RaSimpleFormIterator-line > .RaSimpleFormIterator-form': {
-    paddingBottom: theme.spacing(0.5),
-    '& > div': {
-      width: '100%'
-    }
-  }
-}));
-
-const ArrayInput = (props) => (
-  <LabeledInput {...props} divider>
-    <StyledArrayInput {...props} />
-  </LabeledInput>
-);
-
-ArrayInput.propTypes = {
-  ...RaArrayInput.propTypes,
-  ...LabeledInput.propTypes
-};
-
-export default ArrayInput;