hst-custom-modal-component/dist/index.mjs.map

A customizable modal component for React apps

{"version":3,"sources":["../src/CustomModal.tsx"],"sourcesContent":["import React, { useEffect, useRef } from 'react';\r\n\r\nexport interface CustomModalProps {\r\n  isOpen: boolean;\r\n  onClose: () => void;\r\n  title?: React.ReactNode;\r\n  children: React.ReactNode;\r\n  footer?: React.ReactNode;\r\n  className?: string;\r\n  backdropClassName?: string;\r\n  style?: React.CSSProperties;\r\n  closeOnOutsideClick?: boolean;\r\n  closeOnEscape?: boolean;\r\n}\r\n\r\nexport const CustomModal: React.FC<CustomModalProps> = ({\r\n  isOpen,\r\n  onClose,\r\n  title,\r\n  children,\r\n  footer,\r\n  className = '',\r\n  backdropClassName = '',\r\n  style = {},\r\n  closeOnOutsideClick = true,\r\n  closeOnEscape = true,\r\n}) => {\r\n  const modalRef = useRef<HTMLDivElement>(null);\r\n\r\n  useEffect(() => {\r\n    const handleEsc = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape' && closeOnEscape) {\r\n        onClose();\r\n      }\r\n    };\r\n    if (isOpen) {\r\n      document.addEventListener('keydown', handleEsc);\r\n    }\r\n    return () => {\r\n      document.removeEventListener('keydown', handleEsc);\r\n    };\r\n  }, [isOpen, closeOnEscape, onClose]);\r\n\r\n  const handleBackdropClick = (e: React.MouseEvent) => {\r\n    if (\r\n      closeOnOutsideClick &&\r\n      modalRef.current &&\r\n      !modalRef.current.contains(e.target as Node)\r\n    ) {\r\n      onClose();\r\n    }\r\n  };\r\n\r\n  if (!isOpen) return null;\r\n\r\n  return (\r\n    <div\r\n      className={`custom-modal-backdrop ${backdropClassName}`}\r\n      onClick={handleBackdropClick}\r\n      style={{\r\n        position: 'fixed',\r\n        inset: 0,\r\n        backgroundColor: 'rgba(0, 0, 0, 0.6)',\r\n        display: 'flex',\r\n        alignItems: 'center',\r\n        justifyContent: 'center',\r\n        zIndex: 9999,\r\n        padding: '1rem',\r\n        boxSizing: 'border-box',\r\n      }}\r\n    >\r\n      <div\r\n        ref={modalRef}\r\n        className={`custom-modal-content ${className}`}\r\n        style={{\r\n          background: '#ffffff',\r\n          padding: '2rem',\r\n          borderRadius: '12px',\r\n          width: '100%',\r\n          maxWidth: '600px',\r\n          maxHeight: '90vh',\r\n          overflowY: 'auto',\r\n          boxShadow: '0 8px 20px rgba(0,0,0,0.15)',\r\n          ...style,\r\n        }}\r\n        onClick={(e) => e.stopPropagation()}\r\n      >\r\n        {title && (\r\n          <h2\r\n            className=\"custom-modal-title\"\r\n            style={{\r\n              fontSize: '1.5rem',\r\n              fontWeight: 600,\r\n              marginBottom: '1.5rem',\r\n            }}\r\n          >\r\n            {title}\r\n          </h2>\r\n        )}\r\n        <div className=\"custom-modal-body\" style={{ marginBottom: footer ? '2rem' : '0' }}>\r\n          {children}\r\n        </div>\r\n        {footer && (\r\n          <div\r\n            className=\"custom-modal-footer\"\r\n            style={{\r\n              display: 'flex',\r\n              justifyContent: 'flex-end',\r\n              gap: '1rem',\r\n            }}\r\n          >\r\n            {footer}\r\n          </div>\r\n        )}\r\n      </div>\r\n    </div>\r\n  );\r\n};\r\n"],"mappings":"yVAAA,OAAgB,aAAAA,EAAW,UAAAC,MAAc,QAuEnC,OAiBI,OAAAC,EAjBJ,QAAAC,MAAA,oBAxDC,IAAMC,EAA0C,CAAC,CACtD,OAAAC,EACA,QAAAC,EACA,MAAAC,EACA,SAAAC,EACA,OAAAC,EACA,UAAAC,EAAY,GACZ,kBAAAC,EAAoB,GACpB,MAAAC,EAAQ,CAAC,EACT,oBAAAC,EAAsB,GACtB,cAAAC,EAAgB,EAClB,IAAM,CACJ,IAAMC,EAAWC,EAAuB,IAAI,EAE5CC,EAAU,IAAM,CACd,IAAMC,EAAaC,GAAqB,CAClCA,EAAE,MAAQ,UAAYL,GACxBR,EAAQ,CAEZ,EACA,OAAID,GACF,SAAS,iBAAiB,UAAWa,CAAS,EAEzC,IAAM,CACX,SAAS,oBAAoB,UAAWA,CAAS,CACnD,CACF,EAAG,CAACb,EAAQS,EAAeR,CAAO,CAAC,EAEnC,IAAMc,EAAuBD,GAAwB,CAEjDN,GACAE,EAAS,SACT,CAACA,EAAS,QAAQ,SAASI,EAAE,MAAc,GAE3Cb,EAAQ,CAEZ,EAEA,OAAKD,EAGHH,EAAC,OACC,UAAW,yBAAyBS,CAAiB,GACrD,QAASS,EACT,MAAO,CACL,SAAU,QACV,MAAO,EACP,gBAAiB,qBACjB,QAAS,OACT,WAAY,SACZ,eAAgB,SAChB,OAAQ,KACR,QAAS,OACT,UAAW,YACb,EAEA,SAAAjB,EAAC,OACC,IAAKY,EACL,UAAW,wBAAwBL,CAAS,GAC5C,MAAOW,EAAA,CACL,WAAY,UACZ,QAAS,OACT,aAAc,OACd,MAAO,OACP,SAAU,QACV,UAAW,OACX,UAAW,OACX,UAAW,+BACRT,GAEL,QAAUO,GAAMA,EAAE,gBAAgB,EAEjC,UAAAZ,GACCL,EAAC,MACC,UAAU,qBACV,MAAO,CACL,SAAU,SACV,WAAY,IACZ,aAAc,QAChB,EAEC,SAAAK,EACH,EAEFL,EAAC,OAAI,UAAU,oBAAoB,MAAO,CAAE,aAAcO,EAAS,OAAS,GAAI,EAC7E,SAAAD,EACH,EACCC,GACCP,EAAC,OACC,UAAU,sBACV,MAAO,CACL,QAAS,OACT,eAAgB,WAChB,IAAK,MACP,EAEC,SAAAO,EACH,GAEJ,EACF,EA9DkB,IAgEtB","names":["useEffect","useRef","jsx","jsxs","CustomModal","isOpen","onClose","title","children","footer","className","backdropClassName","style","closeOnOutsideClick","closeOnEscape","modalRef","useRef","useEffect","handleEsc","e","handleBackdropClick","__spreadValues"]}