@campxdev/shared 1.4.22 → 1.4.24

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@campxdev/shared",
-  "version": "1.4.22",
+  "version": "1.4.24",
   "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
     })
   }
 
@@ -120,13 +125,12 @@ const DropDownButton = ({
       >
         {menu.map((item, index) => (
           <RenderMenuItem
-            onModalOpen={() => onModalOpen(item)}
-            modalState={modalState}
             key={index}
+            onModalOpen={(props) => onModalOpen(item, props)}
+            modalState={modalState}
             handleClose={handleClose}
-            label={item.label}
             actionType={item?.actionType}
-            onClick={item?.onClick}
+            {...item}
           />
         ))}
       </StyledMenu>
@@ -159,6 +163,7 @@ const RenderContent = ({
         open={modalState.open}
         content={modalState.content}
         title="Dialog Button"
+        dialogProps={modalState?.props}
       />
     )
 
@@ -169,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,14 +95,14 @@ export const RenderMenuItem = ({
       <MenuItemButton
         {...props}
         onClick={() => {
-          onModalOpen()
+          onModalOpen(drawerProps)
           handleClose()
         }}
       />
     ),
     link: (
       <StyledLink to={link?.to ?? ''} target={link?.target ?? '_blank'}>
-        <MenuItemButton onClick={() => {}} {...props} />
+        <MenuItemButton {...props} onClick={() => {}} />
       </StyledLink>
     ),
   }

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 = ({