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

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

@@ -0,0 +1,44 @@
+import { CoverField } from '../ra-fields';
+import { get } from 'lodash';
+import { ImageInput as RaImageInput, ImageInputProps as RaImageInputProps, useInput, useRecordContext } from 'react-admin';
+import { useWatch } from 'react-hook-form';
+import LabeledInput from './LabeledInput';
+import React from 'react';
+
+export type ImageInputProps = {
+  source: string;
+  title?: string;
+  children?: React.ReactNode;
+  multiple?: boolean;
+} & RaImageInputProps;
+
+export function ImageInput({ children = <CoverField />, title, multiple = false, ...props }: ImageInputProps): JSX.Element {
+  const file = useWatch({ name: props.source });
+  const record = useRecordContext(props);
+  const { source } = props;
+  useInput({ source: `__image__${props?.source}`, defaultValue: props?.source });
+  return (
+    // @ts-ignore
+    <LabeledInput {...props} multiple={multiple}>
+      {/* @ts-ignore */}
+      <RaImageInput accept="image/*">
+        {
+          /** @ts-ignore */
+          React.cloneElement(children, {
+            // @ts-ignore
+            ...children.props,
+            title,
+            source,
+            record: {
+              ...record,
+              [source]: file?.title || get(record, source),
+              [`_${source}`]: file?.src || get(record, `_${source}`)
+            }
+          })
+        }
+      </RaImageInput>
+    </LabeledInput>
+  );
+}
+
+export default ImageInput;

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

@@ -1,11 +1,9 @@
-import { FormHelperText, InputLabel, Stack, SxProps } from '@mui/material';
-
 import { FieldTitle } from 'react-admin';
-import PropTypes from 'prop-types';
-import React from 'react';
+import { FormHelperText, InputLabel, Stack, SxProps } from '@mui/material';
 import { useAppConfig } from '../../hooks';
 import { useFormContext } from 'react-hook-form';
 import { useTheme } from '@emotion/react';
+import React from 'react';
 
 export type LabeledArrayInputProps = {
   label?: string | boolean;
@@ -22,22 +20,19 @@ export type LabeledArrayInputProps = {
 };
 
 /**
- * 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}
+ * Allows you to display an array of inputs with a label and a helper text with the Mantis theme style.
  */
-const LabeledArrayInput = ({
+export function LabeledArrayInput({
   label,
   children,
-  display,
+  display = 'label',
   helperText,
   sx,
   addLabel,
-  divider,
+  divider = false,
   fullWidth,
   ...props
-}: LabeledArrayInputProps): React.ReactElement => {
+}: LabeledArrayInputProps): React.ReactElement {
   const theme = useTheme() as any;
   const { getCurrentDialog } = useAppConfig();
   const { source, resource, isRequired } = props;
@@ -97,24 +92,6 @@ const LabeledArrayInput = ({
       )}
     </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.tsx

@@ -1,10 +1,8 @@
 import { FieldTitle, InputProps, useInput } from 'react-admin';
 import { FormHelperText, InputLabel, Stack } from '@mui/material';
-
-import PropTypes from 'prop-types';
-import React from 'react';
 import { useAppConfig } from '../../hooks';
 import { useTheme } from '@mui/material/styles';
+import React from 'react';
 
 export type LabeledInputProps = InputProps & {
   sx?: any;
@@ -19,7 +17,16 @@ export type LabeledInputProps = InputProps & {
   divider?: boolean;
 };
 
-const LabeledInput = ({ label, children, display, helperText, sx, addLabel, divider, ...props }: LabeledInputProps): JSX.Element => {
+export function LabeledInput({
+  label,
+  children,
+  display = 'label',
+  helperText,
+  sx,
+  addLabel,
+  divider = false,
+  ...props
+}: LabeledInputProps): JSX.Element {
   const theme = useTheme();
   const { getCurrentDialog } = useAppConfig();
   const { source, resource, isRequired } = props;
@@ -82,24 +89,5 @@ const LabeledInput = ({ label, children, display, helperText, sx, addLabel, divi
       )}
     </Stack>
   );
-};
-
-LabeledInput.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
-};
-
-LabeledInput.defaultProps = {
-  display: 'label',
-  divider: false
-};
-
+}
 export default LabeledInput;

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

@@ -1,19 +1,19 @@
 import _ from 'lodash';
-import { ReactElement, useCallback, useMemo, useState } from 'react';
 import { Box, Chip, ListItemText, Menu, MenuItem, PopoverOrigin, Typography } from '@mui/material';
-import { useInput, useLocaleState, useLocales } from 'ra-core';
-import { TextInputProps } from 'ra-ui-materialui';
-import TextInput from './TextInput';
 import { localizedValueHasAllLocales } from '../../utils';
+import { ReactElement, useCallback, useMemo, useState } from 'react';
+import { TextInputProps } from 'ra-ui-materialui';
+import { useInput, useLocaleState, useLocales } from 'ra-core';
 import { useWatch } from 'react-hook-form';
 import LabeledInput, { LabeledInputProps } from './LabeledInput';
-
-type ILocalizedTextInputProps = TextInputProps & LabeledInputProps;
+import TextInput from './TextInput';
 
 const ANCHOR_ORIGIN: PopoverOrigin = { vertical: 'bottom', horizontal: 'right' },
   TRANSFORM_ORIGIN: PopoverOrigin = { vertical: 'top', horizontal: 'right' };
 
-function LocalizedTextInput(props: ILocalizedTextInputProps) {
+export type ILocalizedTextInputProps = TextInputProps & LabeledInputProps;
+
+export function LocalizedTextInput(props: ILocalizedTextInputProps) {
   const { source } = props,
     { fieldState } = useInput(props),
     value = useWatch({ name: source }),

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

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

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

@@ -1,20 +1,24 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import { get } from 'lodash';
+import { TextField } from '@mui/material';
 import { useDataProvider, useRecordContext, useResourceContext } from 'react-admin';
+import React, { useCallback, useEffect, useState } from 'react';
 
-import PropTypes from 'prop-types';
-import { TextField } from '@mui/material';
-import { get } from 'lodash';
+export type RecordInputProps = {
+  source: string;
+  minWidth?: number;
+  children?: React.ReactElement;
+};
 
-const RecordInput = ({ source, minWidth = 300, children }) => {
+export function RecordInput({ source, minWidth = 300, children }: RecordInputProps): JSX.Element {
   const resource = useResourceContext();
   const record = useRecordContext();
   const [value, setValue] = useState(get(record, source, ''));
   const [updating, setUpdating] = useState(false);
-  const handleChange = useCallback((evt) => setValue(evt.target.value), []);
+  const handleChange = useCallback((evt: any) => setValue(evt.target.value), []);
   const dataProvider = useDataProvider();
 
   const handleKeyPress = useCallback(
-    (evt) => {
+    (evt: any) => {
       if (evt.key !== 'Enter') {
         return;
       }
@@ -26,7 +30,8 @@ const RecordInput = ({ source, minWidth = 300, children }) => {
             ...record,
             [source]: value,
             _changed: source
-          }
+          },
+          previousData: record
         })
         .then(() => setUpdating(false));
     },
@@ -45,13 +50,14 @@ const RecordInput = ({ source, minWidth = 300, children }) => {
           ...record,
           [source]: value,
           _changed: source
-        }
+        },
+        previousData: record
       })
       .then(() => setUpdating(false));
   }, [value, dataProvider, resource, source, record]);
 
   const handleRemoteChange = useCallback(
-    (value) => {
+    (value: any) => {
       setUpdating(true);
       dataProvider
         .update(resource, {
@@ -60,7 +66,8 @@ const RecordInput = ({ source, minWidth = 300, children }) => {
             ...record,
             [source]: value,
             _changed: source
-          }
+          },
+          previousData: record
         })
         .then(() => setUpdating(false));
     },
@@ -87,16 +94,11 @@ const RecordInput = ({ source, minWidth = 300, children }) => {
       onBlur={handleBlur}
       style={{ minWidth, width: '100%' }}
       multiline
+      // @ts-ignore
       InputProps={{ 'arial-label': 'naked' }}
       size="small"
     />
   );
-};
-
-RecordInput.propTypes = {
-  source: PropTypes.string.isRequired,
-  minWidth: PropTypes.number,
-  children: PropTypes.element
-};
+}
 
 export default RecordInput;

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

@@ -0,0 +1,19 @@
+import { ReferenceArrayInput as RaReferenceArrayInput, ReferenceArrayInputProps as RaReferenceArrayInputProps } from 'react-admin';
+import React from 'react';
+
+export type ReferenceArrayInputProps = {
+  children: React.ReactElement;
+} & RaReferenceArrayInputProps;
+
+export function ReferenceArrayInput({ children, ...props }: ReferenceArrayInputProps): JSX.Element {
+  return (
+    <RaReferenceArrayInput {...props}>
+      {React.cloneElement(children, {
+        ...props,
+        source: children.props.source || props.source
+      })}
+    </RaReferenceArrayInput>
+  );
+}
+
+export default ReferenceArrayInput;

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

@@ -0,0 +1,19 @@
+import { ReferenceInput as RaReferenceInput, ReferenceInputProps as RaReferenceInputProps } from 'react-admin';
+import React from 'react';
+
+export type ReferenceInputProps = {
+  children: React.ReactElement;
+} & RaReferenceInputProps;
+
+export function ReferenceInput({ children, ...props }: ReferenceInputProps): JSX.Element {
+  return (
+    <RaReferenceInput {...props}>
+      {React.cloneElement(children, {
+        ...props,
+        source: children.props.source || props.source
+      })}
+    </RaReferenceInput>
+  );
+}
+
+export default ReferenceInput;

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

@@ -0,0 +1,26 @@
+import { Fragment, ReactElement } from 'react';
+import { ListToolbar, Pagination, ResourceContextProvider } from 'react-admin';
+import { ReferenceManyField, ReferenceManyFieldProps } from '../ra-fields';
+
+export type ReferenceManyInputProps = {
+  reference: string;
+  target: string;
+  children: React.ReactNode;
+  filters?: ReactElement;
+  actions?: ReactElement;
+} & ReferenceManyFieldProps;
+
+export function ReferenceManyInput({ reference, target, children, filters, actions, ...props }: ReferenceManyInputProps): JSX.Element {
+  return (
+    <ResourceContextProvider value={reference}>
+      <ReferenceManyField perPage={5} pagination={<Pagination />} {...props} reference={reference} target={target}>
+        <Fragment>
+          <ListToolbar filters={filters} actions={actions} />
+          {children}
+        </Fragment>
+      </ReferenceManyField>
+    </ResourceContextProvider>
+  );
+}
+
+export default ReferenceManyInput;

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

@@ -0,0 +1,12 @@
+import { SearchInput as RaSearchInput, SearchInputProps } from 'react-admin';
+import { styled } from '@mui/material/styles';
+
+const StyledSearchInput = styled(RaSearchInput, {
+  name: 'RaApplicaSearchInput',
+  slot: 'root'
+})(() => ({}));
+
+export function SearchInput(props: SearchInputProps): JSX.Element {
+  return <StyledSearchInput {...props} />;
+}
+export default SearchInput;

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

@@ -0,0 +1,33 @@
+import { SelectArrayInput as RaSelectArrayInput, SelectArrayInputProps } from 'react-admin';
+import { styled } from '@mui/material/styles';
+import LabeledInput from './LabeledInput';
+
+const StyledSelectArrayInput = styled(RaSelectArrayInput, {
+  name: 'RaApplicaSelectArrayInput',
+  slot: 'Root'
+})(({ label }) => ({
+  '& legend': {
+    width: label === false ? 0 : 'auto'
+  },
+  '& .RaSelectArrayInput-chips > .RaSelectArrayInput-chip': {
+    marginTop: '-2px',
+    marginBottom: '-2px'
+  }
+}));
+
+export function SelectArrayInput({ optionText = 'name', optionValue = 'id', ...props }: SelectArrayInputProps): JSX.Element {
+  return (
+    // @ts-ignore
+    <LabeledInput {...props}>
+      <StyledSelectArrayInput
+        optionText={optionText}
+        optionValue={optionValue}
+        options={{
+          autoWidth: false
+        }}
+      />
+    </LabeledInput>
+  );
+}
+
+export default SelectArrayInput;

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

@@ -1,7 +1,6 @@
-import LabeledInput, { LabeledInputProps } from './LabeledInput';
 import { SelectInput as RaSelectInput, SelectInputProps as RaSelectInputProps } from 'react-admin';
-
 import { styled } from '@mui/material/styles';
+import LabeledInput, { LabeledInputProps } from './LabeledInput';
 
 const ApplicaStyledSelectInput = styled(RaSelectInput, {
   name: 'RaApplicaSelectArrayInput',
@@ -10,15 +9,14 @@ const ApplicaStyledSelectInput = styled(RaSelectInput, {
   '& legend': {
     width: label === false || label === null ? 0 : 'auto'
   }
-  // '& label.MuiFormLabel-root[data-shrink="false"]': {
-  //   marginTop: '2px'
-  // }
 }));
 export type SelectInputProps = LabeledInputProps & RaSelectInputProps;
-const SelectInput = (props: SelectInputProps) => (
-  <LabeledInput {...props}>
-    <ApplicaStyledSelectInput />
-  </LabeledInput>
-);
+export function SelectInput(props: SelectInputProps): JSX.Element {
+  return (
+    <LabeledInput {...props}>
+      <ApplicaStyledSelectInput />
+    </LabeledInput>
+  );
+}
 
 export default SelectInput;

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

@@ -1,10 +1,12 @@
-import { maxLength as maxLengthValidator, useTranslate } from 'react-admin';
-
-import PropTypes from 'prop-types';
-import TextInput from './TextInput';
+import { TextInputProps, maxLength as maxLengthValidator, useTranslate } from 'react-admin';
 import { useController } from 'react-hook-form';
+import TextInput from './TextInput';
+
+export type SmartTextInputProps = {
+  maxLength?: number;
+} & TextInputProps;
 
-const SmartTextInput = ({ ...props }) => {
+export function SmartTextInput({ multiline = false, ...props }: SmartTextInputProps): JSX.Element {
   const translate = useTranslate();
   const validationFn = maxLengthValidator(props?.maxLength, 'app.input.max_length_error');
   const value = useController({ name: props?.source })?.field?.value;
@@ -26,7 +28,7 @@ const SmartTextInput = ({ ...props }) => {
   });
 
   if (props?.maxLength) {
-    helperText = helperText && helperText.length > 0 ? `${usedCharsInfo} - ${translate(helperText)}` : usedCharsInfo;
+    helperText = helperText && (helperText as string).length > 0 ? `${usedCharsInfo} - ${translate(helperText as string)}` : usedCharsInfo;
   }
 
   return (
@@ -34,24 +36,12 @@ const SmartTextInput = ({ ...props }) => {
       {...props}
       validate={validate}
       helperText={helperText}
+      multiline={multiline}
       inputProps={{
         maxLength: props?.maxLength
       }}
     />
   );
-};
-
-SmartTextInput.displayName = 'SmartTextInput';
-
-SmartTextInput.defaultProps = {
-  multiline: false
-};
-
-SmartTextInput.propTypes = {
-  ...TextInput.propTypes,
-  maxLength: PropTypes.number,
-  multiline: PropTypes.bool,
-  rows: PropTypes.number
-};
+}
 
 export default SmartTextInput;

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

@@ -1,17 +1,14 @@
 import { TextInput as RaTextInput, TextInputProps } from 'react-admin';
-
 import LabeledInput from './LabeledInput';
 
-const TextInput = (props: TextInputProps) => (
-  // @ts-ignore
-  <LabeledInput {...props}>
-    {/* @ts-ignore */}
-    <RaTextInput />
-  </LabeledInput>
-);
-TextInput.propTypes = {
-  ...RaTextInput.propTypes,
-  ...LabeledInput.propTypes
-};
+export function TextInput(props: TextInputProps): JSX.Element {
+  return (
+    // @ts-ignore
+    <LabeledInput {...props}>
+      {/* @ts-ignore */}
+      <RaTextInput />
+    </LabeledInput>
+  );
+}
 
 export default TextInput;

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

@@ -0,0 +1,39 @@
+import { parseTime } from '../../utils';
+import { styled } from '@mui/material/styles';
+import { TimeInput as RaTimeInput, TimeInputProps } from 'react-admin';
+import LabeledInput from './LabeledInput';
+
+function defaultFormatter(v: string): string {
+  if (!v) {
+    return '';
+  }
+  const time = parseTime(v);
+  if (time) {
+    return time.format('HH:mm');
+  }
+  return '';
+}
+function defaultParser(v: string): string {
+  return v;
+}
+
+const StyledTimeInput = styled(RaTimeInput, {
+  name: 'RaApplicaTimeInput',
+  slot: 'root'
+})(({ label }) => ({
+  '& legend': {
+    width: label === false ? 0 : 'auto'
+  }
+}));
+
+export function TimeInput({ parse = defaultParser, format = defaultFormatter, ...props }: TimeInputProps): JSX.Element {
+  return (
+    // @ts-ignore
+    <LabeledInput {...props}>
+      {/* @ts-ignore */}
+      <StyledTimeInput parse={parse} format={format} {...props} />
+    </LabeledInput>
+  );
+}
+
+export default TimeInput;

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

@@ -0,0 +1,23 @@
+export * from './ArrayInput';
+export * from './AttachmentInput';
+export * from './AutocompleteArrayInput';
+export * from './AutocompleteInput';
+export * from './BooleanInput';
+export * from './DateInput';
+export * from './DateTimeInput';
+export * from './FileInput';
+export * from './ImageInput';
+export * from './LabeledArrayInput';
+export * from './LabeledInput';
+export * from './LocalizedTextInput';
+export * from './NumberInput';
+export * from './RecordInput';
+export * from './ReferenceArrayInput';
+export * from './ReferenceInput';
+export * from './ReferenceManyInput';
+export * from './SearchInput';
+export * from './SelectArrayInput';
+export * from './SelectInput';
+export * from './SmartTextInput';
+export * from './TextInput';
+export * from './TimeInput';

package/src/components/ra-lists/BulkActionsToolbar.tsx

@@ -1,17 +1,14 @@
-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 { TopToolbar } from 'react-admin';
+import { useTranslate, sanitizeListRestProps, useListContext, Identifier } from 'ra-core';
+import CloseIcon from '@mui/icons-material/Close';
 import clsx from 'clsx';
+import IconButton from '@mui/material/IconButton';
 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) => {
+export function BulkActionsToolbar(props: BulkActionsToolbarProps): JSX.Element {
   const { label = 'ra.action.bulk_actions', children, className, ...rest } = props;
   const { filterValues, resource, selectedIds = [], onUnselectItems } = useListContext(props);
 
@@ -62,13 +59,7 @@ const BulkActionsToolbar = (props: BulkActionsToolbarProps) => {
       </Toolbar>
     </Root>
   );
-};
-
-BulkActionsToolbar.propTypes = {
-  children: PropTypes.node,
-  label: PropTypes.string
-};
-
+}
 export interface BulkActionsToolbarProps {
   children?: ReactNode;
   label?: string;

package/src/components/ra-lists/BulkFloatingActionsToolbar.tsx

@@ -1,8 +1,8 @@
-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 { useListContext, Button } from 'react-admin';
+import * as React from 'react';
 import CloseIcon from '@mui/icons-material/Close';
+
 const noSpaceOutside = {
   p: 0,
   m: 0
@@ -14,7 +14,7 @@ const moreSpaceInside = {
   width: '100%'
 };
 
-const BulkFloatingActionsToolbar = (props: BulkFloatingActionsToolbarProps) => {
+export function BulkFloatingActionsToolbar(props: BulkFloatingActionsToolbarProps): JSX.Element {
   const { children } = props;
   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
 
@@ -87,11 +87,7 @@ const BulkFloatingActionsToolbar = (props: BulkFloatingActionsToolbarProps) => {
       </Box>
     </Fade>
   );
-};
-
-BulkFloatingActionsToolbar.propTypes = {
-  children: PropTypes.node
-};
+}
 
 export interface BulkFloatingActionsToolbarProps {
   children?: React.ReactNode | React.ReactNode[];