@xyo-network/react-appbar 2.25.40 → 2.25.41
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/Toolbar/System/DefaultMenuItems.d.ts +2 -0
- package/dist/cjs/components/Toolbar/System/DefaultMenuItems.js +13 -0
- package/dist/cjs/components/Toolbar/System/DefaultMenuItems.js.map +1 -0
- package/dist/cjs/components/Toolbar/System/SiteMenu.d.ts +3 -2
- package/dist/cjs/components/Toolbar/System/SiteMenu.js +7 -29
- package/dist/cjs/components/Toolbar/System/SiteMenu.js.map +1 -1
- package/dist/cjs/components/Toolbar/System/SystemToolbar.d.ts +2 -3
- package/dist/cjs/components/Toolbar/System/SystemToolbar.js +2 -2
- package/dist/cjs/components/Toolbar/System/SystemToolbar.js.map +1 -1
- package/dist/docs.json +1272 -1235
- package/dist/esm/components/Toolbar/System/DefaultMenuItems.d.ts +2 -0
- package/dist/esm/components/Toolbar/System/DefaultMenuItems.js +8 -0
- package/dist/esm/components/Toolbar/System/DefaultMenuItems.js.map +1 -0
- package/dist/esm/components/Toolbar/System/SiteMenu.d.ts +3 -2
- package/dist/esm/components/Toolbar/System/SiteMenu.js +10 -32
- package/dist/esm/components/Toolbar/System/SiteMenu.js.map +1 -1
- package/dist/esm/components/Toolbar/System/SystemToolbar.d.ts +2 -3
- package/dist/esm/components/Toolbar/System/SystemToolbar.js +2 -2
- package/dist/esm/components/Toolbar/System/SystemToolbar.js.map +1 -1
- package/package.json +14 -14
- package/src/components/Toolbar/System/DefaultMenuItems.tsx +18 -0
- package/src/components/Toolbar/System/SiteMenu.tsx +21 -55
- package/src/components/Toolbar/System/SystemToolbar.tsx +5 -4
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.DefaultMenuItems = void 0;
|
|
4
|
+
const tslib_1 = require("tslib");
|
|
5
|
+
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
+
const Settings_1 = tslib_1.__importDefault(require("@mui/icons-material/Settings"));
|
|
7
|
+
const material_1 = require("@mui/material");
|
|
8
|
+
const react_shared_1 = require("@xyo-network/react-shared");
|
|
9
|
+
const DefaultMenuItems = () => {
|
|
10
|
+
return ((0, jsx_runtime_1.jsx)(material_1.List, { children: (0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(react_shared_1.ListItemButtonEx, Object.assign({ to: "/settings" }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Settings_1.default, {}) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: "Settings" })] })) })) }));
|
|
11
|
+
};
|
|
12
|
+
exports.DefaultMenuItems = DefaultMenuItems;
|
|
13
|
+
//# sourceMappingURL=DefaultMenuItems.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DefaultMenuItems.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/DefaultMenuItems.tsx"],"names":[],"mappings":";;;;;AAAA,oFAAuD;AACvD,4CAA0E;AAC1E,4DAA4D;AAErD,MAAM,gBAAgB,GAAa,GAAG,EAAE;IAC7C,OAAO,CACL,uBAAC,eAAI,cACH,uBAAC,mBAAQ,kBAAC,cAAc,sBACtB,wBAAC,+BAAgB,kBAAC,EAAE,EAAC,WAAW,iBAC9B,uBAAC,uBAAY,cACX,uBAAC,kBAAY,KAAG,GACH,EACf,uBAAC,uBAAY,IAAC,OAAO,EAAC,UAAU,GAAG,KAClB,IACV,GACN,CACR,CAAA;AACH,CAAC,CAAA;AAbY,QAAA,gBAAgB,oBAa5B"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { FlexBoxProps } from '@xylabs/sdk-react';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
3
|
import { To } from 'react-router-dom';
|
|
4
4
|
export interface SiteMenuItem {
|
|
5
5
|
name: string;
|
|
@@ -9,6 +9,7 @@ export interface SiteMenuItem {
|
|
|
9
9
|
}
|
|
10
10
|
export interface SiteMenuProps extends FlexBoxProps {
|
|
11
11
|
hideSettingsMenuItem?: boolean;
|
|
12
|
-
|
|
12
|
+
menu?: ReactNode;
|
|
13
|
+
side?: 'left' | 'right' | 'top' | 'bottom';
|
|
13
14
|
}
|
|
14
15
|
export declare const SiteMenu: React.FC<SiteMenuProps>;
|
|
@@ -3,39 +3,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
exports.SiteMenu = void 0;
|
|
4
4
|
const tslib_1 = require("tslib");
|
|
5
5
|
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
6
|
-
const
|
|
6
|
+
const Menu_1 = tslib_1.__importDefault(require("@mui/icons-material/Menu"));
|
|
7
7
|
const material_1 = require("@mui/material");
|
|
8
8
|
const sdk_react_1 = require("@xylabs/sdk-react");
|
|
9
9
|
const react_1 = require("react");
|
|
10
|
-
const
|
|
10
|
+
const DefaultMenuItems_1 = require("./DefaultMenuItems");
|
|
11
11
|
const SiteMenu = (_a) => {
|
|
12
|
-
var {
|
|
13
|
-
const [
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
setMenuElement(null);
|
|
18
|
-
};
|
|
19
|
-
const ref = (0, react_1.useRef)(null);
|
|
20
|
-
return ((0, jsx_runtime_1.jsxs)(sdk_react_1.FlexRow, Object.assign({ alignItems: "stretch" }, props, { children: [(0, jsx_runtime_1.jsx)(sdk_react_1.LinkEx, Object.assign({ color: "inherit", onClick: () => {
|
|
21
|
-
setMenuElement(ref.current);
|
|
22
|
-
} }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { alignItems: 'center', cursor: 'pointer', display: 'flex' }, ref: ref }, { children: (0, jsx_runtime_1.jsx)(icons_material_1.Menu, { fontSize: "large" }) })) })), (0, jsx_runtime_1.jsxs)(material_1.Menu, Object.assign({ anchorEl: menuElement, open: open, onClose: handleMenuClose }, { children: [menuItems === null || menuItems === void 0 ? void 0 : menuItems.map(({ name, to, href, onClick }) => {
|
|
23
|
-
return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: () => {
|
|
24
|
-
if (onClick) {
|
|
25
|
-
onClick();
|
|
26
|
-
}
|
|
27
|
-
else if (to) {
|
|
28
|
-
navigate(to);
|
|
29
|
-
}
|
|
30
|
-
else if (href) {
|
|
31
|
-
window.open(href);
|
|
32
|
-
}
|
|
33
|
-
handleMenuClose();
|
|
34
|
-
}, disableRipple: true }, { children: name }), name));
|
|
35
|
-
}), hideSettingsMenuItem ? null : ((0, jsx_runtime_1.jsx)(material_1.MenuItem, Object.assign({ onClick: () => {
|
|
36
|
-
navigate('/settings');
|
|
37
|
-
handleMenuClose();
|
|
38
|
-
}, disableRipple: true }, { children: "Settings" })))] }))] })));
|
|
12
|
+
var { side, menu } = _a, props = tslib_1.__rest(_a, ["side", "menu"]);
|
|
13
|
+
const [open, setOpen] = (0, react_1.useState)(false);
|
|
14
|
+
return ((0, jsx_runtime_1.jsxs)(sdk_react_1.FlexRow, Object.assign({ alignItems: "stretch" }, props, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ size: "small", color: "inherit", onClick: () => {
|
|
15
|
+
setOpen(!open);
|
|
16
|
+
} }, { children: (0, jsx_runtime_1.jsx)(Menu_1.default, { fontSize: "large" }) })), (0, jsx_runtime_1.jsx)(material_1.SwipeableDrawer, Object.assign({ anchor: side !== null && side !== void 0 ? side : 'left', open: open, onClose: () => setOpen(false), onOpen: () => setOpen(true) }, { children: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ width: "auto", role: "presentation", onClick: () => setOpen(false), onKeyDown: () => setOpen(false) }, { children: menu !== null && menu !== void 0 ? menu : (0, jsx_runtime_1.jsx)(DefaultMenuItems_1.DefaultMenuItems, {}) })) }))] })));
|
|
39
17
|
};
|
|
40
18
|
exports.SiteMenu = SiteMenu;
|
|
41
19
|
//# sourceMappingURL=SiteMenu.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SiteMenu.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SiteMenu.tsx"],"names":[],"mappings":";;;;;AAAA,
|
|
1
|
+
{"version":3,"file":"SiteMenu.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SiteMenu.tsx"],"names":[],"mappings":";;;;;AAAA,4EAA+C;AAC/C,4CAAgE;AAChE,iDAAyD;AACzD,iCAA2C;AAG3C,yDAAqD;AAe9C,MAAM,QAAQ,GAA4B,CAAC,EAAwB,EAAE,EAAE;QAA5B,EAAE,IAAI,EAAE,IAAI,OAAY,EAAP,KAAK,sBAAtB,gBAAwB,CAAF;IACtE,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,IAAA,gBAAQ,EAAC,KAAK,CAAC,CAAA;IAEvC,OAAO,CACL,wBAAC,mBAAO,kBAAC,UAAU,EAAC,SAAS,IAAK,KAAK,eACrC,uBAAC,qBAAU,kBACT,IAAI,EAAC,OAAO,EACZ,KAAK,EAAC,SAAS,EACf,OAAO,EAAE,GAAG,EAAE;oBACZ,OAAO,CAAC,CAAC,IAAI,CAAC,CAAA;gBAChB,CAAC,gBAED,uBAAC,cAAQ,IAAC,QAAQ,EAAC,OAAO,GAAG,IAClB,EACb,uBAAC,0BAAe,kBAAC,MAAM,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,IAAI,CAAC,gBAC7G,uBAAC,cAAG,kBAAC,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,cAAc,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC,OAAO,CAAC,KAAK,CAAC,gBACjG,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,uBAAC,mCAAgB,KAAG,IACzB,IACU,KACV,CACX,CAAA;AACH,CAAC,CAAA;AArBY,QAAA,QAAQ,YAqBpB"}
|
|
@@ -1,14 +1,13 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
1
|
import { ToolbarProps } from '@mui/material';
|
|
3
2
|
import { SelectExProps } from '@xylabs/sdk-react';
|
|
4
3
|
import { NetworkSelectExProps } from '@xyo-network/react-network';
|
|
5
|
-
import {
|
|
4
|
+
import { ReactNode } from 'react';
|
|
6
5
|
export interface SystemToolbarProps extends ToolbarProps {
|
|
7
6
|
networkSelectProps?: NetworkSelectExProps;
|
|
8
7
|
archiveSelectProps?: SelectExProps<string>;
|
|
9
8
|
hideNetworkSelect?: boolean;
|
|
10
9
|
hideArchiveSelect?: boolean;
|
|
11
|
-
|
|
10
|
+
menuItems?: ReactNode;
|
|
12
11
|
darkModeButton?: boolean;
|
|
13
12
|
authButton?: boolean;
|
|
14
13
|
noMenu?: boolean;
|
|
@@ -11,8 +11,8 @@ const react_network_1 = require("@xyo-network/react-network");
|
|
|
11
11
|
const react_shared_1 = require("@xyo-network/react-shared");
|
|
12
12
|
const SiteMenu_1 = require("./SiteMenu");
|
|
13
13
|
const SystemToolbar = (_a) => {
|
|
14
|
-
var { children, networkSelectProps, archiveSelectProps, hideNetworkSelect, hideArchiveSelect,
|
|
15
|
-
return ((0, jsx_runtime_1.jsxs)(material_1.Toolbar, Object.assign({}, props, { children: [hideNetworkSelect ? null : ((0, jsx_runtime_1.jsx)(sdk_react_1.FlexRow, Object.assign({ marginX: 0.5, maxWidth: 120 }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "elevation" }, { children: (0, jsx_runtime_1.jsx)(react_network_1.NetworkSelectEx, Object.assign({ fullWidth: true }, networkSelectProps)) })) }))), hideArchiveSelect ? null : ((0, jsx_runtime_1.jsx)(sdk_react_1.FlexRow, Object.assign({ marginX: 0.5, maxWidth: 120 }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "elevation" }, { children: (0, jsx_runtime_1.jsx)(react_archive_1.ArchiveSelectEx, Object.assign({ fullWidth: true }, archiveSelectProps)) })) }))), children, authButton ? (0, jsx_runtime_1.jsx)(react_auth_1.AuthStatusIconButton, { color: "inherit" }) : null, darkModeButton ? (0, jsx_runtime_1.jsx)(react_shared_1.DarkModeIconButton, { color: "inherit" }) : null, noMenu ? null : (0, jsx_runtime_1.jsx)(SiteMenu_1.SiteMenu,
|
|
14
|
+
var { children, networkSelectProps, archiveSelectProps, hideNetworkSelect, hideArchiveSelect, menuItems, darkModeButton = false, authButton = false, noMenu = false } = _a, props = tslib_1.__rest(_a, ["children", "networkSelectProps", "archiveSelectProps", "hideNetworkSelect", "hideArchiveSelect", "menuItems", "darkModeButton", "authButton", "noMenu"]);
|
|
15
|
+
return ((0, jsx_runtime_1.jsxs)(material_1.Toolbar, Object.assign({}, props, { children: [hideNetworkSelect ? null : ((0, jsx_runtime_1.jsx)(sdk_react_1.FlexRow, Object.assign({ marginX: 0.5, maxWidth: 120 }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "elevation" }, { children: (0, jsx_runtime_1.jsx)(react_network_1.NetworkSelectEx, Object.assign({ fullWidth: true }, networkSelectProps)) })) }))), hideArchiveSelect ? null : ((0, jsx_runtime_1.jsx)(sdk_react_1.FlexRow, Object.assign({ marginX: 0.5, maxWidth: 120 }, { children: (0, jsx_runtime_1.jsx)(material_1.Paper, Object.assign({ variant: "elevation" }, { children: (0, jsx_runtime_1.jsx)(react_archive_1.ArchiveSelectEx, Object.assign({ fullWidth: true }, archiveSelectProps)) })) }))), children, authButton ? (0, jsx_runtime_1.jsx)(react_auth_1.AuthStatusIconButton, { color: "inherit" }) : null, darkModeButton ? (0, jsx_runtime_1.jsx)(react_shared_1.DarkModeIconButton, { color: "inherit" }) : null, noMenu ? null : (0, jsx_runtime_1.jsx)(SiteMenu_1.SiteMenu, { menu: menuItems })] })));
|
|
16
16
|
};
|
|
17
17
|
exports.SystemToolbar = SystemToolbar;
|
|
18
18
|
//# sourceMappingURL=SystemToolbar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SystemToolbar.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SystemToolbar.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA4D;AAC5D,iDAA0D;AAC1D,8DAA4D;AAC5D,wDAA8D;AAC9D,8DAAkF;AAClF,4DAA8D;
|
|
1
|
+
{"version":3,"file":"SystemToolbar.js","sourceRoot":"","sources":["../../../../../src/components/Toolbar/System/SystemToolbar.tsx"],"names":[],"mappings":";;;;;AAAA,4CAA4D;AAC5D,iDAA0D;AAC1D,8DAA4D;AAC5D,wDAA8D;AAC9D,8DAAkF;AAClF,4DAA8D;AAG9D,yCAAqC;AAa9B,MAAM,aAAa,GAAiC,CAAC,EAW3D,EAAE,EAAE;QAXuD,EAC1D,QAAQ,EACR,kBAAkB,EAClB,kBAAkB,EAClB,iBAAiB,EACjB,iBAAiB,EACjB,SAAS,EACT,cAAc,GAAG,KAAK,EACtB,UAAU,GAAG,KAAK,EAClB,MAAM,GAAG,KAAK,OAEf,EADI,KAAK,sBAVkD,yJAW3D,CADS;IAER,OAAO,CACL,wBAAC,kBAAO,oBAAK,KAAK,eACf,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,uBAAC,mBAAO,kBAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,gBAClC,uBAAC,gBAAK,kBAAC,OAAO,EAAC,WAAW,gBACxB,uBAAC,+BAAe,kBAAC,SAAS,UAAK,kBAAkB,EAAI,IAC/C,IACA,CACX,EACA,iBAAiB,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAC1B,uBAAC,mBAAO,kBAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,gBAClC,uBAAC,gBAAK,kBAAC,OAAO,EAAC,WAAW,gBACxB,uBAAC,+BAAe,kBAAC,SAAS,UAAK,kBAAkB,EAAI,IAC/C,IACA,CACX,EACA,QAAQ,EACR,UAAU,CAAC,CAAC,CAAC,uBAAC,iCAAoB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC5D,cAAc,CAAC,CAAC,CAAC,uBAAC,iCAAkB,IAAC,KAAK,EAAC,SAAS,GAAG,CAAC,CAAC,CAAC,IAAI,EAC9D,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,uBAAC,mBAAQ,IAAC,IAAI,EAAE,SAAS,GAAI,KACtC,CACX,CAAA;AACH,CAAC,CAAA;AAlCY,QAAA,aAAa,iBAkCzB"}
|