@campxdev/shared 1.2.8 → 1.3.0

package/src/components/DropDownButton.tsx

@@ -1,194 +0,0 @@
-import { KeyboardArrowDown, MoreVert } from '@mui/icons-material'
-import {
-  Box,
-  Button,
-  ButtonProps,
-  CircularProgress,
-  IconButton,
-  IconButtonProps,
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  MenuListProps,
-  MenuProps,
-  styled,
-} from '@mui/material'
-import { ReactNode, useState } from 'react'
-
-type MenuItem =
-  | {
-      label: string | ReactNode
-      icon?: ReactNode
-      onClick: (props?: any) => any
-    }
-  | { customButton?: ReactNode }
-
-interface Props {
-  label?: string
-  icon?: {
-    icon: ReactNode
-    iconProps?: IconButtonProps
-    outlined?: boolean
-  }
-  loading?: boolean
-  menu: MenuItem[]
-  buttonProps?: ButtonProps
-  menuProps?: Omit<MenuProps, 'open'>
-  menuListProps?: MenuListProps
-  renderMenuItems?: Array<ReactNode>
-}
-const defaultIcon = {
-  icon: <MoreVert color="primary" />,
-  outlined: true,
-}
-
-export default function DropDownButton({
-  label,
-  icon = defaultIcon,
-  menu = [],
-  buttonProps,
-  menuProps,
-  menuListProps,
-  loading = false,
-  renderMenuItems = [],
-}: Props) {
-  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-  const open = Boolean(anchorEl)
-
-  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
-  return (
-    <>
-      {!label ? (
-        <StyledIconButton
-          outlined={icon?.outlined ?? false}
-          onClick={handleClick}
-          {...icon.iconProps}
-        >
-          {icon.icon}
-        </StyledIconButton>
-      ) : (
-        <StyledDropDownButton
-          onClick={handleClick}
-          disabled={loading}
-          endIcon={
-            loading ? (
-              <CircularProgress size="20px" thickness={1.7} />
-            ) : (
-              <KeyboardArrowDown />
-            )
-          }
-          {...buttonProps}
-        >
-          {label}
-        </StyledDropDownButton>
-      )}
-      <Menu
-        elevation={3}
-        id="basic-menu"
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-        MenuListProps={{ sx: { padding: 0 }, ...menuListProps }}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'right',
-        }}
-        {...menuProps}
-      >
-        <RenderMenuItems
-          menu={menu}
-          renderMenuItems={renderMenuItems}
-          handleClose={handleClose}
-        />
-      </Menu>
-    </>
-  )
-}
-
-const RenderMenuItems = ({ renderMenuItems, menu, handleClose }) => {
-  if (renderMenuItems?.length) {
-    return (
-      <>
-        {renderMenuItems.map((Item, index) => (
-          <StyledMenuItem
-            disableRipple
-            sx={{
-              minWidth: '120px',
-              width: '100%',
-              padding: 0,
-              '&:hover': { background: 'none' },
-            }}
-            key={index}
-          >
-            {Item}
-          </StyledMenuItem>
-        ))}
-      </>
-    )
-  }
-  if (menu?.length) {
-    return (
-      <>
-        {menu.map((item, index) => (
-          <>
-            {item?.customButton ? (
-              item.customButton
-            ) : (
-              <StyledMenuItem
-                sx={{ minWidth: '120px', width: '100%' }}
-                key={index}
-                onClick={() => {
-                  handleClose()
-                  item.onClick()
-                }}
-              >
-                {item?.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
-                <ListItemText>{item.label}</ListItemText>
-              </StyledMenuItem>
-            )}
-          </>
-        ))}
-      </>
-    )
-  }
-}
-
-const StyledIconButton = styled(IconButton, {
-  shouldForwardProp: (prop) => prop !== 'outlined',
-})<{ outlined?: boolean }>(({ theme, outlined }) => ({
-  ...(outlined && {
-    border: `1px solid ${theme.palette.primary.main}`,
-    borderRadius: '5px',
-  }),
-}))
-
-const StyledMenuItem = styled(MenuItem)(({}) => ({
-  display: 'flex',
-  alignItems: 'center',
-  '& .MuiListItemIcon-root': {
-    minWidth: '24px',
-  },
-  '& .MuiSvgIcon-root': {
-    height: '18px',
-    width: '18px',
-  },
-  '& .MuiTypography-root': {
-    fontWeight: 600,
-  },
-}))
-
-const StyledDropDownButton = styled(Button)(({}) => ({
-  padding: '0 14px',
-}))

package/src/components/MenuButton.tsx

@@ -1,103 +0,0 @@
-import {
-  ListItemIcon,
-  ListItemText,
-  Menu,
-  MenuItem,
-  MenuListProps,
-  MenuProps,
-  styled,
-} from '@mui/material'
-import { cloneElement, ReactNode, useState } from 'react'
-
-interface Props {
-  anchor: any
-  loading?: boolean
-  menu: {
-    label: string | ReactNode
-    icon?: ReactNode
-    onClick: (props?: any) => any
-    component?: ReactNode
-  }[]
-  menuProps?: Omit<MenuProps, 'open'>
-  menuListProps?: MenuListProps
-}
-
-export default function MenuButton({
-  menu,
-  menuProps,
-  menuListProps,
-  loading = false,
-  anchor,
-}: Props) {
-  const [anchorEl, setAnchorEl] = useState<any>(null)
-  const open = Boolean(anchorEl)
-
-  const handleClick = (event) => {
-    setAnchorEl(event.currentTarget)
-  }
-
-  const handleClose = () => {
-    setAnchorEl(null)
-  }
-
-  const AnchorEl = cloneElement(anchor, {
-    onClick: handleClick,
-  })
-
-  return (
-    <>
-      {AnchorEl}
-      <Menu
-        elevation={2}
-        id="basic-menu"
-        anchorEl={anchorEl}
-        open={open}
-        onClose={handleClose}
-        MenuListProps={{
-          sx: { padding: 0 },
-          ...menuListProps,
-        }}
-        anchorOrigin={{
-          vertical: 'bottom',
-          horizontal: 'right',
-        }}
-        transformOrigin={{
-          vertical: 'top',
-          horizontal: 'right',
-        }}
-        {...menuProps}
-      >
-        {menu.map((item, index) => (
-          <StyledMenuItem
-            sx={{ minWidth: '120px', width: '100%' }}
-            key={index}
-            onClick={() => {
-              handleClose()
-              item.onClick()
-            }}
-          >
-            {item?.icon && <ListItemIcon>{item.icon}</ListItemIcon>}
-            <ListItemText>{item.label}</ListItemText>
-          </StyledMenuItem>
-        ))}
-      </Menu>
-    </>
-  )
-}
-
-const StyledMenuItem = styled(MenuItem)(({ theme }) => ({
-  padding: '10px 20px',
-  display: 'flex',
-  alignItems: 'center',
-  '& .MuiListItemIcon-root': {
-    minWidth: '24px',
-  },
-  '& .MuiSvgIcon-root': {
-    height: '18px',
-    width: '18px',
-  },
-  '& .MuiTypography-root': {
-    fontWeight: 600,
-  },
-  borderBottom: theme.borders.grayLight,
-}))