UNPKG

@unleashit/modal

Version:

Responsive modal component for React with custom header, footer and more.

31 lines (25 loc) 5.53 kB
'use strict'; var chunkWSDQ22UD_js = require('./chunk-WSDQ22UD.js'); var s = require('react'); var zod = require('zod'); function _interopNamespace(e) { if (e && e.__esModule) return e; var n = Object.create(null); if (e) { Object.keys(e).forEach(function (k) { if (k !== 'default') { var d = Object.getOwnPropertyDescriptor(e, k); Object.defineProperty(n, k, d.get ? d : { enumerable: true, get: function () { return e[k]; } }); } }); } n.default = e; return Object.freeze(n); } var s__namespace = /*#__PURE__*/_interopNamespace(s); function C(e,o){s__namespace.useEffect(()=>{let t=r=>{e&&r.key==="Escape"&&o();};return document.addEventListener("keyup",t,!1),()=>{document.removeEventListener("keyup",t,!1);}},[e,o]);}function k(){let[e,o]=s__namespace.useState("auto");return s__namespace.useLayoutEffect(()=>{let r=Array.from(document.querySelectorAll("body *")).reduce((n,m)=>{let c=parseFloat(window.getComputedStyle(m).zIndex);return c&&!Number.isNaN(m)&&n.push(c),n},[]).sort().pop(),a=typeof r=="number"?r+1:"auto";o(a);},[]),e}var v=(e,o,t)=>{let{current:r}=s__namespace.useRef(document.body.style),a=s__namespace.useRef(""),n=s__namespace.useCallback(()=>{r[e]=a.current,r.length||document.body.removeAttribute("style");},[r,e]);s__namespace.useLayoutEffect(()=>(a.current=r[e]||"",()=>{n();}),[r,e,n]),s__namespace.useLayoutEffect(()=>{t?r[e]=o:n();},[r,t,e,n,o]);};var P="unl";var h={};chunkWSDQ22UD_js.a(h,{camelToKebab:()=>L,clearOnError:()=>Y,convertToSentence:()=>G,genClassNames:()=>J,getDefaultsFromZodObject:()=>x,isCSSModule:()=>q,normalizeComponentProp:()=>X,reactComponentCase:()=>U,removeUndefined:()=>_,stringToKebab:()=>M});var _=e=>e.filter(o=>o!==void 0),U=e=>e.replace(/(?:^\w|[A-Z]|\b\w)/g,o=>o.toUpperCase()).replace(/\s+/g,""),L=e=>e.replace(/([a-z0-9])([A-Z])/g,"$1-$2").replace(/\s/,"-").toLowerCase(),M=e=>{let o=e.match(/[0-9]{1,}(?=\b)|[A-Z]{2,}(?=[A-Z][a-z]+|[0-9]|\b|_)|[A-Z]?[a-z]+|[A-Z]|[0-9]+/g);return !o||o.length===0?e:o.map(t=>t.toLowerCase()).join("-")},G=e=>e.charAt(0).toUpperCase()+e.slice(1).split(/(?=[A-Z])/).join(" "),q=(e,o)=>e||o,J=(e,o)=>({clsName:t=>!o||!(t in o)?`${P}-${e}__${L(t)}`:o[t]}),X=(e,o)=>{if(s__namespace.isValidElement(e))return o&&Object.keys(o).length?s__namespace.cloneElement(e,o):e;if(typeof e=="function")return s__namespace.createElement(e,{...o});throw new TypeError("Prop received that is not a valid React component type or node")};function x(e){if(e instanceof zod.z.ZodEffects)return e.innerType()instanceof zod.z.ZodEffects?x(e.innerType()):x(zod.z.ZodObject.create(e.innerType().shape));function o(t){if(t instanceof zod.z.ZodDefault)return t._def.defaultValue();if(t instanceof zod.z.ZodArray)return [];if(t instanceof zod.z.ZodString)return "";if(t instanceof zod.z.ZodObject)return x(t);if("innerType"in t._def)return o(t._def.innerType)}return Object.fromEntries(Object.entries(e.shape).map(([t,r])=>[t,o(r)]))}function Y(e){return e.filter(o=>o.clearOnServerError).map(o=>o.name)}var B=({cssVars:e,varNames:o})=>{if(!e)return {};let t={};return o.forEach(r=>{if(r in e){let a=`--unl-${M(r)}`;t[a]=e[r];}}),t};var {genClassNames:te}=h,re=["px","%","em","rem","vw","vh","vmin","vmax"],ne=["modalPadding","lightModeOverlayColor","darkModeOverlayColor","lightModeTextColor","darkModeTextColor","lightModeBackgroundColor","darkModeBackgroundColor","lightModeHeaderColor","darkModeHeaderColor","lightModeHeaderShadow","darkModeHeaderShadow","lightModeBorderColor","darkModeBorderColor","smallWidth","mediumWidth","largeWidth","fullWidth","modalYPosition","breakXs","breakSm","breakMd","breakLg"],T=({isOpen:e=!1,size:o="medium",onClose:t=()=>{},closeBtn:r=!0,closeOnOverlayClick:a=!0,animationSupport:n=!0,animationCloseTimeout:m=300,header:c,footer:p,overlayColor:i,darkMode:F=!1,cssVars:D,cssModule:E={},children:V})=>{let[$,b]=s.useState(!e),[O,R]=s.useState(e),S=s.useRef();s.useLayoutEffect(()=>(e?(b(!1),n&&(S.current=window.setTimeout(()=>{R(!0);},0))):n?(R(!1),S.current=window.setTimeout(()=>{b(!0);},m)):b(!0),()=>window.clearTimeout(S.current)),[m,n,e]),v("overflow","hidden",e);let j=k();C(e,t);let{clsName:d}=s__namespace.default.useMemo(()=>te(T.displayName,E),[E]),z=s.useCallback(g=>{if(!a)return;g.stopPropagation(),g.target.getAttribute("data-modal")&&t();},[a,t]),Z=s.useMemo(()=>re.some(g=>o.endsWith(g))?{maxWidth:o}:void 0,[o]),K=s.useMemo(()=>typeof i=="object"&&"light"in i?{"--unl-light-mode-overlay-color":i.light,"--unl-dark-mode-overlay-color":i.dark}:typeof i=="string"?{"--unl-light-mode-overlay-color":i,"--unl-dark-mode-overlay-color":i}:!1,[i]);return $?null:s__namespace.default.createElement("div",{onClick:z,"data-modal":"true","data-theme":F?"dark":"light",className:d("overlay"),style:{...i&&K,zIndex:j,...B({cssVars:D,varNames:ne})}},s__namespace.default.createElement("div",{className:`${d("child")}${Z?"":` ${d(`child--${o}`)}`} ${n&&O?`${d("child--in")}`:""}`,style:Z},r&&s__namespace.default.createElement("div",{className:d("close")},s__namespace.default.createElement("button",{onClick:t,type:"button",className:d("closeBtn")},chunkWSDQ22UD_js.b)),c&&s__namespace.default.createElement("header",{className:d("header")},typeof c=="string"?c:s__namespace.default.createElement(c,null)),s__namespace.default.createElement("div",{className:d("body")},V),p&&s__namespace.default.createElement("footer",{className:d("footer")},typeof p=="string"?p:s__namespace.default.createElement(p,null))))};T.displayName="modal";var ve=T; exports.a = T; exports.b = ve;