@coreui/react 5.0.0-beta.0 → 5.0.0-beta.1
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/README.md +1 -1
- package/dist/cjs/components/dropdown/CDropdownToggle.d.ts +1 -1
- package/dist/cjs/components/sidebar/CSidebar.d.ts +11 -0
- package/dist/cjs/components/sidebar/CSidebar.js +25 -14
- package/dist/cjs/components/sidebar/CSidebar.js.map +1 -1
- package/dist/esm/components/dropdown/CDropdownToggle.d.ts +1 -1
- package/dist/esm/components/sidebar/CSidebar.d.ts +11 -0
- package/dist/esm/components/sidebar/CSidebar.js +25 -14
- package/dist/esm/components/sidebar/CSidebar.js.map +1 -1
- package/package.json +3 -3
- package/src/components/dropdown/CDropdownToggle.tsx +1 -1
- package/src/components/sidebar/CSidebar.tsx +38 -9
package/README.md
CHANGED
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
|
|
47
47
|
Several quick start options are available:
|
|
48
48
|
|
|
49
|
-
- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.0.0-beta.
|
|
49
|
+
- [Download the latest release](https://github.com/coreui/coreui-react/archive/v5.0.0-beta.1.zip)
|
|
50
50
|
- Clone the repo: `git clone https://github.com/coreui/coreui-react.git`
|
|
51
51
|
- Install with [npm](https://www.npmjs.com/): `npm install @coreui/react`
|
|
52
52
|
- Install with [yarn](https://yarnpkg.com/): `yarn add @coreui/react`
|
|
@@ -13,7 +13,7 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
|
|
|
13
13
|
/**
|
|
14
14
|
* If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
|
|
15
15
|
*
|
|
16
|
-
* @since v5.0.0-beta.
|
|
16
|
+
* @since v5.0.0-beta.1
|
|
17
17
|
*/
|
|
18
18
|
navLink?: boolean;
|
|
19
19
|
/**
|
|
@@ -4,6 +4,12 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
4
4
|
* A string of all className you want applied to the component.
|
|
5
5
|
*/
|
|
6
6
|
className?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Sets if the color of text should be colored for a light or dark dark background.
|
|
9
|
+
*
|
|
10
|
+
* @type 'dark' | 'light'
|
|
11
|
+
*/
|
|
12
|
+
colorScheme?: 'dark' | 'light';
|
|
7
13
|
/**
|
|
8
14
|
* Make sidebar narrow.
|
|
9
15
|
*/
|
|
@@ -24,6 +30,11 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
24
30
|
* Set sidebar to overlaid variant.
|
|
25
31
|
*/
|
|
26
32
|
overlaid?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Components placement, there’s no default placement.
|
|
35
|
+
* @type 'start' | 'end'
|
|
36
|
+
*/
|
|
37
|
+
placement?: 'start' | 'end';
|
|
27
38
|
/**
|
|
28
39
|
* Place sidebar in non-static positions.
|
|
29
40
|
*/
|
|
@@ -15,15 +15,16 @@ var isOnMobile = function (element) {
|
|
|
15
15
|
};
|
|
16
16
|
var CSidebar = React.forwardRef(function (_a, ref) {
|
|
17
17
|
var _b;
|
|
18
|
-
var children = _a.children, className = _a.className, narrow = _a.narrow, onHide = _a.onHide, onShow = _a.onShow, onVisibleChange = _a.onVisibleChange, overlaid = _a.overlaid, position = _a.position, size = _a.size, unfoldable = _a.unfoldable, visible = _a.visible, rest = tslib_es6.__rest(_a, ["children", "className", "narrow", "onHide", "onShow", "onVisibleChange", "overlaid", "position", "size", "unfoldable", "visible"]);
|
|
18
|
+
var children = _a.children, className = _a.className, colorScheme = _a.colorScheme, narrow = _a.narrow, onHide = _a.onHide, onShow = _a.onShow, onVisibleChange = _a.onVisibleChange, overlaid = _a.overlaid, placement = _a.placement, position = _a.position, size = _a.size, unfoldable = _a.unfoldable, visible = _a.visible, rest = tslib_es6.__rest(_a, ["children", "className", "colorScheme", "narrow", "onHide", "onShow", "onVisibleChange", "overlaid", "placement", "position", "size", "unfoldable", "visible"]);
|
|
19
19
|
var sidebarRef = React.useRef(null);
|
|
20
20
|
var forkedRef = useForkedRef.useForkedRef(ref, sidebarRef);
|
|
21
|
-
var _c = React.useState(
|
|
22
|
-
var _d = React.useState(
|
|
23
|
-
var _e = React.useState(),
|
|
21
|
+
var _c = React.useState(), inViewport = _c[0], setInViewport = _c[1];
|
|
22
|
+
var _d = React.useState(false), mobile = _d[0], setMobile = _d[1];
|
|
23
|
+
var _e = React.useState(false), visibleMobile = _e[0], setVisibleMobile = _e[1];
|
|
24
|
+
var _f = React.useState(visible !== undefined ? visible : overlaid ? false : true), visibleDesktop = _f[0], setVisibleDesktop = _f[1];
|
|
24
25
|
React.useEffect(function () {
|
|
25
26
|
sidebarRef.current && setMobile(isOnMobile(sidebarRef.current));
|
|
26
|
-
|
|
27
|
+
visible !== undefined && handleVisibleChange(visible);
|
|
27
28
|
}, [visible]);
|
|
28
29
|
React.useEffect(function () {
|
|
29
30
|
inViewport !== undefined && onVisibleChange && onVisibleChange(inViewport);
|
|
@@ -31,7 +32,7 @@ var CSidebar = React.forwardRef(function (_a, ref) {
|
|
|
31
32
|
inViewport && onShow && onShow();
|
|
32
33
|
}, [inViewport]);
|
|
33
34
|
React.useEffect(function () {
|
|
34
|
-
mobile &&
|
|
35
|
+
mobile && setVisibleMobile(false);
|
|
35
36
|
}, [mobile]);
|
|
36
37
|
React.useEffect(function () {
|
|
37
38
|
var _a, _b;
|
|
@@ -55,8 +56,15 @@ var CSidebar = React.forwardRef(function (_a, ref) {
|
|
|
55
56
|
});
|
|
56
57
|
};
|
|
57
58
|
});
|
|
59
|
+
var handleVisibleChange = function (visible) {
|
|
60
|
+
if (mobile) {
|
|
61
|
+
setVisibleMobile(visible);
|
|
62
|
+
return;
|
|
63
|
+
}
|
|
64
|
+
setVisibleDesktop(visible);
|
|
65
|
+
};
|
|
58
66
|
var handleHide = function () {
|
|
59
|
-
|
|
67
|
+
handleVisibleChange(false);
|
|
60
68
|
};
|
|
61
69
|
var handleResize = function () {
|
|
62
70
|
sidebarRef.current && setMobile(isOnMobile(sidebarRef.current));
|
|
@@ -85,28 +93,31 @@ var CSidebar = React.forwardRef(function (_a, ref) {
|
|
|
85
93
|
handleHide();
|
|
86
94
|
};
|
|
87
95
|
return (React.createElement(React.Fragment, null,
|
|
88
|
-
React.createElement("div", tslib_es6.__assign({ className: index.default('sidebar', (_b = {
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
96
|
+
React.createElement("div", tslib_es6.__assign({ className: index.default('sidebar', (_b = {},
|
|
97
|
+
_b["sidebar-".concat(colorScheme)] = colorScheme,
|
|
98
|
+
_b['sidebar-narrow'] = narrow,
|
|
99
|
+
_b['sidebar-overlaid'] = overlaid,
|
|
100
|
+
_b["sidebar-".concat(placement)] = placement,
|
|
92
101
|
_b["sidebar-".concat(position)] = position,
|
|
93
102
|
_b["sidebar-".concat(size)] = size,
|
|
94
103
|
_b['sidebar-narrow-unfoldable'] = unfoldable,
|
|
95
|
-
_b.show =
|
|
96
|
-
_b.hide =
|
|
104
|
+
_b.show = (mobile && visibleMobile) || (overlaid && visibleDesktop),
|
|
105
|
+
_b.hide = visibleDesktop === false && !mobile && !overlaid,
|
|
97
106
|
_b), className) }, rest, { ref: forkedRef }), children),
|
|
98
107
|
typeof window !== 'undefined' &&
|
|
99
108
|
mobile &&
|
|
100
|
-
ReactDOM.createPortal(React.createElement(CBackdrop.CBackdrop, { className: "sidebar-backdrop", visible:
|
|
109
|
+
ReactDOM.createPortal(React.createElement(CBackdrop.CBackdrop, { className: "sidebar-backdrop", visible: mobile && visibleMobile }), document.body)));
|
|
101
110
|
});
|
|
102
111
|
CSidebar.propTypes = {
|
|
103
112
|
children: PropTypes.node,
|
|
104
113
|
className: PropTypes.string,
|
|
114
|
+
colorScheme: PropTypes.oneOf(['dark', 'light']),
|
|
105
115
|
narrow: PropTypes.bool,
|
|
106
116
|
onHide: PropTypes.func,
|
|
107
117
|
onShow: PropTypes.func,
|
|
108
118
|
onVisibleChange: PropTypes.func,
|
|
109
119
|
overlaid: PropTypes.bool,
|
|
120
|
+
placement: PropTypes.oneOf(['start', 'end']),
|
|
110
121
|
position: PropTypes.oneOf(['fixed', 'sticky']),
|
|
111
122
|
size: PropTypes.oneOf(['sm', 'lg', 'xl']),
|
|
112
123
|
unfoldable: PropTypes.bool,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CSidebar.js","sources":["../../../../src/components/sidebar/CSidebar.tsx"],"sourcesContent":[null],"names":["forwardRef","__rest","useRef","useForkedRef","useState","useEffect","isInViewport","__assign","classNames","createPortal","CBackdrop"],"mappings":";;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"CSidebar.js","sources":["../../../../src/components/sidebar/CSidebar.tsx"],"sourcesContent":[null],"names":["forwardRef","__rest","useRef","useForkedRef","useState","useEffect","isInViewport","__assign","classNames","createPortal","CBackdrop"],"mappings":"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"}
|
|
@@ -13,7 +13,7 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
|
|
|
13
13
|
/**
|
|
14
14
|
* If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
|
|
15
15
|
*
|
|
16
|
-
* @since v5.0.0-beta.
|
|
16
|
+
* @since v5.0.0-beta.1
|
|
17
17
|
*/
|
|
18
18
|
navLink?: boolean;
|
|
19
19
|
/**
|
|
@@ -4,6 +4,12 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
4
4
|
* A string of all className you want applied to the component.
|
|
5
5
|
*/
|
|
6
6
|
className?: string;
|
|
7
|
+
/**
|
|
8
|
+
* Sets if the color of text should be colored for a light or dark dark background.
|
|
9
|
+
*
|
|
10
|
+
* @type 'dark' | 'light'
|
|
11
|
+
*/
|
|
12
|
+
colorScheme?: 'dark' | 'light';
|
|
7
13
|
/**
|
|
8
14
|
* Make sidebar narrow.
|
|
9
15
|
*/
|
|
@@ -24,6 +30,11 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
24
30
|
* Set sidebar to overlaid variant.
|
|
25
31
|
*/
|
|
26
32
|
overlaid?: boolean;
|
|
33
|
+
/**
|
|
34
|
+
* Components placement, there’s no default placement.
|
|
35
|
+
* @type 'start' | 'end'
|
|
36
|
+
*/
|
|
37
|
+
placement?: 'start' | 'end';
|
|
27
38
|
/**
|
|
28
39
|
* Place sidebar in non-static positions.
|
|
29
40
|
*/
|
|
@@ -13,15 +13,16 @@ var isOnMobile = function (element) {
|
|
|
13
13
|
};
|
|
14
14
|
var CSidebar = forwardRef(function (_a, ref) {
|
|
15
15
|
var _b;
|
|
16
|
-
var children = _a.children, className = _a.className, narrow = _a.narrow, onHide = _a.onHide, onShow = _a.onShow, onVisibleChange = _a.onVisibleChange, overlaid = _a.overlaid, position = _a.position, size = _a.size, unfoldable = _a.unfoldable, visible = _a.visible, rest = __rest(_a, ["children", "className", "narrow", "onHide", "onShow", "onVisibleChange", "overlaid", "position", "size", "unfoldable", "visible"]);
|
|
16
|
+
var children = _a.children, className = _a.className, colorScheme = _a.colorScheme, narrow = _a.narrow, onHide = _a.onHide, onShow = _a.onShow, onVisibleChange = _a.onVisibleChange, overlaid = _a.overlaid, placement = _a.placement, position = _a.position, size = _a.size, unfoldable = _a.unfoldable, visible = _a.visible, rest = __rest(_a, ["children", "className", "colorScheme", "narrow", "onHide", "onShow", "onVisibleChange", "overlaid", "placement", "position", "size", "unfoldable", "visible"]);
|
|
17
17
|
var sidebarRef = useRef(null);
|
|
18
18
|
var forkedRef = useForkedRef(ref, sidebarRef);
|
|
19
|
-
var _c = useState(
|
|
20
|
-
var _d = useState(
|
|
21
|
-
var _e = useState(),
|
|
19
|
+
var _c = useState(), inViewport = _c[0], setInViewport = _c[1];
|
|
20
|
+
var _d = useState(false), mobile = _d[0], setMobile = _d[1];
|
|
21
|
+
var _e = useState(false), visibleMobile = _e[0], setVisibleMobile = _e[1];
|
|
22
|
+
var _f = useState(visible !== undefined ? visible : overlaid ? false : true), visibleDesktop = _f[0], setVisibleDesktop = _f[1];
|
|
22
23
|
useEffect(function () {
|
|
23
24
|
sidebarRef.current && setMobile(isOnMobile(sidebarRef.current));
|
|
24
|
-
|
|
25
|
+
visible !== undefined && handleVisibleChange(visible);
|
|
25
26
|
}, [visible]);
|
|
26
27
|
useEffect(function () {
|
|
27
28
|
inViewport !== undefined && onVisibleChange && onVisibleChange(inViewport);
|
|
@@ -29,7 +30,7 @@ var CSidebar = forwardRef(function (_a, ref) {
|
|
|
29
30
|
inViewport && onShow && onShow();
|
|
30
31
|
}, [inViewport]);
|
|
31
32
|
useEffect(function () {
|
|
32
|
-
mobile &&
|
|
33
|
+
mobile && setVisibleMobile(false);
|
|
33
34
|
}, [mobile]);
|
|
34
35
|
useEffect(function () {
|
|
35
36
|
var _a, _b;
|
|
@@ -53,8 +54,15 @@ var CSidebar = forwardRef(function (_a, ref) {
|
|
|
53
54
|
});
|
|
54
55
|
};
|
|
55
56
|
});
|
|
57
|
+
var handleVisibleChange = function (visible) {
|
|
58
|
+
if (mobile) {
|
|
59
|
+
setVisibleMobile(visible);
|
|
60
|
+
return;
|
|
61
|
+
}
|
|
62
|
+
setVisibleDesktop(visible);
|
|
63
|
+
};
|
|
56
64
|
var handleHide = function () {
|
|
57
|
-
|
|
65
|
+
handleVisibleChange(false);
|
|
58
66
|
};
|
|
59
67
|
var handleResize = function () {
|
|
60
68
|
sidebarRef.current && setMobile(isOnMobile(sidebarRef.current));
|
|
@@ -83,28 +91,31 @@ var CSidebar = forwardRef(function (_a, ref) {
|
|
|
83
91
|
handleHide();
|
|
84
92
|
};
|
|
85
93
|
return (React.createElement(React.Fragment, null,
|
|
86
|
-
React.createElement("div", __assign({ className: classNames('sidebar', (_b = {
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
94
|
+
React.createElement("div", __assign({ className: classNames('sidebar', (_b = {},
|
|
95
|
+
_b["sidebar-".concat(colorScheme)] = colorScheme,
|
|
96
|
+
_b['sidebar-narrow'] = narrow,
|
|
97
|
+
_b['sidebar-overlaid'] = overlaid,
|
|
98
|
+
_b["sidebar-".concat(placement)] = placement,
|
|
90
99
|
_b["sidebar-".concat(position)] = position,
|
|
91
100
|
_b["sidebar-".concat(size)] = size,
|
|
92
101
|
_b['sidebar-narrow-unfoldable'] = unfoldable,
|
|
93
|
-
_b.show =
|
|
94
|
-
_b.hide =
|
|
102
|
+
_b.show = (mobile && visibleMobile) || (overlaid && visibleDesktop),
|
|
103
|
+
_b.hide = visibleDesktop === false && !mobile && !overlaid,
|
|
95
104
|
_b), className) }, rest, { ref: forkedRef }), children),
|
|
96
105
|
typeof window !== 'undefined' &&
|
|
97
106
|
mobile &&
|
|
98
|
-
createPortal(React.createElement(CBackdrop, { className: "sidebar-backdrop", visible:
|
|
107
|
+
createPortal(React.createElement(CBackdrop, { className: "sidebar-backdrop", visible: mobile && visibleMobile }), document.body)));
|
|
99
108
|
});
|
|
100
109
|
CSidebar.propTypes = {
|
|
101
110
|
children: PropTypes.node,
|
|
102
111
|
className: PropTypes.string,
|
|
112
|
+
colorScheme: PropTypes.oneOf(['dark', 'light']),
|
|
103
113
|
narrow: PropTypes.bool,
|
|
104
114
|
onHide: PropTypes.func,
|
|
105
115
|
onShow: PropTypes.func,
|
|
106
116
|
onVisibleChange: PropTypes.func,
|
|
107
117
|
overlaid: PropTypes.bool,
|
|
118
|
+
placement: PropTypes.oneOf(['start', 'end']),
|
|
108
119
|
position: PropTypes.oneOf(['fixed', 'sticky']),
|
|
109
120
|
size: PropTypes.oneOf(['sm', 'lg', 'xl']),
|
|
110
121
|
unfoldable: PropTypes.bool,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CSidebar.js","sources":["../../../../src/components/sidebar/CSidebar.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"CSidebar.js","sources":["../../../../src/components/sidebar/CSidebar.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@coreui/react",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.1",
|
|
4
4
|
"description": "UI Components Library for React.js",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"test:update": "jest --coverage --updateSnapshot"
|
|
42
42
|
},
|
|
43
43
|
"devDependencies": {
|
|
44
|
-
"@coreui/coreui": "^5.0.0-beta.
|
|
44
|
+
"@coreui/coreui": "^5.0.0-beta.1",
|
|
45
45
|
"@popperjs/core": "^2.11.8",
|
|
46
46
|
"@rollup/plugin-commonjs": "^25.0.7",
|
|
47
47
|
"@rollup/plugin-node-resolve": "^15.2.3",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"typescript": "^5.2.2"
|
|
68
68
|
},
|
|
69
69
|
"peerDependencies": {
|
|
70
|
-
"@coreui/coreui": "^5.0.0-beta.
|
|
70
|
+
"@coreui/coreui": "^5.0.0-beta.1",
|
|
71
71
|
"@popperjs/core": "^2.11.8",
|
|
72
72
|
"prop-types": "^15.8.1",
|
|
73
73
|
"react": ">=17",
|
|
@@ -21,7 +21,7 @@ export interface CDropdownToggleProps extends Omit<CButtonProps, 'type'> {
|
|
|
21
21
|
/**
|
|
22
22
|
* If a dropdown `variant` is set to `nav-item` then render the toggler as a link instead of a button.
|
|
23
23
|
*
|
|
24
|
-
* @since v5.0.0-beta.
|
|
24
|
+
* @since v5.0.0-beta.1
|
|
25
25
|
*/
|
|
26
26
|
navLink?: boolean
|
|
27
27
|
/**
|
|
@@ -13,6 +13,12 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
13
13
|
* A string of all className you want applied to the component.
|
|
14
14
|
*/
|
|
15
15
|
className?: string
|
|
16
|
+
/**
|
|
17
|
+
* Sets if the color of text should be colored for a light or dark dark background.
|
|
18
|
+
*
|
|
19
|
+
* @type 'dark' | 'light'
|
|
20
|
+
*/
|
|
21
|
+
colorScheme?: 'dark' | 'light'
|
|
16
22
|
/**
|
|
17
23
|
* Make sidebar narrow.
|
|
18
24
|
*/
|
|
@@ -33,6 +39,11 @@ export interface CSidebarProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
33
39
|
* Set sidebar to overlaid variant.
|
|
34
40
|
*/
|
|
35
41
|
overlaid?: boolean
|
|
42
|
+
/**
|
|
43
|
+
* Components placement, there’s no default placement.
|
|
44
|
+
* @type 'start' | 'end'
|
|
45
|
+
*/
|
|
46
|
+
placement?: 'start' | 'end'
|
|
36
47
|
/**
|
|
37
48
|
* Place sidebar in non-static positions.
|
|
38
49
|
*/
|
|
@@ -59,11 +70,13 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
|
|
|
59
70
|
{
|
|
60
71
|
children,
|
|
61
72
|
className,
|
|
73
|
+
colorScheme,
|
|
62
74
|
narrow,
|
|
63
75
|
onHide,
|
|
64
76
|
onShow,
|
|
65
77
|
onVisibleChange,
|
|
66
78
|
overlaid,
|
|
79
|
+
placement,
|
|
67
80
|
position,
|
|
68
81
|
size,
|
|
69
82
|
unfoldable,
|
|
@@ -74,14 +87,17 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
|
|
|
74
87
|
) => {
|
|
75
88
|
const sidebarRef = useRef<HTMLDivElement>(null)
|
|
76
89
|
const forkedRef = useForkedRef(ref, sidebarRef)
|
|
77
|
-
|
|
78
|
-
const [_visible, setVisible] = useState(visible)
|
|
90
|
+
|
|
79
91
|
const [inViewport, setInViewport] = useState<boolean>()
|
|
92
|
+
const [mobile, setMobile] = useState(false)
|
|
93
|
+
const [visibleMobile, setVisibleMobile] = useState<boolean>(false)
|
|
94
|
+
const [visibleDesktop, setVisibleDesktop] = useState<boolean>(
|
|
95
|
+
visible !== undefined ? visible : overlaid ? false : true,
|
|
96
|
+
)
|
|
80
97
|
|
|
81
98
|
useEffect(() => {
|
|
82
99
|
sidebarRef.current && setMobile(isOnMobile(sidebarRef.current))
|
|
83
|
-
|
|
84
|
-
setVisible(visible)
|
|
100
|
+
visible !== undefined && handleVisibleChange(visible)
|
|
85
101
|
}, [visible])
|
|
86
102
|
|
|
87
103
|
useEffect(() => {
|
|
@@ -91,7 +107,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
|
|
|
91
107
|
}, [inViewport])
|
|
92
108
|
|
|
93
109
|
useEffect(() => {
|
|
94
|
-
mobile &&
|
|
110
|
+
mobile && setVisibleMobile(false)
|
|
95
111
|
}, [mobile])
|
|
96
112
|
|
|
97
113
|
useEffect(() => {
|
|
@@ -119,8 +135,17 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
|
|
|
119
135
|
}
|
|
120
136
|
})
|
|
121
137
|
|
|
138
|
+
const handleVisibleChange = (visible: boolean) => {
|
|
139
|
+
if (mobile) {
|
|
140
|
+
setVisibleMobile(visible)
|
|
141
|
+
return
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
setVisibleDesktop(visible)
|
|
145
|
+
}
|
|
146
|
+
|
|
122
147
|
const handleHide = () => {
|
|
123
|
-
|
|
148
|
+
handleVisibleChange(false)
|
|
124
149
|
}
|
|
125
150
|
|
|
126
151
|
const handleResize = () => {
|
|
@@ -162,13 +187,15 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
|
|
|
162
187
|
className={classNames(
|
|
163
188
|
'sidebar',
|
|
164
189
|
{
|
|
190
|
+
[`sidebar-${colorScheme}`]: colorScheme,
|
|
165
191
|
'sidebar-narrow': narrow,
|
|
166
192
|
'sidebar-overlaid': overlaid,
|
|
193
|
+
[`sidebar-${placement}`]: placement,
|
|
167
194
|
[`sidebar-${position}`]: position,
|
|
168
195
|
[`sidebar-${size}`]: size,
|
|
169
196
|
'sidebar-narrow-unfoldable': unfoldable,
|
|
170
|
-
show:
|
|
171
|
-
hide:
|
|
197
|
+
show: (mobile && visibleMobile) || (overlaid && visibleDesktop),
|
|
198
|
+
hide: visibleDesktop === false && !mobile && !overlaid,
|
|
172
199
|
},
|
|
173
200
|
className,
|
|
174
201
|
)}
|
|
@@ -180,7 +207,7 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
|
|
|
180
207
|
{typeof window !== 'undefined' &&
|
|
181
208
|
mobile &&
|
|
182
209
|
createPortal(
|
|
183
|
-
<CBackdrop className="sidebar-backdrop" visible={
|
|
210
|
+
<CBackdrop className="sidebar-backdrop" visible={mobile && visibleMobile} />,
|
|
184
211
|
document.body,
|
|
185
212
|
)}
|
|
186
213
|
</>
|
|
@@ -191,11 +218,13 @@ export const CSidebar = forwardRef<HTMLDivElement, CSidebarProps>(
|
|
|
191
218
|
CSidebar.propTypes = {
|
|
192
219
|
children: PropTypes.node,
|
|
193
220
|
className: PropTypes.string,
|
|
221
|
+
colorScheme: PropTypes.oneOf(['dark', 'light']),
|
|
194
222
|
narrow: PropTypes.bool,
|
|
195
223
|
onHide: PropTypes.func,
|
|
196
224
|
onShow: PropTypes.func,
|
|
197
225
|
onVisibleChange: PropTypes.func,
|
|
198
226
|
overlaid: PropTypes.bool,
|
|
227
|
+
placement: PropTypes.oneOf(['start', 'end']),
|
|
199
228
|
position: PropTypes.oneOf(['fixed', 'sticky']),
|
|
200
229
|
size: PropTypes.oneOf(['sm', 'lg', 'xl']),
|
|
201
230
|
unfoldable: PropTypes.bool,
|