@campxdev/shared 1.0.4 → 1.1.0

package/src/components/DropDownButton.tsx

@@ -1,194 +1,194 @@
-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',
-}))
+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/ErrorBoundary/ErrorBoundary.tsx

@@ -1,28 +1,28 @@
-import { ReactNode } from 'react'
-import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'
-import { QueryErrorResetBoundary } from 'react-query'
-import { useLocation } from 'react-router-dom'
-import ErrorFallback from './ErrorFallback'
-
-export default function ErrorBoundary({
-  children,
-  resetKey,
-}: {
-  children: ReactNode
-  resetKey?: string
-}) {
-  const location = useLocation()
-  return (
-    <QueryErrorResetBoundary>
-      {({ reset }) => (
-        <ReactErrorBoundary
-          key={resetKey ?? location?.pathname}
-          fallbackRender={ErrorFallback}
-          onReset={reset}
-        >
-          {children}
-        </ReactErrorBoundary>
-      )}
-    </QueryErrorResetBoundary>
-  )
-}
+import { ReactNode } from 'react'
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary'
+import { QueryErrorResetBoundary } from 'react-query'
+import { useLocation } from 'react-router-dom'
+import ErrorFallback from './ErrorFallback'
+
+export default function ErrorBoundary({
+  children,
+  resetKey,
+}: {
+  children: ReactNode
+  resetKey?: string
+}) {
+  const location = useLocation()
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ReactErrorBoundary
+          key={resetKey ?? location?.pathname}
+          fallbackRender={ErrorFallback}
+          onReset={reset}
+        >
+          {children}
+        </ReactErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  )
+}