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

package/src/components/MenuPopover/getPosition.jsx

@@ -0,0 +1,98 @@
+export default function getPosition(arrow) {
+  let props
+
+  switch (arrow) {
+    case 'top-left':
+      props = {
+        style: { ml: -0.75 },
+        anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+        transformOrigin: { vertical: 'top', horizontal: 'left' },
+      }
+      break
+    case 'top-center':
+      props = {
+        style: {},
+        anchorOrigin: { vertical: 'bottom', horizontal: 'center' },
+        transformOrigin: { vertical: 'top', horizontal: 'center' },
+      }
+      break
+    case 'top-right':
+      props = {
+        style: { ml: 0.75 },
+        anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+        transformOrigin: { vertical: 'top', horizontal: 'right' },
+      }
+      break
+    case 'bottom-left':
+      props = {
+        style: { ml: -0.75 },
+        anchorOrigin: { vertical: 'top', horizontal: 'left' },
+        transformOrigin: { vertical: 'bottom', horizontal: 'left' },
+      }
+      break
+    case 'bottom-center':
+      props = {
+        style: {},
+        anchorOrigin: { vertical: 'top', horizontal: 'center' },
+        transformOrigin: { vertical: 'bottom', horizontal: 'center' },
+      }
+      break
+    case 'bottom-right':
+      props = {
+        style: { ml: 0.75 },
+        anchorOrigin: { vertical: 'top', horizontal: 'right' },
+        transformOrigin: { vertical: 'bottom', horizontal: 'right' },
+      }
+      break
+    case 'left-top':
+      props = {
+        style: { mt: -0.75 },
+        anchorOrigin: { vertical: 'top', horizontal: 'right' },
+        transformOrigin: { vertical: 'top', horizontal: 'left' },
+      }
+      break
+    case 'left-center':
+      props = {
+        anchorOrigin: { vertical: 'center', horizontal: 'right' },
+        transformOrigin: { vertical: 'center', horizontal: 'left' },
+      }
+      break
+    case 'left-bottom':
+      props = {
+        style: { mt: 0.75 },
+        anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+        transformOrigin: { vertical: 'bottom', horizontal: 'left' },
+      }
+      break
+    case 'right-top':
+      props = {
+        style: { mt: -0.75 },
+        anchorOrigin: { vertical: 'top', horizontal: 'left' },
+        transformOrigin: { vertical: 'top', horizontal: 'right' },
+      }
+      break
+    case 'right-center':
+      props = {
+        anchorOrigin: { vertical: 'center', horizontal: 'left' },
+        transformOrigin: { vertical: 'center', horizontal: 'right' },
+      }
+      break
+    case 'right-bottom':
+      props = {
+        style: { mt: 0.75 },
+        anchorOrigin: { vertical: 'bottom', horizontal: 'left' },
+        transformOrigin: { vertical: 'bottom', horizontal: 'right' },
+      }
+      break
+
+    // top-right
+    default:
+      props = {
+        style: { ml: 0.75 },
+        anchorOrigin: { vertical: 'bottom', horizontal: 'right' },
+        transformOrigin: { vertical: 'top', horizontal: 'right' },
+      }
+  }
+
+  return props
+}

package/src/components/MenuPopover/index.jsx

@@ -0,0 +1,3 @@
+export { default as getPosition } from './getPosition'
+export { default as MenuPopover } from './MenuPopover'
+export { StyledArrow } from './styles'

package/src/components/MenuPopover/styles.jsx

@@ -0,0 +1,87 @@
+import { alpha, styled } from '@mui/material/styles'
+
+export const StyledArrow = styled('span')(({ arrow, theme }) => {
+  const SIZE = 12
+
+  const POSITION = -(SIZE / 2)
+
+  const borderStyle = `solid 1px ${alpha(theme.palette.grey[500], 0.12)}`
+
+  const topStyle = {
+    borderRadius: '0 0 3px 0',
+    top: POSITION,
+    borderBottom: borderStyle,
+    borderRight: borderStyle,
+  }
+
+  const bottomStyle = {
+    borderRadius: '3px 0 0 0',
+    bottom: POSITION,
+    borderTop: borderStyle,
+    borderLeft: borderStyle,
+  }
+
+  const leftStyle = {
+    borderRadius: '0 3px 0 0',
+    left: POSITION,
+    borderTop: borderStyle,
+    borderRight: borderStyle,
+  }
+
+  const rightStyle = {
+    borderRadius: '0 0 0 3px',
+    right: POSITION,
+    borderBottom: borderStyle,
+    borderLeft: borderStyle,
+  }
+
+  return {
+    display: 'none',
+    [theme.breakpoints.up('sm')]: {
+      zIndex: 1,
+      width: SIZE,
+      height: SIZE,
+      content: "''",
+      display: 'block',
+      position: 'absolute',
+      transform: 'rotate(-135deg)',
+      background: theme.palette.background.paper,
+    },
+    // Top
+    ...(arrow === 'top-left' && { ...topStyle, left: 20 }),
+    ...(arrow === 'top-center' && {
+      ...topStyle,
+      left: 0,
+      right: 0,
+      margin: 'auto',
+    }),
+    ...(arrow === 'top-right' && { ...topStyle, right: 20 }),
+    // Bottom
+    ...(arrow === 'bottom-left' && { ...bottomStyle, left: 20 }),
+    ...(arrow === 'bottom-center' && {
+      ...bottomStyle,
+      left: 0,
+      right: 0,
+      margin: 'auto',
+    }),
+    ...(arrow === 'bottom-right' && { ...bottomStyle, right: 20 }),
+    // Left
+    ...(arrow === 'left-top' && { ...leftStyle, top: 20 }),
+    ...(arrow === 'left-center' && {
+      ...leftStyle,
+      top: 0,
+      bottom: 0,
+      margin: 'auto',
+    }),
+    ...(arrow === 'left-bottom' && { ...leftStyle, bottom: 20 }),
+    // Right
+    ...(arrow === 'right-top' && { ...rightStyle, top: 20 }),
+    ...(arrow === 'right-center' && {
+      ...rightStyle,
+      top: 0,
+      bottom: 0,
+      margin: 'auto',
+    }),
+    ...(arrow === 'right-bottom' && { ...rightStyle, bottom: 20 }),
+  }
+})

package/src/components/Notification.jsx

@@ -0,0 +1,13 @@
+import { Notification as RaNotification } from 'react-admin'
+import { styled } from '@mui/material/styles'
+
+const ApplicaStyledNotification = styled(
+  RaNotification,
+  {},
+)(({ theme }) => ({
+  '& *': {
+    fontSize: theme.typography.body1.fontSize,
+  },
+}))
+
+export default ApplicaStyledNotification

package/src/components/ScrollTop.jsx

@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types'
+import { useEffect } from 'react'
+import { useLocation } from 'react-router-dom'
+
+const ScrollTop = ({ children }) => {
+  const location = useLocation()
+  const { pathname } = location
+
+  useEffect(() => {
+    window.scrollTo({
+      top: 0,
+      left: 0,
+      behavior: 'smooth',
+    })
+  }, [pathname])
+
+  return children || null
+}
+
+ScrollTop.propTypes = {
+  children: PropTypes.node,
+}
+
+export default ScrollTop

package/src/components/ScrollX.jsx

@@ -0,0 +1,10 @@
+// material-ui
+import { styled } from '@mui/material/styles'
+
+const ScrollX = styled('div')({
+  width: '100%',
+  overflowX: 'auto',
+  display: 'block',
+})
+
+export default ScrollX

package/src/components/SmallIcon.jsx

@@ -0,0 +1,14 @@
+import PropTypes from 'prop-types'
+import { Typography } from '@mui/material'
+
+const SmallIcon = ({ title }) => (
+  <Typography variant="h2" sx={{ style: 'bold' }}>
+    {title?.substr(0, 1).toUpperCase()}
+  </Typography>
+)
+
+SmallIcon.propTypes = {
+  title: PropTypes.string.isRequired,
+}
+
+export default SmallIcon

package/src/components/index.jsx

@@ -0,0 +1,36 @@
+import ActionsMenu from './ActionsMenu'
+import Layout from './Layout'
+import Loadable from './Loadable'
+import Loader from './Loader'
+import Logo from './Logo'
+import MainCard from './MainCard'
+import MainIcon from './MainIcon'
+import { MenuPopover } from './MenuPopover'
+import Notification from './Notification'
+import ScrollTop from './ScrollTop'
+import ScrollX from './ScrollX'
+import SmallIcon from './SmallIcon'
+export {
+  MainIcon,
+  ActionsMenu,
+  Loadable,
+  Loader,
+  Layout,
+  Logo,
+  MainCard,
+  ScrollTop,
+  ScrollX,
+  MenuPopover,
+  Notification,
+  SmallIcon,
+}
+
+export * from './@extended'
+export * from './third-party'
+
+// Ra-Applica
+export * from './ra-buttons'
+export * from './ra-fields'
+export * from './ra-inputs'
+export * from './ra-lists'
+export * from './ra-forms'

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

@@ -0,0 +1,203 @@
+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-buttons/EditInDialogButton.jsx

@@ -0,0 +1,108 @@
+/* eslint-disable camelcase */
+import {
+  Button,
+  EditContextProvider,
+  SaveButton,
+  useEditController,
+  useGetOne,
+  useNotify,
+  useRecordContext,
+  useResourceContext,
+} from 'react-admin'
+import React, { useCallback, useState } from 'react'
+
+import { Dialog } from '@mui/material'
+import { Edit } from '@mui/icons-material'
+import PropTypes from 'prop-types'
+import { Toolbar } from '../ra-forms'
+import { useAppConfig } from '../../hooks'
+
+const EditInDialogContent = ({ onClose, children }) => {
+  const notify = useNotify()
+  const record = useRecordContext()
+  const resource = useResourceContext()
+  const { id } = record
+  const { isLoading, data } = useGetOne(resource, { id })
+
+  const handleSuccess = useCallback(() => {
+    notify('ra.notification.updated', {
+      type: 'info',
+      messageArgs: {
+        smart_count: 1,
+      },
+    })
+    onClose()
+  }, [onClose, notify])
+  const { save, saving } = useEditController({
+    resource,
+    id,
+    mutationMode: 'pessimistic',
+    mutationOptions: {
+      onSuccess: handleSuccess,
+    },
+  })
+
+  return (
+    <EditContextProvider
+      value={{
+        record: data,
+        isLoading,
+        save: save,
+        saving: saving,
+      }}
+    >
+      {React.cloneElement(children, {
+        toolbar: (
+          <Toolbar>
+            <Button variant="text" size="medium" label="ra.action.cancel" onClick={onClose} />
+            <SaveButton />
+          </Toolbar>
+        ),
+      })}
+    </EditContextProvider>
+  )
+}
+
+EditInDialogContent.propTypes = {
+  children: PropTypes.node,
+  onClose: PropTypes.func,
+}
+
+const EditInDialogButton = ({ fullWidth, maxWidth, label, ...props }) => {
+  const [open, setOpen] = useState(false)
+  const { openDialog, closeDialog } = useAppConfig()
+  const resource = useResourceContext()
+  const handleOpen = useCallback(
+    () => openDialog(resource, () => setOpen(true)),
+    [openDialog, resource],
+  )
+  const handleClose = useCallback(
+    () => closeDialog(resource, () => setOpen(false)),
+    [closeDialog, resource],
+  )
+
+  return (
+    <>
+      <Button label={label} onClick={handleOpen}>
+        <Edit />
+      </Button>
+      <Dialog open={open} onClose={handleClose} fullWidth={fullWidth} maxWidth={maxWidth}>
+        <EditInDialogContent {...props} onClose={handleClose} />
+      </Dialog>
+    </>
+  )
+}
+
+EditInDialogButton.defaultProps = {
+  fullWidth: true,
+  maxWidth: 'md',
+  label: 'ra.action.edit',
+}
+
+EditInDialogButton.propTypes = {
+  fullWidth: PropTypes.bool,
+  maxWidth: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl', false]),
+  label: PropTypes.string,
+}
+
+export default EditInDialogButton

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

@@ -0,0 +1,41 @@
+import { Button, useAuthProvider, useRecordContext } from 'react-admin'
+import React, { useCallback, useState } from 'react'
+
+import PropTypes from 'prop-types'
+import { VpnKey } from '@mui/icons-material'
+
+const ImpersonateUserButton = ({ label = 'ra.auth.sign_in', ...props }) => {
+  const record = useRecordContext()
+  const [loading, setLoading] = useState(false)
+  const authProvider = useAuthProvider()
+  const handleClick = useCallback(
+    (e) => {
+      e.stopPropagation()
+      e.preventDefault()
+      setLoading(true)
+      authProvider.impersonate(record?.id).then(() => {
+        setLoading(false)
+        document.location.href = '/'
+      })
+    },
+    [authProvider, record?.id],
+  )
+  return (
+    <Button
+      disabled={loading || authProvider.impersonate === undefined}
+      color="primary"
+      variant="text"
+      label={label}
+      onClick={handleClick}
+      {...props}
+    >
+      <VpnKey />
+    </Button>
+  )
+}
+
+ImpersonateUserButton.propTypes = {
+  label: PropTypes.string,
+}
+
+export default ImpersonateUserButton

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

@@ -0,0 +1,4 @@
+import CreateInDialogButton from './CreateInDialogButton'
+import EditInDialogButton from './EditInDialogButton'
+import ImpersonateUserButton from './ImpersonateUserButton'
+export { CreateInDialogButton, EditInDialogButton, ImpersonateUserButton }

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

@@ -0,0 +1,33 @@
+import { CloneButton, DeleteWithConfirmButton, EditButton } from 'react-admin'
+
+import ActionsMenu from '../ActionsMenu'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+const ActionsField = ({ canEdit, canDelete, canClone }) => {
+  if (!canEdit && !canDelete && !canClone) {
+    return null
+  }
+
+  return (
+    <ActionsMenu>
+      {canEdit && <EditButton />}
+      {canDelete && <DeleteWithConfirmButton />}
+      {canClone && <CloneButton />}
+    </ActionsMenu>
+  )
+}
+
+ActionsField.defaultProps = {
+  canEdit: true,
+  canDelete: true,
+  canClone: false,
+}
+
+ActionsField.propTypes = {
+  canEdit: PropTypes.bool,
+  canDelete: PropTypes.bool,
+  canClone: PropTypes.bool,
+}
+
+export default ActionsField