@seij/common-ui 0.1.7 → 0.1.9
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/lib/applicationshell/ApplicationShell.d.ts +5 -1
- package/dist/lib/applicationshell/ApplicationShell.d.ts.map +1 -1
- package/dist/lib/applicationshell/ApplicationShell.js +75 -70
- package/dist/lib/applicationshell/ApplicationShell.js.map +1 -1
- package/dist/lib/applicationshell/ApplicationShellHamburger.d.ts +4 -0
- package/dist/lib/applicationshell/ApplicationShellHamburger.d.ts.map +1 -0
- package/dist/lib/applicationshell/ApplicationShellHamburger.js +17 -0
- package/dist/lib/applicationshell/ApplicationShellHamburger.js.map +1 -0
- package/dist/lib/applicationshell/ApplicationShellPanelContract.d.ts +5 -0
- package/dist/lib/applicationshell/ApplicationShellPanelContract.d.ts.map +1 -0
- package/dist/lib/applicationshell/ApplicationShellPanelContract.js +19 -0
- package/dist/lib/applicationshell/ApplicationShellPanelContract.js.map +1 -0
- package/dist/lib/applicationshell/ApplicationShellRails.d.ts +11 -0
- package/dist/lib/applicationshell/ApplicationShellRails.d.ts.map +1 -0
- package/dist/lib/applicationshell/ApplicationShellRails.js +111 -0
- package/dist/lib/applicationshell/ApplicationShellRails.js.map +1 -0
- package/dist/lib/applicationshell/ApplicationShellSidebar.d.ts +18 -0
- package/dist/lib/applicationshell/ApplicationShellSidebar.d.ts.map +1 -0
- package/dist/lib/applicationshell/ApplicationShellSidebar.js +52 -0
- package/dist/lib/applicationshell/ApplicationShellSidebar.js.map +1 -0
- package/dist/lib/applicationshell/TitleBar.d.ts +6 -2
- package/dist/lib/applicationshell/TitleBar.d.ts.map +1 -1
- package/dist/lib/applicationshell/TitleBar.js +35 -29
- package/dist/lib/applicationshell/TitleBar.js.map +1 -1
- package/dist/lib/button_bar/ButtonBar.d.ts.map +1 -1
- package/dist/lib/button_bar/ButtonBar.js.map +1 -1
- package/dist/lib/commons/currencysymbol.js.map +1 -1
- package/dist/lib/i18n/i18n.detect.d.ts.map +1 -1
- package/dist/lib/i18n/i18n.react.d.ts.map +1 -1
- package/dist/lib/i18n/i18n.react.js.map +1 -1
- package/dist/lib/listview/ListView.js +15 -14
- package/dist/lib/listview/ListView.js.map +1 -1
- package/dist/lib/localdate/InputLocalDate.js +3 -2
- package/dist/lib/localdate/InputLocalDate.js.map +1 -1
- package/dist/lib/month/InputMonth.js +9 -8
- package/dist/lib/month/InputMonth.js.map +1 -1
- package/dist/lib/responsive/useMobile.d.ts +2 -0
- package/dist/lib/responsive/useMobile.d.ts.map +1 -0
- package/dist/lib/responsive/useMobile.js +12 -0
- package/dist/lib/responsive/useMobile.js.map +1 -0
- package/package.json +6 -6
|
@@ -14,6 +14,10 @@ export interface ApplicationShellProps {
|
|
|
14
14
|
* Example: "Orders Console".
|
|
15
15
|
*/
|
|
16
16
|
applicationName: string;
|
|
17
|
+
/**
|
|
18
|
+
* Icon to display next to the application name
|
|
19
|
+
*/
|
|
20
|
+
applicationIcon?: ReactNode;
|
|
17
21
|
/**
|
|
18
22
|
* Main content of the page. This is rendered in the scrollable content area on the right
|
|
19
23
|
* of the navigation drawer. Typically the routed page/component for the current URL.
|
|
@@ -76,5 +80,5 @@ export interface ApplicationShellProps {
|
|
|
76
80
|
* Where `navigate`/`match` typically come from your router (e.g., react‑router v6's
|
|
77
81
|
* `useNavigate`/`useMatch`). See `ApplicationShellProps` for details on each prop.
|
|
78
82
|
*/
|
|
79
|
-
export declare function ApplicationShell({ applicationName, main, navigationItems, userStatus, onClickHome, navigate, matchPath, }: ApplicationShellProps): import("react/jsx-runtime").JSX.Element;
|
|
83
|
+
export declare function ApplicationShell({ applicationName, applicationIcon, main, navigationItems, userStatus, onClickHome, navigate, matchPath, }: ApplicationShellProps): import("react/jsx-runtime").JSX.Element;
|
|
80
84
|
//# sourceMappingURL=ApplicationShell.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ApplicationShell.d.ts","sourceRoot":"","sources":["../../../src/lib/applicationshell/ApplicationShell.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"ApplicationShell.d.ts","sourceRoot":"","sources":["../../../src/lib/applicationshell/ApplicationShell.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAgC,MAAM,OAAO,CAAC;AAChE,OAAO,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAC;AAEpE,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AAmCtD;;;;;;GAMG;AACH,MAAM,WAAW,qBAAqB;IACpC;;;OAGG;IACH,eAAe,EAAE,MAAM,CAAC;IACxB;;OAEG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B;;;OAGG;IACH,IAAI,EAAE,SAAS,CAAC;IAEhB;;;;OAIG;IACH,eAAe,EAAE,kBAAkB,EAAE,CAAC;IAEtC;;OAEG;IACH,UAAU,EAAE,UAAU,CAAC;IAEvB;;;OAGG;IACH,WAAW,EAAE,MAAM,IAAI,CAAC;IAExB;;;OAGG;IACH,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAEjC;;;;OAIG;IACH,SAAS,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,KAAK,OAAO,CAAC;CAClD;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6BG;AACH,wBAAgB,gBAAgB,CAAC,EAC/B,eAAe,EACf,eAAe,EACf,IAAI,EACJ,eAAe,EACf,UAAU,EACV,WAAW,EACX,QAAQ,EACR,SAAS,GACV,EAAE,qBAAqB,2CAqHvB"}
|
|
@@ -1,10 +1,13 @@
|
|
|
1
|
-
import { jsxs as
|
|
2
|
-
import { makeStyles as
|
|
3
|
-
import { useState as
|
|
4
|
-
import {
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
|
|
1
|
+
import { jsxs as S, jsx as a } from "react/jsx-runtime";
|
|
2
|
+
import { makeStyles as E, tokens as F } from "@fluentui/react-components";
|
|
3
|
+
import { useState as c, useMemo as R, useEffect as T } from "react";
|
|
4
|
+
import { createNavigationTreeItemServiceImpl as P } from "../navigation/NavigationService.js";
|
|
5
|
+
import { TitleBar as U } from "./TitleBar.js";
|
|
6
|
+
import { useIsMobile as q } from "../responsive/useMobile.js";
|
|
7
|
+
import { Rails as z } from "./ApplicationShellRails.js";
|
|
8
|
+
import { Sidebar as G } from "./ApplicationShellSidebar.js";
|
|
9
|
+
import { MenuBurger as H } from "./ApplicationShellHamburger.js";
|
|
10
|
+
const J = E({
|
|
8
11
|
shell: {
|
|
9
12
|
width: "100vw",
|
|
10
13
|
height: "100vh",
|
|
@@ -28,83 +31,85 @@ const y = j({
|
|
|
28
31
|
justifyContent: "flex-start",
|
|
29
32
|
alignItems: "flex-start",
|
|
30
33
|
overflow: "auto",
|
|
31
|
-
backgroundColor:
|
|
32
|
-
},
|
|
33
|
-
bugerIcon: {
|
|
34
|
-
color: m.colorNeutralForegroundOnBrand,
|
|
35
|
-
":hover": {
|
|
36
|
-
color: m.colorNeutralForegroundOnBrand
|
|
37
|
-
}
|
|
34
|
+
backgroundColor: F.colorNeutralBackground2
|
|
38
35
|
}
|
|
39
36
|
});
|
|
40
|
-
function
|
|
41
|
-
applicationName:
|
|
42
|
-
|
|
43
|
-
|
|
37
|
+
function te({
|
|
38
|
+
applicationName: o,
|
|
39
|
+
applicationIcon: p,
|
|
40
|
+
main: M,
|
|
41
|
+
navigationItems: d,
|
|
44
42
|
userStatus: f,
|
|
45
|
-
onClickHome:
|
|
46
|
-
navigate:
|
|
47
|
-
matchPath:
|
|
43
|
+
onClickHome: m,
|
|
44
|
+
navigate: k,
|
|
45
|
+
matchPath: v
|
|
48
46
|
}) {
|
|
49
|
-
const
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
47
|
+
const t = d.find((n) => "path" in n && n.path !== null && v(n.path)), y = t?.id, w = t && "parentId" in t && t.parentId !== null ? [t.parentId] : [], i = q(), s = J(), [l, g] = c(K), [x, _] = c(!1), [B, N] = c(y ?? ""), [r, h] = c(w), O = R(() => P(d), [d]);
|
|
48
|
+
T(() => {
|
|
49
|
+
i || localStorage.setItem("sidebarMode", l);
|
|
50
|
+
}, [i, l]);
|
|
51
|
+
const C = () => {
|
|
52
|
+
_(!x);
|
|
53
|
+
}, b = () => {
|
|
54
|
+
l === "expanded" && g("rails"), l === "rails" && g("expanded");
|
|
55
|
+
}, I = (n) => {
|
|
56
|
+
const e = O.findById(n);
|
|
57
|
+
N(e.id);
|
|
58
|
+
const u = "parentId" in e ? e.parentId : null;
|
|
59
|
+
u && (r.find((A) => A === u) || h([...r, u])), "path" in e && e.path && k(e.path);
|
|
60
|
+
}, j = (n) => {
|
|
61
|
+
r.find((e) => e === n) ? h(r.filter((e) => e !== n)) : h([...r, n]);
|
|
62
|
+
}, D = [];
|
|
63
|
+
return t && "parentId" in t && t.parentId !== null && D.push(t.parentId), /* @__PURE__ */ S("div", { "data-e2e-id": "shell", className: s.shell, children: [
|
|
64
|
+
/* @__PURE__ */ a("div", { "data-e2e-id": "shell__menu_top", className: s.titleBar, children: i ? /* @__PURE__ */ a(
|
|
65
|
+
U,
|
|
62
66
|
{
|
|
63
|
-
applicationName:
|
|
67
|
+
applicationName: o,
|
|
68
|
+
applicationIcon: p,
|
|
64
69
|
userStatus: f,
|
|
65
|
-
onClickHome:
|
|
66
|
-
hamburger: /* @__PURE__ */
|
|
70
|
+
onClickHome: m,
|
|
71
|
+
hamburger: /* @__PURE__ */ a(H, { onClick: C })
|
|
67
72
|
}
|
|
68
|
-
) }),
|
|
69
|
-
/* @__PURE__ */
|
|
70
|
-
/* @__PURE__ */
|
|
71
|
-
|
|
73
|
+
) : null }),
|
|
74
|
+
/* @__PURE__ */ S("div", { "data-e2e-id": "shell__main", className: s.main, children: [
|
|
75
|
+
(!i && l === "expanded" || i) && /* @__PURE__ */ a(
|
|
76
|
+
G,
|
|
77
|
+
{
|
|
78
|
+
selectedItem: B,
|
|
79
|
+
openedCategories: r,
|
|
80
|
+
drawerOpen: x,
|
|
81
|
+
isMobile: i,
|
|
82
|
+
applicationName: o,
|
|
83
|
+
applicationIcon: p,
|
|
84
|
+
userStatus: f,
|
|
85
|
+
navigationItems: d,
|
|
86
|
+
onClickHome: m,
|
|
87
|
+
onClickHamburger: C,
|
|
88
|
+
onClickMenuItem: I,
|
|
89
|
+
onClickCategory: j,
|
|
90
|
+
onClickPanelReduce: b
|
|
91
|
+
}
|
|
92
|
+
),
|
|
93
|
+
l === "rails" && /* @__PURE__ */ a(
|
|
94
|
+
z,
|
|
72
95
|
{
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
D(e.value);
|
|
80
|
-
},
|
|
81
|
-
onNavCategoryItemToggle: (t, e) => {
|
|
82
|
-
O(e.categoryValue ?? "");
|
|
83
|
-
},
|
|
84
|
-
children: [
|
|
85
|
-
/* @__PURE__ */ n(
|
|
86
|
-
I,
|
|
87
|
-
{
|
|
88
|
-
applicationName: a,
|
|
89
|
-
userStatus: f,
|
|
90
|
-
onClickHome: g,
|
|
91
|
-
hamburger: /* @__PURE__ */ n(N, { onClick: v })
|
|
92
|
-
}
|
|
93
|
-
),
|
|
94
|
-
/* @__PURE__ */ n(A, {}),
|
|
95
|
-
/* @__PURE__ */ n(H, { children: /* @__PURE__ */ n(z, { items: o }) })
|
|
96
|
-
]
|
|
96
|
+
applicationIcon: p,
|
|
97
|
+
navigationItems: d,
|
|
98
|
+
userStatus: f,
|
|
99
|
+
onClickHome: m,
|
|
100
|
+
onClickMenuItem: I,
|
|
101
|
+
onClickSidebarExpand: b
|
|
97
102
|
}
|
|
98
103
|
),
|
|
99
|
-
/* @__PURE__ */
|
|
104
|
+
/* @__PURE__ */ a("div", { "data-e2e-id": "shell__content", className: s.content, children: M })
|
|
100
105
|
] })
|
|
101
106
|
] });
|
|
102
107
|
}
|
|
103
|
-
const
|
|
104
|
-
const
|
|
105
|
-
return
|
|
108
|
+
const K = () => {
|
|
109
|
+
const o = localStorage.getItem("sidebarMode");
|
|
110
|
+
return o === "expanded" ? "expanded" : o === "rails" ? "rails" : "expanded";
|
|
106
111
|
};
|
|
107
112
|
export {
|
|
108
|
-
|
|
113
|
+
te as ApplicationShell
|
|
109
114
|
};
|
|
110
115
|
//# sourceMappingURL=ApplicationShell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ApplicationShell.js","sources":["../../../src/lib/applicationshell/ApplicationShell.tsx"],"sourcesContent":["import {\n Hamburger,\n makeStyles,\n NavDrawer,\n NavDrawerBody,\n NavDrawerHeader,\n tokens,\n Tooltip,\n} from \"@fluentui/react-components\";\nimport { ReactNode, useMemo, useState } from \"react\";\nimport { Navigation } from \"../navigation/Navigation\";\nimport { NavigationTreeItem } from \"../navigation/Navigation.types\";\nimport { createNavigationTreeItemServiceImpl } from \"../navigation/NavigationService\";\nimport { UserStatus } from \"./ApplicationShell.types\";\nimport { TitleBar } from \"./TitleBar\";\n\nconst useApplicationShellStyles = makeStyles({\n shell: {\n width: \"100vw\",\n height: \"100vh\",\n display: \"flex\",\n flexDirection: \"column\",\n overflow: \"hidden\",\n },\n titleBar: {\n width: \"100%\",\n height: \"48px\",\n flex: 0,\n },\n main: {\n overflow: \"hidden\",\n display: \"flex\",\n height: \"100%\",\n },\n content: {\n flex: \"1\",\n display: \"bloc\",\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n overflow: \"auto\",\n backgroundColor: tokens.colorNeutralBackground2,\n },\n bugerIcon: {\n color: tokens.colorNeutralForegroundOnBrand,\n \":hover\": {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n});\n\n/**\n * Props for the `ApplicationShell` layout component.\n *\n * The shell renders a persistent left navigation (Fluent UI `NavDrawer`), a top `TitleBar`,\n * and your main application content. It also wires navigation events so the currently\n * selected item reflects the browser URL and clicking items triggers navigation.\n */\nexport interface ApplicationShellProps {\n /**\n * Human‑readable name of the application displayed in the `TitleBar`.\n * Example: \"Orders Console\".\n */\n applicationName: string;\n\n /**\n * Main content of the page. This is rendered in the scrollable content area on the right\n * of the navigation drawer. Typically the routed page/component for the current URL.\n */\n main: ReactNode;\n\n /**\n * Tree of navigation items used to render the side navigation and compute selection.\n * Items may be categories or leaf entries with a `path`. When a leaf item is selected\n * and has a `path`, `navigate(path)` is invoked.\n */\n navigationItems: NavigationTreeItem[];\n\n /**\n * Current user status information shown in the `TitleBar` (e.g., username, avatar, roles).\n */\n userStatus: UserStatus;\n\n /**\n * Called when the home button in the `TitleBar` is clicked.\n * Use this to navigate to your application home route or perform any related action.\n */\n onClickHome: () => void;\n\n /**\n * Imperative navigation function called when a navigation leaf item with a `path`\n * is selected. Provide the function from your router (e.g., react-router navigate).\n */\n navigate: (path: string) => void;\n\n /**\n * Function used to check whether the current browser location matches a given item `path`.\n * It is used at render time to preselect the item that corresponds to the current URL.\n * Return `true` if the provided `path` matches the active route.\n */\n matchPath: (path: string | undefined) => boolean;\n}\n\n/**\n * ApplicationShell\n *\n * High‑level layout component that composes the application chrome:\n * - Top `TitleBar` showing the application name and user status\n * - Left `NavDrawer` for hierarchical navigation\n * - Main scrollable content area where your routed page is rendered\n *\n * Behavior\n * - Preselects the navigation item that matches the current URL via `matchPath`\n * - When a leaf item with a `path` is clicked, calls `navigate(path)`\n * - Keeps track of opened navigation categories and the selected item\n * - Displays a hamburger in the TitleBar to toggle the navigation drawer\n *\n * Usage (example)\n *\n * ```tsx\n * <ApplicationShell\n * applicationName=\"Orders Console\"\n * navigationItems={items}\n * userStatus={{ displayName: \"Jane Doe\" }}\n * onClickHome={() => navigate(\"/\")}\n * navigate={(path) => navigate(path)}\n * matchPath={(path) => !!path && !!match(path)}\n * main={<Outlet />}\n * />\n * ```\n * Where `navigate`/`match` typically come from your router (e.g., react‑router v6's\n * `useNavigate`/`useMatch`). See `ApplicationShellProps` for details on each prop.\n */\nexport function ApplicationShell({\n applicationName,\n main,\n navigationItems,\n userStatus,\n onClickHome,\n navigate,\n matchPath,\n}: ApplicationShellProps) {\n // test si le chemin courant du navigateur correspond à cet item\n // attention, on est obligés de tester tous les items, qu'ils aient\n // un lien ou pas, d'où le url-inconnue pour ceux qui n'ont pas de lien.\n // On est obligés car useMatch est un hook que l'on ne peut pas lancer\n // de manière conditionnelle\n const navigationItemFound = navigationItems.find((it) => \"path\" in it && it.path !== null && matchPath(it.path));\n const navigationItemSelectedFromUrl = navigationItemFound?.id;\n const defaultOpenCategory =\n navigationItemFound && \"parentId\" in navigationItemFound && navigationItemFound.parentId !== null\n ? [navigationItemFound.parentId]\n : [];\n\n const styles = useApplicationShellStyles();\n const [navDrawerOpened, setNavDrawerOpened] = useState<boolean>(true);\n const [selectedItem, setSelectedItem] = useState<string>(navigationItemSelectedFromUrl ?? \"\");\n const [openedCategories, setOpenCategories] = useState<string[]>(defaultOpenCategory);\n\n const navigationService = useMemo(() => createNavigationTreeItemServiceImpl(navigationItems), [navigationItems]);\n const handleClickHamburger = () => {\n setNavDrawerOpened(!navDrawerOpened);\n };\n\n const handleClickMenuItem = (itemId: string) => {\n const item = navigationService.findById(itemId);\n setSelectedItem(item.id);\n const parentId = \"parentId\" in item ? item.parentId : null;\n if (parentId) {\n if (!openedCategories.find((cat) => cat === parentId)) {\n setOpenCategories([...openedCategories, parentId]);\n }\n }\n if (\"path\" in item && item.path) navigate(item.path);\n };\n\n const handleClickCategory = (categoryId: string) => {\n if (!openedCategories.find((cat) => cat === categoryId)) {\n setOpenCategories([...openedCategories, categoryId]);\n } else {\n setOpenCategories(openedCategories.filter((it) => it !== categoryId));\n }\n };\n\n const openCategories: string[] = [];\n if (navigationItemFound && \"parentId\" in navigationItemFound && navigationItemFound.parentId !== null) {\n openCategories.push(navigationItemFound.parentId);\n }\n\n return (\n <div data-e2e-id=\"shell\" className={styles.shell}>\n <div data-e2e-id=\"shell__menu_top\" className={styles.titleBar}>\n {!navDrawerOpened ? (\n <TitleBar\n applicationName={applicationName}\n userStatus={userStatus}\n onClickHome={onClickHome}\n hamburger={<MenuBurger onClick={handleClickHamburger} />}\n />\n ) : null}\n </div>\n <div data-e2e-id=\"shell__main\" className={styles.main}>\n <NavDrawer\n selectedValue={selectedItem}\n open={navDrawerOpened}\n density={\"small\"}\n type={\"inline\"}\n openCategories={openedCategories}\n onNavItemSelect={(e, data) => {\n handleClickMenuItem(data.value);\n }}\n onNavCategoryItemToggle={(e, data) => {\n handleClickCategory(data.categoryValue ?? \"\");\n }}\n >\n <TitleBar\n applicationName={applicationName}\n userStatus={userStatus}\n onClickHome={onClickHome}\n hamburger={<MenuBurger onClick={handleClickHamburger} />}\n />\n <NavDrawerHeader></NavDrawerHeader>\n <NavDrawerBody>\n <Navigation items={navigationItems} />\n </NavDrawerBody>\n </NavDrawer>\n <div data-e2e-id=\"shell__content\" className={styles.content}>\n {main}\n </div>\n </div>\n </div>\n );\n}\n\nconst MenuBurger = ({ onClick }: { onClick: () => void }) => {\n const styles = useApplicationShellStyles();\n return (\n <Tooltip content=\"Navigation\" relationship=\"label\">\n <Hamburger className={styles.bugerIcon} onClick={onClick} />\n </Tooltip>\n );\n};\n"],"names":["useApplicationShellStyles","makeStyles","tokens","ApplicationShell","applicationName","main","navigationItems","userStatus","onClickHome","navigate","matchPath","navigationItemFound","it","navigationItemSelectedFromUrl","defaultOpenCategory","styles","navDrawerOpened","setNavDrawerOpened","useState","selectedItem","setSelectedItem","openedCategories","setOpenCategories","navigationService","useMemo","createNavigationTreeItemServiceImpl","handleClickHamburger","handleClickMenuItem","itemId","item","parentId","cat","handleClickCategory","categoryId","openCategories","jsx","TitleBar","MenuBurger","jsxs","NavDrawer","e","data","NavDrawerHeader","NavDrawerBody","Navigation","onClick","Tooltip","Hamburger"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ApplicationShell.js","sources":["../../../src/lib/applicationshell/ApplicationShell.tsx"],"sourcesContent":["import { makeStyles, tokens } from \"@fluentui/react-components\";\nimport { ReactNode, useEffect, useMemo, useState } from \"react\";\nimport { NavigationTreeItem } from \"../navigation/Navigation.types\";\nimport { createNavigationTreeItemServiceImpl } from \"../navigation/NavigationService\";\nimport { UserStatus } from \"./ApplicationShell.types\";\nimport { TitleBar } from \"./TitleBar\";\nimport { useIsMobile } from \"../responsive/useMobile\";\nimport { Rails } from \"./ApplicationShellRails\";\nimport { Sidebar } from \"./ApplicationShellSidebar\";\nimport { MenuBurger } from \"./ApplicationShellHamburger\";\n\nconst useApplicationShellStyles = makeStyles({\n shell: {\n width: \"100vw\",\n height: \"100vh\",\n display: \"flex\",\n flexDirection: \"column\",\n overflow: \"hidden\",\n },\n titleBar: {\n width: \"100%\",\n height: \"48px\",\n flex: 0,\n },\n main: {\n overflow: \"hidden\",\n display: \"flex\",\n height: \"100%\",\n },\n content: {\n flex: \"1\",\n display: \"bloc\",\n justifyContent: \"flex-start\",\n alignItems: \"flex-start\",\n overflow: \"auto\",\n backgroundColor: tokens.colorNeutralBackground2,\n },\n});\n\n/**\n * Props for the `ApplicationShell` layout component.\n *\n * The shell renders a persistent left navigation (Fluent UI `NavDrawer`), a top `TitleBar`,\n * and your main application content. It also wires navigation events so the currently\n * selected item reflects the browser URL and clicking items triggers navigation.\n */\nexport interface ApplicationShellProps {\n /**\n * Human‑readable name of the application displayed in the `TitleBar`.\n * Example: \"Orders Console\".\n */\n applicationName: string;\n /**\n * Icon to display next to the application name\n */\n applicationIcon?: ReactNode;\n /**\n * Main content of the page. This is rendered in the scrollable content area on the right\n * of the navigation drawer. Typically the routed page/component for the current URL.\n */\n main: ReactNode;\n\n /**\n * Tree of navigation items used to render the side navigation and compute selection.\n * Items may be categories or leaf entries with a `path`. When a leaf item is selected\n * and has a `path`, `navigate(path)` is invoked.\n */\n navigationItems: NavigationTreeItem[];\n\n /**\n * Current user status information shown in the `TitleBar` (e.g., username, avatar, roles).\n */\n userStatus: UserStatus;\n\n /**\n * Called when the home button in the `TitleBar` is clicked.\n * Use this to navigate to your application home route or perform any related action.\n */\n onClickHome: () => void;\n\n /**\n * Imperative navigation function called when a navigation leaf item with a `path`\n * is selected. Provide the function from your router (e.g., react-router navigate).\n */\n navigate: (path: string) => void;\n\n /**\n * Function used to check whether the current browser location matches a given item `path`.\n * It is used at render time to preselect the item that corresponds to the current URL.\n * Return `true` if the provided `path` matches the active route.\n */\n matchPath: (path: string | undefined) => boolean;\n}\n\n/**\n * ApplicationShell\n *\n * High‑level layout component that composes the application chrome:\n * - Top `TitleBar` showing the application name and user status\n * - Left `NavDrawer` for hierarchical navigation\n * - Main scrollable content area where your routed page is rendered\n *\n * Behavior\n * - Preselects the navigation item that matches the current URL via `matchPath`\n * - When a leaf item with a `path` is clicked, calls `navigate(path)`\n * - Keeps track of opened navigation categories and the selected item\n * - Displays a hamburger in the TitleBar to toggle the navigation drawer\n *\n * Usage (example)\n *\n * ```tsx\n * <ApplicationShell\n * applicationName=\"Orders Console\"\n * navigationItems={items}\n * userStatus={{ displayName: \"Jane Doe\" }}\n * onClickHome={() => navigate(\"/\")}\n * navigate={(path) => navigate(path)}\n * matchPath={(path) => !!path && !!match(path)}\n * main={<Outlet />}\n * />\n * ```\n * Where `navigate`/`match` typically come from your router (e.g., react‑router v6's\n * `useNavigate`/`useMatch`). See `ApplicationShellProps` for details on each prop.\n */\nexport function ApplicationShell({\n applicationName,\n applicationIcon,\n main,\n navigationItems,\n userStatus,\n onClickHome,\n navigate,\n matchPath,\n}: ApplicationShellProps) {\n // test si le chemin courant du navigateur correspond à cet item\n // attention, on est obligés de tester tous les items, qu'ils aient\n // un lien ou pas, d'où le url-inconnue pour ceux qui n'ont pas de lien.\n // On est obligés car useMatch est un hook que l'on ne peut pas lancer\n // de manière conditionnelle\n const navigationItemFound = navigationItems.find((it) => \"path\" in it && it.path !== null && matchPath(it.path));\n const navigationItemSelectedFromUrl = navigationItemFound?.id;\n const defaultOpenCategory =\n navigationItemFound && \"parentId\" in navigationItemFound && navigationItemFound.parentId !== null\n ? [navigationItemFound.parentId]\n : [];\n\n // Hooks\n const isMobile = useIsMobile();\n const styles = useApplicationShellStyles();\n\n const [sidebarMode, setSidebarMode] = useState<\"rails\" | \"expanded\">(initialSidebarModeDetect);\n const [drawerOpen, setDrawerOpen] = useState(false);\n const [selectedItem, setSelectedItem] = useState<string>(navigationItemSelectedFromUrl ?? \"\");\n const [openedCategories, setOpenCategories] = useState<string[]>(defaultOpenCategory);\n const navigationService = useMemo(() => createNavigationTreeItemServiceImpl(navigationItems), [navigationItems]);\n\n useEffect(() => {\n // Persist user choice for the rails or sidebar mode\n if (!isMobile) {\n localStorage.setItem(\"sidebarMode\", sidebarMode);\n }\n }, [isMobile, sidebarMode]);\n\n // Events\n\n const handleClickHamburger = () => {\n setDrawerOpen(!drawerOpen);\n };\n\n const handleChangeSidebarMode = () => {\n if (sidebarMode === \"expanded\") {\n setSidebarMode(\"rails\");\n }\n if (sidebarMode === \"rails\") {\n setSidebarMode(\"expanded\");\n }\n };\n\n const handleClickMenuItem = (itemId: string) => {\n const item = navigationService.findById(itemId);\n setSelectedItem(item.id);\n const parentId = \"parentId\" in item ? item.parentId : null;\n if (parentId) {\n if (!openedCategories.find((cat) => cat === parentId)) {\n setOpenCategories([...openedCategories, parentId]);\n }\n }\n if (\"path\" in item && item.path) navigate(item.path);\n };\n\n const handleClickCategory = (categoryId: string) => {\n if (!openedCategories.find((cat) => cat === categoryId)) {\n setOpenCategories([...openedCategories, categoryId]);\n } else {\n setOpenCategories(openedCategories.filter((it) => it !== categoryId));\n }\n };\n\n const openCategories: string[] = [];\n if (navigationItemFound && \"parentId\" in navigationItemFound && navigationItemFound.parentId !== null) {\n openCategories.push(navigationItemFound.parentId);\n }\n\n return (\n <div data-e2e-id=\"shell\" className={styles.shell}>\n <div data-e2e-id=\"shell__menu_top\" className={styles.titleBar}>\n {isMobile ? (\n <TitleBar\n applicationName={applicationName}\n applicationIcon={applicationIcon}\n userStatus={userStatus}\n onClickHome={onClickHome}\n hamburger={<MenuBurger onClick={handleClickHamburger} />}\n />\n ) : null}\n </div>\n <div data-e2e-id=\"shell__main\" className={styles.main}>\n {((!isMobile && sidebarMode === \"expanded\") || isMobile) && (\n <Sidebar\n selectedItem={selectedItem}\n openedCategories={openedCategories}\n drawerOpen={drawerOpen}\n isMobile={isMobile}\n applicationName={applicationName}\n applicationIcon={applicationIcon}\n userStatus={userStatus}\n navigationItems={navigationItems}\n onClickHome={onClickHome}\n onClickHamburger={handleClickHamburger}\n onClickMenuItem={handleClickMenuItem}\n onClickCategory={handleClickCategory}\n onClickPanelReduce={handleChangeSidebarMode}\n />\n )}\n {sidebarMode === \"rails\" && (\n <Rails\n applicationIcon={applicationIcon}\n navigationItems={navigationItems}\n userStatus={userStatus}\n onClickHome={onClickHome}\n onClickMenuItem={handleClickMenuItem}\n onClickSidebarExpand={handleChangeSidebarMode}\n />\n )}\n <div data-e2e-id=\"shell__content\" className={styles.content}>\n {main}\n </div>\n </div>\n </div>\n );\n}\n\nconst initialSidebarModeDetect = () => {\n const value = localStorage.getItem(\"sidebarMode\");\n if (value === \"expanded\") return \"expanded\";\n if (value === \"rails\") return \"rails\";\n return \"expanded\";\n};\n"],"names":["useApplicationShellStyles","makeStyles","tokens","ApplicationShell","applicationName","applicationIcon","main","navigationItems","userStatus","onClickHome","navigate","matchPath","navigationItemFound","it","navigationItemSelectedFromUrl","defaultOpenCategory","isMobile","useIsMobile","styles","sidebarMode","setSidebarMode","useState","initialSidebarModeDetect","drawerOpen","setDrawerOpen","selectedItem","setSelectedItem","openedCategories","setOpenCategories","navigationService","useMemo","createNavigationTreeItemServiceImpl","useEffect","handleClickHamburger","handleChangeSidebarMode","handleClickMenuItem","itemId","item","parentId","cat","handleClickCategory","categoryId","openCategories","jsx","TitleBar","MenuBurger","Sidebar","Rails","value"],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ApplicationShellHamburger.d.ts","sourceRoot":"","sources":["../../../src/lib/applicationshell/ApplicationShellHamburger.tsx"],"names":[],"mappings":"AASA,eAAO,MAAM,UAAU,GAAI,aAAa;IAAE,OAAO,EAAE,MAAM,IAAI,CAAA;CAAE,4CAO9D,CAAC"}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as o } from "react/jsx-runtime";
|
|
2
|
+
import { makeStyles as t, tokens as r, Tooltip as l, Hamburger as a } from "@fluentui/react-components";
|
|
3
|
+
const c = t({
|
|
4
|
+
bugerIcon: {
|
|
5
|
+
color: r.colorNeutralForegroundOnBrand,
|
|
6
|
+
":hover": {
|
|
7
|
+
color: r.colorNeutralForegroundOnBrand
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
}), i = ({ onClick: e }) => {
|
|
11
|
+
const n = c();
|
|
12
|
+
return /* @__PURE__ */ o(l, { content: "Navigation", relationship: "label", children: /* @__PURE__ */ o(a, { className: n.bugerIcon, onClick: e }) });
|
|
13
|
+
};
|
|
14
|
+
export {
|
|
15
|
+
i as MenuBurger
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=ApplicationShellHamburger.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ApplicationShellHamburger.js","sources":["../../../src/lib/applicationshell/ApplicationShellHamburger.tsx"],"sourcesContent":["import { Hamburger, makeStyles, tokens, Tooltip } from \"@fluentui/react-components\";\nconst useApplicationShellStyles = makeStyles({\n bugerIcon: {\n color: tokens.colorNeutralForegroundOnBrand,\n \":hover\": {\n color: tokens.colorNeutralForegroundOnBrand,\n },\n },\n});\nexport const MenuBurger = ({ onClick }: { onClick: () => void }) => {\n const styles = useApplicationShellStyles();\n return (\n <Tooltip content=\"Navigation\" relationship=\"label\">\n <Hamburger className={styles.bugerIcon} onClick={onClick} />\n </Tooltip>\n );\n};\n"],"names":["useApplicationShellStyles","makeStyles","tokens","MenuBurger","onClick","styles","jsx","Tooltip","Hamburger"],"mappings":";;AACA,MAAMA,IAA4BC,EAAW;AAAA,EAC3C,WAAW;AAAA,IACT,OAAOC,EAAO;AAAA,IACd,UAAU;AAAA,MACR,OAAOA,EAAO;AAAA,IAAA;AAAA,EAChB;AAEJ,CAAC,GACYC,IAAa,CAAC,EAAE,SAAAC,QAAuC;AAClE,QAAMC,IAASL,EAAA;AACf,SACE,gBAAAM,EAACC,GAAA,EAAQ,SAAQ,cAAa,cAAa,SACzC,UAAA,gBAAAD,EAACE,GAAA,EAAU,WAAWH,EAAO,WAAW,SAAAD,EAAA,CAAkB,GAC5D;AAEJ;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ApplicationShellPanelContract.d.ts","sourceRoot":"","sources":["../../../src/lib/applicationshell/ApplicationShellPanelContract.tsx"],"names":[],"mappings":"AAGA,eAAO,MAAM,iBAAiB,GAAI,0BAG/B;IACD,UAAU,EAAE,UAAU,GAAG,OAAO,CAAC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB,4CAWA,CAAC"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { Tooltip as o, Button as r } from "@fluentui/react-components";
|
|
3
|
+
import { Icon as a } from "@seij/common-ui-icons";
|
|
4
|
+
const c = ({
|
|
5
|
+
panelState: n,
|
|
6
|
+
onClick: t
|
|
7
|
+
}) => /* @__PURE__ */ e(o, { content: "Reduce panel", relationship: "label", children: /* @__PURE__ */ e(
|
|
8
|
+
r,
|
|
9
|
+
{
|
|
10
|
+
onClick: t,
|
|
11
|
+
icon: /* @__PURE__ */ e(a, { name: n === "expanded" ? "panel_left_reduce" : "panel_left_expand" }),
|
|
12
|
+
size: "medium",
|
|
13
|
+
appearance: "subtle"
|
|
14
|
+
}
|
|
15
|
+
) });
|
|
16
|
+
export {
|
|
17
|
+
c as PanelLeftContract
|
|
18
|
+
};
|
|
19
|
+
//# sourceMappingURL=ApplicationShellPanelContract.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ApplicationShellPanelContract.js","sources":["../../../src/lib/applicationshell/ApplicationShellPanelContract.tsx"],"sourcesContent":["import { Button, Tooltip } from \"@fluentui/react-components\";\nimport { Icon } from \"@seij/common-ui-icons\";\n\nexport const PanelLeftContract = ({\n panelState,\n onClick,\n}: {\n panelState: \"expanded\" | \"rails\";\n onClick: () => void;\n}) => {\n return (\n <Tooltip content=\"Reduce panel\" relationship=\"label\">\n <Button\n onClick={onClick}\n icon={<Icon name={panelState === \"expanded\" ? \"panel_left_reduce\" : \"panel_left_expand\"} />}\n size=\"medium\"\n appearance=\"subtle\"\n />\n </Tooltip>\n );\n};\n"],"names":["PanelLeftContract","panelState","onClick","jsx","Tooltip","Button","Icon"],"mappings":";;;AAGO,MAAMA,IAAoB,CAAC;AAAA,EAChC,YAAAC;AAAA,EACA,SAAAC;AACF,MAKI,gBAAAC,EAACC,GAAA,EAAQ,SAAQ,gBAAe,cAAa,SAC3C,UAAA,gBAAAD;AAAA,EAACE;AAAA,EAAA;AAAA,IACC,SAAAH;AAAA,IACA,MAAM,gBAAAC,EAACG,GAAA,EAAK,MAAML,MAAe,aAAa,sBAAsB,qBAAqB;AAAA,IACzF,MAAK;AAAA,IACL,YAAW;AAAA,EAAA;AAAA,GAEf;"}
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
import { NavigationTreeItem, UserStatus } from '@seij/common-ui';
|
|
3
|
+
export declare function Rails({ applicationIcon, navigationItems, userStatus, onClickHome, onClickMenuItem, onClickSidebarExpand, }: {
|
|
4
|
+
applicationIcon?: ReactNode;
|
|
5
|
+
navigationItems: NavigationTreeItem[];
|
|
6
|
+
userStatus: UserStatus;
|
|
7
|
+
onClickHome: () => void;
|
|
8
|
+
onClickMenuItem: (id: string) => void;
|
|
9
|
+
onClickSidebarExpand: () => void;
|
|
10
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
//# sourceMappingURL=ApplicationShellRails.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ApplicationShellRails.d.ts","sourceRoot":"","sources":["../../../src/lib/applicationshell/ApplicationShellRails.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,kBAAkB,EAAmD,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAsBlH,wBAAgB,KAAK,CAAC,EACpB,eAAe,EACf,eAAe,EACf,UAAU,EACV,WAAW,EACX,eAAe,EACf,oBAAoB,GACrB,EAAE;IACD,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,eAAe,EAAE,kBAAkB,EAAE,CAAC;IACtC,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,oBAAoB,EAAE,MAAM,IAAI,CAAC;CAClC,2CAgDA"}
|
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { jsxs as d, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { makeStyles as f, tokens as m, Tooltip as r } from "@fluentui/react-components";
|
|
3
|
+
import { User as h } from "./TitleBar.js";
|
|
4
|
+
import { PanelLeftContract as x } from "./ApplicationShellPanelContract.js";
|
|
5
|
+
import { Icon as c, parseIconName as p } from "@seij/common-ui-icons";
|
|
6
|
+
const a = f({
|
|
7
|
+
container: {
|
|
8
|
+
display: "flex",
|
|
9
|
+
textAlign: "center",
|
|
10
|
+
width: "32px",
|
|
11
|
+
height: "32px",
|
|
12
|
+
alignItems: "center",
|
|
13
|
+
alignContent: "center",
|
|
14
|
+
"& > div": {
|
|
15
|
+
width: "100%"
|
|
16
|
+
},
|
|
17
|
+
"&:hover": {
|
|
18
|
+
cursor: "pointer",
|
|
19
|
+
backgroundColor: m.colorNeutralBackground4Hover
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
});
|
|
23
|
+
function j({
|
|
24
|
+
applicationIcon: t,
|
|
25
|
+
navigationItems: i,
|
|
26
|
+
userStatus: l,
|
|
27
|
+
onClickHome: e,
|
|
28
|
+
onClickMenuItem: o,
|
|
29
|
+
onClickSidebarExpand: u
|
|
30
|
+
}) {
|
|
31
|
+
return /* @__PURE__ */ d(
|
|
32
|
+
"div",
|
|
33
|
+
{
|
|
34
|
+
style: {
|
|
35
|
+
backgroundColor: m.colorNeutralBackground4,
|
|
36
|
+
width: "48px",
|
|
37
|
+
height: "100%",
|
|
38
|
+
display: "flex",
|
|
39
|
+
flexDirection: "column"
|
|
40
|
+
},
|
|
41
|
+
children: [
|
|
42
|
+
/* @__PURE__ */ n(
|
|
43
|
+
"div",
|
|
44
|
+
{
|
|
45
|
+
style: {
|
|
46
|
+
display: "flex",
|
|
47
|
+
flexDirection: "column",
|
|
48
|
+
alignItems: "center",
|
|
49
|
+
justifyContent: "start",
|
|
50
|
+
paddingTop: "0.5em"
|
|
51
|
+
},
|
|
52
|
+
children: /* @__PURE__ */ n(y, { applicationIcon: t, onClick: e })
|
|
53
|
+
}
|
|
54
|
+
),
|
|
55
|
+
/* @__PURE__ */ n(
|
|
56
|
+
"div",
|
|
57
|
+
{
|
|
58
|
+
style: {
|
|
59
|
+
flex: 1,
|
|
60
|
+
display: "flex",
|
|
61
|
+
flexDirection: "column",
|
|
62
|
+
alignItems: "center",
|
|
63
|
+
justifyContent: "start"
|
|
64
|
+
},
|
|
65
|
+
children: i.map((s) => /* @__PURE__ */ n(g, { item: s, onClick: o }, s.id))
|
|
66
|
+
}
|
|
67
|
+
),
|
|
68
|
+
/* @__PURE__ */ d(
|
|
69
|
+
"div",
|
|
70
|
+
{
|
|
71
|
+
style: {
|
|
72
|
+
display: "flex",
|
|
73
|
+
flexDirection: "column",
|
|
74
|
+
alignItems: "center",
|
|
75
|
+
justifyContent: "start"
|
|
76
|
+
},
|
|
77
|
+
children: [
|
|
78
|
+
/* @__PURE__ */ n(h, { status: l }),
|
|
79
|
+
/* @__PURE__ */ n(v, { onClick: u })
|
|
80
|
+
]
|
|
81
|
+
}
|
|
82
|
+
)
|
|
83
|
+
]
|
|
84
|
+
}
|
|
85
|
+
);
|
|
86
|
+
}
|
|
87
|
+
const y = ({ applicationIcon: t, onClick: i }) => {
|
|
88
|
+
const l = a();
|
|
89
|
+
return /* @__PURE__ */ n("div", { className: l.container, onClick: () => i(), children: /* @__PURE__ */ n(r, { content: "Home", relationship: "description", children: /* @__PURE__ */ n("span", { children: t || /* @__PURE__ */ n(c, { name: "dashboard" }) }) }) });
|
|
90
|
+
}, v = ({ onClick: t }) => {
|
|
91
|
+
const i = a();
|
|
92
|
+
return /* @__PURE__ */ n("div", { className: i.container, onClick: () => t(), children: /* @__PURE__ */ n(x, { panelState: "rails", onClick: t }) });
|
|
93
|
+
}, g = ({ item: t, onClick: i }) => {
|
|
94
|
+
const l = a();
|
|
95
|
+
if (t.type === "divider") return null;
|
|
96
|
+
if (t.type === "group") {
|
|
97
|
+
const e = t, o = e.icon ? p(e.icon) : void 0;
|
|
98
|
+
return /* @__PURE__ */ n("div", { className: l.container, onClick: () => i(e.id), children: /* @__PURE__ */ n(r, { content: e.label, relationship: "description", children: o && /* @__PURE__ */ n(c, { name: o }) }) }, e.id);
|
|
99
|
+
}
|
|
100
|
+
if (t.type === "page") {
|
|
101
|
+
const e = t;
|
|
102
|
+
if (e.parentId !== null) return null;
|
|
103
|
+
const o = e.icon ? p(e.icon) : void 0;
|
|
104
|
+
return /* @__PURE__ */ n(r, { content: e.label, relationship: "description", children: /* @__PURE__ */ n("div", { className: l.container, onClick: () => i(e.id), children: /* @__PURE__ */ n("div", { children: o && /* @__PURE__ */ n(c, { name: o }) }) }, e.id) });
|
|
105
|
+
}
|
|
106
|
+
return null;
|
|
107
|
+
};
|
|
108
|
+
export {
|
|
109
|
+
j as Rails
|
|
110
|
+
};
|
|
111
|
+
//# sourceMappingURL=ApplicationShellRails.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ApplicationShellRails.js","sources":["../../../src/lib/applicationshell/ApplicationShellRails.tsx"],"sourcesContent":["import { makeStyles, tokens, Tooltip } from \"@fluentui/react-components\";\nimport { User } from \"./TitleBar\";\nimport { ReactNode } from \"react\";\nimport { NavigationTreeItem, NavigationTreeItemGroup, NavigationTreeItemPage, UserStatus } from \"@seij/common-ui\";\nimport { PanelLeftContract } from \"./ApplicationShellPanelContract\";\nimport { Icon, IconName, parseIconName } from \"@seij/common-ui-icons\";\n\nconst useStylesRailboxItem = makeStyles({\n container: {\n display: \"flex\",\n textAlign: \"center\",\n width: \"32px\",\n height: \"32px\",\n alignItems: \"center\",\n alignContent: \"center\",\n \"& > div\": {\n width: \"100%\",\n },\n \"&:hover\": {\n cursor: \"pointer\",\n backgroundColor: tokens.colorNeutralBackground4Hover,\n },\n },\n});\n\nexport function Rails({\n applicationIcon,\n navigationItems,\n userStatus,\n onClickHome,\n onClickMenuItem,\n onClickSidebarExpand,\n}: {\n applicationIcon?: ReactNode;\n navigationItems: NavigationTreeItem[];\n userStatus: UserStatus;\n onClickHome: () => void;\n onClickMenuItem: (id: string) => void;\n onClickSidebarExpand: () => void;\n}) {\n return (\n <div\n style={{\n backgroundColor: tokens.colorNeutralBackground4,\n width: \"48px\",\n height: \"100%\",\n display: \"flex\",\n flexDirection: \"column\",\n }}\n >\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"start\",\n paddingTop: \"0.5em\",\n }}\n >\n <RailBoxApplicationIcon applicationIcon={applicationIcon} onClick={onClickHome} />\n </div>\n <div\n style={{\n flex: 1,\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"start\",\n }}\n >\n {navigationItems.map((it) => (\n <RailBoxNavigationItem key={it.id} item={it} onClick={onClickMenuItem} />\n ))}\n </div>\n <div\n style={{\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n justifyContent: \"start\",\n }}\n >\n <User status={userStatus} />\n <RailBoxPanelLeftExpand onClick={onClickSidebarExpand} />\n </div>\n </div>\n );\n}\n\nconst RailBoxApplicationIcon = ({ applicationIcon, onClick }: { applicationIcon?: ReactNode; onClick: () => void }) => {\n const styles = useStylesRailboxItem();\n return (\n <div className={styles.container} onClick={() => onClick()}>\n <Tooltip content={\"Home\"} relationship=\"description\">\n <span>{applicationIcon ? applicationIcon : <Icon name={\"dashboard\"} />}</span>\n </Tooltip>\n </div>\n );\n};\nconst RailBoxPanelLeftExpand = ({ onClick }: { onClick: () => void }) => {\n const styles = useStylesRailboxItem();\n return (\n <div className={styles.container} onClick={() => onClick()}>\n <PanelLeftContract panelState={\"rails\"} onClick={onClick} />\n </div>\n );\n};\nconst RailBoxNavigationItem = ({ item, onClick }: { item: NavigationTreeItem; onClick: (id: string) => void }) => {\n const styles = useStylesRailboxItem();\n if (item.type === \"divider\") return null;\n if (item.type === \"group\") {\n const nav = item as NavigationTreeItemGroup;\n const iconName: IconName | undefined = nav.icon ? parseIconName(nav.icon) : undefined;\n return (\n <div key={nav.id} className={styles.container} onClick={() => onClick(nav.id)}>\n <Tooltip content={nav.label} relationship=\"description\">\n {iconName && <Icon name={iconName} />}\n </Tooltip>\n </div>\n );\n }\n if (item.type === \"page\") {\n const nav = item as NavigationTreeItemPage;\n if (nav.parentId !== null) return null;\n const iconName: IconName | undefined = nav.icon ? parseIconName(nav.icon) : undefined;\n return (\n <Tooltip content={nav.label} relationship=\"description\">\n <div key={nav.id} className={styles.container} onClick={() => onClick(nav.id)}>\n <div>{iconName && <Icon name={iconName} />}</div>\n </div>\n </Tooltip>\n );\n }\n return null;\n};\n"],"names":["useStylesRailboxItem","makeStyles","tokens","Rails","applicationIcon","navigationItems","userStatus","onClickHome","onClickMenuItem","onClickSidebarExpand","jsxs","jsx","RailBoxApplicationIcon","it","RailBoxNavigationItem","User","RailBoxPanelLeftExpand","onClick","styles","Tooltip","Icon","PanelLeftContract","item","nav","iconName","parseIconName"],"mappings":"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"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { NavigationTreeItem, UserStatus } from '@seij/common-ui';
|
|
2
|
+
import { ReactNode } from 'react';
|
|
3
|
+
export declare function Sidebar({ selectedItem, isMobile, applicationName, drawerOpen, openedCategories, applicationIcon, userStatus, navigationItems, onClickHome, onClickMenuItem, onClickCategory, onClickHamburger, onClickPanelReduce, }: {
|
|
4
|
+
isMobile: boolean;
|
|
5
|
+
drawerOpen: boolean;
|
|
6
|
+
selectedItem: string;
|
|
7
|
+
applicationName: string;
|
|
8
|
+
applicationIcon?: ReactNode;
|
|
9
|
+
openedCategories: string[];
|
|
10
|
+
navigationItems: NavigationTreeItem[];
|
|
11
|
+
userStatus: UserStatus;
|
|
12
|
+
onClickHome: () => void;
|
|
13
|
+
onClickMenuItem: (id: string) => void;
|
|
14
|
+
onClickCategory: (id: string) => void;
|
|
15
|
+
onClickHamburger: () => void;
|
|
16
|
+
onClickPanelReduce: () => void;
|
|
17
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
18
|
+
//# sourceMappingURL=ApplicationShellSidebar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ApplicationShellSidebar.d.ts","sourceRoot":"","sources":["../../../src/lib/applicationshell/ApplicationShellSidebar.tsx"],"names":[],"mappings":"AASA,OAAO,EAAc,kBAAkB,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAG7E,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAElC,wBAAgB,OAAO,CAAC,EACtB,YAAY,EACZ,QAAQ,EACR,eAAe,EACf,UAAU,EACV,gBAAgB,EAChB,eAAe,EACf,UAAU,EACV,eAAe,EACf,WAAW,EACX,eAAe,EACf,eAAe,EACf,gBAAgB,EAChB,kBAAkB,GACnB,EAAE;IACD,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,EAAE,OAAO,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,gBAAgB,EAAE,MAAM,EAAE,CAAC;IAC3B,eAAe,EAAE,kBAAkB,EAAE,CAAC;IACtC,UAAU,EAAE,UAAU,CAAC;IACvB,WAAW,EAAE,MAAM,IAAI,CAAC;IACxB,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,gBAAgB,EAAE,MAAM,IAAI,CAAC;IAC7B,kBAAkB,EAAE,MAAM,IAAI,CAAC;CAChC,2CAoCA"}
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
import { jsxs as n, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import { NavDrawer as g, NavDrawerHeader as y, Tooltip as N, Hamburger as C, AppItem as x, NavDrawerBody as w, NavDrawerFooter as D } from "@fluentui/react-components";
|
|
3
|
+
import { Navigation as k } from "@seij/common-ui";
|
|
4
|
+
import { User as I } from "./TitleBar.js";
|
|
5
|
+
import { PanelLeftContract as S } from "./ApplicationShellPanelContract.js";
|
|
6
|
+
function B({
|
|
7
|
+
selectedItem: t,
|
|
8
|
+
isMobile: r,
|
|
9
|
+
applicationName: o,
|
|
10
|
+
drawerOpen: l,
|
|
11
|
+
openedCategories: i,
|
|
12
|
+
applicationIcon: c,
|
|
13
|
+
userStatus: d,
|
|
14
|
+
navigationItems: p,
|
|
15
|
+
onClickHome: m,
|
|
16
|
+
onClickMenuItem: s,
|
|
17
|
+
onClickCategory: v,
|
|
18
|
+
onClickHamburger: h,
|
|
19
|
+
onClickPanelReduce: u
|
|
20
|
+
}) {
|
|
21
|
+
return /* @__PURE__ */ n(
|
|
22
|
+
g,
|
|
23
|
+
{
|
|
24
|
+
selectedValue: t,
|
|
25
|
+
open: r && l || !r,
|
|
26
|
+
density: "small",
|
|
27
|
+
type: r ? "overlay" : "inline",
|
|
28
|
+
openCategories: i,
|
|
29
|
+
onNavItemSelect: (f, a) => {
|
|
30
|
+
s(a.value);
|
|
31
|
+
},
|
|
32
|
+
onNavCategoryItemToggle: (f, a) => {
|
|
33
|
+
v(a.categoryValue ?? "");
|
|
34
|
+
},
|
|
35
|
+
children: [
|
|
36
|
+
/* @__PURE__ */ n(y, { children: [
|
|
37
|
+
r ? /* @__PURE__ */ e(N, { content: "Navigation", relationship: "label", children: /* @__PURE__ */ e(C, { onClick: h }) }) : null,
|
|
38
|
+
/* @__PURE__ */ e(x, { onClick: m, icon: /* @__PURE__ */ e("span", { children: c }), children: o })
|
|
39
|
+
] }),
|
|
40
|
+
/* @__PURE__ */ e(w, { children: /* @__PURE__ */ e(k, { items: p }) }),
|
|
41
|
+
/* @__PURE__ */ e(D, { children: /* @__PURE__ */ n("div", { style: { display: "flex" }, children: [
|
|
42
|
+
/* @__PURE__ */ e(I, { status: d }),
|
|
43
|
+
r ? null : /* @__PURE__ */ e(S, { panelState: "expanded", onClick: u })
|
|
44
|
+
] }) })
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
export {
|
|
50
|
+
B as Sidebar
|
|
51
|
+
};
|
|
52
|
+
//# sourceMappingURL=ApplicationShellSidebar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ApplicationShellSidebar.js","sources":["../../../src/lib/applicationshell/ApplicationShellSidebar.tsx"],"sourcesContent":["import {\n AppItem,\n Hamburger,\n NavDrawer,\n NavDrawerBody,\n NavDrawerFooter,\n NavDrawerHeader,\n Tooltip,\n} from \"@fluentui/react-components\";\nimport { Navigation, NavigationTreeItem, UserStatus } from \"@seij/common-ui\";\nimport { User } from \"./TitleBar\";\nimport { PanelLeftContract } from \"./ApplicationShellPanelContract\";\nimport { ReactNode } from \"react\";\n\nexport function Sidebar({\n selectedItem,\n isMobile,\n applicationName,\n drawerOpen,\n openedCategories,\n applicationIcon,\n userStatus,\n navigationItems,\n onClickHome,\n onClickMenuItem,\n onClickCategory,\n onClickHamburger,\n onClickPanelReduce,\n}: {\n isMobile: boolean;\n drawerOpen: boolean;\n selectedItem: string;\n applicationName: string;\n applicationIcon?: ReactNode;\n openedCategories: string[];\n navigationItems: NavigationTreeItem[];\n userStatus: UserStatus;\n onClickHome: () => void;\n onClickMenuItem: (id: string) => void;\n onClickCategory: (id: string) => void;\n onClickHamburger: () => void;\n onClickPanelReduce: () => void;\n}) {\n return (\n <NavDrawer\n selectedValue={selectedItem}\n open={(isMobile && drawerOpen) || !isMobile}\n density={\"small\"}\n type={isMobile ? \"overlay\" : \"inline\"}\n openCategories={openedCategories}\n onNavItemSelect={(e, data) => {\n onClickMenuItem(data.value);\n }}\n onNavCategoryItemToggle={(e, data) => {\n onClickCategory(data.categoryValue ?? \"\");\n }}\n >\n <NavDrawerHeader>\n {isMobile ? (\n <Tooltip content=\"Navigation\" relationship=\"label\">\n <Hamburger onClick={onClickHamburger} />\n </Tooltip>\n ) : null}\n <AppItem onClick={onClickHome} icon={<span>{applicationIcon}</span>}>\n {applicationName}\n </AppItem>\n </NavDrawerHeader>\n <NavDrawerBody>\n <Navigation items={navigationItems} />\n </NavDrawerBody>\n <NavDrawerFooter>\n <div style={{ display: \"flex\" }}>\n <User status={userStatus} />\n {isMobile ? null : <PanelLeftContract panelState={\"expanded\"} onClick={onClickPanelReduce} />}\n </div>\n </NavDrawerFooter>\n </NavDrawer>\n );\n}\n"],"names":["Sidebar","selectedItem","isMobile","applicationName","drawerOpen","openedCategories","applicationIcon","userStatus","navigationItems","onClickHome","onClickMenuItem","onClickCategory","onClickHamburger","onClickPanelReduce","jsxs","NavDrawer","e","data","NavDrawerHeader","jsx","Tooltip","Hamburger","AppItem","NavDrawerBody","Navigation","NavDrawerFooter","User","PanelLeftContract"],"mappings":";;;;;AAcO,SAASA,EAAQ;AAAA,EACtB,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,YAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,aAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,oBAAAC;AACF,GAcG;AACD,SACE,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,eAAed;AAAA,MACf,MAAOC,KAAYE,KAAe,CAACF;AAAA,MACnC,SAAS;AAAA,MACT,MAAMA,IAAW,YAAY;AAAA,MAC7B,gBAAgBG;AAAA,MAChB,iBAAiB,CAACW,GAAGC,MAAS;AAC5B,QAAAP,EAAgBO,EAAK,KAAK;AAAA,MAC5B;AAAA,MACA,yBAAyB,CAACD,GAAGC,MAAS;AACpC,QAAAN,EAAgBM,EAAK,iBAAiB,EAAE;AAAA,MAC1C;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAH,EAACI,GAAA,EACE,UAAA;AAAA,UAAAhB,IACC,gBAAAiB,EAACC,GAAA,EAAQ,SAAQ,cAAa,cAAa,SACzC,UAAA,gBAAAD,EAACE,GAAA,EAAU,SAAST,EAAA,CAAkB,EAAA,CACxC,IACE;AAAA,UACJ,gBAAAO,EAACG,KAAQ,SAASb,GAAa,MAAM,gBAAAU,EAAC,QAAA,EAAM,UAAAb,EAAA,CAAgB,GACzD,UAAAH,EAAA,CACH;AAAA,QAAA,GACF;AAAA,0BACCoB,GAAA,EACC,UAAA,gBAAAJ,EAACK,GAAA,EAAW,OAAOhB,GAAiB,GACtC;AAAA,QACA,gBAAAW,EAACM,KACC,UAAA,gBAAAX,EAAC,OAAA,EAAI,OAAO,EAAE,SAAS,UACrB,UAAA;AAAA,UAAA,gBAAAK,EAACO,GAAA,EAAK,QAAQnB,EAAA,CAAY;AAAA,UACzBL,IAAW,OAAO,gBAAAiB,EAACQ,KAAkB,YAAY,YAAY,SAASd,EAAA,CAAoB;AAAA,QAAA,EAAA,CAC7F,EAAA,CACF;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGN;"}
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import { ReactNode } from 'react';
|
|
2
2
|
import { UserStatus } from './ApplicationShell.types';
|
|
3
|
-
export declare function TitleBar({ hamburger, onClickHome, userStatus, applicationName
|
|
3
|
+
export declare function TitleBar({ hamburger, onClickHome, userStatus, applicationName, applicationIcon, }: {
|
|
4
4
|
userStatus: UserStatus;
|
|
5
|
-
applicationName:
|
|
5
|
+
applicationName: ReactNode;
|
|
6
|
+
applicationIcon?: ReactNode;
|
|
6
7
|
hamburger: ReactNode | null;
|
|
7
8
|
onClickHome: () => void;
|
|
8
9
|
}): import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare function User({ status }: {
|
|
11
|
+
status: UserStatus;
|
|
12
|
+
}): import("react/jsx-runtime").JSX.Element;
|
|
9
13
|
//# sourceMappingURL=TitleBar.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TitleBar.d.ts","sourceRoot":"","sources":["../../../src/lib/applicationshell/TitleBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;
|
|
1
|
+
{"version":3,"file":"TitleBar.d.ts","sourceRoot":"","sources":["../../../src/lib/applicationshell/TitleBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAwB,SAAS,EAAE,MAAM,OAAO,CAAC;AACxD,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AA6DtD,wBAAgB,QAAQ,CAAC,EACvB,SAAS,EACT,WAAW,EACX,UAAU,EACV,eAAe,EACf,eAAe,GAChB,EAAE;IACD,UAAU,EAAE,UAAU,CAAC;IACvB,eAAe,EAAE,SAAS,CAAC;IAC3B,eAAe,CAAC,EAAE,SAAS,CAAC;IAC5B,SAAS,EAAE,SAAS,GAAG,IAAI,CAAC;IAC5B,WAAW,EAAE,MAAM,IAAI,CAAC;CACzB,2CAkBA;AAiBD,wBAAgB,IAAI,CAAC,EAAE,MAAM,EAAE,EAAE;IAAE,MAAM,EAAE,UAAU,CAAA;CAAE,2CA4BtD"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { jsx as n, jsxs as
|
|
2
|
-
import { makeStyles as
|
|
3
|
-
import { Icon as
|
|
4
|
-
const
|
|
1
|
+
import { jsx as n, jsxs as h } from "react/jsx-runtime";
|
|
2
|
+
import { makeStyles as p, tokens as c, Text as u, useKeyboardNavAttribute as m, Spinner as x, Avatar as d } from "@fluentui/react-components";
|
|
3
|
+
import { Icon as g } from "@seij/common-ui-icons";
|
|
4
|
+
const s = p({
|
|
5
5
|
root: {
|
|
6
6
|
height: "48px",
|
|
7
7
|
lineHeight: "48px",
|
|
@@ -9,8 +9,8 @@ const a = h({
|
|
|
9
9
|
},
|
|
10
10
|
appBar: {
|
|
11
11
|
display: "flex",
|
|
12
|
-
color:
|
|
13
|
-
backgroundColor:
|
|
12
|
+
color: c.colorNeutralForegroundOnBrand,
|
|
13
|
+
backgroundColor: c.colorBrandBackground,
|
|
14
14
|
width: "100%",
|
|
15
15
|
maxWidth: "100%"
|
|
16
16
|
},
|
|
@@ -22,13 +22,17 @@ const a = h({
|
|
|
22
22
|
flex: 0,
|
|
23
23
|
textAlign: "center",
|
|
24
24
|
":hover": {
|
|
25
|
-
background:
|
|
25
|
+
background: c.colorBrandBackgroundHover,
|
|
26
26
|
cursor: "pointer"
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
launcher_icon: {
|
|
30
30
|
fontSize: "24px",
|
|
31
|
-
|
|
31
|
+
"& img": {
|
|
32
|
+
maxWidth: "32px",
|
|
33
|
+
maxHeight: "32px",
|
|
34
|
+
verticalAlign: "text-top"
|
|
35
|
+
}
|
|
32
36
|
},
|
|
33
37
|
title: {
|
|
34
38
|
height: "48px",
|
|
@@ -54,47 +58,49 @@ const a = h({
|
|
|
54
58
|
textAlign: "center"
|
|
55
59
|
}
|
|
56
60
|
});
|
|
57
|
-
function
|
|
61
|
+
function b({
|
|
58
62
|
hamburger: e,
|
|
59
63
|
onClickHome: r,
|
|
60
64
|
userStatus: i,
|
|
61
|
-
applicationName:
|
|
65
|
+
applicationName: t,
|
|
66
|
+
applicationIcon: l
|
|
62
67
|
}) {
|
|
63
|
-
const
|
|
64
|
-
return /* @__PURE__ */ n("div", { className:
|
|
65
|
-
e ? /* @__PURE__ */ n("div", { className:
|
|
66
|
-
/* @__PURE__ */ n("div", { className:
|
|
67
|
-
/* @__PURE__ */ n("div", { className:
|
|
68
|
-
/* @__PURE__ */ n("div", { className:
|
|
68
|
+
const a = s();
|
|
69
|
+
return /* @__PURE__ */ n("div", { className: a.root, children: /* @__PURE__ */ h("div", { className: a.appBar, children: [
|
|
70
|
+
e ? /* @__PURE__ */ n("div", { className: a.launcher, children: e }) : null,
|
|
71
|
+
/* @__PURE__ */ n("div", { className: a.launcher, children: /* @__PURE__ */ n(f, { applicationIcon: l, onClick: r }) }),
|
|
72
|
+
/* @__PURE__ */ n("div", { className: a.title, children: /* @__PURE__ */ n(u, { weight: "semibold", children: t }) }),
|
|
73
|
+
/* @__PURE__ */ n("div", { className: a.actions, children: /* @__PURE__ */ n(k, { status: i }) })
|
|
69
74
|
] }) });
|
|
70
75
|
}
|
|
71
|
-
function
|
|
72
|
-
const
|
|
73
|
-
return /* @__PURE__ */ n("a", { tabIndex: 0, ...l, className:
|
|
76
|
+
function f({ applicationIcon: e, onClick: r }) {
|
|
77
|
+
const i = s(), t = m(), l = o(r);
|
|
78
|
+
return /* @__PURE__ */ n("a", { tabIndex: 0, ...l, className: i.home, "aria-label": "Accueil", ref: t, children: e ? /* @__PURE__ */ n("span", { className: i.launcher_icon, children: e }) : /* @__PURE__ */ n(g, { name: "genericapp", className: i.launcher_icon }) });
|
|
74
79
|
}
|
|
75
|
-
function
|
|
76
|
-
const r =
|
|
80
|
+
function k({ status: e }) {
|
|
81
|
+
const r = s();
|
|
77
82
|
if (e.isLoading)
|
|
78
|
-
return /* @__PURE__ */ n(
|
|
83
|
+
return /* @__PURE__ */ n(x, {});
|
|
79
84
|
if (e.errorMessage)
|
|
80
|
-
return /* @__PURE__ */
|
|
85
|
+
return /* @__PURE__ */ h("div", { children: [
|
|
81
86
|
"Oops... ",
|
|
82
87
|
e.errorMessage
|
|
83
88
|
] });
|
|
84
89
|
if (e.isAuthenticated) {
|
|
85
|
-
const
|
|
86
|
-
return /* @__PURE__ */ n("a", { tabIndex: 0, className: r.userActionButton, ...
|
|
90
|
+
const t = e.userName ?? "", l = o(e.onClickSignIn);
|
|
91
|
+
return /* @__PURE__ */ n("a", { tabIndex: 0, className: r.userActionButton, ...l, children: /* @__PURE__ */ n(d, { "aria-label": t, name: t }) });
|
|
87
92
|
}
|
|
88
|
-
const i =
|
|
89
|
-
return /* @__PURE__ */ n("a", { tabIndex: 0, className: r.userActionButton, ...i, children: /* @__PURE__ */ n(
|
|
93
|
+
const i = o(e.onClickSignOut);
|
|
94
|
+
return /* @__PURE__ */ n("a", { tabIndex: 0, className: r.userActionButton, ...i, children: /* @__PURE__ */ n(d, { "aria-label": "Non connecté" }) });
|
|
90
95
|
}
|
|
91
|
-
const
|
|
96
|
+
const o = (e) => ({
|
|
92
97
|
onClick: e,
|
|
93
98
|
onKeyUp: (i) => {
|
|
94
99
|
(i.key === "Enter" || i.key === " ") && (e(), i.preventDefault());
|
|
95
100
|
}
|
|
96
101
|
});
|
|
97
102
|
export {
|
|
98
|
-
|
|
103
|
+
b as TitleBar,
|
|
104
|
+
k as User
|
|
99
105
|
};
|
|
100
106
|
//# sourceMappingURL=TitleBar.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TitleBar.js","sources":["../../../src/lib/applicationshell/TitleBar.tsx"],"sourcesContent":["import { Avatar, makeStyles, Spinner, Text, tokens, useKeyboardNavAttribute } from \"@fluentui/react-components\";\nimport { KeyboardEventHandler, ReactNode } from \"react\";\nimport { UserStatus } from \"./ApplicationShell.types\";\nimport { Icon } from \"@seij/common-ui-icons\";\n\nconst useTitleBarStyles = makeStyles({\n root: {\n height: \"48px\",\n lineHeight: \"48px\",\n width: \"100%\",\n },\n appBar: {\n display: \"flex\",\n color: tokens.colorNeutralForegroundOnBrand,\n backgroundColor: tokens.colorBrandBackground,\n width: \"100%\",\n maxWidth: \"100%\",\n },\n launcher: {\n width: \"48px\",\n minWidth: \"48px\",\n height: \"48px\",\n lineHeight: \"48px\",\n flex: 0,\n textAlign: \"center\",\n \":hover\": {\n background: tokens.colorBrandBackgroundHover,\n cursor: \"pointer\",\n },\n },\n launcher_icon: {\n fontSize: \"24px\",\n verticalAlign: \"
|
|
1
|
+
{"version":3,"file":"TitleBar.js","sources":["../../../src/lib/applicationshell/TitleBar.tsx"],"sourcesContent":["import { Avatar, makeStyles, Spinner, Text, tokens, useKeyboardNavAttribute } from \"@fluentui/react-components\";\nimport { KeyboardEventHandler, ReactNode } from \"react\";\nimport { UserStatus } from \"./ApplicationShell.types\";\nimport { Icon } from \"@seij/common-ui-icons\";\n\nconst useTitleBarStyles = makeStyles({\n root: {\n height: \"48px\",\n lineHeight: \"48px\",\n width: \"100%\",\n },\n appBar: {\n display: \"flex\",\n color: tokens.colorNeutralForegroundOnBrand,\n backgroundColor: tokens.colorBrandBackground,\n width: \"100%\",\n maxWidth: \"100%\",\n },\n launcher: {\n width: \"48px\",\n minWidth: \"48px\",\n height: \"48px\",\n lineHeight: \"48px\",\n flex: 0,\n textAlign: \"center\",\n \":hover\": {\n background: tokens.colorBrandBackgroundHover,\n cursor: \"pointer\",\n },\n },\n launcher_icon: {\n fontSize: \"24px\",\n \"& img\": {\n maxWidth: \"32px\",\n maxHeight: \"32px\",\n verticalAlign: \"text-top\",\n },\n },\n title: {\n height: \"48px\",\n flex: 1,\n whiteSpace: \"nowrap\",\n },\n actions: {\n height: \"48px\",\n minWidth: \"48px\",\n flex: 0,\n display: \"flex\",\n justifyContent: \"space-around\",\n },\n home: {\n width: \"100%\",\n height: \"100%\",\n display: \"inline-block\",\n },\n userActionButton: {\n width: \"100%\",\n height: \"100%\",\n display: \"inline-block\",\n textAlign: \"center\",\n },\n});\n\nexport function TitleBar({\n hamburger,\n onClickHome,\n userStatus,\n applicationName,\n applicationIcon,\n}: {\n userStatus: UserStatus;\n applicationName: ReactNode;\n applicationIcon?: ReactNode;\n hamburger: ReactNode | null;\n onClickHome: () => void;\n}) {\n const styles = useTitleBarStyles();\n return (\n <div className={styles.root}>\n <div className={styles.appBar}>\n {hamburger ? <div className={styles.launcher}>{hamburger}</div> : null}\n <div className={styles.launcher}>\n <Home applicationIcon={applicationIcon} onClick={onClickHome} />\n </div>\n <div className={styles.title}>\n <Text weight=\"semibold\">{applicationName}</Text>\n </div>\n <div className={styles.actions}>\n <User status={userStatus} />\n </div>\n </div>\n </div>\n );\n}\n\nfunction Home({ applicationIcon, onClick }: { applicationIcon?: ReactNode; onClick: () => void }) {\n const styles = useTitleBarStyles();\n const ref = useKeyboardNavAttribute<HTMLAnchorElement>();\n const onClickHandlers = createClickHandlers(onClick);\n return (\n <a tabIndex={0} {...onClickHandlers} className={styles.home} aria-label=\"Accueil\" ref={ref}>\n {applicationIcon ? (\n <span className={styles.launcher_icon}>{applicationIcon}</span>\n ) : (\n <Icon name=\"genericapp\" className={styles.launcher_icon} />\n )}\n </a>\n );\n}\n\nexport function User({ status }: { status: UserStatus }) {\n const styles = useTitleBarStyles();\n\n if (status.isLoading) {\n return <Spinner />;\n }\n\n if (status.errorMessage) {\n return <div>Oops... {status.errorMessage}</div>;\n }\n\n if (status.isAuthenticated) {\n const name = status.userName ?? \"\";\n const onClickHandlers = createClickHandlers(status.onClickSignIn);\n return (\n <a tabIndex={0} className={styles.userActionButton} {...onClickHandlers}>\n <Avatar aria-label={name} name={name} />\n </a>\n );\n }\n\n const onClickHandlers = createClickHandlers(status.onClickSignOut);\n\n return (\n <a tabIndex={0} className={styles.userActionButton} {...onClickHandlers}>\n <Avatar aria-label=\"Non connecté\" />\n </a>\n );\n}\n\nconst createClickHandlers = (onClick: () => void) => {\n const handleKeyUp: KeyboardEventHandler<HTMLAnchorElement> = (e) => {\n const correct = e.key === \"Enter\" || e.key === \" \";\n if (correct) {\n onClick();\n e.preventDefault();\n }\n };\n return {\n onClick: onClick,\n onKeyUp: handleKeyUp,\n };\n};\n"],"names":["useTitleBarStyles","makeStyles","tokens","TitleBar","hamburger","onClickHome","userStatus","applicationName","applicationIcon","styles","jsx","jsxs","Home","Text","User","onClick","ref","useKeyboardNavAttribute","onClickHandlers","createClickHandlers","Icon","status","Spinner","name","Avatar","e"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonBar.d.ts","sourceRoot":"","sources":["../../../src/lib/button_bar/ButtonBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,
|
|
1
|
+
{"version":3,"file":"ButtonBar.d.ts","sourceRoot":"","sources":["../../../src/lib/button_bar/ButtonBar.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAa1C,wBAAgB,SAAS,CAAC,EACxB,QAAQ,EACR,OAAmB,GACpB,EAAE;IACD,OAAO,CAAC,EAAE,SAAS,GAAG,sBAAsB,CAAC;CAC9C,GAAG,iBAAiB,2CAOpB"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ButtonBar.js","sources":["../../../src/lib/button_bar/ButtonBar.tsx"],"sourcesContent":["import { makeStyles, mergeClasses, tokens } from \"@fluentui/react-components\";\nimport { PropsWithChildren
|
|
1
|
+
{"version":3,"file":"ButtonBar.js","sources":["../../../src/lib/button_bar/ButtonBar.tsx"],"sourcesContent":["import { makeStyles, mergeClasses, tokens } from \"@fluentui/react-components\";\nimport { PropsWithChildren } from \"react\";\n\nconst useStyles = makeStyles({\n root: {\n display: \"flex\",\n columnGap: tokens.spacingHorizontalM,\n },\n variant_table_bottom_actions: {\n marginTop: tokens.spacingVerticalL,\n justifyContent: \"flex-end\",\n },\n});\n\nexport function ButtonBar({\n children,\n variant = \"default\",\n}: {\n variant?: \"default\" | \"table_bottom_actions\";\n} & PropsWithChildren) {\n const styles = useStyles();\n const classNames = mergeClasses(\n styles.root,\n variant === \"table_bottom_actions\" ? styles.variant_table_bottom_actions : undefined,\n );\n return <div className={classNames}>{children}</div>;\n}\n"],"names":["useStyles","makeStyles","tokens","ButtonBar","children","variant","styles","classNames","mergeClasses","jsx"],"mappings":";;AAGA,MAAMA,IAAYC,EAAW;AAAA,EAC3B,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,WAAWC,EAAO;AAAA,EAAA;AAAA,EAEpB,8BAA8B;AAAA,IAC5B,WAAWA,EAAO;AAAA,IAClB,gBAAgB;AAAA,EAAA;AAEpB,CAAC;AAEM,SAASC,EAAU;AAAA,EACxB,UAAAC;AAAA,EACA,SAAAC,IAAU;AACZ,GAEuB;AACrB,QAAMC,IAASN,EAAA,GACTO,IAAaC;AAAA,IACjBF,EAAO;AAAA,IACPD,MAAY,yBAAyBC,EAAO,+BAA+B;AAAA,EAAA;AAE7E,SAAO,gBAAAG,EAAC,OAAA,EAAI,WAAWF,GAAa,UAAAH,EAAA,CAAS;AAC/C;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"currencysymbol.js","sources":["../../../src/lib/commons/currencysymbol.ts"],"sourcesContent":["import { toCurrencySymbol } from \"@seij/common-types\";\n\nexport function toCurrencySymbolSafe(code: string | null | undefined): string | undefined {\n if (code === null) return undefined;\n if (code === undefined) return code;\n if (code.length == 0) return code;\n if (code.length != 3) return code;\n try {\n return toCurrencySymbol(code);\n } catch (
|
|
1
|
+
{"version":3,"file":"currencysymbol.js","sources":["../../../src/lib/commons/currencysymbol.ts"],"sourcesContent":["import { toCurrencySymbol } from \"@seij/common-types\";\n\nexport function toCurrencySymbolSafe(code: string | null | undefined): string | undefined {\n if (code === null) return undefined;\n if (code === undefined) return code;\n if (code.length == 0) return code;\n if (code.length != 3) return code;\n try {\n return toCurrencySymbol(code);\n } catch (_) {\n return code;\n }\n}\n"],"names":["toCurrencySymbolSafe","code","toCurrencySymbol"],"mappings":";AAEO,SAASA,EAAqBC,GAAqD;AACxF,MAAIA,MAAS,MAGb;AAAA,QAFIA,MAAS,UACTA,EAAK,UAAU,KACfA,EAAK,UAAU,EAAG,QAAOA;AAC7B,QAAI;AACF,aAAOC,EAAiBD,CAAI;AAAA,IAC9B,QAAY;AACV,aAAOA;AAAA,IACT;AAAA;AACF;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n.detect.d.ts","sourceRoot":"","sources":["../../../src/lib/i18n/i18n.detect.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"i18n.detect.d.ts","sourceRoot":"","sources":["../../../src/lib/i18n/i18n.detect.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,MAAM,GAAG,MAAM,CAAC;AAK5B,wBAAgB,SAAS,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,CAM9C;AAmBD,wBAAgB,kBAAkB,IAAI,MAAM,CAO3C;AAGD,wBAAgB,kBAAkB,CAAC,IAAI,EAAE;IACvC,SAAS,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAC3B,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAChC,GAAG,MAAM,CAGT;AAGD,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,UAKxC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n.react.d.ts","sourceRoot":"","sources":["../../../src/lib/i18n/i18n.react.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"i18n.react.d.ts","sourceRoot":"","sources":["../../../src/lib/i18n/i18n.react.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkE,MAAM,OAAO,CAAC;AAEvF,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AAQpC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,EAAE,iBAAiB,kDAsB3D;AAED,wBAAgB,OAAO,IAAI,IAAI,CAI9B"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n.react.js","sources":["../../../src/lib/i18n/i18n.react.tsx"],"sourcesContent":["
|
|
1
|
+
{"version":3,"file":"i18n.react.js","sources":["../../../src/lib/i18n/i18n.react.tsx"],"sourcesContent":["import React, { createContext, useContext, useEffect, useMemo, useState } from \"react\";\nimport { I18nService, I18nServiceInstance } from \"./i18n.service\";\nimport { I18n } from \"./i18n.types\";\n\ntype I18nCtxType = {\n i18nService: I18nService;\n lastChange: number;\n};\nconst I18nCtx = createContext<I18nCtxType>({ i18nService: I18nServiceInstance, lastChange: 0 });\n\nexport interface I18nProviderProps {\n children: React.ReactNode;\n}\n\nexport function I18nProvider({ children }: I18nProviderProps) {\n // Detects the locale: first used the forced one, then initial, then use autodetection\n\n const [instanceTs, setInstanceTs] = useState(0);\n const [ready, setReady] = useState<boolean>(false);\n const value: I18nCtxType = useMemo(\n () => ({\n i18nService: I18nServiceInstance,\n lastChange: instanceTs,\n }),\n [instanceTs],\n );\n\n useEffect(() => {\n I18nServiceInstance.readyPromise.then(() => {\n setReady(true);\n });\n }, []);\n\n if (!ready) return null;\n\n return <I18nCtx.Provider value={value}>{children}</I18nCtx.Provider>;\n}\n\nexport function useI18n(): I18n {\n const v = useContext(I18nCtx);\n if (!v) throw new Error(\"useI18n must be used within I18nProvider\");\n return v.i18nService;\n}\n"],"names":["I18nCtx","createContext","I18nServiceInstance","I18nProvider","children","instanceTs","setInstanceTs","useState","ready","setReady","value","useMemo","useEffect","jsx","useI18n","v","useContext"],"mappings":";;;AAQA,MAAMA,IAAUC,EAA2B,EAAE,aAAaC,GAAqB,YAAY,GAAG;AAMvF,SAASC,EAAa,EAAE,UAAAC,KAA+B;AAG5D,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAAS,CAAC,GACxC,CAACC,GAAOC,CAAQ,IAAIF,EAAkB,EAAK,GAC3CG,IAAqBC;AAAA,IACzB,OAAO;AAAA,MACL,aAAaT;AAAA,MACb,YAAYG;AAAA,IAAA;AAAA,IAEd,CAACA,CAAU;AAAA,EAAA;AASb,SANAO,EAAU,MAAM;AACd,IAAAV,EAAoB,aAAa,KAAK,MAAM;AAC1C,MAAAO,EAAS,EAAI;AAAA,IACf,CAAC;AAAA,EACH,GAAG,CAAA,CAAE,GAEAD,IAEE,gBAAAK,EAACb,EAAQ,UAAR,EAAiB,OAAAU,GAAe,UAAAN,EAAA,CAAS,IAF9B;AAGrB;AAEO,SAASU,IAAgB;AAC9B,QAAMC,IAAIC,EAAWhB,CAAO;AAC5B,MAAI,CAACe,EAAG,OAAM,IAAI,MAAM,0CAA0C;AAClE,SAAOA,EAAE;AACX;"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsxs as b, jsx as e } from "react/jsx-runtime";
|
|
2
2
|
import { makeStyles as h, tokens as d, Input as v, Caption1 as m, List as I, ListItem as L, Card as w, CardHeader as y, Text as C } from "@fluentui/react-components";
|
|
3
3
|
import { isFunction as S } from "lodash-es";
|
|
4
|
+
import "../i18n/i18n.service.js";
|
|
4
5
|
import { useI18n as _ } from "../i18n/i18n.react.js";
|
|
5
6
|
import { Icon as u } from "@seij/common-ui-icons";
|
|
6
7
|
const N = h({
|
|
@@ -9,17 +10,17 @@ const N = h({
|
|
|
9
10
|
padding: "1em"
|
|
10
11
|
}
|
|
11
12
|
});
|
|
12
|
-
function
|
|
13
|
+
function z({
|
|
13
14
|
data: i,
|
|
14
15
|
activeId: s,
|
|
15
16
|
searchText: o = "",
|
|
16
|
-
search:
|
|
17
|
+
search: n,
|
|
17
18
|
pathFactory: r,
|
|
18
|
-
navigate:
|
|
19
|
+
navigate: t
|
|
19
20
|
}) {
|
|
20
21
|
const p = N(), { t: c } = _(), f = (l) => {
|
|
21
|
-
|
|
22
|
-
}, g = S(
|
|
22
|
+
n && n(l);
|
|
23
|
+
}, g = S(n), a = c("ListView_search"), x = c("ListView_no_result");
|
|
23
24
|
return /* @__PURE__ */ b("div", { children: [
|
|
24
25
|
g && /* @__PURE__ */ e(
|
|
25
26
|
v,
|
|
@@ -31,7 +32,7 @@ function W({
|
|
|
31
32
|
onChange: (l) => f(l.target.value)
|
|
32
33
|
}
|
|
33
34
|
),
|
|
34
|
-
/* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(M, { activeId: s, items: i, pathFactory: r, navigate:
|
|
35
|
+
/* @__PURE__ */ e("div", { children: /* @__PURE__ */ e(M, { activeId: s, items: i, pathFactory: r, navigate: t }) }),
|
|
35
36
|
i.length === 0 ? /* @__PURE__ */ e("div", { className: p.noresult, children: /* @__PURE__ */ e(m, { children: x }) }) : null
|
|
36
37
|
] });
|
|
37
38
|
}
|
|
@@ -61,14 +62,14 @@ function M({
|
|
|
61
62
|
items: i,
|
|
62
63
|
activeId: s,
|
|
63
64
|
pathFactory: o,
|
|
64
|
-
navigate:
|
|
65
|
+
navigate: n
|
|
65
66
|
}) {
|
|
66
67
|
const r = k();
|
|
67
|
-
return i.length === 0 ? null : /* @__PURE__ */ e(I, { navigationMode: "composite", children: i.map((
|
|
68
|
+
return i.length === 0 ? null : /* @__PURE__ */ e(I, { navigationMode: "composite", children: i.map((t) => /* @__PURE__ */ e(
|
|
68
69
|
L,
|
|
69
70
|
{
|
|
70
71
|
onAction: () => {
|
|
71
|
-
|
|
72
|
+
n(o(t));
|
|
72
73
|
},
|
|
73
74
|
children: /* @__PURE__ */ e(
|
|
74
75
|
w,
|
|
@@ -78,23 +79,23 @@ function M({
|
|
|
78
79
|
appearance: "subtle",
|
|
79
80
|
className: r.card,
|
|
80
81
|
onClick: () => {
|
|
81
|
-
|
|
82
|
+
n(o(t));
|
|
82
83
|
},
|
|
83
84
|
children: /* @__PURE__ */ e(
|
|
84
85
|
y,
|
|
85
86
|
{
|
|
86
|
-
header: /* @__PURE__ */ e(C, { weight: "regular", children:
|
|
87
|
-
description: /* @__PURE__ */ e(m, { children:
|
|
87
|
+
header: /* @__PURE__ */ e(C, { weight: "regular", children: t.label ?? /* @__PURE__ */ e("span", { children: " " }) }),
|
|
88
|
+
description: /* @__PURE__ */ e(m, { children: t.description ?? /* @__PURE__ */ e("span", { children: " " }) }),
|
|
88
89
|
action: /* @__PURE__ */ e(u, { name: "chevron_right_filled" })
|
|
89
90
|
}
|
|
90
91
|
)
|
|
91
92
|
}
|
|
92
93
|
)
|
|
93
94
|
},
|
|
94
|
-
|
|
95
|
+
t.id
|
|
95
96
|
)) });
|
|
96
97
|
}
|
|
97
98
|
export {
|
|
98
|
-
|
|
99
|
+
z as ListView
|
|
99
100
|
};
|
|
100
101
|
//# sourceMappingURL=ListView.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListView.js","sources":["../../../src/lib/listview/ListView.tsx"],"sourcesContent":["import {\n Caption1,\n Card,\n CardHeader,\n Input,\n List,\n ListItem,\n makeStyles,\n Text,\n tokens,\n} from \"@fluentui/react-components\";\n\nimport { isFunction } from \"lodash-es\";\nimport { ReactNode } from \"react\";\nimport { useI18n } from \"../i18n
|
|
1
|
+
{"version":3,"file":"ListView.js","sources":["../../../src/lib/listview/ListView.tsx"],"sourcesContent":["import {\n Caption1,\n Card,\n CardHeader,\n Input,\n List,\n ListItem,\n makeStyles,\n Text,\n tokens,\n} from \"@fluentui/react-components\";\n\nimport { isFunction } from \"lodash-es\";\nimport { ReactNode } from \"react\";\nimport { useI18n } from \"../i18n\";\nimport { Icon } from \"@seij/common-ui-icons\";\nexport interface ListItemData {\n id: string;\n label: ReactNode;\n description: ReactNode | null;\n}\n\nconst useStyles = makeStyles({\n noresult: {\n textAlign: \"center\",\n padding: \"1em\",\n },\n});\nexport interface ListViewProps<T extends ListItemData = ListItemData> {\n data: T[];\n activeId: string;\n searchText?: string;\n search?: (input: string) => void;\n pathFactory: (item: T) => string;\n navigate: (url: string) => void;\n}\nexport function ListView<T extends ListItemData>({\n data,\n activeId,\n searchText = \"\",\n search,\n pathFactory,\n navigate,\n}: ListViewProps<T>) {\n const styles = useStyles();\n const { t } = useI18n();\n const handleChange = (value: string) => {\n if (search) search(value);\n };\n const isSearchEnabled = isFunction(search);\n const searchMessage = t(\"ListView_search\");\n const noResultMessage = t(\"ListView_no_result\");\n return (\n <div>\n {isSearchEnabled && (\n <Input\n style={{ width: \"100%\" }}\n contentBefore={<Icon name=\"search\" aria-label={searchMessage} />}\n value={searchText}\n placeholder={searchMessage}\n onChange={(e) => handleChange(e.target.value)}\n />\n )}\n <div>\n <ItemList activeId={activeId} items={data} pathFactory={pathFactory} navigate={navigate} />\n </div>\n {data.length === 0 ? (\n <div className={styles.noresult}>\n <Caption1>{noResultMessage}</Caption1>\n </div>\n ) : null}\n </div>\n );\n}\n\nconst useItemListStyles = makeStyles({\n root: {\n display: \"flex\",\n },\n content: {\n flex: 1,\n },\n title: {\n fontWeight: \"bold\",\n },\n description: {\n fontWeight: \"normal\",\n },\n action: {\n flex: 0,\n },\n\n card: {\n width: \"100%\",\n borderBottom: \"1px solid \" + tokens.colorNeutralStencil1,\n borderRadius: tokens.borderRadiusNone,\n },\n});\n\nfunction ItemList<T extends ListItemData>({\n items,\n activeId,\n pathFactory,\n navigate,\n}: {\n items: T[];\n activeId: string;\n pathFactory: (item: T) => string;\n navigate: (url: string) => void;\n}) {\n const style = useItemListStyles();\n if (items.length === 0) return null;\n return (\n <List navigationMode=\"composite\">\n {items.map((it) => (\n <ListItem\n key={it.id}\n onAction={() => {\n navigate(pathFactory(it));\n }}\n >\n <Card\n role=\"gridcell\"\n orientation=\"horizontal\"\n appearance=\"subtle\"\n className={style.card}\n onClick={() => {\n navigate(pathFactory(it));\n }}\n >\n <CardHeader\n header={<Text weight=\"regular\">{it.label ?? <span> </span>}</Text>}\n description={<Caption1>{it.description ?? <span> </span>}</Caption1>}\n action={<Icon name=\"chevron_right_filled\" />}\n />\n </Card>\n </ListItem>\n ))}\n </List>\n );\n}\n"],"names":["useStyles","makeStyles","ListView","data","activeId","searchText","search","pathFactory","navigate","styles","t","useI18n","handleChange","value","isSearchEnabled","isFunction","searchMessage","noResultMessage","jsx","Input","Icon","e","ItemList","Caption1","useItemListStyles","tokens","items","style","List","it","ListItem","Card","CardHeader","Text"],"mappings":"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"}
|
|
@@ -2,6 +2,7 @@ import { jsx as f } from "react/jsx-runtime";
|
|
|
2
2
|
import { makeStyles as S, Input as y } from "@fluentui/react-components";
|
|
3
3
|
import { forwardRef as A, useState as h, useEffect as C, useCallback as k } from "react";
|
|
4
4
|
import { Rifm as z } from "rifm";
|
|
5
|
+
import "../i18n/i18n.service.js";
|
|
5
6
|
import { useI18n as F } from "../i18n/i18n.react.js";
|
|
6
7
|
const N = S({
|
|
7
8
|
root: {
|
|
@@ -19,7 +20,7 @@ const N = S({
|
|
|
19
20
|
return `${e}/`;
|
|
20
21
|
}
|
|
21
22
|
return e;
|
|
22
|
-
}, w = (t) => t.length === 2 || t.length === 5 ? `${t}/` : t,
|
|
23
|
+
}, w = (t) => t.length === 2 || t.length === 5 ? `${t}/` : t, L = A((t, e) => {
|
|
23
24
|
const { onValueChange: r, value: o = "", children: n, size: l, defaultValue: x, type: O, ...g } = t, D = N(), { localDatePlaceholder: $, localDateFormattedToISO: d, localDateISOToFormattedInput: p } = F(), [u, c] = h(p(o)), [i, m] = h(o);
|
|
24
25
|
C(() => {
|
|
25
26
|
o !== i && (m(o), c(p(o)));
|
|
@@ -56,6 +57,6 @@ const N = S({
|
|
|
56
57
|
);
|
|
57
58
|
});
|
|
58
59
|
export {
|
|
59
|
-
|
|
60
|
+
L as InputLocalDate
|
|
60
61
|
};
|
|
61
62
|
//# sourceMappingURL=InputLocalDate.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputLocalDate.js","sources":["../../../src/lib/localdate/InputLocalDate.tsx"],"sourcesContent":["import { Input, makeStyles } from \"@fluentui/react-components\";\nimport { LocalDate } from \"@seij/common-types\";\nimport { forwardRef, InputHTMLAttributes, useCallback, useEffect, useState } from \"react\";\nimport { Rifm } from \"rifm\";\nimport { useI18n } from \"../i18n
|
|
1
|
+
{"version":3,"file":"InputLocalDate.js","sources":["../../../src/lib/localdate/InputLocalDate.tsx"],"sourcesContent":["import { Input, makeStyles } from \"@fluentui/react-components\";\nimport { LocalDate } from \"@seij/common-types\";\nimport { forwardRef, InputHTMLAttributes, useCallback, useEffect, useState } from \"react\";\nimport { Rifm } from \"rifm\";\nimport { useI18n } from \"../i18n\";\n\nconst useStyles = makeStyles({\n root: {\n width: \"8em\",\n \"> input\": {\n textAlign: \"right\",\n },\n },\n});\n\nconst parseDigits = (string: string): string => (string.match(/\\d+/g) || []).join(\"\");\nconst formatDate = (string: string): string => {\n const digits = parseDigits(string);\n const chars = digits.split(\"\");\n return chars.reduce((r, v, index) => (index === 2 || index === 4 ? `${r}/${v}` : `${r}${v}`), \"\").substr(0, 10);\n};\n\nconst formatDateWithAppend = (string: string): string => {\n const res = formatDate(string);\n\n if (string.endsWith(\"/\")) {\n if (res.length === 2) {\n return `${res}/`;\n }\n\n if (res.length === 5) {\n return `${res}/`;\n }\n }\n return res;\n};\nconst appendHyphen = (v: string): string => (v.length === 2 || v.length === 5 ? `${v}/` : v);\n\n/**\n * Input field for local dates with automatic adding of /\n * Values are in ISO8601 date part only\n *\n * Controlled component only\n *\n * @param props same props as an input\n * @return {JSX.Element}\n */\nexport interface InputLocalDateProps extends Omit<InputHTMLAttributes<HTMLInputElement>, \"value\" | \"onChange\"> {\n value?: string;\n onValueChange?: (value: LocalDate) => void;\n}\n\nexport const InputLocalDate = forwardRef<HTMLInputElement, InputLocalDateProps>((props, ref) => {\n // eslint-disable-next-line @typescript-eslint/no-unused-vars\n const { onValueChange, value = \"\", children, size, defaultValue, type, ...delegatedProps } = props;\n const classNames = useStyles();\n const { localDatePlaceholder, localDateFormattedToISO, localDateISOToFormattedInput } = useI18n();\n const [formattedA, setFormattedA] = useState(localDateISOToFormattedInput(value));\n const [normalizedValue, setNormalizedValue] = useState(value);\n\n useEffect(() => {\n if (value !== normalizedValue) {\n setNormalizedValue(value);\n setFormattedA(localDateISOToFormattedInput(value));\n }\n });\n\n const handleChange = useCallback(\n (inputValue: string) => {\n setFormattedA(inputValue);\n const parsed = localDateFormattedToISO(inputValue);\n if (parsed !== normalizedValue) {\n setNormalizedValue(parsed);\n if (onValueChange) onValueChange(parsed);\n }\n },\n [setFormattedA, normalizedValue, setNormalizedValue, onValueChange, localDateFormattedToISO],\n );\n return (\n <Rifm\n accept={/\\d+/g}\n mask={10 <= formattedA.length}\n format={formatDateWithAppend}\n append={appendHyphen}\n value={formattedA}\n onChange={handleChange}\n >\n {({ value, onChange }) => (\n <Input\n placeholder={localDatePlaceholder()}\n className={classNames.root}\n value={value}\n onChange={onChange}\n ref={ref}\n {...delegatedProps}\n />\n )}\n </Rifm>\n );\n});\n"],"names":["useStyles","makeStyles","parseDigits","string","formatDate","r","v","index","formatDateWithAppend","res","appendHyphen","InputLocalDate","forwardRef","props","ref","onValueChange","value","children","size","defaultValue","type","delegatedProps","classNames","localDatePlaceholder","localDateFormattedToISO","localDateISOToFormattedInput","useI18n","formattedA","setFormattedA","useState","normalizedValue","setNormalizedValue","useEffect","handleChange","useCallback","inputValue","parsed","jsx","Rifm","onChange","Input"],"mappings":";;;;;;AAMA,MAAMA,IAAYC,EAAW;AAAA,EAC3B,MAAM;AAAA,IACJ,OAAO;AAAA,IACP,WAAW;AAAA,MACT,WAAW;AAAA,IAAA;AAAA,EACb;AAEJ,CAAC,GAEKC,IAAc,CAACC,OAA4BA,EAAO,MAAM,MAAM,KAAK,CAAA,GAAI,KAAK,EAAE,GAC9EC,IAAa,CAACD,MACHD,EAAYC,CAAM,EACZ,MAAM,EAAE,EAChB,OAAO,CAACE,GAAGC,GAAGC,MAAWA,MAAU,KAAKA,MAAU,IAAI,GAAGF,CAAC,IAAIC,CAAC,KAAK,GAAGD,CAAC,GAAGC,CAAC,IAAK,EAAE,EAAE,OAAO,GAAG,EAAE,GAG1GE,IAAuB,CAACL,MAA2B;AACvD,QAAMM,IAAML,EAAWD,CAAM;AAE7B,MAAIA,EAAO,SAAS,GAAG,GAAG;AACxB,QAAIM,EAAI,WAAW;AACjB,aAAO,GAAGA,CAAG;AAGf,QAAIA,EAAI,WAAW;AACjB,aAAO,GAAGA,CAAG;AAAA,EAEjB;AACA,SAAOA;AACT,GACMC,IAAe,CAACJ,MAAuBA,EAAE,WAAW,KAAKA,EAAE,WAAW,IAAI,GAAGA,CAAC,MAAMA,GAgB7EK,IAAiBC,EAAkD,CAACC,GAAOC,MAAQ;AAE9F,QAAM,EAAE,eAAAC,GAAe,OAAAC,IAAQ,IAAI,UAAAC,GAAU,MAAAC,GAAM,cAAAC,GAAc,MAAAC,GAAM,GAAGC,EAAA,IAAmBR,GACvFS,IAAatB,EAAA,GACb,EAAE,sBAAAuB,GAAsB,yBAAAC,GAAyB,8BAAAC,EAAA,IAAiCC,EAAA,GAClF,CAACC,GAAYC,CAAa,IAAIC,EAASJ,EAA6BT,CAAK,CAAC,GAC1E,CAACc,GAAiBC,CAAkB,IAAIF,EAASb,CAAK;AAE5D,EAAAgB,EAAU,MAAM;AACd,IAAIhB,MAAUc,MACZC,EAAmBf,CAAK,GACxBY,EAAcH,EAA6BT,CAAK,CAAC;AAAA,EAErD,CAAC;AAED,QAAMiB,IAAeC;AAAA,IACnB,CAACC,MAAuB;AACtB,MAAAP,EAAcO,CAAU;AACxB,YAAMC,IAASZ,EAAwBW,CAAU;AACjD,MAAIC,MAAWN,MACbC,EAAmBK,CAAM,GACrBrB,OAA6BqB,CAAM;AAAA,IAE3C;AAAA,IACA,CAACR,GAAeE,GAAiBC,GAAoBhB,GAAeS,CAAuB;AAAA,EAAA;AAE7F,SACE,gBAAAa;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,QAAQ;AAAA,MACR,MAAM,MAAMX,EAAW;AAAA,MACvB,QAAQnB;AAAA,MACR,QAAQE;AAAA,MACR,OAAOiB;AAAA,MACP,UAAUM;AAAA,MAET,UAAA,CAAC,EAAE,OAAAjB,GAAO,UAAAuB,QACT,gBAAAF;AAAA,QAACG;AAAA,QAAA;AAAA,UACC,aAAajB,EAAA;AAAA,UACb,WAAWD,EAAW;AAAA,UACtB,OAAON;AAAAA,UACP,UAAAuB;AAAA,UACA,KAAAzB;AAAA,UACC,GAAGO;AAAA,QAAA;AAAA,MAAA;AAAA,IACN;AAAA,EAAA;AAIR,CAAC;"}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { useMemo as
|
|
3
|
-
import
|
|
4
|
-
import {
|
|
5
|
-
|
|
6
|
-
|
|
1
|
+
import { jsx as s } from "react/jsx-runtime";
|
|
2
|
+
import { useMemo as u } from "react";
|
|
3
|
+
import "../i18n/i18n.service.js";
|
|
4
|
+
import { useI18n as a } from "../i18n/i18n.react.js";
|
|
5
|
+
import { InputSelect as i } from "../select/InputSelect.js";
|
|
6
|
+
const g = (r) => {
|
|
7
|
+
const { value: l, onValueChange: m, required: h, ...c } = r, { monthList: t, t: o } = a(), p = u(() => {
|
|
7
8
|
const e = t().map((n) => ({ code: "" + n.code, label: n.label }));
|
|
8
9
|
return [{ code: "", label: "-- " + o("InputSelect_select") + " --" }, ...e];
|
|
9
10
|
}, [t, o]);
|
|
10
|
-
return /* @__PURE__ */
|
|
11
|
+
return /* @__PURE__ */ s(i, { options: p, value: "" + l, onValueChange: (e) => m(parseInt(e)), ...c });
|
|
11
12
|
};
|
|
12
13
|
export {
|
|
13
|
-
|
|
14
|
+
g as InputMonth
|
|
14
15
|
};
|
|
15
16
|
//# sourceMappingURL=InputMonth.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InputMonth.js","sources":["../../../src/lib/month/InputMonth.tsx"],"sourcesContent":["import { Month } from \"@seij/common-types\";\nimport React, { useMemo } from \"react\";\nimport { useI18n } from \"../i18n
|
|
1
|
+
{"version":3,"file":"InputMonth.js","sources":["../../../src/lib/month/InputMonth.tsx"],"sourcesContent":["import { Month } from \"@seij/common-types\";\nimport React, { useMemo } from \"react\";\nimport { useI18n } from \"../i18n\";\nimport { InputSelect } from \"../select/InputSelect\";\n\ntype HTMLInputElementCurated = Omit<\n React.SelectHTMLAttributes<HTMLSelectElement>,\n \"value\" | \"defaultValue\" | \"onChange\" | \"children\"\n>;\n\nexport interface InputMonthProps extends HTMLInputElementCurated {\n value: Month;\n onValueChange: (value: Month) => unknown;\n}\n\n/**\n * Permet de saisir un mois.\n */\nexport const InputMonth: React.FC<InputMonthProps> = (props) => {\n const { value, onValueChange, required, ...other } = props;\n const { monthList, t } = useI18n();\n const options = useMemo(() => {\n const months = monthList().map((it) => ({ code: \"\" + it.code, label: it.label }));\n const emptyValueSelect = t(\"InputSelect_select\");\n return [{ code: \"\", label: \"-- \" + emptyValueSelect + \" --\" }, ...months];\n }, [monthList, t]);\n\n return (\n <InputSelect options={options} value={\"\" + value} onValueChange={(v) => onValueChange(parseInt(v))} {...other} />\n );\n};\n"],"names":["InputMonth","props","value","onValueChange","required","other","monthList","t","useI18n","options","useMemo","months","it","jsx","InputSelect","v"],"mappings":";;;;;AAkBO,MAAMA,IAAwC,CAACC,MAAU;AAC9D,QAAM,EAAE,OAAAC,GAAO,eAAAC,GAAe,UAAAC,GAAU,GAAGC,MAAUJ,GAC/C,EAAE,WAAAK,GAAW,GAAAC,EAAA,IAAMC,EAAA,GACnBC,IAAUC,EAAQ,MAAM;AAC5B,UAAMC,IAASL,EAAA,EAAY,IAAI,CAACM,OAAQ,EAAE,MAAM,KAAKA,EAAG,MAAM,OAAOA,EAAG,QAAQ;AAEhF,WAAO,CAAC,EAAE,MAAM,IAAI,OAAO,QADFL,EAAE,oBAAoB,IACO,SAAS,GAAGI,CAAM;AAAA,EAC1E,GAAG,CAACL,GAAWC,CAAC,CAAC;AAEjB,SACE,gBAAAM,EAACC,GAAA,EAAY,SAAAL,GAAkB,OAAO,KAAKP,GAAO,eAAe,CAACa,MAAMZ,EAAc,SAASY,CAAC,CAAC,GAAI,GAAGV,GAAO;AAEnH;"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMobile.d.ts","sourceRoot":"","sources":["../../../src/lib/responsive/useMobile.tsx"],"names":[],"mappings":"AAEA,wBAAgB,WAAW,CAAC,UAAU,SAAM,WAa3C"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { useState as r, useEffect as c } from "react";
|
|
2
|
+
function a(e = 768) {
|
|
3
|
+
const [i, s] = r(() => window.innerWidth < e);
|
|
4
|
+
return c(() => {
|
|
5
|
+
const t = window.matchMedia(`(max-width: ${e}px)`), n = (o) => s(o.matches);
|
|
6
|
+
return t.addEventListener("change", n), () => t.removeEventListener("change", n);
|
|
7
|
+
}, [e]), i;
|
|
8
|
+
}
|
|
9
|
+
export {
|
|
10
|
+
a as useIsMobile
|
|
11
|
+
};
|
|
12
|
+
//# sourceMappingURL=useMobile.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMobile.js","sources":["../../../src/lib/responsive/useMobile.tsx"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport function useIsMobile(breakpoint = 768) {\n const [isMobile, setIsMobile] = useState(() => window.innerWidth < breakpoint);\n\n useEffect(() => {\n const mediaQuery = window.matchMedia(`(max-width: ${breakpoint}px)`);\n\n const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);\n mediaQuery.addEventListener(\"change\", handler);\n\n return () => mediaQuery.removeEventListener(\"change\", handler);\n }, [breakpoint]);\n\n return isMobile;\n}\n"],"names":["useIsMobile","breakpoint","isMobile","setIsMobile","useState","useEffect","mediaQuery","handler","e"],"mappings":";AAEO,SAASA,EAAYC,IAAa,KAAK;AAC5C,QAAM,CAACC,GAAUC,CAAW,IAAIC,EAAS,MAAM,OAAO,aAAaH,CAAU;AAE7E,SAAAI,EAAU,MAAM;AACd,UAAMC,IAAa,OAAO,WAAW,eAAeL,CAAU,KAAK,GAE7DM,IAAU,CAACC,MAA2BL,EAAYK,EAAE,OAAO;AACjE,WAAAF,EAAW,iBAAiB,UAAUC,CAAO,GAEtC,MAAMD,EAAW,oBAAoB,UAAUC,CAAO;AAAA,EAC/D,GAAG,CAACN,CAAU,CAAC,GAERC;AACT;"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@seij/common-ui",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.9",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -8,15 +8,15 @@
|
|
|
8
8
|
"url": "https://github.com/seij-net/seij-commons-js.git"
|
|
9
9
|
},
|
|
10
10
|
"dependencies": {
|
|
11
|
-
"@seij/common-types": "0.1.3",
|
|
12
|
-
"@seij/common-ui-icons": "0.1.1",
|
|
13
11
|
"@fluentui/react-components": "9.72.9",
|
|
14
|
-
"
|
|
12
|
+
"@seij/common-ui-icons": "0.1.3",
|
|
15
13
|
"i18next-browser-languagedetector": "8.2.0",
|
|
14
|
+
"@seij/common-types": "0.1.3",
|
|
16
15
|
"date-fns": "4.1.0",
|
|
16
|
+
"i18next": "25.7.3",
|
|
17
|
+
"i18next-icu": "2.4.1",
|
|
17
18
|
"lodash-es": "4.17.22",
|
|
18
|
-
"rifm": "0.12.1"
|
|
19
|
-
"i18next-icu": "2.4.1"
|
|
19
|
+
"rifm": "0.12.1"
|
|
20
20
|
},
|
|
21
21
|
"devDependencies": {
|
|
22
22
|
"@types/lodash-es": "4.17.12"
|