@selfcommunity/react-ui 0.11.0-alpha.50 → 0.11.0-alpha.51
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/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.d.ts +3 -1
- package/lib/cjs/components/NavigationMenuIconButton/NavigationMenuDrawer.js +13 -6
- package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.d.ts +3 -1
- package/lib/esm/components/NavigationMenuIconButton/NavigationMenuDrawer.js +13 -6
- package/lib/umd/react-ui.js +1 -1
- package/package.json +2 -2
|
@@ -26,7 +26,9 @@ export interface NavigationMenuDrawerProps extends DrawerProps {
|
|
|
26
26
|
* Custom Drawer footer content
|
|
27
27
|
* @default null
|
|
28
28
|
*/
|
|
29
|
-
drawerFooterContent?: React.ReactNode
|
|
29
|
+
drawerFooterContent?: React.ReactNode | ((props: {
|
|
30
|
+
handleCloseMenuDrawer: (event: any, reason: 'backdropClick' | 'escapeKeyDown') => void;
|
|
31
|
+
}) => React.ReactNode);
|
|
30
32
|
/**
|
|
31
33
|
* Props to spread to ScrollContainer component
|
|
32
34
|
* This lib use 'react-custom-scrollbars' component to perform scrollbars
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_1 = require("react");
|
|
5
|
+
const react_1 = tslib_1.__importDefault(require("react"));
|
|
6
6
|
const styles_1 = require("@mui/material/styles");
|
|
7
7
|
const material_1 = require("@mui/material");
|
|
8
8
|
const classnames_1 = tslib_1.__importDefault(require("classnames"));
|
|
@@ -11,7 +11,6 @@ const ScrollContainer_1 = tslib_1.__importDefault(require("../../shared/ScrollCo
|
|
|
11
11
|
const DefaultDrawerContent_1 = tslib_1.__importDefault(require("./DefaultDrawerContent"));
|
|
12
12
|
const DefaultHeaderContent_1 = tslib_1.__importDefault(require("./DefaultHeaderContent"));
|
|
13
13
|
const CreateLiveStreamButton_1 = tslib_1.__importDefault(require("../CreateLiveStreamButton"));
|
|
14
|
-
const react_core_1 = require("@selfcommunity/react-core");
|
|
15
14
|
const PREFIX = 'SCNavigationMenuDrawer';
|
|
16
15
|
const classes = {
|
|
17
16
|
root: `${PREFIX}-root`,
|
|
@@ -30,15 +29,23 @@ const Root = (0, styles_1.styled)(material_1.Drawer, {
|
|
|
30
29
|
overridesResolver: (props, styles) => styles.root
|
|
31
30
|
})(({ theme }) => ({}));
|
|
32
31
|
function NavigationMenuDrawer(inProps) {
|
|
33
|
-
var _a;
|
|
34
32
|
// PROPS
|
|
35
33
|
const props = (0, system_1.useThemeProps)({
|
|
36
34
|
props: inProps,
|
|
37
35
|
name: PREFIX
|
|
38
36
|
});
|
|
39
37
|
const { className = null, showDrawerHeader = true, drawerHeaderContent = (0, jsx_runtime_1.jsx)(DefaultHeaderContent_1.default, {}), drawerContent = (0, jsx_runtime_1.jsx)(DefaultDrawerContent_1.default, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = tslib_1.__rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
|
|
40
|
-
const
|
|
41
|
-
|
|
42
|
-
|
|
38
|
+
const footerContent = (() => {
|
|
39
|
+
if (typeof drawerFooterContent === 'function') {
|
|
40
|
+
return drawerFooterContent({ handleCloseMenuDrawer: onClose });
|
|
41
|
+
}
|
|
42
|
+
if (react_1.default.isValidElement(drawerFooterContent)) {
|
|
43
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
44
|
+
// @ts-ignore
|
|
45
|
+
return react_1.default.cloneElement(drawerFooterContent, { handleCloseMenuDrawer: onClose });
|
|
46
|
+
}
|
|
47
|
+
return drawerFooterContent;
|
|
48
|
+
})();
|
|
49
|
+
return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ anchor: "left", className: (0, classnames_1.default)(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "close" }) }))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {})] })), (0, jsx_runtime_1.jsx)(ScrollContainer_1.default, Object.assign({}, ScrollContainerProps, { children: (0, jsx_runtime_1.jsx)(material_1.List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ component: "div", className: classes.drawerFooter }, { children: footerContent || ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: (0, jsx_runtime_1.jsx)(CreateLiveStreamButton_1.default, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))) })) }))] })));
|
|
43
50
|
}
|
|
44
51
|
exports.default = NavigationMenuDrawer;
|
|
@@ -26,7 +26,9 @@ export interface NavigationMenuDrawerProps extends DrawerProps {
|
|
|
26
26
|
* Custom Drawer footer content
|
|
27
27
|
* @default null
|
|
28
28
|
*/
|
|
29
|
-
drawerFooterContent?: React.ReactNode
|
|
29
|
+
drawerFooterContent?: React.ReactNode | ((props: {
|
|
30
|
+
handleCloseMenuDrawer: (event: any, reason: 'backdropClick' | 'escapeKeyDown') => void;
|
|
31
|
+
}) => React.ReactNode);
|
|
30
32
|
/**
|
|
31
33
|
* Props to spread to ScrollContainer component
|
|
32
34
|
* This lib use 'react-custom-scrollbars' component to perform scrollbars
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { __rest } from "tslib";
|
|
2
2
|
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
3
|
-
import
|
|
3
|
+
import React from 'react';
|
|
4
4
|
import { styled } from '@mui/material/styles';
|
|
5
5
|
import { Box, Divider, Drawer, Icon, IconButton, List } from '@mui/material';
|
|
6
6
|
import classNames from 'classnames';
|
|
@@ -9,7 +9,6 @@ import ScrollContainer from '../../shared/ScrollContainer';
|
|
|
9
9
|
import DefaultDrawerContent from './DefaultDrawerContent';
|
|
10
10
|
import DefaultHeaderContent from './DefaultHeaderContent';
|
|
11
11
|
import CreateLiveStreamButton from '../CreateLiveStreamButton';
|
|
12
|
-
import { useSCUser } from '@selfcommunity/react-core';
|
|
13
12
|
const PREFIX = 'SCNavigationMenuDrawer';
|
|
14
13
|
const classes = {
|
|
15
14
|
root: `${PREFIX}-root`,
|
|
@@ -28,14 +27,22 @@ const Root = styled(Drawer, {
|
|
|
28
27
|
overridesResolver: (props, styles) => styles.root
|
|
29
28
|
})(({ theme }) => ({}));
|
|
30
29
|
export default function NavigationMenuDrawer(inProps) {
|
|
31
|
-
var _a;
|
|
32
30
|
// PROPS
|
|
33
31
|
const props = useThemeProps({
|
|
34
32
|
props: inProps,
|
|
35
33
|
name: PREFIX
|
|
36
34
|
});
|
|
37
35
|
const { className = null, showDrawerHeader = true, drawerHeaderContent = _jsx(DefaultHeaderContent, {}), drawerContent = _jsx(DefaultDrawerContent, {}), showDrawerFooterContent = true, drawerFooterContent = null, ScrollContainerProps = { hideTracksWhenNotNeeded: true }, CreateLiveStreamButtonComponentProps = {}, open, onClose } = props, rest = __rest(props, ["className", "showDrawerHeader", "drawerHeaderContent", "drawerContent", "showDrawerFooterContent", "drawerFooterContent", "ScrollContainerProps", "CreateLiveStreamButtonComponentProps", "open", "onClose"]);
|
|
38
|
-
const
|
|
39
|
-
|
|
40
|
-
|
|
36
|
+
const footerContent = (() => {
|
|
37
|
+
if (typeof drawerFooterContent === 'function') {
|
|
38
|
+
return drawerFooterContent({ handleCloseMenuDrawer: onClose });
|
|
39
|
+
}
|
|
40
|
+
if (React.isValidElement(drawerFooterContent)) {
|
|
41
|
+
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
|
42
|
+
// @ts-ignore
|
|
43
|
+
return React.cloneElement(drawerFooterContent, { handleCloseMenuDrawer: onClose });
|
|
44
|
+
}
|
|
45
|
+
return drawerFooterContent;
|
|
46
|
+
})();
|
|
47
|
+
return (_jsxs(Root, Object.assign({ anchor: "left", className: classNames(classes.root, className), open: open, onClose: onClose }, rest, { children: [showDrawerHeader && (_jsxs(_Fragment, { children: [_jsxs(Box, Object.assign({ className: classes.drawerHeader }, { children: [drawerHeaderContent, _jsx(IconButton, Object.assign({ className: classes.drawerHeaderAction, onClick: onClose }, { children: _jsx(Icon, { children: "close" }) }))] })), _jsx(Divider, {})] })), _jsx(ScrollContainer, Object.assign({}, ScrollContainerProps, { children: _jsx(List, Object.assign({ className: classes.drawerContent, onClick: onClose }, { children: drawerContent })) })), showDrawerFooterContent && (_jsx(_Fragment, { children: _jsx(Box, Object.assign({ component: "div", className: classes.drawerFooter }, { children: footerContent || (_jsx(Box, Object.assign({ className: classes.drawerFooterLiveStream }, { children: _jsx(CreateLiveStreamButton, Object.assign({ color: "primary", className: classes.drawerFooterLiveStreamButton, fullWidth: true }, CreateLiveStreamButtonComponentProps)) }))) })) }))] })));
|
|
41
48
|
}
|