@egov3/system-design 1.3.144 → 1.3.145
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/cjs/baseComponents/BottomSheet/BottomSheet.module.css.js +1 -1
- package/dist/cjs/baseComponents/BottomSheet/index.js +3 -1
- package/dist/cjs/baseComponents/BottomSheet/index.js.map +1 -1
- package/dist/cjs/components/Calendar/Body/index.js +1 -1
- package/dist/cjs/components/Calendar/Header/index.js +1 -1
- package/dist/cjs/components/ErrorModal/index.js +1 -1
- package/dist/cjs/components/Identity/Agreement/index.js +1 -1
- package/dist/cjs/components/Identity/EdsSuccess/index.js +1 -1
- package/dist/cjs/components/Identity/IdentityModal/index.js +1 -1
- package/dist/cjs/components/Messages/EmptyMessages/index.js +1 -1
- package/dist/cjs/components/Messages/HelpNotificationItem/index.js +1 -1
- package/dist/cjs/components/Messages/MsgBody/index.js +1 -1
- package/dist/cjs/components/Messages/MsgComponentHeader/index.js +1 -1
- package/dist/cjs/components/Messages/MsgSearch/index.js +1 -1
- package/dist/cjs/components/Notification/Item/index.js +1 -1
- package/dist/cjs/components/Presale/AccordionTitle/index.js +1 -1
- package/dist/cjs/components/Presale/Instructions/index.js +1 -1
- package/dist/cjs/components/Presale/PassportDetails/index.js +1 -1
- package/dist/cjs/components/Profile/IconToggleItem/index.js +1 -1
- package/dist/cjs/components/Profile/ProfileHealthGeneral/index.js +1 -1
- package/dist/cjs/components/Profile/RightMenuSectionItem/index.js +1 -1
- package/dist/cjs/components/Profile/SetUpAccess/index.js +1 -1
- package/dist/cjs/components/Services/Feedback/index.js +1 -1
- package/dist/cjs/components/Services/FileForUpload/index.js +1 -1
- package/dist/cjs/components/Services/NextStepComponent/index.js +1 -1
- package/dist/cjs/customHooks/useDragToClose.js +56 -0
- package/dist/cjs/customHooks/useDragToClose.js.map +1 -0
- package/dist/esm/baseComponents/BottomSheet/BottomSheet.module.css.js +1 -1
- package/dist/esm/baseComponents/BottomSheet/index.js +3 -1
- package/dist/esm/baseComponents/BottomSheet/index.js.map +1 -1
- package/dist/esm/components/Calendar/Body/index.js +1 -1
- package/dist/esm/components/Calendar/Header/index.js +1 -1
- package/dist/esm/components/ErrorModal/index.js +1 -1
- package/dist/esm/components/Identity/Agreement/index.js +1 -1
- package/dist/esm/components/Identity/EdsSuccess/index.js +1 -1
- package/dist/esm/components/Identity/IdentityModal/index.js +1 -1
- package/dist/esm/components/Messages/EmptyMessages/index.js +1 -1
- package/dist/esm/components/Messages/HelpNotificationItem/index.js +1 -1
- package/dist/esm/components/Messages/MsgBody/index.js +1 -1
- package/dist/esm/components/Messages/MsgComponentHeader/index.js +1 -1
- package/dist/esm/components/Messages/MsgSearch/index.js +1 -1
- package/dist/esm/components/Notification/Item/index.js +1 -1
- package/dist/esm/components/Presale/AccordionTitle/index.js +1 -1
- package/dist/esm/components/Presale/Instructions/index.js +1 -1
- package/dist/esm/components/Presale/PassportDetails/index.js +1 -1
- package/dist/esm/components/Profile/IconToggleItem/index.js +1 -1
- package/dist/esm/components/Profile/ProfileHealthGeneral/index.js +1 -1
- package/dist/esm/components/Profile/RightMenuSectionItem/index.js +1 -1
- package/dist/esm/components/Profile/SetUpAccess/index.js +1 -1
- package/dist/esm/components/Services/Feedback/index.js +1 -1
- package/dist/esm/components/Services/FileForUpload/index.js +1 -1
- package/dist/esm/components/Services/NextStepComponent/index.js +1 -1
- package/dist/esm/customHooks/useDragToClose.js +54 -0
- package/dist/esm/customHooks/useDragToClose.js.map +1 -0
- package/package.json +1 -1
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
4
|
|
|
5
|
-
var css_248z = ".BottomSheet-module_contentWrap__ffurp {\n align-self: flex-end;\n width: 100%;\n background: var(--page-color-background-white);\n border-radius: 16px 16px 0 0;\n display: flex;\n flex-direction: column;\n height: auto;\n max-height: calc(100% - 64px);\n animation: BottomSheet-module_slideUp__lehy7 0.3s ease;\n}\n\n.BottomSheet-module_largeVariant__9LYsH {\n height: calc(100% - 64px);\n}\n\n.BottomSheet-module_smallVariant__9hVmR {\n height: auto;\n}\n\n@keyframes BottomSheet-module_slideUp__lehy7 {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n\n.BottomSheet-module_contentBody__Ku11- {\n flex: 1 1 auto;\n overflow-y: auto;\n min-height: 0;\n padding: 0 0 18px;\n}\n\n.BottomSheet-module_contentHeader__MrGrx {\n display: flex;\n align-items: center;\n}\n\n.BottomSheet-module_posLeft__7OLLr {\n padding: 16px 20px;\n flex: 1 0 0;\n}\n\n.BottomSheet-module_posRight__TCy-f {\n display: flex;\n width: 56px;\n padding: 16px;\n align-items: center;\n}\n\n.BottomSheet-module_grabber__NiEaj {\n flex: 0 0 auto;\n width: 36px;\n height: 4px;\n margin:
|
|
5
|
+
var css_248z = ".BottomSheet-module_contentWrap__ffurp {\n align-self: flex-end;\n width: 100%;\n background: var(--page-color-background-white);\n border-radius: 16px 16px 0 0;\n display: flex;\n flex-direction: column;\n height: auto;\n max-height: calc(100% - 64px);\n animation: BottomSheet-module_slideUp__lehy7 0.3s ease;\n}\n\n.BottomSheet-module_largeVariant__9LYsH {\n height: calc(100% - 64px);\n}\n\n.BottomSheet-module_smallVariant__9hVmR {\n height: auto;\n}\n\n@keyframes BottomSheet-module_slideUp__lehy7 {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n\n.BottomSheet-module_contentBody__Ku11- {\n flex: 1 1 auto;\n overflow-y: auto;\n min-height: 0;\n padding: 0 0 18px;\n}\n\n.BottomSheet-module_contentHeader__MrGrx {\n display: flex;\n align-items: center;\n}\n\n.BottomSheet-module_posLeft__7OLLr {\n padding: 16px 20px;\n flex: 1 0 0;\n}\n\n.BottomSheet-module_posRight__TCy-f {\n display: flex;\n width: 56px;\n padding: 16px;\n align-items: center;\n}\n\n.BottomSheet-module_grabber__NiEaj {\n flex: 0 0 auto;\n box-sizing: content-box;\n width: 36px;\n height: 4px;\n margin: 0 auto;\n padding: 8px;\n border-radius: 8px;\n background: var(--icon-tertiary);\n background-clip: content-box;\n cursor: grab;\n touch-action: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .BottomSheet-module_contentWrap__ffurp {\n animation: none;\n }\n}\n";
|
|
6
6
|
var styles = {"contentWrap":"BottomSheet-module_contentWrap__ffurp","slideUp":"BottomSheet-module_slideUp__lehy7","largeVariant":"BottomSheet-module_largeVariant__9LYsH","smallVariant":"BottomSheet-module_smallVariant__9hVmR","contentBody":"BottomSheet-module_contentBody__Ku11-","contentHeader":"BottomSheet-module_contentHeader__MrGrx","posLeft":"BottomSheet-module_posLeft__7OLLr","posRight":"BottomSheet-module_posRight__TCy-f","grabber":"BottomSheet-module_grabber__NiEaj"};
|
|
7
7
|
function styleInject(css, options) {
|
|
8
8
|
if (typeof document === 'undefined') return;
|
|
@@ -2,13 +2,15 @@
|
|
|
2
2
|
|
|
3
3
|
var jsxRuntime = require('react/jsx-runtime');
|
|
4
4
|
var Close = require('@egov3/graphics/General/Close');
|
|
5
|
+
var useDragToClose = require('../../customHooks/useDragToClose.js');
|
|
5
6
|
var joinClasses = require('../../utils/joinClasses.js');
|
|
6
7
|
var index = require('../Overlay/index.js');
|
|
7
8
|
var index$1 = require('../Typography/index.js');
|
|
8
9
|
var BottomSheet_module = require('./BottomSheet.module.css.js');
|
|
9
10
|
|
|
10
11
|
const BottomSheet = ({ children, title, setIsOpen, variant, }) => {
|
|
11
|
-
|
|
12
|
+
const { grabberProps, sheetRef } = useDragToClose.useDragToClose(setIsOpen);
|
|
13
|
+
return (jsxRuntime.jsx(index.Overlay, { children: jsxRuntime.jsxs("div", { className: joinClasses.joinClasses(BottomSheet_module.default.contentWrap, BottomSheet_module.default[`${variant}Variant`]), "data-testid": "BottomSheet_WRAPPER", ref: sheetRef, children: [jsxRuntime.jsx("div", { className: BottomSheet_module.default.grabber, "data-testid": "BottomSheet_GRABBER", ...grabberProps }), jsxRuntime.jsxs("div", { className: BottomSheet_module.default.contentHeader, "data-testid": "BottomSheet_HEADER", children: [jsxRuntime.jsx(index$1.Typography, { className: BottomSheet_module.default.posLeft, "data-testid": "BottomSheet_TITLE", fontClass: "subtitles2", tag: "h3", children: title }), jsxRuntime.jsx("button", { className: BottomSheet_module.default.posRight, "data-testid": "BottomSheetHeaderBtn_CLOSE", onClick: () => {
|
|
12
14
|
setIsOpen(false);
|
|
13
15
|
}, type: "button", children: jsxRuntime.jsx(Close.CloseIcon, { "data-testid": "BottomSheetClose_ICON", height: 24, width: 24 }) })] }), jsxRuntime.jsx("div", { className: BottomSheet_module.default.contentBody, "data-testid": "BottomSheet_BODY", children: children })] }) }));
|
|
14
16
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/BottomSheet/index.tsx"],"sourcesContent":[null],"names":["_jsx","Overlay","_jsxs","joinClasses","styles","Typography","CloseIcon"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/BottomSheet/index.tsx"],"sourcesContent":[null],"names":["useDragToClose","_jsx","Overlay","_jsxs","joinClasses","styles","Typography","CloseIcon"],"mappings":";;;;;;;;;;AAgBO,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,GACW,KAAqB;IACvC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAGA,6BAAc,CAAC,SAAS,CAAC;AAE5D,IAAA,QACEC,cAAA,CAACC,aAAO,EAAA,EAAA,QAAA,EACNC,eAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAEC,uBAAW,CAACC,0BAAM,CAAC,WAAW,EAAEA,0BAAM,CAAC,CAAA,EAAG,OAAO,CAAA,OAAA,CAAS,CAAC,CAAC,EAAA,aAAA,EAC3D,qBAAqB,EACjC,GAAG,EAAE,QAAQ,EAAA,QAAA,EAAA,CAEbJ,wBACE,SAAS,EAAEI,0BAAM,CAAC,OAAO,EAAA,aAAA,EACb,qBAAqB,KAC7B,YAAY,EAAA,CAChB,EACFF,eAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEE,0BAAM,CAAC,aAAa,EAAA,aAAA,EAAc,oBAAoB,EAAA,QAAA,EAAA,CACpEJ,eAACK,kBAAU,EAAA,EACT,SAAS,EAAED,0BAAM,CAAC,OAAO,iBACb,mBAAmB,EAC/B,SAAS,EAAC,YAAY,EACtB,GAAG,EAAC,IAAI,EAAA,QAAA,EAEP,KAAK,EAAA,CACK,EACbJ,2BACE,SAAS,EAAEI,0BAAM,CAAC,QAAQ,EAAA,aAAA,EACd,4BAA4B,EACxC,OAAO,EAAE,MAAK;gCACZ,SAAS,CAAC,KAAK,CAAC;AAClB,4BAAA,CAAC,EACD,IAAI,EAAC,QAAQ,YAEbJ,cAAA,CAACM,eAAS,EAAA,EAAA,aAAA,EACI,uBAAuB,EACnC,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,EAAA,CACT,EAAA,CACK,IACL,EAENN,cAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAEI,0BAAM,CAAC,WAAW,EAAA,aAAA,EAAc,kBAAkB,YAC/D,QAAQ,EAAA,CACL,CAAA,EAAA,CACF,EAAA,CACE;AAEd;;;;"}
|
|
@@ -8,13 +8,13 @@ var Close = require('@egov3/graphics/General/Close');
|
|
|
8
8
|
require('../../../styles/colors.css.js');
|
|
9
9
|
var joinClasses = require('../../../utils/joinClasses.js');
|
|
10
10
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
11
|
+
require('react');
|
|
11
12
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
12
13
|
var index = require('../../../baseComponents/Typography/index.js');
|
|
13
14
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
14
15
|
require('../../../styles/typography.module.css.js');
|
|
15
16
|
require('../../../baseComponents/Button/button.module.css.js');
|
|
16
17
|
require('../../../baseComponents/InputField/index.js');
|
|
17
|
-
require('react');
|
|
18
18
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
19
19
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
20
20
|
require('../../../baseComponents/Loader/Loader.module.css.js');
|
|
@@ -4,13 +4,13 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
require('../../../styles/colors.css.js');
|
|
5
5
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
6
6
|
require('@egov3/graphics/General/Close');
|
|
7
|
+
require('react');
|
|
7
8
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
8
9
|
var index$2 = require('../../../baseComponents/Typography/index.js');
|
|
9
10
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
10
11
|
require('../../../styles/typography.module.css.js');
|
|
11
12
|
require('../../../baseComponents/Button/button.module.css.js');
|
|
12
13
|
require('../../../baseComponents/InputField/index.js');
|
|
13
|
-
require('react');
|
|
14
14
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
15
15
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
16
16
|
require('../../../baseComponents/Loader/Loader.module.css.js');
|
|
@@ -7,12 +7,12 @@ var Verification = require('@egov3/graphics/Illustrations/Verification');
|
|
|
7
7
|
var Egov = require('@egov3/graphics/Logo/Egov');
|
|
8
8
|
require('../../styles/colors.css.js');
|
|
9
9
|
require('../../baseComponents/Accordion/Accordion.module.css.js');
|
|
10
|
+
require('react');
|
|
10
11
|
require('../../baseComponents/Overlay/Overlay.module.css.js');
|
|
11
12
|
var index$2 = require('../../baseComponents/Typography/index.js');
|
|
12
13
|
require('../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
13
14
|
var index$3 = require('../../baseComponents/Button/index.js');
|
|
14
15
|
require('../../baseComponents/InputField/index.js');
|
|
15
|
-
require('react');
|
|
16
16
|
require('../../styles/typography.module.css.js');
|
|
17
17
|
require('../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
18
18
|
require('../../baseComponents/Label/Label.module.css.js');
|
|
@@ -5,8 +5,8 @@ var parse = require('html-react-parser');
|
|
|
5
5
|
require('../../../styles/colors.css.js');
|
|
6
6
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
7
7
|
require('@egov3/graphics/General/Close');
|
|
8
|
-
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
9
8
|
require('react');
|
|
9
|
+
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
10
10
|
require('../../../styles/typography.module.css.js');
|
|
11
11
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
12
12
|
var index = require('../../../baseComponents/Button/index.js');
|
|
@@ -5,12 +5,12 @@ var RegistrationSuccess = require('@egov3/graphics/Illustrations/RegistrationSuc
|
|
|
5
5
|
require('../../../styles/colors.css.js');
|
|
6
6
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
7
7
|
require('@egov3/graphics/General/Close');
|
|
8
|
+
require('react');
|
|
8
9
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
9
10
|
var index = require('../../../baseComponents/Typography/index.js');
|
|
10
11
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
11
12
|
var index$2 = require('../../../baseComponents/Button/index.js');
|
|
12
13
|
require('../../../baseComponents/InputField/index.js');
|
|
13
|
-
require('react');
|
|
14
14
|
require('../../../styles/typography.module.css.js');
|
|
15
15
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
16
16
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
@@ -5,13 +5,13 @@ require('../../../styles/colors.css.js');
|
|
|
5
5
|
var joinClasses = require('../../../utils/joinClasses.js');
|
|
6
6
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
7
7
|
require('@egov3/graphics/General/Close');
|
|
8
|
+
require('react');
|
|
8
9
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
9
10
|
var index$2 = require('../../../baseComponents/Typography/index.js');
|
|
10
11
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
11
12
|
require('../../../styles/typography.module.css.js');
|
|
12
13
|
require('../../../baseComponents/Button/button.module.css.js');
|
|
13
14
|
require('../../../baseComponents/InputField/index.js');
|
|
14
|
-
require('react');
|
|
15
15
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
16
16
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
17
17
|
require('../../../baseComponents/Loader/Loader.module.css.js');
|
|
@@ -6,13 +6,13 @@ var ServicesOutline = require('@egov3/graphics/General/ServicesOutline');
|
|
|
6
6
|
require('../../../styles/colors.css.js');
|
|
7
7
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
8
8
|
require('@egov3/graphics/General/Close');
|
|
9
|
+
require('react');
|
|
9
10
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
10
11
|
var index = require('../../../baseComponents/Typography/index.js');
|
|
11
12
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
12
13
|
require('../../../styles/typography.module.css.js');
|
|
13
14
|
require('../../../baseComponents/Button/button.module.css.js');
|
|
14
15
|
require('../../../baseComponents/InputField/index.js');
|
|
15
|
-
require('react');
|
|
16
16
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
17
17
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
18
18
|
require('../../../baseComponents/Loader/Loader.module.css.js');
|
|
@@ -5,13 +5,13 @@ require('../../../styles/colors.css.js');
|
|
|
5
5
|
var joinClasses = require('../../../utils/joinClasses.js');
|
|
6
6
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
7
7
|
require('@egov3/graphics/General/Close');
|
|
8
|
+
require('react');
|
|
8
9
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
9
10
|
var index = require('../../../baseComponents/Typography/index.js');
|
|
10
11
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
11
12
|
require('../../../styles/typography.module.css.js');
|
|
12
13
|
require('../../../baseComponents/Button/button.module.css.js');
|
|
13
14
|
require('../../../baseComponents/InputField/index.js');
|
|
14
|
-
require('react');
|
|
15
15
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
16
16
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
17
17
|
require('../../../baseComponents/Loader/Loader.module.css.js');
|
|
@@ -9,12 +9,12 @@ require('../../../styles/colors.css.js');
|
|
|
9
9
|
var joinClasses = require('../../../utils/joinClasses.js');
|
|
10
10
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
11
11
|
require('@egov3/graphics/General/Close');
|
|
12
|
+
require('react');
|
|
12
13
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
13
14
|
var index = require('../../../baseComponents/Typography/index.js');
|
|
14
15
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
15
16
|
var index$1 = require('../../../baseComponents/Button/index.js');
|
|
16
17
|
require('../../../baseComponents/InputField/index.js');
|
|
17
|
-
require('react');
|
|
18
18
|
require('../../../styles/typography.module.css.js');
|
|
19
19
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
20
20
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
@@ -7,13 +7,13 @@ var Search = require('@egov3/graphics/General/Search');
|
|
|
7
7
|
require('../../../styles/colors.css.js');
|
|
8
8
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
9
9
|
require('@egov3/graphics/General/Close');
|
|
10
|
+
require('react');
|
|
10
11
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
11
12
|
var index = require('../../../baseComponents/Typography/index.js');
|
|
12
13
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
13
14
|
require('../../../styles/typography.module.css.js');
|
|
14
15
|
require('../../../baseComponents/Button/button.module.css.js');
|
|
15
16
|
require('../../../baseComponents/InputField/index.js');
|
|
16
|
-
require('react');
|
|
17
17
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
18
18
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
19
19
|
require('../../../baseComponents/Loader/Loader.module.css.js');
|
|
@@ -4,8 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
require('../../../styles/colors.css.js');
|
|
5
5
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
6
6
|
require('@egov3/graphics/General/Close');
|
|
7
|
-
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
8
7
|
require('react');
|
|
8
|
+
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
9
9
|
require('../../../styles/typography.module.css.js');
|
|
10
10
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
11
11
|
var index$1 = require('../../../baseComponents/Button/index.js');
|
|
@@ -9,13 +9,13 @@ require('../../../styles/colors.css.js');
|
|
|
9
9
|
var joinClasses = require('../../../utils/joinClasses.js');
|
|
10
10
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
11
11
|
require('@egov3/graphics/General/Close');
|
|
12
|
+
require('react');
|
|
12
13
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
13
14
|
var index = require('../../../baseComponents/Typography/index.js');
|
|
14
15
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
15
16
|
require('../../../styles/typography.module.css.js');
|
|
16
17
|
require('../../../baseComponents/Button/button.module.css.js');
|
|
17
18
|
require('../../../baseComponents/InputField/index.js');
|
|
18
|
-
require('react');
|
|
19
19
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
20
20
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
21
21
|
require('../../../baseComponents/Loader/Loader.module.css.js');
|
|
@@ -4,13 +4,13 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
require('../../../styles/colors.css.js');
|
|
5
5
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
6
6
|
require('@egov3/graphics/General/Close');
|
|
7
|
+
require('react');
|
|
7
8
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
8
9
|
var index = require('../../../baseComponents/Typography/index.js');
|
|
9
10
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
10
11
|
require('../../../styles/typography.module.css.js');
|
|
11
12
|
require('../../../baseComponents/Button/button.module.css.js');
|
|
12
13
|
require('../../../baseComponents/InputField/index.js');
|
|
13
|
-
require('react');
|
|
14
14
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
15
15
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
16
16
|
require('../../../baseComponents/Loader/Loader.module.css.js');
|
|
@@ -4,13 +4,13 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
require('../../../styles/colors.css.js');
|
|
5
5
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
6
6
|
require('@egov3/graphics/General/Close');
|
|
7
|
+
require('react');
|
|
7
8
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
8
9
|
var index = require('../../../baseComponents/Typography/index.js');
|
|
9
10
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
10
11
|
require('../../../styles/typography.module.css.js');
|
|
11
12
|
require('../../../baseComponents/Button/button.module.css.js');
|
|
12
13
|
require('../../../baseComponents/InputField/index.js');
|
|
13
|
-
require('react');
|
|
14
14
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
15
15
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
16
16
|
require('../../../baseComponents/Loader/Loader.module.css.js');
|
|
@@ -4,13 +4,13 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
require('../../../styles/colors.css.js');
|
|
5
5
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
6
6
|
require('@egov3/graphics/General/Close');
|
|
7
|
+
require('react');
|
|
7
8
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
8
9
|
var index = require('../../../baseComponents/Typography/index.js');
|
|
9
10
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
10
11
|
require('../../../styles/typography.module.css.js');
|
|
11
12
|
require('../../../baseComponents/Button/button.module.css.js');
|
|
12
13
|
require('../../../baseComponents/InputField/index.js');
|
|
13
|
-
require('react');
|
|
14
14
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
15
15
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
16
16
|
require('../../../baseComponents/Loader/Loader.module.css.js');
|
|
@@ -4,13 +4,13 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
require('../../../styles/colors.css.js');
|
|
5
5
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
6
6
|
require('@egov3/graphics/General/Close');
|
|
7
|
+
require('react');
|
|
7
8
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
8
9
|
var index = require('../../../baseComponents/Typography/index.js');
|
|
9
10
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
10
11
|
require('../../../styles/typography.module.css.js');
|
|
11
12
|
require('../../../baseComponents/Button/button.module.css.js');
|
|
12
13
|
require('../../../baseComponents/InputField/index.js');
|
|
13
|
-
require('react');
|
|
14
14
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
15
15
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
16
16
|
require('../../../baseComponents/Loader/Loader.module.css.js');
|
|
@@ -4,13 +4,13 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
require('../../../styles/colors.css.js');
|
|
5
5
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
6
6
|
require('@egov3/graphics/General/Close');
|
|
7
|
+
require('react');
|
|
7
8
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
8
9
|
var index = require('../../../baseComponents/Typography/index.js');
|
|
9
10
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
10
11
|
require('../../../styles/typography.module.css.js');
|
|
11
12
|
require('../../../baseComponents/Button/button.module.css.js');
|
|
12
13
|
require('../../../baseComponents/InputField/index.js');
|
|
13
|
-
require('react');
|
|
14
14
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
15
15
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
16
16
|
require('../../../baseComponents/Loader/Loader.module.css.js');
|
|
@@ -4,12 +4,12 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
require('../../../styles/colors.css.js');
|
|
5
5
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
6
6
|
require('@egov3/graphics/General/Close');
|
|
7
|
+
require('react');
|
|
7
8
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
8
9
|
var index = require('../../../baseComponents/Typography/index.js');
|
|
9
10
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
10
11
|
var index$1 = require('../../../baseComponents/Button/index.js');
|
|
11
12
|
require('../../../baseComponents/InputField/index.js');
|
|
12
|
-
require('react');
|
|
13
13
|
require('../../../styles/typography.module.css.js');
|
|
14
14
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
15
15
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
@@ -6,13 +6,13 @@ var Kaspi = require('@egov3/graphics/Logo/Kaspi');
|
|
|
6
6
|
require('../../../styles/colors.css.js');
|
|
7
7
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
8
8
|
require('@egov3/graphics/General/Close');
|
|
9
|
+
require('react');
|
|
9
10
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
10
11
|
var index$2 = require('../../../baseComponents/Typography/index.js');
|
|
11
12
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
12
13
|
require('../../../styles/typography.module.css.js');
|
|
13
14
|
require('../../../baseComponents/Button/button.module.css.js');
|
|
14
15
|
require('../../../baseComponents/InputField/index.js');
|
|
15
|
-
require('react');
|
|
16
16
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
17
17
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
18
18
|
require('../../../baseComponents/Loader/Loader.module.css.js');
|
|
@@ -9,12 +9,12 @@ var Smile = require('@egov3/graphics/Emoji/Smile');
|
|
|
9
9
|
var Close = require('@egov3/graphics/General/Close');
|
|
10
10
|
require('../../../styles/colors.css.js');
|
|
11
11
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
12
|
+
require('react');
|
|
12
13
|
var index = require('../../../baseComponents/Overlay/index.js');
|
|
13
14
|
var index$3 = require('../../../baseComponents/Typography/index.js');
|
|
14
15
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
15
16
|
var index$5 = require('../../../baseComponents/Button/index.js');
|
|
16
17
|
require('../../../baseComponents/InputField/index.js');
|
|
17
|
-
require('react');
|
|
18
18
|
require('../../../styles/typography.module.css.js');
|
|
19
19
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
20
20
|
var index$1 = require('../../../baseComponents/Label/index.js');
|
|
@@ -9,13 +9,13 @@ require('../../../styles/colors.css.js');
|
|
|
9
9
|
var joinClasses = require('../../../utils/joinClasses.js');
|
|
10
10
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
11
11
|
require('@egov3/graphics/General/Close');
|
|
12
|
+
require('react');
|
|
12
13
|
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
13
14
|
var index$1 = require('../../../baseComponents/Typography/index.js');
|
|
14
15
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
15
16
|
require('../../../styles/typography.module.css.js');
|
|
16
17
|
require('../../../baseComponents/Button/button.module.css.js');
|
|
17
18
|
require('../../../baseComponents/InputField/index.js');
|
|
18
|
-
require('react');
|
|
19
19
|
require('../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js');
|
|
20
20
|
require('../../../baseComponents/Label/Label.module.css.js');
|
|
21
21
|
require('../../../baseComponents/Loader/Loader.module.css.js');
|
|
@@ -4,8 +4,8 @@ var jsxRuntime = require('react/jsx-runtime');
|
|
|
4
4
|
require('../../../styles/colors.css.js');
|
|
5
5
|
require('../../../baseComponents/Accordion/Accordion.module.css.js');
|
|
6
6
|
require('@egov3/graphics/General/Close');
|
|
7
|
-
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
8
7
|
require('react');
|
|
8
|
+
require('../../../baseComponents/Overlay/Overlay.module.css.js');
|
|
9
9
|
require('../../../styles/typography.module.css.js');
|
|
10
10
|
require('../../../baseComponents/BottomSheet/BottomSheet.module.css.js');
|
|
11
11
|
var index = require('../../../baseComponents/Button/index.js');
|
|
@@ -0,0 +1,56 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var React = require('react');
|
|
4
|
+
|
|
5
|
+
/* Note: Larger-than-typical dismiss threshold (~100px vs the usual 50-80px) to avoid
|
|
6
|
+
accidental closes for elderly users who drag slowly and imprecisely */
|
|
7
|
+
const DISMISS_THRESHOLD_PX = 100;
|
|
8
|
+
const SNAP_BACK_TRANSITION = "transform 200ms ease-out";
|
|
9
|
+
/* Note Drag the grabber to translate the sheet 1:1 with the finger; on release,
|
|
10
|
+
dismiss past the threshold or snap back.*/
|
|
11
|
+
const useDragToClose = (setIsOpen) => {
|
|
12
|
+
const sheetRef = React.useRef(null);
|
|
13
|
+
const dragStartY = React.useRef(null);
|
|
14
|
+
const setOffset = (px, animate) => {
|
|
15
|
+
const sheet = sheetRef.current;
|
|
16
|
+
if (!sheet)
|
|
17
|
+
return;
|
|
18
|
+
// Note: No transition during drag for 1:1 finger tracking; animate on snap-back.
|
|
19
|
+
sheet.style.transition = animate ? SNAP_BACK_TRANSITION : "none";
|
|
20
|
+
sheet.style.transform = `translateY(${px}px)`;
|
|
21
|
+
};
|
|
22
|
+
const onPointerDown = (event) => {
|
|
23
|
+
dragStartY.current = event.clientY;
|
|
24
|
+
event.currentTarget.setPointerCapture(event.pointerId);
|
|
25
|
+
};
|
|
26
|
+
const onPointerMove = (event) => {
|
|
27
|
+
if (dragStartY.current === null)
|
|
28
|
+
return;
|
|
29
|
+
// Note: Only follow downward drags; clamp upward pulls to 0.
|
|
30
|
+
setOffset(Math.max(0, event.clientY - dragStartY.current), false);
|
|
31
|
+
};
|
|
32
|
+
const onPointerUp = (event) => {
|
|
33
|
+
if (dragStartY.current === null)
|
|
34
|
+
return;
|
|
35
|
+
const draggedDown = event.clientY - dragStartY.current;
|
|
36
|
+
dragStartY.current = null;
|
|
37
|
+
if (draggedDown >= DISMISS_THRESHOLD_PX) {
|
|
38
|
+
setIsOpen(false);
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
setOffset(0, true);
|
|
42
|
+
};
|
|
43
|
+
return {
|
|
44
|
+
grabberProps: {
|
|
45
|
+
onPointerDown,
|
|
46
|
+
onPointerMove,
|
|
47
|
+
onPointerUp,
|
|
48
|
+
// Note: required to prevents the browser from interpreting the drag as a scroll.
|
|
49
|
+
style: { touchAction: "none" },
|
|
50
|
+
},
|
|
51
|
+
sheetRef,
|
|
52
|
+
};
|
|
53
|
+
};
|
|
54
|
+
|
|
55
|
+
exports.useDragToClose = useDragToClose;
|
|
56
|
+
//# sourceMappingURL=useDragToClose.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDragToClose.js","sources":["../../../src/customHooks/useDragToClose.tsx"],"sourcesContent":[null],"names":["useRef"],"mappings":";;;;AAQA;AACuE;AACvE,MAAM,oBAAoB,GAAG,GAAG;AAChC,MAAM,oBAAoB,GAAG,0BAA0B;AAYvD;AAC4C;AACrC,MAAM,cAAc,GAAG,CAC5B,SAA4C,KAC5B;AAChB,IAAA,MAAM,QAAQ,GAAGA,YAAM,CAAiB,IAAI,CAAC;AAC7C,IAAA,MAAM,UAAU,GAAGA,YAAM,CAAgB,IAAI,CAAC;AAE9C,IAAA,MAAM,SAAS,GAAG,CAAC,EAAU,EAAE,OAAgB,KAAU;AACvD,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;AAC9B,QAAA,IAAI,CAAC,KAAK;YAAE;;AAEZ,QAAA,KAAK,CAAC,KAAK,CAAC,UAAU,GAAG,OAAO,GAAG,oBAAoB,GAAG,MAAM;QAChE,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,WAAA,EAAc,EAAE,KAAK;AAC/C,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,KAAmC,KAAU;AAClE,QAAA,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO;QAClC,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC;AACxD,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,KAAmC,KAAU;AAClE,QAAA,IAAI,UAAU,CAAC,OAAO,KAAK,IAAI;YAAE;;AAEjC,QAAA,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC;AACnE,IAAA,CAAC;AAED,IAAA,MAAM,WAAW,GAAG,CAAC,KAAmC,KAAU;AAChE,QAAA,IAAI,UAAU,CAAC,OAAO,KAAK,IAAI;YAAE;QACjC,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO;AACtD,QAAA,UAAU,CAAC,OAAO,GAAG,IAAI;AACzB,QAAA,IAAI,WAAW,IAAI,oBAAoB,EAAE;YACvC,SAAS,CAAC,KAAK,CAAC;YAChB;QACF;AACA,QAAA,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC;AACpB,IAAA,CAAC;IAED,OAAO;AACL,QAAA,YAAY,EAAE;YACZ,aAAa;YACb,aAAa;YACb,WAAW;;AAEX,YAAA,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE;AAC/B,SAAA;QACD,QAAQ;KACT;AACH;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
var css_248z = ".BottomSheet-module_contentWrap__ffurp {\n align-self: flex-end;\n width: 100%;\n background: var(--page-color-background-white);\n border-radius: 16px 16px 0 0;\n display: flex;\n flex-direction: column;\n height: auto;\n max-height: calc(100% - 64px);\n animation: BottomSheet-module_slideUp__lehy7 0.3s ease;\n}\n\n.BottomSheet-module_largeVariant__9LYsH {\n height: calc(100% - 64px);\n}\n\n.BottomSheet-module_smallVariant__9hVmR {\n height: auto;\n}\n\n@keyframes BottomSheet-module_slideUp__lehy7 {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n\n.BottomSheet-module_contentBody__Ku11- {\n flex: 1 1 auto;\n overflow-y: auto;\n min-height: 0;\n padding: 0 0 18px;\n}\n\n.BottomSheet-module_contentHeader__MrGrx {\n display: flex;\n align-items: center;\n}\n\n.BottomSheet-module_posLeft__7OLLr {\n padding: 16px 20px;\n flex: 1 0 0;\n}\n\n.BottomSheet-module_posRight__TCy-f {\n display: flex;\n width: 56px;\n padding: 16px;\n align-items: center;\n}\n\n.BottomSheet-module_grabber__NiEaj {\n flex: 0 0 auto;\n width: 36px;\n height: 4px;\n margin:
|
|
1
|
+
var css_248z = ".BottomSheet-module_contentWrap__ffurp {\n align-self: flex-end;\n width: 100%;\n background: var(--page-color-background-white);\n border-radius: 16px 16px 0 0;\n display: flex;\n flex-direction: column;\n height: auto;\n max-height: calc(100% - 64px);\n animation: BottomSheet-module_slideUp__lehy7 0.3s ease;\n}\n\n.BottomSheet-module_largeVariant__9LYsH {\n height: calc(100% - 64px);\n}\n\n.BottomSheet-module_smallVariant__9hVmR {\n height: auto;\n}\n\n@keyframes BottomSheet-module_slideUp__lehy7 {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n}\n\n.BottomSheet-module_contentBody__Ku11- {\n flex: 1 1 auto;\n overflow-y: auto;\n min-height: 0;\n padding: 0 0 18px;\n}\n\n.BottomSheet-module_contentHeader__MrGrx {\n display: flex;\n align-items: center;\n}\n\n.BottomSheet-module_posLeft__7OLLr {\n padding: 16px 20px;\n flex: 1 0 0;\n}\n\n.BottomSheet-module_posRight__TCy-f {\n display: flex;\n width: 56px;\n padding: 16px;\n align-items: center;\n}\n\n.BottomSheet-module_grabber__NiEaj {\n flex: 0 0 auto;\n box-sizing: content-box;\n width: 36px;\n height: 4px;\n margin: 0 auto;\n padding: 8px;\n border-radius: 8px;\n background: var(--icon-tertiary);\n background-clip: content-box;\n cursor: grab;\n touch-action: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n .BottomSheet-module_contentWrap__ffurp {\n animation: none;\n }\n}\n";
|
|
2
2
|
var styles = {"contentWrap":"BottomSheet-module_contentWrap__ffurp","slideUp":"BottomSheet-module_slideUp__lehy7","largeVariant":"BottomSheet-module_largeVariant__9LYsH","smallVariant":"BottomSheet-module_smallVariant__9hVmR","contentBody":"BottomSheet-module_contentBody__Ku11-","contentHeader":"BottomSheet-module_contentHeader__MrGrx","posLeft":"BottomSheet-module_posLeft__7OLLr","posRight":"BottomSheet-module_posRight__TCy-f","grabber":"BottomSheet-module_grabber__NiEaj"};
|
|
3
3
|
function styleInject(css, options) {
|
|
4
4
|
if (typeof document === 'undefined') return;
|
|
@@ -1,12 +1,14 @@
|
|
|
1
1
|
import { jsx, jsxs } from 'react/jsx-runtime';
|
|
2
2
|
import { CloseIcon } from '@egov3/graphics/General/Close';
|
|
3
|
+
import { useDragToClose } from '../../customHooks/useDragToClose.js';
|
|
3
4
|
import { joinClasses } from '../../utils/joinClasses.js';
|
|
4
5
|
import { Overlay } from '../Overlay/index.js';
|
|
5
6
|
import { Typography } from '../Typography/index.js';
|
|
6
7
|
import styles from './BottomSheet.module.css.js';
|
|
7
8
|
|
|
8
9
|
const BottomSheet = ({ children, title, setIsOpen, variant, }) => {
|
|
9
|
-
|
|
10
|
+
const { grabberProps, sheetRef } = useDragToClose(setIsOpen);
|
|
11
|
+
return (jsx(Overlay, { children: jsxs("div", { className: joinClasses(styles.contentWrap, styles[`${variant}Variant`]), "data-testid": "BottomSheet_WRAPPER", ref: sheetRef, children: [jsx("div", { className: styles.grabber, "data-testid": "BottomSheet_GRABBER", ...grabberProps }), jsxs("div", { className: styles.contentHeader, "data-testid": "BottomSheet_HEADER", children: [jsx(Typography, { className: styles.posLeft, "data-testid": "BottomSheet_TITLE", fontClass: "subtitles2", tag: "h3", children: title }), jsx("button", { className: styles.posRight, "data-testid": "BottomSheetHeaderBtn_CLOSE", onClick: () => {
|
|
10
12
|
setIsOpen(false);
|
|
11
13
|
}, type: "button", children: jsx(CloseIcon, { "data-testid": "BottomSheetClose_ICON", height: 24, width: 24 }) })] }), jsx("div", { className: styles.contentBody, "data-testid": "BottomSheet_BODY", children: children })] }) }));
|
|
12
14
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/BottomSheet/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/baseComponents/BottomSheet/index.tsx"],"sourcesContent":[null],"names":["_jsx","_jsxs"],"mappings":";;;;;;;;AAgBO,MAAM,WAAW,GAAG,CAAC,EAC1B,QAAQ,EACR,KAAK,EACL,SAAS,EACT,OAAO,GACW,KAAqB;IACvC,MAAM,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,cAAc,CAAC,SAAS,CAAC;AAE5D,IAAA,QACEA,GAAA,CAAC,OAAO,EAAA,EAAA,QAAA,EACNC,IAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,WAAW,CAAC,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA,EAAG,OAAO,CAAA,OAAA,CAAS,CAAC,CAAC,EAAA,aAAA,EAC3D,qBAAqB,EACjC,GAAG,EAAE,QAAQ,EAAA,QAAA,EAAA,CAEbD,aACE,SAAS,EAAE,MAAM,CAAC,OAAO,EAAA,aAAA,EACb,qBAAqB,KAC7B,YAAY,EAAA,CAChB,EACFC,IAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,aAAa,EAAA,aAAA,EAAc,oBAAoB,EAAA,QAAA,EAAA,CACpED,IAAC,UAAU,EAAA,EACT,SAAS,EAAE,MAAM,CAAC,OAAO,iBACb,mBAAmB,EAC/B,SAAS,EAAC,YAAY,EACtB,GAAG,EAAC,IAAI,EAAA,QAAA,EAEP,KAAK,EAAA,CACK,EACbA,gBACE,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAA,aAAA,EACd,4BAA4B,EACxC,OAAO,EAAE,MAAK;gCACZ,SAAS,CAAC,KAAK,CAAC;AAClB,4BAAA,CAAC,EACD,IAAI,EAAC,QAAQ,YAEbA,GAAA,CAAC,SAAS,EAAA,EAAA,aAAA,EACI,uBAAuB,EACnC,MAAM,EAAE,EAAE,EACV,KAAK,EAAE,EAAE,EAAA,CACT,EAAA,CACK,IACL,EAENA,GAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAE,MAAM,CAAC,WAAW,EAAA,aAAA,EAAc,kBAAkB,YAC/D,QAAQ,EAAA,CACL,CAAA,EAAA,CACF,EAAA,CACE;AAEd;;;;"}
|
|
@@ -6,13 +6,13 @@ import { CloseIcon } from '@egov3/graphics/General/Close';
|
|
|
6
6
|
import '../../../styles/colors.css.js';
|
|
7
7
|
import { joinClasses } from '../../../utils/joinClasses.js';
|
|
8
8
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
9
|
+
import 'react';
|
|
9
10
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
10
11
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
11
12
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
12
13
|
import '../../../styles/typography.module.css.js';
|
|
13
14
|
import '../../../baseComponents/Button/button.module.css.js';
|
|
14
15
|
import '../../../baseComponents/InputField/index.js';
|
|
15
|
-
import 'react';
|
|
16
16
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
17
17
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
18
18
|
import '../../../baseComponents/Loader/Loader.module.css.js';
|
|
@@ -2,13 +2,13 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import '../../../styles/colors.css.js';
|
|
3
3
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
4
4
|
import '@egov3/graphics/General/Close';
|
|
5
|
+
import 'react';
|
|
5
6
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
6
7
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
7
8
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
8
9
|
import '../../../styles/typography.module.css.js';
|
|
9
10
|
import '../../../baseComponents/Button/button.module.css.js';
|
|
10
11
|
import '../../../baseComponents/InputField/index.js';
|
|
11
|
-
import 'react';
|
|
12
12
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
13
13
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
14
14
|
import '../../../baseComponents/Loader/Loader.module.css.js';
|
|
@@ -5,12 +5,12 @@ import { VerificationIllustration } from '@egov3/graphics/Illustrations/Verifica
|
|
|
5
5
|
import { EgovIcon } from '@egov3/graphics/Logo/Egov';
|
|
6
6
|
import '../../styles/colors.css.js';
|
|
7
7
|
import '../../baseComponents/Accordion/Accordion.module.css.js';
|
|
8
|
+
import 'react';
|
|
8
9
|
import '../../baseComponents/Overlay/Overlay.module.css.js';
|
|
9
10
|
import { Typography } from '../../baseComponents/Typography/index.js';
|
|
10
11
|
import '../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
11
12
|
import { Button } from '../../baseComponents/Button/index.js';
|
|
12
13
|
import '../../baseComponents/InputField/index.js';
|
|
13
|
-
import 'react';
|
|
14
14
|
import '../../styles/typography.module.css.js';
|
|
15
15
|
import '../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
16
16
|
import '../../baseComponents/Label/Label.module.css.js';
|
|
@@ -3,8 +3,8 @@ import parse from 'html-react-parser';
|
|
|
3
3
|
import '../../../styles/colors.css.js';
|
|
4
4
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
5
5
|
import '@egov3/graphics/General/Close';
|
|
6
|
-
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
7
6
|
import 'react';
|
|
7
|
+
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
8
8
|
import '../../../styles/typography.module.css.js';
|
|
9
9
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
10
10
|
import { Button } from '../../../baseComponents/Button/index.js';
|
|
@@ -3,12 +3,12 @@ import { RegistrationSuccessIllustration } from '@egov3/graphics/Illustrations/R
|
|
|
3
3
|
import '../../../styles/colors.css.js';
|
|
4
4
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
5
5
|
import '@egov3/graphics/General/Close';
|
|
6
|
+
import 'react';
|
|
6
7
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
7
8
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
8
9
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
9
10
|
import { Button } from '../../../baseComponents/Button/index.js';
|
|
10
11
|
import '../../../baseComponents/InputField/index.js';
|
|
11
|
-
import 'react';
|
|
12
12
|
import '../../../styles/typography.module.css.js';
|
|
13
13
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
14
14
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
@@ -3,13 +3,13 @@ import '../../../styles/colors.css.js';
|
|
|
3
3
|
import { joinClasses } from '../../../utils/joinClasses.js';
|
|
4
4
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
5
5
|
import '@egov3/graphics/General/Close';
|
|
6
|
+
import 'react';
|
|
6
7
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
7
8
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
8
9
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
9
10
|
import '../../../styles/typography.module.css.js';
|
|
10
11
|
import '../../../baseComponents/Button/button.module.css.js';
|
|
11
12
|
import '../../../baseComponents/InputField/index.js';
|
|
12
|
-
import 'react';
|
|
13
13
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
14
14
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
15
15
|
import '../../../baseComponents/Loader/Loader.module.css.js';
|
|
@@ -4,13 +4,13 @@ import { ServicesOutlineIcon } from '@egov3/graphics/General/ServicesOutline';
|
|
|
4
4
|
import '../../../styles/colors.css.js';
|
|
5
5
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
6
6
|
import '@egov3/graphics/General/Close';
|
|
7
|
+
import 'react';
|
|
7
8
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
8
9
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
9
10
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
10
11
|
import '../../../styles/typography.module.css.js';
|
|
11
12
|
import '../../../baseComponents/Button/button.module.css.js';
|
|
12
13
|
import '../../../baseComponents/InputField/index.js';
|
|
13
|
-
import 'react';
|
|
14
14
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
15
15
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
16
16
|
import '../../../baseComponents/Loader/Loader.module.css.js';
|
|
@@ -3,13 +3,13 @@ import '../../../styles/colors.css.js';
|
|
|
3
3
|
import { joinClasses } from '../../../utils/joinClasses.js';
|
|
4
4
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
5
5
|
import '@egov3/graphics/General/Close';
|
|
6
|
+
import 'react';
|
|
6
7
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
7
8
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
8
9
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
9
10
|
import '../../../styles/typography.module.css.js';
|
|
10
11
|
import '../../../baseComponents/Button/button.module.css.js';
|
|
11
12
|
import '../../../baseComponents/InputField/index.js';
|
|
12
|
-
import 'react';
|
|
13
13
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
14
14
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
15
15
|
import '../../../baseComponents/Loader/Loader.module.css.js';
|
|
@@ -7,12 +7,12 @@ import '../../../styles/colors.css.js';
|
|
|
7
7
|
import { joinClasses } from '../../../utils/joinClasses.js';
|
|
8
8
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
9
9
|
import '@egov3/graphics/General/Close';
|
|
10
|
+
import 'react';
|
|
10
11
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
11
12
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
12
13
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
13
14
|
import { Button } from '../../../baseComponents/Button/index.js';
|
|
14
15
|
import '../../../baseComponents/InputField/index.js';
|
|
15
|
-
import 'react';
|
|
16
16
|
import '../../../styles/typography.module.css.js';
|
|
17
17
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
18
18
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
@@ -5,13 +5,13 @@ import { SearchIcon } from '@egov3/graphics/General/Search';
|
|
|
5
5
|
import '../../../styles/colors.css.js';
|
|
6
6
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
7
7
|
import '@egov3/graphics/General/Close';
|
|
8
|
+
import 'react';
|
|
8
9
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
9
10
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
10
11
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
11
12
|
import '../../../styles/typography.module.css.js';
|
|
12
13
|
import '../../../baseComponents/Button/button.module.css.js';
|
|
13
14
|
import '../../../baseComponents/InputField/index.js';
|
|
14
|
-
import 'react';
|
|
15
15
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
16
16
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
17
17
|
import '../../../baseComponents/Loader/Loader.module.css.js';
|
|
@@ -2,8 +2,8 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import '../../../styles/colors.css.js';
|
|
3
3
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
4
4
|
import '@egov3/graphics/General/Close';
|
|
5
|
-
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
6
5
|
import 'react';
|
|
6
|
+
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
7
7
|
import '../../../styles/typography.module.css.js';
|
|
8
8
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
9
9
|
import { Button } from '../../../baseComponents/Button/index.js';
|
|
@@ -7,13 +7,13 @@ import '../../../styles/colors.css.js';
|
|
|
7
7
|
import { joinClasses } from '../../../utils/joinClasses.js';
|
|
8
8
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
9
9
|
import '@egov3/graphics/General/Close';
|
|
10
|
+
import 'react';
|
|
10
11
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
11
12
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
12
13
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
13
14
|
import '../../../styles/typography.module.css.js';
|
|
14
15
|
import '../../../baseComponents/Button/button.module.css.js';
|
|
15
16
|
import '../../../baseComponents/InputField/index.js';
|
|
16
|
-
import 'react';
|
|
17
17
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
18
18
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
19
19
|
import '../../../baseComponents/Loader/Loader.module.css.js';
|
|
@@ -2,13 +2,13 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import '../../../styles/colors.css.js';
|
|
3
3
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
4
4
|
import '@egov3/graphics/General/Close';
|
|
5
|
+
import 'react';
|
|
5
6
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
6
7
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
7
8
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
8
9
|
import '../../../styles/typography.module.css.js';
|
|
9
10
|
import '../../../baseComponents/Button/button.module.css.js';
|
|
10
11
|
import '../../../baseComponents/InputField/index.js';
|
|
11
|
-
import 'react';
|
|
12
12
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
13
13
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
14
14
|
import '../../../baseComponents/Loader/Loader.module.css.js';
|
|
@@ -2,13 +2,13 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import '../../../styles/colors.css.js';
|
|
3
3
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
4
4
|
import '@egov3/graphics/General/Close';
|
|
5
|
+
import 'react';
|
|
5
6
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
6
7
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
7
8
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
8
9
|
import '../../../styles/typography.module.css.js';
|
|
9
10
|
import '../../../baseComponents/Button/button.module.css.js';
|
|
10
11
|
import '../../../baseComponents/InputField/index.js';
|
|
11
|
-
import 'react';
|
|
12
12
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
13
13
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
14
14
|
import '../../../baseComponents/Loader/Loader.module.css.js';
|
|
@@ -2,13 +2,13 @@ import { jsx, jsxs } from 'react/jsx-runtime';
|
|
|
2
2
|
import '../../../styles/colors.css.js';
|
|
3
3
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
4
4
|
import '@egov3/graphics/General/Close';
|
|
5
|
+
import 'react';
|
|
5
6
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
6
7
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
7
8
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
8
9
|
import '../../../styles/typography.module.css.js';
|
|
9
10
|
import '../../../baseComponents/Button/button.module.css.js';
|
|
10
11
|
import '../../../baseComponents/InputField/index.js';
|
|
11
|
-
import 'react';
|
|
12
12
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
13
13
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
14
14
|
import '../../../baseComponents/Loader/Loader.module.css.js';
|
|
@@ -2,13 +2,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import '../../../styles/colors.css.js';
|
|
3
3
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
4
4
|
import '@egov3/graphics/General/Close';
|
|
5
|
+
import 'react';
|
|
5
6
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
6
7
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
7
8
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
8
9
|
import '../../../styles/typography.module.css.js';
|
|
9
10
|
import '../../../baseComponents/Button/button.module.css.js';
|
|
10
11
|
import '../../../baseComponents/InputField/index.js';
|
|
11
|
-
import 'react';
|
|
12
12
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
13
13
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
14
14
|
import '../../../baseComponents/Loader/Loader.module.css.js';
|
|
@@ -2,13 +2,13 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import '../../../styles/colors.css.js';
|
|
3
3
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
4
4
|
import '@egov3/graphics/General/Close';
|
|
5
|
+
import 'react';
|
|
5
6
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
6
7
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
7
8
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
8
9
|
import '../../../styles/typography.module.css.js';
|
|
9
10
|
import '../../../baseComponents/Button/button.module.css.js';
|
|
10
11
|
import '../../../baseComponents/InputField/index.js';
|
|
11
|
-
import 'react';
|
|
12
12
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
13
13
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
14
14
|
import '../../../baseComponents/Loader/Loader.module.css.js';
|
|
@@ -2,12 +2,12 @@ import { jsxs, jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import '../../../styles/colors.css.js';
|
|
3
3
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
4
4
|
import '@egov3/graphics/General/Close';
|
|
5
|
+
import 'react';
|
|
5
6
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
6
7
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
7
8
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
8
9
|
import { Button } from '../../../baseComponents/Button/index.js';
|
|
9
10
|
import '../../../baseComponents/InputField/index.js';
|
|
10
|
-
import 'react';
|
|
11
11
|
import '../../../styles/typography.module.css.js';
|
|
12
12
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
13
13
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
@@ -4,13 +4,13 @@ import { KaspiIcon } from '@egov3/graphics/Logo/Kaspi';
|
|
|
4
4
|
import '../../../styles/colors.css.js';
|
|
5
5
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
6
6
|
import '@egov3/graphics/General/Close';
|
|
7
|
+
import 'react';
|
|
7
8
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
8
9
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
9
10
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
10
11
|
import '../../../styles/typography.module.css.js';
|
|
11
12
|
import '../../../baseComponents/Button/button.module.css.js';
|
|
12
13
|
import '../../../baseComponents/InputField/index.js';
|
|
13
|
-
import 'react';
|
|
14
14
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
15
15
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
16
16
|
import '../../../baseComponents/Loader/Loader.module.css.js';
|
|
@@ -7,12 +7,12 @@ import { SmileIcon } from '@egov3/graphics/Emoji/Smile';
|
|
|
7
7
|
import { CloseIcon } from '@egov3/graphics/General/Close';
|
|
8
8
|
import '../../../styles/colors.css.js';
|
|
9
9
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
10
|
+
import 'react';
|
|
10
11
|
import { Overlay } from '../../../baseComponents/Overlay/index.js';
|
|
11
12
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
12
13
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
13
14
|
import { Button } from '../../../baseComponents/Button/index.js';
|
|
14
15
|
import '../../../baseComponents/InputField/index.js';
|
|
15
|
-
import 'react';
|
|
16
16
|
import '../../../styles/typography.module.css.js';
|
|
17
17
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
18
18
|
import { Label } from '../../../baseComponents/Label/index.js';
|
|
@@ -7,13 +7,13 @@ import '../../../styles/colors.css.js';
|
|
|
7
7
|
import { joinClasses } from '../../../utils/joinClasses.js';
|
|
8
8
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
9
9
|
import '@egov3/graphics/General/Close';
|
|
10
|
+
import 'react';
|
|
10
11
|
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
11
12
|
import { Typography } from '../../../baseComponents/Typography/index.js';
|
|
12
13
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
13
14
|
import '../../../styles/typography.module.css.js';
|
|
14
15
|
import '../../../baseComponents/Button/button.module.css.js';
|
|
15
16
|
import '../../../baseComponents/InputField/index.js';
|
|
16
|
-
import 'react';
|
|
17
17
|
import '../../../baseComponents/InputFieldGroup/InputFieldGroup.module.css.js';
|
|
18
18
|
import '../../../baseComponents/Label/Label.module.css.js';
|
|
19
19
|
import '../../../baseComponents/Loader/Loader.module.css.js';
|
|
@@ -2,8 +2,8 @@ import { jsx } from 'react/jsx-runtime';
|
|
|
2
2
|
import '../../../styles/colors.css.js';
|
|
3
3
|
import '../../../baseComponents/Accordion/Accordion.module.css.js';
|
|
4
4
|
import '@egov3/graphics/General/Close';
|
|
5
|
-
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
6
5
|
import 'react';
|
|
6
|
+
import '../../../baseComponents/Overlay/Overlay.module.css.js';
|
|
7
7
|
import '../../../styles/typography.module.css.js';
|
|
8
8
|
import '../../../baseComponents/BottomSheet/BottomSheet.module.css.js';
|
|
9
9
|
import { Button } from '../../../baseComponents/Button/index.js';
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
import { useRef } from 'react';
|
|
2
|
+
|
|
3
|
+
/* Note: Larger-than-typical dismiss threshold (~100px vs the usual 50-80px) to avoid
|
|
4
|
+
accidental closes for elderly users who drag slowly and imprecisely */
|
|
5
|
+
const DISMISS_THRESHOLD_PX = 100;
|
|
6
|
+
const SNAP_BACK_TRANSITION = "transform 200ms ease-out";
|
|
7
|
+
/* Note Drag the grabber to translate the sheet 1:1 with the finger; on release,
|
|
8
|
+
dismiss past the threshold or snap back.*/
|
|
9
|
+
const useDragToClose = (setIsOpen) => {
|
|
10
|
+
const sheetRef = useRef(null);
|
|
11
|
+
const dragStartY = useRef(null);
|
|
12
|
+
const setOffset = (px, animate) => {
|
|
13
|
+
const sheet = sheetRef.current;
|
|
14
|
+
if (!sheet)
|
|
15
|
+
return;
|
|
16
|
+
// Note: No transition during drag for 1:1 finger tracking; animate on snap-back.
|
|
17
|
+
sheet.style.transition = animate ? SNAP_BACK_TRANSITION : "none";
|
|
18
|
+
sheet.style.transform = `translateY(${px}px)`;
|
|
19
|
+
};
|
|
20
|
+
const onPointerDown = (event) => {
|
|
21
|
+
dragStartY.current = event.clientY;
|
|
22
|
+
event.currentTarget.setPointerCapture(event.pointerId);
|
|
23
|
+
};
|
|
24
|
+
const onPointerMove = (event) => {
|
|
25
|
+
if (dragStartY.current === null)
|
|
26
|
+
return;
|
|
27
|
+
// Note: Only follow downward drags; clamp upward pulls to 0.
|
|
28
|
+
setOffset(Math.max(0, event.clientY - dragStartY.current), false);
|
|
29
|
+
};
|
|
30
|
+
const onPointerUp = (event) => {
|
|
31
|
+
if (dragStartY.current === null)
|
|
32
|
+
return;
|
|
33
|
+
const draggedDown = event.clientY - dragStartY.current;
|
|
34
|
+
dragStartY.current = null;
|
|
35
|
+
if (draggedDown >= DISMISS_THRESHOLD_PX) {
|
|
36
|
+
setIsOpen(false);
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
setOffset(0, true);
|
|
40
|
+
};
|
|
41
|
+
return {
|
|
42
|
+
grabberProps: {
|
|
43
|
+
onPointerDown,
|
|
44
|
+
onPointerMove,
|
|
45
|
+
onPointerUp,
|
|
46
|
+
// Note: required to prevents the browser from interpreting the drag as a scroll.
|
|
47
|
+
style: { touchAction: "none" },
|
|
48
|
+
},
|
|
49
|
+
sheetRef,
|
|
50
|
+
};
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
export { useDragToClose };
|
|
54
|
+
//# sourceMappingURL=useDragToClose.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDragToClose.js","sources":["../../../src/customHooks/useDragToClose.tsx"],"sourcesContent":[null],"names":[],"mappings":";;AAQA;AACuE;AACvE,MAAM,oBAAoB,GAAG,GAAG;AAChC,MAAM,oBAAoB,GAAG,0BAA0B;AAYvD;AAC4C;AACrC,MAAM,cAAc,GAAG,CAC5B,SAA4C,KAC5B;AAChB,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC;AAC7C,IAAA,MAAM,UAAU,GAAG,MAAM,CAAgB,IAAI,CAAC;AAE9C,IAAA,MAAM,SAAS,GAAG,CAAC,EAAU,EAAE,OAAgB,KAAU;AACvD,QAAA,MAAM,KAAK,GAAG,QAAQ,CAAC,OAAO;AAC9B,QAAA,IAAI,CAAC,KAAK;YAAE;;AAEZ,QAAA,KAAK,CAAC,KAAK,CAAC,UAAU,GAAG,OAAO,GAAG,oBAAoB,GAAG,MAAM;QAChE,KAAK,CAAC,KAAK,CAAC,SAAS,GAAG,CAAA,WAAA,EAAc,EAAE,KAAK;AAC/C,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,KAAmC,KAAU;AAClE,QAAA,UAAU,CAAC,OAAO,GAAG,KAAK,CAAC,OAAO;QAClC,KAAK,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,CAAC,SAAS,CAAC;AACxD,IAAA,CAAC;AAED,IAAA,MAAM,aAAa,GAAG,CAAC,KAAmC,KAAU;AAClE,QAAA,IAAI,UAAU,CAAC,OAAO,KAAK,IAAI;YAAE;;AAEjC,QAAA,SAAS,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO,CAAC,EAAE,KAAK,CAAC;AACnE,IAAA,CAAC;AAED,IAAA,MAAM,WAAW,GAAG,CAAC,KAAmC,KAAU;AAChE,QAAA,IAAI,UAAU,CAAC,OAAO,KAAK,IAAI;YAAE;QACjC,MAAM,WAAW,GAAG,KAAK,CAAC,OAAO,GAAG,UAAU,CAAC,OAAO;AACtD,QAAA,UAAU,CAAC,OAAO,GAAG,IAAI;AACzB,QAAA,IAAI,WAAW,IAAI,oBAAoB,EAAE;YACvC,SAAS,CAAC,KAAK,CAAC;YAChB;QACF;AACA,QAAA,SAAS,CAAC,CAAC,EAAE,IAAI,CAAC;AACpB,IAAA,CAAC;IAED,OAAO;AACL,QAAA,YAAY,EAAE;YACZ,aAAa;YACb,aAAa;YACb,WAAW;;AAEX,YAAA,KAAK,EAAE,EAAE,WAAW,EAAE,MAAM,EAAE;AAC/B,SAAA;QACD,QAAQ;KACT;AACH;;;;"}
|