@cgi-learning-hub/ui 1.4.0-dev.1741985772 → 1.4.0-dev.1742031677
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})})},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,204 @@ 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
|
-
items: t,
|
|
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
|
+
}
|
|
366
|
+
) });
|
|
402
367
|
},
|
|
403
368
|
parameters: {
|
|
369
|
+
controls: { disable: !0 },
|
|
370
|
+
actions: { disable: !0 },
|
|
404
371
|
docs: {
|
|
405
372
|
description: {
|
|
406
|
-
story: "Exemple d'une structure profondément imbriquée
|
|
373
|
+
story: "Exemple d'une structure profondément imbriquée."
|
|
407
374
|
}
|
|
408
375
|
}
|
|
409
376
|
}
|
|
410
|
-
},
|
|
377
|
+
}, K = {
|
|
411
378
|
render: () => {
|
|
412
|
-
const
|
|
379
|
+
const n = ["primary", "secondary", "info"], [o, i] = p({
|
|
413
380
|
primary: "",
|
|
414
381
|
secondary: "",
|
|
415
382
|
info: ""
|
|
416
383
|
});
|
|
417
|
-
return /* @__PURE__ */
|
|
418
|
-
|
|
384
|
+
return /* @__PURE__ */ e(
|
|
385
|
+
c,
|
|
419
386
|
{
|
|
420
387
|
sx: {
|
|
421
388
|
display: "flex",
|
|
@@ -423,96 +390,99 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
|
|
|
423
390
|
gap: 3,
|
|
424
391
|
overflowY: "hidden"
|
|
425
392
|
},
|
|
426
|
-
children:
|
|
427
|
-
|
|
393
|
+
children: n.map((r) => /* @__PURE__ */ d(
|
|
394
|
+
c,
|
|
428
395
|
{
|
|
429
396
|
sx: {
|
|
430
397
|
maxWidth: 250,
|
|
431
398
|
overflowY: "hidden"
|
|
432
399
|
},
|
|
433
400
|
children: [
|
|
434
|
-
/* @__PURE__ */
|
|
401
|
+
/* @__PURE__ */ d(I, { variant: "subtitle2", gutterBottom: !0, children: [
|
|
435
402
|
"Icônes ",
|
|
436
|
-
|
|
403
|
+
r
|
|
437
404
|
] }),
|
|
438
|
-
/* @__PURE__ */
|
|
439
|
-
|
|
405
|
+
/* @__PURE__ */ e(
|
|
406
|
+
m,
|
|
440
407
|
{
|
|
441
|
-
items:
|
|
442
|
-
selectedItemId: r
|
|
443
|
-
handleSelectedItemChange: (
|
|
444
|
-
|
|
408
|
+
items: h,
|
|
409
|
+
selectedItemId: o[r],
|
|
410
|
+
handleSelectedItemChange: (s, l) => {
|
|
411
|
+
l && i((a) => ({ ...a, [r]: l }));
|
|
445
412
|
},
|
|
446
|
-
iconColor:
|
|
413
|
+
iconColor: r
|
|
447
414
|
}
|
|
448
415
|
)
|
|
449
416
|
]
|
|
450
417
|
},
|
|
451
|
-
|
|
418
|
+
r
|
|
452
419
|
))
|
|
453
420
|
}
|
|
454
421
|
);
|
|
455
422
|
},
|
|
456
423
|
parameters: {
|
|
424
|
+
controls: { disable: !0 },
|
|
425
|
+
actions: { disable: !0 },
|
|
457
426
|
docs: {
|
|
458
427
|
description: {
|
|
459
428
|
story: "Démonstration des principales options de couleurs disponibles pour les icônes."
|
|
460
429
|
}
|
|
461
430
|
}
|
|
462
431
|
}
|
|
463
|
-
},
|
|
432
|
+
}, Q = {
|
|
464
433
|
render: () => {
|
|
465
|
-
const [
|
|
466
|
-
console.log("TreeView sélection:",
|
|
467
|
-
},
|
|
468
|
-
console.log("Sélection externe:",
|
|
434
|
+
const [n, o] = p("reports"), i = (l, a) => {
|
|
435
|
+
console.log("TreeView sélection:", a), a && o(a);
|
|
436
|
+
}, r = (l) => {
|
|
437
|
+
console.log("Sélection externe:", l), o(l);
|
|
469
438
|
};
|
|
470
|
-
return /* @__PURE__ */
|
|
471
|
-
/* @__PURE__ */
|
|
439
|
+
return /* @__PURE__ */ d(c, { sx: { width: "100%", overflowY: "hidden" }, children: [
|
|
440
|
+
/* @__PURE__ */ d(I, { variant: "subtitle1", gutterBottom: !0, children: [
|
|
472
441
|
"Élément sélectionné: ",
|
|
473
|
-
/* @__PURE__ */
|
|
474
|
-
const
|
|
475
|
-
(S) => S.internalId ===
|
|
442
|
+
/* @__PURE__ */ e("strong", { children: (() => {
|
|
443
|
+
const a = b(u).find(
|
|
444
|
+
(S) => S.internalId === n
|
|
476
445
|
);
|
|
477
|
-
return
|
|
446
|
+
return a ? a.label : "Aucun élément sélectionné";
|
|
478
447
|
})() }),
|
|
479
448
|
" (ID:",
|
|
480
449
|
" ",
|
|
481
|
-
|
|
450
|
+
n,
|
|
482
451
|
")"
|
|
483
452
|
] }),
|
|
484
|
-
/* @__PURE__ */
|
|
485
|
-
|
|
453
|
+
/* @__PURE__ */ e(
|
|
454
|
+
V,
|
|
486
455
|
{
|
|
487
|
-
items:
|
|
488
|
-
onRandomSelect:
|
|
456
|
+
items: u,
|
|
457
|
+
onRandomSelect: r
|
|
489
458
|
}
|
|
490
459
|
),
|
|
491
|
-
/* @__PURE__ */
|
|
492
|
-
/* @__PURE__ */
|
|
493
|
-
/* @__PURE__ */
|
|
494
|
-
/* @__PURE__ */
|
|
495
|
-
|
|
460
|
+
/* @__PURE__ */ d(f, { container: !0, spacing: 3, sx: { overflowY: "hidden" }, children: [
|
|
461
|
+
/* @__PURE__ */ e(f, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ d(v, { sx: { p: 2, overflowY: "hidden" }, children: [
|
|
462
|
+
/* @__PURE__ */ e(I, { variant: "h6", gutterBottom: !0, children: "TreeView" }),
|
|
463
|
+
/* @__PURE__ */ e(
|
|
464
|
+
m,
|
|
496
465
|
{
|
|
497
|
-
items:
|
|
498
|
-
selectedItemId:
|
|
499
|
-
handleSelectedItemChange:
|
|
500
|
-
iconColor: "secondary"
|
|
466
|
+
items: u,
|
|
467
|
+
selectedItemId: n,
|
|
468
|
+
handleSelectedItemChange: i
|
|
501
469
|
}
|
|
502
470
|
)
|
|
503
471
|
] }) }),
|
|
504
|
-
/* @__PURE__ */
|
|
505
|
-
|
|
472
|
+
/* @__PURE__ */ e(f, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ e(
|
|
473
|
+
D,
|
|
506
474
|
{
|
|
507
|
-
items:
|
|
508
|
-
selectedItemId:
|
|
509
|
-
onItemSelect:
|
|
475
|
+
items: u,
|
|
476
|
+
selectedItemId: n,
|
|
477
|
+
onItemSelect: r
|
|
510
478
|
}
|
|
511
479
|
) })
|
|
512
480
|
] })
|
|
513
481
|
] });
|
|
514
482
|
},
|
|
515
483
|
parameters: {
|
|
484
|
+
controls: { disable: !0 },
|
|
485
|
+
actions: { disable: !0 },
|
|
516
486
|
docs: {
|
|
517
487
|
description: {
|
|
518
488
|
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 +491,11 @@ type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
|
|
|
521
491
|
}
|
|
522
492
|
};
|
|
523
493
|
export {
|
|
524
|
-
|
|
525
|
-
|
|
526
|
-
|
|
527
|
-
|
|
528
|
-
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
j as default
|
|
494
|
+
J as AvecIconesPersonnalisees,
|
|
495
|
+
G as Controlable,
|
|
496
|
+
z as Default,
|
|
497
|
+
K as OptionsDeCouleurs,
|
|
498
|
+
Z as StructureImbriquee,
|
|
499
|
+
Q as Synchronicite,
|
|
500
|
+
$ as default
|
|
532
501
|
};
|
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.1742031677",
|
|
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",
|