@cgi-learning-hub/ui 1.4.0-dev.1741985772 → 1.4.0-dev.1742031230
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),y=require("../../createSvgIcon-DJMYlO0S.cjs"),
|
|
1
|
+
"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),y=require("../../createSvgIcon-DJMYlO0S.cjs"),a=require("react"),u=require("../TreeView/TreeView.cjs.js"),t=require("../TreeView/types.cjs.js"),d=require("../../Box-DYA49L7w.cjs"),I=require("../../Typography-DPij13XT.cjs"),m=require("../../ListItemText-Bjd08uk4.cjs"),x=require("../../Paper-EvOTlB_Q.cjs"),C=require("../../Button-UmeKHfcL.cjs"),E=require("../../Divider-D3hPb7s4.cjs"),v=require("../../List-Bo4pzQqG.cjs"),O=require("../../ListItem-CB4JyjSb.cjs"),b=y.createSvgIcon(e.jsx("path",{d:"M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2"}),"Bookmark"),S=y.createSvgIcon(e.jsx("path",{d:"M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"}),"Person"),g={title:"Components/TreeView",component:u,argTypes:{items:{description:"**[Requis]** Liste des éléments à afficher dans le TreeView.",control:"object",table:{required:!0,type:{summary:"CustomTreeViewItem[]"}}},selectedItemId:{description:"**[Requis]** Identifiant de l'élément sélectionné.",control:"text",table:{required:!0,type:{summary:"string"}}},handleSelectedItemChange:{description:"**[Requis]** Fonction appelée lorsqu'un élément est sélectionné.",table:{required:!0,type:{summary:"(event: React.SyntheticEvent, itemIds: string | null) => void"}}},iconColor:{description:"**[Optionnel]** Couleur des icônes.",control:"select",options:["primary","secondary","success","error","info","warning"],defaultValue:"primary",table:{required:!1,type:{summary:"string"},defaultValue:{summary:"primary"}}}},parameters:{docs:{description:{component:`
|
|
2
2
|
## TreeView
|
|
3
3
|
|
|
4
4
|
Un composant pour afficher des données hiérarchiques sous forme d'arborescence.
|
|
@@ -32,4 +32,4 @@ interface CustomTreeViewItemProps {
|
|
|
32
32
|
|
|
33
33
|
type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
|
|
34
34
|
\`\`\`
|
|
35
|
-
`}}}},
|
|
35
|
+
`}}}},h=r=>{const o=[],i=n=>{o.push(n),n.children&&n.children.forEach(s=>i(s))};return r.forEach(n=>i(n)),o},P=({items:r,selectedItemId:o,onItemSelect:i})=>{const n=h(r);return e.jsxs(x.Paper,{sx:{width:"100%",maxHeight:300,overflow:"auto"},children:[e.jsx(I.Typography,{variant:"h6",sx:{p:2},children:"Sélection externe"}),e.jsx(E.Divider,{}),e.jsx(v.List,{children:n.map(s=>e.jsx(O.ListItem,{disablePadding:!0,children:e.jsx(m.ListItemButton,{selected:o===s.internalId,onClick:()=>i(s.internalId),children:e.jsx(m.ListItemText,{primary:s.label})})},s.internalId))})]})},R=({items:r,onRandomSelect:o})=>{const i=h(r),n=()=>{const s=Math.floor(Math.random()*i.length);o(i[s].internalId)};return e.jsx(d.Box,{sx:{mt:2,mb:2},children:e.jsx(C.Button,{variant:"contained",color:"primary",onClick:n,children:"Sélection aléatoire"})})},T=[{internalId:"documents",label:"Mes formulaires",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"folder1",label:"Premier dossier",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"subfolder1",label:"Sous-dossier 1",iconType:t.ICON_TYPE.FOLDER},{internalId:"subfolder2",label:"Sous-dossier 2",iconType:t.ICON_TYPE.FOLDER}]},{internalId:"folder2",label:"Deuxième dossier",iconType:t.ICON_TYPE.FOLDER},{internalId:"folder3",label:"Troisième dossier",iconType:t.ICON_TYPE.FOLDER}]},{internalId:"shared",label:"Formulaires partagés avec moi",iconType:t.ICON_TYPE.SHARE},{internalId:"trash",label:"Corbeille",iconType:t.ICON_TYPE.TRASH}],Y=[{internalId:"bookmarks",label:"Favoris",iconType:b,children:[{internalId:"important",label:"Important",iconType:t.ICON_TYPE.CUSTOM,customIcon:S}]},...T],p=[{internalId:"documents",label:"Documents",iconType:t.ICON_TYPE.SHARE,children:[{internalId:"reports",label:"Rapports",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"report1",label:"Rapport Janvier",iconType:t.ICON_TYPE.FOLDER},{internalId:"report2",label:"Rapport Février",iconType:t.ICON_TYPE.FOLDER},{internalId:"report3",label:"Rapport Mars",iconType:t.ICON_TYPE.FOLDER}]},{internalId:"invoices",label:"Factures",iconType:t.ICON_TYPE.FOLDER}]},{internalId:"media",label:"Médias",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"images",label:"Images",iconType:t.ICON_TYPE.FOLDER},{internalId:"videos",label:"Vidéos",iconType:t.ICON_TYPE.FOLDER}]},{internalId:"downloads",label:"Téléchargements",iconType:t.ICON_TYPE.FOLDER}],j={render:()=>{const[r,o]=a.useState(""),i=a.useCallback((n,s)=>{console.log(`Élément sélectionné: ${s}`),s&&o(s)},[]);return e.jsx(d.Box,{sx:{maxWidth:300,overflowY:"hidden"},children:e.jsx(u,{items:T,selectedItemId:r,handleSelectedItemChange:i})})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple de base avec des icônes standard et démonstration de sélection."}}}},N={args:{items:T,selectedItemId:"folder1",handleSelectedItemChange:(r,o)=>{console.log(`Élément sélectionné: ${o}`)},iconColor:"success"},render:r=>e.jsx(d.Box,{sx:{maxWidth:300,overflowY:"hidden"},children:e.jsx(u,{...r})}),parameters:{docs:{description:{story:"Cette story permet de contrôler les propriétés du TreeView directement via le panneau de contrôle de Storybook. Essayez de changer la couleur des icônes pour voir l'effet en temps réel."}}}},_={render:()=>{const[r,o]=a.useState("bookmarks"),i=a.useCallback((n,s)=>{console.log(`Élément sélectionné: ${s}`),s&&o(s)},[]);return e.jsx(d.Box,{sx:{maxWidth:300,overflowY:"hidden"},children:e.jsx(u,{items:Y,selectedItemId:r,handleSelectedItemChange:i})})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple utilisant à la fois des icônes prédéfinies et des icônes personnalisées."}}}},w={render:()=>{const r=[{internalId:"root",label:"Structure imbriquée complexe",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"level1-1",label:"Niveau 1.1",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"level2-1",label:"Niveau 2.1",iconType:t.ICON_TYPE.FOLDER,children:[{internalId:"level3-1V",label:"VOUS M'AVEZ TROUVÉ HIHIHI",iconType:t.ICON_TYPE.FOLDER},{internalId:"level3-2",label:"Niveau 3.2",iconType:t.ICON_TYPE.SHARE}]},{internalId:"level2-2",label:"Niveau 2.2",iconType:t.ICON_TYPE.TRASH}]},{internalId:"level1-2",label:"Niveau 1.2",iconType:t.ICON_TYPE.CUSTOM,customIcon:b}]}],[o,i]=a.useState("level2-1"),n=a.useCallback((s,l)=>{console.log(`Élément sélectionné: ${l}`),l&&i(l)},[]);return e.jsx(d.Box,{sx:{maxWidth:400,overflowY:"hidden"},children:e.jsx(u,{items:r,selectedItemId:o,handleSelectedItemChange:n,iconColor:"info"})})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Exemple d'une structure profondément imbriquée."}}}},L={render:()=>{const r=["primary","secondary","info"],[o,i]=a.useState({primary:"",secondary:"",info:""});return e.jsx(d.Box,{sx:{display:"flex",flexDirection:"row",gap:3,overflowY:"hidden"},children:r.map(n=>e.jsxs(d.Box,{sx:{maxWidth:250,overflowY:"hidden"},children:[e.jsxs(I.Typography,{variant:"subtitle2",gutterBottom:!0,children:["Icônes ",n]}),e.jsx(u,{items:T,selectedItemId:o[n],handleSelectedItemChange:(s,l)=>{l&&i(c=>({...c,[n]:l}))},iconColor:n})]},n))})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration des principales options de couleurs disponibles pour les icônes."}}}},D={render:()=>{const[r,o]=a.useState("reports"),i=(l,c)=>{console.log("TreeView sélection:",c),c&&o(c)},n=l=>{console.log("Sélection externe:",l),o(l)},s=()=>{const c=h(p).find(f=>f.internalId===r);return c?c.label:"Aucun élément sélectionné"};return e.jsxs(d.Box,{sx:{width:"100%",overflowY:"hidden"},children:[e.jsxs(I.Typography,{variant:"subtitle1",gutterBottom:!0,children:["Élément sélectionné: ",e.jsx("strong",{children:s()})," (ID:"," ",r,")"]}),e.jsx(R,{items:p,onRandomSelect:n}),e.jsxs(m.Grid,{container:!0,spacing:3,sx:{overflowY:"hidden"},children:[e.jsx(m.Grid,{item:!0,xs:12,md:6,children:e.jsxs(x.Paper,{sx:{p:2,overflowY:"hidden"},children:[e.jsx(I.Typography,{variant:"h6",gutterBottom:!0,children:"TreeView"}),e.jsx(u,{items:p,selectedItemId:r,handleSelectedItemChange:i})]})}),e.jsx(m.Grid,{item:!0,xs:12,md:6,children:e.jsx(P,{items:p,selectedItemId:r,onItemSelect:n})})]})]})},parameters:{controls:{disable:!0},actions:{disable:!0},docs:{description:{story:"Démonstration de la synchronisation entre le TreeView et d'autres composants. Cette story montre comment le TreeView peut être intégré dans une interface complexe où la sélection peut provenir de différentes sources mais reste synchronisée."}}}};exports.AvecIconesPersonnalisees=_;exports.Controlable=N;exports.Default=j;exports.OptionsDeCouleurs=L;exports.StructureImbriquee=w;exports.Synchronicite=D;exports.default=g;
|
|
@@ -3,10 +3,9 @@ import { TreeView } from '../TreeView';
|
|
|
3
3
|
declare const meta: Meta<typeof TreeView>;
|
|
4
4
|
export default meta;
|
|
5
5
|
type Story = StoryObj<typeof TreeView>;
|
|
6
|
-
export declare const Controlable: Story;
|
|
7
6
|
export declare const Default: Story;
|
|
8
|
-
export declare const
|
|
7
|
+
export declare const Controlable: Story;
|
|
9
8
|
export declare const AvecIconesPersonnalisees: Story;
|
|
10
9
|
export declare const StructureImbriquee: Story;
|
|
11
|
-
export declare const
|
|
10
|
+
export declare const OptionsDeCouleurs: Story;
|
|
12
11
|
export declare const Synchronicite: Story;
|
|
@@ -1,52 +1,56 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { c as
|
|
3
|
-
import { useState as
|
|
4
|
-
import
|
|
5
|
-
import { ICON_TYPE as
|
|
6
|
-
import { B as
|
|
7
|
-
import { T as
|
|
1
|
+
import { jsx as e, jsxs as d } from "react/jsx-runtime";
|
|
2
|
+
import { c as T } from "../../createSvgIcon-B62eln-G.js";
|
|
3
|
+
import { useState as p, useCallback as y } from "react";
|
|
4
|
+
import m from "../TreeView/TreeView.es.js";
|
|
5
|
+
import { ICON_TYPE as t } from "../TreeView/types.es.js";
|
|
6
|
+
import { B as c } from "../../Box-GMNejc_m.js";
|
|
7
|
+
import { T as I } from "../../Typography-Ct2Sc9KM.js";
|
|
8
8
|
import { G as f, L as x, a as E } from "../../ListItemText-B_hEVsaT.js";
|
|
9
|
-
import { P as
|
|
10
|
-
import { B as
|
|
11
|
-
import { D as
|
|
12
|
-
import { L
|
|
13
|
-
import { L } from "../../ListItem-C9OfYRAP.js";
|
|
14
|
-
const g =
|
|
9
|
+
import { P as v } from "../../Paper-BrsaeLlu.js";
|
|
10
|
+
import { B as R } from "../../Button-x5rtZxJN.js";
|
|
11
|
+
import { D as C } from "../../Divider-CNGfzZqD.js";
|
|
12
|
+
import { L } from "../../List-BTPrBGqY.js";
|
|
13
|
+
import { L as O } from "../../ListItem-C9OfYRAP.js";
|
|
14
|
+
const g = T(/* @__PURE__ */ e("path", {
|
|
15
15
|
d: "M17 3H7c-1.1 0-1.99.9-1.99 2L5 21l7-3 7 3V5c0-1.1-.9-2-2-2"
|
|
16
|
-
}), "Bookmark"),
|
|
16
|
+
}), "Bookmark"), w = T(/* @__PURE__ */ e("path", {
|
|
17
17
|
d: "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4m0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4"
|
|
18
|
-
}), "Person"),
|
|
18
|
+
}), "Person"), $ = {
|
|
19
19
|
title: "Components/TreeView",
|
|
20
|
-
component:
|
|
20
|
+
component: m,
|
|
21
21
|
argTypes: {
|
|
22
22
|
items: {
|
|
23
|
-
description: "Liste des éléments à afficher dans le TreeView.",
|
|
23
|
+
description: "**[Requis]** Liste des éléments à afficher dans le TreeView.",
|
|
24
24
|
control: "object",
|
|
25
25
|
table: {
|
|
26
|
+
required: !0,
|
|
26
27
|
type: { summary: "CustomTreeViewItem[]" }
|
|
27
28
|
}
|
|
28
29
|
},
|
|
29
30
|
selectedItemId: {
|
|
30
|
-
description: "Identifiant de l'élément sélectionné.",
|
|
31
|
+
description: "**[Requis]** Identifiant de l'élément sélectionné.",
|
|
31
32
|
control: "text",
|
|
32
33
|
table: {
|
|
34
|
+
required: !0,
|
|
33
35
|
type: { summary: "string" }
|
|
34
36
|
}
|
|
35
37
|
},
|
|
36
38
|
handleSelectedItemChange: {
|
|
37
|
-
description: "Fonction appelée lorsqu'un élément est sélectionné.",
|
|
39
|
+
description: "**[Requis]** Fonction appelée lorsqu'un élément est sélectionné.",
|
|
38
40
|
table: {
|
|
41
|
+
required: !0,
|
|
39
42
|
type: {
|
|
40
43
|
summary: "(event: React.SyntheticEvent, itemIds: string | null) => void"
|
|
41
44
|
}
|
|
42
45
|
}
|
|
43
46
|
},
|
|
44
47
|
iconColor: {
|
|
45
|
-
description: "Couleur des icônes.",
|
|
48
|
+
description: "**[Optionnel]** Couleur des icônes.",
|
|
46
49
|
control: "select",
|
|
47
50
|
options: ["primary", "secondary", "success", "error", "info", "warning"],
|
|
48
51
|
defaultValue: "primary",
|
|
49
52
|
table: {
|
|
53
|
+
required: !1,
|
|
50
54
|
type: { summary: "string" },
|
|
51
55
|
defaultValue: { summary: "primary" }
|
|
52
56
|
}
|
|
@@ -93,86 +97,86 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
|
|
|
93
97
|
}
|
|
94
98
|
}
|
|
95
99
|
}
|
|
96
|
-
},
|
|
97
|
-
const
|
|
98
|
-
|
|
99
|
-
(
|
|
100
|
+
}, b = (n) => {
|
|
101
|
+
const o = [], i = (r) => {
|
|
102
|
+
o.push(r), r.children && r.children.forEach(
|
|
103
|
+
(s) => i(s)
|
|
100
104
|
);
|
|
101
105
|
};
|
|
102
|
-
return
|
|
103
|
-
},
|
|
104
|
-
items:
|
|
105
|
-
selectedItemId:
|
|
106
|
-
onItemSelect:
|
|
106
|
+
return n.forEach((r) => i(r)), o;
|
|
107
|
+
}, D = ({
|
|
108
|
+
items: n,
|
|
109
|
+
selectedItemId: o,
|
|
110
|
+
onItemSelect: i
|
|
107
111
|
}) => {
|
|
108
|
-
const
|
|
109
|
-
return /* @__PURE__ */
|
|
110
|
-
/* @__PURE__ */
|
|
111
|
-
/* @__PURE__ */
|
|
112
|
-
/* @__PURE__ */
|
|
112
|
+
const r = b(n);
|
|
113
|
+
return /* @__PURE__ */ d(v, { sx: { width: "100%", maxHeight: 300, overflow: "auto" }, children: [
|
|
114
|
+
/* @__PURE__ */ e(I, { variant: "h6", sx: { p: 2 }, children: "Sélection externe" }),
|
|
115
|
+
/* @__PURE__ */ e(C, {}),
|
|
116
|
+
/* @__PURE__ */ e(L, { children: r.map((s) => /* @__PURE__ */ e(O, { disablePadding: !0, children: /* @__PURE__ */ e(
|
|
113
117
|
x,
|
|
114
118
|
{
|
|
115
|
-
selected:
|
|
116
|
-
onClick: () =>
|
|
117
|
-
children: /* @__PURE__ */
|
|
119
|
+
selected: o === s.internalId,
|
|
120
|
+
onClick: () => i(s.internalId),
|
|
121
|
+
children: /* @__PURE__ */ e(E, { primary: s.label })
|
|
118
122
|
}
|
|
119
|
-
) },
|
|
123
|
+
) }, s.internalId)) })
|
|
120
124
|
] });
|
|
121
|
-
},
|
|
122
|
-
items:
|
|
123
|
-
onRandomSelect:
|
|
125
|
+
}, V = ({
|
|
126
|
+
items: n,
|
|
127
|
+
onRandomSelect: o
|
|
124
128
|
}) => {
|
|
125
|
-
const
|
|
126
|
-
return /* @__PURE__ */
|
|
127
|
-
const
|
|
128
|
-
|
|
129
|
+
const i = b(n);
|
|
130
|
+
return /* @__PURE__ */ e(c, { sx: { mt: 2, mb: 2 }, children: /* @__PURE__ */ e(R, { variant: "contained", color: "primary", onClick: () => {
|
|
131
|
+
const s = Math.floor(Math.random() * i.length);
|
|
132
|
+
o(i[s].internalId);
|
|
129
133
|
}, children: "Sélection aléatoire" }) });
|
|
130
|
-
},
|
|
134
|
+
}, h = [
|
|
131
135
|
{
|
|
132
136
|
internalId: "documents",
|
|
133
137
|
label: "Mes formulaires",
|
|
134
|
-
iconType:
|
|
138
|
+
iconType: t.FOLDER,
|
|
135
139
|
children: [
|
|
136
140
|
{
|
|
137
141
|
internalId: "folder1",
|
|
138
142
|
label: "Premier dossier",
|
|
139
|
-
iconType:
|
|
143
|
+
iconType: t.FOLDER,
|
|
140
144
|
children: [
|
|
141
145
|
{
|
|
142
146
|
internalId: "subfolder1",
|
|
143
147
|
label: "Sous-dossier 1",
|
|
144
|
-
iconType:
|
|
148
|
+
iconType: t.FOLDER
|
|
145
149
|
},
|
|
146
150
|
{
|
|
147
151
|
internalId: "subfolder2",
|
|
148
152
|
label: "Sous-dossier 2",
|
|
149
|
-
iconType:
|
|
153
|
+
iconType: t.FOLDER
|
|
150
154
|
}
|
|
151
155
|
]
|
|
152
156
|
},
|
|
153
157
|
{
|
|
154
158
|
internalId: "folder2",
|
|
155
159
|
label: "Deuxième dossier",
|
|
156
|
-
iconType:
|
|
160
|
+
iconType: t.FOLDER
|
|
157
161
|
},
|
|
158
162
|
{
|
|
159
163
|
internalId: "folder3",
|
|
160
164
|
label: "Troisième dossier",
|
|
161
|
-
iconType:
|
|
165
|
+
iconType: t.FOLDER
|
|
162
166
|
}
|
|
163
167
|
]
|
|
164
168
|
},
|
|
165
169
|
{
|
|
166
170
|
internalId: "shared",
|
|
167
171
|
label: "Formulaires partagés avec moi",
|
|
168
|
-
iconType:
|
|
172
|
+
iconType: t.SHARE
|
|
169
173
|
},
|
|
170
174
|
{
|
|
171
175
|
internalId: "trash",
|
|
172
176
|
label: "Corbeille",
|
|
173
|
-
iconType:
|
|
177
|
+
iconType: t.TRASH
|
|
174
178
|
}
|
|
175
|
-
],
|
|
179
|
+
], F = [
|
|
176
180
|
{
|
|
177
181
|
internalId: "bookmarks",
|
|
178
182
|
label: "Favoris",
|
|
@@ -181,241 +185,205 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
|
|
|
181
185
|
{
|
|
182
186
|
internalId: "important",
|
|
183
187
|
label: "Important",
|
|
184
|
-
iconType:
|
|
185
|
-
customIcon:
|
|
188
|
+
iconType: t.CUSTOM,
|
|
189
|
+
customIcon: w
|
|
186
190
|
}
|
|
187
191
|
]
|
|
188
192
|
},
|
|
189
|
-
...
|
|
190
|
-
],
|
|
193
|
+
...h
|
|
194
|
+
], u = [
|
|
191
195
|
{
|
|
192
196
|
internalId: "documents",
|
|
193
197
|
label: "Documents",
|
|
194
|
-
iconType:
|
|
198
|
+
iconType: t.SHARE,
|
|
195
199
|
children: [
|
|
196
200
|
{
|
|
197
201
|
internalId: "reports",
|
|
198
202
|
label: "Rapports",
|
|
199
|
-
iconType:
|
|
203
|
+
iconType: t.FOLDER,
|
|
200
204
|
children: [
|
|
201
205
|
{
|
|
202
206
|
internalId: "report1",
|
|
203
207
|
label: "Rapport Janvier",
|
|
204
|
-
iconType:
|
|
208
|
+
iconType: t.FOLDER
|
|
205
209
|
},
|
|
206
210
|
{
|
|
207
211
|
internalId: "report2",
|
|
208
212
|
label: "Rapport Février",
|
|
209
|
-
iconType:
|
|
213
|
+
iconType: t.FOLDER
|
|
210
214
|
},
|
|
211
215
|
{
|
|
212
216
|
internalId: "report3",
|
|
213
217
|
label: "Rapport Mars",
|
|
214
|
-
iconType:
|
|
218
|
+
iconType: t.FOLDER
|
|
215
219
|
}
|
|
216
220
|
]
|
|
217
221
|
},
|
|
218
|
-
{ internalId: "invoices", label: "Factures", iconType:
|
|
222
|
+
{ internalId: "invoices", label: "Factures", iconType: t.FOLDER }
|
|
219
223
|
]
|
|
220
224
|
},
|
|
221
225
|
{
|
|
222
226
|
internalId: "media",
|
|
223
227
|
label: "Médias",
|
|
224
|
-
iconType:
|
|
228
|
+
iconType: t.FOLDER,
|
|
225
229
|
children: [
|
|
226
|
-
{ internalId: "images", label: "Images", iconType:
|
|
227
|
-
{ internalId: "videos", label: "Vidéos", iconType:
|
|
230
|
+
{ internalId: "images", label: "Images", iconType: t.FOLDER },
|
|
231
|
+
{ internalId: "videos", label: "Vidéos", iconType: t.FOLDER }
|
|
228
232
|
]
|
|
229
233
|
},
|
|
230
234
|
{
|
|
231
235
|
internalId: "downloads",
|
|
232
236
|
label: "Téléchargements",
|
|
233
|
-
iconType:
|
|
237
|
+
iconType: t.FOLDER
|
|
234
238
|
}
|
|
235
239
|
], z = {
|
|
236
|
-
args: {
|
|
237
|
-
items: I,
|
|
238
|
-
selectedItemId: "folder1",
|
|
239
|
-
handleSelectedItemChange: (t, r) => {
|
|
240
|
-
console.log(`Élément sélectionné: ${r}`);
|
|
241
|
-
},
|
|
242
|
-
iconColor: "primary"
|
|
243
|
-
},
|
|
244
|
-
render: (t) => /* @__PURE__ */ s(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: [
|
|
245
|
-
/* @__PURE__ */ s(m, { variant: "subtitle1", gutterBottom: !0, children: [
|
|
246
|
-
"Sélection: ",
|
|
247
|
-
t.selectedItemId
|
|
248
|
-
] }),
|
|
249
|
-
/* @__PURE__ */ n(p, { ...t })
|
|
250
|
-
] }),
|
|
251
|
-
parameters: {
|
|
252
|
-
docs: {
|
|
253
|
-
description: {
|
|
254
|
-
story: "Cette story permet de contrôler les propriétés du TreeView directement via le panneau de contrôle de Storybook. Essayez de changer la couleur des icônes pour voir l'effet en temps réel."
|
|
255
|
-
}
|
|
256
|
-
}
|
|
257
|
-
}
|
|
258
|
-
}, G = {
|
|
259
240
|
render: () => {
|
|
260
|
-
const [
|
|
261
|
-
(
|
|
262
|
-
console.log(`Élément sélectionné: ${
|
|
241
|
+
const [n, o] = p(""), i = y(
|
|
242
|
+
(r, s) => {
|
|
243
|
+
console.log(`Élément sélectionné: ${s}`), s && o(s);
|
|
263
244
|
},
|
|
264
245
|
[]
|
|
265
246
|
);
|
|
266
|
-
return /* @__PURE__ */
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
items: I,
|
|
275
|
-
selectedItemId: t,
|
|
276
|
-
handleSelectedItemChange: l
|
|
277
|
-
}
|
|
278
|
-
)
|
|
279
|
-
] });
|
|
247
|
+
return /* @__PURE__ */ e(c, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
|
|
248
|
+
m,
|
|
249
|
+
{
|
|
250
|
+
items: h,
|
|
251
|
+
selectedItemId: n,
|
|
252
|
+
handleSelectedItemChange: i
|
|
253
|
+
}
|
|
254
|
+
) });
|
|
280
255
|
},
|
|
281
256
|
parameters: {
|
|
257
|
+
controls: { disable: !0 },
|
|
258
|
+
actions: { disable: !0 },
|
|
282
259
|
docs: {
|
|
283
260
|
description: {
|
|
284
261
|
story: "Exemple de base avec des icônes standard et démonstration de sélection."
|
|
285
262
|
}
|
|
286
263
|
}
|
|
287
264
|
}
|
|
288
|
-
},
|
|
289
|
-
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
|
|
293
|
-
|
|
294
|
-
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
298
|
-
) }),
|
|
265
|
+
}, G = {
|
|
266
|
+
args: {
|
|
267
|
+
items: h,
|
|
268
|
+
selectedItemId: "folder1",
|
|
269
|
+
handleSelectedItemChange: (n, o) => {
|
|
270
|
+
console.log(`Élément sélectionné: ${o}`);
|
|
271
|
+
},
|
|
272
|
+
iconColor: "success"
|
|
273
|
+
},
|
|
274
|
+
render: (n) => /* @__PURE__ */ e(c, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(m, { ...n }) }),
|
|
299
275
|
parameters: {
|
|
300
276
|
docs: {
|
|
301
277
|
description: {
|
|
302
|
-
story: "
|
|
278
|
+
story: "Cette story permet de contrôler les propriétés du TreeView directement via le panneau de contrôle de Storybook. Essayez de changer la couleur des icônes pour voir l'effet en temps réel."
|
|
303
279
|
}
|
|
304
280
|
}
|
|
305
281
|
}
|
|
306
|
-
},
|
|
282
|
+
}, J = {
|
|
307
283
|
render: () => {
|
|
308
|
-
const [
|
|
309
|
-
(
|
|
310
|
-
console.log(`Élément sélectionné: ${
|
|
284
|
+
const [n, o] = p("bookmarks"), i = y(
|
|
285
|
+
(r, s) => {
|
|
286
|
+
console.log(`Élément sélectionné: ${s}`), s && o(s);
|
|
311
287
|
},
|
|
312
288
|
[]
|
|
313
289
|
);
|
|
314
|
-
return /* @__PURE__ */
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
320
|
-
|
|
321
|
-
|
|
322
|
-
items: V,
|
|
323
|
-
selectedItemId: t,
|
|
324
|
-
handleSelectedItemChange: l
|
|
325
|
-
}
|
|
326
|
-
)
|
|
327
|
-
] });
|
|
290
|
+
return /* @__PURE__ */ e(c, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
|
|
291
|
+
m,
|
|
292
|
+
{
|
|
293
|
+
items: F,
|
|
294
|
+
selectedItemId: n,
|
|
295
|
+
handleSelectedItemChange: i
|
|
296
|
+
}
|
|
297
|
+
) });
|
|
328
298
|
},
|
|
329
299
|
parameters: {
|
|
300
|
+
controls: { disable: !0 },
|
|
301
|
+
actions: { disable: !0 },
|
|
330
302
|
docs: {
|
|
331
303
|
description: {
|
|
332
304
|
story: "Exemple utilisant à la fois des icônes prédéfinies et des icônes personnalisées."
|
|
333
305
|
}
|
|
334
306
|
}
|
|
335
307
|
}
|
|
336
|
-
},
|
|
308
|
+
}, Z = {
|
|
337
309
|
render: () => {
|
|
338
|
-
const
|
|
310
|
+
const n = [
|
|
339
311
|
{
|
|
340
312
|
internalId: "root",
|
|
341
313
|
label: "Structure imbriquée complexe",
|
|
342
|
-
iconType:
|
|
314
|
+
iconType: t.FOLDER,
|
|
343
315
|
children: [
|
|
344
316
|
{
|
|
345
317
|
internalId: "level1-1",
|
|
346
318
|
label: "Niveau 1.1",
|
|
347
|
-
iconType:
|
|
319
|
+
iconType: t.FOLDER,
|
|
348
320
|
children: [
|
|
349
321
|
{
|
|
350
322
|
internalId: "level2-1",
|
|
351
323
|
label: "Niveau 2.1",
|
|
352
|
-
iconType:
|
|
324
|
+
iconType: t.FOLDER,
|
|
353
325
|
children: [
|
|
354
326
|
{
|
|
355
|
-
internalId: "level3-
|
|
356
|
-
label: "
|
|
357
|
-
iconType:
|
|
327
|
+
internalId: "level3-1V",
|
|
328
|
+
label: "VOUS M'AVEZ TROUVÉ HIHIHI",
|
|
329
|
+
iconType: t.FOLDER
|
|
358
330
|
},
|
|
359
331
|
{
|
|
360
332
|
internalId: "level3-2",
|
|
361
333
|
label: "Niveau 3.2",
|
|
362
|
-
iconType:
|
|
334
|
+
iconType: t.SHARE
|
|
363
335
|
}
|
|
364
336
|
]
|
|
365
337
|
},
|
|
366
338
|
{
|
|
367
339
|
internalId: "level2-2",
|
|
368
340
|
label: "Niveau 2.2",
|
|
369
|
-
iconType:
|
|
341
|
+
iconType: t.TRASH
|
|
370
342
|
}
|
|
371
343
|
]
|
|
372
344
|
},
|
|
373
345
|
{
|
|
374
346
|
internalId: "level1-2",
|
|
375
347
|
label: "Niveau 1.2",
|
|
376
|
-
iconType:
|
|
348
|
+
iconType: t.CUSTOM,
|
|
377
349
|
customIcon: g
|
|
378
350
|
}
|
|
379
351
|
]
|
|
380
352
|
}
|
|
381
|
-
], [
|
|
382
|
-
(
|
|
383
|
-
console.log(`Élément sélectionné: ${
|
|
353
|
+
], [o, i] = p("level2-1"), r = y(
|
|
354
|
+
(s, l) => {
|
|
355
|
+
console.log(`Élément sélectionné: ${l}`), l && i(l);
|
|
384
356
|
},
|
|
385
357
|
[]
|
|
386
358
|
);
|
|
387
|
-
return /* @__PURE__ */
|
|
388
|
-
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
selectedItemId: r,
|
|
397
|
-
handleSelectedItemChange: o,
|
|
398
|
-
iconColor: "info"
|
|
399
|
-
}
|
|
400
|
-
)
|
|
401
|
-
] });
|
|
359
|
+
return /* @__PURE__ */ e(c, { sx: { maxWidth: 400, overflowY: "hidden" }, children: /* @__PURE__ */ e(
|
|
360
|
+
m,
|
|
361
|
+
{
|
|
362
|
+
items: n,
|
|
363
|
+
selectedItemId: o,
|
|
364
|
+
handleSelectedItemChange: r,
|
|
365
|
+
iconColor: "info"
|
|
366
|
+
}
|
|
367
|
+
) });
|
|
402
368
|
},
|
|
403
369
|
parameters: {
|
|
370
|
+
controls: { disable: !0 },
|
|
371
|
+
actions: { disable: !0 },
|
|
404
372
|
docs: {
|
|
405
373
|
description: {
|
|
406
|
-
story: "Exemple d'une structure profondément imbriquée
|
|
374
|
+
story: "Exemple d'une structure profondément imbriquée."
|
|
407
375
|
}
|
|
408
376
|
}
|
|
409
377
|
}
|
|
410
|
-
},
|
|
378
|
+
}, K = {
|
|
411
379
|
render: () => {
|
|
412
|
-
const
|
|
380
|
+
const n = ["primary", "secondary", "info"], [o, i] = p({
|
|
413
381
|
primary: "",
|
|
414
382
|
secondary: "",
|
|
415
383
|
info: ""
|
|
416
384
|
});
|
|
417
|
-
return /* @__PURE__ */
|
|
418
|
-
|
|
385
|
+
return /* @__PURE__ */ e(
|
|
386
|
+
c,
|
|
419
387
|
{
|
|
420
388
|
sx: {
|
|
421
389
|
display: "flex",
|
|
@@ -423,96 +391,99 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
|
|
|
423
391
|
gap: 3,
|
|
424
392
|
overflowY: "hidden"
|
|
425
393
|
},
|
|
426
|
-
children:
|
|
427
|
-
|
|
394
|
+
children: n.map((r) => /* @__PURE__ */ d(
|
|
395
|
+
c,
|
|
428
396
|
{
|
|
429
397
|
sx: {
|
|
430
398
|
maxWidth: 250,
|
|
431
399
|
overflowY: "hidden"
|
|
432
400
|
},
|
|
433
401
|
children: [
|
|
434
|
-
/* @__PURE__ */
|
|
402
|
+
/* @__PURE__ */ d(I, { variant: "subtitle2", gutterBottom: !0, children: [
|
|
435
403
|
"Icônes ",
|
|
436
|
-
|
|
404
|
+
r
|
|
437
405
|
] }),
|
|
438
|
-
/* @__PURE__ */
|
|
439
|
-
|
|
406
|
+
/* @__PURE__ */ e(
|
|
407
|
+
m,
|
|
440
408
|
{
|
|
441
|
-
items:
|
|
442
|
-
selectedItemId: r
|
|
443
|
-
handleSelectedItemChange: (
|
|
444
|
-
|
|
409
|
+
items: h,
|
|
410
|
+
selectedItemId: o[r],
|
|
411
|
+
handleSelectedItemChange: (s, l) => {
|
|
412
|
+
l && i((a) => ({ ...a, [r]: l }));
|
|
445
413
|
},
|
|
446
|
-
iconColor:
|
|
414
|
+
iconColor: r
|
|
447
415
|
}
|
|
448
416
|
)
|
|
449
417
|
]
|
|
450
418
|
},
|
|
451
|
-
|
|
419
|
+
r
|
|
452
420
|
))
|
|
453
421
|
}
|
|
454
422
|
);
|
|
455
423
|
},
|
|
456
424
|
parameters: {
|
|
425
|
+
controls: { disable: !0 },
|
|
426
|
+
actions: { disable: !0 },
|
|
457
427
|
docs: {
|
|
458
428
|
description: {
|
|
459
429
|
story: "Démonstration des principales options de couleurs disponibles pour les icônes."
|
|
460
430
|
}
|
|
461
431
|
}
|
|
462
432
|
}
|
|
463
|
-
},
|
|
433
|
+
}, Q = {
|
|
464
434
|
render: () => {
|
|
465
|
-
const [
|
|
466
|
-
console.log("TreeView sélection:",
|
|
467
|
-
},
|
|
468
|
-
console.log("Sélection externe:",
|
|
435
|
+
const [n, o] = p("reports"), i = (l, a) => {
|
|
436
|
+
console.log("TreeView sélection:", a), a && o(a);
|
|
437
|
+
}, r = (l) => {
|
|
438
|
+
console.log("Sélection externe:", l), o(l);
|
|
469
439
|
};
|
|
470
|
-
return /* @__PURE__ */
|
|
471
|
-
/* @__PURE__ */
|
|
440
|
+
return /* @__PURE__ */ d(c, { sx: { width: "100%", overflowY: "hidden" }, children: [
|
|
441
|
+
/* @__PURE__ */ d(I, { variant: "subtitle1", gutterBottom: !0, children: [
|
|
472
442
|
"Élément sélectionné: ",
|
|
473
|
-
/* @__PURE__ */
|
|
474
|
-
const
|
|
475
|
-
(S) => S.internalId ===
|
|
443
|
+
/* @__PURE__ */ e("strong", { children: (() => {
|
|
444
|
+
const a = b(u).find(
|
|
445
|
+
(S) => S.internalId === n
|
|
476
446
|
);
|
|
477
|
-
return
|
|
447
|
+
return a ? a.label : "Aucun élément sélectionné";
|
|
478
448
|
})() }),
|
|
479
449
|
" (ID:",
|
|
480
450
|
" ",
|
|
481
|
-
|
|
451
|
+
n,
|
|
482
452
|
")"
|
|
483
453
|
] }),
|
|
484
|
-
/* @__PURE__ */
|
|
485
|
-
|
|
454
|
+
/* @__PURE__ */ e(
|
|
455
|
+
V,
|
|
486
456
|
{
|
|
487
|
-
items:
|
|
488
|
-
onRandomSelect:
|
|
457
|
+
items: u,
|
|
458
|
+
onRandomSelect: r
|
|
489
459
|
}
|
|
490
460
|
),
|
|
491
|
-
/* @__PURE__ */
|
|
492
|
-
/* @__PURE__ */
|
|
493
|
-
/* @__PURE__ */
|
|
494
|
-
/* @__PURE__ */
|
|
495
|
-
|
|
461
|
+
/* @__PURE__ */ d(f, { container: !0, spacing: 3, sx: { overflowY: "hidden" }, children: [
|
|
462
|
+
/* @__PURE__ */ e(f, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ d(v, { sx: { p: 2, overflowY: "hidden" }, children: [
|
|
463
|
+
/* @__PURE__ */ e(I, { variant: "h6", gutterBottom: !0, children: "TreeView" }),
|
|
464
|
+
/* @__PURE__ */ e(
|
|
465
|
+
m,
|
|
496
466
|
{
|
|
497
|
-
items:
|
|
498
|
-
selectedItemId:
|
|
499
|
-
handleSelectedItemChange:
|
|
500
|
-
iconColor: "secondary"
|
|
467
|
+
items: u,
|
|
468
|
+
selectedItemId: n,
|
|
469
|
+
handleSelectedItemChange: i
|
|
501
470
|
}
|
|
502
471
|
)
|
|
503
472
|
] }) }),
|
|
504
|
-
/* @__PURE__ */
|
|
505
|
-
|
|
473
|
+
/* @__PURE__ */ e(f, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ e(
|
|
474
|
+
D,
|
|
506
475
|
{
|
|
507
|
-
items:
|
|
508
|
-
selectedItemId:
|
|
509
|
-
onItemSelect:
|
|
476
|
+
items: u,
|
|
477
|
+
selectedItemId: n,
|
|
478
|
+
onItemSelect: r
|
|
510
479
|
}
|
|
511
480
|
) })
|
|
512
481
|
] })
|
|
513
482
|
] });
|
|
514
483
|
},
|
|
515
484
|
parameters: {
|
|
485
|
+
controls: { disable: !0 },
|
|
486
|
+
actions: { disable: !0 },
|
|
516
487
|
docs: {
|
|
517
488
|
description: {
|
|
518
489
|
story: "Démonstration de la synchronisation entre le TreeView et d'autres composants. Cette story montre comment le TreeView peut être intégré dans une interface complexe où la sélection peut provenir de différentes sources mais reste synchronisée."
|
|
@@ -521,12 +492,11 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
|
|
|
521
492
|
}
|
|
522
493
|
};
|
|
523
494
|
export {
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
j as default
|
|
495
|
+
J as AvecIconesPersonnalisees,
|
|
496
|
+
G as Controlable,
|
|
497
|
+
z as Default,
|
|
498
|
+
K as OptionsDeCouleurs,
|
|
499
|
+
Z as StructureImbriquee,
|
|
500
|
+
Q as Synchronicite,
|
|
501
|
+
$ as default
|
|
532
502
|
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@cgi-learning-hub/ui",
|
|
3
|
-
"version": "1.4.0-dev.
|
|
3
|
+
"version": "1.4.0-dev.1742031230",
|
|
4
4
|
"private": false,
|
|
5
5
|
"author": "CGI Learning-hub Team",
|
|
6
6
|
"description": "@cgi-learning-hub/ui is an open-source React component library that implements UI for HUB's features",
|