{"version":3,"file":"index-DA23I58a.js","sources":["../../../app/javascript/src/shoppe/elements/Modal/index.tsx"],"sourcesContent":["import * as React from 'react';\nimport cls from 'classnames';\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome';\nimport { faTimes } from '@fortawesome/pro-solid-svg-icons';\n\nimport styles from './index.module.sass';\n\ninterface Props {\n  closeBtn?: boolean;\n  closeClass?: string;\n  containerClass?: string;\n  open: boolean;\n  overlayClass?: string;\n  onClick: () => void;\n}\n\nexport const Modal: React.FC<Props> = ({\n  children,\n  closeBtn,\n  closeClass,\n  containerClass,\n  open,\n  overlayClass,\n  onClick,\n}) => {\n  const [ empty, setEmpty ] = React.useState<boolean>( !open );\n\n  // ref used to access the current open value in async callback\n  const openRef = React.useRef<boolean>( open );\n  openRef.current = open;\n\n  React.useEffect(() => {\n    if ( open ) {\n      setEmpty( false );\n\n      // lock body\n      document.body.style.top = `-${window.scrollY}px`;\n      document.body.style.position = 'fixed';\n    } else {\n      // unlock body\n      const scrollY = document.body.style.top;\n      document.body.style.position = '';\n      document.body.style.top = '';\n      window.scrollTo( 0, parseInt( scrollY || '0', 10 ) * -1 );\n\n      setTimeout(() => {\n        if ( !openRef.current ) {\n          setEmpty( true );\n        }\n      }, 201 ); // empty children after modal closes\n    }\n  }, [ open ]);\n\n  React.useEffect(() => {\n    const handleKeyDown = ( event: React.KeyboardEvent ) => {\n      // close on escape\n      if ( event.keyCode === 27 ) {\n        onClick();\n      }\n    };\n\n    ( document as any ).addEventListener( 'keydown', handleKeyDown );\n    return () => {\n      ( document as any ).removeEventListener( 'keydown', handleKeyDown );\n    };\n  }, [ onClick ]);\n\n  return (\n    <div\n      className={cls( styles.overlay, overlayClass, {\n        [styles.open]: open,\n      })}\n      onClick={onClick}\n      onKeyPress={onClick}\n      role=\"button\"\n      tabIndex={0}\n    >\n      <div\n        className={cls( styles.container, containerClass, {\n          [styles.open]: open,\n        })}\n        onClick={( e ) => e.stopPropagation()}\n        onKeyPress={( e ) => e.stopPropagation()}\n        role=\"button\"\n        tabIndex={0}\n      >\n        {closeBtn && (\n          <button\n            aria-label=\"Close Content\"\n            className={cls( styles.close, closeClass, 'spec__close-modal' )}\n            type=\"button\"\n            onClick={onClick}\n          >\n            <FontAwesomeIcon icon={faTimes} />\n          </button>\n        )}\n        {!empty && children}\n      </div>\n    </div>\n  );\n};\n"],"names":["Modal","children","closeBtn","closeClass","containerClass","open","overlayClass","onClick","empty","setEmpty","React.useState","openRef","React.useRef","React.useEffect","scrollY","handleKeyDown","event","React.createElement","cls","styles","FontAwesomeIcon","faTimes"],"mappings":"sSAgBaA,EAAyB,CAAC,CACrC,SAAAC,EACA,SAAAC,EACA,WAAAC,EACA,eAAAC,EACA,KAAAC,EACA,aAAAC,EACA,QAAAC,CACF,IAAM,CACJ,KAAM,CAAEC,EAAOC,CAAS,EAAIC,EAAM,SAAmB,CAACL,CAAK,EAGrDM,EAAUC,EAAM,OAAiBP,CAAK,EAC5C,OAAAM,EAAQ,QAAUN,EAElBQ,EAAAA,UAAgB,IAAM,CACpB,GAAKR,EACHI,EAAU,EAAM,EAGhB,SAAS,KAAK,MAAM,IAAM,IAAI,OAAO,OAAO,KACnC,SAAA,KAAK,MAAM,SAAW,YAC1B,CAEC,MAAAK,EAAU,SAAS,KAAK,MAAM,IAC3B,SAAA,KAAK,MAAM,SAAW,GACtB,SAAA,KAAK,MAAM,IAAM,GAC1B,OAAO,SAAU,EAAG,SAAUA,GAAW,IAAK,EAAG,EAAI,EAAG,EAExD,WAAW,IAAM,CACTH,EAAQ,SACZF,EAAU,EAAK,GAEhB,GAAI,CAAA,CACT,EACC,CAAEJ,CAAK,CAAC,EAEXQ,EAAAA,UAAgB,IAAM,CACd,MAAAE,EAAkBC,GAAgC,CAEjDA,EAAM,UAAY,IACbT,EAAA,CAEZ,EAEE,gBAAkB,iBAAkB,UAAWQ,CAAc,EACxD,IAAM,CACT,SAAkB,oBAAqB,UAAWA,CAAc,CACpE,CAAA,EACC,CAAER,CAAQ,CAAC,EAGZU,EAAA,cAAC,MAAA,CACC,UAAWC,EAAKC,EAAO,QAASb,EAAc,CAC5C,CAACa,EAAO,IAAI,EAAGd,CAAA,CAChB,EACD,QAAAE,EACA,WAAYA,EACZ,KAAK,SACL,SAAU,CAAA,EAEVU,EAAA,cAAC,MAAA,CACC,UAAWC,EAAKC,EAAO,UAAWf,EAAgB,CAChD,CAACe,EAAO,IAAI,EAAGd,CAAA,CAChB,EACD,QAAW,GAAO,EAAE,gBAAgB,EACpC,WAAc,GAAO,EAAE,gBAAgB,EACvC,KAAK,SACL,SAAU,CAAA,EAETH,GACCe,EAAA,cAAC,SAAA,CACC,aAAW,gBACX,UAAWC,EAAKC,EAAO,MAAOhB,EAAY,mBAAoB,EAC9D,KAAK,SACL,QAAAI,CAAA,EAEAU,EAAAA,cAACG,EAAgB,CAAA,KAAMC,CAAS,CAAA,CAClC,EAED,CAACb,GAASP,CAAA,CAEf,CAEJ"}