@laerdal/life-react-components 4.0.4-dev.1 → 4.0.4-dev.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -40,7 +40,6 @@ var Counter = {
|
|
|
40
40
|
openInstances: 0
|
|
41
41
|
};
|
|
42
42
|
var ModalContainer = function ModalContainer(props) {
|
|
43
|
-
var _document;
|
|
44
43
|
var _React$useState = React.useState(),
|
|
45
44
|
_React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
|
|
46
45
|
scroll = _React$useState2[0],
|
|
@@ -140,7 +139,6 @@ var ModalContainer = function ModalContainer(props) {
|
|
|
140
139
|
return closeModal();
|
|
141
140
|
},
|
|
142
141
|
style: styles,
|
|
143
|
-
appElement: ((_document = document) === null || _document === void 0 ? void 0 : _document.getElementById('root')) || undefined,
|
|
144
142
|
children: children
|
|
145
143
|
});
|
|
146
144
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContainer.cjs","names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","Counter","openInstances","ModalContainer","props","React","useState","scroll","setScroll","preventScroll","offset","document","body","style","position","resetScroll","window","scrollTo","useEffect","scrollY","showModal","ReactModal","defaultStyles","overlay","backgroundColor","querySelector","head","getElementsByTagName","createElement","setAttribute","appendChild","createTextNode","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","setAppElement","getElementById","undefined"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport styled, {keyframes} from 'styled-components';\r\n\r\nconst ModalContainerStyles = {\r\n content: {\r\n top: 'auto',\r\n left: 'auto',\r\n right: 'auto',\r\n bottom: 'auto',\r\n marginRight: '-50%',\r\n width: '640px',\r\n height: '320px',\r\n borderRadius: '8px',\r\n boxSizing: 'border-box' as any,\r\n margin: 0,\r\n overflow: 'auto',\r\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n\r\n@keyframes modalOpenAnimation {\r\n from{\r\n transform: scale(1.1, 1.1);\r\n }\r\n to {\r\n transform: scale(1, 1);\r\n }\r\n}\r\n\r\n.ReactModal__Overlay {\r\n opacity: 0;\r\n z-index: ${Z_INDEXES.backdrop};\r\n display:flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n opacity: 1;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n z-index: ${Z_INDEXES.modal};\r\n opacity:0;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n opacity: 1;\r\n animation: modalOpenAnimation 150ms ease-in-out;\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n opacity: 0;\r\n transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n opacity: 0;\r\n transform: scale(1.1, 1.1);\r\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n id?: string;\r\n showModal: boolean;\r\n closeModal: () => void;\r\n children: any;\r\n height?: any;\r\n width?: any;\r\n overflow?: string;\r\n padding?: string;\r\n minWidth?: string;\r\n maxWidth?: string;\r\n zIndex?: number;\r\n};\r\n\r\nconst Counter = { openInstances : 0};\r\nconst ModalContainer: React.FC<ModalContainerProps> = (props: ModalContainerProps) => {\r\n\r\n const [scroll, setScroll] = React.useState<number>();\r\n\r\n \r\n const preventScroll = (offset: number) => {\r\n if (!Counter.openInstances && document) {\r\n setScroll(offset);\r\n document.body.style.position = 'fixed';\r\n document.body.style.left = `0px`;\r\n document.body.style.right = `0px`;\r\n document.body.style.top = `-${offset}px`;\r\n }\r\n Counter.openInstances++;\r\n }\r\n\r\n const resetScroll = () => {\r\n Counter.openInstances--;\r\n if (!Counter.openInstances && document) {\r\n //@ts-ignore\r\n document.body.style.position = null;\r\n //@ts-ignore\r\n document.body.style.left = null;\r\n //@ts-ignore\r\n document.body.style.top = null;\r\n //@ts-ignore\r\n document.body.style.right = null;\r\n scroll && window.scrollTo(0, scroll);\r\n setScroll(0);\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n window && setScroll(window.scrollY);\r\n });\r\n\r\n React.useEffect(() => {\r\n //modal was opened\r\n window && props.showModal && resetScroll();\r\n //modal was closed\r\n window && !props.showModal && preventScroll(window.scrollY);\r\n }, [props.showModal]);\r\n\r\n\r\n React.useEffect(() => {\r\n if (ReactModal.defaultStyles.overlay) {\r\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n }\r\n\r\n //append style node to override modal transition classes\r\n if (document && !document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n const head = document.head || document.getElementsByTagName('head')[0];\r\n const style = document.createElement('style');\r\n style.setAttribute('modal-custom-styling', 'active');\r\n head.appendChild(style);\r\n style.appendChild(document.createTextNode(modalTransitions));\r\n }\r\n\r\n if (props.showModal) {\r\n preventScroll(window.scrollY);\r\n }\r\n\r\n return () => resetScroll();\r\n }, []);\r\n\r\n const {\r\n id,\r\n showModal,\r\n closeModal,\r\n children,\r\n height = 'auto',\r\n width = 'auto',\r\n overflow = 'visible',\r\n padding,\r\n minWidth = '',\r\n maxWidth = '',\r\n zIndex = parseInt(Z_INDEXES.modal)\r\n } = props;\r\n\r\n // should be at least z-index of modal and below z-index of toast\r\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n height,\r\n width,\r\n padding,\r\n overflow,\r\n minWidth,\r\n maxWidth,\r\n zIndex: zIndexValue\r\n });\r\n const styles = {content: stylesConfiguration};\r\n ReactModal.setAppElement('body');\r\n return (\r\n <ReactModal id={id}\r\n isOpen={showModal}\r\n closeTimeoutMS={120}\r\n onRequestClose={() => closeModal()}\r\n style={styles}\r\n appElement={document?.getElementById('root') || undefined}>\r\n {children}\r\n </ReactModal>\r\n );\r\n}\r\n\r\nexport default ModalContainer;\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ModalContainer.cjs","names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","Counter","openInstances","ModalContainer","props","React","useState","scroll","setScroll","preventScroll","offset","document","body","style","position","resetScroll","window","scrollTo","useEffect","scrollY","showModal","ReactModal","defaultStyles","overlay","backgroundColor","querySelector","head","getElementsByTagName","createElement","setAttribute","appendChild","createTextNode","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","setAppElement"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport styled, {keyframes} from 'styled-components';\r\n\r\nconst ModalContainerStyles = {\r\n content: {\r\n top: 'auto',\r\n left: 'auto',\r\n right: 'auto',\r\n bottom: 'auto',\r\n marginRight: '-50%',\r\n width: '640px',\r\n height: '320px',\r\n borderRadius: '8px',\r\n boxSizing: 'border-box' as any,\r\n margin: 0,\r\n overflow: 'auto',\r\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n\r\n@keyframes modalOpenAnimation {\r\n from{\r\n transform: scale(1.1, 1.1);\r\n }\r\n to {\r\n transform: scale(1, 1);\r\n }\r\n}\r\n\r\n.ReactModal__Overlay {\r\n opacity: 0;\r\n z-index: ${Z_INDEXES.backdrop};\r\n display:flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n opacity: 1;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n z-index: ${Z_INDEXES.modal};\r\n opacity:0;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n opacity: 1;\r\n animation: modalOpenAnimation 150ms ease-in-out;\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n opacity: 0;\r\n transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n opacity: 0;\r\n transform: scale(1.1, 1.1);\r\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n id?: string;\r\n showModal: boolean;\r\n closeModal: () => void;\r\n children: any;\r\n height?: any;\r\n width?: any;\r\n overflow?: string;\r\n padding?: string;\r\n minWidth?: string;\r\n maxWidth?: string;\r\n zIndex?: number;\r\n};\r\n\r\nconst Counter = { openInstances : 0};\r\nconst ModalContainer: React.FC<ModalContainerProps> = (props: ModalContainerProps) => {\r\n\r\n const [scroll, setScroll] = React.useState<number>();\r\n\r\n \r\n const preventScroll = (offset: number) => {\r\n if (!Counter.openInstances && document) {\r\n setScroll(offset);\r\n document.body.style.position = 'fixed';\r\n document.body.style.left = `0px`;\r\n document.body.style.right = `0px`;\r\n document.body.style.top = `-${offset}px`;\r\n }\r\n Counter.openInstances++;\r\n }\r\n\r\n const resetScroll = () => {\r\n Counter.openInstances--;\r\n if (!Counter.openInstances && document) {\r\n //@ts-ignore\r\n document.body.style.position = null;\r\n //@ts-ignore\r\n document.body.style.left = null;\r\n //@ts-ignore\r\n document.body.style.top = null;\r\n //@ts-ignore\r\n document.body.style.right = null;\r\n scroll && window.scrollTo(0, scroll);\r\n setScroll(0);\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n window && setScroll(window.scrollY);\r\n });\r\n\r\n React.useEffect(() => {\r\n //modal was opened\r\n window && props.showModal && resetScroll();\r\n //modal was closed\r\n window && !props.showModal && preventScroll(window.scrollY);\r\n }, [props.showModal]);\r\n\r\n\r\n React.useEffect(() => {\r\n if (ReactModal.defaultStyles.overlay) {\r\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n }\r\n\r\n //append style node to override modal transition classes\r\n if (document && !document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n const head = document.head || document.getElementsByTagName('head')[0];\r\n const style = document.createElement('style');\r\n style.setAttribute('modal-custom-styling', 'active');\r\n head.appendChild(style);\r\n style.appendChild(document.createTextNode(modalTransitions));\r\n }\r\n\r\n if (props.showModal) {\r\n preventScroll(window.scrollY);\r\n }\r\n\r\n return () => resetScroll();\r\n }, []);\r\n\r\n const {\r\n id,\r\n showModal,\r\n closeModal,\r\n children,\r\n height = 'auto',\r\n width = 'auto',\r\n overflow = 'visible',\r\n padding,\r\n minWidth = '',\r\n maxWidth = '',\r\n zIndex = parseInt(Z_INDEXES.modal)\r\n } = props;\r\n\r\n // should be at least z-index of modal and below z-index of toast\r\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n height,\r\n width,\r\n padding,\r\n overflow,\r\n minWidth,\r\n maxWidth,\r\n zIndex: zIndexValue\r\n });\r\n const styles = {content: stylesConfiguration};\r\n ReactModal.setAppElement('body');\r\n return (\r\n <ReactModal id={id}\r\n isOpen={showModal}\r\n closeTimeoutMS={120}\r\n onRequestClose={() => closeModal()}\r\n style={styles}>\r\n {children}\r\n </ReactModal>\r\n );\r\n}\r\n\r\nexport default ModalContainer;\r\n"],"mappings":"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"}
|
|
@@ -31,7 +31,6 @@ var Counter = {
|
|
|
31
31
|
openInstances: 0
|
|
32
32
|
};
|
|
33
33
|
var ModalContainer = function ModalContainer(props) {
|
|
34
|
-
var _document;
|
|
35
34
|
var _React$useState = React.useState(),
|
|
36
35
|
_React$useState2 = _slicedToArray(_React$useState, 2),
|
|
37
36
|
scroll = _React$useState2[0],
|
|
@@ -131,7 +130,6 @@ var ModalContainer = function ModalContainer(props) {
|
|
|
131
130
|
return closeModal();
|
|
132
131
|
},
|
|
133
132
|
style: styles,
|
|
134
|
-
appElement: ((_document = document) === null || _document === void 0 ? void 0 : _document.getElementById('root')) || undefined,
|
|
135
133
|
children: children
|
|
136
134
|
});
|
|
137
135
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ModalContainer.js","names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","Counter","openInstances","ModalContainer","props","useState","scroll","setScroll","preventScroll","offset","document","body","style","position","resetScroll","window","scrollTo","useEffect","scrollY","showModal","defaultStyles","overlay","backgroundColor","querySelector","head","getElementsByTagName","createElement","setAttribute","appendChild","createTextNode","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","setAppElement","getElementById","undefined"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport styled, {keyframes} from 'styled-components';\r\n\r\nconst ModalContainerStyles = {\r\n content: {\r\n top: 'auto',\r\n left: 'auto',\r\n right: 'auto',\r\n bottom: 'auto',\r\n marginRight: '-50%',\r\n width: '640px',\r\n height: '320px',\r\n borderRadius: '8px',\r\n boxSizing: 'border-box' as any,\r\n margin: 0,\r\n overflow: 'auto',\r\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n\r\n@keyframes modalOpenAnimation {\r\n from{\r\n transform: scale(1.1, 1.1);\r\n }\r\n to {\r\n transform: scale(1, 1);\r\n }\r\n}\r\n\r\n.ReactModal__Overlay {\r\n opacity: 0;\r\n z-index: ${Z_INDEXES.backdrop};\r\n display:flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n opacity: 1;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n z-index: ${Z_INDEXES.modal};\r\n opacity:0;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n opacity: 1;\r\n animation: modalOpenAnimation 150ms ease-in-out;\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n opacity: 0;\r\n transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n opacity: 0;\r\n transform: scale(1.1, 1.1);\r\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n id?: string;\r\n showModal: boolean;\r\n closeModal: () => void;\r\n children: any;\r\n height?: any;\r\n width?: any;\r\n overflow?: string;\r\n padding?: string;\r\n minWidth?: string;\r\n maxWidth?: string;\r\n zIndex?: number;\r\n};\r\n\r\nconst Counter = { openInstances : 0};\r\nconst ModalContainer: React.FC<ModalContainerProps> = (props: ModalContainerProps) => {\r\n\r\n const [scroll, setScroll] = React.useState<number>();\r\n\r\n \r\n const preventScroll = (offset: number) => {\r\n if (!Counter.openInstances && document) {\r\n setScroll(offset);\r\n document.body.style.position = 'fixed';\r\n document.body.style.left = `0px`;\r\n document.body.style.right = `0px`;\r\n document.body.style.top = `-${offset}px`;\r\n }\r\n Counter.openInstances++;\r\n }\r\n\r\n const resetScroll = () => {\r\n Counter.openInstances--;\r\n if (!Counter.openInstances && document) {\r\n //@ts-ignore\r\n document.body.style.position = null;\r\n //@ts-ignore\r\n document.body.style.left = null;\r\n //@ts-ignore\r\n document.body.style.top = null;\r\n //@ts-ignore\r\n document.body.style.right = null;\r\n scroll && window.scrollTo(0, scroll);\r\n setScroll(0);\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n window && setScroll(window.scrollY);\r\n });\r\n\r\n React.useEffect(() => {\r\n //modal was opened\r\n window && props.showModal && resetScroll();\r\n //modal was closed\r\n window && !props.showModal && preventScroll(window.scrollY);\r\n }, [props.showModal]);\r\n\r\n\r\n React.useEffect(() => {\r\n if (ReactModal.defaultStyles.overlay) {\r\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n }\r\n\r\n //append style node to override modal transition classes\r\n if (document && !document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n const head = document.head || document.getElementsByTagName('head')[0];\r\n const style = document.createElement('style');\r\n style.setAttribute('modal-custom-styling', 'active');\r\n head.appendChild(style);\r\n style.appendChild(document.createTextNode(modalTransitions));\r\n }\r\n\r\n if (props.showModal) {\r\n preventScroll(window.scrollY);\r\n }\r\n\r\n return () => resetScroll();\r\n }, []);\r\n\r\n const {\r\n id,\r\n showModal,\r\n closeModal,\r\n children,\r\n height = 'auto',\r\n width = 'auto',\r\n overflow = 'visible',\r\n padding,\r\n minWidth = '',\r\n maxWidth = '',\r\n zIndex = parseInt(Z_INDEXES.modal)\r\n } = props;\r\n\r\n // should be at least z-index of modal and below z-index of toast\r\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n height,\r\n width,\r\n padding,\r\n overflow,\r\n minWidth,\r\n maxWidth,\r\n zIndex: zIndexValue\r\n });\r\n const styles = {content: stylesConfiguration};\r\n ReactModal.setAppElement('body');\r\n return (\r\n <ReactModal id={id}\r\n isOpen={showModal}\r\n closeTimeoutMS={120}\r\n onRequestClose={() => closeModal()}\r\n style={styles}\r\n appElement={document?.getElementById('root') || undefined}>\r\n {children}\r\n </ReactModal>\r\n );\r\n}\r\n\r\nexport default ModalContainer;\r\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ModalContainer.js","names":["React","ReactModal","BOXSHADOWS","Z_INDEXES","ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOW_L3","modalTransitions","backdrop","modal","Counter","openInstances","ModalContainer","props","useState","scroll","setScroll","preventScroll","offset","document","body","style","position","resetScroll","window","scrollTo","useEffect","scrollY","showModal","defaultStyles","overlay","backgroundColor","querySelector","head","getElementsByTagName","createElement","setAttribute","appendChild","createTextNode","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","setAppElement"],"sources":["../../src/Modals/ModalContainer.tsx"],"sourcesContent":["import * as React from 'react';\r\nimport ReactModal from 'react-modal';\r\nimport {BOXSHADOWS} from '../styles';\r\nimport {Z_INDEXES} from '../styles';\r\nimport styled, {keyframes} from 'styled-components';\r\n\r\nconst ModalContainerStyles = {\r\n content: {\r\n top: 'auto',\r\n left: 'auto',\r\n right: 'auto',\r\n bottom: 'auto',\r\n marginRight: '-50%',\r\n width: '640px',\r\n height: '320px',\r\n borderRadius: '8px',\r\n boxSizing: 'border-box' as any,\r\n margin: 0,\r\n overflow: 'auto',\r\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\r\n },\r\n};\r\n\r\n//override modal classes to define the animations\r\nconst modalTransitions = `\r\n\r\n@keyframes modalOpenAnimation {\r\n from{\r\n transform: scale(1.1, 1.1);\r\n }\r\n to {\r\n transform: scale(1, 1);\r\n }\r\n}\r\n\r\n.ReactModal__Overlay {\r\n opacity: 0;\r\n z-index: ${Z_INDEXES.backdrop};\r\n display:flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.ReactModal__Overlay--after-open {\r\n opacity: 1;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content{\r\n z-index: ${Z_INDEXES.modal};\r\n opacity:0;\r\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\r\n}\r\n\r\n.ReactModal__Content--after-open{\r\n opacity: 1;\r\n animation: modalOpenAnimation 150ms ease-in-out;\r\n}\r\n\r\n.ReactModal__Overlay--before-close {\r\n opacity: 0;\r\n transition: opacity 120ms linear;\r\n}\r\n\r\n.ReactModal__Content--before-close{\r\n opacity: 0;\r\n transform: scale(1.1, 1.1);\r\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\r\n}\r\n`;\r\n\r\n\r\ntype ModalContainerProps = {\r\n id?: string;\r\n showModal: boolean;\r\n closeModal: () => void;\r\n children: any;\r\n height?: any;\r\n width?: any;\r\n overflow?: string;\r\n padding?: string;\r\n minWidth?: string;\r\n maxWidth?: string;\r\n zIndex?: number;\r\n};\r\n\r\nconst Counter = { openInstances : 0};\r\nconst ModalContainer: React.FC<ModalContainerProps> = (props: ModalContainerProps) => {\r\n\r\n const [scroll, setScroll] = React.useState<number>();\r\n\r\n \r\n const preventScroll = (offset: number) => {\r\n if (!Counter.openInstances && document) {\r\n setScroll(offset);\r\n document.body.style.position = 'fixed';\r\n document.body.style.left = `0px`;\r\n document.body.style.right = `0px`;\r\n document.body.style.top = `-${offset}px`;\r\n }\r\n Counter.openInstances++;\r\n }\r\n\r\n const resetScroll = () => {\r\n Counter.openInstances--;\r\n if (!Counter.openInstances && document) {\r\n //@ts-ignore\r\n document.body.style.position = null;\r\n //@ts-ignore\r\n document.body.style.left = null;\r\n //@ts-ignore\r\n document.body.style.top = null;\r\n //@ts-ignore\r\n document.body.style.right = null;\r\n scroll && window.scrollTo(0, scroll);\r\n setScroll(0);\r\n }\r\n }\r\n\r\n React.useEffect(() => {\r\n window && setScroll(window.scrollY);\r\n });\r\n\r\n React.useEffect(() => {\r\n //modal was opened\r\n window && props.showModal && resetScroll();\r\n //modal was closed\r\n window && !props.showModal && preventScroll(window.scrollY);\r\n }, [props.showModal]);\r\n\r\n\r\n React.useEffect(() => {\r\n if (ReactModal.defaultStyles.overlay) {\r\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\r\n }\r\n\r\n //append style node to override modal transition classes\r\n if (document && !document.querySelector('[modal-custom-styling=\"active\"]')) {\r\n const head = document.head || document.getElementsByTagName('head')[0];\r\n const style = document.createElement('style');\r\n style.setAttribute('modal-custom-styling', 'active');\r\n head.appendChild(style);\r\n style.appendChild(document.createTextNode(modalTransitions));\r\n }\r\n\r\n if (props.showModal) {\r\n preventScroll(window.scrollY);\r\n }\r\n\r\n return () => resetScroll();\r\n }, []);\r\n\r\n const {\r\n id,\r\n showModal,\r\n closeModal,\r\n children,\r\n height = 'auto',\r\n width = 'auto',\r\n overflow = 'visible',\r\n padding,\r\n minWidth = '',\r\n maxWidth = '',\r\n zIndex = parseInt(Z_INDEXES.modal)\r\n } = props;\r\n\r\n // should be at least z-index of modal and below z-index of toast\r\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\r\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\r\n height,\r\n width,\r\n padding,\r\n overflow,\r\n minWidth,\r\n maxWidth,\r\n zIndex: zIndexValue\r\n });\r\n const styles = {content: stylesConfiguration};\r\n ReactModal.setAppElement('body');\r\n return (\r\n <ReactModal id={id}\r\n isOpen={showModal}\r\n closeTimeoutMS={120}\r\n onRequestClose={() => closeModal()}\r\n style={styles}>\r\n {children}\r\n </ReactModal>\r\n );\r\n}\r\n\r\nexport default ModalContainer;\r\n"],"mappings":"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"}
|