Modal Dialog

General

Modal Dialog
Allows user to interact with it before they can go back to using the parent application.

Show Code

import React from "react";
import ModalDialog from "pocko-ui/ModalDialog";
 
const maskRef = useRef<any>(null)
 
return (
  <>
    <ModalDialog
      ref={maskRef}
      onSubmit={() => {
        console.log("点击确定");
      }}
      onClose={() => {
        console.log("点击取消");
      }}
      heading="modal dialog"
      triggerContent={
        <button className="btn btn-sm btn-primary mt-4">Open Modal</button>
      }
    >
      <div>This is ModalDialog Content</div>
    </ModalDialog>
  </>
);

Custom Height

You can set the height of the Modal-Dialog, with the default unit being vh

Show Code

import React from "react";
import ModalDialog from "pocko-ui/ModalDialog";
 
const maskRef = useRef<any>(null)
 
return (
  <>
    <ModalDialog
      ref={maskRef}
      onSubmit={() => {
        console.log("点击确定");
      }}
      onClose={() => {
        console.log("点击取消");
      }}
      heading="modal dialog"
      modalBodyHeight="70"
      triggerContent={
        <button className="btn btn-sm btn-primary">Open Modal</button>
      }
    >
      <div>This ModalDialog's height is 70vh</div>
    </ModalDialog>
  </>
);

Modal Dialog Width

You can set the width of the Modal-Dialog, Use these 4 parameters: 'common' , 'lg' , 'xl', 'full'

Show Code

import React from "react";
import ModalDialog from "pocko-ui/ModalDialog";
 
const mask1Ref = useRef<any>(null);
const mask2Ref = useRef<any>(null);
const mask3Ref = useRef<any>(null);
const mask4Ref = useRef<any>(null);
const [modalSize, setModalSize] = useState<any>("common");
 
return (
  <>
    <div className="d-flex align-items-center gap-2">
      <ModalDialog
        ref={mask1Ref}
        onOpen={() => {
          setModalSize("common");
        }}
        onSubmit={() => {
          console.log("点击确定");
        }}
        onClose={() => {
          console.log("点击取消");
        }}
        modalSize={modalSize}
        heading="modal dialog"
        triggerContent={
          <button className="btn btn-sm btn-primary mt-4">
            Open Common Modal
          </button>
        }
      >
        <div>Width: {modalSize}</div>
      </ModalDialog>
 
      <ModalDialog
        ref={mask2Ref}
        onOpen={() => {
          setModalSize("lg");
        }}
        onSubmit={() => {
          console.log("点击确定");
        }}
        onClose={() => {
          console.log("点击取消");
        }}
        modalSize={modalSize}
        heading="modal dialog"
        triggerContent={
          <button className="btn btn-sm btn-primary mt-4">
            Open lg Modal
          </button>
        }
      >
        <div>Width: {modalSize}</div>
      </ModalDialog>
 
      <ModalDialog
        ref={mask3Ref}
        onOpen={() => {
          setModalSize("xl");
        }}
        onSubmit={() => {
          console.log("点击确定");
        }}
        onClose={() => {
          console.log("点击取消");
        }}
        modalSize={modalSize}
        heading="modal dialog"
        triggerContent={
          <button className="btn btn-sm btn-primary mt-4">
            Open xl Modal
          </button>
        }
      >
        <div>Width: {modalSize}</div>
      </ModalDialog>
 
      <ModalDialog
        ref={mask4Ref}
        onOpen={() => {
          setModalSize("full");
        }}
        onSubmit={() => {
          console.log("点击确定");
        }}
        onClose={() => {
          console.log("点击取消");
        }}
        modalSize={modalSize}
        heading="modal dialog"
        triggerContent={
          <button className="btn btn-sm btn-primary mt-4">
            Open full Modal
          </button>
        }
      >
        <div>Width: {modalSize}</div>
      </ModalDialog>
    </div>
  </>
);

Custom Header or Custom Footer

You can set your favorite header or favorite footer

Show Code

import React from "react";
import ModalDialog from "pocko-ui/ModalDialog";
 
const maskRef = useRef<any>(null);
 
return (
  <>
    <ModalDialog
      modalRef={maskRef}
      heading="modal dialog"
      triggerContent={
        <button className="btn btn-sm btn-primary mt-4">
          Open Custom Header/Footer Modal
        </button>
      }
      header={
        <div className="modal-header">
          <button type="button" className="btn btn-primary text-dark">
            自定义头部
          </button>
        </div>
      }
      footer={
        <div className="modal-footer">
          <button
            type="button"
            className="btn btn-warning"
            onClick={() => {
              maskRef.current.close();
            }}
          >
            自定义按钮1
          </button>
 
          <button
            type="button"
            className="btn btn-danger"
            style={{ color: "black" }}
            onClick={() => {
              maskRef.current.close();
            }}
          >
            自定义按钮2
          </button>
        </div>
      }
    >
      <div>Demo: Custom header/Footer</div>
    </ModalDialog>
  </>
);

Drag or Drop

You can drag the modal dialog to any position you want

Show Code

import React from "react";
import ModalDialog from "pocko-ui/ModalDialog";
 
const maskRef = useRef<any>(null);
 
return (
  <>
    <ModalDialog
      modalRef={maskRef}
      heading="modal dialog"
      triggerContent={
        <button className="btn btn-sm btn-primary mt-4">
          Open Drag Modal
        </button>
      }
      heading="Drag Modal"
    >
      <div>Demo: Drag Modal</div>
    </ModalDialog>
  </>
);

API

Modal Dialog

import ModalDialog from 'pocko-ui/ModalDialog';

Property	Type	Default	Description	Required
`ref`	`React.ForwardedRef`	-	It exposes the following methods of the component: `1.ref.current.open()` `2.ref.current.close()`	-
`zIndex`	`number`	-	Specifies the `z-index` of the modal for stacking layers.	-
`heading`	`string`	-	The title of the modal.	-
`modalSize`	`"full" \| "xl" \| "lg" \| "common"`	'common'	Specifies the size of the modal. Acceptable values: 'full', 'xl', 'lg', 'common'.	-
`modalContentClassName`	`string`	-	Custom class name for the modal content wrapper.	-
`modalHeaderClassName`	`string`	-	Custom class name for the modal header.	-
`modalBodyClassName`	`string`	-	Custom class name for the modal body.	-
`modalFooterClassName`	`string`	-	Custom class name for the modal footer.	-
`children`	`ReactNode`	-	The content to be displayed inside the modal body.	-
`header`	`ReactNode`	-	Custom header content for the modal.	-
`footer`	`ReactNode`	-	Custom footer content for the modal.	-
`onOpen`	`Function`	-	A function that is triggered when the modal is opened.	-
`onSubmit`	`Function`	-	A function that is triggered when the submit button is clicked.	-
`modalBodyHeight`	`string`	'auto'	Custom height for the modal body.	-
`operationName`	`string`	'确认'	The text displayed on the button in the modal footer (e.g., 'Confirm').	-
`onClose`	`Function`	-	A function that is triggered when the modal is closed.	-
`triggerContent`	`ReactNode`	-	The content or element that triggers the modal when clicked.	-
`triggerClassName`	`string`	-	The class name for the trigger element, to customize its appearance.	-
`useDraggable`	`boolean`	false	Whether the modal is draggable.	-

Installation