@campxdev/shared 1.4.23 → 1.4.25

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.4.23",
+  "version": "1.4.25",
   "main": "./exports.ts",
   "scripts": {
     "start": "react-scripts start",

package/src/components/DropDownButton/DropDownButton.tsx

@@ -1,6 +1,8 @@
 import { MoreVert } from '@mui/icons-material'
 import {
   ButtonProps,
+  DialogProps,
+  DrawerProps,
   IconButtonProps,
   MenuListProps,
   MenuProps,
@@ -43,6 +45,7 @@ interface IModalState {
   open: boolean
   content: any
   type: MenuItemType
+  props: Omit<DialogProps, 'open'> | Omit<DrawerProps, 'open'>
 }
 
 const DropDownButton = ({
@@ -61,6 +64,7 @@ const DropDownButton = ({
     open: false,
     content: null,
     type: 'drawer',
+    props: null,
   })
 
   const handleClick = (event: any) => {
@@ -79,11 +83,12 @@ const DropDownButton = ({
       s.content = null
     })
   }
-  const onModalOpen = (item) => {
+  const onModalOpen = (item, props) => {
     setModalState((s) => {
       s.content = item.content
       s.open = true
       s.type = item.actionType
+      s.props = props
     })
   }
 
@@ -121,13 +126,11 @@ const DropDownButton = ({
         {menu.map((item, index) => (
           <RenderMenuItem
             key={index}
-            onModalOpen={() => onModalOpen(item)}
+            onModalOpen={(props) => onModalOpen(item, props)}
             modalState={modalState}
             handleClose={handleClose}
             actionType={item?.actionType}
-            label={item.label}
-            onClick={item?.onClick}
-            link={item?.link}
+            {...item}
           />
         ))}
       </StyledMenu>
@@ -160,6 +163,7 @@ const RenderContent = ({
         open={modalState.open}
         content={modalState.content}
         title="Dialog Button"
+        dialogProps={modalState?.props}
       />
     )
 
@@ -170,6 +174,7 @@ const RenderContent = ({
         open={modalState.open}
         content={modalState.content}
         title="Dialog Button"
+        drawerProps={modalState?.props}
       />
     )
   return <></>

package/src/components/DropDownButton/DropdownMenuItem.tsx

@@ -1,4 +1,10 @@
-import { ListItemIcon, ListItemText, styled } from '@mui/material'
+import {
+  DialogProps,
+  DrawerProps,
+  ListItemIcon,
+  ListItemText,
+  styled,
+} from '@mui/material'
 import { ReactNode } from 'react'
 import { Link } from 'react-router-dom'
 import { DrawerButtonProps } from '../ModalButtons/DrawerButton'
@@ -45,12 +51,14 @@ export type IMenuItemProps = Omit<MenuItemButtonProps, 'onClick'> & {
   contentTitle?: ReactNode
   actionType?: MenuItemType
   onClick?: () => void
+  dialogProps?: Omit<DialogProps, 'open'>
+  drawerProps?: Omit<DrawerProps, 'open'>
 }
 
 export interface IRenderMenuItemProps extends IMenuItemProps {
   handleClose: () => void
   modalState: any
-  onModalOpen: () => void
+  onModalOpen: (props: any) => void
 }
 
 export const RenderMenuItem = ({
@@ -60,6 +68,8 @@ export const RenderMenuItem = ({
   modalState,
   onModalOpen,
   link,
+  drawerProps,
+  dialogProps,
   ...props
 }: IRenderMenuItemProps) => {
   const renderMenuItem: Record<MenuItemType, ReactNode> = {
@@ -76,7 +86,7 @@ export const RenderMenuItem = ({
       <MenuItemButton
         {...props}
         onClick={() => {
-          onModalOpen()
+          onModalOpen(dialogProps)
           handleClose()
         }}
       />
@@ -85,7 +95,7 @@ export const RenderMenuItem = ({
       <MenuItemButton
         {...props}
         onClick={() => {
-          onModalOpen()
+          onModalOpen(drawerProps)
           handleClose()
         }}
       />

package/src/components/FilterComponents/FilterButton.tsx

@@ -8,6 +8,7 @@ const StyledButtonWrapper = styled(Box)<{ size: 'regular' | 'large' }>(
     flexShrink: 0,
     border: theme.borders.grayLight,
     display: 'flex',
+    position: 'relative',
     alignItems: 'center',
     justifyContent: 'center',
     borderRadius: '10px',
@@ -19,12 +20,24 @@ const StyledButtonWrapper = styled(Box)<{ size: 'regular' | 'large' }>(
   }),
 )
 
+const StyledNotify = styled(Box)({
+  height: '5px',
+  width: '5px',
+  backgroundColor: 'red',
+  position: 'absolute',
+  borderRadius: '50%',
+  top: 3,
+  right: 3,
+})
+
 export default function FilterButton({
   onClick,
   size = 'large',
+  filtersApplied,
   ...props
 }: {
   onClick: (e: any) => void
+  filtersApplied?: boolean
   size?: 'regular' | 'large'
 }) {
   const handleClick = (e) => {
@@ -34,6 +47,7 @@ export default function FilterButton({
   }
   return (
     <StyledButtonWrapper size={size} {...props} onClick={handleClick}>
+      {filtersApplied && <StyledNotify />}
       <Tune />
     </StyledButtonWrapper>
   )

package/src/components/Layout/Header/UserBox.tsx

@@ -1,9 +1,14 @@
-import { ExitToAppOutlined, HttpsOutlined } from '@mui/icons-material'
+import {
+  ConfirmationNumberOutlined,
+  ExitToAppOutlined,
+  HttpsOutlined,
+} from '@mui/icons-material'
 import ConfirmationNumberOutlinedIcon from '@mui/icons-material/ConfirmationNumberOutlined'
 import { ReactNode } from 'react'
 import logout from '../../../utils/logout'
 import ChangePassword from '../../ChangePassword'
 import DropDownButton from '../../DropDownButton/DropDownButton'
+import { IMenuItemProps } from '../../DropDownButton/DropdownMenuItem'
 import { DialogButton } from '../../ModalButtons'
 import MyTickets from '../Tickets/MyTickets'
 import { StyledAvatar } from './styles'
@@ -21,7 +26,7 @@ export default function UserBox({
   actions,
 }: {
   fullName: string
-  actions: { label: ReactNode; icon?: ReactNode; onClick: any }[]
+  actions: IMenuItemProps[] | []
 }) {
   return (
     <>
@@ -33,39 +38,23 @@ export default function UserBox({
         )}
         menu={[
           ...actions,
-          // {
-          //   customButton: (
-          //     <DialogButton
-          //       dialogProps={{
-          //         maxWidth: 'xl',
-          //       }}
-          //       title="My Tickets"
-          //       anchor={({ open }) => (
-          //         <DropDownButton.MenuItem
-          //           onClick={open}
-          //           icon={<ConfirmationNumberOutlinedIcon />}
-          //           label="My Tickets"
-          //         />
-          //       )}
-          //       content={({ close }) => <MyTickets close={close} />}
-          //     />
-          //   ),
-          // },
-          // {
-          //   customButton: (
-          //     <DialogButton
-          //       title="Change Password"
-          //       anchor={({ open }) => (
-          //         <DropDownButton.MenuItem
-          //           onClick={open}
-          //           icon={<HttpsOutlined />}
-          //           label="Change Password"
-          //         />
-          //       )}
-          //       content={({ close }) => <ChangePassword close={close} />}
-          //     />
-          //   ),
-          // },
+          {
+            label: 'My Tickets',
+            actionType: 'dialog',
+            content: ({ close }) => <MyTickets close={close} />,
+            contentTitle: 'My Tickets',
+            icon: <ConfirmationNumberOutlined />,
+            dialogProps: {
+              maxWidth: 'xl',
+            },
+          },
+          {
+            label: 'Change Password',
+            actionType: 'dialog',
+            icon: <HttpsOutlined />,
+            content: ({ close }) => <ChangePassword close={close} />,
+            contentTitle: 'Change Password',
+          },
           {
             label: 'Logout',
             icon: <ExitToAppOutlined />,

package/src/components/ModalButtons/DialogButton.tsx

@@ -42,7 +42,7 @@ export const Transition = forwardRef(function Transition(
 interface DrawerButtonProps {
   anchor: (props: { open: () => void }) => ReactNode
   content: (props: { close: () => void }) => ReactNode
-  title: string | ReactNode
+  title: string
   dialogProps?: Omit<DialogProps, 'open'>
   onDialogClose?: () => void
 }
@@ -83,10 +83,10 @@ export default function DialogButton({
 
 interface CustomDialogProps {
   content: (props: { close: () => void }) => ReactNode
-  title: string | ReactNode
-  dialogProps?: Omit<DialogProps, 'open'>
+  title: string
   onClose: () => void
   open: boolean
+  dialogProps?: Omit<DialogProps, 'open'>
 }
 
 export const CustomDialog = ({