@laerdal/life-react-components 1.7.0-dev.3 → 1.7.0-dev.4
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.
|
@@ -190,30 +190,38 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
190
190
|
}, {
|
|
191
191
|
key: "preventScroll",
|
|
192
192
|
value: function preventScroll(offset) {
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
193
|
+
if (!ModalContainer.openInstances) {
|
|
194
|
+
this.setState({
|
|
195
|
+
scroll: offset
|
|
196
|
+
});
|
|
197
|
+
var scrollWidth = window.innerWidth - document.documentElement.offsetWidth;
|
|
198
|
+
document.body.style.position = 'fixed';
|
|
199
|
+
document.body.style.left = "0px";
|
|
200
|
+
document.body.style.top = "-".concat(offset, "px");
|
|
201
|
+
document.body.style.right = "".concat(scrollWidth, "px");
|
|
202
|
+
}
|
|
203
|
+
|
|
204
|
+
ModalContainer.openInstances++;
|
|
201
205
|
}
|
|
202
206
|
}, {
|
|
203
207
|
key: "resetScroll",
|
|
204
208
|
value: function resetScroll() {
|
|
205
|
-
|
|
206
|
-
document.body.style.position = null; //@ts-ignore
|
|
209
|
+
ModalContainer.openInstances--;
|
|
207
210
|
|
|
208
|
-
|
|
211
|
+
if (!ModalContainer.openInstances) {
|
|
212
|
+
//@ts-ignore
|
|
213
|
+
document.body.style.position = null; //@ts-ignore
|
|
209
214
|
|
|
210
|
-
|
|
215
|
+
document.body.style.left = null; //@ts-ignore
|
|
211
216
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
scroll
|
|
216
|
-
|
|
217
|
+
document.body.style.top = null; //@ts-ignore
|
|
218
|
+
|
|
219
|
+
document.body.style.right = null;
|
|
220
|
+
this.state.scroll && window.scrollTo(0, this.state.scroll);
|
|
221
|
+
this.setState({
|
|
222
|
+
scroll: 0
|
|
223
|
+
});
|
|
224
|
+
}
|
|
217
225
|
}
|
|
218
226
|
}]);
|
|
219
227
|
return ModalContainer;
|
|
@@ -232,6 +240,7 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
232
240
|
maxWidth: _propTypes.default.string,
|
|
233
241
|
zIndex: _propTypes.default.number
|
|
234
242
|
});
|
|
243
|
+
(0, _defineProperty2.default)(ModalContainer, "openInstances", 0);
|
|
235
244
|
var _default = ModalContainer;
|
|
236
245
|
exports.default = _default;
|
|
237
246
|
//# sourceMappingURL=ModalContainer.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","prevProps","prevState","scroll","snapshot","resetScroll","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","offset","setState","scrollWidth","innerWidth","documentElement","offsetWidth","body","position","state","scrollTo","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport {BOXSHADOWS} from '../styles';\nimport {Z_INDEXES} from '../styles';\n\nconst ModalContainerStyles = {\n content: {\n top: '50%',\n left: '50%',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n width: '640px',\n height: '320px',\n borderRadius: '8px',\n boxSizing: 'border-box' as any,\n margin: 0,\n overflow: 'auto',\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n z-index: ${Z_INDEXES.modal};\n opacity:0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.0, 1.0);\n transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\n\ntype ModalContainerProps = {\n id?: string;\n showModal: boolean;\n closeModal: () => void;\n children: any;\n modalHeight?: any;\n modalWidth?: any;\n modalOverflow?: string;\n padding?: string;\n minWidth?: string;\n maxWidth?: string;\n zIndex?: number;\n};\n\ntype ModalContainerState = {\n scroll: number;\n};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n componentDidMount() {\n if (ReactModal.defaultStyles.overlay) {\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n }\n\n //append style node to override modal transition classes\n if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n const head = document.head || document.getElementsByTagName('head')[0];\n const style = document.createElement('style');\n style.setAttribute('modal-custom-styling', 'active');\n head.appendChild(style);\n style.appendChild(document.createTextNode(modalTransitions));\n }\n\n if (this.props.showModal) {\n this.preventScroll(window.scrollY);\n }\n }\n\n getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\n return {scroll: window.scrollY};\n }\n\n componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\n if (this.props.showModal && !prevProps.showModal) {\n this.preventScroll(snapshot!.scroll);\n }\n if (!this.props.showModal && prevProps.showModal) {\n this.resetScroll();\n }\n }\n\n componentWillUnmount() {\n if (this.props.showModal) {\n this.resetScroll();\n }\n }\n\n GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({height: modalHeight, width: modalWidth});\n GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n\n render() {\n const {\n id,\n showModal,\n closeModal,\n children,\n modalHeight,\n modalWidth,\n modalOverflow,\n padding,\n minWidth = '',\n maxWidth = '',\n zIndex = parseInt(Z_INDEXES.modal)\n } = this.props;\n const sizes = this.GetSize(modalHeight, modalWidth);\n const {height, width} = sizes;\n const overflow = this.GetOverflow(modalOverflow);\n // should be at least z-index of modal and below z-index of toast\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\n height,\n width,\n padding,\n overflow,\n minWidth,\n maxWidth,\n zIndex: zIndexValue\n });\n const styles = {content: stylesConfiguration};\n\n return (\n <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles}\n appElement={document.getElementById('root') || ''}>\n {children}\n </ReactModal>\n );\n }\n\n private preventScroll(offset: number) {\n this.setState({scroll: offset});\n const scrollWidth = window.innerWidth - document.documentElement.offsetWidth;\n document.body.style.position = 'fixed';\n document.body.style.left = `0px`;\n document.body.style.top = `-${offset}px`;\n document.body.style.right = `${scrollWidth}px`;\n }\n\n private resetScroll() {\n //@ts-ignore\n document.body.style.position = null;\n //@ts-ignore\n document.body.style.left = null;\n //@ts-ignore\n document.body.style.top = null;\n //@ts-ignore\n document.body.style.right = null;\n this.state.scroll && window.scrollTo(0, this.state.scroll);\n this.setState({scroll: 0});\n }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.cjs"}
|
|
1
|
+
{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"names":["ModalContainerStyles","content","top","left","right","bottom","marginRight","width","height","borderRadius","boxSizing","margin","overflow","boxShadow","BOXSHADOWS","BOXSHADOW_L3","modalTransitions","Z_INDEXES","backdrop","modal","ModalContainer","modalHeight","modalWidth","modalOverflow","ReactModal","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","prevProps","prevState","scroll","snapshot","resetScroll","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","offset","openInstances","setState","scrollWidth","innerWidth","documentElement","offsetWidth","body","position","state","scrollTo","React","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport {BOXSHADOWS} from '../styles';\nimport {Z_INDEXES} from '../styles';\n\nconst ModalContainerStyles = {\n content: {\n top: '50%',\n left: '50%',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n width: '640px',\n height: '320px',\n borderRadius: '8px',\n boxSizing: 'border-box' as any,\n margin: 0,\n overflow: 'auto',\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n z-index: ${Z_INDEXES.modal};\n opacity:0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.0, 1.0);\n transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\n\ntype ModalContainerProps = {\n id?: string;\n showModal: boolean;\n closeModal: () => void;\n children: any;\n modalHeight?: any;\n modalWidth?: any;\n modalOverflow?: string;\n padding?: string;\n minWidth?: string;\n maxWidth?: string;\n zIndex?: number;\n};\n\ntype ModalContainerState = {\n scroll: number;\n};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n private static openInstances = 0;\n\n componentDidMount() {\n if (ReactModal.defaultStyles.overlay) {\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n }\n\n //append style node to override modal transition classes\n if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n const head = document.head || document.getElementsByTagName('head')[0];\n const style = document.createElement('style');\n style.setAttribute('modal-custom-styling', 'active');\n head.appendChild(style);\n style.appendChild(document.createTextNode(modalTransitions));\n }\n\n if (this.props.showModal) {\n this.preventScroll(window.scrollY);\n }\n }\n\n getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\n return {scroll: window.scrollY};\n }\n\n componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\n if (this.props.showModal && !prevProps.showModal) {\n this.preventScroll(snapshot!.scroll);\n }\n if (!this.props.showModal && prevProps.showModal) {\n this.resetScroll();\n }\n }\n\n componentWillUnmount() {\n if (this.props.showModal) {\n this.resetScroll();\n }\n }\n\n GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({height: modalHeight, width: modalWidth});\n GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n\n render() {\n const {\n id,\n showModal,\n closeModal,\n children,\n modalHeight,\n modalWidth,\n modalOverflow,\n padding,\n minWidth = '',\n maxWidth = '',\n zIndex = parseInt(Z_INDEXES.modal)\n } = this.props;\n const sizes = this.GetSize(modalHeight, modalWidth);\n const {height, width} = sizes;\n const overflow = this.GetOverflow(modalOverflow);\n // should be at least z-index of modal and below z-index of toast\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\n height,\n width,\n padding,\n overflow,\n minWidth,\n maxWidth,\n zIndex: zIndexValue\n });\n const styles = {content: stylesConfiguration};\n\n return (\n <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles}\n appElement={document.getElementById('root') || ''}>\n {children}\n </ReactModal>\n );\n }\n\n private preventScroll(offset: number) {\n if (!ModalContainer.openInstances) {\n this.setState({scroll: offset});\n const scrollWidth = window.innerWidth - document.documentElement.offsetWidth;\n document.body.style.position = 'fixed';\n document.body.style.left = `0px`;\n document.body.style.top = `-${offset}px`;\n document.body.style.right = `${scrollWidth}px`;\n }\n ModalContainer.openInstances++\n }\n\n private resetScroll() {\n ModalContainer.openInstances--;\n if (!ModalContainer.openInstances) {\n //@ts-ignore\n document.body.style.position = null;\n //@ts-ignore\n document.body.style.left = null;\n //@ts-ignore\n document.body.style.top = null;\n //@ts-ignore\n document.body.style.right = null;\n this.state.scroll && window.scrollTo(0, this.state.scroll);\n this.setState({scroll: 0});\n }\n }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.cjs"}
|
|
@@ -16,6 +16,7 @@ declare type ModalContainerState = {
|
|
|
16
16
|
scroll: number;
|
|
17
17
|
};
|
|
18
18
|
declare class ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {
|
|
19
|
+
private static openInstances;
|
|
19
20
|
componentDidMount(): void;
|
|
20
21
|
getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): {
|
|
21
22
|
scroll: number;
|
|
@@ -168,30 +168,38 @@ var ModalContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
168
168
|
}, {
|
|
169
169
|
key: "preventScroll",
|
|
170
170
|
value: function preventScroll(offset) {
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
171
|
+
if (!ModalContainer.openInstances) {
|
|
172
|
+
this.setState({
|
|
173
|
+
scroll: offset
|
|
174
|
+
});
|
|
175
|
+
var scrollWidth = window.innerWidth - document.documentElement.offsetWidth;
|
|
176
|
+
document.body.style.position = 'fixed';
|
|
177
|
+
document.body.style.left = "0px";
|
|
178
|
+
document.body.style.top = "-".concat(offset, "px");
|
|
179
|
+
document.body.style.right = "".concat(scrollWidth, "px");
|
|
180
|
+
}
|
|
181
|
+
|
|
182
|
+
ModalContainer.openInstances++;
|
|
179
183
|
}
|
|
180
184
|
}, {
|
|
181
185
|
key: "resetScroll",
|
|
182
186
|
value: function resetScroll() {
|
|
183
|
-
|
|
184
|
-
document.body.style.position = null; //@ts-ignore
|
|
187
|
+
ModalContainer.openInstances--;
|
|
185
188
|
|
|
186
|
-
|
|
189
|
+
if (!ModalContainer.openInstances) {
|
|
190
|
+
//@ts-ignore
|
|
191
|
+
document.body.style.position = null; //@ts-ignore
|
|
187
192
|
|
|
188
|
-
|
|
193
|
+
document.body.style.left = null; //@ts-ignore
|
|
189
194
|
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
scroll
|
|
194
|
-
|
|
195
|
+
document.body.style.top = null; //@ts-ignore
|
|
196
|
+
|
|
197
|
+
document.body.style.right = null;
|
|
198
|
+
this.state.scroll && window.scrollTo(0, this.state.scroll);
|
|
199
|
+
this.setState({
|
|
200
|
+
scroll: 0
|
|
201
|
+
});
|
|
202
|
+
}
|
|
195
203
|
}
|
|
196
204
|
}]);
|
|
197
205
|
|
|
@@ -212,5 +220,7 @@ _defineProperty(ModalContainer, "propTypes", {
|
|
|
212
220
|
zIndex: _pt.number
|
|
213
221
|
});
|
|
214
222
|
|
|
223
|
+
_defineProperty(ModalContainer, "openInstances", 0);
|
|
224
|
+
|
|
215
225
|
export default ModalContainer;
|
|
216
226
|
//# sourceMappingURL=ModalContainer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"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","ModalContainer","modalHeight","modalWidth","modalOverflow","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","prevProps","prevState","scroll","snapshot","resetScroll","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","offset","setState","scrollWidth","innerWidth","documentElement","offsetWidth","body","position","state","scrollTo","Component"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport {BOXSHADOWS} from '../styles';\nimport {Z_INDEXES} from '../styles';\n\nconst ModalContainerStyles = {\n content: {\n top: '50%',\n left: '50%',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n width: '640px',\n height: '320px',\n borderRadius: '8px',\n boxSizing: 'border-box' as any,\n margin: 0,\n overflow: 'auto',\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n z-index: ${Z_INDEXES.modal};\n opacity:0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.0, 1.0);\n transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\n\ntype ModalContainerProps = {\n id?: string;\n showModal: boolean;\n closeModal: () => void;\n children: any;\n modalHeight?: any;\n modalWidth?: any;\n modalOverflow?: string;\n padding?: string;\n minWidth?: string;\n maxWidth?: string;\n zIndex?: number;\n};\n\ntype ModalContainerState = {\n scroll: number;\n};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n componentDidMount() {\n if (ReactModal.defaultStyles.overlay) {\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n }\n\n //append style node to override modal transition classes\n if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n const head = document.head || document.getElementsByTagName('head')[0];\n const style = document.createElement('style');\n style.setAttribute('modal-custom-styling', 'active');\n head.appendChild(style);\n style.appendChild(document.createTextNode(modalTransitions));\n }\n\n if (this.props.showModal) {\n this.preventScroll(window.scrollY);\n }\n }\n\n getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\n return {scroll: window.scrollY};\n }\n\n componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\n if (this.props.showModal && !prevProps.showModal) {\n this.preventScroll(snapshot!.scroll);\n }\n if (!this.props.showModal && prevProps.showModal) {\n this.resetScroll();\n }\n }\n\n componentWillUnmount() {\n if (this.props.showModal) {\n this.resetScroll();\n }\n }\n\n GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({height: modalHeight, width: modalWidth});\n GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n\n render() {\n const {\n id,\n showModal,\n closeModal,\n children,\n modalHeight,\n modalWidth,\n modalOverflow,\n padding,\n minWidth = '',\n maxWidth = '',\n zIndex = parseInt(Z_INDEXES.modal)\n } = this.props;\n const sizes = this.GetSize(modalHeight, modalWidth);\n const {height, width} = sizes;\n const overflow = this.GetOverflow(modalOverflow);\n // should be at least z-index of modal and below z-index of toast\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\n height,\n width,\n padding,\n overflow,\n minWidth,\n maxWidth,\n zIndex: zIndexValue\n });\n const styles = {content: stylesConfiguration};\n\n return (\n <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles}\n appElement={document.getElementById('root') || ''}>\n {children}\n </ReactModal>\n );\n }\n\n private preventScroll(offset: number) {\n this.setState({scroll: offset});\n const scrollWidth = window.innerWidth - document.documentElement.offsetWidth;\n document.body.style.position = 'fixed';\n document.body.style.left = `0px`;\n document.body.style.top = `-${offset}px`;\n document.body.style.right = `${scrollWidth}px`;\n }\n\n private resetScroll() {\n //@ts-ignore\n document.body.style.position = null;\n //@ts-ignore\n document.body.style.left = null;\n //@ts-ignore\n document.body.style.top = null;\n //@ts-ignore\n document.body.style.right = null;\n this.state.scroll && window.scrollTo(0, this.state.scroll);\n this.setState({scroll: 0});\n }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}
|
|
1
|
+
{"version":3,"sources":["../../src/Modals/ModalContainer.tsx"],"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","ModalContainer","modalHeight","modalWidth","modalOverflow","defaultStyles","overlay","backgroundColor","document","querySelector","head","getElementsByTagName","style","createElement","setAttribute","appendChild","createTextNode","props","showModal","preventScroll","window","scrollY","prevProps","prevState","scroll","snapshot","resetScroll","id","closeModal","children","padding","minWidth","maxWidth","zIndex","parseInt","sizes","GetSize","GetOverflow","zIndexValue","Math","min","max","toast","stylesConfiguration","Object","assign","styles","getElementById","offset","openInstances","setState","scrollWidth","innerWidth","documentElement","offsetWidth","body","position","state","scrollTo","Component"],"mappings":";;;;;;;;;;;;;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,aAAvB;AACA,SAAQC,UAAR,QAAyB,WAAzB;AACA,SAAQC,SAAR,QAAwB,WAAxB;;AAEA,IAAMC,oBAAoB,GAAG;AAC3BC,EAAAA,OAAO,EAAE;AACPC,IAAAA,GAAG,EAAE,KADE;AAEPC,IAAAA,IAAI,EAAE,KAFC;AAGPC,IAAAA,KAAK,EAAE,MAHA;AAIPC,IAAAA,MAAM,EAAE,MAJD;AAKPC,IAAAA,WAAW,EAAE,MALN;AAMPC,IAAAA,KAAK,EAAE,OANA;AAOPC,IAAAA,MAAM,EAAE,OAPD;AAQPC,IAAAA,YAAY,EAAE,KARP;AASPC,IAAAA,SAAS,EAAE,YATJ;AAUPC,IAAAA,MAAM,EAAE,CAVD;AAWPC,IAAAA,QAAQ,EAAE,MAXH;AAYPC,IAAAA,SAAS,EAAEf,UAAU,CAACgB;AAZf;AADkB,CAA7B,C,CAiBA;;AACA,IAAMC,gBAAgB,iEAGThB,SAAS,CAACiB,QAHD,+KAYTjB,SAAS,CAACkB,KAZD,okBAAtB;;IAsDMC,c;;;;;;;;;;;;;;;;8DAyCM;AAAA,UAACC,WAAD,uEAAuB,MAAvB;AAAA,UAA+BC,UAA/B,uEAAoD,MAApD;AAAA,aAAgE;AAACZ,QAAAA,MAAM,EAAEW,WAAT;AAAsBZ,QAAAA,KAAK,EAAEa;AAA7B,OAAhE;AAAA,K;;kEACI;AAAA,UAACC,aAAD,uEAAyB,SAAzB;AAAA,aAAuCA,aAAvC;AAAA,K;;;;;;;WAvCd,6BAAoB;AAClB,UAAIxB,UAAU,CAACyB,aAAX,CAAyBC,OAA7B,EAAsC;AACpC1B,QAAAA,UAAU,CAACyB,aAAX,CAAyBC,OAAzB,CAAiCC,eAAjC,GAAmD,iBAAnD;AACD,OAHiB,CAKlB;;;AACA,UAAI,CAACC,QAAQ,CAACC,aAAT,CAAuB,iCAAvB,CAAL,EAAgE;AAC9D,YAAMC,IAAI,GAAGF,QAAQ,CAACE,IAAT,IAAiBF,QAAQ,CAACG,oBAAT,CAA8B,MAA9B,EAAsC,CAAtC,CAA9B;AACA,YAAMC,KAAK,GAAGJ,QAAQ,CAACK,aAAT,CAAuB,OAAvB,CAAd;AACAD,QAAAA,KAAK,CAACE,YAAN,CAAmB,sBAAnB,EAA2C,QAA3C;AACAJ,QAAAA,IAAI,CAACK,WAAL,CAAiBH,KAAjB;AACAA,QAAAA,KAAK,CAACG,WAAN,CAAkBP,QAAQ,CAACQ,cAAT,CAAwBlB,gBAAxB,CAAlB;AACD;;AAED,UAAI,KAAKmB,KAAL,CAAWC,SAAf,EAA0B;AACxB,aAAKC,aAAL,CAAmBC,MAAM,CAACC,OAA1B;AACD;AACF;;;WAED,iCAAwBC,SAAxB,EAAkEC,SAAlE,EAAgI;AAC9H,aAAO;AAACC,QAAAA,MAAM,EAAEJ,MAAM,CAACC;AAAhB,OAAP;AACD;;;WAED,4BAAmBC,SAAnB,EAA6DC,SAA7D,EAAuGE,QAAvG,EAAsI;AACpI,UAAI,KAAKR,KAAL,CAAWC,SAAX,IAAwB,CAACI,SAAS,CAACJ,SAAvC,EAAkD;AAChD,aAAKC,aAAL,CAAmBM,QAAQ,CAAED,MAA7B;AACD;;AACD,UAAI,CAAC,KAAKP,KAAL,CAAWC,SAAZ,IAAyBI,SAAS,CAACJ,SAAvC,EAAkD;AAChD,aAAKQ,WAAL;AACD;AACF;;;WAED,gCAAuB;AACrB,UAAI,KAAKT,KAAL,CAAWC,SAAf,EAA0B;AACxB,aAAKQ,WAAL;AACD;AACF;;;WAKD,kBAAS;AACP,wBAYI,KAAKT,KAZT;AAAA,UACEU,EADF,eACEA,EADF;AAAA,UAEET,SAFF,eAEEA,SAFF;AAAA,UAGEU,UAHF,eAGEA,UAHF;AAAA,UAIEC,QAJF,eAIEA,QAJF;AAAA,UAKE3B,WALF,eAKEA,WALF;AAAA,UAMEC,UANF,eAMEA,UANF;AAAA,UAOEC,aAPF,eAOEA,aAPF;AAAA,UAQE0B,OARF,eAQEA,OARF;AAAA,6CASEC,QATF;AAAA,UASEA,QATF,qCASa,EATb;AAAA,6CAUEC,QAVF;AAAA,UAUEA,QAVF,qCAUa,EAVb;AAAA,2CAWEC,MAXF;AAAA,UAWEA,MAXF,mCAWWC,QAAQ,CAACpD,SAAS,CAACkB,KAAX,CAXnB;AAaA,UAAMmC,KAAK,GAAG,KAAKC,OAAL,CAAalC,WAAb,EAA0BC,UAA1B,CAAd;AACA,UAAOZ,MAAP,GAAwB4C,KAAxB,CAAO5C,MAAP;AAAA,UAAeD,KAAf,GAAwB6C,KAAxB,CAAe7C,KAAf;AACA,UAAMK,QAAQ,GAAG,KAAK0C,WAAL,CAAiBjC,aAAjB,CAAjB,CAhBO,CAiBP;;AACA,UAAMkC,WAAW,GAAGC,IAAI,CAACC,GAAL,CAASD,IAAI,CAACE,GAAL,CAASR,MAAT,EAAiB,CAACnD,SAAS,CAACkB,KAA5B,CAAT,EAA6C,CAAClB,SAAS,CAAC4D,KAAX,GAAmB,CAAhE,CAApB;AACA,UAAMC,mBAAmB,GAAGC,MAAM,CAACC,MAAP,mBAAkB9D,oBAAoB,CAACC,OAAvC,GAAiD;AAC3EO,QAAAA,MAAM,EAANA,MAD2E;AAE3ED,QAAAA,KAAK,EAALA,KAF2E;AAG3EwC,QAAAA,OAAO,EAAPA,OAH2E;AAI3EnC,QAAAA,QAAQ,EAARA,QAJ2E;AAK3EoC,QAAAA,QAAQ,EAARA,QAL2E;AAM3EC,QAAAA,QAAQ,EAARA,QAN2E;AAO3EC,QAAAA,MAAM,EAAEK;AAPmE,OAAjD,CAA5B;AASA,UAAMQ,MAAM,GAAG;AAAC9D,QAAAA,OAAO,EAAE2D;AAAV,OAAf;AAEA,0BACE,KAAC,UAAD;AAAY,QAAA,EAAE,EAAEhB,EAAhB;AAAoB,QAAA,MAAM,EAAET,SAA5B;AAAuC,QAAA,cAAc,EAAE,GAAvD;AAA4D,QAAA,cAAc,EAAE;AAAA,iBAAMU,UAAU,EAAhB;AAAA,SAA5E;AAAgG,QAAA,KAAK,EAAEkB,MAAvG;AACY,QAAA,UAAU,EAAEtC,QAAQ,CAACuC,cAAT,CAAwB,MAAxB,KAAmC,EAD3D;AAAA,kBAEGlB;AAFH,QADF;AAMD;;;WAED,uBAAsBmB,MAAtB,EAAsC;AACpC,UAAI,CAAC/C,cAAc,CAACgD,aAApB,EAAmC;AACjC,aAAKC,QAAL,CAAc;AAAC1B,UAAAA,MAAM,EAAEwB;AAAT,SAAd;AACA,YAAMG,WAAW,GAAG/B,MAAM,CAACgC,UAAP,GAAoB5C,QAAQ,CAAC6C,eAAT,CAAyBC,WAAjE;AACA9C,QAAAA,QAAQ,CAAC+C,IAAT,CAAc3C,KAAd,CAAoB4C,QAApB,GAA+B,OAA/B;AACAhD,QAAAA,QAAQ,CAAC+C,IAAT,CAAc3C,KAAd,CAAoB1B,IAApB;AACAsB,QAAAA,QAAQ,CAAC+C,IAAT,CAAc3C,KAAd,CAAoB3B,GAApB,cAA8B+D,MAA9B;AACAxC,QAAAA,QAAQ,CAAC+C,IAAT,CAAc3C,KAAd,CAAoBzB,KAApB,aAA+BgE,WAA/B;AACD;;AACDlD,MAAAA,cAAc,CAACgD,aAAf;AACD;;;WAED,uBAAsB;AACpBhD,MAAAA,cAAc,CAACgD,aAAf;;AACA,UAAI,CAAChD,cAAc,CAACgD,aAApB,EAAmC;AACjC;AACAzC,QAAAA,QAAQ,CAAC+C,IAAT,CAAc3C,KAAd,CAAoB4C,QAApB,GAA+B,IAA/B,CAFiC,CAGjC;;AACAhD,QAAAA,QAAQ,CAAC+C,IAAT,CAAc3C,KAAd,CAAoB1B,IAApB,GAA2B,IAA3B,CAJiC,CAKjC;;AACAsB,QAAAA,QAAQ,CAAC+C,IAAT,CAAc3C,KAAd,CAAoB3B,GAApB,GAA0B,IAA1B,CANiC,CAOjC;;AACAuB,QAAAA,QAAQ,CAAC+C,IAAT,CAAc3C,KAAd,CAAoBzB,KAApB,GAA4B,IAA5B;AACA,aAAKsE,KAAL,CAAWjC,MAAX,IAAqBJ,MAAM,CAACsC,QAAP,CAAgB,CAAhB,EAAmB,KAAKD,KAAL,CAAWjC,MAA9B,CAArB;AACA,aAAK0B,QAAL,CAAc;AAAC1B,UAAAA,MAAM,EAAE;AAAT,SAAd;AACD;AACF;;;;EA5G0B7C,KAAK,CAACgF,S;;gBAA7B1D,c;AAjBJ0B,EAAAA,E;AACAT,EAAAA,S;AACAU,EAAAA,U;AACAC,EAAAA,Q;AACA3B,EAAAA,W;AACAC,EAAAA,U;AACAC,EAAAA,a;AACA0B,EAAAA,O;AACAC,EAAAA,Q;AACAC,EAAAA,Q;AACAC,EAAAA,M;;;gBAOIhC,c,mBAC2B,C;;AA8GjC,eAAeA,cAAf","sourcesContent":["import * as React from 'react';\nimport ReactModal from 'react-modal';\nimport {BOXSHADOWS} from '../styles';\nimport {Z_INDEXES} from '../styles';\n\nconst ModalContainerStyles = {\n content: {\n top: '50%',\n left: '50%',\n right: 'auto',\n bottom: 'auto',\n marginRight: '-50%',\n width: '640px',\n height: '320px',\n borderRadius: '8px',\n boxSizing: 'border-box' as any,\n margin: 0,\n overflow: 'auto',\n boxShadow: BOXSHADOWS.BOXSHADOW_L3,\n },\n};\n\n//override modal classes to define the animations\nconst modalTransitions = `\n.ReactModal__Overlay {\n opacity: 0;\n z-index: ${Z_INDEXES.backdrop};\n}\n\n.ReactModal__Overlay--after-open {\n opacity: 1;\n transition: opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Content{\n z-index: ${Z_INDEXES.modal};\n opacity:0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n}\n\n.ReactModal__Content--after-open{\n opacity: 1;\n transform: translate(-50%, -50%) scale(1.0, 1.0);\n transition: transform 150ms ease-in-out, opacity 150ms cubic-bezier(0.22, 0.61, 0.35, 1);\n}\n\n.ReactModal__Overlay--before-close {\n opacity: 0;\n transition: opacity 120ms linear;\n}\n\n.ReactModal__Content--before-close{\n opacity: 0;\n transform: translate(-50%, -50%) scale(1.1, 1.1);\n transition: transform 120ms ease-in-out, opacity 120ms cubic-bezier(0.55, 0.05, 0.67, 0.19);\n}\n`;\n\n\ntype ModalContainerProps = {\n id?: string;\n showModal: boolean;\n closeModal: () => void;\n children: any;\n modalHeight?: any;\n modalWidth?: any;\n modalOverflow?: string;\n padding?: string;\n minWidth?: string;\n maxWidth?: string;\n zIndex?: number;\n};\n\ntype ModalContainerState = {\n scroll: number;\n};\n\nclass ModalContainer extends React.Component<ModalContainerProps, ModalContainerState> {\n private static openInstances = 0;\n\n componentDidMount() {\n if (ReactModal.defaultStyles.overlay) {\n ReactModal.defaultStyles.overlay.backgroundColor = 'rgba(0,0,0,0.5)';\n }\n\n //append style node to override modal transition classes\n if (!document.querySelector('[modal-custom-styling=\"active\"]')) {\n const head = document.head || document.getElementsByTagName('head')[0];\n const style = document.createElement('style');\n style.setAttribute('modal-custom-styling', 'active');\n head.appendChild(style);\n style.appendChild(document.createTextNode(modalTransitions));\n }\n\n if (this.props.showModal) {\n this.preventScroll(window.scrollY);\n }\n }\n\n getSnapshotBeforeUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>): { scroll: number } {\n return {scroll: window.scrollY};\n }\n\n componentDidUpdate(prevProps: Readonly<ModalContainerProps>, prevState: Readonly<ModalContainerState>, snapshot?: { scroll: number }) {\n if (this.props.showModal && !prevProps.showModal) {\n this.preventScroll(snapshot!.scroll);\n }\n if (!this.props.showModal && prevProps.showModal) {\n this.resetScroll();\n }\n }\n\n componentWillUnmount() {\n if (this.props.showModal) {\n this.resetScroll();\n }\n }\n\n GetSize = (modalHeight: string = 'auto', modalWidth: string = 'auto') => ({height: modalHeight, width: modalWidth});\n GetOverflow = (modalOverflow: string = 'visible') => modalOverflow;\n\n render() {\n const {\n id,\n showModal,\n closeModal,\n children,\n modalHeight,\n modalWidth,\n modalOverflow,\n padding,\n minWidth = '',\n maxWidth = '',\n zIndex = parseInt(Z_INDEXES.modal)\n } = this.props;\n const sizes = this.GetSize(modalHeight, modalWidth);\n const {height, width} = sizes;\n const overflow = this.GetOverflow(modalOverflow);\n // should be at least z-index of modal and below z-index of toast\n const zIndexValue = Math.min(Math.max(zIndex, +Z_INDEXES.modal), +Z_INDEXES.toast - 1);\n const stylesConfiguration = Object.assign({...ModalContainerStyles.content}, {\n height,\n width,\n padding,\n overflow,\n minWidth,\n maxWidth,\n zIndex: zIndexValue\n });\n const styles = {content: stylesConfiguration};\n\n return (\n <ReactModal id={id} isOpen={showModal} closeTimeoutMS={120} onRequestClose={() => closeModal()} style={styles}\n appElement={document.getElementById('root') || ''}>\n {children}\n </ReactModal>\n );\n }\n\n private preventScroll(offset: number) {\n if (!ModalContainer.openInstances) {\n this.setState({scroll: offset});\n const scrollWidth = window.innerWidth - document.documentElement.offsetWidth;\n document.body.style.position = 'fixed';\n document.body.style.left = `0px`;\n document.body.style.top = `-${offset}px`;\n document.body.style.right = `${scrollWidth}px`;\n }\n ModalContainer.openInstances++\n }\n\n private resetScroll() {\n ModalContainer.openInstances--;\n if (!ModalContainer.openInstances) {\n //@ts-ignore\n document.body.style.position = null;\n //@ts-ignore\n document.body.style.left = null;\n //@ts-ignore\n document.body.style.top = null;\n //@ts-ignore\n document.body.style.right = null;\n this.state.scroll && window.scrollTo(0, this.state.scroll);\n this.setState({scroll: 0});\n }\n }\n}\n\nexport default ModalContainer;\n"],"file":"ModalContainer.js"}
|