@applica-software-guru/react-admin 1.0.32 → 1.0.34

package/src/components/ra-forms/Toolbar.jsx

@@ -0,0 +1,36 @@
+import { Toolbar as RaToolbar } from 'react-admin'
+import React from 'react'
+import { styled } from '@mui/system'
+
+const ApplicaStyledToolbar = styled(RaToolbar, {
+  name: 'RaApplicaToolbar',
+  slot: 'Root',
+})(({ theme }) => ({
+  ...theme.mixins.toolbar,
+  backgroundColor: theme.palette.background.paper,
+  justifyContent: 'flex-end',
+  // Fix: needed to avoid disalignment with the top content.
+  paddingRight: `20px !important`,
+  '& .RaToolbar-defaultToolbar': {
+    justifyContent: 'right',
+    paddingBottom: theme.spacing(2),
+    '& > *': {
+      marginLeft: theme.spacing(1),
+    },
+  },
+  '& .MuiButtonBase-root': {
+    marginLeft: theme.spacing(1),
+  },
+}))
+
+const Toolbar = (props) => <ApplicaStyledToolbar {...props} />
+
+Toolbar.defaultProps = {
+  ...RaToolbar.defaultProps,
+}
+
+Toolbar.propTypes = {
+  ...RaToolbar.propTypes,
+}
+
+export default Toolbar

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

@@ -0,0 +1,8 @@
+import CardForm from './CardForm'
+import Edit from './Edit'
+import FormHeader from './FormHeader'
+import LongForm from './LongForm'
+import SimpleForm from './SimpleForm'
+import TabbedForm from './TabbedForm'
+import Toolbar from './Toolbar'
+export { CardForm, Edit, FormHeader, LongForm, SimpleForm, TabbedForm, Toolbar }

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

@@ -0,0 +1,29 @@
+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}>
+    <StyledArrayInput {...props} />
+  </LabeledInput>
+)
+
+ArrayInput.propTypes = {
+  ...RaArrayInput.propTypes,
+  ...LabeledInput.propTypes,
+}
+
+export default ArrayInput

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

@@ -0,0 +1,57 @@
+import { FileInput as RaFileInput, useRecordContext } from 'react-admin'
+
+import { AttachmentField } from '../ra-fields'
+import LabeledInput from './LabeledInput'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { styled } from '@mui/material/styles'
+
+const StyledFileInput = styled(RaFileInput, {
+  name: 'RaApplicaFileInput',
+  slot: 'root',
+})(({ theme }) => ({
+  '& .previews': {},
+  '& .previews>div': {
+    marginTop: theme.spacing(1),
+    padding: theme.spacing(1.5),
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    '& button': {
+      float: 'right',
+      placeItems: 'flex-end',
+      verticalAlign: 'middle',
+    },
+    '&:hover': {
+      backgroundColor: theme.palette.action.hover,
+    },
+    '& .MuiLink-root': {
+      fontSize: theme.typography.body1.fontSize,
+    },
+  },
+}))
+
+const AttachmentInput = ({ children, ...props }) => {
+  const record = useRecordContext(props)
+  const property = props?.source
+  const entityId = record?.id
+  return (
+    <LabeledInput {...props}>
+      <StyledFileInput>
+        {React.cloneElement(children, { ...children.props, entityId, property })}
+      </StyledFileInput>
+    </LabeledInput>
+  )
+}
+
+AttachmentInput.propTypes = {
+  ...RaFileInput.propTypes,
+  children: PropTypes.node,
+  multiple: PropTypes.bool,
+}
+
+AttachmentInput.defaultProps = {
+  children: <AttachmentField title="name" source="path" />,
+  multiple: true,
+}
+
+export default AttachmentInput

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

@@ -0,0 +1,25 @@
+import LabeledInput from './LabeledInput'
+import { AutocompleteArrayInput as RaAutocompleteArrayInput } from 'react-admin'
+import { styled } from '@mui/material/styles'
+
+const StyledAutocompleteArrayInput = styled(RaAutocompleteArrayInput, {
+  name: 'StyledAutocompleteInput',
+  root: 'root'
+})(({ label }) => ({
+  '& legend': {
+    width: label === false ? 0 : 'auto'
+  }
+}))
+
+// eslint-disable-next-line no-unused-vars
+const AutocompleteArrayInput = ({ ...props }) => (
+  <LabeledInput {...props}>
+    <StyledAutocompleteArrayInput />
+  </LabeledInput>
+)
+AutocompleteArrayInput.propTypes = {
+  ...RaAutocompleteArrayInput.propTypes,
+  ...LabeledInput.propTypes
+}
+
+export default AutocompleteArrayInput

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

@@ -0,0 +1,24 @@
+import LabeledInput from './LabeledInput'
+import { AutocompleteInput as RaAutocompleteInput } from 'react-admin'
+import { styled } from '@mui/material/styles'
+
+const StyledAutocompleteInput = styled(RaAutocompleteInput, {
+  name: 'StyledAutocompleteInput',
+  root: 'root'
+})(({ label }) => ({
+  '& legend': {
+    width: label === false ? 0 : 'auto'
+  }
+}))
+
+const AutocompleteInput = ({ ...props }) => (
+  <LabeledInput {...props}>
+    <StyledAutocompleteInput />
+  </LabeledInput>
+)
+AutocompleteInput.propTypes = {
+  ...RaAutocompleteInput.propTypes,
+  ...LabeledInput.propTypes
+}
+
+export default AutocompleteInput

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

@@ -0,0 +1,54 @@
+import { styled, useTheme } from '@mui/material/styles'
+
+import LabeledInput from './LabeledInput'
+import PropTypes from 'prop-types'
+import { BooleanInput as RaBooleanInput } from 'react-admin'
+
+const ApplicaStyledBooleanInput = styled(RaBooleanInput, {
+  name: 'RaApplicaBooleanInput',
+  slot: 'Root',
+})(() => ({}))
+
+const BooleanInput = ({ horizontal, ...props }) => {
+  // eslint-disable-next-line no-unused-vars
+  const theme = useTheme()
+  return (
+    <LabeledInput
+      {...props}
+      sx={
+        horizontal
+          ? {
+              flexDirection: horizontal ? 'row' : 'column',
+              alignItems: horizontal ? 'center' : 'flex-start',
+              '& .MuiFormGroup-root': {
+                margin: 0,
+              },
+              '& .MuiFormControlLabel-root': {
+                margin: 0,
+                '& .MuiTypography-root': {
+                  display: 'none',
+                  visibility: 'hidden',
+                },
+                '& .MuiSwitch-root': {
+                  marginRight: `-${theme.spacing(0.5)}`,
+                },
+              },
+            }
+          : {}
+      }
+    >
+      <ApplicaStyledBooleanInput />
+    </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.jsx

@@ -0,0 +1,30 @@
+import LabeledInput from './LabeledInput'
+import { DateInput as RaDateInput } from 'react-admin'
+import { styled } from '@mui/material/styles'
+
+const StyledDateInput = styled(RaDateInput, {
+  name: 'RaApplicaDateInput',
+  slot: 'root',
+})(({ label }) => ({
+  '& legend': {
+    width: label === false ? 0 : 'auto',
+  },
+}))
+
+const DateInput = (props) => (
+  <LabeledInput {...props}>
+    <StyledDateInput />
+  </LabeledInput>
+)
+
+DateInput.propTypes = {
+  ...RaDateInput.propTypes,
+  ...LabeledInput.propTypes,
+}
+
+DateInput.defaultProps = {
+  ...RaDateInput.defaultProps,
+  ...LabeledInput.defaultProps,
+}
+
+export default DateInput

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

@@ -0,0 +1,98 @@
+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 { get } from 'lodash'
+import { styled } from '@mui/material/styles'
+import { useWatch } from 'react-hook-form'
+
+const StyledFileInput = styled(RaFileInput, {
+  name: 'RaApplicaFileInput',
+  slot: 'root',
+})(({ theme }) => ({
+  '& .previews': {},
+  '& .previews>div': {
+    marginTop: theme.spacing(1),
+    padding: theme.spacing(1.5),
+    border: `1px solid ${theme.palette.divider}`,
+    borderRadius: theme.shape.borderRadius,
+    '& button': {
+      float: 'right',
+      placeItems: 'flex-end',
+      verticalAlign: 'middle',
+    },
+    '&:hover': {
+      backgroundColor: theme.palette.action.hover,
+    },
+    '& .MuiLink-root': {
+      fontSize: theme.typography.body1.fontSize,
+    },
+  },
+}))
+
+/**
+ * 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.
+ *
+ * @example
+ * // If you hav an object class with @File annotation, you can map it to a FileInput:
+ * import { FileInput } from 'ra-ui-applica';
+ * ...
+ * <FileInput source="file_property" />
+ *
+ * The component will handle create and delete operations related to the source field associated
+ * in conjuction with Applica Framework backend API services.
+ *
+ */
+const FileInput = ({ children, title, ...props }) => {
+  const file = useWatch({ name: props.source })
+  const record = useRecordContext(props)
+  const { source } = props
+  // Base64 files are persisted with a simple string that contains the temporary filename.
+  // Applica Framework add a suffix to the temporary filename that is the original filename.
+  // With a little trick we try (because we are not sure that this is true) to get the original filename.
+  const filename = useMemo(() => {
+    if (file && file?.title) {
+      return file?.title
+    }
+    const filename = get(record, source)
+    if (filename) {
+      const parts = filename.split('__')
+      return parts.length > 0 ? parts[parts.length - 1] : filename
+    }
+    return filename
+  }, [record, source, file])
+
+  return (
+    <LabeledInput {...props}>
+      <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,
+          },
+        })}
+      </StyledFileInput>
+    </LabeledInput>
+  )
+}
+
+FileInput.propTypes = {
+  ...RaFileInput.propTypes,
+  source: PropTypes.string,
+  title: PropTypes.string,
+  children: PropTypes.node,
+}
+
+FileInput.defaultProps = {
+  children: <FileField />,
+}
+
+export default FileInput

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

@@ -0,0 +1,44 @@
+import { ImageInput as RaImageInput, useRecordContext } from 'react-admin'
+
+import { CoverField } from '../ra-fields'
+import LabeledInput from './LabeledInput'
+import PropTypes from 'prop-types'
+import React from 'react'
+import { get } from 'lodash'
+import { useWatch } from 'react-hook-form'
+
+const ImageInput = ({ children, title, ...props }) => {
+  const file = useWatch({ name: props.source })
+  const record = useRecordContext(props)
+  const { source } = props
+  return (
+    <LabeledInput {...props}>
+      <RaImageInput accept="image/*">
+        {React.cloneElement(children, {
+          ...children.props,
+          title,
+          source,
+          record: {
+            ...record,
+            [source]: file?.title || get(record, source),
+            [`_${source}`]: file?.src || get(record, `_${source}`),
+          },
+        })}
+      </RaImageInput>
+    </LabeledInput>
+  )
+}
+ImageInput.defaultProps = {
+  children: <CoverField />,
+  multiple: false,
+}
+
+ImageInput.propTypes = {
+  ...RaImageInput.propTypes,
+  source: PropTypes.string,
+  title: PropTypes.string,
+  children: PropTypes.node,
+  multiple: PropTypes.bool,
+}
+
+export default ImageInput

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

@@ -0,0 +1,80 @@
+import { FieldTitle, 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 '@emotion/react'
+
+const LabeledInput = ({ label, children, display, helperText, sx, ...props }) => {
+  const theme = useTheme()
+  const { getCurrentDialog } = useAppConfig()
+  const { source, resource, isRequired } = props
+  const {
+    fieldState: { invalid },
+  } = useInput(props)
+  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: invalid ? theme.palette.error.main : theme.palette.text.secondary,
+          '& span': {
+            display: 'none',
+          },
+        },
+        ...sx,
+      }}
+    >
+      {display === 'label' && label !== false && (
+        <InputLabel error={invalid === true}>
+          <FieldTitle
+            label={label}
+            source={source}
+            resource={dialogResource || resource}
+            isRequired={isRequired}
+          />
+        </InputLabel>
+      )}
+      {React.cloneElement(children, {
+        ...children.props,
+        ...props,
+        label: display === 'legend' ? label : false,
+      })}
+      {display === 'label' && helperText && (
+        <FormHelperText
+          sx={{
+            pl: 2,
+            pb: 2,
+            marginTop: '0 !important',
+          }}
+          error={invalid === true}
+        >
+          {helperText}
+        </FormHelperText>
+      )}
+    </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]),
+}
+
+LabeledInput.defaultProps = {
+  display: 'label',
+}
+
+export default LabeledInput

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

@@ -0,0 +1,28 @@
+import LabeledInput from './LabeledInput'
+import { NumberInput as RaNumberInput } from 'react-admin'
+import { styled } from '@mui/material/styles'
+const StyledNumberInput = styled(RaNumberInput, {
+  name: 'RaApplicaNumberInput',
+  slot: 'root',
+})(({ label }) => ({
+  '& legend': {
+    width: label === false ? 0 : 'auto',
+  },
+}))
+const NumberInput = (props) => (
+  <LabeledInput {...props}>
+    <StyledNumberInput />
+  </LabeledInput>
+)
+
+NumberInput.propTypes = {
+  ...RaNumberInput.propTypes,
+  ...LabeledInput.propTypes,
+}
+
+NumberInput.defaultProps = {
+  ...RaNumberInput.defaultProps,
+  ...LabeledInput.defaultProps,
+}
+
+export default NumberInput

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

@@ -0,0 +1,102 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { useDataProvider, useRecordContext, useResourceContext } from 'react-admin'
+
+import PropTypes from 'prop-types'
+import { TextField } from '@mui/material'
+import { get } from 'lodash'
+
+const RecordInput = ({ source, minWidth = 300, children }) => {
+  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 dataProvider = useDataProvider()
+
+  const handleKeyPress = useCallback(
+    (evt) => {
+      if (evt.key !== 'Enter') {
+        return
+      }
+      setUpdating(true)
+      dataProvider
+        .update(resource, {
+          id: record.id,
+          data: {
+            ...record,
+            [source]: value,
+            _changed: source,
+          },
+        })
+        .then(() => setUpdating(false))
+    },
+    [value, dataProvider, resource, record, source],
+  )
+  const handleBlur = useCallback(() => {
+    const currentValue = get(record, source)
+    if (currentValue === value) {
+      return
+    }
+    setUpdating(true)
+    dataProvider
+      .update(resource, {
+        id: record.id,
+        data: {
+          ...record,
+          [source]: value,
+          _changed: source,
+        },
+      })
+      .then(() => setUpdating(false))
+  }, [value, dataProvider, resource, source, record])
+
+  const handleRemoteChange = useCallback(
+    (value) => {
+      setUpdating(true)
+      dataProvider
+        .update(resource, {
+          id: record.id,
+          data: {
+            ...record,
+            [source]: value,
+            _changed: source,
+          },
+        })
+        .then(() => setUpdating(false))
+    },
+    [dataProvider, resource, source, record],
+  )
+
+  useEffect(() => setValue(get(record, source)), [record, source])
+
+  if (children) {
+    return React.cloneElement(children, {
+      ...children.props,
+      source,
+      value,
+      onChange: handleRemoteChange,
+    })
+  }
+
+  return (
+    <TextField
+      value={value}
+      disabled={updating}
+      onChange={handleChange}
+      onKeyPress={handleKeyPress}
+      onBlur={handleBlur}
+      style={{ minWidth, width: '100%' }}
+      multiline
+      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.jsx

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types'
+import { ReferenceArrayInput as RaReferenceArrayInput } from 'react-admin'
+import React from 'react'
+
+const ReferenceArrayInput = ({ children, ...props }) => (
+  <RaReferenceArrayInput {...props}>
+    {React.cloneElement(children, {
+      ...props,
+      source: children.props.source || props.source,
+    })}
+  </RaReferenceArrayInput>
+)
+
+ReferenceArrayInput.propTypes = {
+  ...RaReferenceArrayInput.propTypes,
+  children: PropTypes.element,
+}
+
+ReferenceArrayInput.defaultProps = {
+  ...RaReferenceArrayInput.defaultProps,
+}
+
+export default ReferenceArrayInput

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

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types'
+import { ReferenceInput as RaReferenceInput } from 'react-admin'
+import React from 'react'
+
+const ReferenceInput = ({ children, ...props }) => (
+  <RaReferenceInput {...props}>
+    {React.cloneElement(children, {
+      ...props,
+      source: children.props.source || props.source,
+    })}
+  </RaReferenceInput>
+)
+
+ReferenceInput.propTypes = {
+  ...RaReferenceInput.propTypes,
+  children: PropTypes.element,
+}
+
+ReferenceInput.defaultProps = {
+  ...RaReferenceInput.defaultProps,
+}
+
+export default ReferenceInput