@alfalab/core-components-drawer 4.0.2 → 4.1.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/Component.d.ts +20 -0
- package/Component.js +57 -32
- package/cssm/Component.d.ts +20 -0
- package/cssm/Component.js +56 -31
- package/cssm/index.js +1 -0
- package/cssm/index.module.css +20 -4
- package/esm/Component.d.ts +20 -0
- package/esm/Component.js +57 -32
- package/esm/index.css +35 -19
- package/esm/index.js +1 -0
- package/index.css +35 -19
- package/index.js +1 -0
- package/modern/Component.d.ts +20 -0
- package/modern/Component.js +59 -44
- package/modern/index.css +35 -19
- package/modern/index.js +1 -0
- package/package.json +3 -2
package/Component.d.ts
CHANGED
|
@@ -5,6 +5,16 @@ import { TransitionProps } from 'react-transition-group/Transition';
|
|
|
5
5
|
import { BaseModalProps, BaseModalContext } from "@alfalab/core-components-base-modal";
|
|
6
6
|
declare const ANIMATION_DURATION = 600;
|
|
7
7
|
type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
8
|
+
/**
|
|
9
|
+
* Край экрана, с которого может появиться Drawer.
|
|
10
|
+
* @default "right"
|
|
11
|
+
*/
|
|
12
|
+
placement?: 'left' | 'right';
|
|
13
|
+
/**
|
|
14
|
+
* Нужно ли использовать нативный скроллбар
|
|
15
|
+
* @default true
|
|
16
|
+
*/
|
|
17
|
+
nativeScrollbar?: boolean;
|
|
8
18
|
/**
|
|
9
19
|
* Пропсы для анимации контента (CSSTransition)
|
|
10
20
|
*/
|
|
@@ -12,6 +22,16 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
|
12
22
|
};
|
|
13
23
|
declare const DrawerContext: React.Context<BaseModalContext>;
|
|
14
24
|
declare const Drawer: React.ForwardRefExoticComponent<Pick<BaseModalProps, "children" | "className" | "open" | "onClose" | "dataTestId" | "Backdrop" | "backdropProps" | "disableAutoFocus" | "disableFocusLock" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableBackdropClick" | "disableBlockingScroll" | "keepMounted" | "contentClassName" | "wrapperClassName" | "scrollHandler" | "transitionProps" | "onBackdropClick" | "onEscapeKeyDown" | "onMount" | "onUnmount" | "zIndex" | "componentRef"> & {
|
|
25
|
+
/**
|
|
26
|
+
* Край экрана, с которого может появиться Drawer.
|
|
27
|
+
* @default "right"
|
|
28
|
+
*/
|
|
29
|
+
placement?: "left" | "right" | undefined;
|
|
30
|
+
/**
|
|
31
|
+
* Нужно ли использовать нативный скроллбар
|
|
32
|
+
* @default true
|
|
33
|
+
*/
|
|
34
|
+
nativeScrollbar?: boolean | undefined;
|
|
15
35
|
/**
|
|
16
36
|
* Пропсы для анимации контента (CSSTransition)
|
|
17
37
|
*/
|
package/Component.js
CHANGED
|
@@ -6,6 +6,7 @@ var React = require('react');
|
|
|
6
6
|
var reactTransitionGroup = require('react-transition-group');
|
|
7
7
|
var cn = require('classnames');
|
|
8
8
|
var coreComponentsBaseModal = require('@alfalab/core-components-base-modal');
|
|
9
|
+
var coreComponentsScrollbar = require('@alfalab/core-components-scrollbar');
|
|
9
10
|
|
|
10
11
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
11
12
|
|
|
@@ -51,43 +52,67 @@ function __rest(s, e) {
|
|
|
51
52
|
return t;
|
|
52
53
|
}
|
|
53
54
|
|
|
54
|
-
var styles = {"component":"
|
|
55
|
+
var styles = {"component":"drawer__component_fy4c0","rightPlacement":"drawer__rightPlacement_fy4c0","leftPlacement":"drawer__leftPlacement_fy4c0","content":"drawer__content_fy4c0","simplebar":"drawer__simplebar_fy4c0","enterRight":"drawer__enterRight_fy4c0","enterLeft":"drawer__enterLeft_fy4c0","contentEnter":"drawer__contentEnter_fy4c0","backdropEnter":"drawer__backdropEnter_fy4c0","enterActive":"drawer__enterActive_fy4c0","backdropEnterActive":"drawer__backdropEnterActive_fy4c0","backdropEnterDone":"drawer__backdropEnterDone_fy4c0","contentEnterActive":"drawer__contentEnterActive_fy4c0","exit":"drawer__exit_fy4c0","backdropExit":"drawer__backdropExit_fy4c0","contentExit":"drawer__contentExit_fy4c0","exitActiveRight":"drawer__exitActiveRight_fy4c0","exitActiveLeft":"drawer__exitActiveLeft_fy4c0","backdropExitActive":"drawer__backdropExitActive_fy4c0","backdropExitDone":"drawer__backdropExitDone_fy4c0","contentExitActive":"drawer__contentExitActive_fy4c0"};
|
|
55
56
|
require('./index.css')
|
|
56
57
|
|
|
57
58
|
var ANIMATION_DURATION = 600;
|
|
58
59
|
var DrawerContext = coreComponentsBaseModal.BaseModalContext;
|
|
60
|
+
var backdropProps = {
|
|
61
|
+
classNames: {
|
|
62
|
+
enter: styles.backdropEnter,
|
|
63
|
+
appear: styles.backdropEnter,
|
|
64
|
+
enterActive: styles.backdropEnterActive,
|
|
65
|
+
appearActive: styles.backdropEnterActive,
|
|
66
|
+
enterDone: styles.backdropEnterDone,
|
|
67
|
+
appearDone: styles.backdropEnterDone,
|
|
68
|
+
exit: styles.backdropExit,
|
|
69
|
+
exitActive: styles.backdropExitActive,
|
|
70
|
+
exitDone: styles.backdropExitDone,
|
|
71
|
+
},
|
|
72
|
+
timeout: ANIMATION_DURATION,
|
|
73
|
+
};
|
|
74
|
+
var contentProps = {
|
|
75
|
+
classNames: {
|
|
76
|
+
enter: styles.contentEnter,
|
|
77
|
+
appear: styles.contentEnter,
|
|
78
|
+
enterActive: styles.contentEnterActive,
|
|
79
|
+
appearActive: styles.contentEnterActive,
|
|
80
|
+
exit: styles.contentExit,
|
|
81
|
+
exitActive: styles.contentExitActive,
|
|
82
|
+
},
|
|
83
|
+
timeout: ANIMATION_DURATION,
|
|
84
|
+
};
|
|
59
85
|
var Drawer = React.forwardRef(function (_a, ref) {
|
|
60
|
-
var
|
|
61
|
-
var
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({
|
|
90
|
-
React__default['default'].createElement("div", { className: styles.content }, children))));
|
|
86
|
+
var _b;
|
|
87
|
+
var open = _a.open, className = _a.className, children = _a.children, contentTransitionProps = _a.contentTransitionProps, _c = _a.nativeScrollbar, nativeScrollbar = _c === void 0 ? true : _c, _d = _a.placement, placement = _d === void 0 ? 'right' : _d, restProps = __rest(_a, ["open", "className", "children", "contentTransitionProps", "nativeScrollbar", "placement"]);
|
|
88
|
+
var isRightPlacement = placement === 'right';
|
|
89
|
+
var isLeftPlacement = placement === 'left';
|
|
90
|
+
var transitionProps = React.useMemo(function () {
|
|
91
|
+
var _a, _b;
|
|
92
|
+
var enterClassName = cn__default['default']((_a = {},
|
|
93
|
+
_a[styles.enterRight] = isRightPlacement,
|
|
94
|
+
_a[styles.enterLeft] = isLeftPlacement,
|
|
95
|
+
_a));
|
|
96
|
+
var exitClassName = cn__default['default']((_b = {},
|
|
97
|
+
_b[styles.exitActiveRight] = isRightPlacement,
|
|
98
|
+
_b[styles.exitActiveLeft] = isLeftPlacement,
|
|
99
|
+
_b));
|
|
100
|
+
return __assign({ classNames: {
|
|
101
|
+
enter: enterClassName,
|
|
102
|
+
appear: enterClassName,
|
|
103
|
+
enterActive: styles.enterActive,
|
|
104
|
+
appearActive: styles.enterActive,
|
|
105
|
+
exit: styles.exit,
|
|
106
|
+
exitActive: exitClassName,
|
|
107
|
+
}, timeout: ANIMATION_DURATION }, restProps.transitionProps);
|
|
108
|
+
}, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
|
|
109
|
+
var renderWithNativeScrollbar = function () { return React__default['default'].createElement("div", { className: styles.content }, children); };
|
|
110
|
+
var renderWithCustomScrollbar = function () { return (React__default['default'].createElement(coreComponentsScrollbar.Scrollbar, { className: styles.simplebar }, children)); };
|
|
111
|
+
return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, __assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn__default['default'](styles.component, className, (_b = {},
|
|
112
|
+
_b[styles.rightPlacement] = isRightPlacement,
|
|
113
|
+
_b[styles.leftPlacement] = isLeftPlacement,
|
|
114
|
+
_b)), transitionProps: transitionProps, backdropProps: __assign(__assign({}, backdropProps), restProps.backdropProps) }),
|
|
115
|
+
React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({}, __assign(__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }), nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
|
|
91
116
|
});
|
|
92
117
|
|
|
93
118
|
exports.ANIMATION_DURATION = ANIMATION_DURATION;
|
package/cssm/Component.d.ts
CHANGED
|
@@ -5,6 +5,16 @@ import { TransitionProps } from 'react-transition-group/Transition';
|
|
|
5
5
|
import { BaseModalProps, BaseModalContext } from "@alfalab/core-components-base-modal";
|
|
6
6
|
declare const ANIMATION_DURATION = 600;
|
|
7
7
|
type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
8
|
+
/**
|
|
9
|
+
* Край экрана, с которого может появиться Drawer.
|
|
10
|
+
* @default "right"
|
|
11
|
+
*/
|
|
12
|
+
placement?: 'left' | 'right';
|
|
13
|
+
/**
|
|
14
|
+
* Нужно ли использовать нативный скроллбар
|
|
15
|
+
* @default true
|
|
16
|
+
*/
|
|
17
|
+
nativeScrollbar?: boolean;
|
|
8
18
|
/**
|
|
9
19
|
* Пропсы для анимации контента (CSSTransition)
|
|
10
20
|
*/
|
|
@@ -12,6 +22,16 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
|
12
22
|
};
|
|
13
23
|
declare const DrawerContext: React.Context<BaseModalContext>;
|
|
14
24
|
declare const Drawer: React.ForwardRefExoticComponent<Pick<BaseModalProps, "children" | "className" | "open" | "onClose" | "dataTestId" | "Backdrop" | "backdropProps" | "disableAutoFocus" | "disableFocusLock" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableBackdropClick" | "disableBlockingScroll" | "keepMounted" | "contentClassName" | "wrapperClassName" | "scrollHandler" | "transitionProps" | "onBackdropClick" | "onEscapeKeyDown" | "onMount" | "onUnmount" | "zIndex" | "componentRef"> & {
|
|
25
|
+
/**
|
|
26
|
+
* Край экрана, с которого может появиться Drawer.
|
|
27
|
+
* @default "right"
|
|
28
|
+
*/
|
|
29
|
+
placement?: "left" | "right" | undefined;
|
|
30
|
+
/**
|
|
31
|
+
* Нужно ли использовать нативный скроллбар
|
|
32
|
+
* @default true
|
|
33
|
+
*/
|
|
34
|
+
nativeScrollbar?: boolean | undefined;
|
|
15
35
|
/**
|
|
16
36
|
* Пропсы для анимации контента (CSSTransition)
|
|
17
37
|
*/
|
package/cssm/Component.js
CHANGED
|
@@ -6,6 +6,7 @@ var React = require('react');
|
|
|
6
6
|
var reactTransitionGroup = require('react-transition-group');
|
|
7
7
|
var cn = require('classnames');
|
|
8
8
|
var coreComponentsBaseModal = require('@alfalab/core-components-base-modal/cssm');
|
|
9
|
+
var coreComponentsScrollbar = require('@alfalab/core-components-scrollbar/cssm');
|
|
9
10
|
var styles = require('./index.module.css');
|
|
10
11
|
|
|
11
12
|
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
|
|
@@ -55,38 +56,62 @@ function __rest(s, e) {
|
|
|
55
56
|
|
|
56
57
|
var ANIMATION_DURATION = 600;
|
|
57
58
|
var DrawerContext = coreComponentsBaseModal.BaseModalContext;
|
|
59
|
+
var backdropProps = {
|
|
60
|
+
classNames: {
|
|
61
|
+
enter: styles__default['default'].backdropEnter,
|
|
62
|
+
appear: styles__default['default'].backdropEnter,
|
|
63
|
+
enterActive: styles__default['default'].backdropEnterActive,
|
|
64
|
+
appearActive: styles__default['default'].backdropEnterActive,
|
|
65
|
+
enterDone: styles__default['default'].backdropEnterDone,
|
|
66
|
+
appearDone: styles__default['default'].backdropEnterDone,
|
|
67
|
+
exit: styles__default['default'].backdropExit,
|
|
68
|
+
exitActive: styles__default['default'].backdropExitActive,
|
|
69
|
+
exitDone: styles__default['default'].backdropExitDone,
|
|
70
|
+
},
|
|
71
|
+
timeout: ANIMATION_DURATION,
|
|
72
|
+
};
|
|
73
|
+
var contentProps = {
|
|
74
|
+
classNames: {
|
|
75
|
+
enter: styles__default['default'].contentEnter,
|
|
76
|
+
appear: styles__default['default'].contentEnter,
|
|
77
|
+
enterActive: styles__default['default'].contentEnterActive,
|
|
78
|
+
appearActive: styles__default['default'].contentEnterActive,
|
|
79
|
+
exit: styles__default['default'].contentExit,
|
|
80
|
+
exitActive: styles__default['default'].contentExitActive,
|
|
81
|
+
},
|
|
82
|
+
timeout: ANIMATION_DURATION,
|
|
83
|
+
};
|
|
58
84
|
var Drawer = React.forwardRef(function (_a, ref) {
|
|
59
|
-
var
|
|
60
|
-
var
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({
|
|
89
|
-
React__default['default'].createElement("div", { className: styles__default['default'].content }, children))));
|
|
85
|
+
var _b;
|
|
86
|
+
var open = _a.open, className = _a.className, children = _a.children, contentTransitionProps = _a.contentTransitionProps, _c = _a.nativeScrollbar, nativeScrollbar = _c === void 0 ? true : _c, _d = _a.placement, placement = _d === void 0 ? 'right' : _d, restProps = __rest(_a, ["open", "className", "children", "contentTransitionProps", "nativeScrollbar", "placement"]);
|
|
87
|
+
var isRightPlacement = placement === 'right';
|
|
88
|
+
var isLeftPlacement = placement === 'left';
|
|
89
|
+
var transitionProps = React.useMemo(function () {
|
|
90
|
+
var _a, _b;
|
|
91
|
+
var enterClassName = cn__default['default']((_a = {},
|
|
92
|
+
_a[styles__default['default'].enterRight] = isRightPlacement,
|
|
93
|
+
_a[styles__default['default'].enterLeft] = isLeftPlacement,
|
|
94
|
+
_a));
|
|
95
|
+
var exitClassName = cn__default['default']((_b = {},
|
|
96
|
+
_b[styles__default['default'].exitActiveRight] = isRightPlacement,
|
|
97
|
+
_b[styles__default['default'].exitActiveLeft] = isLeftPlacement,
|
|
98
|
+
_b));
|
|
99
|
+
return __assign({ classNames: {
|
|
100
|
+
enter: enterClassName,
|
|
101
|
+
appear: enterClassName,
|
|
102
|
+
enterActive: styles__default['default'].enterActive,
|
|
103
|
+
appearActive: styles__default['default'].enterActive,
|
|
104
|
+
exit: styles__default['default'].exit,
|
|
105
|
+
exitActive: exitClassName,
|
|
106
|
+
}, timeout: ANIMATION_DURATION }, restProps.transitionProps);
|
|
107
|
+
}, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
|
|
108
|
+
var renderWithNativeScrollbar = function () { return React__default['default'].createElement("div", { className: styles__default['default'].content }, children); };
|
|
109
|
+
var renderWithCustomScrollbar = function () { return (React__default['default'].createElement(coreComponentsScrollbar.Scrollbar, { className: styles__default['default'].simplebar }, children)); };
|
|
110
|
+
return (React__default['default'].createElement(coreComponentsBaseModal.BaseModal, __assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn__default['default'](styles__default['default'].component, className, (_b = {},
|
|
111
|
+
_b[styles__default['default'].rightPlacement] = isRightPlacement,
|
|
112
|
+
_b[styles__default['default'].leftPlacement] = isLeftPlacement,
|
|
113
|
+
_b)), transitionProps: transitionProps, backdropProps: __assign(__assign({}, backdropProps), restProps.backdropProps) }),
|
|
114
|
+
React__default['default'].createElement(reactTransitionGroup.CSSTransition, __assign({}, __assign(__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }), nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
|
|
90
115
|
});
|
|
91
116
|
|
|
92
117
|
exports.ANIMATION_DURATION = ANIMATION_DURATION;
|
package/cssm/index.js
CHANGED
package/cssm/index.module.css
CHANGED
|
@@ -19,24 +19,36 @@
|
|
|
19
19
|
.component {
|
|
20
20
|
position: fixed;
|
|
21
21
|
top: 0;
|
|
22
|
-
right: 0;
|
|
23
22
|
height: 100%;
|
|
24
23
|
width: var(--drawer-width);
|
|
25
24
|
flex: 1;
|
|
26
|
-
align-self: flex-end;
|
|
27
25
|
overflow: auto;
|
|
28
26
|
will-change: transform;
|
|
29
27
|
}
|
|
28
|
+
.rightPlacement {
|
|
29
|
+
right: 0;
|
|
30
|
+
align-self: flex-end;
|
|
31
|
+
}
|
|
32
|
+
.leftPlacement {
|
|
33
|
+
left: 0;
|
|
34
|
+
align-self: flex-start;
|
|
35
|
+
}
|
|
30
36
|
.content {
|
|
31
37
|
width: 100%;
|
|
32
38
|
display: flex;
|
|
33
39
|
flex-direction: column;
|
|
34
40
|
flex: 1;
|
|
35
41
|
}
|
|
42
|
+
.simplebar {
|
|
43
|
+
height: 100vh;
|
|
44
|
+
}
|
|
36
45
|
/* enter */
|
|
37
|
-
.
|
|
46
|
+
.enterRight {
|
|
38
47
|
transform: translateX(100%);
|
|
39
48
|
}
|
|
49
|
+
.enterLeft {
|
|
50
|
+
transform: translateX(-100%);
|
|
51
|
+
}
|
|
40
52
|
.contentEnter {
|
|
41
53
|
opacity: 0;
|
|
42
54
|
}
|
|
@@ -66,10 +78,14 @@
|
|
|
66
78
|
.contentExit {
|
|
67
79
|
opacity: 1;
|
|
68
80
|
}
|
|
69
|
-
.
|
|
81
|
+
.exitActiveRight {
|
|
70
82
|
transition: transform 0.25s ease-in-out 0.1s;
|
|
71
83
|
transform: translateX(100%);
|
|
72
84
|
}
|
|
85
|
+
.exitActiveLeft {
|
|
86
|
+
transition: transform 0.25s ease-in-out 0.1s;
|
|
87
|
+
transform: translateX(-100%);
|
|
88
|
+
}
|
|
73
89
|
.backdropExitActive,
|
|
74
90
|
.backdropExitDone {
|
|
75
91
|
transition: background 0.25s ease-in-out 0.1s;
|
package/esm/Component.d.ts
CHANGED
|
@@ -5,6 +5,16 @@ import { TransitionProps } from 'react-transition-group/Transition';
|
|
|
5
5
|
import { BaseModalProps, BaseModalContext } from "@alfalab/core-components-base-modal";
|
|
6
6
|
declare const ANIMATION_DURATION = 600;
|
|
7
7
|
type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
8
|
+
/**
|
|
9
|
+
* Край экрана, с которого может появиться Drawer.
|
|
10
|
+
* @default "right"
|
|
11
|
+
*/
|
|
12
|
+
placement?: 'left' | 'right';
|
|
13
|
+
/**
|
|
14
|
+
* Нужно ли использовать нативный скроллбар
|
|
15
|
+
* @default true
|
|
16
|
+
*/
|
|
17
|
+
nativeScrollbar?: boolean;
|
|
8
18
|
/**
|
|
9
19
|
* Пропсы для анимации контента (CSSTransition)
|
|
10
20
|
*/
|
|
@@ -12,6 +22,16 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
|
12
22
|
};
|
|
13
23
|
declare const DrawerContext: React.Context<BaseModalContext>;
|
|
14
24
|
declare const Drawer: React.ForwardRefExoticComponent<Pick<BaseModalProps, "children" | "className" | "open" | "onClose" | "dataTestId" | "Backdrop" | "backdropProps" | "disableAutoFocus" | "disableFocusLock" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableBackdropClick" | "disableBlockingScroll" | "keepMounted" | "contentClassName" | "wrapperClassName" | "scrollHandler" | "transitionProps" | "onBackdropClick" | "onEscapeKeyDown" | "onMount" | "onUnmount" | "zIndex" | "componentRef"> & {
|
|
25
|
+
/**
|
|
26
|
+
* Край экрана, с которого может появиться Drawer.
|
|
27
|
+
* @default "right"
|
|
28
|
+
*/
|
|
29
|
+
placement?: "left" | "right" | undefined;
|
|
30
|
+
/**
|
|
31
|
+
* Нужно ли использовать нативный скроллбар
|
|
32
|
+
* @default true
|
|
33
|
+
*/
|
|
34
|
+
nativeScrollbar?: boolean | undefined;
|
|
15
35
|
/**
|
|
16
36
|
* Пропсы для анимации контента (CSSTransition)
|
|
17
37
|
*/
|
package/esm/Component.js
CHANGED
|
@@ -2,6 +2,7 @@ import React, { forwardRef, useMemo } from 'react';
|
|
|
2
2
|
import { CSSTransition } from 'react-transition-group';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { BaseModalContext, BaseModal } from '@alfalab/core-components-base-modal/esm';
|
|
5
|
+
import { Scrollbar } from '@alfalab/core-components-scrollbar/esm';
|
|
5
6
|
|
|
6
7
|
/*! *****************************************************************************
|
|
7
8
|
Copyright (c) Microsoft Corporation.
|
|
@@ -42,43 +43,67 @@ function __rest(s, e) {
|
|
|
42
43
|
return t;
|
|
43
44
|
}
|
|
44
45
|
|
|
45
|
-
var styles = {"component":"
|
|
46
|
+
var styles = {"component":"drawer__component_fy4c0","rightPlacement":"drawer__rightPlacement_fy4c0","leftPlacement":"drawer__leftPlacement_fy4c0","content":"drawer__content_fy4c0","simplebar":"drawer__simplebar_fy4c0","enterRight":"drawer__enterRight_fy4c0","enterLeft":"drawer__enterLeft_fy4c0","contentEnter":"drawer__contentEnter_fy4c0","backdropEnter":"drawer__backdropEnter_fy4c0","enterActive":"drawer__enterActive_fy4c0","backdropEnterActive":"drawer__backdropEnterActive_fy4c0","backdropEnterDone":"drawer__backdropEnterDone_fy4c0","contentEnterActive":"drawer__contentEnterActive_fy4c0","exit":"drawer__exit_fy4c0","backdropExit":"drawer__backdropExit_fy4c0","contentExit":"drawer__contentExit_fy4c0","exitActiveRight":"drawer__exitActiveRight_fy4c0","exitActiveLeft":"drawer__exitActiveLeft_fy4c0","backdropExitActive":"drawer__backdropExitActive_fy4c0","backdropExitDone":"drawer__backdropExitDone_fy4c0","contentExitActive":"drawer__contentExitActive_fy4c0"};
|
|
46
47
|
require('./index.css')
|
|
47
48
|
|
|
48
49
|
var ANIMATION_DURATION = 600;
|
|
49
50
|
var DrawerContext = BaseModalContext;
|
|
51
|
+
var backdropProps = {
|
|
52
|
+
classNames: {
|
|
53
|
+
enter: styles.backdropEnter,
|
|
54
|
+
appear: styles.backdropEnter,
|
|
55
|
+
enterActive: styles.backdropEnterActive,
|
|
56
|
+
appearActive: styles.backdropEnterActive,
|
|
57
|
+
enterDone: styles.backdropEnterDone,
|
|
58
|
+
appearDone: styles.backdropEnterDone,
|
|
59
|
+
exit: styles.backdropExit,
|
|
60
|
+
exitActive: styles.backdropExitActive,
|
|
61
|
+
exitDone: styles.backdropExitDone,
|
|
62
|
+
},
|
|
63
|
+
timeout: ANIMATION_DURATION,
|
|
64
|
+
};
|
|
65
|
+
var contentProps = {
|
|
66
|
+
classNames: {
|
|
67
|
+
enter: styles.contentEnter,
|
|
68
|
+
appear: styles.contentEnter,
|
|
69
|
+
enterActive: styles.contentEnterActive,
|
|
70
|
+
appearActive: styles.contentEnterActive,
|
|
71
|
+
exit: styles.contentExit,
|
|
72
|
+
exitActive: styles.contentExitActive,
|
|
73
|
+
},
|
|
74
|
+
timeout: ANIMATION_DURATION,
|
|
75
|
+
};
|
|
50
76
|
var Drawer = forwardRef(function (_a, ref) {
|
|
51
|
-
var
|
|
52
|
-
var
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
React.createElement(CSSTransition, __assign({
|
|
81
|
-
React.createElement("div", { className: styles.content }, children))));
|
|
77
|
+
var _b;
|
|
78
|
+
var open = _a.open, className = _a.className, children = _a.children, contentTransitionProps = _a.contentTransitionProps, _c = _a.nativeScrollbar, nativeScrollbar = _c === void 0 ? true : _c, _d = _a.placement, placement = _d === void 0 ? 'right' : _d, restProps = __rest(_a, ["open", "className", "children", "contentTransitionProps", "nativeScrollbar", "placement"]);
|
|
79
|
+
var isRightPlacement = placement === 'right';
|
|
80
|
+
var isLeftPlacement = placement === 'left';
|
|
81
|
+
var transitionProps = useMemo(function () {
|
|
82
|
+
var _a, _b;
|
|
83
|
+
var enterClassName = cn((_a = {},
|
|
84
|
+
_a[styles.enterRight] = isRightPlacement,
|
|
85
|
+
_a[styles.enterLeft] = isLeftPlacement,
|
|
86
|
+
_a));
|
|
87
|
+
var exitClassName = cn((_b = {},
|
|
88
|
+
_b[styles.exitActiveRight] = isRightPlacement,
|
|
89
|
+
_b[styles.exitActiveLeft] = isLeftPlacement,
|
|
90
|
+
_b));
|
|
91
|
+
return __assign({ classNames: {
|
|
92
|
+
enter: enterClassName,
|
|
93
|
+
appear: enterClassName,
|
|
94
|
+
enterActive: styles.enterActive,
|
|
95
|
+
appearActive: styles.enterActive,
|
|
96
|
+
exit: styles.exit,
|
|
97
|
+
exitActive: exitClassName,
|
|
98
|
+
}, timeout: ANIMATION_DURATION }, restProps.transitionProps);
|
|
99
|
+
}, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
|
|
100
|
+
var renderWithNativeScrollbar = function () { return React.createElement("div", { className: styles.content }, children); };
|
|
101
|
+
var renderWithCustomScrollbar = function () { return (React.createElement(Scrollbar, { className: styles.simplebar }, children)); };
|
|
102
|
+
return (React.createElement(BaseModal, __assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn(styles.component, className, (_b = {},
|
|
103
|
+
_b[styles.rightPlacement] = isRightPlacement,
|
|
104
|
+
_b[styles.leftPlacement] = isLeftPlacement,
|
|
105
|
+
_b)), transitionProps: transitionProps, backdropProps: __assign(__assign({}, backdropProps), restProps.backdropProps) }),
|
|
106
|
+
React.createElement(CSSTransition, __assign({}, __assign(__assign({}, contentProps), contentTransitionProps), { appear: true, in: open }), nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
|
|
82
107
|
});
|
|
83
108
|
|
|
84
109
|
export { ANIMATION_DURATION, Drawer, DrawerContext };
|
package/esm/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1767q */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-bg-overlay: rgba(0, 0, 0, 0.6);
|
|
4
4
|
}
|
|
@@ -17,66 +17,82 @@
|
|
|
17
17
|
:root {
|
|
18
18
|
--drawer-width: 500px;
|
|
19
19
|
}
|
|
20
|
-
.
|
|
20
|
+
.drawer__component_fy4c0 {
|
|
21
21
|
position: fixed;
|
|
22
22
|
top: 0;
|
|
23
|
-
right: 0;
|
|
24
23
|
height: 100%;
|
|
25
24
|
width: var(--drawer-width);
|
|
26
25
|
flex: 1;
|
|
27
|
-
align-self: flex-end;
|
|
28
26
|
overflow: auto;
|
|
29
27
|
will-change: transform;
|
|
30
28
|
}
|
|
31
|
-
.
|
|
29
|
+
.drawer__rightPlacement_fy4c0 {
|
|
30
|
+
right: 0;
|
|
31
|
+
align-self: flex-end;
|
|
32
|
+
}
|
|
33
|
+
.drawer__leftPlacement_fy4c0 {
|
|
34
|
+
left: 0;
|
|
35
|
+
align-self: flex-start;
|
|
36
|
+
}
|
|
37
|
+
.drawer__content_fy4c0 {
|
|
32
38
|
width: 100%;
|
|
33
39
|
display: flex;
|
|
34
40
|
flex-direction: column;
|
|
35
41
|
flex: 1;
|
|
36
42
|
}
|
|
43
|
+
.drawer__simplebar_fy4c0 {
|
|
44
|
+
height: 100vh;
|
|
45
|
+
}
|
|
37
46
|
/* enter */
|
|
38
|
-
.
|
|
47
|
+
.drawer__enterRight_fy4c0 {
|
|
39
48
|
transform: translateX(100%);
|
|
40
49
|
}
|
|
41
|
-
.
|
|
50
|
+
.drawer__enterLeft_fy4c0 {
|
|
51
|
+
transform: translateX(-100%);
|
|
52
|
+
}
|
|
53
|
+
.drawer__contentEnter_fy4c0 {
|
|
42
54
|
opacity: 0;
|
|
43
55
|
}
|
|
44
|
-
.
|
|
56
|
+
.drawer__backdropEnter_fy4c0 {
|
|
45
57
|
background-color: var(--backdrop-hidden-background);
|
|
46
58
|
}
|
|
47
|
-
.
|
|
59
|
+
.drawer__enterActive_fy4c0 {
|
|
48
60
|
transition: transform 0.3s ease-in-out;
|
|
49
61
|
transform: translateX(0);
|
|
50
62
|
}
|
|
51
|
-
.
|
|
52
|
-
.
|
|
63
|
+
.drawer__backdropEnterActive_fy4c0,
|
|
64
|
+
.drawer__backdropEnterDone_fy4c0 {
|
|
53
65
|
transition: background 0.3s ease-in-out;
|
|
54
66
|
background-color: var(--backdrop-visible-background);
|
|
55
67
|
}
|
|
56
|
-
.
|
|
68
|
+
.drawer__contentEnterActive_fy4c0 {
|
|
57
69
|
transition: opacity 0.2s ease-in-out 0.3s;
|
|
58
70
|
opacity: 1;
|
|
59
71
|
}
|
|
60
72
|
/* exit */
|
|
61
|
-
.
|
|
73
|
+
.drawer__exit_fy4c0 {
|
|
62
74
|
transform: translateX(0);
|
|
63
75
|
}
|
|
64
|
-
.
|
|
76
|
+
.drawer__backdropExit_fy4c0 {
|
|
65
77
|
background-color: var(--backdrop-visible-background);
|
|
66
78
|
}
|
|
67
|
-
.
|
|
79
|
+
.drawer__contentExit_fy4c0 {
|
|
68
80
|
opacity: 1;
|
|
69
81
|
}
|
|
70
|
-
.
|
|
82
|
+
.drawer__exitActiveRight_fy4c0 {
|
|
71
83
|
transition: transform 0.25s ease-in-out 0.1s;
|
|
72
84
|
transform: translateX(100%);
|
|
73
85
|
}
|
|
74
|
-
.
|
|
75
|
-
.
|
|
86
|
+
.drawer__exitActiveLeft_fy4c0 {
|
|
87
|
+
transition: transform 0.25s ease-in-out 0.1s;
|
|
88
|
+
transform: translateX(-100%);
|
|
89
|
+
}
|
|
90
|
+
.drawer__backdropExitActive_fy4c0,
|
|
91
|
+
.drawer__backdropExitDone_fy4c0 {
|
|
76
92
|
transition: background 0.25s ease-in-out 0.1s;
|
|
77
93
|
background-color: var(--backdrop-hidden-background);
|
|
78
94
|
}
|
|
79
|
-
.
|
|
95
|
+
.drawer__contentExitActive_fy4c0 {
|
|
80
96
|
opacity: 0;
|
|
81
97
|
transition: opacity 0.12s ease-in-out;
|
|
82
98
|
}
|
package/esm/index.js
CHANGED
package/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1767q */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-bg-overlay: rgba(0, 0, 0, 0.6);
|
|
4
4
|
}
|
|
@@ -17,66 +17,82 @@
|
|
|
17
17
|
:root {
|
|
18
18
|
--drawer-width: 500px;
|
|
19
19
|
}
|
|
20
|
-
.
|
|
20
|
+
.drawer__component_fy4c0 {
|
|
21
21
|
position: fixed;
|
|
22
22
|
top: 0;
|
|
23
|
-
right: 0;
|
|
24
23
|
height: 100%;
|
|
25
24
|
width: var(--drawer-width);
|
|
26
25
|
flex: 1;
|
|
27
|
-
align-self: flex-end;
|
|
28
26
|
overflow: auto;
|
|
29
27
|
will-change: transform;
|
|
30
28
|
}
|
|
31
|
-
.
|
|
29
|
+
.drawer__rightPlacement_fy4c0 {
|
|
30
|
+
right: 0;
|
|
31
|
+
align-self: flex-end;
|
|
32
|
+
}
|
|
33
|
+
.drawer__leftPlacement_fy4c0 {
|
|
34
|
+
left: 0;
|
|
35
|
+
align-self: flex-start;
|
|
36
|
+
}
|
|
37
|
+
.drawer__content_fy4c0 {
|
|
32
38
|
width: 100%;
|
|
33
39
|
display: flex;
|
|
34
40
|
flex-direction: column;
|
|
35
41
|
flex: 1;
|
|
36
42
|
}
|
|
43
|
+
.drawer__simplebar_fy4c0 {
|
|
44
|
+
height: 100vh;
|
|
45
|
+
}
|
|
37
46
|
/* enter */
|
|
38
|
-
.
|
|
47
|
+
.drawer__enterRight_fy4c0 {
|
|
39
48
|
transform: translateX(100%);
|
|
40
49
|
}
|
|
41
|
-
.
|
|
50
|
+
.drawer__enterLeft_fy4c0 {
|
|
51
|
+
transform: translateX(-100%);
|
|
52
|
+
}
|
|
53
|
+
.drawer__contentEnter_fy4c0 {
|
|
42
54
|
opacity: 0;
|
|
43
55
|
}
|
|
44
|
-
.
|
|
56
|
+
.drawer__backdropEnter_fy4c0 {
|
|
45
57
|
background-color: var(--backdrop-hidden-background);
|
|
46
58
|
}
|
|
47
|
-
.
|
|
59
|
+
.drawer__enterActive_fy4c0 {
|
|
48
60
|
transition: transform 0.3s ease-in-out;
|
|
49
61
|
transform: translateX(0);
|
|
50
62
|
}
|
|
51
|
-
.
|
|
52
|
-
.
|
|
63
|
+
.drawer__backdropEnterActive_fy4c0,
|
|
64
|
+
.drawer__backdropEnterDone_fy4c0 {
|
|
53
65
|
transition: background 0.3s ease-in-out;
|
|
54
66
|
background-color: var(--backdrop-visible-background);
|
|
55
67
|
}
|
|
56
|
-
.
|
|
68
|
+
.drawer__contentEnterActive_fy4c0 {
|
|
57
69
|
transition: opacity 0.2s ease-in-out 0.3s;
|
|
58
70
|
opacity: 1;
|
|
59
71
|
}
|
|
60
72
|
/* exit */
|
|
61
|
-
.
|
|
73
|
+
.drawer__exit_fy4c0 {
|
|
62
74
|
transform: translateX(0);
|
|
63
75
|
}
|
|
64
|
-
.
|
|
76
|
+
.drawer__backdropExit_fy4c0 {
|
|
65
77
|
background-color: var(--backdrop-visible-background);
|
|
66
78
|
}
|
|
67
|
-
.
|
|
79
|
+
.drawer__contentExit_fy4c0 {
|
|
68
80
|
opacity: 1;
|
|
69
81
|
}
|
|
70
|
-
.
|
|
82
|
+
.drawer__exitActiveRight_fy4c0 {
|
|
71
83
|
transition: transform 0.25s ease-in-out 0.1s;
|
|
72
84
|
transform: translateX(100%);
|
|
73
85
|
}
|
|
74
|
-
.
|
|
75
|
-
.
|
|
86
|
+
.drawer__exitActiveLeft_fy4c0 {
|
|
87
|
+
transition: transform 0.25s ease-in-out 0.1s;
|
|
88
|
+
transform: translateX(-100%);
|
|
89
|
+
}
|
|
90
|
+
.drawer__backdropExitActive_fy4c0,
|
|
91
|
+
.drawer__backdropExitDone_fy4c0 {
|
|
76
92
|
transition: background 0.25s ease-in-out 0.1s;
|
|
77
93
|
background-color: var(--backdrop-hidden-background);
|
|
78
94
|
}
|
|
79
|
-
.
|
|
95
|
+
.drawer__contentExitActive_fy4c0 {
|
|
80
96
|
opacity: 0;
|
|
81
97
|
transition: opacity 0.12s ease-in-out;
|
|
82
98
|
}
|
package/index.js
CHANGED
package/modern/Component.d.ts
CHANGED
|
@@ -5,6 +5,16 @@ import { TransitionProps } from 'react-transition-group/Transition';
|
|
|
5
5
|
import { BaseModalProps, BaseModalContext } from "@alfalab/core-components-base-modal";
|
|
6
6
|
declare const ANIMATION_DURATION = 600;
|
|
7
7
|
type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
8
|
+
/**
|
|
9
|
+
* Край экрана, с которого может появиться Drawer.
|
|
10
|
+
* @default "right"
|
|
11
|
+
*/
|
|
12
|
+
placement?: 'left' | 'right';
|
|
13
|
+
/**
|
|
14
|
+
* Нужно ли использовать нативный скроллбар
|
|
15
|
+
* @default true
|
|
16
|
+
*/
|
|
17
|
+
nativeScrollbar?: boolean;
|
|
8
18
|
/**
|
|
9
19
|
* Пропсы для анимации контента (CSSTransition)
|
|
10
20
|
*/
|
|
@@ -12,6 +22,16 @@ type DrawerProps = Omit<BaseModalProps, 'container'> & {
|
|
|
12
22
|
};
|
|
13
23
|
declare const DrawerContext: React.Context<BaseModalContext>;
|
|
14
24
|
declare const Drawer: React.ForwardRefExoticComponent<Pick<BaseModalProps, "children" | "className" | "open" | "onClose" | "dataTestId" | "Backdrop" | "backdropProps" | "disableAutoFocus" | "disableFocusLock" | "disableRestoreFocus" | "disableEscapeKeyDown" | "disableBackdropClick" | "disableBlockingScroll" | "keepMounted" | "contentClassName" | "wrapperClassName" | "scrollHandler" | "transitionProps" | "onBackdropClick" | "onEscapeKeyDown" | "onMount" | "onUnmount" | "zIndex" | "componentRef"> & {
|
|
25
|
+
/**
|
|
26
|
+
* Край экрана, с которого может появиться Drawer.
|
|
27
|
+
* @default "right"
|
|
28
|
+
*/
|
|
29
|
+
placement?: "left" | "right" | undefined;
|
|
30
|
+
/**
|
|
31
|
+
* Нужно ли использовать нативный скроллбар
|
|
32
|
+
* @default true
|
|
33
|
+
*/
|
|
34
|
+
nativeScrollbar?: boolean | undefined;
|
|
15
35
|
/**
|
|
16
36
|
* Пропсы для анимации контента (CSSTransition)
|
|
17
37
|
*/
|
package/modern/Component.js
CHANGED
|
@@ -2,55 +2,70 @@ import React, { forwardRef, useMemo } from 'react';
|
|
|
2
2
|
import { CSSTransition } from 'react-transition-group';
|
|
3
3
|
import cn from 'classnames';
|
|
4
4
|
import { BaseModalContext, BaseModal } from '@alfalab/core-components-base-modal/modern';
|
|
5
|
+
import { Scrollbar } from '@alfalab/core-components-scrollbar/modern';
|
|
5
6
|
|
|
6
|
-
var styles = {"component":"
|
|
7
|
+
var styles = {"component":"drawer__component_fy4c0","rightPlacement":"drawer__rightPlacement_fy4c0","leftPlacement":"drawer__leftPlacement_fy4c0","content":"drawer__content_fy4c0","simplebar":"drawer__simplebar_fy4c0","enterRight":"drawer__enterRight_fy4c0","enterLeft":"drawer__enterLeft_fy4c0","contentEnter":"drawer__contentEnter_fy4c0","backdropEnter":"drawer__backdropEnter_fy4c0","enterActive":"drawer__enterActive_fy4c0","backdropEnterActive":"drawer__backdropEnterActive_fy4c0","backdropEnterDone":"drawer__backdropEnterDone_fy4c0","contentEnterActive":"drawer__contentEnterActive_fy4c0","exit":"drawer__exit_fy4c0","backdropExit":"drawer__backdropExit_fy4c0","contentExit":"drawer__contentExit_fy4c0","exitActiveRight":"drawer__exitActiveRight_fy4c0","exitActiveLeft":"drawer__exitActiveLeft_fy4c0","backdropExitActive":"drawer__backdropExitActive_fy4c0","backdropExitDone":"drawer__backdropExitDone_fy4c0","contentExitActive":"drawer__contentExitActive_fy4c0"};
|
|
7
8
|
require('./index.css')
|
|
8
9
|
|
|
9
10
|
const ANIMATION_DURATION = 600;
|
|
10
11
|
const DrawerContext = BaseModalContext;
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
const
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
}
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
12
|
+
const backdropProps = {
|
|
13
|
+
classNames: {
|
|
14
|
+
enter: styles.backdropEnter,
|
|
15
|
+
appear: styles.backdropEnter,
|
|
16
|
+
enterActive: styles.backdropEnterActive,
|
|
17
|
+
appearActive: styles.backdropEnterActive,
|
|
18
|
+
enterDone: styles.backdropEnterDone,
|
|
19
|
+
appearDone: styles.backdropEnterDone,
|
|
20
|
+
exit: styles.backdropExit,
|
|
21
|
+
exitActive: styles.backdropExitActive,
|
|
22
|
+
exitDone: styles.backdropExitDone,
|
|
23
|
+
},
|
|
24
|
+
timeout: ANIMATION_DURATION,
|
|
25
|
+
};
|
|
26
|
+
const contentProps = {
|
|
27
|
+
classNames: {
|
|
28
|
+
enter: styles.contentEnter,
|
|
29
|
+
appear: styles.contentEnter,
|
|
30
|
+
enterActive: styles.contentEnterActive,
|
|
31
|
+
appearActive: styles.contentEnterActive,
|
|
32
|
+
exit: styles.contentExit,
|
|
33
|
+
exitActive: styles.contentExitActive,
|
|
34
|
+
},
|
|
35
|
+
timeout: ANIMATION_DURATION,
|
|
36
|
+
};
|
|
37
|
+
const Drawer = forwardRef(({ open, className, children, contentTransitionProps, nativeScrollbar = true, placement = 'right', ...restProps }, ref) => {
|
|
38
|
+
const isRightPlacement = placement === 'right';
|
|
39
|
+
const isLeftPlacement = placement === 'left';
|
|
40
|
+
const transitionProps = useMemo(() => {
|
|
41
|
+
const enterClassName = cn({
|
|
42
|
+
[styles.enterRight]: isRightPlacement,
|
|
43
|
+
[styles.enterLeft]: isLeftPlacement,
|
|
44
|
+
});
|
|
45
|
+
const exitClassName = cn({
|
|
46
|
+
[styles.exitActiveRight]: isRightPlacement,
|
|
47
|
+
[styles.exitActiveLeft]: isLeftPlacement,
|
|
48
|
+
});
|
|
49
|
+
return {
|
|
50
|
+
classNames: {
|
|
51
|
+
enter: enterClassName,
|
|
52
|
+
appear: enterClassName,
|
|
53
|
+
enterActive: styles.enterActive,
|
|
54
|
+
appearActive: styles.enterActive,
|
|
55
|
+
exit: styles.exit,
|
|
56
|
+
exitActive: exitClassName,
|
|
57
|
+
},
|
|
58
|
+
timeout: ANIMATION_DURATION,
|
|
59
|
+
...restProps.transitionProps,
|
|
60
|
+
};
|
|
61
|
+
}, [restProps.transitionProps, isLeftPlacement, isRightPlacement]);
|
|
62
|
+
const renderWithNativeScrollbar = () => React.createElement("div", { className: styles.content }, children);
|
|
63
|
+
const renderWithCustomScrollbar = () => (React.createElement(Scrollbar, { className: styles.simplebar }, children));
|
|
64
|
+
return (React.createElement(BaseModal, Object.assign({}, restProps, { scrollHandler: 'content', ref: ref, open: open, className: cn(styles.component, className, {
|
|
65
|
+
[styles.rightPlacement]: isRightPlacement,
|
|
66
|
+
[styles.leftPlacement]: isLeftPlacement,
|
|
67
|
+
}), transitionProps: transitionProps, backdropProps: { ...backdropProps, ...restProps.backdropProps } }),
|
|
68
|
+
React.createElement(CSSTransition, Object.assign({}, { ...contentProps, ...contentTransitionProps }, { appear: true, in: open }), nativeScrollbar ? renderWithNativeScrollbar() : renderWithCustomScrollbar())));
|
|
54
69
|
});
|
|
55
70
|
|
|
56
71
|
export { ANIMATION_DURATION, Drawer, DrawerContext };
|
package/modern/index.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* hash:
|
|
1
|
+
/* hash: 1767q */
|
|
2
2
|
:root {
|
|
3
3
|
--color-light-bg-overlay: rgba(0, 0, 0, 0.6);
|
|
4
4
|
}
|
|
@@ -17,66 +17,82 @@
|
|
|
17
17
|
:root {
|
|
18
18
|
--drawer-width: 500px;
|
|
19
19
|
}
|
|
20
|
-
.
|
|
20
|
+
.drawer__component_fy4c0 {
|
|
21
21
|
position: fixed;
|
|
22
22
|
top: 0;
|
|
23
|
-
right: 0;
|
|
24
23
|
height: 100%;
|
|
25
24
|
width: var(--drawer-width);
|
|
26
25
|
flex: 1;
|
|
27
|
-
align-self: flex-end;
|
|
28
26
|
overflow: auto;
|
|
29
27
|
will-change: transform;
|
|
30
28
|
}
|
|
31
|
-
.
|
|
29
|
+
.drawer__rightPlacement_fy4c0 {
|
|
30
|
+
right: 0;
|
|
31
|
+
align-self: flex-end;
|
|
32
|
+
}
|
|
33
|
+
.drawer__leftPlacement_fy4c0 {
|
|
34
|
+
left: 0;
|
|
35
|
+
align-self: flex-start;
|
|
36
|
+
}
|
|
37
|
+
.drawer__content_fy4c0 {
|
|
32
38
|
width: 100%;
|
|
33
39
|
display: flex;
|
|
34
40
|
flex-direction: column;
|
|
35
41
|
flex: 1;
|
|
36
42
|
}
|
|
43
|
+
.drawer__simplebar_fy4c0 {
|
|
44
|
+
height: 100vh;
|
|
45
|
+
}
|
|
37
46
|
/* enter */
|
|
38
|
-
.
|
|
47
|
+
.drawer__enterRight_fy4c0 {
|
|
39
48
|
transform: translateX(100%);
|
|
40
49
|
}
|
|
41
|
-
.
|
|
50
|
+
.drawer__enterLeft_fy4c0 {
|
|
51
|
+
transform: translateX(-100%);
|
|
52
|
+
}
|
|
53
|
+
.drawer__contentEnter_fy4c0 {
|
|
42
54
|
opacity: 0;
|
|
43
55
|
}
|
|
44
|
-
.
|
|
56
|
+
.drawer__backdropEnter_fy4c0 {
|
|
45
57
|
background-color: var(--backdrop-hidden-background);
|
|
46
58
|
}
|
|
47
|
-
.
|
|
59
|
+
.drawer__enterActive_fy4c0 {
|
|
48
60
|
transition: transform 0.3s ease-in-out;
|
|
49
61
|
transform: translateX(0);
|
|
50
62
|
}
|
|
51
|
-
.
|
|
52
|
-
.
|
|
63
|
+
.drawer__backdropEnterActive_fy4c0,
|
|
64
|
+
.drawer__backdropEnterDone_fy4c0 {
|
|
53
65
|
transition: background 0.3s ease-in-out;
|
|
54
66
|
background-color: var(--backdrop-visible-background);
|
|
55
67
|
}
|
|
56
|
-
.
|
|
68
|
+
.drawer__contentEnterActive_fy4c0 {
|
|
57
69
|
transition: opacity 0.2s ease-in-out 0.3s;
|
|
58
70
|
opacity: 1;
|
|
59
71
|
}
|
|
60
72
|
/* exit */
|
|
61
|
-
.
|
|
73
|
+
.drawer__exit_fy4c0 {
|
|
62
74
|
transform: translateX(0);
|
|
63
75
|
}
|
|
64
|
-
.
|
|
76
|
+
.drawer__backdropExit_fy4c0 {
|
|
65
77
|
background-color: var(--backdrop-visible-background);
|
|
66
78
|
}
|
|
67
|
-
.
|
|
79
|
+
.drawer__contentExit_fy4c0 {
|
|
68
80
|
opacity: 1;
|
|
69
81
|
}
|
|
70
|
-
.
|
|
82
|
+
.drawer__exitActiveRight_fy4c0 {
|
|
71
83
|
transition: transform 0.25s ease-in-out 0.1s;
|
|
72
84
|
transform: translateX(100%);
|
|
73
85
|
}
|
|
74
|
-
.
|
|
75
|
-
.
|
|
86
|
+
.drawer__exitActiveLeft_fy4c0 {
|
|
87
|
+
transition: transform 0.25s ease-in-out 0.1s;
|
|
88
|
+
transform: translateX(-100%);
|
|
89
|
+
}
|
|
90
|
+
.drawer__backdropExitActive_fy4c0,
|
|
91
|
+
.drawer__backdropExitDone_fy4c0 {
|
|
76
92
|
transition: background 0.25s ease-in-out 0.1s;
|
|
77
93
|
background-color: var(--backdrop-hidden-background);
|
|
78
94
|
}
|
|
79
|
-
.
|
|
95
|
+
.drawer__contentExitActive_fy4c0 {
|
|
80
96
|
opacity: 0;
|
|
81
97
|
transition: opacity 0.12s ease-in-out;
|
|
82
98
|
}
|
package/modern/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@alfalab/core-components-drawer",
|
|
3
|
-
"version": "4.0
|
|
3
|
+
"version": "4.1.0",
|
|
4
4
|
"description": "Drawer component",
|
|
5
5
|
"gitHead": "f054fef20200664c65e2501ef1f916c555cdf05d",
|
|
6
6
|
"keywords": [],
|
|
@@ -19,7 +19,8 @@
|
|
|
19
19
|
"react-dom": "^16.9.0 || ^17.0.1 || ^18.0.0"
|
|
20
20
|
},
|
|
21
21
|
"dependencies": {
|
|
22
|
-
"@alfalab/core-components-base-modal": "^5.0.
|
|
22
|
+
"@alfalab/core-components-base-modal": "^5.0.4",
|
|
23
|
+
"@alfalab/core-components-scrollbar": "^2.1.1",
|
|
23
24
|
"classnames": "^2.3.1"
|
|
24
25
|
}
|
|
25
26
|
}
|