MuiDialog

Reference

• The MuiDialog component is a customizable dialog box.
• It allows for flexible configuration of headers, footers, and content.

Props

1. dialogTitle

   • Type: ReactNode
   • Description: The title displayed in the dialog header.

2. dialogWidth

   • Type: string
   • Description: Sets the width of the dialog.

3. dialogStyles

   • Type: object
   • Description: Custom styles for the dialog.

4. dialogHeaderButton

   • Type: ReactNode
   • Description: A button or element displayed in the header, typically for actions like closing the dialog.

5. leftFooter

   • Type: ReactNode
   • Description: Content displayed on the left side of the footer.

6. rightFooter

   • Type: ReactNode
   • Description: Content displayed on the right side of the footer.

7. children

   • Type: ReactNode
   • Description: The main content of the dialog.

8. showDialog

   • Type: boolean
   • Default: true
   • Description: Controls the visibility of the dialog.

9. showFooter

   • Type: boolean
   • Default: true
   • Description: Toggles the visibility of the footer.

10. dialogHeaderStyle

    • Type: object
    • Default: {}
    • Description: Custom styles for the dialog header.

11. dialogTitleStyles

    • Type: object
    • Default: {}
    • Description: Custom styles for the dialog title.

12. dialogContainerStyle

    • Type: object
    • Default: {}
    • Description: Custom styles for the dialog container.

Usage Example

function Example(pageContext) {
  const { protrakComponents } = React.useContext(customWidgetContext);
  const { MuiDialog } = protrakComponents;
    return(
        <MuiDialog
            dialogTitle="Dialog Title"
            dialogHeaderButton={<button>Close</button>}
            leftFooter={<span>Left Footer</span>}
            rightFooter={<button>Submit</button>}
            dialogWidth="500px"
        >
            <p>This is the dialog content.</p>
        </MuiDialog>
    );
}

• This renders a dialog with a title, a close button in the header, footer content, and custom width.