@dgui/react-web-material-bars 1.7.6 → 1.8.0-next.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.
Files changed (50) hide show
  1. package/dist/cjs/AppBar.js +52 -0
  2. package/dist/cjs/AppBar.js.map +1 -0
  3. package/dist/cjs/DrawerBar.js +37 -0
  4. package/dist/cjs/DrawerBar.js.map +1 -0
  5. package/dist/cjs/DrawerToggle.js +25 -0
  6. package/dist/cjs/DrawerToggle.js.map +1 -0
  7. package/dist/cjs/Tab.js +9 -0
  8. package/dist/cjs/Tab.js.map +1 -0
  9. package/dist/cjs/Tabs.js +34 -0
  10. package/dist/cjs/Tabs.js.map +1 -0
  11. package/dist/cjs/index.js +4 -0
  12. package/dist/cjs/index.js.map +1 -0
  13. package/dist/cjs/renderScene.js +13 -0
  14. package/dist/cjs/renderScene.js.map +1 -0
  15. package/dist/esm/AppBar.js +52 -0
  16. package/dist/esm/AppBar.js.map +1 -0
  17. package/dist/esm/DrawerBar.js +37 -0
  18. package/dist/esm/DrawerBar.js.map +1 -0
  19. package/dist/esm/DrawerToggle.js +25 -0
  20. package/dist/esm/DrawerToggle.js.map +1 -0
  21. package/dist/esm/Tab.js +9 -0
  22. package/dist/esm/Tab.js.map +1 -0
  23. package/dist/esm/Tabs.js +34 -0
  24. package/dist/esm/Tabs.js.map +1 -0
  25. package/dist/esm/index.js +4 -0
  26. package/dist/esm/index.js.map +1 -0
  27. package/dist/esm/renderScene.js +13 -0
  28. package/dist/esm/renderScene.js.map +1 -0
  29. package/package.json +14 -11
  30. package/dist/AppBar.js +0 -67
  31. package/dist/AppBar.js.map +0 -1
  32. package/dist/DrawerBar.js +0 -43
  33. package/dist/DrawerBar.js.map +0 -1
  34. package/dist/DrawerToggle.js +0 -30
  35. package/dist/DrawerToggle.js.map +0 -1
  36. package/dist/Tab.js +0 -26
  37. package/dist/Tab.js.map +0 -1
  38. package/dist/Tabs.js +0 -48
  39. package/dist/Tabs.js.map +0 -1
  40. package/dist/index.js +0 -13
  41. package/dist/index.js.map +0 -1
  42. package/dist/renderScene.js +0 -18
  43. package/dist/renderScene.js.map +0 -1
  44. /package/dist/{AppBar.d.ts → esm/AppBar.d.ts} +0 -0
  45. /package/dist/{DrawerBar.d.ts → esm/DrawerBar.d.ts} +0 -0
  46. /package/dist/{DrawerToggle.d.ts → esm/DrawerToggle.d.ts} +0 -0
  47. /package/dist/{Tab.d.ts → esm/Tab.d.ts} +0 -0
  48. /package/dist/{Tabs.d.ts → esm/Tabs.d.ts} +0 -0
  49. /package/dist/{index.d.ts → esm/index.d.ts} +0 -0
  50. /package/dist/{renderScene.d.ts → esm/renderScene.d.ts} +0 -0
@@ -0,0 +1,52 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import DrawerToggle from './DrawerToggle';
3
+ import Tabs from './Tabs';
4
+ import { useSelectTab, useTabIndex, useTabOrder, useTabs } from '@dgui/react-shared';
5
+ import { ReactWebDigestAppBar } from '@dgui/react-web';
6
+ import { useCallback, useMemo } from 'react';
7
+ const styles = {
8
+ appBar: {
9
+ alignItems: 'center',
10
+ backgroundColor: '#CCC',
11
+ boxShadow: '0 0 10px 5px rgba(0, 0, 0, 0.1)',
12
+ display: 'flex',
13
+ flexDirection: 'row',
14
+ position: 'relative',
15
+ zIndex: 102
16
+ }
17
+ };
18
+ const AppBar = ({ appBarStyle: givenAppBarStyle, children, icon, tabBarStyle, ...props }) => {
19
+ const appBarStyle = useMemo(() => {
20
+ return {
21
+ ...styles['appBar'],
22
+ ...givenAppBarStyle
23
+ };
24
+ }, [
25
+ givenAppBarStyle
26
+ ]);
27
+ const selectTab = useSelectTab();
28
+ const tabIndex = useTabIndex();
29
+ const handleSelectTab = useCallback((index) => {
30
+ selectTab(index);
31
+ }, [
32
+ selectTab
33
+ ]);
34
+ const tabOrder = useTabOrder();
35
+ const tabs = useTabs();
36
+ const routes = useMemo(() => {
37
+ return tabOrder.map((tabId) => {
38
+ return {
39
+ accessibilityLabel: tabs[tabId]?.title ?? tabId,
40
+ icon: undefined,
41
+ key: tabId,
42
+ title: tabs[tabId]?.title ?? tabId
43
+ };
44
+ });
45
+ }, [
46
+ tabOrder,
47
+ tabs
48
+ ]);
49
+ return (_jsx(ReactWebDigestAppBar, { children: _jsxs("div", { style: appBarStyle, children: [_jsx(DrawerToggle, { icon: icon }), _jsx(Tabs, { ...props, defaultIndex: tabIndex, onSelectTab: handleSelectTab, routes: routes, style: tabBarStyle }), children] }) }));
50
+ };
51
+ export default AppBar;
52
+ //# sourceMappingURL=AppBar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AppBar.js","sourceRoot":"","sources":["../../src/AppBar.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EACL,YAAY,EACZ,WAAW,EACX,WAAW,EACX,OAAO,EACR,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAIL,WAAW,EACX,OAAO,EACR,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,GAER;IACF,MAAM,EAAE;QACN,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,MAAM;QACvB,SAAS,EAAE,iCAAiC;QAC5C,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,GAAG;KACZ;CACF,CAAC;AAEF,MAAM,MAAM,GAAmC,CAAC,EAC9C,WAAW,EAAE,gBAAgB,EAC7B,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,WAAW,GAAkB,OAAO,CACxC,GAAG,EAAE;QACH,OAAO;YACL,GAAG,MAAM,CAAC,QAAQ,CAAC;YACnB,GAAG,gBAAgB;SACpB,CAAC;IACJ,CAAC,EACD;QACE,gBAAgB;KACjB,CACF,CAAC;IAEF,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,MAAM,eAAe,GAAG,WAAW,CACjC,CACE,KAAa,EACb,EAAE;QACF,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EACD;QACE,SAAS;KACV,CACF,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE;QACH,OAAO,QAAQ,CAAC,GAAG,CACjB,CACE,KAAK,EACL,EAAE;YACF,OAAO;gBACL,kBAAkB,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,IAAI,KAAK;gBAC/C,IAAI,EAAE,SAAS;gBACf,GAAG,EAAE,KAAK;gBACV,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,IAAI,KAAK;aACnC,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,EACD;QACE,QAAQ;QACR,IAAI;KACL,CACF,CAAC;IAEF,OAAO,CACL,KAAC,oBAAoB,cACnB,eACE,KAAK,EAAE,WAAW,aAElB,KAAC,YAAY,IACX,IAAI,EAAE,IAAI,GACV,EACF,KAAC,IAAI,OACC,KAAK,EACT,YAAY,EAAE,QAAQ,EACtB,WAAW,EAAE,eAAe,EAC5B,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,WAAW,GAClB,EACD,QAAQ,IACL,GACe,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
@@ -0,0 +1,37 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import Tabs from './Tabs';
3
+ import { useDrawerIndex, useDrawerOrder, useDrawers, useSelectDrawer } from '@dgui/react-shared';
4
+ import { ReactWebDigestDrawerBar } from '@dgui/react-web';
5
+ import { useCallback, useMemo } from 'react';
6
+ const styles = {
7
+ tabBar: {
8
+ backgroundColor: '#CCC',
9
+ display: 'flex',
10
+ flexDirection: 'row'
11
+ }
12
+ };
13
+ const DrawerBar = () => {
14
+ const drawerIndex = useDrawerIndex();
15
+ const selectDrawer = useSelectDrawer();
16
+ const handleSelectDrawer = useCallback((tabIndex) => {
17
+ selectDrawer(tabIndex);
18
+ }, [
19
+ selectDrawer
20
+ ]);
21
+ const drawerOrder = useDrawerOrder();
22
+ const drawers = useDrawers();
23
+ const routes = useMemo(() => {
24
+ return drawerOrder.map((drawerId) => {
25
+ return ({
26
+ key: drawerId,
27
+ title: drawers[drawerId]?.title ?? drawerId
28
+ });
29
+ });
30
+ }, [
31
+ drawerOrder,
32
+ drawers
33
+ ]);
34
+ return (_jsx(ReactWebDigestDrawerBar, { children: _jsx("div", { style: styles['tabBar'], children: _jsx(Tabs, { defaultIndex: drawerIndex, onSelectTab: handleSelectDrawer, routes: routes }) }) }));
35
+ };
36
+ export default DrawerBar;
37
+ //# sourceMappingURL=DrawerBar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DrawerBar.js","sourceRoot":"","sources":["../../src/DrawerBar.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EACL,cAAc,EACd,cAAc,EACd,UAAU,EACV,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAGL,WAAW,EACX,OAAO,EACR,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,GAER;IACF,MAAM,EAAE;QACN,eAAe,EAAE,MAAM;QAEvB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;KACrB;CACF,CAAC;AAEF,MAAM,SAAS,GAAsC,GAAG,EAAE;IACxD,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,MAAM,kBAAkB,GAAG,WAAW,CACpC,CACE,QAAgB,EAChB,EAAE;QACF,YAAY,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,EACD;QACE,YAAY;KACb,CACF,CAAC;IAEF,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE;QACH,OAAO,WAAW,CAAC,GAAG,CACpB,CACE,QAAQ,EACR,EAAE;YACF,OAAO,CACL;gBACE,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,KAAK,IAAI,QAAQ;aAC5C,CACF,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,EACD;QACE,WAAW;QACX,OAAO;KACR,CACF,CAAC;IAEF,OAAO,CACL,KAAC,uBAAuB,cACtB,cACE,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,YAEvB,KAAC,IAAI,IACH,YAAY,EAAE,WAAW,EACzB,WAAW,EAAE,kBAAkB,EAC/B,MAAM,EAAE,MAAM,GACd,GACE,GACkB,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -0,0 +1,25 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useDrawerToggle } from '@dgui/react-shared';
3
+ import MenuIcon from '@mui/icons-material/Menu';
4
+ import IconButton from '@mui/material/IconButton';
5
+ import { memo, useCallback } from 'react';
6
+ const styles = {
7
+ iconButton: {
8
+ margin: 0
9
+ }
10
+ };
11
+ const DrawerToggle = ({ icon: Icon }) => {
12
+ const toggleDrawer = useDrawerToggle();
13
+ const onClick = useCallback(() => {
14
+ if (toggleDrawer) {
15
+ toggleDrawer();
16
+ }
17
+ }, [
18
+ toggleDrawer
19
+ ]);
20
+ return (_jsx(IconButton, { "aria-label": 'open drawer', onClick: onClick, style: styles['iconButton'], children: Icon ?
21
+ _jsx(Icon, {}) :
22
+ _jsx(MenuIcon, {}) }));
23
+ };
24
+ export default memo(DrawerToggle);
25
+ //# sourceMappingURL=DrawerToggle.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DrawerToggle.js","sourceRoot":"","sources":["../../src/DrawerToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAGL,IAAI,EACJ,WAAW,EACZ,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,GAER;IACF,UAAU,EAAE;QACV,MAAM,EAAE,CAAC;KACV;CACF,CAAC;AAEF,MAAM,YAAY,GAAyC,CAAC,EAC1D,IAAI,EAAE,IAAI,EACX,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,MAAM,OAAO,GAAG,WAAW,CACzB,GAAG,EAAE;QACH,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,EAAE,CAAC;QACjB,CAAC;IACH,CAAC,EACD;QACE,YAAY;KACb,CACF,CAAC;IAEF,OAAO,CACL,KAAC,UAAU,kBACE,aAAa,EACxB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,MAAM,CAAC,YAAY,CAAC,YAGzB,IAAI,CAAC,CAAC;YACJ,KAAC,IAAI,KAAG,CAAC,CAAC;YACV,KAAC,QAAQ,KAAG,GAEL,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CACjB,YAAY,CACb,CAAC"}
@@ -0,0 +1,9 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import GenericTab from '@mui/material/Tab';
3
+ const Tab = ({ label, tabIndex, ...rest }) => {
4
+ return (_jsx(GenericTab, { label: label, style: {
5
+ height: '20px'
6
+ }, value: tabIndex, ...rest }));
7
+ };
8
+ export default Tab;
9
+ //# sourceMappingURL=Tab.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../src/Tab.tsx"],"names":[],"mappings":";AAAA,OAAO,UAEN,MAAM,mBAAmB,CAAC;AAM3B,MAAM,GAAG,GAAgC,CAAC,EACxC,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,EAAE;IACH,OAAO,CACL,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;YACL,MAAM,EAAE,MAAM;SACf,EACD,KAAK,EAAE,QAAQ,KACX,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,GAAG,CAAC"}
@@ -0,0 +1,34 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import renderScene from './renderScene';
3
+ import MaterialTabs from '@mui/material/Tabs';
4
+ import { useCallback, useMemo } from 'react';
5
+ const { defaultTabStyle } = {
6
+ defaultTabStyle: {
7
+ flex: 1
8
+ }
9
+ };
10
+ const Tabs = ({ defaultIndex, onSelectTab, routes = [], style: givenStyle, ...props }) => {
11
+ const tabStyle = useMemo(() => {
12
+ return {
13
+ ...defaultTabStyle,
14
+ ...givenStyle
15
+ };
16
+ }, [
17
+ givenStyle
18
+ ]);
19
+ const handleWebSelectTab = useCallback((_event, tabIndex) => {
20
+ if (onSelectTab) {
21
+ onSelectTab(tabIndex);
22
+ }
23
+ }, [
24
+ onSelectTab
25
+ ]);
26
+ const renderedScene = useMemo(() => {
27
+ return renderScene(routes);
28
+ }, [
29
+ routes
30
+ ]);
31
+ return (_jsx(MaterialTabs, { ...props, onChange: handleWebSelectTab, style: tabStyle, value: defaultIndex, children: renderedScene }));
32
+ };
33
+ export default Tabs;
34
+ //# sourceMappingURL=Tabs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,YAEN,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAIL,WAAW,EACX,OAAO,EACR,MAAM,OAAO,CAAC;AAEf,MAAM,EACJ,eAAe,EAChB,GAEG;IACF,eAAe,EAAE;QACf,IAAI,EAAE,CAAC;KACR;CACF,CAAC;AAEF,MAAM,IAAI,GAAiC,CAAC,EAC1C,YAAY,EACZ,WAAW,EACX,MAAM,GAAG,EAAE,EACX,KAAK,EAAE,UAAU,EACjB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE;QACH,OAAO;YACL,GAAG,eAAe;YAClB,GAAG,UAAU;SACd,CAAC;IACJ,CAAC,EACD;QACE,UAAU;KACX,CACF,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CACpC,CACE,MAAsB,EACtB,QAAgB,EAChB,EAAE;QACF,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,CAAC,QAAQ,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EACD;QACE,WAAW;KACZ,CACF,CAAC;IAEF,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE;QACH,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,EACD;QACE,MAAM;KACP,CACF,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,OACP,KAAK,EACT,QAAQ,EAAE,kBAAkB,EAC5B,KAAK,EAAE,QAAQ,EACf,KAAK,EAAE,YAAY,YAElB,aAAa,GACD,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}
@@ -0,0 +1,4 @@
1
+ export { default as ReactWebMaterialAppBar } from './AppBar';
2
+ export { default as ReactWebMaterialDrawerBar } from './DrawerBar';
3
+ export { default as ReactWebMaterialTabs } from './Tabs';
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,sBAAsB,EAElC,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,OAAO,IAAI,yBAAyB,EAErC,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,OAAO,IAAI,oBAAoB,EAEhC,MAAM,QAAQ,CAAC"}
@@ -0,0 +1,13 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import Tab from './Tab';
3
+ const styles = {
4
+ tab: {
5
+ textTransform: 'initial'
6
+ }
7
+ };
8
+ export default (routes) => {
9
+ return routes.map(({ key, title }, index) => {
10
+ return (_jsx(Tab, { label: title, style: styles['tab'], tabIndex: index }, key));
11
+ });
12
+ };
13
+ //# sourceMappingURL=renderScene.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"renderScene.js","sourceRoot":"","sources":["../../src/renderScene.tsx"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,OAAO,CAAC;AAKxB,MAAM,MAAM,GAER;IACF,GAAG,EAAE;QACH,aAAa,EAAE,SAAS;KACzB;CACF,CAAC;AAEF,eAAe,CACb,MAGE,EACF,EAAE;IACF,OAAO,MAAM,CAAC,GAAG,CACf,CACE,EACE,GAAG,EACH,KAAK,EACN,EACD,KAAK,EACL,EAAE;QACF,OAAO,CACL,KAAC,GAAG,IAEF,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EACpB,QAAQ,EAAE,KAAK,IAHV,GAAG,CAIR,CACH,CAAC;IACJ,CAAC,CACF,CAAC;AACJ,CAAC,CAAC"}
@@ -0,0 +1,52 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import DrawerToggle from './DrawerToggle';
3
+ import Tabs from './Tabs';
4
+ import { useSelectTab, useTabIndex, useTabOrder, useTabs } from '@dgui/react-shared';
5
+ import { ReactWebDigestAppBar } from '@dgui/react-web';
6
+ import { useCallback, useMemo } from 'react';
7
+ const styles = {
8
+ appBar: {
9
+ alignItems: 'center',
10
+ backgroundColor: '#CCC',
11
+ boxShadow: '0 0 10px 5px rgba(0, 0, 0, 0.1)',
12
+ display: 'flex',
13
+ flexDirection: 'row',
14
+ position: 'relative',
15
+ zIndex: 102
16
+ }
17
+ };
18
+ const AppBar = ({ appBarStyle: givenAppBarStyle, children, icon, tabBarStyle, ...props }) => {
19
+ const appBarStyle = useMemo(() => {
20
+ return {
21
+ ...styles['appBar'],
22
+ ...givenAppBarStyle
23
+ };
24
+ }, [
25
+ givenAppBarStyle
26
+ ]);
27
+ const selectTab = useSelectTab();
28
+ const tabIndex = useTabIndex();
29
+ const handleSelectTab = useCallback((index) => {
30
+ selectTab(index);
31
+ }, [
32
+ selectTab
33
+ ]);
34
+ const tabOrder = useTabOrder();
35
+ const tabs = useTabs();
36
+ const routes = useMemo(() => {
37
+ return tabOrder.map((tabId) => {
38
+ return {
39
+ accessibilityLabel: tabs[tabId]?.title ?? tabId,
40
+ icon: undefined,
41
+ key: tabId,
42
+ title: tabs[tabId]?.title ?? tabId
43
+ };
44
+ });
45
+ }, [
46
+ tabOrder,
47
+ tabs
48
+ ]);
49
+ return (_jsx(ReactWebDigestAppBar, { children: _jsxs("div", { style: appBarStyle, children: [_jsx(DrawerToggle, { icon: icon }), _jsx(Tabs, { ...props, defaultIndex: tabIndex, onSelectTab: handleSelectTab, routes: routes, style: tabBarStyle }), children] }) }));
50
+ };
51
+ export default AppBar;
52
+ //# sourceMappingURL=AppBar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"AppBar.js","sourceRoot":"","sources":["../../src/AppBar.tsx"],"names":[],"mappings":";AAAA,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EACL,YAAY,EACZ,WAAW,EACX,WAAW,EACX,OAAO,EACR,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,oBAAoB,EACrB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAIL,WAAW,EACX,OAAO,EACR,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,GAER;IACF,MAAM,EAAE;QACN,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,MAAM;QACvB,SAAS,EAAE,iCAAiC;QAC5C,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,GAAG;KACZ;CACF,CAAC;AAEF,MAAM,MAAM,GAAmC,CAAC,EAC9C,WAAW,EAAE,gBAAgB,EAC7B,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,WAAW,GAAkB,OAAO,CACxC,GAAG,EAAE;QACH,OAAO;YACL,GAAG,MAAM,CAAC,QAAQ,CAAC;YACnB,GAAG,gBAAgB;SACpB,CAAC;IACJ,CAAC,EACD;QACE,gBAAgB;KACjB,CACF,CAAC;IAEF,MAAM,SAAS,GAAG,YAAY,EAAE,CAAC;IACjC,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAE/B,MAAM,eAAe,GAAG,WAAW,CACjC,CACE,KAAa,EACb,EAAE;QACF,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EACD;QACE,SAAS;KACV,CACF,CAAC;IAEF,MAAM,QAAQ,GAAG,WAAW,EAAE,CAAC;IAC/B,MAAM,IAAI,GAAG,OAAO,EAAE,CAAC;IAEvB,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE;QACH,OAAO,QAAQ,CAAC,GAAG,CACjB,CACE,KAAK,EACL,EAAE;YACF,OAAO;gBACL,kBAAkB,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,IAAI,KAAK;gBAC/C,IAAI,EAAE,SAAS;gBACf,GAAG,EAAE,KAAK;gBACV,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,EAAE,KAAK,IAAI,KAAK;aACnC,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,EACD;QACE,QAAQ;QACR,IAAI;KACL,CACF,CAAC;IAEF,OAAO,CACL,KAAC,oBAAoB,cACnB,eACE,KAAK,EAAE,WAAW,aAElB,KAAC,YAAY,IACX,IAAI,EAAE,IAAI,GACV,EACF,KAAC,IAAI,OACC,KAAK,EACT,YAAY,EAAE,QAAQ,EACtB,WAAW,EAAE,eAAe,EAC5B,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,WAAW,GAClB,EACD,QAAQ,IACL,GACe,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
@@ -0,0 +1,37 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import Tabs from './Tabs';
3
+ import { useDrawerIndex, useDrawerOrder, useDrawers, useSelectDrawer } from '@dgui/react-shared';
4
+ import { ReactWebDigestDrawerBar } from '@dgui/react-web';
5
+ import { useCallback, useMemo } from 'react';
6
+ const styles = {
7
+ tabBar: {
8
+ backgroundColor: '#CCC',
9
+ display: 'flex',
10
+ flexDirection: 'row'
11
+ }
12
+ };
13
+ const DrawerBar = () => {
14
+ const drawerIndex = useDrawerIndex();
15
+ const selectDrawer = useSelectDrawer();
16
+ const handleSelectDrawer = useCallback((tabIndex) => {
17
+ selectDrawer(tabIndex);
18
+ }, [
19
+ selectDrawer
20
+ ]);
21
+ const drawerOrder = useDrawerOrder();
22
+ const drawers = useDrawers();
23
+ const routes = useMemo(() => {
24
+ return drawerOrder.map((drawerId) => {
25
+ return ({
26
+ key: drawerId,
27
+ title: drawers[drawerId]?.title ?? drawerId
28
+ });
29
+ });
30
+ }, [
31
+ drawerOrder,
32
+ drawers
33
+ ]);
34
+ return (_jsx(ReactWebDigestDrawerBar, { children: _jsx("div", { style: styles['tabBar'], children: _jsx(Tabs, { defaultIndex: drawerIndex, onSelectTab: handleSelectDrawer, routes: routes }) }) }));
35
+ };
36
+ export default DrawerBar;
37
+ //# sourceMappingURL=DrawerBar.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DrawerBar.js","sourceRoot":"","sources":["../../src/DrawerBar.tsx"],"names":[],"mappings":";AAAA,OAAO,IAAI,MAAM,QAAQ,CAAC;AAC1B,OAAO,EACL,cAAc,EACd,cAAc,EACd,UAAU,EACV,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EACL,uBAAuB,EACxB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAGL,WAAW,EACX,OAAO,EACR,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,GAER;IACF,MAAM,EAAE;QACN,eAAe,EAAE,MAAM;QAEvB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;KACrB;CACF,CAAC;AAEF,MAAM,SAAS,GAAsC,GAAG,EAAE;IACxD,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,MAAM,kBAAkB,GAAG,WAAW,CACpC,CACE,QAAgB,EAChB,EAAE;QACF,YAAY,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,EACD;QACE,YAAY;KACb,CACF,CAAC;IAEF,MAAM,WAAW,GAAG,cAAc,EAAE,CAAC;IACrC,MAAM,OAAO,GAAG,UAAU,EAAE,CAAC;IAE7B,MAAM,MAAM,GAAG,OAAO,CACpB,GAAG,EAAE;QACH,OAAO,WAAW,CAAC,GAAG,CACpB,CACE,QAAQ,EACR,EAAE;YACF,OAAO,CACL;gBACE,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,OAAO,CAAC,QAAQ,CAAC,EAAE,KAAK,IAAI,QAAQ;aAC5C,CACF,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,EACD;QACE,WAAW;QACX,OAAO;KACR,CACF,CAAC;IAEF,OAAO,CACL,KAAC,uBAAuB,cACtB,cACE,KAAK,EAAE,MAAM,CAAC,QAAQ,CAAC,YAEvB,KAAC,IAAI,IACH,YAAY,EAAE,WAAW,EACzB,WAAW,EAAE,kBAAkB,EAC/B,MAAM,EAAE,MAAM,GACd,GACE,GACkB,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,SAAS,CAAC"}
@@ -0,0 +1,25 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { useDrawerToggle } from '@dgui/react-shared';
3
+ import MenuIcon from '@mui/icons-material/Menu';
4
+ import IconButton from '@mui/material/IconButton';
5
+ import { memo, useCallback } from 'react';
6
+ const styles = {
7
+ iconButton: {
8
+ margin: 0
9
+ }
10
+ };
11
+ const DrawerToggle = ({ icon: Icon }) => {
12
+ const toggleDrawer = useDrawerToggle();
13
+ const onClick = useCallback(() => {
14
+ if (toggleDrawer) {
15
+ toggleDrawer();
16
+ }
17
+ }, [
18
+ toggleDrawer
19
+ ]);
20
+ return (_jsx(IconButton, { "aria-label": 'open drawer', onClick: onClick, style: styles['iconButton'], children: Icon ?
21
+ _jsx(Icon, {}) :
22
+ _jsx(MenuIcon, {}) }));
23
+ };
24
+ export default memo(DrawerToggle);
25
+ //# sourceMappingURL=DrawerToggle.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"DrawerToggle.js","sourceRoot":"","sources":["../../src/DrawerToggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,eAAe,EAChB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,QAAQ,MAAM,0BAA0B,CAAC;AAChD,OAAO,UAAU,MAAM,0BAA0B,CAAC;AAClD,OAAO,EAGL,IAAI,EACJ,WAAW,EACZ,MAAM,OAAO,CAAC;AAEf,MAAM,MAAM,GAER;IACF,UAAU,EAAE;QACV,MAAM,EAAE,CAAC;KACV;CACF,CAAC;AAEF,MAAM,YAAY,GAAyC,CAAC,EAC1D,IAAI,EAAE,IAAI,EACX,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,MAAM,OAAO,GAAG,WAAW,CACzB,GAAG,EAAE;QACH,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,EAAE,CAAC;QACjB,CAAC;IACH,CAAC,EACD;QACE,YAAY;KACb,CACF,CAAC;IAEF,OAAO,CACL,KAAC,UAAU,kBACE,aAAa,EACxB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,MAAM,CAAC,YAAY,CAAC,YAGzB,IAAI,CAAC,CAAC;YACJ,KAAC,IAAI,KAAG,CAAC,CAAC;YACV,KAAC,QAAQ,KAAG,GAEL,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CACjB,YAAY,CACb,CAAC"}
@@ -0,0 +1,9 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import GenericTab from '@mui/material/Tab';
3
+ const Tab = ({ label, tabIndex, ...rest }) => {
4
+ return (_jsx(GenericTab, { label: label, style: {
5
+ height: '20px'
6
+ }, value: tabIndex, ...rest }));
7
+ };
8
+ export default Tab;
9
+ //# sourceMappingURL=Tab.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tab.js","sourceRoot":"","sources":["../../src/Tab.tsx"],"names":[],"mappings":";AAAA,OAAO,UAEN,MAAM,mBAAmB,CAAC;AAM3B,MAAM,GAAG,GAAgC,CAAC,EACxC,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,EAAE;IACH,OAAO,CACL,KAAC,UAAU,IACT,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;YACL,MAAM,EAAE,MAAM;SACf,EACD,KAAK,EAAE,QAAQ,KACX,IAAI,GACR,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,GAAG,CAAC"}
@@ -0,0 +1,34 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import renderScene from './renderScene';
3
+ import MaterialTabs from '@mui/material/Tabs';
4
+ import { useCallback, useMemo } from 'react';
5
+ const { defaultTabStyle } = {
6
+ defaultTabStyle: {
7
+ flex: 1
8
+ }
9
+ };
10
+ const Tabs = ({ defaultIndex, onSelectTab, routes = [], style: givenStyle, ...props }) => {
11
+ const tabStyle = useMemo(() => {
12
+ return {
13
+ ...defaultTabStyle,
14
+ ...givenStyle
15
+ };
16
+ }, [
17
+ givenStyle
18
+ ]);
19
+ const handleWebSelectTab = useCallback((_event, tabIndex) => {
20
+ if (onSelectTab) {
21
+ onSelectTab(tabIndex);
22
+ }
23
+ }, [
24
+ onSelectTab
25
+ ]);
26
+ const renderedScene = useMemo(() => {
27
+ return renderScene(routes);
28
+ }, [
29
+ routes
30
+ ]);
31
+ return (_jsx(MaterialTabs, { ...props, onChange: handleWebSelectTab, style: tabStyle, value: defaultIndex, children: renderedScene }));
32
+ };
33
+ export default Tabs;
34
+ //# sourceMappingURL=Tabs.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../../src/Tabs.tsx"],"names":[],"mappings":";AAAA,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,YAEN,MAAM,oBAAoB,CAAC;AAC5B,OAAO,EAIL,WAAW,EACX,OAAO,EACR,MAAM,OAAO,CAAC;AAEf,MAAM,EACJ,eAAe,EAChB,GAEG;IACF,eAAe,EAAE;QACf,IAAI,EAAE,CAAC;KACR;CACF,CAAC;AAEF,MAAM,IAAI,GAAiC,CAAC,EAC1C,YAAY,EACZ,WAAW,EACX,MAAM,GAAG,EAAE,EACX,KAAK,EAAE,UAAU,EACjB,GAAG,KAAK,EACT,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,OAAO,CACtB,GAAG,EAAE;QACH,OAAO;YACL,GAAG,eAAe;YAClB,GAAG,UAAU;SACd,CAAC;IACJ,CAAC,EACD;QACE,UAAU;KACX,CACF,CAAC;IAEF,MAAM,kBAAkB,GAAG,WAAW,CACpC,CACE,MAAsB,EACtB,QAAgB,EAChB,EAAE;QACF,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,CAAC,QAAQ,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EACD;QACE,WAAW;KACZ,CACF,CAAC;IAEF,MAAM,aAAa,GAAG,OAAO,CAC3B,GAAG,EAAE;QACH,OAAO,WAAW,CAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,EACD;QACE,MAAM;KACP,CACF,CAAC;IAEF,OAAO,CACL,KAAC,YAAY,OACP,KAAK,EACT,QAAQ,EAAE,kBAAkB,EAC5B,KAAK,EAAE,QAAQ,EACf,KAAK,EAAE,YAAY,YAElB,aAAa,GACD,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,IAAI,CAAC"}
@@ -0,0 +1,4 @@
1
+ export { default as ReactWebMaterialAppBar } from './AppBar';
2
+ export { default as ReactWebMaterialDrawerBar } from './DrawerBar';
3
+ export { default as ReactWebMaterialTabs } from './Tabs';
4
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,OAAO,IAAI,sBAAsB,EAElC,MAAM,UAAU,CAAC;AAClB,OAAO,EACL,OAAO,IAAI,yBAAyB,EAErC,MAAM,aAAa,CAAC;AACrB,OAAO,EACL,OAAO,IAAI,oBAAoB,EAEhC,MAAM,QAAQ,CAAC"}
@@ -0,0 +1,13 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import Tab from './Tab';
3
+ const styles = {
4
+ tab: {
5
+ textTransform: 'initial'
6
+ }
7
+ };
8
+ export default (routes) => {
9
+ return routes.map(({ key, title }, index) => {
10
+ return (_jsx(Tab, { label: title, style: styles['tab'], tabIndex: index }, key));
11
+ });
12
+ };
13
+ //# sourceMappingURL=renderScene.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"renderScene.js","sourceRoot":"","sources":["../../src/renderScene.tsx"],"names":[],"mappings":";AAAA,OAAO,GAAG,MAAM,OAAO,CAAC;AAKxB,MAAM,MAAM,GAER;IACF,GAAG,EAAE;QACH,aAAa,EAAE,SAAS;KACzB;CACF,CAAC;AAEF,eAAe,CACb,MAGE,EACF,EAAE;IACF,OAAO,MAAM,CAAC,GAAG,CACf,CACE,EACE,GAAG,EACH,KAAK,EACN,EACD,KAAK,EACL,EAAE;QACF,OAAO,CACL,KAAC,GAAG,IAEF,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,MAAM,CAAC,KAAK,CAAC,EACpB,QAAQ,EAAE,KAAK,IAHV,GAAG,CAIR,CACH,CAAC;IACJ,CAAC,CACF,CAAC;AACJ,CAAC,CAAC"}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@dgui/react-web-material-bars",
3
3
  "title": "Digested React GUI Shared Web Material Bars",
4
4
  "license": "LGPL-3.0-or-later",
5
- "version": "1.7.6",
5
+ "version": "1.8.0-next.1",
6
6
  "private": false,
7
7
  "description": "Shared Web Material Bars (AppBar & DrawerBar) and supporting components for @dgui",
8
8
  "author": "wallzero @wallzeroblog (http://wallzero.com)",
@@ -13,8 +13,9 @@
13
13
  "position": "Initial and Lead Developer"
14
14
  }
15
15
  ],
16
- "main": "dist/index.js",
17
- "types": "dist/index.d.ts",
16
+ "main": "dist/cjs/index.js",
17
+ "module": "dist/esm/index.js",
18
+ "types": "dist/esm/index.d.ts",
18
19
  "files": [
19
20
  "dist/",
20
21
  "COPYING.md",
@@ -30,7 +31,9 @@
30
31
  },
31
32
  "scripts": {
32
33
  "build": "run-s clean:dist build:prod",
33
- "build:prod": "tsc -p ./tsconfig.json",
34
+ "build:prod": "run-p build:cjs:prod build:esm:prod",
35
+ "build:cjs:prod": "tsc -p ./tsconfig.cjs.json",
36
+ "build:esm:prod": "tsc -p ./tsconfig.json",
34
37
  "build:watch": "tsc -p ./tsconfig.json --watch --pretty --preserveWatchOutput",
35
38
  "----------------------------------------------------------------": "",
36
39
  "build:prod:config": "",
@@ -52,20 +55,20 @@
52
55
  "@mui/icons-material": "^6.5.0",
53
56
  "@mui/material": "^6.5.0",
54
57
  "@types/jest": "^30.0.0",
55
- "@types/react": "^19.2.7",
58
+ "@types/react": "^19.2.13",
56
59
  "@types/react-test-renderer": "^19.1.0",
57
60
  "cross-env": "^10.1.0",
58
61
  "jest-environment-jsdom": "^30.2.0",
59
62
  "jest-environment-jsdom-global": "^4.0.0",
60
63
  "npm-run-all": "^4.1.5",
61
- "react": "^19.2.3",
62
- "react-dom": "^19.2.3",
63
- "react-test-renderer": "^19.2.3",
64
+ "react": "^19.2.4",
65
+ "react-dom": "^19.2.4",
66
+ "react-test-renderer": "^19.2.4",
64
67
  "rimraf": "^6.1.2"
65
68
  },
66
69
  "dependencies": {
67
- "@dgui/react-shared": "1.7.6",
68
- "@dgui/react-web": "1.7.6"
70
+ "@dgui/react-shared": "1.8.0-next.1",
71
+ "@dgui/react-web": "1.8.0-next.1"
69
72
  },
70
73
  "peerDependencies": {
71
74
  "@mui/material": "^6.0.0",
@@ -82,5 +85,5 @@
82
85
  "material",
83
86
  "typescript"
84
87
  ],
85
- "gitHead": "864501301de458311da44d7b3043c7488ce6096c"
88
+ "gitHead": "8c988440fbced187ef0eb3b458b429666ba85415"
86
89
  }
package/dist/AppBar.js DELETED
@@ -1,67 +0,0 @@
1
- "use strict";
2
- var __rest = (this && this.__rest) || function (s, e) {
3
- var t = {};
4
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
- t[p] = s[p];
6
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
- t[p[i]] = s[p[i]];
10
- }
11
- return t;
12
- };
13
- var __importDefault = (this && this.__importDefault) || function (mod) {
14
- return (mod && mod.__esModule) ? mod : { "default": mod };
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- const jsx_runtime_1 = require("react/jsx-runtime");
18
- const DrawerToggle_1 = __importDefault(require("./DrawerToggle"));
19
- const Tabs_1 = __importDefault(require("./Tabs"));
20
- const react_shared_1 = require("@dgui/react-shared");
21
- const react_web_1 = require("@dgui/react-web");
22
- const react_1 = require("react");
23
- const styles = {
24
- appBar: {
25
- alignItems: 'center',
26
- backgroundColor: '#CCC',
27
- boxShadow: '0 0 10px 5px rgba(0, 0, 0, 0.1)',
28
- display: 'flex',
29
- flexDirection: 'row',
30
- position: 'relative',
31
- zIndex: 102
32
- }
33
- };
34
- const AppBar = (_a) => {
35
- var { appBarStyle: givenAppBarStyle, children, icon, tabBarStyle } = _a, props = __rest(_a, ["appBarStyle", "children", "icon", "tabBarStyle"]);
36
- const appBarStyle = (0, react_1.useMemo)(() => {
37
- return Object.assign(Object.assign({}, styles.appBar), givenAppBarStyle);
38
- }, [
39
- givenAppBarStyle
40
- ]);
41
- const selectTab = (0, react_shared_1.useSelectTab)();
42
- const tabIndex = (0, react_shared_1.useTabIndex)();
43
- const handleSelectTab = (0, react_1.useCallback)((index) => {
44
- selectTab(index);
45
- }, [
46
- selectTab
47
- ]);
48
- const tabOrder = (0, react_shared_1.useTabOrder)();
49
- const tabs = (0, react_shared_1.useTabs)();
50
- const routes = (0, react_1.useMemo)(() => {
51
- return tabOrder.map((tabId) => {
52
- var _a, _b, _c, _d;
53
- return {
54
- accessibilityLabel: (_b = (_a = tabs[tabId]) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : tabId,
55
- icon: undefined,
56
- key: tabId,
57
- title: (_d = (_c = tabs[tabId]) === null || _c === void 0 ? void 0 : _c.title) !== null && _d !== void 0 ? _d : tabId
58
- };
59
- });
60
- }, [
61
- tabOrder,
62
- tabs
63
- ]);
64
- return ((0, jsx_runtime_1.jsx)(react_web_1.ReactWebDigestAppBar, { children: (0, jsx_runtime_1.jsxs)("div", { style: appBarStyle, children: [(0, jsx_runtime_1.jsx)(DrawerToggle_1.default, { icon: icon }), (0, jsx_runtime_1.jsx)(Tabs_1.default, Object.assign({}, props, { defaultIndex: tabIndex, onSelectTab: handleSelectTab, routes: routes, style: tabBarStyle })), children] }) }));
65
- };
66
- exports.default = AppBar;
67
- //# sourceMappingURL=AppBar.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AppBar.js","sourceRoot":"","sources":["../src/AppBar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,kEAA0C;AAC1C,kDAA0B;AAC1B,qDAK4B;AAC5B,+CAEyB;AACzB,iCAMe;AAEf,MAAM,MAAM,GAER;IACF,MAAM,EAAE;QACN,UAAU,EAAE,QAAQ;QACpB,eAAe,EAAE,MAAM;QACvB,SAAS,EAAE,iCAAiC;QAC5C,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;QACpB,QAAQ,EAAE,UAAU;QACpB,MAAM,EAAE,GAAG;KACZ;CACF,CAAC;AAEF,MAAM,MAAM,GAAmC,CAAC,EAM/C,EAAE,EAAE;QAN2C,EAC9C,WAAW,EAAE,gBAAgB,EAC7B,QAAQ,EACR,IAAI,EACJ,WAAW,OAEZ,EADI,KAAK,cALsC,kDAM/C,CADS;IAER,MAAM,WAAW,GAAkB,IAAA,eAAO,EACxC,GAAG,EAAE;QACH,uCACK,MAAM,CAAC,MAAM,GACb,gBAAgB,EACnB;IACJ,CAAC,EACD;QACE,gBAAgB;KACjB,CACF,CAAC;IAEF,MAAM,SAAS,GAAG,IAAA,2BAAY,GAAE,CAAC;IACjC,MAAM,QAAQ,GAAG,IAAA,0BAAW,GAAE,CAAC;IAE/B,MAAM,eAAe,GAAG,IAAA,mBAAW,EACjC,CACE,KAAa,EACb,EAAE;QACF,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EACD;QACE,SAAS;KACV,CACF,CAAC;IAEF,MAAM,QAAQ,GAAG,IAAA,0BAAW,GAAE,CAAC;IAC/B,MAAM,IAAI,GAAG,IAAA,sBAAO,GAAE,CAAC;IAEvB,MAAM,MAAM,GAAG,IAAA,eAAO,EACpB,GAAG,EAAE;QACH,OAAO,QAAQ,CAAC,GAAG,CACjB,CACE,KAAK,EACL,EAAE;;YACF,OAAO;gBACL,kBAAkB,EAAE,MAAA,MAAA,IAAI,CAAC,KAAK,CAAC,0CAAE,KAAK,mCAAI,KAAK;gBAC/C,IAAI,EAAE,SAAS;gBACf,GAAG,EAAE,KAAK;gBACV,KAAK,EAAE,MAAA,MAAA,IAAI,CAAC,KAAK,CAAC,0CAAE,KAAK,mCAAI,KAAK;aACnC,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,EACD;QACE,QAAQ;QACR,IAAI;KACL,CACF,CAAC;IAEF,OAAO,CACL,uBAAC,gCAAoB,cACnB,iCACE,KAAK,EAAE,WAAW,aAElB,uBAAC,sBAAY,IACX,IAAI,EAAE,IAAI,GACV,EACF,uBAAC,cAAI,oBACC,KAAK,IACT,YAAY,EAAE,QAAQ,EACtB,WAAW,EAAE,eAAe,EAC5B,MAAM,EAAE,MAAM,EACd,KAAK,EAAE,WAAW,IAClB,EACD,QAAQ,IACL,GACe,CACxB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,MAAM,CAAC"}
package/dist/DrawerBar.js DELETED
@@ -1,43 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const jsx_runtime_1 = require("react/jsx-runtime");
7
- const Tabs_1 = __importDefault(require("./Tabs"));
8
- const react_shared_1 = require("@dgui/react-shared");
9
- const react_web_1 = require("@dgui/react-web");
10
- const react_1 = require("react");
11
- const styles = {
12
- tabBar: {
13
- backgroundColor: '#CCC',
14
- display: 'flex',
15
- flexDirection: 'row'
16
- }
17
- };
18
- const DrawerBar = () => {
19
- const drawerIndex = (0, react_shared_1.useDrawerIndex)();
20
- const selectDrawer = (0, react_shared_1.useSelectDrawer)();
21
- const handleSelectDrawer = (0, react_1.useCallback)((tabIndex) => {
22
- selectDrawer(tabIndex);
23
- }, [
24
- selectDrawer
25
- ]);
26
- const drawerOrder = (0, react_shared_1.useDrawerOrder)();
27
- const drawers = (0, react_shared_1.useDrawers)();
28
- const routes = (0, react_1.useMemo)(() => {
29
- return drawerOrder.map((drawerId) => {
30
- var _a, _b;
31
- return ({
32
- key: drawerId,
33
- title: (_b = (_a = drawers[drawerId]) === null || _a === void 0 ? void 0 : _a.title) !== null && _b !== void 0 ? _b : drawerId
34
- });
35
- });
36
- }, [
37
- drawerOrder,
38
- drawers
39
- ]);
40
- return ((0, jsx_runtime_1.jsx)(react_web_1.ReactWebDigestDrawerBar, { children: (0, jsx_runtime_1.jsx)("div", { style: styles.tabBar, children: (0, jsx_runtime_1.jsx)(Tabs_1.default, { defaultIndex: drawerIndex, onSelectTab: handleSelectDrawer, routes: routes }) }) }));
41
- };
42
- exports.default = DrawerBar;
43
- //# sourceMappingURL=DrawerBar.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DrawerBar.js","sourceRoot":"","sources":["../src/DrawerBar.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAA0B;AAC1B,qDAK4B;AAC5B,+CAEyB;AACzB,iCAKe;AAEf,MAAM,MAAM,GAER;IACF,MAAM,EAAE;QACN,eAAe,EAAE,MAAM;QAEvB,OAAO,EAAE,MAAM;QACf,aAAa,EAAE,KAAK;KACrB;CACF,CAAC;AAEF,MAAM,SAAS,GAAsC,GAAG,EAAE;IACxD,MAAM,WAAW,GAAG,IAAA,6BAAc,GAAE,CAAC;IACrC,MAAM,YAAY,GAAG,IAAA,8BAAe,GAAE,CAAC;IAEvC,MAAM,kBAAkB,GAAG,IAAA,mBAAW,EACpC,CACE,QAAgB,EAChB,EAAE;QACF,YAAY,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,EACD;QACE,YAAY;KACb,CACF,CAAC;IAEF,MAAM,WAAW,GAAG,IAAA,6BAAc,GAAE,CAAC;IACrC,MAAM,OAAO,GAAG,IAAA,yBAAU,GAAE,CAAC;IAE7B,MAAM,MAAM,GAAG,IAAA,eAAO,EACpB,GAAG,EAAE;QACH,OAAO,WAAW,CAAC,GAAG,CACpB,CACE,QAAQ,EACR,EAAE;;YACF,OAAO,CACL;gBACE,GAAG,EAAE,QAAQ;gBACb,KAAK,EAAE,MAAA,MAAA,OAAO,CAAC,QAAQ,CAAC,0CAAE,KAAK,mCAAI,QAAQ;aAC5C,CACF,CAAC;QACJ,CAAC,CACF,CAAC;IACJ,CAAC,EACD;QACE,WAAW;QACX,OAAO;KACR,CACF,CAAC;IAEF,OAAO,CACL,uBAAC,mCAAuB,cACtB,gCACE,KAAK,EAAE,MAAM,CAAC,MAAM,YAEpB,uBAAC,cAAI,IACH,YAAY,EAAE,WAAW,EACzB,WAAW,EAAE,kBAAkB,EAC/B,MAAM,EAAE,MAAM,GACd,GACE,GACkB,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,SAAS,CAAC"}
@@ -1,30 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const jsx_runtime_1 = require("react/jsx-runtime");
7
- const react_shared_1 = require("@dgui/react-shared");
8
- const Menu_1 = __importDefault(require("@mui/icons-material/Menu"));
9
- const IconButton_1 = __importDefault(require("@mui/material/IconButton"));
10
- const react_1 = require("react");
11
- const styles = {
12
- iconButton: {
13
- margin: 0
14
- }
15
- };
16
- const DrawerToggle = ({ icon: Icon }) => {
17
- const toggleDrawer = (0, react_shared_1.useDrawerToggle)();
18
- const onClick = (0, react_1.useCallback)(() => {
19
- if (toggleDrawer) {
20
- toggleDrawer();
21
- }
22
- }, [
23
- toggleDrawer
24
- ]);
25
- return ((0, jsx_runtime_1.jsx)(IconButton_1.default, { "aria-label": 'open drawer', onClick: onClick, style: styles.iconButton, children: Icon ?
26
- (0, jsx_runtime_1.jsx)(Icon, {}) :
27
- (0, jsx_runtime_1.jsx)(Menu_1.default, {}) }));
28
- };
29
- exports.default = (0, react_1.memo)(DrawerToggle);
30
- //# sourceMappingURL=DrawerToggle.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"DrawerToggle.js","sourceRoot":"","sources":["../src/DrawerToggle.tsx"],"names":[],"mappings":";;;;;;AAAA,qDAE4B;AAC5B,oEAAgD;AAChD,0EAAkD;AAClD,iCAKe;AAEf,MAAM,MAAM,GAER;IACF,UAAU,EAAE;QACV,MAAM,EAAE,CAAC;KACV;CACF,CAAC;AAEF,MAAM,YAAY,GAAyC,CAAC,EAC1D,IAAI,EAAE,IAAI,EACX,EAAE,EAAE;IACH,MAAM,YAAY,GAAG,IAAA,8BAAe,GAAE,CAAC;IAEvC,MAAM,OAAO,GAAG,IAAA,mBAAW,EACzB,GAAG,EAAE;QACH,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,EAAE,CAAC;QACjB,CAAC;IACH,CAAC,EACD;QACE,YAAY;KACb,CACF,CAAC;IAEF,OAAO,CACL,uBAAC,oBAAU,kBACE,aAAa,EACxB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,MAAM,CAAC,UAAU,YAGtB,IAAI,CAAC,CAAC;YACJ,uBAAC,IAAI,KAAG,CAAC,CAAC;YACV,uBAAC,cAAQ,KAAG,GAEL,CACd,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,IAAA,YAAI,EACjB,YAAY,CACb,CAAC"}
package/dist/Tab.js DELETED
@@ -1,26 +0,0 @@
1
- "use strict";
2
- var __rest = (this && this.__rest) || function (s, e) {
3
- var t = {};
4
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
- t[p] = s[p];
6
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
- t[p[i]] = s[p[i]];
10
- }
11
- return t;
12
- };
13
- var __importDefault = (this && this.__importDefault) || function (mod) {
14
- return (mod && mod.__esModule) ? mod : { "default": mod };
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- const jsx_runtime_1 = require("react/jsx-runtime");
18
- const Tab_1 = __importDefault(require("@mui/material/Tab"));
19
- const Tab = (_a) => {
20
- var { label, tabIndex } = _a, rest = __rest(_a, ["label", "tabIndex"]);
21
- return ((0, jsx_runtime_1.jsx)(Tab_1.default, Object.assign({ label: label, style: {
22
- height: '20px'
23
- }, value: tabIndex }, rest)));
24
- };
25
- exports.default = Tab;
26
- //# sourceMappingURL=Tab.js.map
package/dist/Tab.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tab.js","sourceRoot":"","sources":["../src/Tab.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,4DAE2B;AAM3B,MAAM,GAAG,GAAgC,CAAC,EAIzC,EAAE,EAAE;QAJqC,EACxC,KAAK,EACL,QAAQ,OAET,EADI,IAAI,cAHiC,qBAIzC,CADQ;IAEP,OAAO,CACL,uBAAC,aAAU,kBACT,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE;YACL,MAAM,EAAE,MAAM;SACf,EACD,KAAK,EAAE,QAAQ,IACX,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,GAAG,CAAC"}
package/dist/Tabs.js DELETED
@@ -1,48 +0,0 @@
1
- "use strict";
2
- var __rest = (this && this.__rest) || function (s, e) {
3
- var t = {};
4
- for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
5
- t[p] = s[p];
6
- if (s != null && typeof Object.getOwnPropertySymbols === "function")
7
- for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
8
- if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
9
- t[p[i]] = s[p[i]];
10
- }
11
- return t;
12
- };
13
- var __importDefault = (this && this.__importDefault) || function (mod) {
14
- return (mod && mod.__esModule) ? mod : { "default": mod };
15
- };
16
- Object.defineProperty(exports, "__esModule", { value: true });
17
- const jsx_runtime_1 = require("react/jsx-runtime");
18
- const renderScene_1 = __importDefault(require("./renderScene"));
19
- const Tabs_1 = __importDefault(require("@mui/material/Tabs"));
20
- const react_1 = require("react");
21
- const { defaultTabStyle } = {
22
- defaultTabStyle: {
23
- flex: 1
24
- }
25
- };
26
- const Tabs = (_a) => {
27
- var { defaultIndex, onSelectTab, routes = [], style: givenStyle } = _a, props = __rest(_a, ["defaultIndex", "onSelectTab", "routes", "style"]);
28
- const tabStyle = (0, react_1.useMemo)(() => {
29
- return Object.assign(Object.assign({}, defaultTabStyle), givenStyle);
30
- }, [
31
- givenStyle
32
- ]);
33
- const handleWebSelectTab = (0, react_1.useCallback)((event, tabIndex) => {
34
- if (onSelectTab) {
35
- onSelectTab(tabIndex);
36
- }
37
- }, [
38
- onSelectTab
39
- ]);
40
- const renderedScene = (0, react_1.useMemo)(() => {
41
- return (0, renderScene_1.default)(routes);
42
- }, [
43
- routes
44
- ]);
45
- return ((0, jsx_runtime_1.jsx)(Tabs_1.default, Object.assign({}, props, { onChange: handleWebSelectTab, style: tabStyle, value: defaultIndex, children: renderedScene })));
46
- };
47
- exports.default = Tabs;
48
- //# sourceMappingURL=Tabs.js.map
package/dist/Tabs.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"Tabs.js","sourceRoot":"","sources":["../src/Tabs.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,gEAAwC;AACxC,8DAE4B;AAC5B,iCAMe;AAEf,MAAM,EACJ,eAAe,EAChB,GAEG;IACF,eAAe,EAAE;QACf,IAAI,EAAE,CAAC;KACR;CACF,CAAC;AAEF,MAAM,IAAI,GAAiC,CAAC,EAM3C,EAAE,EAAE;QANuC,EAC1C,YAAY,EACZ,WAAW,EACX,MAAM,GAAG,EAAE,EACX,KAAK,EAAE,UAAU,OAElB,EADI,KAAK,cALkC,kDAM3C,CADS;IAER,MAAM,QAAQ,GAAG,IAAA,eAAO,EACtB,GAAG,EAAE;QACH,uCACK,eAAe,GACf,UAAU,EACb;IACJ,CAAC,EACD;QACE,UAAU;KACX,CACF,CAAC;IAEF,MAAM,kBAAkB,GAAG,IAAA,mBAAW,EACpC,CACE,KAAqB,EACrB,QAAgB,EAChB,EAAE;QACF,IAAI,WAAW,EAAE,CAAC;YAChB,WAAW,CAAC,QAAQ,CAAC,CAAC;QACxB,CAAC;IACH,CAAC,EACD;QACE,WAAW;KACZ,CACF,CAAC;IAEF,MAAM,aAAa,GAAG,IAAA,eAAO,EAC3B,GAAG,EAAE;QACH,OAAO,IAAA,qBAAW,EAAC,MAAM,CAAC,CAAC;IAC7B,CAAC,EACD;QACE,MAAM;KACP,CACF,CAAC;IAEF,OAAO,CACL,uBAAC,cAAY,oBACP,KAAK,IACT,QAAQ,EAAE,kBAAkB,EAC5B,KAAK,EAAE,QAAQ,EACf,KAAK,EAAE,YAAY,YAElB,aAAa,IACD,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,IAAI,CAAC"}
package/dist/index.js DELETED
@@ -1,13 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- exports.ReactWebMaterialTabs = exports.ReactWebMaterialDrawerBar = exports.ReactWebMaterialAppBar = void 0;
7
- var AppBar_1 = require("./AppBar");
8
- Object.defineProperty(exports, "ReactWebMaterialAppBar", { enumerable: true, get: function () { return __importDefault(AppBar_1).default; } });
9
- var DrawerBar_1 = require("./DrawerBar");
10
- Object.defineProperty(exports, "ReactWebMaterialDrawerBar", { enumerable: true, get: function () { return __importDefault(DrawerBar_1).default; } });
11
- var Tabs_1 = require("./Tabs");
12
- Object.defineProperty(exports, "ReactWebMaterialTabs", { enumerable: true, get: function () { return __importDefault(Tabs_1).default; } });
13
- //# sourceMappingURL=index.js.map
package/dist/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;;AAAA,mCAGkB;AAFhB,iIAAA,OAAO,OAA0B;AAGnC,yCAGqB;AAFnB,uIAAA,OAAO,OAA6B;AAGtC,+BAGgB;AAFd,6HAAA,OAAO,OAAwB"}
@@ -1,18 +0,0 @@
1
- "use strict";
2
- var __importDefault = (this && this.__importDefault) || function (mod) {
3
- return (mod && mod.__esModule) ? mod : { "default": mod };
4
- };
5
- Object.defineProperty(exports, "__esModule", { value: true });
6
- const jsx_runtime_1 = require("react/jsx-runtime");
7
- const Tab_1 = __importDefault(require("./Tab"));
8
- const styles = {
9
- tab: {
10
- textTransform: 'initial'
11
- }
12
- };
13
- exports.default = (routes) => {
14
- return routes.map(({ key, title }, index) => {
15
- return ((0, jsx_runtime_1.jsx)(Tab_1.default, { label: title, style: styles.tab, tabIndex: index }, key));
16
- });
17
- };
18
- //# sourceMappingURL=renderScene.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"renderScene.js","sourceRoot":"","sources":["../src/renderScene.tsx"],"names":[],"mappings":";;;;;;AAAA,gDAAwB;AAKxB,MAAM,MAAM,GAER;IACF,GAAG,EAAE;QACH,aAAa,EAAE,SAAS;KACzB;CACF,CAAC;AAEF,kBAAe,CACb,MAGE,EACF,EAAE;IACF,OAAO,MAAM,CAAC,GAAG,CACf,CACE,EACE,GAAG,EACH,KAAK,EACN,EACD,KAAK,EACL,EAAE;QACF,OAAO,CACL,uBAAC,aAAG,IAEF,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,MAAM,CAAC,GAAG,EACjB,QAAQ,EAAE,KAAK,IAHV,GAAG,CAIR,CACH,CAAC;IACJ,CAAC,CACF,CAAC;AACJ,CAAC,CAAC"}
File without changes
File without changes
File without changes
File without changes
File without changes
File without changes