reso-ui 3.1.0 → 3.2.0
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/components/Drawer/Drawer.js +6 -3
- package/dist/cjs/components/Drawer/Drawer.js.map +1 -1
- package/dist/esm/components/Drawer/Drawer.d.ts +4 -2
- package/dist/esm/components/Drawer/Drawer.js +6 -3
- package/dist/esm/components/Drawer/Drawer.js.map +1 -1
- package/dist/src/library/components/Dialog/stories/Dialog.stories.d.ts +1 -1
- package/dist/src/library/components/Drawer/Drawer.d.ts +4 -2
- package/dist/src/library/components/Drawer/stories/Drawer.stories.d.ts +1 -0
- package/package.json +1 -1
|
@@ -5,7 +5,8 @@ var styles = require('../../utils/styles.js');
|
|
|
5
5
|
var useDisableBodyScroll = require('../../hooks/useDisableBodyScroll.js');
|
|
6
6
|
var DrawerContent = require('./DrawerContent.js');
|
|
7
7
|
|
|
8
|
-
const
|
|
8
|
+
const EXIT_TRANSITION_DURATION = 200;
|
|
9
|
+
const Drawer = ({ children, isOpen = false, onClose, onCloseComplete, title = "", layer = 1, width = 300, side = "right", fullWidth = false, closeOnBackdropClick = false, titleClassName, titleStyles = {}, closeButtonClassName, closeButtonStyles = {}, contentClassName, contentStyles = {}, rootClassName, rootStyles = {}, ...paddingProps }) => {
|
|
9
10
|
useDisableBodyScroll.useDisableBodyScroll(isOpen);
|
|
10
11
|
const [_isOpen, _setIsOpen] = React.useState(false);
|
|
11
12
|
React.useEffect(() => {
|
|
@@ -13,8 +14,10 @@ const Drawer = ({ children, isOpen = false, onClose, title = "", layer = 1, widt
|
|
|
13
14
|
_setIsOpen(true);
|
|
14
15
|
}
|
|
15
16
|
else {
|
|
16
|
-
|
|
17
|
-
|
|
17
|
+
const timeout = setTimeout(() => {
|
|
18
|
+
_setIsOpen(false);
|
|
19
|
+
onCloseComplete === null || onCloseComplete === void 0 ? void 0 : onCloseComplete();
|
|
20
|
+
}, EXIT_TRANSITION_DURATION);
|
|
18
21
|
return () => clearTimeout(timeout);
|
|
19
22
|
}
|
|
20
23
|
}, [isOpen]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../../../../src/library/components/Drawer/Drawer.tsx"],"sourcesContent":[null],"names":["useDisableBodyScroll","useState","useEffect","createComponentStyles","createLayoutStyles","DrawerContent"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../../../../src/library/components/Drawer/Drawer.tsx"],"sourcesContent":[null],"names":["useDisableBodyScroll","useState","useEffect","createComponentStyles","createLayoutStyles","DrawerContent"],"mappings":";;;;;;;AAeA,MAAM,wBAAwB,GAAG,GAAG;AAE7B,MAAM,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,MAAM,GAAG,KAAK,EACd,OAAO,EACP,eAAe,EACf,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,CAAC,EACT,KAAK,GAAG,GAAG,EACX,IAAI,GAAG,OAAO,EACd,SAAS,GAAG,KAAK,EACjB,oBAAoB,GAAG,KAAK,EAC5B,cAAc,EACd,WAAW,GAAG,EAAE,EAChB,oBAAoB,EACpB,iBAAiB,GAAG,EAAE,EACtB,gBAAgB,EAChB,aAAa,GAAG,EAAE,EAClB,aAAa,EACb,UAAU,GAAG,EAAE,EACf,GAAG,YAAY,EACH,KAAI;IAChBA,yCAAoB,CAAC,MAAM,CAAC;IAC5B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAGC,cAAQ,CAAC,KAAK,CAAC;IAE7CC,eAAS,CAAC,MAAK;QACb,IAAI,MAAM,EAAE;YACV,UAAU,CAAC,IAAI,CAAC;QAClB;aAAO;AACL,YAAA,MAAM,OAAO,GAAG,UAAU,CAAC,MAAK;gBAC9B,UAAU,CAAC,KAAK,CAAC;AACjB,gBAAA,eAAe,KAAA,IAAA,IAAf,eAAe,KAAA,MAAA,GAAA,MAAA,GAAf,eAAe,EAAI;YACrB,CAAC,EAAE,wBAAwB,CAAC;AAC5B,YAAA,OAAO,MAAM,YAAY,CAAC,OAAO,CAAC;QACpC;AACF,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AAEZ,IAAA,MAAM,eAAe,GAAGC,4BAAqB,CAC3CC,yBAAkB,CAAC;AACjB,QAAA,sBAAsB,EAAE,IAAI;AAC5B,QAAA,2CAA2C,EAAE,IAAI;;QAEjD,2BAA2B,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM;AACvD,KAAA,CAAC,CACH;AAED,IAAA,MAAM,cAAc,GAAG,KAAK,GAAG,EAAE;AAEjC,IAAA,MAAM,SAAS,GAAG,OAAO,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnD;;;;;;;;;;;;AAYG;IAEH,QACE,SAAS,EAAE,KACT,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE;AACL,YAAA,MAAM,EAAE,cAAc;YACtB,UAAU,EAAE,IAAI,KAAK,OAAO,GAAG,UAAU,GAAG,YAAY;AACzD,SAAA,EAAA,aAAA,EACW,iBAAiB,EAAA;AAE7B,QAAA,KAAA,CAAA,aAAA,CAACC,qBAAa,EAAA,EACZ,cAAc,EAAE,OAAO,EACvB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,oBAAoB,EAAE,oBAAoB,EAC1C,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,cAAc,EACrB,oBAAoB,EAAE,oBAAoB,EAC1C,iBAAiB,EAAE,iBAAiB,EAAA,GAChC,YAAY,EAAA,EAEf,QAAQ,CACK,CACZ,CACP;AAEL;;;;"}
|
|
@@ -2,5 +2,7 @@ import React from "react";
|
|
|
2
2
|
import "./styles/Drawer.layout.scss";
|
|
3
3
|
import "./styles/Drawer.theme.scss";
|
|
4
4
|
import { IDrawerContentProps } from "./DrawerContent";
|
|
5
|
-
export type DrawerProps = Omit<IDrawerContentProps, "internalIsOpen"
|
|
6
|
-
|
|
5
|
+
export type DrawerProps = Omit<IDrawerContentProps, "internalIsOpen"> & {
|
|
6
|
+
onCloseComplete?: () => void;
|
|
7
|
+
};
|
|
8
|
+
export declare const Drawer: ({ children, isOpen, onClose, onCloseComplete, title, layer, width, side, fullWidth, closeOnBackdropClick, titleClassName, titleStyles, closeButtonClassName, closeButtonStyles, contentClassName, contentStyles, rootClassName, rootStyles, ...paddingProps }: DrawerProps) => React.JSX.Element;
|
|
@@ -3,7 +3,8 @@ import { createComponentStyles, createLayoutStyles } from '../../utils/styles.js
|
|
|
3
3
|
import { useDisableBodyScroll } from '../../hooks/useDisableBodyScroll.js';
|
|
4
4
|
import DrawerContent from './DrawerContent.js';
|
|
5
5
|
|
|
6
|
-
const
|
|
6
|
+
const EXIT_TRANSITION_DURATION = 200;
|
|
7
|
+
const Drawer = ({ children, isOpen = false, onClose, onCloseComplete, title = "", layer = 1, width = 300, side = "right", fullWidth = false, closeOnBackdropClick = false, titleClassName, titleStyles = {}, closeButtonClassName, closeButtonStyles = {}, contentClassName, contentStyles = {}, rootClassName, rootStyles = {}, ...paddingProps }) => {
|
|
7
8
|
useDisableBodyScroll(isOpen);
|
|
8
9
|
const [_isOpen, _setIsOpen] = useState(false);
|
|
9
10
|
useEffect(() => {
|
|
@@ -11,8 +12,10 @@ const Drawer = ({ children, isOpen = false, onClose, title = "", layer = 1, widt
|
|
|
11
12
|
_setIsOpen(true);
|
|
12
13
|
}
|
|
13
14
|
else {
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
const timeout = setTimeout(() => {
|
|
16
|
+
_setIsOpen(false);
|
|
17
|
+
onCloseComplete === null || onCloseComplete === void 0 ? void 0 : onCloseComplete();
|
|
18
|
+
}, EXIT_TRANSITION_DURATION);
|
|
16
19
|
return () => clearTimeout(timeout);
|
|
17
20
|
}
|
|
18
21
|
}, [isOpen]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Drawer.js","sources":["../../../../src/library/components/Drawer/Drawer.tsx"],"sourcesContent":[null],"names":["React"],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"Drawer.js","sources":["../../../../src/library/components/Drawer/Drawer.tsx"],"sourcesContent":[null],"names":["React"],"mappings":";;;;;AAeA,MAAM,wBAAwB,GAAG,GAAG;AAE7B,MAAM,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,MAAM,GAAG,KAAK,EACd,OAAO,EACP,eAAe,EACf,KAAK,GAAG,EAAE,EACV,KAAK,GAAG,CAAC,EACT,KAAK,GAAG,GAAG,EACX,IAAI,GAAG,OAAO,EACd,SAAS,GAAG,KAAK,EACjB,oBAAoB,GAAG,KAAK,EAC5B,cAAc,EACd,WAAW,GAAG,EAAE,EAChB,oBAAoB,EACpB,iBAAiB,GAAG,EAAE,EACtB,gBAAgB,EAChB,aAAa,GAAG,EAAE,EAClB,aAAa,EACb,UAAU,GAAG,EAAE,EACf,GAAG,YAAY,EACH,KAAI;IAChB,oBAAoB,CAAC,MAAM,CAAC;IAC5B,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;IAE7C,SAAS,CAAC,MAAK;QACb,IAAI,MAAM,EAAE;YACV,UAAU,CAAC,IAAI,CAAC;QAClB;aAAO;AACL,YAAA,MAAM,OAAO,GAAG,UAAU,CAAC,MAAK;gBAC9B,UAAU,CAAC,KAAK,CAAC;AACjB,gBAAA,eAAe,KAAA,IAAA,IAAf,eAAe,KAAA,MAAA,GAAA,MAAA,GAAf,eAAe,EAAI;YACrB,CAAC,EAAE,wBAAwB,CAAC;AAC5B,YAAA,OAAO,MAAM,YAAY,CAAC,OAAO,CAAC;QACpC;AACF,IAAA,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;AAEZ,IAAA,MAAM,eAAe,GAAG,qBAAqB,CAC3C,kBAAkB,CAAC;AACjB,QAAA,sBAAsB,EAAE,IAAI;AAC5B,QAAA,2CAA2C,EAAE,IAAI;;QAEjD,2BAA2B,EAAE,MAAM,GAAG,OAAO,GAAG,MAAM;AACvD,KAAA,CAAC,CACH;AAED,IAAA,MAAM,cAAc,GAAG,KAAK,GAAG,EAAE;AAEjC,IAAA,MAAM,SAAS,GAAG,OAAO,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;AAEnD;;;;;;;;;;;;AAYG;IAEH,QACE,SAAS,EAAE,KACTA,cAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE;AACL,YAAA,MAAM,EAAE,cAAc;YACtB,UAAU,EAAE,IAAI,KAAK,OAAO,GAAG,UAAU,GAAG,YAAY;AACzD,SAAA,EAAA,aAAA,EACW,iBAAiB,EAAA;AAE7B,QAAAA,cAAA,CAAA,aAAA,CAAC,aAAa,EAAA,EACZ,cAAc,EAAE,OAAO,EACvB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,EACZ,SAAS,EAAE,SAAS,EACpB,oBAAoB,EAAE,oBAAoB,EAC1C,aAAa,EAAE,aAAa,EAC5B,UAAU,EAAE,UAAU,EACtB,cAAc,EAAE,cAAc,EAC9B,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,aAAa,EAAE,aAAa,EAC5B,KAAK,EAAE,cAAc,EACrB,oBAAoB,EAAE,oBAAoB,EAC1C,iBAAiB,EAAE,iBAAiB,EAAA,GAChC,YAAY,EAAA,EAEf,QAAQ,CACK,CACZ,CACP;AAEL;;;;"}
|
|
@@ -23,9 +23,9 @@ declare const _default: {
|
|
|
23
23
|
okButtonStyles?: React.CSSProperties;
|
|
24
24
|
rootClassName?: string;
|
|
25
25
|
rootStyles?: React.CSSProperties;
|
|
26
|
+
pa?: 0 | 2 | 1 | 3 | 5 | 4 | 6 | 7 | 8 | 9;
|
|
26
27
|
pv?: 0 | 2 | 1 | 3 | 5 | 4 | 6 | 7 | 8 | 9;
|
|
27
28
|
ph?: 0 | 2 | 1 | 3 | 5 | 4 | 6 | 7 | 8 | 9;
|
|
28
|
-
pa?: 0 | 2 | 1 | 3 | 5 | 4 | 6 | 7 | 8 | 9;
|
|
29
29
|
pt?: 0 | 2 | 1 | 3 | 5 | 4 | 6 | 7 | 8 | 9;
|
|
30
30
|
pb?: 0 | 2 | 1 | 3 | 5 | 4 | 6 | 7 | 8 | 9;
|
|
31
31
|
pr?: 0 | 2 | 1 | 3 | 5 | 4 | 6 | 7 | 8 | 9;
|
|
@@ -2,5 +2,7 @@ import React from "react";
|
|
|
2
2
|
import "./styles/Drawer.layout.scss";
|
|
3
3
|
import "./styles/Drawer.theme.scss";
|
|
4
4
|
import { IDrawerContentProps } from "./DrawerContent";
|
|
5
|
-
export type DrawerProps = Omit<IDrawerContentProps, "internalIsOpen"
|
|
6
|
-
|
|
5
|
+
export type DrawerProps = Omit<IDrawerContentProps, "internalIsOpen"> & {
|
|
6
|
+
onCloseComplete?: () => void;
|
|
7
|
+
};
|
|
8
|
+
export declare const Drawer: ({ children, isOpen, onClose, onCloseComplete, title, layer, width, side, fullWidth, closeOnBackdropClick, titleClassName, titleStyles, closeButtonClassName, closeButtonStyles, contentClassName, contentStyles, rootClassName, rootStyles, ...paddingProps }: DrawerProps) => React.JSX.Element;
|
|
@@ -7,4 +7,5 @@ export default meta;
|
|
|
7
7
|
export declare const Default: (props: any) => React.JSX.Element;
|
|
8
8
|
export declare const WithContainerClass: () => React.JSX.Element;
|
|
9
9
|
export declare const WithContainerStyles: () => React.JSX.Element;
|
|
10
|
+
export declare const WithOnCloseComplete: () => React.JSX.Element;
|
|
10
11
|
export declare const WithTitleClassAndStyle: () => React.JSX.Element;
|