@campxdev/shared 0.5.21 → 0.5.22

package/src/components/DropDownButton.tsx

@@ -1,190 +1,194 @@
-import {KeyboardArrowDown, MoreVert} from '@mui/icons-material'
+import { KeyboardArrowDown, MoreVert } from '@mui/icons-material'
 import {
-	Box,
-	Button,
-	ButtonProps,
-	CircularProgress,
-	IconButton,
-	IconButtonProps,
-	ListItemIcon,
-	ListItemText,
-	Menu,
-	MenuItem,
-	MenuListProps,
-	MenuProps,
-	styled,
+  Box,
+  Button,
+  ButtonProps,
+  CircularProgress,
+  IconButton,
+  IconButtonProps,
+  ListItemIcon,
+  ListItemText,
+  Menu,
+  MenuItem,
+  MenuListProps,
+  MenuProps,
+  styled,
 } from '@mui/material'
-import {ReactNode, useState} from 'react'
+import { ReactNode, useState } from 'react'
 
 type MenuItem =
-	| {label: string | ReactNode; icon?: ReactNode; onClick: (props?: any) => any}
-	| {customButton?: ReactNode}
+  | {
+      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>
+  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,
+  icon: <MoreVert color="primary" />,
+  outlined: true,
 }
 
 export default function DropDownButton({
-	label,
-	icon = defaultIcon,
-	menu = [],
-	buttonProps,
-	menuProps,
-	menuListProps,
-	loading = false,
-	renderMenuItems = [],
+  label,
+  icon = defaultIcon,
+  menu = [],
+  buttonProps,
+  menuProps,
+  menuListProps,
+  loading = false,
+  renderMenuItems = [],
 }: Props) {
-	const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
-	const open = Boolean(anchorEl)
+  const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null)
+  const open = Boolean(anchorEl)
 
-	const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
-		setAnchorEl(event.currentTarget)
-	}
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
+    setAnchorEl(event.currentTarget)
+  }
 
-	const handleClose = () => {
-		setAnchorEl(null)
-	}
+  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>
-		</>
-	)
+  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 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',
-	}),
+  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,
-	},
+  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',
+  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 { 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,
+  resetKey,
 }: {
-	children: ReactNode
-	resetKey?: string
+  children: ReactNode
+  resetKey?: string
 }) {
-	const location = useLocation()
-	return (
-		<QueryErrorResetBoundary>
-			{({reset}) => (
-				<ReactErrorBoundary
-					key={resetKey ?? location?.pathname}
-					fallbackRender={ErrorFallback}
-					onReset={reset}
-				>
-					{children}
-				</ReactErrorBoundary>
-			)}
-		</QueryErrorResetBoundary>
-	)
+  const location = useLocation()
+  return (
+    <QueryErrorResetBoundary>
+      {({ reset }) => (
+        <ReactErrorBoundary
+          key={resetKey ?? location?.pathname}
+          fallbackRender={ErrorFallback}
+          onReset={reset}
+        >
+          {children}
+        </ReactErrorBoundary>
+      )}
+    </QueryErrorResetBoundary>
+  )
 }