@campxdev/shared 1.8.4 → 1.8.5-0.alpha-1

package/src/components/DropDownButton/DropDownButton.tsx

@@ -1,184 +1,184 @@
-import { MoreVert } from '@mui/icons-material'
-import {
-  ButtonProps,
-  DialogProps,
-  DrawerProps,
-  IconButtonProps,
-  MenuListProps,
-  MenuProps,
-} from '@mui/material'
-import { ReactNode, useState } from 'react'
-import { useImmer } from 'use-immer'
-import { CustomDialog } from '../ModalButtons/DialogButton'
-import { CustomDrawer } from '../ModalButtons/DrawerButton'
-import AnchorElement from './AnchorElement'
-import {
-  IMenuItemProps,
-  MenuItemType,
-  RenderMenuItem,
-} from './DropdownMenuItem'
-import { StyledMenu } from './styles'
-
-interface DropDownButtonProps {
-  icon?: {
-    icon: ReactNode
-    iconProps?: IconButtonProps
-    outlined?: boolean
-  }
-  button?: {
-    label?: string
-    buttonProps?: ButtonProps
-  }
-  anchor?: (props: { open: () => void }) => ReactNode
-  loading?: boolean
-  menu: IMenuItemProps[]
-  menuProps?: Omit<MenuProps, 'open'>
-  menuListProps?: MenuListProps
-}
-
-const defaultIcon = {
-  icon: <MoreVert color="primary" />,
-  outlined: true,
-}
-
-interface IModalState {
-  open: boolean
-  content: any
-  contentTitle: ReactNode
-  type: MenuItemType
-  props: Omit<DialogProps, 'open'> | Omit<DrawerProps, 'open'>
-}
-
-const DropDownButton = ({
-  button,
-  icon = defaultIcon,
-  menu = [],
-  menuProps,
-  menuListProps,
-  loading = false,
-  anchor,
-}: DropDownButtonProps) => {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-  const [open, setOpen] = useState(false)
-
-  const [modalState, setModalState] = useImmer<IModalState>({
-    open: false,
-    content: null,
-    contentTitle: '',
-    type: 'drawer',
-    props: null,
-  })
-
-  const handleClick = (event: any) => {
-    setAnchorEl(event.currentTarget)
-    setOpen(true)
-  }
-
-  const handleClose = () => {
-    setAnchorEl(null)
-    setOpen(false)
-  }
-
-  const onModalClose = () => {
-    setModalState((s) => {
-      s.open = false
-      s.content = null
-    })
-  }
-  const onModalOpen = (item, props) => {
-    setModalState((s) => {
-      s.content = item.content
-      s.open = true
-      s.type = item.actionType
-      s.props = props
-      s.contentTitle = item?.contentTitle ?? ''
-    })
-  }
-
-  return (
-    <>
-      <AnchorElement
-        anchor={anchor}
-        loading={loading}
-        button={button}
-        icon={icon}
-        handleClick={handleClick}
-      />
-      <StyledMenu
-        elevation={0}
-        id="basic-menu"
-        anchorEl={anchorEl}
-        keepMounted
-        open={open}
-        onClose={handleClose}
-        PaperProps={{
-          elevation: 0,
-        }}
-        MenuListProps={{ ...menuListProps }}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right',
-        }}
-        transitionDuration={150}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'right',
-        }}
-        {...menuProps}
-      >
-        {menu.map((item, index) => (
-          <RenderMenuItem
-            key={index}
-            onModalOpen={(props) => onModalOpen(item, props)}
-            modalState={modalState}
-            handleClose={handleClose}
-            actionType={item?.actionType}
-            {...item}
-          />
-        ))}
-      </StyledMenu>
-      {modalState?.open && (
-        <RenderContent
-          onClose={onModalClose}
-          modalState={modalState}
-          contentType={modalState.type}
-        />
-      )}
-    </>
-  )
-}
-
-export default DropDownButton
-
-const RenderContent = ({
-  contentType,
-  modalState,
-  onClose,
-}: {
-  contentType: MenuItemType
-  modalState: any
-  onClose: () => void
-}) => {
-  if (contentType === 'dialog')
-    return (
-      <CustomDialog
-        onClose={onClose}
-        open={modalState.open}
-        content={modalState.content}
-        title={modalState?.contentTitle}
-        dialogProps={modalState?.props}
-      />
-    )
-
-  if (contentType === 'drawer')
-    return (
-      <CustomDrawer
-        onClose={onClose}
-        open={modalState.open}
-        content={modalState.content}
-        title={modalState?.contentTitle}
-        drawerProps={modalState?.props}
-      />
-    )
-  return <></>
-}
+import { MoreVert } from '@mui/icons-material'
+import {
+  ButtonProps,
+  DialogProps,
+  DrawerProps,
+  IconButtonProps,
+  MenuListProps,
+  MenuProps,
+} from '@mui/material'
+import { ReactNode, useState } from 'react'
+import { useImmer } from 'use-immer'
+import { CustomDialog } from '../ModalButtons/DialogButton'
+import { CustomDrawer } from '../ModalButtons/DrawerButton'
+import AnchorElement from './AnchorElement'
+import {
+  IMenuItemProps,
+  MenuItemType,
+  RenderMenuItem,
+} from './DropdownMenuItem'
+import { StyledMenu } from './styles'
+
+interface DropDownButtonProps {
+  icon?: {
+    icon: ReactNode
+    iconProps?: IconButtonProps
+    outlined?: boolean
+  }
+  button?: {
+    label?: string
+    buttonProps?: ButtonProps
+  }
+  anchor?: (props: { open: () => void }) => ReactNode
+  loading?: boolean
+  menu: IMenuItemProps[]
+  menuProps?: Omit<MenuProps, 'open'>
+  menuListProps?: MenuListProps
+}
+
+const defaultIcon = {
+  icon: <MoreVert color="primary" />,
+  outlined: true,
+}
+
+interface IModalState {
+  open: boolean
+  content: any
+  contentTitle: ReactNode
+  type: MenuItemType
+  props: Omit<DialogProps, 'open'> | Omit<DrawerProps, 'open'>
+}
+
+const DropDownButton = ({
+  button,
+  icon = defaultIcon,
+  menu = [],
+  menuProps,
+  menuListProps,
+  loading = false,
+  anchor,
+}: DropDownButtonProps) => {
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const [open, setOpen] = useState(false)
+
+  const [modalState, setModalState] = useImmer<IModalState>({
+    open: false,
+    content: null,
+    contentTitle: '',
+    type: 'drawer',
+    props: null,
+  })
+
+  const handleClick = (event: any) => {
+    setAnchorEl(event.currentTarget)
+    setOpen(true)
+  }
+
+  const handleClose = () => {
+    setAnchorEl(null)
+    setOpen(false)
+  }
+
+  const onModalClose = () => {
+    setModalState((s) => {
+      s.open = false
+      s.content = null
+    })
+  }
+  const onModalOpen = (item, props) => {
+    setModalState((s) => {
+      s.content = item.content
+      s.open = true
+      s.type = item.actionType
+      s.props = props
+      s.contentTitle = item?.contentTitle ?? ''
+    })
+  }
+
+  return (
+    <>
+      <AnchorElement
+        anchor={anchor}
+        loading={loading}
+        button={button}
+        icon={icon}
+        handleClick={handleClick}
+      />
+      <StyledMenu
+        elevation={0}
+        id="basic-menu"
+        anchorEl={anchorEl}
+        keepMounted
+        open={open}
+        onClose={handleClose}
+        PaperProps={{
+          elevation: 0,
+        }}
+        MenuListProps={{ ...menuListProps }}
+        anchorOrigin={{
+          vertical: 'bottom',
+          horizontal: 'right',
+        }}
+        transitionDuration={150}
+        transformOrigin={{
+          vertical: 'top',
+          horizontal: 'right',
+        }}
+        {...menuProps}
+      >
+        {menu.map((item, index) => (
+          <RenderMenuItem
+            key={index}
+            onModalOpen={(props) => onModalOpen(item, props)}
+            modalState={modalState}
+            handleClose={handleClose}
+            actionType={item?.actionType}
+            {...item}
+          />
+        ))}
+      </StyledMenu>
+      {modalState?.open && (
+        <RenderContent
+          onClose={onModalClose}
+          modalState={modalState}
+          contentType={modalState.type}
+        />
+      )}
+    </>
+  )
+}
+
+export default DropDownButton
+
+const RenderContent = ({
+  contentType,
+  modalState,
+  onClose,
+}: {
+  contentType: MenuItemType
+  modalState: any
+  onClose: () => void
+}) => {
+  if (contentType === 'dialog')
+    return (
+      <CustomDialog
+        onClose={onClose}
+        open={modalState.open}
+        content={modalState.content}
+        title={modalState?.contentTitle}
+        dialogProps={modalState?.props}
+      />
+    )
+
+  if (contentType === 'drawer')
+    return (
+      <CustomDrawer
+        onClose={onClose}
+        open={modalState.open}
+        content={modalState.content}
+        title={modalState?.contentTitle}
+        drawerProps={modalState?.props}
+      />
+    )
+  return <></>
+}

package/src/components/DropDownButton/DropdownMenuItem.tsx

@@ -1,110 +1,122 @@
-import {
-  DialogProps,
-  DrawerProps,
-  ListItemIcon,
-  ListItemText,
-  styled,
-} from '@mui/material'
-import { ReactNode } from 'react'
-import { Link } from 'react-router-dom'
-import { DrawerButtonProps } from '../ModalButtons/DrawerButton'
-import { StyledMenuItem } from './styles'
-
-const StyledLink = styled(Link)(({ theme }) => ({
-  display: 'block',
-  textTransform: 'none',
-  textDecoration: 'none',
-}))
-
-export type MenuItemType = 'normal' | 'dialog' | 'drawer' | 'link'
-
-export type MenuItemButtonProps = {
-  icon?: ReactNode
-  label: ReactNode
-  onClick: () => void
-  link?: {
-    to: string
-    target?: '_self' | '_blank'
-  }
-}
-
-const MenuItemButton = ({
-  icon,
-  label,
-  onClick,
-  ...props
-}: MenuItemButtonProps) => {
-  return (
-    <StyledMenuItem
-      sx={{ minWidth: '180px', width: '100%' }}
-      onClick={onClick}
-      {...props}
-    >
-      {icon && <ListItemIcon>{icon}</ListItemIcon>}
-      <ListItemText>{label}</ListItemText>
-    </StyledMenuItem>
-  )
-}
-
-export type IMenuItemProps = Omit<MenuItemButtonProps, 'onClick'> & {
-  content?: DrawerButtonProps['content']
-  contentTitle?: ReactNode
-  actionType?: MenuItemType
-  onClick?: () => void
-  dialogProps?: Omit<DialogProps, 'open'>
-  drawerProps?: Omit<DrawerProps, 'open'>
-}
-
-export interface IRenderMenuItemProps extends IMenuItemProps {
-  handleClose: () => void
-  modalState: any
-  onModalOpen: (props: any) => void
-}
-
-export const RenderMenuItem = ({
-  onClick,
-  actionType = 'normal',
-  handleClose,
-  modalState,
-  onModalOpen,
-  link,
-  drawerProps,
-  dialogProps,
-  ...props
-}: IRenderMenuItemProps) => {
-  const renderMenuItem: Record<MenuItemType, ReactNode> = {
-    normal: (
-      <MenuItemButton
-        {...props}
-        onClick={() => {
-          onClick()
-          handleClose()
-        }}
-      />
-    ),
-    dialog: (
-      <MenuItemButton
-        {...props}
-        onClick={() => {
-          onModalOpen(dialogProps)
-          handleClose()
-        }}
-      />
-    ),
-    drawer: (
-      <MenuItemButton
-        {...props}
-        onClick={() => {
-          onModalOpen(drawerProps)
-          handleClose()
-        }}
-      />
-    ),
-    link: (
-      <StyledLink to={link?.to ?? ''} target={link?.target ?? '_blank'}>
-        <MenuItemButton {...props} onClick={() => {}} />
-      </StyledLink>
-    ),
-  }
-  return <>{renderMenuItem[actionType]}</>
-}
+import {
+  DialogProps,
+  DrawerProps,
+  ListItemIcon,
+  ListItemText,
+  styled,
+} from '@mui/material'
+import { ReactNode } from 'react'
+import { Link } from 'react-router-dom'
+import { DrawerButtonProps } from '../ModalButtons/DrawerButton'
+import { StyledMenuItem } from './styles'
+import { ValidateAccess } from '../../permissions'
+import { Permission } from '../../shared-state'
+
+const StyledLink = styled(Link)(({ theme }) => ({
+  display: 'block',
+  textTransform: 'none',
+  textDecoration: 'none',
+}))
+
+export type MenuItemType = 'normal' | 'dialog' | 'drawer' | 'link'
+
+export type MenuItemButtonProps = {
+  icon?: ReactNode
+  label: ReactNode
+  onClick: () => void
+  link?: {
+    to: string
+    target?: '_self' | '_blank'
+  }
+}
+
+const MenuItemButton = ({
+  icon,
+  label,
+  onClick,
+  ...props
+}: MenuItemButtonProps) => {
+  return (
+    <StyledMenuItem
+      sx={{ minWidth: '180px', width: '100%' }}
+      onClick={onClick}
+      {...props}
+    >
+      {icon && <ListItemIcon>{icon}</ListItemIcon>}
+      <ListItemText>{label}</ListItemText>
+    </StyledMenuItem>
+  )
+}
+
+export type IMenuItemProps = Omit<MenuItemButtonProps, 'onClick'> & {
+  content?: DrawerButtonProps['content']
+  contentTitle?: ReactNode
+  actionType?: MenuItemType
+  onClick?: () => void
+  dialogProps?: Omit<DialogProps, 'open'>
+  drawerProps?: Omit<DrawerProps, 'open'>
+  permissionKey?: Permission
+}
+
+export interface IRenderMenuItemProps extends IMenuItemProps {
+  handleClose: () => void
+  modalState: any
+  onModalOpen: (props: any) => void
+}
+
+export const RenderMenuItem = ({
+  onClick,
+  actionType = 'normal',
+  handleClose,
+  modalState,
+  onModalOpen,
+  link,
+  drawerProps,
+  dialogProps,
+  permissionKey,
+  ...props
+}: IRenderMenuItemProps) => {
+  const renderMenuItem: Record<MenuItemType, ReactNode> = {
+    normal: (
+      <MenuItemButton
+        {...props}
+        onClick={() => {
+          onClick()
+          handleClose()
+        }}
+      />
+    ),
+    dialog: (
+      <MenuItemButton
+        {...props}
+        onClick={() => {
+          onModalOpen(dialogProps)
+          handleClose()
+        }}
+      />
+    ),
+    drawer: (
+      <MenuItemButton
+        {...props}
+        onClick={() => {
+          onModalOpen(drawerProps)
+          handleClose()
+        }}
+      />
+    ),
+    link: (
+      <StyledLink to={link?.to ?? ''} target={link?.target ?? '_blank'}>
+        <MenuItemButton {...props} onClick={() => {}} />
+      </StyledLink>
+    ),
+  }
+
+  if (permissionKey)
+    return (
+      <ValidateAccess accessKey={permissionKey}>
+        {renderMenuItem[actionType]}
+      </ValidateAccess>
+    )
+
+  return <>{renderMenuItem[actionType]}</>
+}

package/src/components/DropDownButton/index.tsx

@@ -1 +1 @@
-export { default } from './DropDownButton'
+export { default } from './DropDownButton'