@applica-software-guru/react-admin 1.0.35 → 1.0.37

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

@@ -1,82 +0,0 @@
-import { Box, Typography } from '@mui/material'
-import {
-  FileField as RaFileField,
-  useDataProvider,
-  useRecordContext,
-  useResourceContext,
-  useTranslate
-} from 'react-admin'
-import { useCallback, useEffect, useMemo, useState } from 'react'
-
-import BaseAttachmentField from './BaseAttachmentField'
-import PropTypes from 'prop-types'
-import dayjs from 'dayjs'
-import { get } from 'lodash'
-
-const AttachmentField = ({ entityId, property, ...props }) => {
-  const [user, setUser] = useState(null)
-  const record = useRecordContext(props)
-  const dataProvider = useDataProvider()
-  const resource = useResourceContext()
-  const handleClick = useCallback(
-    async (e) => {
-      e.preventDefault()
-      e.stopPropagation()
-      const item = get(record, props?.source)
-      const entity = resource.replace('entities/', '')
-      const attachment = await dataProvider.getFile(
-        `/attachments/${entity}/${entityId || record?.id}/${property || props?.source}/${
-          item?.id || record?.id
-        }`
-      )
-      const link = document.createElement('a')
-      link.href = attachment
-      link.download = get(record, props?.title || props?.source)
-      link.click()
-    },
-    [dataProvider, record, entityId, resource, property, props?.source, props?.title]
-  )
-  const _record = useMemo(
-    () => ({
-      ...record,
-      [props?.source]: record?.src || get(record, props?.source),
-      [props?.title]: record?.title || get(record, props?.title || props?.source)
-    }),
-    [record, props?.source, props?.title]
-  )
-  const translate = useTranslate()
-  useEffect(() => {
-    if (!record || !record?.userId) return
-    dataProvider.getOne('entities/user', { id: record?.userId }).then(({ data }) => setUser(data))
-  }, [record, dataProvider])
-
-  return (
-    <BaseAttachmentField
-      {...props}
-      record={_record}
-      onClick={handleClick}
-      title={
-        <Box sx={{ cursor: 'pointer' }}>
-          <Typography variant="subtitle1">{get(_record, props?.title || props?.source)}</Typography>
-          <Typography variant="caption" color="secondary">
-            {get(_record, 'sizeDescription')}
-            {user && ` | `}
-            {user &&
-              translate('ra.attachment.info', {
-                user: user?.name,
-                created: dayjs(_record?.createdAt).format('DD/MM/YYYY HH:mm')
-              })}
-          </Typography>
-        </Box>
-      }
-    />
-  )
-}
-
-AttachmentField.propTypes = {
-  ...RaFileField.propTypes,
-  source: PropTypes.string,
-  title: PropTypes.string
-}
-
-export default AttachmentField

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

@@ -1,72 +0,0 @@
-import * as React from 'react'
-
-import { useRecordContext, useTranslate } from 'ra-core'
-
-import PropTypes from 'prop-types'
-import Typography from '@mui/material/Typography'
-import get from 'lodash/get'
-import { styled } from '@mui/material/styles'
-
-export const BaseAttachmentField = (props) => {
-  const { className, emptyText, source, title, ...rest } = props
-  const record = useRecordContext(props)
-  const sourceValue = get(record, source)
-  const translate = useTranslate()
-
-  if (!sourceValue) {
-    return emptyText ? (
-      <Typography component="span" variant="body2" className={className} {...rest}>
-        {emptyText && translate(emptyText, { _: emptyText })}
-      </Typography>
-    ) : (
-      <Root className={className} {...rest} />
-    )
-  }
-
-  if (Array.isArray(sourceValue)) {
-    return (
-      <StyledList className={className} {...rest}>
-        {sourceValue.map((file, index) => {
-          const fileTitleValue = get(file, title) || title
-
-          return <li key={index}>{fileTitleValue}</li>
-        })}
-      </StyledList>
-    )
-  }
-
-  const titleValue = get(record, title) || title
-
-  return (
-    <Root className={className} {...rest}>
-      {titleValue}
-    </Root>
-  )
-}
-
-BaseAttachmentField.propTypes = {
-  src: PropTypes.string,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.func, PropTypes.element]),
-  target: PropTypes.string,
-  download: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
-  ping: PropTypes.string,
-  rel: PropTypes.string,
-  emptyText: PropTypes.string,
-  source: PropTypes.string.isRequired,
-  className: PropTypes.string,
-}
-
-const PREFIX = 'RaApplicaBaseAttachmentField'
-
-const Root = styled('div', {
-  name: PREFIX,
-  overridesResolver: (props, styles) => styles.root,
-})({
-  display: 'inline-block',
-})
-
-const StyledList = styled('ul')({
-  display: 'inline-block',
-})
-
-export default BaseAttachmentField

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

@@ -1,42 +0,0 @@
-import { CardHeader, Divider } from '@mui/material'
-
-import { Fragment } from 'react'
-import PropTypes from 'prop-types'
-import { styled } from '@mui/material/styles'
-import { useTranslate } from 'react-admin'
-
-const StyledCardHeader = styled(CardHeader)(({ theme }) => ({
-  marginTop: theme.spacing(4),
-  marginLeft: 0,
-  marginRight: 0,
-  paddingLeft: 0,
-  paddingRight: 0,
-}))
-
-const StyledDivider = styled(Divider)(({ theme }) => ({
-  marginLeft: `-${theme.spacing(2.5)}`,
-  marginRight: `-${theme.spacing(2.5)}`,
-  marginBottom: theme.spacing(2),
-  width: `calc(100% + ${theme.spacing(5)})`,
-}))
-
-const FormHeader = ({ title, divider }) => {
-  const translate = useTranslate()
-  return (
-    <Fragment>
-      <StyledCardHeader title={translate(title, { _: title })} />
-      {divider && <StyledDivider />}
-    </Fragment>
-  )
-}
-
-FormHeader.propTypes = {
-  title: PropTypes.string.isRequired,
-  divider: PropTypes.bool,
-}
-
-FormHeader.defaultProps = {
-  divider: true,
-}
-
-export default FormHeader

package/src/components/ra-forms/LongForm/DispositionProps.jsx

@@ -1,10 +0,0 @@
-import PropTypes from 'prop-types'
-const DispositionProps = PropTypes.shape({
-  xl: PropTypes.number,
-  lg: PropTypes.number,
-  md: PropTypes.number,
-  sm: PropTypes.number,
-  xs: PropTypes.number,
-})
-
-export default DispositionProps

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

@@ -1,38 +0,0 @@
-import DispositionProps from './DispositionProps'
-import { Form } from 'react-admin'
-import LongFormTab from './LongFormTab'
-import LongFormTabHeader from './LongFormHeader'
-import LongFormView from './LongFormView'
-import PropTypes from 'prop-types'
-import useFormRootPath from './useFormRootPath'
-import { useThemeConfig } from '../../../hooks'
-
-const LongForm = ({ spacing: _spacing, ...props }) => {
-  const formRootPathname = useFormRootPath()
-  const { spacing: _themeSpacing } = useThemeConfig()
-  const spacing = _spacing || _themeSpacing
-  return (
-    <Form formRootPathname={formRootPathname} {...props}>
-      <LongFormView formRootPathname={formRootPathname} {...props} spacing={spacing} />
-    </Form>
-  )
-}
-
-LongForm.propTypes = {
-  syncWithLocation: PropTypes.bool,
-  spacing: PropTypes.number,
-  tabsDisposition: DispositionProps,
-  contentDisposition: DispositionProps,
-}
-
-LongForm.defaultProps = {
-  syncWithLocation: false,
-  spacing: 2,
-  tabsDisposition: { xl: 3, lg: 3, md: 4, sm: 4, xs: 12 },
-  contentDisposition: { xl: 9, lg: 9, md: 8, sm: 8, xs: 12 },
-}
-
-LongForm.Tab = LongFormTab
-LongForm.Header = LongFormTabHeader
-
-export default LongForm

package/src/components/ra-forms/LongForm/LongFormHeader.jsx

@@ -1,24 +0,0 @@
-import PropTypes from 'prop-types'
-import { styled } from '@mui/material/styles'
-import { useMediaQuery } from '@mui/material'
-const StyledSidebar = styled('div')(({ theme }) => ({
-  marginBottom: theme.spacing(2),
-}))
-
-const LongFormTabHeader = ({ children, visibility }) => {
-  const isVisible = useMediaQuery((theme) => theme.breakpoints.up(visibility))
-  return isVisible ? <StyledSidebar>{children}</StyledSidebar> : null
-}
-
-LongFormTabHeader.propTypes = {
-  visibility: PropTypes.oneOf(['xl', 'lg', 'md', 'sm', 'xs']),
-  position: PropTypes.oneOf(['top', 'bottom']).isRequired,
-  children: PropTypes.node.isRequired,
-}
-
-LongFormTabHeader.defaultProps = {
-  position: 'top',
-  visibility: 'md',
-}
-
-export default LongFormTabHeader

package/src/components/ra-forms/LongForm/LongFormTabs.jsx

@@ -1,63 +0,0 @@
-import { matchPath, useLocation } from 'react-router'
-
-import { List } from '@mui/material'
-import MainCard from '../../MainCard'
-import PropTypes from 'prop-types'
-import React from 'react'
-import { styled } from '@mui/system'
-
-const StyledList = styled(List, {
-  name: 'RaLongFormTabs',
-  slot: 'Root',
-})(({ theme }) => ({
-  p: 0,
-
-  '& .MuiListItemIcon-root': {
-    minWidth: 32,
-    color: theme.palette.grey[500],
-  },
-  '& .MuiListItemButton-root.Mui-selected': {
-    borderRight: `2px solid ${theme.palette.primary.main}`,
-    marginRight: `-2px`,
-  },
-}))
-
-const LongFormTabs = ({ children, syncWithLocation, value, url, onChange }) => {
-  const location = useLocation()
-  return (
-    <MainCard>
-      <StyledList component="nav">
-        {React.Children.map(children, (tab, index) => {
-          if (!React.isValidElement(tab)) return null
-          const tabPath = getTabbedFormTabFullPath(tab, index)
-          const selected = syncWithLocation
-            ? !!matchPath(`${url}/${tabPath}`, location.pathname)
-            : index === value
-
-          return React.cloneElement(tab, {
-            intent: 'header',
-            value: syncWithLocation ? tabPath : index,
-            syncWithLocation,
-            onChange,
-            url,
-            selected,
-          })
-        })}
-      </StyledList>
-    </MainCard>
-  )
-}
-
-export const getTabbedFormTabFullPath = (tab, index) =>
-  tab.props.path != null ? tab.props.path : index > 0 ? index.toString() : ''
-
-LongFormTabs.propTypes = {
-  children: PropTypes.node,
-  url: PropTypes.string,
-  tabsWithErrors: PropTypes.arrayOf(PropTypes.string),
-  syncWithLocation: PropTypes.bool,
-  onChange: PropTypes.func,
-  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-}
-
-export default LongFormTabs

package/src/components/ra-forms/LongForm/LongFormView.jsx

@@ -1,129 +0,0 @@
-import React, { useMemo, useState } from 'react'
-import { Route, Routes, matchPath, useLocation, useResolvedPath } from 'react-router'
-import { getTabbedFormTabFullPath, useResourceContext } from 'react-admin'
-
-import DispositionProps from './DispositionProps'
-import { Grid } from '@mui/material'
-import LongFormCard from './LongFormHeader'
-import LongFormTab from './LongFormTab'
-import LongFormTabs from './LongFormTabs'
-import PropTypes from 'prop-types'
-import { styled } from '@mui/material/styles'
-
-const StyledGrid = styled(Grid, {
-  name: 'RaLongFormView',
-  slot: 'Root',
-})(({ theme }) => ({
-  '& .MuiToolbar-root': {
-    marginTop: theme.spacing(2),
-    marginLeft: `-${theme.spacing(3)}`,
-    marginRight: `-${theme.spacing(3)}`,
-    marginBottom: `-${theme.spacing(2)}`,
-    borderTop: `1px solid ${theme.palette.divider}`,
-  },
-}))
-
-const isSidebar = (child, position) =>
-  child && child.type === LongFormCard && child.props.position === position
-const isTab = (child) => child && child.type === LongFormTab
-
-const LongFormView = ({
-  children,
-  formRootPathname,
-  syncWithLocation,
-  spacing,
-  tabs,
-  tabsDisposition,
-  contentDisposition,
-  ...props
-}) => {
-  const [tabValue, setTabValue] = useState(0)
-  const resolvedPath = useResolvedPath('')
-  const resource = useResourceContext(props)
-  const location = useLocation()
-  const topSidebars = useMemo(
-    () => React.Children.toArray(children).find((child) => isSidebar(child, 'top')),
-    [children],
-  )
-  const bottomSidebars = useMemo(
-    () => React.Children.toArray(children).find((child) => isSidebar(child, 'bottom')),
-    [children],
-  )
-  const tabChildrens = useMemo(
-    () => React.Children.toArray(children).filter((child) => isTab(child)),
-    [children],
-  )
-
-  const handleTabChange = (value) => {
-    if (!syncWithLocation) {
-      setTabValue(value)
-    }
-  }
-  const renderTabs = () =>
-    React.cloneElement(
-      tabs,
-      {
-        onChange: handleTabChange,
-        syncWithLocation,
-        url: formRootPathname,
-        value: tabValue,
-        intent: 'header',
-      },
-      tabChildrens,
-    )
-  return (
-    <StyledGrid container spacing={spacing * 2}>
-      <Grid item {...tabsDisposition}>
-        {topSidebars}
-        {syncWithLocation ? (
-          <Routes>
-            <Route path="/*" element={renderTabs()} />
-          </Routes>
-        ) : (
-          renderTabs()
-        )}
-        {bottomSidebars}
-      </Grid>
-      <Grid item {...contentDisposition}>
-        {/* All tabs are rendered (not only the one in focus), to allow validation
-                on tabs not in focus. The tabs receive a `hidden` property, which they'll
-                use to hide the tab using CSS if it's not the one in focus.
-                See https://github.com/marmelab/react-admin/issues/1866 */}
-        {React.Children.map(tabChildrens, (tab, index) => {
-          if (!tab) {
-            return null
-          }
-          const tabPath = getTabbedFormTabFullPath(tab, index)
-          const hidden = syncWithLocation
-            ? !matchPath(`${resolvedPath.pathname}/${tabPath}`, location.pathname)
-            : tabValue !== index
-
-          return React.isValidElement(tab)
-            ? React.cloneElement(tab, {
-                intent: 'content',
-                resource,
-                hidden,
-                value: syncWithLocation ? tabPath : index,
-              })
-            : null
-        })}
-      </Grid>
-    </StyledGrid>
-  )
-}
-
-LongFormView.propTypes = {
-  children: PropTypes.node,
-  spacing: PropTypes.number,
-  syncWithLocation: PropTypes.bool,
-  tabs: PropTypes.element,
-  formRootPathname: PropTypes.string,
-  tabsDisposition: DispositionProps,
-  contentDisposition: DispositionProps,
-}
-
-LongFormView.defaultProps = {
-  tabs: <LongFormTabs />,
-}
-
-export default LongFormView

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

@@ -1,2 +0,0 @@
-import LongForm from './LongForm'
-export default LongForm

package/src/components/ra-forms/LongForm/useFormRootPath.jsx

@@ -1,22 +0,0 @@
-import { matchPath, useLocation } from 'react-router-dom'
-
-/**
- * This hook infers the tabbed form root path from the current location.
- */
-const useFormRootPath = () => {
-  const location = useLocation()
-  const createMatch = matchPath(':resource/create/*', location.pathname)
-  const editMatch = matchPath(':resource/:id/*', location.pathname)
-
-  if (createMatch) {
-    return createMatch.pathnameBase
-  }
-
-  if (editMatch) {
-    return editMatch.pathnameBase
-  }
-
-  return ''
-}
-
-export default useFormRootPath

package/src/contexts/AppConfigContext.jsx

@@ -1,54 +0,0 @@
-import React, { createContext, useState } from 'react'
-
-import PropTypes from 'prop-types'
-
-const initialState = {
-  /**
-   * This context is necessary to work with react-admin standard forms when executed
-   * inside a dialog and deeper in another resource handled inside a primary form.
-   *
-   * In this case, when using "EditInDialogButton" or "CreateInDialogButton" components,
-   * the dialog is opened and the form is rendered inside it. If the form has a subform
-   * and needs to know the associated resource.
-   */
-  openDialogs: [],
-}
-
-const AppConfigContext = createContext(initialState)
-
-const AppConfigProvider = ({ children }) => {
-  const [config, setConfig] = useState(initialState)
-  const openDialog = (id, callback) => {
-    setConfig((config) => ({ ...config, openDialogs: [...config.openDialogs, id] }))
-    if (callback) callback()
-  }
-  const closeDialog = (id, callback) => {
-    setConfig((config) => ({
-      ...config,
-      openDialogs: config.openDialogs.filter((modalId) => modalId !== id),
-    }))
-    if (callback) callback()
-  }
-
-  const getCurrentDialog = () =>
-    config.openDialogs.length > 0 ? config.openDialogs[config.openDialogs.length - 1] : null
-
-  return (
-    <AppConfigContext.Provider
-      value={{
-        ...config,
-        openDialog,
-        closeDialog,
-        getCurrentDialog,
-      }}
-    >
-      {children}
-    </AppConfigContext.Provider>
-  )
-}
-
-AppConfigProvider.propTypes = {
-  children: PropTypes.node,
-}
-
-export { AppConfigProvider, AppConfigContext }