@applica-software-guru/react-admin 1.0.36 → 1.0.38

package/src/components/ra-buttons/CreateInDialogButton.jsx

@@ -1,203 +0,0 @@
-import {
-  Button,
-  CreateButtonClasses,
-  CreateContextProvider,
-  SaveButton,
-  useCreateController,
-  useNotify,
-  useRedirect,
-  useResourceContext,
-  useTranslate,
-} from 'react-admin'
-import { Dialog, Fab, useMediaQuery } from '@mui/material'
-import React, { useCallback, useState } from 'react'
-
-import { Add } from '@mui/icons-material'
-import PropTypes from 'prop-types'
-import { Toolbar } from '../ra-forms'
-import clsx from 'clsx'
-import { styled } from '@mui/material/styles'
-import { useAppConfig } from '../../hooks'
-import { useQueryClient } from 'react-query'
-
-const updateColl = (old, data) => {
-  const id = data.id
-  if (!old) return [data]
-  const index = old.findIndex((record) => record.id === id)
-  if (index === -1) {
-    return [...old, data]
-  }
-
-  return [...old.slice(0, index), { ...old[index], ...data }, ...old.slice(index + 1)]
-}
-const setManyReferenceQueryData = (res, data) => {
-  const result = res && res.data ? { data: updateColl(res.data, data), total: res.total + 1 } : res
-  return result
-}
-const setManyQueryData = (coll, data) => (coll && coll.length > 0 ? updateColl(coll, data) : coll)
-const setListQueryData = (res, data) =>
-  res && res.data ? { ...res, data: updateColl(res.data, data), total: res.total + 1 } : res
-
-const CreateInDialogContent = ({ onClose, record, children, redirect: _redirect }) => {
-  const queryClient = useQueryClient()
-  const resource = useResourceContext()
-  const redirect = useRedirect()
-  const notify = useNotify()
-  const handleSuccess = useCallback(
-    (data) => {
-      const now = Date.now()
-      const updatedAt = now
-
-      queryClient.setQueryData([resource, 'getOne', { id: data.id }], data)
-      queryClient.setQueriesData([resource, 'getList'], (res) => setListQueryData(res, data), {
-        updatedAt,
-      })
-      queryClient.setQueriesData([resource, 'getMany'], (coll) => setManyQueryData(coll, data), {
-        updatedAt,
-      })
-      queryClient.setQueriesData(
-        [resource, 'getManyReference'],
-        (res) => setManyReferenceQueryData(res, data),
-        { updatedAt },
-      )
-
-      onClose()
-      notify('ra.notification.created')
-      if (_redirect !== undefined) {
-        redirect(_redirect, resource, data.id, data)
-      }
-    },
-    [onClose, queryClient, resource, notify, redirect, _redirect],
-  )
-  const { save, isLoading } = useCreateController({
-    mutationOptions: {
-      onSuccess: handleSuccess,
-    },
-  })
-  return (
-    <CreateContextProvider
-      value={{
-        record: record,
-        save: save,
-        saving: isLoading,
-        redirect: _redirect,
-      }}
-    >
-      {React.cloneElement(children, {
-        ...children.props,
-        toolbar: (
-          <Toolbar>
-            <Button variant="text" size="medium" label="ra.action.cancel" onClick={onClose} />
-            <SaveButton />
-          </Toolbar>
-        ),
-      })}
-    </CreateContextProvider>
-  )
-}
-
-CreateInDialogContent.propTypes = {
-  children: PropTypes.node,
-  onClose: PropTypes.func,
-  record: PropTypes.object,
-  redirect: PropTypes.oneOf(['list', 'edit', 'show', false]),
-}
-CreateInDialogContent.defaultProps = {
-  redirect: false,
-}
-const scrollStates = {
-  true: { _scrollToTop: true },
-  false: {},
-}
-
-const StyledFab = styled(Fab, {
-  name: 'RaApplicaCreateInDialogButton',
-  overridesResolver: (_props, styles) => styles.root,
-})(({ theme }) => ({
-  [`&.${CreateButtonClasses.floating}`]: {
-    color: theme.palette.getContrastText(theme.palette.primary.main),
-    margin: 0,
-    top: 'auto',
-    right: 20,
-    bottom: 60,
-    left: 'auto',
-    position: 'fixed',
-    zIndex: 1000,
-  },
-}))
-const CreateInDialogButton = ({
-  fullWidth,
-  maxWidth,
-  label,
-  record,
-  redirect,
-  scrollToTop,
-  className,
-  sx,
-  ...props
-}) => {
-  const [open, setOpen] = useState(false)
-  const translate = useTranslate()
-  const resource = useResourceContext()
-  const { openDialog, closeDialog } = useAppConfig()
-
-  const handleOpen = useCallback(
-    () => openDialog(resource, () => setOpen(true)),
-    [openDialog, resource],
-  )
-  const handleClose = useCallback(
-    () => closeDialog(resource, () => setOpen(false)),
-    [closeDialog, resource],
-  )
-  const isSmall = useMediaQuery((theme) => theme.breakpoints.down('md'))
-  return (
-    <>
-      {isSmall ? (
-        <StyledFab
-          {...props}
-          state={scrollStates[String(scrollToTop)]}
-          // @ts-ignore FabProps ships its own runtime palette `FabPropsColorOverrides` provoking an overlap error with `ButtonProps`
-          color="primary"
-          className={clsx(CreateButtonClasses.floating, className)}
-          aria-label={label && translate(label)}
-          onClick={handleOpen}
-        >
-          <Add />
-        </StyledFab>
-      ) : (
-        <Button {...props} sx={sx} label={label} onClick={handleOpen}>
-          <Add />
-        </Button>
-      )}
-      <Dialog open={open} onClose={handleClose} fullWidth={fullWidth} maxWidth={maxWidth}>
-        <CreateInDialogContent
-          {...props}
-          redirect={redirect}
-          record={record}
-          onClose={handleClose}
-        />
-      </Dialog>
-    </>
-  )
-}
-
-CreateInDialogButton.defaultProps = {
-  fullWidth: true,
-  maxWidth: 'md',
-  label: 'ra.action.create',
-  scrollToTop: true,
-}
-
-CreateInDialogButton.propTypes = {
-  ...Button.propTypes,
-  redirect: PropTypes.oneOf(['list', 'edit', 'show', false]),
-  fullWidth: PropTypes.bool,
-  maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]),
-  label: PropTypes.string,
-  record: PropTypes.object,
-  scrollToTop: PropTypes.bool,
-  className: PropTypes.string,
-  sx: PropTypes.object,
-}
-
-export default CreateInDialogButton

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