@imperium/layout 8.1.1 → 10.0.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/dist/esm/commonItems.js +9 -0
- package/dist/esm/commonItems.js.map +1 -0
- package/dist/esm/content/components/ActionForm.js +62 -0
- package/dist/esm/content/components/ActionForm.js.map +1 -0
- package/dist/esm/content/components/ActionFormSidebarItemComponent.js +36 -0
- package/dist/esm/content/components/ActionFormSidebarItemComponent.js.map +1 -0
- package/dist/esm/content/components/ActionSidebarItemComponent.js +20 -0
- package/dist/esm/content/components/ActionSidebarItemComponent.js.map +1 -0
- package/dist/esm/content/components/ContentComponent.js +63 -0
- package/dist/esm/content/components/ContentComponent.js.map +1 -0
- package/dist/esm/content/components/CustomSidebarItemComponent.js +8 -0
- package/dist/esm/content/components/CustomSidebarItemComponent.js.map +1 -0
- package/dist/esm/content/components/Header.js +26 -0
- package/dist/esm/content/components/Header.js.map +1 -0
- package/dist/esm/content/components/PlainSidebarItem.js +20 -0
- package/dist/esm/content/components/PlainSidebarItem.js.map +1 -0
- package/dist/esm/content/components/SidebarItemWrapper.js +58 -0
- package/dist/esm/content/components/SidebarItemWrapper.js.map +1 -0
- package/dist/esm/content/components/styles.module.css.js +8 -0
- package/dist/esm/content/components/styles.module.css.js.map +1 -0
- package/dist/esm/content/createPages.js +32 -0
- package/dist/esm/content/createPages.js.map +1 -0
- package/dist/esm/content/dividerSidebarItem.js +7 -0
- package/dist/esm/content/dividerSidebarItem.js.map +1 -0
- package/dist/esm/content/hooks/useBuildContentData.js +18 -0
- package/dist/esm/content/hooks/useBuildContentData.js.map +1 -0
- package/dist/esm/content/types.js +18 -0
- package/dist/esm/content/types.js.map +1 -0
- package/dist/esm/content/utils.js +29 -0
- package/dist/esm/content/utils.js.map +1 -0
- package/dist/esm/datahooks/DataHooks.js +39 -0
- package/dist/esm/datahooks/DataHooks.js.map +1 -0
- package/dist/esm/datahooks/ExecuteDataHook.js +9 -0
- package/dist/esm/datahooks/ExecuteDataHook.js.map +1 -0
- package/dist/esm/datahooks/ExecutePermissionHook.js +17 -0
- package/dist/esm/datahooks/ExecutePermissionHook.js.map +1 -0
- package/dist/esm/datahooks/PermissionHooks.js +16 -0
- package/dist/esm/datahooks/PermissionHooks.js.map +1 -0
- package/dist/esm/external/style-inject/dist/style-inject.es.js +29 -0
- package/dist/esm/external/style-inject/dist/style-inject.es.js.map +1 -0
- package/dist/esm/hooks/useBuildData.js +28 -0
- package/dist/esm/hooks/useBuildData.js.map +1 -0
- package/dist/esm/hooks/useIsActiveRoute.js +22 -0
- package/dist/esm/hooks/useIsActiveRoute.js.map +1 -0
- package/dist/esm/hooks/useSelectPermission.js +12 -0
- package/dist/esm/hooks/useSelectPermission.js.map +1 -0
- package/dist/esm/hooks/useSelectState.js +12 -0
- package/dist/esm/hooks/useSelectState.js.map +1 -0
- package/dist/esm/index.js +21 -0
- package/dist/esm/index.js.map +1 -0
- package/dist/esm/layout/components/CustomLayoutItemComponent.js +8 -0
- package/dist/esm/layout/components/CustomLayoutItemComponent.js.map +1 -0
- package/dist/esm/layout/components/DropdownItem.js +40 -0
- package/dist/esm/layout/components/DropdownItem.js.map +1 -0
- package/dist/esm/layout/components/Layout.js +74 -0
- package/dist/esm/layout/components/Layout.js.map +1 -0
- package/dist/esm/layout/components/LayoutItemBar.js +29 -0
- package/dist/esm/layout/components/LayoutItemBar.js.map +1 -0
- package/dist/esm/layout/components/LayoutItemWrapper.js +72 -0
- package/dist/esm/layout/components/LayoutItemWrapper.js.map +1 -0
- package/dist/esm/layout/components/MenuItem.js +11 -0
- package/dist/esm/layout/components/MenuItem.js.map +1 -0
- package/dist/esm/layout/components/PlainItem.js +14 -0
- package/dist/esm/layout/components/PlainItem.js.map +1 -0
- package/dist/esm/layout/components/SecondaryMenuToggleItem.js +16 -0
- package/dist/esm/layout/components/SecondaryMenuToggleItem.js.map +1 -0
- package/dist/esm/layout/components/styles.module.css.js +8 -0
- package/dist/esm/layout/components/styles.module.css.js.map +1 -0
- package/dist/esm/layout/hooks/useMobileLayout.js +21 -0
- package/dist/esm/layout/hooks/useMobileLayout.js.map +1 -0
- package/dist/esm/layout/moveItems.js +65 -0
- package/dist/esm/layout/moveItems.js.map +1 -0
- package/dist/esm/layout/types.js +12 -0
- package/dist/esm/layout/types.js.map +1 -0
- package/dist/esm/layout/utils.js +41 -0
- package/dist/esm/layout/utils.js.map +1 -0
- package/dist/esm/layout/withLayout.js +52 -0
- package/dist/esm/layout/withLayout.js.map +1 -0
- package/dist/esm/state.js +25 -0
- package/dist/esm/state.js.map +1 -0
- package/dist/esm/types.js +7 -0
- package/dist/esm/types.js.map +1 -0
- package/dist/esm/utils.js +9 -0
- package/dist/esm/utils.js.map +1 -0
- package/dist/stats.html +2689 -0
- package/dist/stats.txt +92 -0
- package/dist/{commonItems.d.ts → types/commonItems.d.ts} +0 -0
- package/dist/{content → types/content}/components/ActionForm.d.ts +0 -0
- package/dist/{content → types/content}/components/ActionFormSidebarItemComponent.d.ts +0 -0
- package/dist/{content → types/content}/components/ActionSidebarItemComponent.d.ts +0 -0
- package/dist/{content → types/content}/components/ContentComponent.d.ts +0 -0
- package/dist/{content → types/content}/components/CustomSidebarItemComponent.d.ts +0 -0
- package/dist/{content → types/content}/components/Header.d.ts +0 -0
- package/dist/{content → types/content}/components/PlainSidebarItem.d.ts +0 -0
- package/dist/{content → types/content}/components/SidebarItemWrapper.d.ts +0 -0
- package/dist/{content → types/content}/createPages.d.ts +0 -0
- package/dist/{content → types/content}/dividerSidebarItem.d.ts +0 -0
- package/dist/{content → types/content}/hooks/useBuildContentData.d.ts +1 -1
- package/dist/{content → types/content}/types.d.ts +0 -0
- package/dist/{content → types/content}/utils.d.ts +0 -0
- package/dist/{datahooks → types/datahooks}/DataHooks.d.ts +0 -0
- package/dist/{datahooks → types/datahooks}/ExecuteDataHook.d.ts +0 -0
- package/dist/{datahooks → types/datahooks}/ExecutePermissionHook.d.ts +0 -0
- package/dist/{datahooks → types/datahooks}/PermissionHooks.d.ts +0 -0
- package/dist/{datahooks → types/datahooks}/types.d.ts +0 -0
- package/dist/{hooks → types/hooks}/useBuildData.d.ts +0 -0
- package/dist/{hooks → types/hooks}/useIsActiveRoute.d.ts +0 -0
- package/dist/{hooks → types/hooks}/useSelectPermission.d.ts +0 -0
- package/dist/{hooks → types/hooks}/useSelectState.d.ts +0 -0
- package/dist/{index.d.ts → types/index.d.ts} +0 -0
- package/dist/{layout → types/layout}/components/CustomLayoutItemComponent.d.ts +0 -0
- package/dist/{layout → types/layout}/components/DropdownItem.d.ts +0 -0
- package/dist/{layout → types/layout}/components/Layout.d.ts +0 -0
- package/dist/{layout → types/layout}/components/LayoutItemBar.d.ts +0 -0
- package/dist/{layout → types/layout}/components/LayoutItemWrapper.d.ts +2 -2
- package/dist/{layout → types/layout}/components/MenuItem.d.ts +0 -0
- package/dist/{layout → types/layout}/components/PlainItem.d.ts +2 -2
- package/dist/{layout → types/layout}/components/SecondaryMenuToggleItem.d.ts +0 -0
- package/dist/{layout → types/layout}/hooks/useMobileLayout.d.ts +0 -0
- package/dist/{layout → types/layout}/moveItems.d.ts +0 -0
- package/dist/{layout → types/layout}/types.d.ts +0 -0
- package/dist/{layout → types/layout}/utils.d.ts +0 -0
- package/dist/{layout → types/layout}/withLayout.d.ts +0 -0
- package/dist/{state.d.ts → types/state.d.ts} +0 -0
- package/dist/{types.d.ts → types/types.d.ts} +0 -0
- package/dist/types/utils.d.ts +3 -0
- package/package.json +19 -19
- package/client.js +0 -7
- package/dist/client.js +0 -3665
- package/dist/client.min.js +0 -2
- package/dist/client.min.js.map +0 -1
- package/dist/utils.d.ts +0 -6
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { useEffect } from 'react';
|
|
2
|
+
import { useDispatch } from 'react-redux';
|
|
3
|
+
import { actions } from '../state.js';
|
|
4
|
+
|
|
5
|
+
function ExecutePermissionHook({ permissionHook, routeParams }) {
|
|
6
|
+
const dispatch = useDispatch();
|
|
7
|
+
const perms = permissionHook(routeParams);
|
|
8
|
+
useEffect(() => {
|
|
9
|
+
Object.keys(perms).forEach((permission) => {
|
|
10
|
+
dispatch(actions.setPermission({ permission, result: perms[permission] }));
|
|
11
|
+
});
|
|
12
|
+
}, [dispatch, perms]);
|
|
13
|
+
return null;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
export { ExecutePermissionHook };
|
|
17
|
+
//# sourceMappingURL=ExecutePermissionHook.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ExecutePermissionHook.js","sources":["../../../src/datahooks/ExecutePermissionHook.tsx"],"sourcesContent":["import {useEffect} from 'react';\nimport {useDispatch} from 'react-redux';\nimport {actions} from '../state';\nimport type {PermissionSelectorHook} from '../types';\n\ninterface ExecutePermissionHookProps {\n\tpermissionHook: PermissionSelectorHook;\n\trouteParams?: any;\n}\n\nexport function ExecutePermissionHook({permissionHook, routeParams}: ExecutePermissionHookProps) {\n\tconst dispatch = useDispatch();\n\tconst perms = permissionHook(routeParams);\n\n\tuseEffect(() => {\n\t\tObject.keys(perms).forEach(permission => {\n\t\t\tdispatch(actions.setPermission({permission, result: perms[permission]}));\n\t\t});\n\t}, [dispatch, perms]);\n\n\treturn null;\n}\n"],"names":[],"mappings":";;;;AAUsC,SAAA,qBAAA,CAAA,EAAC,gBAAgB,WAA0C,EAAA,EAAA;AAChG,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,KAAA,GAAQ,eAAe,WAAW,CAAA,CAAA;AAExC,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,MAAA,CAAO,IAAK,CAAA,KAAK,CAAE,CAAA,OAAA,CAAQ,CAAc,UAAA,KAAA;AACxC,MAAS,QAAA,CAAA,OAAA,CAAQ,cAAc,EAAC,UAAA,EAAY,QAAQ,KAAM,CAAA,UAAA,CAAA,EAAY,CAAC,CAAA,CAAA;AAAA,KACvE,CAAA,CAAA;AAAA,GACC,EAAA,CAAC,QAAU,EAAA,KAAK,CAAC,CAAA,CAAA;AAEpB,EAAO,OAAA,IAAA,CAAA;AACR;;;;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import debug from 'debug';
|
|
3
|
+
import { ExecutePermissionHook } from './ExecutePermissionHook.js';
|
|
4
|
+
|
|
5
|
+
debug("imperium.layout.datahooks.PermissionHooks");
|
|
6
|
+
function PermissionHooks({ permissionHooks }) {
|
|
7
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, permissionHooks.map((hook, index) => {
|
|
8
|
+
return /* @__PURE__ */ React.createElement(ExecutePermissionHook, {
|
|
9
|
+
key: index,
|
|
10
|
+
permissionHook: hook
|
|
11
|
+
});
|
|
12
|
+
}));
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export { PermissionHooks };
|
|
16
|
+
//# sourceMappingURL=PermissionHooks.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PermissionHooks.js","sources":["../../../src/datahooks/PermissionHooks.tsx"],"sourcesContent":["import debug from 'debug';\nimport type {PermissionSelectorHook} from '../types';\nimport {ExecutePermissionHook} from './ExecutePermissionHook';\n\nconst d = debug('imperium.layout.datahooks.PermissionHooks');\n\ninterface PermissionHooksProps {\n\tpermissionHooks: PermissionSelectorHook[];\n}\n\nexport function PermissionHooks({permissionHooks}: PermissionHooksProps) {\n\treturn (\n\t\t<>\n\t\t\t{permissionHooks.map((hook, index) => {\n\t\t\t\t// eslint-disable-next-line react/no-array-index-key\n\t\t\t\treturn <ExecutePermissionHook key={index} permissionHook={hook} />;\n\t\t\t})}\n\t\t</>\n\t);\n}\n"],"names":[],"mappings":";;;;AAIU,MAAM,2CAA2C,EAAA;AAMpD,SAAA,eAAA,CAAyB,EAAC,eAAwC,EAAA,EAAA;AACxE,EAAA,uBAEG,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,EAAA,eAAA,CAAgB,GAAI,CAAA,CAAC,MAAM,KAAU,KAAA;AAErC,IAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,qBAAA,EAAA;AAAA,MAAsB,GAAK,EAAA,KAAA;AAAA,MAAO,cAAgB,EAAA,IAAA;AAAA,KAAM,CAAA,CAAA;AAAA,GAChE,CACF,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
function styleInject(css, ref) {
|
|
2
|
+
if ( ref === void 0 ) ref = {};
|
|
3
|
+
var insertAt = ref.insertAt;
|
|
4
|
+
|
|
5
|
+
if (!css || typeof document === 'undefined') { return; }
|
|
6
|
+
|
|
7
|
+
var head = document.head || document.getElementsByTagName('head')[0];
|
|
8
|
+
var style = document.createElement('style');
|
|
9
|
+
style.type = 'text/css';
|
|
10
|
+
|
|
11
|
+
if (insertAt === 'top') {
|
|
12
|
+
if (head.firstChild) {
|
|
13
|
+
head.insertBefore(style, head.firstChild);
|
|
14
|
+
} else {
|
|
15
|
+
head.appendChild(style);
|
|
16
|
+
}
|
|
17
|
+
} else {
|
|
18
|
+
head.appendChild(style);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
if (style.styleSheet) {
|
|
22
|
+
style.styleSheet.cssText = css;
|
|
23
|
+
} else {
|
|
24
|
+
style.appendChild(document.createTextNode(css));
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export { styleInject as default };
|
|
29
|
+
//# sourceMappingURL=style-inject.es.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style-inject.es.js","sources":["../../../../../../../node_modules/style-inject/dist/style-inject.es.js"],"sourcesContent":["function styleInject(css, ref) {\n if ( ref === void 0 ) ref = {};\n var insertAt = ref.insertAt;\n\n if (!css || typeof document === 'undefined') { return; }\n\n var head = document.head || document.getElementsByTagName('head')[0];\n var style = document.createElement('style');\n style.type = 'text/css';\n\n if (insertAt === 'top') {\n if (head.firstChild) {\n head.insertBefore(style, head.firstChild);\n } else {\n head.appendChild(style);\n }\n } else {\n head.appendChild(style);\n }\n\n if (style.styleSheet) {\n style.styleSheet.cssText = css;\n } else {\n style.appendChild(document.createTextNode(css));\n }\n}\n\nexport default styleInject;\n"],"names":[],"mappings":"AAAA,SAAS,WAAW,CAAC,GAAG,EAAE,GAAG,EAAE;AAC/B,EAAE,KAAK,GAAG,KAAK,KAAK,CAAC,GAAG,GAAG,GAAG,EAAE,CAAC;AACjC,EAAE,IAAI,QAAQ,GAAG,GAAG,CAAC,QAAQ,CAAC;AAC9B;AACA,EAAE,IAAI,CAAC,GAAG,IAAI,OAAO,QAAQ,KAAK,WAAW,EAAE,EAAE,OAAO,EAAE;AAC1D;AACA,EAAE,IAAI,IAAI,GAAG,QAAQ,CAAC,IAAI,IAAI,QAAQ,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,CAAC;AACvE,EAAE,IAAI,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;AAC9C,EAAE,KAAK,CAAC,IAAI,GAAG,UAAU,CAAC;AAC1B;AACA,EAAE,IAAI,QAAQ,KAAK,KAAK,EAAE;AAC1B,IAAI,IAAI,IAAI,CAAC,UAAU,EAAE;AACzB,MAAM,IAAI,CAAC,YAAY,CAAC,KAAK,EAAE,IAAI,CAAC,UAAU,CAAC,CAAC;AAChD,KAAK,MAAM;AACX,MAAM,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC9B,KAAK;AACL,GAAG,MAAM;AACT,IAAI,IAAI,CAAC,WAAW,CAAC,KAAK,CAAC,CAAC;AAC5B,GAAG;AACH;AACA,EAAE,IAAI,KAAK,CAAC,UAAU,EAAE;AACxB,IAAI,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,GAAG,CAAC;AACnC,GAAG,MAAM;AACT,IAAI,KAAK,CAAC,WAAW,CAAC,QAAQ,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,CAAC;AACpD,GAAG;AACH;;;;"}
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { useAuth } from '@imperium/auth-client';
|
|
2
|
+
import debug from 'debug';
|
|
3
|
+
import { merge, compact } from 'lodash-es';
|
|
4
|
+
import { useLocation } from 'react-router-dom';
|
|
5
|
+
import { useLayoutState } from '../state.js';
|
|
6
|
+
import { useIsActiveRoute } from './useIsActiveRoute.js';
|
|
7
|
+
import { useSelectPermission } from './useSelectPermission.js';
|
|
8
|
+
import { useSelectState } from './useSelectState.js';
|
|
9
|
+
|
|
10
|
+
debug("imperium.layout.hooks.useBuildData");
|
|
11
|
+
function useBuildData({ stateSelectorHook, permissionSelectorHook, data, routeItem }) {
|
|
12
|
+
const { id } = useAuth();
|
|
13
|
+
const { permissions } = useLayoutState();
|
|
14
|
+
const state = useSelectState(stateSelectorHook);
|
|
15
|
+
const loc = useLocation();
|
|
16
|
+
const route = {
|
|
17
|
+
path: compact(loc.pathname.split("/")),
|
|
18
|
+
hash: loc.hash,
|
|
19
|
+
search: new URLSearchParams(loc.search)
|
|
20
|
+
};
|
|
21
|
+
const active = useIsActiveRoute({ loc, route, state, active: false, id, permissions }, routeItem);
|
|
22
|
+
const permissionsX = useSelectPermission({ state, loc, active, route, id, permissions }, permissionSelectorHook);
|
|
23
|
+
const newData = { state, loc, active, route, permissions: { ...permissions, ...permissionsX }, id };
|
|
24
|
+
return data ? merge(data, newData) : newData;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export { useBuildData };
|
|
28
|
+
//# sourceMappingURL=useBuildData.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useBuildData.js","sources":["../../../src/hooks/useBuildData.ts"],"sourcesContent":["import {useAuth} from '@imperium/auth-client';\nimport debug from 'debug';\nimport type {Location} from 'history';\nimport {compact, merge} from 'lodash-es';\nimport {useLocation} from 'react-router-dom';\nimport {useLayoutState} from '../state';\nimport type {Data, PermissionSelectorHook, StateSelectorHook} from '../types';\nimport {useIsActiveRoute} from './useIsActiveRoute';\nimport {useSelectPermission} from './useSelectPermission';\nimport {useSelectState} from './useSelectState';\n\nconst d = debug('imperium.layout.hooks.useBuildData');\n\nexport interface UseBuildDataParams {\n\tdata?: Data;\n\trouteItem?: any;\n\tstateSelectorHook?: StateSelectorHook | StateSelectorHook[];\n\tpermissionSelectorHook?: PermissionSelectorHook | PermissionSelectorHook[];\n}\n\nexport function useBuildData({stateSelectorHook, permissionSelectorHook, data, routeItem}: UseBuildDataParams) {\n\tconst {id} = useAuth();\n\tconst {permissions} = useLayoutState();\n\tconst state = useSelectState(stateSelectorHook);\n\tconst loc = useLocation() as Location;\n\tconst route = {\n\t\tpath: compact(loc.pathname.split('/')),\n\t\thash: loc.hash,\n\t\tsearch: new URLSearchParams(loc.search),\n\t};\n\tconst active = useIsActiveRoute({loc, route, state, active: false, id, permissions}, routeItem);\n\tconst permissionsX = useSelectPermission({state, loc, active, route, id, permissions}, permissionSelectorHook);\n\tconst newData: Data = {state, loc, active, route, permissions: {...permissions, ...permissionsX}, id};\n\treturn data ? merge(data, newData) : newData;\n}\n"],"names":[],"mappings":";;;;;;;;;AAWU,MAAM,oCAAoC,EAAA;AAS7C,SAAA,YAAA,CAAsB,EAAC,iBAAA,EAAmB,sBAAwB,EAAA,IAAA,EAAM,SAAgC,EAAA,EAAA;AAC9G,EAAM,MAAA,EAAC,OAAM,OAAQ,EAAA,CAAA;AACrB,EAAM,MAAA,EAAC,gBAAe,cAAe,EAAA,CAAA;AACrC,EAAM,MAAA,KAAA,GAAQ,eAAe,iBAAiB,CAAA,CAAA;AAC9C,EAAA,MAAM,MAAM,WAAY,EAAA,CAAA;AACxB,EAAA,MAAM,KAAQ,GAAA;AAAA,IACb,MAAM,OAAQ,CAAA,GAAA,CAAI,QAAS,CAAA,KAAA,CAAM,GAAG,CAAC,CAAA;AAAA,IACrC,MAAM,GAAI,CAAA,IAAA;AAAA,IACV,MAAQ,EAAA,IAAI,eAAgB,CAAA,GAAA,CAAI,MAAM,CAAA;AAAA,GACvC,CAAA;AACA,EAAM,MAAA,MAAA,GAAS,gBAAiB,CAAA,EAAC,GAAK,EAAA,KAAA,EAAO,KAAO,EAAA,MAAA,EAAQ,KAAO,EAAA,EAAA,EAAI,WAAW,EAAA,EAAG,SAAS,CAAA,CAAA;AAC9F,EAAM,MAAA,YAAA,GAAe,mBAAoB,CAAA,EAAC,KAAO,EAAA,GAAA,EAAK,QAAQ,KAAO,EAAA,EAAA,EAAI,WAAW,EAAA,EAAG,sBAAsB,CAAA,CAAA;AAC7G,EAAM,MAAA,OAAA,GAAgB,EAAC,KAAA,EAAO,GAAK,EAAA,MAAA,EAAQ,KAAO,EAAA,WAAA,EAAa,EAAI,GAAA,WAAA,EAAA,GAAgB,YAAY,EAAA,EAAG,EAAE,EAAA,CAAA;AACpG,EAAA,OAAO,IAAO,GAAA,KAAA,CAAM,IAAM,EAAA,OAAO,CAAI,GAAA,OAAA,CAAA;AACtC;;;;"}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import { useRouteMatch } from 'react-router';
|
|
2
|
+
import { isRouteItem } from '../commonItems.js';
|
|
3
|
+
|
|
4
|
+
function useIsActiveRoute(data, item) {
|
|
5
|
+
const routeMatchObject = {};
|
|
6
|
+
if (item && isRouteItem(item)) {
|
|
7
|
+
if (typeof item.to === "string") {
|
|
8
|
+
routeMatchObject.path = item.to;
|
|
9
|
+
}
|
|
10
|
+
if (typeof item.to === "function") {
|
|
11
|
+
routeMatchObject.path = item.to(data);
|
|
12
|
+
}
|
|
13
|
+
routeMatchObject.exact = item.exact !== false;
|
|
14
|
+
routeMatchObject.sensitive = item.sensitive;
|
|
15
|
+
routeMatchObject.strict = item.strict;
|
|
16
|
+
}
|
|
17
|
+
const routeMatch = useRouteMatch(routeMatchObject);
|
|
18
|
+
return routeMatch !== null;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export { useIsActiveRoute };
|
|
22
|
+
//# sourceMappingURL=useIsActiveRoute.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useIsActiveRoute.js","sources":["../../../src/hooks/useIsActiveRoute.ts"],"sourcesContent":["import {useRouteMatch} from 'react-router';\nimport type {RouteProps} from 'react-router-dom';\nimport {isRouteItem} from '../commonItems';\nimport type {Data} from '../types';\n\nexport function useIsActiveRoute(data: Data, item?: any) {\n\t// Determine if the current route matches the to route to see if the link is active\n\tconst routeMatchObject: RouteProps = {};\n\tif (item && isRouteItem(item)) {\n\t\tif (typeof item.to === 'string') {\n\t\t\trouteMatchObject.path = item.to;\n\t\t}\n\t\tif (typeof item.to === 'function') {\n\t\t\trouteMatchObject.path = item.to(data);\n\t\t}\n\t\trouteMatchObject.exact = item.exact !== false;\n\t\trouteMatchObject.sensitive = item.sensitive;\n\t\trouteMatchObject.strict = item.strict;\n\t}\n\tconst routeMatch = useRouteMatch(routeMatchObject);\n\treturn routeMatch !== null;\n}\n"],"names":[],"mappings":";;;AAKO,SAAA,gBAAA,CAA0B,MAAY,IAAY,EAAA;AAExD,EAAA,MAAM,mBAA+B,EAAC,CAAA;AACtC,EAAI,IAAA,IAAA,IAAQ,WAAY,CAAA,IAAI,CAAG,EAAA;AAC9B,IAAI,IAAA,OAAO,IAAK,CAAA,EAAA,KAAO,QAAU,EAAA;AAChC,MAAA,gBAAA,CAAiB,OAAO,IAAK,CAAA,EAAA,CAAA;AAAA,KAC9B;AACA,IAAI,IAAA,OAAO,IAAK,CAAA,EAAA,KAAO,UAAY,EAAA;AAClC,MAAiB,gBAAA,CAAA,IAAA,GAAO,IAAK,CAAA,EAAA,CAAG,IAAI,CAAA,CAAA;AAAA,KACrC;AACA,IAAiB,gBAAA,CAAA,KAAA,GAAQ,KAAK,KAAU,KAAA,KAAA,CAAA;AACxC,IAAA,gBAAA,CAAiB,YAAY,IAAK,CAAA,SAAA,CAAA;AAClC,IAAA,gBAAA,CAAiB,SAAS,IAAK,CAAA,MAAA,CAAA;AAAA,GAChC;AACA,EAAM,MAAA,UAAA,GAAa,cAAc,gBAAgB,CAAA,CAAA;AACjD,EAAA,OAAO,UAAe,KAAA,IAAA,CAAA;AACvB;;;;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { flowRight } from 'lodash-es';
|
|
2
|
+
|
|
3
|
+
function useSelectPermission(data, permissionSelectorHook) {
|
|
4
|
+
let finalSelectorHook = () => ({});
|
|
5
|
+
if (permissionSelectorHook) {
|
|
6
|
+
finalSelectorHook = Array.isArray(permissionSelectorHook) ? flowRight(permissionSelectorHook) : permissionSelectorHook;
|
|
7
|
+
}
|
|
8
|
+
return finalSelectorHook(data);
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export { useSelectPermission };
|
|
12
|
+
//# sourceMappingURL=useSelectPermission.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSelectPermission.js","sources":["../../../src/hooks/useSelectPermission.ts"],"sourcesContent":["import {flowRight} from 'lodash-es';\nimport type {Data, PermissionSelectorHook} from '../types';\n\nexport function useSelectPermission(data: Data, permissionSelectorHook?: PermissionSelectorHook | PermissionSelectorHook[]) {\n\tlet finalSelectorHook: PermissionSelectorHook = () => ({});\n\tif (permissionSelectorHook) {\n\t\tfinalSelectorHook = Array.isArray(permissionSelectorHook) ? flowRight(permissionSelectorHook) : permissionSelectorHook;\n\t}\n\treturn finalSelectorHook(data);\n}\n"],"names":[],"mappings":";;AAGO,SAAA,mBAAA,CAA6B,MAAY,sBAA4E,EAAA;AAC3H,EAAI,IAAA,iBAAA,GAA4C,OAAQ,EAAA,CAAA,CAAA;AACxD,EAAA,IAAI,sBAAwB,EAAA;AAC3B,IAAA,iBAAA,GAAoB,MAAM,OAAQ,CAAA,sBAAsB,CAAI,GAAA,SAAA,CAAU,sBAAsB,CAAI,GAAA,sBAAA,CAAA;AAAA,GACjG;AACA,EAAA,OAAO,kBAAkB,IAAI,CAAA,CAAA;AAC9B;;;;"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { flowRight } from 'lodash-es';
|
|
2
|
+
|
|
3
|
+
function useSelectState(stateSelectorHook) {
|
|
4
|
+
let finalSelectorHook = () => ({});
|
|
5
|
+
if (stateSelectorHook) {
|
|
6
|
+
finalSelectorHook = Array.isArray(stateSelectorHook) ? flowRight(stateSelectorHook) : stateSelectorHook;
|
|
7
|
+
}
|
|
8
|
+
return finalSelectorHook();
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
export { useSelectState };
|
|
12
|
+
//# sourceMappingURL=useSelectState.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useSelectState.js","sources":["../../../src/hooks/useSelectState.ts"],"sourcesContent":["import {flowRight} from 'lodash-es';\nimport type {StateSelectorHook} from '../types';\n\nexport function useSelectState(stateSelectorHook?: StateSelectorHook | StateSelectorHook[]) {\n\tlet finalSelectorHook: () => any = () => ({});\n\tif (stateSelectorHook) {\n\t\tfinalSelectorHook = Array.isArray(stateSelectorHook) ? flowRight(stateSelectorHook) : stateSelectorHook;\n\t}\n\treturn finalSelectorHook();\n}\n"],"names":[],"mappings":";;AAGO,SAAA,cAAA,CAAwB,iBAA6D,EAAA;AAC3F,EAAI,IAAA,iBAAA,GAA+B,OAAQ,EAAA,CAAA,CAAA;AAC3C,EAAA,IAAI,iBAAmB,EAAA;AACtB,IAAA,iBAAA,GAAoB,MAAM,OAAQ,CAAA,iBAAiB,CAAI,GAAA,SAAA,CAAU,iBAAiB,CAAI,GAAA,iBAAA,CAAA;AAAA,GACvF;AACA,EAAA,OAAO,iBAAkB,EAAA,CAAA;AAC1B;;;;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import { useMobileLayout } from './layout/hooks/useMobileLayout.js';
|
|
2
|
+
import { withLayout } from './layout/withLayout.js';
|
|
3
|
+
import { state } from './state.js';
|
|
4
|
+
export { actions as layoutActions, useLayoutState } from './state.js';
|
|
5
|
+
export { createPages } from './content/createPages.js';
|
|
6
|
+
export { dividerSidebarItem } from './content/dividerSidebarItem.js';
|
|
7
|
+
|
|
8
|
+
function layoutClientModule() {
|
|
9
|
+
return {
|
|
10
|
+
name: "@imperium/layout",
|
|
11
|
+
order: 30,
|
|
12
|
+
hocs: [withLayout],
|
|
13
|
+
state,
|
|
14
|
+
layout: {
|
|
15
|
+
dataHooks: [useMobileLayout]
|
|
16
|
+
}
|
|
17
|
+
};
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export { layoutClientModule };
|
|
21
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["import type {ImperiumStateClientModule} from '@imperium/state';\nimport {useMobileLayout} from './layout/hooks/useMobileLayout';\nimport {withLayout} from './layout/withLayout';\nimport {state} from './state';\nimport type {ImperiumLayoutClientModule} from './types';\n\nexport function layoutClientModule(): ImperiumStateClientModule & ImperiumLayoutClientModule {\n\treturn {\n\t\tname: '@imperium/layout',\n\t\torder: 30,\n\t\thocs: [withLayout],\n\t\tstate,\n\t\tlayout: {\n\t\t\tdataHooks: [useMobileLayout],\n\t\t},\n\t};\n}\n\nexport type {LayoutData} from './layout/types';\nexport {useLayoutState, actions as layoutActions} from './state';\nexport {createPages} from './content/createPages';\nexport type {ImperiumLayoutClientModule} from './types';\nexport {dividerSidebarItem} from './content/dividerSidebarItem';\n"],"names":[],"mappings":";;;;;;;AAM6F,SAAA,kBAAA,GAAA;AAC5F,EAAO,OAAA;AAAA,IACN,IAAM,EAAA,kBAAA;AAAA,IACN,KAAO,EAAA,EAAA;AAAA,IACP,IAAA,EAAM,CAAC,UAAU,CAAA;AAAA,IACjB,KAAA;AAAA,IACA,MAAQ,EAAA;AAAA,MACP,SAAA,EAAW,CAAC,eAAe,CAAA;AAAA,KAC5B;AAAA,GACD,CAAA;AACD;;;;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CustomLayoutItemComponent.js","sources":["../../../../src/layout/components/CustomLayoutItemComponent.tsx"],"sourcesContent":["import type {Data} from '../../types';\nimport type {CustomLayoutItem} from '../types';\n\ninterface CustomLayoutItemComponentProps {\n\titem: CustomLayoutItem;\n\tdata: Data;\n}\n\nexport function CustomLayoutItemComponent({item, data}: CustomLayoutItemComponentProps) {\n\treturn item.render(data);\n}\n"],"names":[],"mappings":";;AAQ0C,SAAA,yBAAA,CAAA,EAAC,MAAM,IAAuC,EAAA,EAAA;AACvF,EAAO,OAAA,IAAA,CAAK,OAAO,IAAI,CAAA,CAAA;AACxB;;;;"}
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import debug from 'debug';
|
|
3
|
+
import { Menu, Accordion, Icon, Dropdown } from 'semantic-ui-react';
|
|
4
|
+
import { getText } from '../utils.js';
|
|
5
|
+
import styles from './styles.module.css.js';
|
|
6
|
+
|
|
7
|
+
debug("imperium.layout.components.DropdownItem");
|
|
8
|
+
function DropdownItem({ item, vertical, children, data }) {
|
|
9
|
+
const [open, setOpen] = useState(false);
|
|
10
|
+
if (vertical) {
|
|
11
|
+
return /* @__PURE__ */ React.createElement(Menu.Item, {
|
|
12
|
+
className: "imperiumVerticalDropdown"
|
|
13
|
+
}, /* @__PURE__ */ React.createElement(Accordion, {
|
|
14
|
+
fluid: true
|
|
15
|
+
}, /* @__PURE__ */ React.createElement(Accordion.Title, {
|
|
16
|
+
className: styles.verticalDropdownTitle,
|
|
17
|
+
onClick: (ev) => {
|
|
18
|
+
ev.stopPropagation();
|
|
19
|
+
setOpen(!open);
|
|
20
|
+
}
|
|
21
|
+
}, /* @__PURE__ */ React.createElement(Icon, {
|
|
22
|
+
className: open ? styles.verticalDropdownIconRotated : styles.verticalDropdownIcon,
|
|
23
|
+
name: "arrow right"
|
|
24
|
+
}), item.text), /* @__PURE__ */ React.createElement(Accordion.Content, {
|
|
25
|
+
active: open,
|
|
26
|
+
className: `${styles.verticalDropdownContent} imperiumVerticalDropdownContent`,
|
|
27
|
+
children
|
|
28
|
+
})));
|
|
29
|
+
}
|
|
30
|
+
return /* @__PURE__ */ React.createElement(Dropdown, {
|
|
31
|
+
item: true,
|
|
32
|
+
text: getText(item, data),
|
|
33
|
+
className: "imperiumDropdown"
|
|
34
|
+
}, /* @__PURE__ */ React.createElement(Dropdown.Menu, {
|
|
35
|
+
className: "imperiumDropdownContent"
|
|
36
|
+
}, children));
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
export { DropdownItem };
|
|
40
|
+
//# sourceMappingURL=DropdownItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DropdownItem.js","sources":["../../../../src/layout/components/DropdownItem.tsx"],"sourcesContent":["import debug from 'debug';\nimport {useState} from 'react';\nimport {Accordion, Dropdown, Icon, Menu} from 'semantic-ui-react';\nimport type {Data} from '../../types';\nimport type {DropdownLayoutItem} from '../types';\nimport {getText} from '../utils';\nimport styles from './styles.module.css';\n\nconst d = debug('imperium.layout.components.DropdownItem');\n\ninterface DropdownItemProps {\n\titem: DropdownLayoutItem;\n\tchildren: JSX.Element[];\n\tdata: Data;\n\tvertical?: boolean;\n}\n\nexport function DropdownItem({item, vertical, children, data}: DropdownItemProps) {\n\tconst [open, setOpen] = useState(false);\n\n\tif (vertical) {\n\t\treturn (\n\t\t\t<Menu.Item className=\"imperiumVerticalDropdown\">\n\t\t\t\t<Accordion fluid>\n\t\t\t\t\t<Accordion.Title\n\t\t\t\t\t\tclassName={styles.verticalDropdownTitle}\n\t\t\t\t\t\tonClick={ev => {\n\t\t\t\t\t\t\tev.stopPropagation();\n\t\t\t\t\t\t\tsetOpen(!open);\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t<Icon className={open ? styles.verticalDropdownIconRotated : styles.verticalDropdownIcon} name=\"arrow right\" />\n\t\t\t\t\t\t{item.text}\n\t\t\t\t\t</Accordion.Title>\n\t\t\t\t\t<Accordion.Content active={open} className={`${styles.verticalDropdownContent} imperiumVerticalDropdownContent`} children={children} />\n\t\t\t\t</Accordion>\n\t\t\t</Menu.Item>\n\t\t);\n\t}\n\n\treturn (\n\t\t<Dropdown item text={getText(item, data)} className=\"imperiumDropdown\">\n\t\t\t<Dropdown.Menu className=\"imperiumDropdownContent\">{children}</Dropdown.Menu>\n\t\t</Dropdown>\n\t);\n}\n"],"names":[],"mappings":";;;;;;AAQU,MAAM,yCAAyC,EAAA;AASlD,SAAA,YAAA,CAAsB,EAAC,IAAA,EAAM,QAAU,EAAA,QAAA,EAAU,IAA0B,EAAA,EAAA;AACjF,EAAA,MAAM,CAAC,IAAA,EAAM,OAAW,CAAA,GAAA,QAAA,CAAS,KAAK,CAAA,CAAA;AAEtC,EAAA,IAAI,QAAU,EAAA;AACb,IACC,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,IAAL,EAAA;AAAA,MAAU,SAAU,EAAA,0BAAA;AAAA,KAAA,kBACnB,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,MAAU,KAAK,EAAA,IAAA;AAAA,KACf,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAU,KAAV,EAAA;AAAA,MACA,WAAW,MAAO,CAAA,qBAAA;AAAA,MAClB,SAAS,CAAM,EAAA,KAAA;AACd,QAAA,EAAA,CAAG,eAAgB,EAAA,CAAA;AACnB,QAAA,OAAA,CAAQ,CAAC,IAAI,CAAA,CAAA;AAAA,OACd;AAAA,KAAA,kBAEC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,MAAK,SAAW,EAAA,IAAA,GAAO,MAAO,CAAA,2BAAA,GAA8B,MAAO,CAAA,oBAAA;AAAA,MAAsB,IAAK,EAAA,aAAA;AAAA,KAAc,GAC5G,IAAK,CAAA,IACP,CACA,kBAAA,KAAA,CAAA,aAAA,CAAC,UAAU,OAAV,EAAA;AAAA,MAAkB,MAAQ,EAAA,IAAA;AAAA,MAAM,SAAA,EAAW,GAAG,MAAO,CAAA,uBAAA,CAAA,gCAAA,CAAA;AAAA,MAA2D,QAAA;AAAA,KAAoB,CACtI,CACD,CAAA,CAAA;AAAA,GAEF;AAEA,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,IAAS,IAAI,EAAA,IAAA;AAAA,IAAC,IAAA,EAAM,OAAQ,CAAA,IAAA,EAAM,IAAI,CAAA;AAAA,IAAG,SAAU,EAAA,kBAAA;AAAA,GACnD,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAS,IAAT,EAAA;AAAA,IAAc,SAAU,EAAA,yBAAA;AAAA,GAAA,EAA2B,QAAS,CAC9D,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
import React, { useState } from 'react';
|
|
2
|
+
import debug from 'debug';
|
|
3
|
+
import { Segment } from 'semantic-ui-react';
|
|
4
|
+
import { useLayoutState } from '../../state.js';
|
|
5
|
+
import { moveItems } from '../moveItems.js';
|
|
6
|
+
import { LayoutItemBar } from './LayoutItemBar.js';
|
|
7
|
+
import { SecondaryMenuToggleItem } from './SecondaryMenuToggleItem.js';
|
|
8
|
+
import styles from './styles.module.css.js';
|
|
9
|
+
|
|
10
|
+
debug("imperium.layout.components.Layout");
|
|
11
|
+
function Layout({ footer, primaryMenu, statusbar, secondaryMenu, children }) {
|
|
12
|
+
const { isMobile } = useLayoutState();
|
|
13
|
+
const [menuOpen, setMenuOpen] = useState(true);
|
|
14
|
+
const primaryMenuToggle = {
|
|
15
|
+
stickOnMobile: true,
|
|
16
|
+
weight: -19999,
|
|
17
|
+
render: () => {
|
|
18
|
+
if (!isMobile)
|
|
19
|
+
return null;
|
|
20
|
+
return /* @__PURE__ */ React.createElement(SecondaryMenuToggleItem, {
|
|
21
|
+
menuOpen,
|
|
22
|
+
setMenuOpen
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
const primaryMenuItems = moveItems(isMobile ? [primaryMenuToggle, ...primaryMenu].filter((v) => v.stickOnMobile === true) : [primaryMenuToggle, ...primaryMenu]);
|
|
27
|
+
const secondaryMenuItems = moveItems(isMobile ? [
|
|
28
|
+
...secondaryMenu,
|
|
29
|
+
{
|
|
30
|
+
text: "",
|
|
31
|
+
menu: [primaryMenuToggle, ...primaryMenu].filter((v) => v.stickOnMobile !== true)
|
|
32
|
+
}
|
|
33
|
+
] : secondaryMenu);
|
|
34
|
+
const secondaryMenuComp = secondaryMenuItems.length > 0 ? /* @__PURE__ */ React.createElement("div", {
|
|
35
|
+
className: "imperiumSecondaryMenuWrapper"
|
|
36
|
+
}, /* @__PURE__ */ React.createElement(LayoutItemBar, {
|
|
37
|
+
items: secondaryMenuItems,
|
|
38
|
+
inverted: true,
|
|
39
|
+
vertical: true,
|
|
40
|
+
className: isMobile && !menuOpen ? `${styles.secondaryMenu} ${styles.secondaryMenuHidden} imperiumSecondaryMenu` : `${styles.secondaryMenu} imperiumSecondaryMenu`
|
|
41
|
+
})) : null;
|
|
42
|
+
const footerItems = moveItems(footer);
|
|
43
|
+
const footerComp = footerItems.length > 0 ? /* @__PURE__ */ React.createElement(LayoutItemBar, {
|
|
44
|
+
name: "footer",
|
|
45
|
+
items: footerItems,
|
|
46
|
+
className: `${styles.footer} imperiumFooter`,
|
|
47
|
+
inverted: true,
|
|
48
|
+
borderless: true
|
|
49
|
+
}) : null;
|
|
50
|
+
const statusbarItems = moveItems(statusbar);
|
|
51
|
+
const statusbarComp = statusbarItems.length > 0 ? /* @__PURE__ */ React.createElement(LayoutItemBar, {
|
|
52
|
+
items: statusbarItems,
|
|
53
|
+
inverted: true,
|
|
54
|
+
className: `${styles.statusbar} imperiumStatusbar`
|
|
55
|
+
}) : null;
|
|
56
|
+
return /* @__PURE__ */ React.createElement("div", {
|
|
57
|
+
className: `${styles.parent} imperiumLayout ${isMobile ? "imperiumMobile" : "imperiumNotMobile"}`
|
|
58
|
+
}, /* @__PURE__ */ React.createElement("div", {
|
|
59
|
+
className: "imperiumPrimaryMenuWrapper"
|
|
60
|
+
}, /* @__PURE__ */ React.createElement(LayoutItemBar, {
|
|
61
|
+
items: primaryMenuItems,
|
|
62
|
+
inverted: true,
|
|
63
|
+
borderless: true,
|
|
64
|
+
className: `${styles.menubar} imperiumPrimaryMenu`
|
|
65
|
+
}), statusbarComp), /* @__PURE__ */ React.createElement(Segment, {
|
|
66
|
+
attached: true,
|
|
67
|
+
className: `${styles.contentWrapper} imperiumLayoutContentWrapper`
|
|
68
|
+
}, secondaryMenuComp, /* @__PURE__ */ React.createElement("div", {
|
|
69
|
+
className: `${styles.content} imperiumLayoutContent`
|
|
70
|
+
}, children)), footerComp);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
export { Layout };
|
|
74
|
+
//# sourceMappingURL=Layout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Layout.js","sources":["../../../../src/layout/components/Layout.tsx"],"sourcesContent":["import debug from 'debug';\nimport {ReactNode, useState} from 'react';\nimport {Segment} from 'semantic-ui-react';\nimport {useLayoutState} from '../../state';\nimport {moveItems} from '../moveItems';\nimport type {LayoutData} from '../types';\nimport {LayoutItemBar} from './LayoutItemBar';\nimport {SecondaryMenuToggleItem} from './SecondaryMenuToggleItem';\nimport styles from './styles.module.css';\n\nconst d = debug('imperium.layout.components.Layout');\n\ninterface LayoutProps extends Required<LayoutData> {\n\tchildren?: ReactNode;\n}\n\n/**\n * Renders the main layout.\n * Hides/shows/collapses things as need for mobile layout.\n * Tracks state to whether the side menu is open or not.\n * @param footer\n * @param menubar\n * @param statusbar\n * @param children\n * @constructor\n */\nexport function Layout({footer, primaryMenu, statusbar, secondaryMenu, children}: LayoutProps) {\n\tconst {isMobile} = useLayoutState();\n\tconst [menuOpen, setMenuOpen] = useState(true);\n\n\tconst primaryMenuToggle = {\n\t\tstickOnMobile: true,\n\t\tweight: -19999,\n\t\trender: () => {\n\t\t\tif (!isMobile) return null;\n\t\t\treturn <SecondaryMenuToggleItem menuOpen={menuOpen} setMenuOpen={setMenuOpen} />;\n\t\t},\n\t};\n\n\t// Determine menubar items\n\tconst primaryMenuItems = moveItems(\n\t\tisMobile ? [primaryMenuToggle, ...primaryMenu].filter(v => v.stickOnMobile === true) : [primaryMenuToggle, ...primaryMenu],\n\t);\n\n\t// const pmi = mergeItems(primaryMenuItems);\n\n\t// Determine sidebar items\n\tconst secondaryMenuItems = moveItems(\n\t\tisMobile\n\t\t\t? [\n\t\t\t\t\t...secondaryMenu,\n\t\t\t\t\t{\n\t\t\t\t\t\ttext: '',\n\t\t\t\t\t\tmenu: [primaryMenuToggle, ...primaryMenu].filter(v => v.stickOnMobile !== true),\n\t\t\t\t\t},\n\t\t\t ]\n\t\t\t: secondaryMenu,\n\t);\n\n\tconst secondaryMenuComp =\n\t\tsecondaryMenuItems.length > 0 ? (\n\t\t\t<div className=\"imperiumSecondaryMenuWrapper\">\n\t\t\t\t<LayoutItemBar\n\t\t\t\t\titems={secondaryMenuItems}\n\t\t\t\t\tinverted\n\t\t\t\t\tvertical\n\t\t\t\t\tclassName={\n\t\t\t\t\t\tisMobile && !menuOpen\n\t\t\t\t\t\t\t? `${styles.secondaryMenu} ${styles.secondaryMenuHidden} imperiumSecondaryMenu`\n\t\t\t\t\t\t\t: `${styles.secondaryMenu} imperiumSecondaryMenu`\n\t\t\t\t\t}\n\t\t\t\t/>\n\t\t\t</div>\n\t\t) : null;\n\n\t// Determine footer items\n\tconst footerItems = moveItems(footer);\n\tconst footerComp =\n\t\tfooterItems.length > 0 ? (\n\t\t\t<LayoutItemBar name=\"footer\" items={footerItems} className={`${styles.footer} imperiumFooter`} inverted borderless />\n\t\t) : null;\n\n\t// Determine status bar items\n\tconst statusbarItems = moveItems(statusbar);\n\tconst statusbarComp =\n\t\tstatusbarItems.length > 0 ? <LayoutItemBar items={statusbarItems} inverted className={`${styles.statusbar} imperiumStatusbar`} /> : null;\n\n\treturn (\n\t\t<div className={`${styles.parent} imperiumLayout ${isMobile ? 'imperiumMobile' : 'imperiumNotMobile'}`}>\n\t\t\t<div className=\"imperiumPrimaryMenuWrapper\">\n\t\t\t\t<LayoutItemBar items={primaryMenuItems} inverted borderless className={`${styles.menubar} imperiumPrimaryMenu`} />\n\t\t\t\t{statusbarComp}\n\t\t\t</div>\n\t\t\t<Segment attached className={`${styles.contentWrapper} imperiumLayoutContentWrapper`}>\n\t\t\t\t{secondaryMenuComp}\n\t\t\t\t<div className={`${styles.content} imperiumLayoutContent`}>{children}</div>\n\t\t\t</Segment>\n\t\t\t{footerComp}\n\t\t</div>\n\t);\n}\n"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import debug from 'debug';
|
|
3
|
+
import { Menu } from 'semantic-ui-react';
|
|
4
|
+
import { sortWeightedItems } from '../../utils.js';
|
|
5
|
+
import { splitPositionedItems } from '../utils.js';
|
|
6
|
+
import { LayoutItemWrapper } from './LayoutItemWrapper.js';
|
|
7
|
+
|
|
8
|
+
debug("imperium.layout.components.LayoutItemBar");
|
|
9
|
+
function LayoutItemBar({ items, ...rest }) {
|
|
10
|
+
const ims = splitPositionedItems(items);
|
|
11
|
+
const leftItems = sortWeightedItems(ims.leftItems).map((item, index) => /* @__PURE__ */ React.createElement(LayoutItemWrapper, {
|
|
12
|
+
item,
|
|
13
|
+
key: index,
|
|
14
|
+
vertical: rest.vertical
|
|
15
|
+
}));
|
|
16
|
+
const rightItems = sortWeightedItems(ims.rightItems).map((item, index) => /* @__PURE__ */ React.createElement(LayoutItemWrapper, {
|
|
17
|
+
item,
|
|
18
|
+
key: index,
|
|
19
|
+
vertical: rest.vertical
|
|
20
|
+
}));
|
|
21
|
+
return /* @__PURE__ */ React.createElement(Menu, {
|
|
22
|
+
...rest
|
|
23
|
+
}, leftItems, rest.vertical ? rightItems : /* @__PURE__ */ React.createElement(Menu.Menu, {
|
|
24
|
+
position: "right"
|
|
25
|
+
}, rightItems));
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
export { LayoutItemBar };
|
|
29
|
+
//# sourceMappingURL=LayoutItemBar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LayoutItemBar.js","sources":["../../../../src/layout/components/LayoutItemBar.tsx"],"sourcesContent":["import debug from 'debug';\nimport type {MenuProps} from 'semantic-ui-react';\nimport {Menu} from 'semantic-ui-react';\nimport {sortWeightedItems} from '../../utils';\nimport type {LayoutItem} from '../types';\nimport {splitPositionedItems} from '../utils';\nimport {LayoutItemWrapper} from './LayoutItemWrapper';\n\nconst d = debug('imperium.layout.components.LayoutItemBar');\n\ninterface ItemBarProps extends MenuProps {\n\titems: LayoutItem[];\n}\n\n/**\n * Renders a horizontal or vertical bar of menu items.\n * @param name\n * @param items\n * @param rest\n * @constructor\n */\nexport function LayoutItemBar({items, ...rest}: ItemBarProps) {\n\tconst ims = splitPositionedItems(items);\n\n\t// eslint-disable-next-line react/no-array-index-key\n\tconst leftItems = sortWeightedItems(ims.leftItems).map((item, index) => (\n\t\t// eslint-disable-next-line react/no-array-index-key\n\t\t<LayoutItemWrapper item={item as LayoutItem} key={index} vertical={rest.vertical} />\n\t));\n\t// eslint-disable-next-line react/no-array-index-key\n\tconst rightItems = sortWeightedItems(ims.rightItems).map((item, index) => (\n\t\t// eslint-disable-next-line react/no-array-index-key\n\t\t<LayoutItemWrapper item={item as LayoutItem} key={index} vertical={rest.vertical} />\n\t));\n\n\treturn (\n\t\t<Menu {...rest}>\n\t\t\t{leftItems}\n\t\t\t{rest.vertical ? rightItems : <Menu.Menu position=\"right\">{rightItems}</Menu.Menu>}\n\t\t</Menu>\n\t);\n}\n"],"names":[],"mappings":";;;;;;;AAQU,MAAM,0CAA0C,EAAA;AAa5B,SAAA,aAAA,CAAA,EAAC,UAAU,IAAqB,EAAA,EAAA;AAC7D,EAAM,MAAA,GAAA,GAAM,qBAAqB,KAAK,CAAA,CAAA;AAGtC,EAAM,MAAA,SAAA,GAAY,kBAAkB,GAAI,CAAA,SAAS,EAAE,GAAI,CAAA,CAAC,IAAM,EAAA,KAAA,qBAE5D,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAA,IAAkB,IAAA;AAAA,IAA0B,GAAK,EAAA,KAAA;AAAA,IAAO,UAAU,IAAK,CAAA,QAAA;AAAA,GAAU,CAClF,CAAA,CAAA;AAED,EAAM,MAAA,UAAA,GAAa,kBAAkB,GAAI,CAAA,UAAU,EAAE,GAAI,CAAA,CAAC,IAAM,EAAA,KAAA,qBAE9D,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAA,IAAkB,IAAA;AAAA,IAA0B,GAAK,EAAA,KAAA;AAAA,IAAO,UAAU,IAAK,CAAA,QAAA;AAAA,GAAU,CAClF,CAAA,CAAA;AAED,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IAAS,GAAA,IAAA;AAAA,GAAA,EACR,WACA,IAAK,CAAA,QAAA,GAAW,UAAa,mBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,IAAL,EAAA;AAAA,IAAU,QAAS,EAAA,OAAA;AAAA,GAAA,EAAS,UAAW,CACvE,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import debug from 'debug';
|
|
3
|
+
import { Query } from 'mingo';
|
|
4
|
+
import { Dropdown } from 'semantic-ui-react';
|
|
5
|
+
import { useBuildData } from '../../hooks/useBuildData.js';
|
|
6
|
+
import { sortWeightedItems } from '../../utils.js';
|
|
7
|
+
import { isCustomLayoutItem, isDropdownLayoutItem, isMenuLayoutItem } from '../types.js';
|
|
8
|
+
import { CustomLayoutItemComponent } from './CustomLayoutItemComponent.js';
|
|
9
|
+
import { DropdownItem } from './DropdownItem.js';
|
|
10
|
+
import { MenuItem } from './MenuItem.js';
|
|
11
|
+
import { PlainItem } from './PlainItem.js';
|
|
12
|
+
|
|
13
|
+
debug("imperium.layout.components.LayoutItemWrapper");
|
|
14
|
+
function LayoutItemWrapper({ item, as, vertical, data: parentData }) {
|
|
15
|
+
const data = useBuildData({
|
|
16
|
+
stateSelectorHook: item.stateSelectorHook,
|
|
17
|
+
permissionSelectorHook: item.permissionSelectorHook,
|
|
18
|
+
routeItem: item,
|
|
19
|
+
data: parentData
|
|
20
|
+
});
|
|
21
|
+
if (item.visible) {
|
|
22
|
+
if (typeof item.visible === "function") {
|
|
23
|
+
if (!item.visible(data))
|
|
24
|
+
return null;
|
|
25
|
+
} else {
|
|
26
|
+
const q = new Query(item.visible || {});
|
|
27
|
+
if (!q.test(data))
|
|
28
|
+
return null;
|
|
29
|
+
}
|
|
30
|
+
}
|
|
31
|
+
if (isCustomLayoutItem(item)) {
|
|
32
|
+
return /* @__PURE__ */ React.createElement(CustomLayoutItemComponent, {
|
|
33
|
+
item,
|
|
34
|
+
data
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
if (isDropdownLayoutItem(item)) {
|
|
38
|
+
const children = sortWeightedItems(item.dropdown).map((v, index) => /* @__PURE__ */ React.createElement(LayoutItemWrapper, {
|
|
39
|
+
key: index,
|
|
40
|
+
item: v,
|
|
41
|
+
as: Dropdown.Item,
|
|
42
|
+
data
|
|
43
|
+
}));
|
|
44
|
+
return /* @__PURE__ */ React.createElement(DropdownItem, {
|
|
45
|
+
item,
|
|
46
|
+
children,
|
|
47
|
+
vertical,
|
|
48
|
+
data
|
|
49
|
+
});
|
|
50
|
+
}
|
|
51
|
+
if (isMenuLayoutItem(item)) {
|
|
52
|
+
const children = sortWeightedItems(item.menu).map((v, index) => /* @__PURE__ */ React.createElement(LayoutItemWrapper, {
|
|
53
|
+
key: index,
|
|
54
|
+
item: v,
|
|
55
|
+
as: Dropdown.Item,
|
|
56
|
+
vertical,
|
|
57
|
+
data
|
|
58
|
+
}));
|
|
59
|
+
return /* @__PURE__ */ React.createElement(MenuItem, {
|
|
60
|
+
item,
|
|
61
|
+
children
|
|
62
|
+
});
|
|
63
|
+
}
|
|
64
|
+
return /* @__PURE__ */ React.createElement(PlainItem, {
|
|
65
|
+
item,
|
|
66
|
+
data,
|
|
67
|
+
as
|
|
68
|
+
});
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
export { LayoutItemWrapper };
|
|
72
|
+
//# sourceMappingURL=LayoutItemWrapper.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LayoutItemWrapper.js","sources":["../../../../src/layout/components/LayoutItemWrapper.tsx"],"sourcesContent":["import debug from 'debug';\nimport {Query} from 'mingo';\nimport type {ComponentClass} from 'react';\nimport {Dropdown} from 'semantic-ui-react';\nimport {useBuildData} from '../../hooks/useBuildData';\nimport type {Data} from '../../types';\nimport {sortWeightedItems} from '../../utils';\nimport type {LayoutItem} from '../types';\nimport {isCustomLayoutItem, isDropdownLayoutItem, isMenuLayoutItem} from '../types';\nimport {CustomLayoutItemComponent} from './CustomLayoutItemComponent';\nimport {DropdownItem} from './DropdownItem';\nimport {MenuItem} from './MenuItem';\nimport {PlainItem} from './PlainItem';\n\nconst d = debug('imperium.layout.components.LayoutItemWrapper');\n\ninterface ItemWrapperProps {\n\titem: LayoutItem;\n\tas?: ComponentClass;\n\tvertical?: boolean;\n\tdata?: Data;\n}\n\n/**\n * Renders any type of Item. Gathers state, route and other data and checks for visibility.\n * @param item\n * @param as\n * @param vertical\n * @param parentData\n * @constructor\n */\nexport function LayoutItemWrapper({item, as, vertical, data: parentData}: ItemWrapperProps) {\n\tconst data = useBuildData({\n\t\tstateSelectorHook: item.stateSelectorHook,\n\t\tpermissionSelectorHook: item.permissionSelectorHook,\n\t\trouteItem: item,\n\t\tdata: parentData,\n\t});\n\n\t// Check if visible\n\tif (item.visible) {\n\t\tif (typeof item.visible === 'function') {\n\t\t\tif (!item.visible(data)) return null;\n\t\t} else {\n\t\t\tconst q = new Query(item.visible || {});\n\t\t\tif (!q.test(data)) return null;\n\t\t}\n\t}\n\n\tif (isCustomLayoutItem(item)) {\n\t\treturn <CustomLayoutItemComponent item={item} data={data} />;\n\t}\n\tif (isDropdownLayoutItem(item)) {\n\t\t// eslint-disable-next-line react/no-array-index-key\n\t\tconst children = sortWeightedItems(item.dropdown).map((v, index) => (\n\t\t\t// eslint-disable-next-line react/no-array-index-key\n\t\t\t<LayoutItemWrapper key={index} item={v as LayoutItem} as={Dropdown.Item} data={data} />\n\t\t));\n\t\treturn <DropdownItem item={item} children={children} vertical={vertical} data={data} />;\n\t}\n\tif (isMenuLayoutItem(item)) {\n\t\t// eslint-disable-next-line react/no-array-index-key\n\t\tconst children = sortWeightedItems(item.menu).map((v, index) => (\n\t\t\t// eslint-disable-next-line react/no-array-index-key\n\t\t\t<LayoutItemWrapper key={index} item={v as LayoutItem} as={Dropdown.Item} vertical={vertical} data={data} />\n\t\t));\n\t\treturn <MenuItem item={item} children={children} />;\n\t}\n\treturn <PlainItem item={item} data={data} as={as} />;\n}\n"],"names":[],"mappings":";;;;;;;;;;;;AAcU,MAAM,8CAA8C,EAAA;AAiBvD,SAAA,iBAAA,CAA2B,EAAC,IAAA,EAAM,EAAI,EAAA,QAAA,EAAU,MAAM,UAA+B,EAAA,EAAA;AAC3F,EAAA,MAAM,OAAO,YAAa,CAAA;AAAA,IACzB,mBAAmB,IAAK,CAAA,iBAAA;AAAA,IACxB,wBAAwB,IAAK,CAAA,sBAAA;AAAA,IAC7B,SAAW,EAAA,IAAA;AAAA,IACX,IAAM,EAAA,UAAA;AAAA,GACN,CAAA,CAAA;AAGD,EAAA,IAAI,KAAK,OAAS,EAAA;AACjB,IAAI,IAAA,OAAO,IAAK,CAAA,OAAA,KAAY,UAAY,EAAA;AACvC,MAAI,IAAA,CAAC,IAAK,CAAA,OAAA,CAAQ,IAAI,CAAA;AAAG,QAAO,OAAA,IAAA,CAAA;AAAA,KAC1B,MAAA;AACN,MAAA,MAAM,IAAI,IAAI,KAAA,CAAM,IAAK,CAAA,OAAA,IAAW,EAAE,CAAA,CAAA;AACtC,MAAI,IAAA,CAAC,CAAE,CAAA,IAAA,CAAK,IAAI,CAAA;AAAG,QAAO,OAAA,IAAA,CAAA;AAAA,KAC3B;AAAA,GACD;AAEA,EAAI,IAAA,kBAAA,CAAmB,IAAI,CAAG,EAAA;AAC7B,IAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,yBAAA,EAAA;AAAA,MAA0B,IAAA;AAAA,MAAY,IAAA;AAAA,KAAY,CAAA,CAAA;AAAA,GAC3D;AACA,EAAI,IAAA,oBAAA,CAAqB,IAAI,CAAG,EAAA;AAE/B,IAAM,MAAA,QAAA,GAAW,kBAAkB,IAAK,CAAA,QAAQ,EAAE,GAAI,CAAA,CAAC,CAAG,EAAA,KAAA,qBAExD,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAA,MAAkB,GAAK,EAAA,KAAA;AAAA,MAAO,IAAM,EAAA,CAAA;AAAA,MAAiB,IAAI,QAAS,CAAA,IAAA;AAAA,MAAM,IAAA;AAAA,KAAY,CACrF,CAAA,CAAA;AACD,IAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,YAAA,EAAA;AAAA,MAAa,IAAA;AAAA,MAAY,QAAA;AAAA,MAAoB,QAAA;AAAA,MAAoB,IAAA;AAAA,KAAY,CAAA,CAAA;AAAA,GACtF;AACA,EAAI,IAAA,gBAAA,CAAiB,IAAI,CAAG,EAAA;AAE3B,IAAM,MAAA,QAAA,GAAW,kBAAkB,IAAK,CAAA,IAAI,EAAE,GAAI,CAAA,CAAC,CAAG,EAAA,KAAA,qBAEpD,KAAA,CAAA,aAAA,CAAA,iBAAA,EAAA;AAAA,MAAkB,GAAK,EAAA,KAAA;AAAA,MAAO,IAAM,EAAA,CAAA;AAAA,MAAiB,IAAI,QAAS,CAAA,IAAA;AAAA,MAAM,QAAA;AAAA,MAAoB,IAAA;AAAA,KAAY,CACzG,CAAA,CAAA;AACD,IAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,QAAA,EAAA;AAAA,MAAS,IAAA;AAAA,MAAY,QAAA;AAAA,KAAoB,CAAA,CAAA;AAAA,GAClD;AACA,EAAA,uBAAQ,KAAA,CAAA,aAAA,CAAA,SAAA,EAAA;AAAA,IAAU,IAAA;AAAA,IAAY,IAAA;AAAA,IAAY,EAAA;AAAA,GAAQ,CAAA,CAAA;AACnD;;;;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Menu } from 'semantic-ui-react';
|
|
3
|
+
|
|
4
|
+
function MenuItem({ item, children }) {
|
|
5
|
+
return /* @__PURE__ */ React.createElement(Menu.Item, null, /* @__PURE__ */ React.createElement(Menu.Header, null, item.text), /* @__PURE__ */ React.createElement(Menu.Menu, {
|
|
6
|
+
compact: ""
|
|
7
|
+
}, children));
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export { MenuItem };
|
|
11
|
+
//# sourceMappingURL=MenuItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MenuItem.js","sources":["../../../../src/layout/components/MenuItem.tsx"],"sourcesContent":["import {Menu} from 'semantic-ui-react';\nimport type {MenuLayoutItem} from '../types';\n\ninterface MenuItemProps {\n\titem: MenuLayoutItem;\n\tchildren: JSX.Element[];\n}\n\nexport function MenuItem({item, children}: MenuItemProps) {\n\treturn (\n\t\t<Menu.Item>\n\t\t\t<Menu.Header>{item.text}</Menu.Header>\n\t\t\t<Menu.Menu compact=\"\">{children}</Menu.Menu>\n\t\t</Menu.Item>\n\t);\n}\n"],"names":[],"mappings":";;;AAQyB,SAAA,QAAA,CAAA,EAAC,MAAM,QAA0B,EAAA,EAAA;AACzD,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,IAAA,CAAK,IAAL,EAAA,IAAA,kBACC,KAAA,CAAA,aAAA,CAAA,IAAA,CAAK,MAAL,EAAA,IAAA,EAAa,IAAK,CAAA,IAAK,CACxB,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAK,IAAL,EAAA;AAAA,IAAU,OAAQ,EAAA,EAAA;AAAA,GAAA,EAAI,QAAS,CACjC,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Menu } from 'semantic-ui-react';
|
|
3
|
+
import { linkParameters, getIcon, getText } from '../utils.js';
|
|
4
|
+
|
|
5
|
+
function PlainItem({ item, data, as }) {
|
|
6
|
+
const linkParams = linkParameters(item, data);
|
|
7
|
+
const ItemX = as || Menu.Item;
|
|
8
|
+
return /* @__PURE__ */ React.createElement(ItemX, {
|
|
9
|
+
...linkParams
|
|
10
|
+
}, getIcon(item, data), getText(item, data));
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export { PlainItem };
|
|
14
|
+
//# sourceMappingURL=PlainItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PlainItem.js","sources":["../../../../src/layout/components/PlainItem.tsx"],"sourcesContent":["import type {ComponentClass} from 'react';\nimport {Menu} from 'semantic-ui-react';\nimport type {Data} from '../../types';\nimport type {CustomLayoutItem, DropdownLayoutItem, LayoutItem, MenuLayoutItem} from '../types';\nimport {getIcon, getText, linkParameters} from '../utils';\n\ninterface PlainItemProps {\n\titem: Exclude<LayoutItem, MenuLayoutItem | DropdownLayoutItem | CustomLayoutItem>;\n\tdata: Data;\n\tas?: ComponentClass;\n}\n\nexport function PlainItem({item, data, as}: PlainItemProps) {\n\tconst linkParams = linkParameters(item, data);\n\n\tconst ItemX = as || Menu.Item;\n\n\treturn (\n\t\t<ItemX {...linkParams}>\n\t\t\t{getIcon(item, data)}\n\t\t\t{getText(item, data)}\n\t\t</ItemX>\n\t);\n}\n"],"names":[],"mappings":";;;;AAY0B,SAAA,SAAA,CAAA,EAAC,IAAM,EAAA,IAAA,EAAM,EAAqB,EAAA,EAAA;AAC3D,EAAM,MAAA,UAAA,GAAa,cAAe,CAAA,IAAA,EAAM,IAAI,CAAA,CAAA;AAE5C,EAAM,MAAA,KAAA,GAAQ,MAAM,IAAK,CAAA,IAAA,CAAA;AAEzB,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA;AAAA,IAAU,GAAA,UAAA;AAAA,GAAA,EACT,QAAQ,IAAM,EAAA,IAAI,GAClB,OAAQ,CAAA,IAAA,EAAM,IAAI,CACpB,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Menu, Icon } from 'semantic-ui-react';
|
|
3
|
+
import styles from './styles.module.css.js';
|
|
4
|
+
|
|
5
|
+
function SecondaryMenuToggleItem({ menuOpen, setMenuOpen }) {
|
|
6
|
+
return /* @__PURE__ */ React.createElement(Menu.Item, null, /* @__PURE__ */ React.createElement(Icon, {
|
|
7
|
+
className: menuOpen ? styles.iconRotated : styles.icon,
|
|
8
|
+
name: menuOpen ? "close" : "sidebar",
|
|
9
|
+
onClick: () => {
|
|
10
|
+
setMenuOpen(!menuOpen);
|
|
11
|
+
}
|
|
12
|
+
}));
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
export { SecondaryMenuToggleItem };
|
|
16
|
+
//# sourceMappingURL=SecondaryMenuToggleItem.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SecondaryMenuToggleItem.js","sources":["../../../../src/layout/components/SecondaryMenuToggleItem.tsx"],"sourcesContent":["import {Icon, Menu} from 'semantic-ui-react';\nimport styles from './styles.module.css';\n\ninterface SecondaryMenuToggleItemProps {\n\tmenuOpen: boolean;\n\tsetMenuOpen: (open: boolean) => void;\n}\n\nexport function SecondaryMenuToggleItem({menuOpen, setMenuOpen}: SecondaryMenuToggleItemProps) {\n\treturn (\n\t\t<Menu.Item>\n\t\t\t<Icon\n\t\t\t\tclassName={menuOpen ? styles.iconRotated : styles.icon}\n\t\t\t\tname={menuOpen ? 'close' : 'sidebar'}\n\t\t\t\tonClick={() => {\n\t\t\t\t\tsetMenuOpen(!menuOpen);\n\t\t\t\t}}\n\t\t\t/>\n\t\t</Menu.Item>\n\t);\n}\n"],"names":[],"mappings":";;;;AAQwC,SAAA,uBAAA,CAAA,EAAC,UAAU,WAA4C,EAAA,EAAA;AAC9F,EAAA,uBACE,KAAA,CAAA,aAAA,CAAA,IAAA,CAAK,IAAL,EAAA,IAAA,kBACC,KAAA,CAAA,aAAA,CAAA,IAAA,EAAA;AAAA,IACA,SAAW,EAAA,QAAA,GAAW,MAAO,CAAA,WAAA,GAAc,MAAO,CAAA,IAAA;AAAA,IAClD,IAAA,EAAM,WAAW,OAAU,GAAA,SAAA;AAAA,IAC3B,SAAS,MAAM;AACd,MAAA,WAAA,CAAY,CAAC,QAAQ,CAAA,CAAA;AAAA,KACtB;AAAA,GACD,CACD,CAAA,CAAA;AAEF;;;;"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import styleInject from './../../external/style-inject/dist/style-inject.es.js';
|
|
2
|
+
|
|
3
|
+
var css_248z = "/* Need to pass 100% height all the way down */\n#root {\n\theight: 100%;\n}\n#root > div {\n\theight: 100%;\n}\n\n.styles-module_parent__YBT8R {\n\tmin-height: 100%;\n\tdisplay: flex;\n\tflex-direction: column;\n}\n\n.styles-module_menubar__QKGMn {\n\tborder-radius: 0 !important;\n\tmargin: 0 !important;\n}\n\n.styles-module_statusbar__cL-l9 {\n\tmargin: 0 !important;\n\tborder-radius: 0 !important;\n}\n\n.styles-module_secondaryMenu__gM-v2 {\n\tmin-width: 220px !important;\n\twidth: 100% !important;\n\theight: 100% !important;\n\tborder-radius: 0 !important;\n\tmargin: 0 !important;\n\toverflow-x: auto; /* added to make the content scroll and not the whole layout */\n\ttransition: margin-left 0.3s ease-in-out;\n}\n\n.styles-module_secondaryMenuHidden__56-Xm {\n\tmargin-left: -220px !important;\n}\n\n.styles-module_contentWrapper__HbUtW {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: row;\n\tflex-wrap: nowrap;\n\tpadding: 0 !important;\n\tborder: 0 solid transparent !important; /* this is a segment, and they seem to have a 1px white border by default */\n\toverflow-y: auto; /* added to make the content scroll and not the whole layout */\n}\n\n.styles-module_content__RLo8A {\n\tflex: 1; /* changed this to have a flex of one instead of auto so the side menu doesn't get squished */\n\talign-content: flex-start;\n\theight: 100%;\n\tmax-height: 100%; /* added to make the content scroll and not the whole layout */\n\toverflow-x: hidden; /* added to make the content scroll and not the whole layout */\n}\n\n.styles-module_footer__ah3Wo {\n\tmargin: 0 !important;\n\tborder-radius: 0 !important;\n}\n\n.styles-module_verticalDropdownIcon__repkF {\n\ttransform: rotate(0deg);\n\ttransition: transform 0.3s ;\n\tcursor: pointer;\n}\n\n.styles-module_verticalDropdownIconRotated__rqiDw {\n\ttransform: rotate(90deg);\n\ttransition: transform 0.3s ;\n\tcursor: pointer;\n}\n\n.styles-module_verticalDropdownTitle__K-UXc {\n\tpadding: 0;\n\tcolor: #fff !important;\n}\n\n.styles-module_verticalDropdownContent__zhIKA {\n\tpadding-top: 0 !important;\n\tmargin: 0 -1.14285714em 0 0;\n\tborder-radius: 0;\n}\n\n.styles-module_icon__EekhR {\n\ttransform: rotate(0deg);\n\ttransition: transform 0.4s linear;\n\tcursor: pointer;\n}\n\n.styles-module_iconRotated__QCaeV {\n\ttransform: rotate(-180deg);\n\ttransition: transform 0.5s;\n\tcursor: pointer;\n}\n";
|
|
4
|
+
var styles = {"parent":"styles-module_parent__YBT8R","menubar":"styles-module_menubar__QKGMn","statusbar":"styles-module_statusbar__cL-l9","secondaryMenu":"styles-module_secondaryMenu__gM-v2","secondaryMenuHidden":"styles-module_secondaryMenuHidden__56-Xm","contentWrapper":"styles-module_contentWrapper__HbUtW","content":"styles-module_content__RLo8A","footer":"styles-module_footer__ah3Wo","verticalDropdownIcon":"styles-module_verticalDropdownIcon__repkF","verticalDropdownIconRotated":"styles-module_verticalDropdownIconRotated__rqiDw","verticalDropdownTitle":"styles-module_verticalDropdownTitle__K-UXc","verticalDropdownContent":"styles-module_verticalDropdownContent__zhIKA","icon":"styles-module_icon__EekhR","iconRotated":"styles-module_iconRotated__QCaeV"};
|
|
5
|
+
styleInject(css_248z);
|
|
6
|
+
|
|
7
|
+
export { styles as default };
|
|
8
|
+
//# sourceMappingURL=styles.module.css.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":null,"sources":[null],"sourcesContent":[null],"names":[],"mappings":"AAAA,wBAAwB,uDAAyD;AACjF;AACA;AACA;AACA;AACA;AACA;"}
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
import debug from 'debug';
|
|
2
|
+
import { useEffect } from 'react';
|
|
3
|
+
import { useDispatch } from 'react-redux';
|
|
4
|
+
import { useMediaQuery } from 'react-responsive';
|
|
5
|
+
import { useLayoutState, actions } from '../../state.js';
|
|
6
|
+
|
|
7
|
+
const d = debug("imperium.layout.hooks.useMobileLayout");
|
|
8
|
+
function useMobileLayout() {
|
|
9
|
+
const dispatch = useDispatch();
|
|
10
|
+
const { isMobile } = useLayoutState();
|
|
11
|
+
const isMobileX = useMediaQuery({ query: "(max-width: 900px)" });
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
if (isMobile !== isMobileX) {
|
|
14
|
+
d(`Media query change detected: ${isMobile} -> ${isMobileX}`);
|
|
15
|
+
dispatch(actions.setMobile(isMobileX));
|
|
16
|
+
}
|
|
17
|
+
}, [dispatch, isMobile, isMobileX]);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
export { useMobileLayout };
|
|
21
|
+
//# sourceMappingURL=useMobileLayout.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMobileLayout.js","sources":["../../../../src/layout/hooks/useMobileLayout.ts"],"sourcesContent":["import debug from 'debug';\nimport {useEffect} from 'react';\nimport {useDispatch} from 'react-redux';\nimport {useMediaQuery} from 'react-responsive';\nimport {actions, useLayoutState} from '../../state';\n\nconst d = debug('imperium.layout.hooks.useMobileLayout');\n\nexport function useMobileLayout() {\n\tconst dispatch = useDispatch();\n\tconst {isMobile} = useLayoutState();\n\tconst isMobileX = useMediaQuery({query: '(max-width: 900px)'});\n\tuseEffect(() => {\n\t\tif (isMobile !== isMobileX) {\n\t\t\td(`Media query change detected: ${isMobile} -> ${isMobileX}`);\n\t\t\tdispatch(actions.setMobile(isMobileX));\n\t\t}\n\t}, [dispatch, isMobile, isMobileX]);\n}\n"],"names":[],"mappings":";;;;;;AAMA,MAAM,CAAA,GAAI,MAAM,uCAAuC,CAAA,CAAA;AAErB,SAAA,eAAA,GAAA;AACjC,EAAA,MAAM,WAAW,WAAY,EAAA,CAAA;AAC7B,EAAM,MAAA,EAAC,aAAY,cAAe,EAAA,CAAA;AAClC,EAAA,MAAM,SAAY,GAAA,aAAA,CAAc,EAAC,KAAA,EAAO,sBAAqB,CAAA,CAAA;AAC7D,EAAA,SAAA,CAAU,MAAM;AACf,IAAA,IAAI,aAAa,SAAW,EAAA;AAC3B,MAAE,CAAA,CAAA,CAAA,6BAAA,EAAgC,eAAe,SAAW,CAAA,CAAA,CAAA,CAAA;AAC5D,MAAS,QAAA,CAAA,OAAA,CAAQ,SAAU,CAAA,SAAS,CAAC,CAAA,CAAA;AAAA,KACtC;AAAA,GACE,EAAA,CAAC,QAAU,EAAA,QAAA,EAAU,SAAS,CAAC,CAAA,CAAA;AACnC;;;;"}
|