@mrshmllw/smores-react 2.17.3 → 2.17.5
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.
- package/dist/Modal/Modal.d.ts +1 -1
- package/dist/Modal/Modal.js +6 -2
- package/dist/Modal/Modal.js.map +1 -1
- package/dist/Modal/Modal.stories.js +1 -1
- package/dist/Modal/Modal.stories.js.map +1 -1
- package/dist/Modal/useBodyScrollLock.d.ts +4 -0
- package/dist/Modal/useBodyScrollLock.js +18 -0
- package/dist/Modal/useBodyScrollLock.js.map +1 -0
- package/package.json +4 -2
package/dist/Modal/Modal.d.ts
CHANGED
package/dist/Modal/Modal.js
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { useRef } from 'react';
|
|
2
2
|
import styled, { css } from 'styled-components';
|
|
3
3
|
import { theme } from '../theme';
|
|
4
4
|
import { createPortal } from 'react-dom';
|
|
5
5
|
import { Box } from '../Box';
|
|
6
6
|
import { Icon } from '../Icon';
|
|
7
7
|
import { Text } from '../Text';
|
|
8
|
+
import useBodyScrollLock from './useBodyScrollLock';
|
|
8
9
|
export const Modal = ({ title = '', icon = '', children, showModal = false, handleClick, drawer = true, cross = true, width, containerClass, portalContainer = document.body, }) => {
|
|
9
|
-
|
|
10
|
+
const modalRef = useRef(null);
|
|
11
|
+
useBodyScrollLock({ node: modalRef.current, showModal });
|
|
12
|
+
return createPortal(React.createElement(Wrapper, { showModal: showModal, ref: modalRef },
|
|
10
13
|
React.createElement(Overlay, { onClick: handleClick }),
|
|
11
14
|
React.createElement(Container, { drawer: drawer, width: width || '460px', className: containerClass },
|
|
12
15
|
React.createElement(Box, { flex: true, alignItems: "flex-start", justifyContent: "space-between", mb: "8px" },
|
|
@@ -31,6 +34,7 @@ const Wrapper = styled(Box)(({ showModal }) => css `
|
|
|
31
34
|
const Overlay = styled.div `
|
|
32
35
|
position: fixed;
|
|
33
36
|
background: ${theme.colors.secondary};
|
|
37
|
+
cursor: pointer;
|
|
34
38
|
opacity: 0.4;
|
|
35
39
|
top: 0;
|
|
36
40
|
bottom: 0;
|
package/dist/Modal/Modal.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"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"}
|
|
@@ -12,7 +12,7 @@ const Template = (props) => {
|
|
|
12
12
|
const handleClick = () => {
|
|
13
13
|
setShowModal(!showModal);
|
|
14
14
|
};
|
|
15
|
-
return (React.createElement(Box,
|
|
15
|
+
return (React.createElement(Box, { height: "900px" },
|
|
16
16
|
React.createElement(Modal, Object.assign({}, props, { handleClick: handleClick, showModal: showModal }), "[A modal window] creates a mode that disables the main window, but keeps it visible with the modal window as a child window in front of it."),
|
|
17
17
|
React.createElement(Button, { primary: true, handleClick: handleClick }, "Show Modal with Mobile Drawer")));
|
|
18
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../src/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAA;AAE3C,eAAe;IACb,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,EAAE,WAAW,EAAE,EAAE,MAAM,EAAE,0BAA0B,EAAE,EAAE;CAClE,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAiB,EAAE,EAAE;IACrC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEjD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,YAAY,CAAC,CAAC,SAAS,CAAC,CAAA;IAC1B,CAAC,CAAA;IACD,OAAO,CACL,oBAAC,GAAG;
|
|
1
|
+
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../src/Modal/Modal.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAClC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAc,MAAM,SAAS,CAAA;AAE3C,eAAe;IACb,KAAK,EAAE,OAAO;IACd,SAAS,EAAE,KAAK;IAChB,QAAQ,EAAE,EAAE,WAAW,EAAE,EAAE,MAAM,EAAE,0BAA0B,EAAE,EAAE;CAClE,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAiB,EAAE,EAAE;IACrC,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;IAEjD,MAAM,WAAW,GAAG,GAAG,EAAE;QACvB,YAAY,CAAC,CAAC,SAAS,CAAC,CAAA;IAC1B,CAAC,CAAA;IACD,OAAO,CACL,oBAAC,GAAG,IAAC,MAAM,EAAC,OAAO;QACjB,oBAAC,KAAK,oBAAK,KAAK,IAAE,WAAW,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,mJAGxD;QACR,oBAAC,MAAM,IAAC,OAAO,QAAC,WAAW,EAAE,WAAW,oCAE/B,CACL,CACP,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA;AAE5C,WAAW,CAAC,IAAI,GAAG;IACjB,IAAI,EAAE,UAAU;IAChB,KAAK,EAAE,mCAAmC;IAC1C,SAAS,EAAE,KAAK;IAChB,MAAM,EAAE,IAAI;IACZ,KAAK,EAAE,IAAI;IACX,KAAK,EAAE,OAAO;CACf,CAAA"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
import { clearAllBodyScrollLocks, disableBodyScroll, enableBodyScroll, } from 'body-scroll-lock';
|
|
3
|
+
export default function useBodyScrollLock({ node, showModal, }) {
|
|
4
|
+
useEffect(() => {
|
|
5
|
+
return () => clearAllBodyScrollLocks();
|
|
6
|
+
}, []);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
if (node === null)
|
|
9
|
+
return;
|
|
10
|
+
if (showModal) {
|
|
11
|
+
disableBodyScroll(node, { reserveScrollBarGap: true });
|
|
12
|
+
}
|
|
13
|
+
else {
|
|
14
|
+
enableBodyScroll(node);
|
|
15
|
+
}
|
|
16
|
+
}, [node, showModal]);
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=useBodyScrollLock.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBodyScrollLock.js","sourceRoot":"","sources":["../../src/Modal/useBodyScrollLock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EACL,uBAAuB,EACvB,iBAAiB,EACjB,gBAAgB,GACjB,MAAM,kBAAkB,CAAA;AAEzB,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,IAAI,EACJ,SAAS,GAIV;IACC,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE,CAAC,uBAAuB,EAAE,CAAA;IACxC,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,IAAI,KAAK,IAAI;YAAE,OAAM;QAEzB,IAAI,SAAS,EAAE;YACb,iBAAiB,CAAC,IAAI,EAAE,EAAE,mBAAmB,EAAE,IAAI,EAAE,CAAC,CAAA;SACvD;aAAM;YACL,gBAAgB,CAAC,IAAI,CAAC,CAAA;SACvB;IACH,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAA;AACvB,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@mrshmllw/smores-react",
|
|
3
|
-
"version": "2.17.
|
|
3
|
+
"version": "2.17.5",
|
|
4
4
|
"main": "./dist/index.js",
|
|
5
5
|
"description": "Collection of React components used by Marshmallow Technology",
|
|
6
6
|
"keywords": [
|
|
@@ -41,7 +41,8 @@
|
|
|
41
41
|
"@storybook/react": "^6.5.16",
|
|
42
42
|
"@storybook/storybook-deployer": "^2.8.16",
|
|
43
43
|
"@testing-library/jest-dom": "^5.11.4",
|
|
44
|
-
"@testing-library/react": "^
|
|
44
|
+
"@testing-library/react": "^14.0.0",
|
|
45
|
+
"@types/body-scroll-lock": "^3.1.0",
|
|
45
46
|
"@types/jest": "^29.0.0",
|
|
46
47
|
"@types/node": "^18.0.0",
|
|
47
48
|
"@types/react": "^18.0.24",
|
|
@@ -71,6 +72,7 @@
|
|
|
71
72
|
"typescript": "^4.4.2"
|
|
72
73
|
},
|
|
73
74
|
"dependencies": {
|
|
75
|
+
"body-scroll-lock": "^4.0.0-beta.0",
|
|
74
76
|
"date-fns": "^2.16.1",
|
|
75
77
|
"polished": "^4.1.3"
|
|
76
78
|
},
|