@cgi-learning-hub/ui 1.4.0-dev.1742207843 → 1.4.0-dev.1742214247
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/{Alert-DdpAZix8.js → Alert-BCd1tHk0.js} +9 -9
- package/dist/{Backdrop-BctCVgLy.js → Backdrop-CjDitjBW.js} +20 -19
- package/dist/Backdrop-DOdBqGqq.cjs +1 -0
- package/dist/{Box-DgqaLb7j.js → Box-GMNejc_m.js} +7 -7
- package/dist/{Button-B7kOjNW1.js → Button-x5rtZxJN.js} +6 -6
- package/dist/{ButtonBase-IZ_QjbpE.js → ButtonBase-CU1npQuI.js} +4 -4
- package/dist/{CardContent-F4-KcZH8.js → CardContent-CL_61cm-.js} +3 -3
- package/dist/{Checkbox-qUSjau0g.js → Checkbox-CtRSDqOe.js} +7 -7
- package/dist/{Chip-OpRIs-sL.js → Chip-ZIBpWC4I.js} +6 -6
- package/dist/{CircularProgress-CQxzJquv.js → CircularProgress-B28FKeiH.js} +4 -4
- package/dist/{CloseRounded-BMEGLs8y.js → CloseRounded-pP8asZiP.js} +1 -1
- package/dist/Collapse-Bvxtq7n-.cjs +1 -0
- package/dist/Collapse-CcMCOZ3q.js +334 -0
- package/dist/CustomTreeItem-CG7mGHC9.cjs +3 -0
- package/dist/CustomTreeItem-PTf-e74x.js +1003 -0
- package/dist/DatePicker-64gpvkmk.cjs +13 -0
- package/dist/{DatePicker-fFsWvNFc.js → DatePicker-XdCuICxv.js} +2117 -2535
- package/dist/{DefaultPropsProvider-Cqcb4sws.js → DefaultPropsProvider-CQixa6JQ.js} +7 -7
- package/dist/Delete-BQA9--_t.js +8 -0
- package/dist/Delete-DmeDAs0n.cjs +1 -0
- package/dist/{Dialog-CKS7yjT5.js → Dialog-C-Ptqtq-.js} +9 -9
- package/dist/{Dialog-B1wnk5BT.cjs → Dialog-CgEvhrbZ.cjs} +1 -1
- package/dist/{DialogContent-BzPaz5G8.js → DialogContent-1sjO2rQK.js} +3 -3
- package/dist/{DialogTitle-D3E_lDHD.js → DialogTitle-CGpa_QH9.js} +5 -5
- package/dist/{DialogTitle-mr9xn4JZ.cjs → DialogTitle-F6JD1f_z.cjs} +1 -1
- package/dist/{Divider-D-pZeQTm.js → Divider-CNGfzZqD.js} +8 -8
- package/dist/{FormLabel-3-CC-ZGw.js → FormLabel-BlaPVlwX.js} +67 -76
- package/dist/FormLabel-XpwTqbs8.cjs +2 -0
- package/dist/{Grow-DKgYCxiY.js → Grow-D5UIC41W.js} +14 -13
- package/dist/Grow-wjlsaPJ-.cjs +1 -0
- package/dist/{IconButton-CCNUMz2l.js → IconButton-CFUIddNg.js} +6 -6
- package/dist/{InputAdornment-DL8XIM8r.js → InputAdornment-GcbiriFv.js} +5 -5
- package/dist/{InputBase-By7jMrFP.js → InputBase-DJuF09Rf.js} +7 -7
- package/dist/{Link-C_GPIs0q.js → Link-DtsZ0d_s.js} +7 -7
- package/dist/List-BTPrBGqY.js +130 -0
- package/dist/List-Bo4pzQqG.cjs +1 -0
- package/dist/ListItem-C9OfYRAP.js +423 -0
- package/dist/ListItem-CB4JyjSb.cjs +1 -0
- package/dist/ListItemText-B_hEVsaT.js +928 -0
- package/dist/ListItemText-Bjd08uk4.cjs +1 -0
- package/dist/{Menu-BunOW0ot.js → Menu-DD_bqi6q.js} +306 -428
- package/dist/Menu-XypIRgTl.cjs +7 -0
- package/dist/{MenuItem-Cu3FTLl8.js → MenuItem-Byj-2QQd.js} +72 -77
- package/dist/MenuItem-vb36Ljmd.cjs +1 -0
- package/dist/{Modal-u82Ss4h_.cjs → Modal-BG3hPYyH.cjs} +1 -1
- package/dist/{Modal-DTJd7JJ6.js → Modal-S2P14Nsp.js} +8 -8
- package/dist/{Paper-BiZq6EF2.js → Paper-BrsaeLlu.js} +4 -4
- package/dist/{Popper-DjwR55WH.js → Popper-BNftxeQ5.js} +31 -30
- package/dist/Popper-BaxEpkdE.cjs +4 -0
- package/dist/{Portal-BByeByPq.js → Portal-BLEnzj1v.js} +2 -2
- package/dist/Portal-Bw9XOIah.cjs +1 -0
- package/dist/{Radio-DSRS-tjj.js → Radio-CRTKwNe5.js} +9 -9
- package/dist/{RadioGroup-cPdOWdYD.js → RadioGroup-NjI5PlIb.js} +3 -3
- package/dist/{Select-DZAzJA0y.cjs → Select-8kBUq_SZ.cjs} +1 -1
- package/dist/{Select-CZnKFG3o.js → Select-C0jrZLRg.js} +30 -30
- package/dist/{Stack-hbAJHQhq.js → Stack-Bm7M81n8.js} +22 -22
- package/dist/{Switch-B9uT9-d0.js → Switch-D5FnE7HW.js} +6 -6
- package/dist/{SwitchBase-CDkmnGAP.js → SwitchBase-91Mand9t.js} +5 -5
- package/dist/{Tabs-BYfDlOR9.js → Tabs-C5VIdTSp.js} +25 -24
- package/dist/Tabs-Csp29aqN.cjs +4 -0
- package/dist/{TextField-CwcPgdgD.cjs → TextField-BzqflYRV.cjs} +1 -1
- package/dist/{TextField-BKfXjPdH.js → TextField-D5jS5WjF.js} +8 -8
- package/dist/ToggleButtonGroup-Bpi3kmko.cjs +140 -0
- package/dist/{ToggleButtonGroup-B1yghh29.js → ToggleButtonGroup-CipWZLXf.js} +2641 -3875
- package/dist/Tooltip-DJmbLjU6.cjs +4 -0
- package/dist/{Tooltip-B1NGvrJP.js → Tooltip-DgTrUaHJ.js} +10 -10
- package/dist/{Typography-SIQ6eleU.js → Typography-Ct2Sc9KM.js} +5 -5
- package/dist/{capitalize-3KLkrEtk.js → capitalize-BJ0FEsU7.js} +1 -1
- package/dist/components/Alert/Alert.es.js +1 -1
- package/dist/components/Alert/index.es.js +1 -1
- package/dist/components/Button/Button.es.js +2 -2
- package/dist/components/DatePicker/DatePicker.cjs.js +1 -1
- package/dist/components/DatePicker/DatePicker.es.js +1 -1
- package/dist/components/DatePicker/index.cjs.js +1 -1
- package/dist/components/DatePicker/index.es.js +1 -1
- package/dist/components/Dialog/Dialog.cjs.js +1 -1
- package/dist/components/Dialog/Dialog.es.js +2 -2
- package/dist/components/Dropzone/Dropzone.es.js +4 -4
- package/dist/components/EmptyState/EmptyState.es.js +3 -3
- package/dist/components/FileList/FileIcon.es.js +1 -1
- package/dist/components/FileList/FileListItem.es.js +4 -4
- package/dist/components/Heading/Heading.es.js +2 -2
- package/dist/components/ImagePicker/ImagePicker.cjs.js +1 -1
- package/dist/components/ImagePicker/ImagePicker.es.js +45 -46
- package/dist/components/Loader/Loader.es.js +1 -1
- package/dist/components/LoaderBackdrop/LoaderBackdrop.cjs.js +1 -1
- package/dist/components/LoaderBackdrop/LoaderBackdrop.es.js +2 -2
- package/dist/components/PasswordInput/PasswordInput.cjs.js +1 -1
- package/dist/components/PasswordInput/PasswordInput.es.js +4 -4
- package/dist/components/ResourceCard/ResourceCard.cjs.js +1 -1
- package/dist/components/ResourceCard/ResourceCard.es.js +18 -16
- package/dist/components/SearchInput/SearchInput.es.js +4 -4
- package/dist/components/TreeView/TreeView.cjs.js +7 -0
- package/dist/components/TreeView/TreeView.d.ts +4 -0
- package/dist/components/TreeView/TreeView.es.js +1892 -0
- package/dist/components/TreeView/components/CustomTreeItem.cjs.js +1 -0
- package/dist/components/TreeView/components/CustomTreeItem.d.ts +6 -0
- package/dist/components/TreeView/components/CustomTreeItem.es.js +8 -0
- package/dist/components/TreeView/index.cjs.js +1 -0
- package/dist/components/TreeView/index.d.ts +2 -0
- package/dist/components/TreeView/index.es.js +6 -0
- package/dist/components/TreeView/style.cjs.js +1 -0
- package/dist/components/TreeView/style.d.ts +12 -0
- package/dist/components/TreeView/style.es.js +24 -0
- package/dist/components/TreeView/types.cjs.js +1 -0
- package/dist/components/TreeView/types.d.ts +37 -0
- package/dist/components/TreeView/types.es.js +4 -0
- package/dist/components/TreeView/utils.cjs.js +1 -0
- package/dist/components/TreeView/utils.d.ts +6 -0
- package/dist/components/TreeView/utils.es.js +51 -0
- package/dist/components/index.cjs.js +1 -1
- package/dist/components/index.d.ts +0 -1
- package/dist/components/index.es.js +302 -299
- package/dist/components/stories/Alert.stories.es.js +1 -1
- package/dist/components/stories/Button.stories.es.js +1 -1
- package/dist/components/stories/Card.stories.es.js +2 -2
- package/dist/components/stories/Checkbox.stories.es.js +1 -1
- package/dist/components/stories/Chip.stories.es.js +1 -1
- package/dist/components/stories/DatePicker.stories.cjs.js +1 -1
- package/dist/components/stories/DatePicker.stories.es.js +1 -1
- package/dist/components/stories/Dialog.stories.cjs.js +1 -1
- package/dist/components/stories/Dialog.stories.es.js +2 -2
- package/dist/components/stories/Divider.stories.es.js +1 -1
- package/dist/components/stories/FormControlLabel.stories.es.js +3 -3
- package/dist/components/stories/Heading.stories.es.js +2 -2
- package/dist/components/stories/IconButton.stories.es.js +2 -2
- package/dist/components/stories/Link.stories.es.js +1 -1
- package/dist/components/stories/Menu.stories.cjs.js +1 -1
- package/dist/components/stories/Menu.stories.es.js +2 -2
- package/dist/components/stories/Paper.stories.es.js +1 -1
- package/dist/components/stories/RadioGroup.stories.cjs.js +1 -1
- package/dist/components/stories/RadioGroup.stories.es.js +3 -3
- package/dist/components/stories/ResourceCard.stories.es.js +1 -1
- package/dist/components/stories/Select.stories.cjs.js +1 -1
- package/dist/components/stories/Select.stories.es.js +3 -3
- package/dist/components/stories/TabList.stories.cjs.js +1 -1
- package/dist/components/stories/TabList.stories.es.js +4 -4
- package/dist/components/stories/TextField.stories.cjs.js +1 -1
- package/dist/components/stories/TextField.stories.es.js +1 -1
- package/dist/components/stories/Tooltip.stories.cjs.js +1 -1
- package/dist/components/stories/Tooltip.stories.es.js +2 -2
- package/dist/components/stories/TreeView.stories.cjs.js +63 -0
- package/dist/components/stories/TreeView.stories.d.ts +12 -0
- package/dist/components/stories/TreeView.stories.es.js +663 -0
- package/dist/components/stories/Typography.stories.es.js +1 -1
- package/dist/{createSvgIcon-K2ZAdASa.js → createSvgIcon-B62eln-G.js} +6 -6
- package/dist/{dividerClasses-afsB3Yy1.js → dividerClasses-DjJZQ2Lt.js} +1 -1
- package/dist/{elementTypeAcceptingRef-5ESWTE79.js → elementTypeAcceptingRef-B04tk6ag.js} +1 -1
- package/dist/{extendSxProp-dlShX1xL.js → extendSxProp-CgS-3O19.js} +1 -1
- package/dist/{generateUtilityClasses-DotvgSDH.js → generateUtilityClasses-EXBFO7eY.js} +9 -9
- package/dist/getReactElementRef-CTRMtaOQ.cjs +1 -0
- package/dist/getReactElementRef-DjLvttrJ.js +31 -0
- package/dist/{index-DTTmpNYg.js → index-BZ7ldAwE.js} +4 -4
- package/dist/index-Cr54V0sz.cjs +1 -0
- package/dist/index-D_xl88AE.js +22 -0
- package/dist/{index-B1u7G33_.js → index-DcwdJ8a_.js} +1 -1
- package/dist/index.cjs.js +1 -1
- package/dist/index.es.js +302 -299
- package/dist/isMuiElement-BzDAj3yJ.cjs +1 -0
- package/dist/isMuiElement-DnSE4qG4.js +13 -0
- package/dist/listItemTextClasses-BCuJjsDp.cjs +1 -0
- package/dist/listItemTextClasses-Kxu3VILo.js +9 -0
- package/dist/{memoTheme-CqmIydD-.js → memoTheme-DJWQ754x.js} +1 -1
- package/dist/{refType-C210ipRY.js → refType-Bpj8bod6.js} +1 -1
- package/dist/{resolveComponentProps-CPmhKPdH.js → resolveComponentProps-CIdMNno4.js} +1 -1
- package/dist/{useSlot-GZu0V5wJ.js → useSlot-RbAtahZu.js} +1 -1
- package/dist/useSlotProps-BTRhbYwP.cjs +1 -0
- package/dist/useSlotProps-U2Iu6E0j.js +25 -0
- package/dist/{useTheme-tdgDVH1p.js → useTheme-CUKf8NYA.js} +1 -1
- package/dist/useTheme-Czi7oO55.js +11 -0
- package/dist/{useThemeProps-BQlPXzo3.js → useThemeProps-Bxjrhw9q.js} +2 -2
- package/dist/useThemeProps-v-SfXuGn.js +17 -0
- package/dist/{utils-CXhh35wP.js → utils-B2jSugkj.js} +76 -104
- package/dist/utils-lBmb5bp_.cjs +1 -0
- package/dist/warning-C8W811fV.js +11 -0
- package/dist/warning-DMUNDgRg.cjs +2 -0
- package/package.json +2 -1
- package/dist/Backdrop-DWp3AktL.cjs +0 -1
- package/dist/DatePicker-DrLKgvkx.cjs +0 -14
- package/dist/FormLabel-BV7-a0i5.cjs +0 -2
- package/dist/Grow-Z3KzFaK5.cjs +0 -1
- package/dist/Menu-Cngt8Va9.cjs +0 -7
- package/dist/MenuItem-Bha8aBMr.cjs +0 -1
- package/dist/MoreVert-CrM_1EkN.js +0 -8
- package/dist/MoreVert-CxgmXooO.cjs +0 -1
- package/dist/Popper-BVYscbsI.cjs +0 -4
- package/dist/Portal-DUHpWdY1.cjs +0 -1
- package/dist/Tabs-AyJ_tKtV.cjs +0 -4
- package/dist/ToggleButtonGroup-NqurNgWT.cjs +0 -140
- package/dist/Tooltip-oNmnF7Bc.cjs +0 -4
- package/dist/components/FolderCard/FolderCard.cjs.js +0 -1
- package/dist/components/FolderCard/FolderCard.d.ts +0 -10
- package/dist/components/FolderCard/FolderCard.es.js +0 -80
- package/dist/components/FolderCard/index.cjs.js +0 -1
- package/dist/components/FolderCard/index.d.ts +0 -2
- package/dist/components/FolderCard/index.es.js +0 -4
- package/dist/components/FolderCard/styles.cjs.js +0 -1
- package/dist/components/FolderCard/styles.d.ts +0 -10
- package/dist/components/FolderCard/styles.es.js +0 -13
- package/dist/components/FolderCard/types.cjs.js +0 -1
- package/dist/components/FolderCard/types.d.ts +0 -11
- package/dist/components/FolderCard/types.es.js +0 -14
- package/dist/components/stories/FolderCard.stories.cjs.js +0 -1
- package/dist/components/stories/FolderCard.stories.d.ts +0 -7
- package/dist/components/stories/FolderCard.stories.es.js +0 -71
- package/dist/useSlotProps-C9tsxDNg.js +0 -45
- package/dist/useSlotProps-CvOxvhyy.cjs +0 -1
- package/dist/useTheme-BA7tMglY.js +0 -11
- package/dist/useThemeProps-BTfGtNci.js +0 -17
- package/dist/utils-CFI_-FMV.cjs +0 -1
|
@@ -0,0 +1,663 @@
|
|
|
1
|
+
import { jsx as e, jsxs as s } from "react/jsx-runtime";
|
|
2
|
+
import { c as x } from "../../createSvgIcon-B62eln-G.js";
|
|
3
|
+
import { useState as p, useCallback as R } from "react";
|
|
4
|
+
import I from "../TreeView/TreeView.es.js";
|
|
5
|
+
import { ICON_TYPE as r } from "../TreeView/types.es.js";
|
|
6
|
+
import { B as a } from "../../Box-GMNejc_m.js";
|
|
7
|
+
import { T as c } from "../../Typography-Ct2Sc9KM.js";
|
|
8
|
+
import { G as h, L as V, a as F } from "../../ListItemText-B_hEVsaT.js";
|
|
9
|
+
import { P as T } from "../../Paper-BrsaeLlu.js";
|
|
10
|
+
import { B as k } from "../../Button-x5rtZxJN.js";
|
|
11
|
+
import { D as q } from "../../Divider-CNGfzZqD.js";
|
|
12
|
+
import { L as H } from "../../List-BTPrBGqY.js";
|
|
13
|
+
import { L as A } from "../../ListItem-C9OfYRAP.js";
|
|
14
|
+
const O = x(/* @__PURE__ */ e("path", {
|
|
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"), P = x(/* @__PURE__ */ e("path", {
|
|
17
|
+
d: "M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8zm2 16H8v-2h8zm0-4H8v-2h8zm-3-5V3.5L18.5 9z"
|
|
18
|
+
}), "Description"), B = x(/* @__PURE__ */ e("path", {
|
|
19
|
+
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"
|
|
20
|
+
}), "Person"), re = {
|
|
21
|
+
title: "Components/TreeView",
|
|
22
|
+
component: I,
|
|
23
|
+
argTypes: {
|
|
24
|
+
items: {
|
|
25
|
+
description: "**[Requis]** Liste des éléments à afficher dans le TreeView.",
|
|
26
|
+
control: "object",
|
|
27
|
+
table: {
|
|
28
|
+
required: !0,
|
|
29
|
+
type: { summary: "CustomTreeViewItem[]" }
|
|
30
|
+
}
|
|
31
|
+
},
|
|
32
|
+
selectedItemId: {
|
|
33
|
+
description: "**[Requis]** Identifiant de l'élément sélectionné.",
|
|
34
|
+
control: "text",
|
|
35
|
+
table: {
|
|
36
|
+
required: !0,
|
|
37
|
+
type: { summary: "string" }
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
handleSelectedItemChange: {
|
|
41
|
+
description: "**[Requis]** Fonction appelée lorsqu'un élément est sélectionné.",
|
|
42
|
+
table: {
|
|
43
|
+
required: !0,
|
|
44
|
+
type: {
|
|
45
|
+
summary: "(event: React.SyntheticEvent, itemIds: string | null) => void"
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
},
|
|
49
|
+
iconColor: {
|
|
50
|
+
description: "**[Optionnel]** Couleur des icônes.",
|
|
51
|
+
control: "select",
|
|
52
|
+
options: ["primary", "secondary", "success", "error", "info", "warning"],
|
|
53
|
+
defaultValue: "primary",
|
|
54
|
+
table: {
|
|
55
|
+
required: !1,
|
|
56
|
+
type: { summary: "string" },
|
|
57
|
+
defaultValue: { summary: "primary" }
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
parameters: {
|
|
62
|
+
docs: {
|
|
63
|
+
description: {
|
|
64
|
+
component: `
|
|
65
|
+
## TreeView
|
|
66
|
+
|
|
67
|
+
Un composant pour afficher des données hiérarchiques sous forme d'arborescence.
|
|
68
|
+
|
|
69
|
+
### Utilisation des icônes
|
|
70
|
+
|
|
71
|
+
Le TreeView permet de personnaliser les icônes selon les types suivants:
|
|
72
|
+
- \`ICON_TYPE.FOLDER\`: Icône de dossier (défaut)
|
|
73
|
+
- \`ICON_TYPE.SHARE\`: Icône de partage
|
|
74
|
+
- \`ICON_TYPE.TRASH\`: Icône de corbeille
|
|
75
|
+
- \`ICON_TYPE.CUSTOM\`: Icône personnalisée (nécessite de définir \`customIcon\`)
|
|
76
|
+
|
|
77
|
+
Vous pouvez également passer directement un composant SvgIcon comme valeur de \`iconType\`.
|
|
78
|
+
|
|
79
|
+
### Navigation et sélection
|
|
80
|
+
|
|
81
|
+
- \`handleSelectedItemChange\`: Permet de réagir quand un utilisateur clique sur un élément
|
|
82
|
+
- \`selectedItemId\`: Permet de définir l'élément sélectionné
|
|
83
|
+
|
|
84
|
+
### Gestion du Drag and Drop
|
|
85
|
+
|
|
86
|
+
Le TreeView inclut des attributs \`data-\` qui vous permettent d'identifier facilement les éléments lors d'opérations de glisser-déposer :
|
|
87
|
+
- \`data-treeview-root="true"\` : Identifie la racine du TreeView
|
|
88
|
+
- \`data-treeview-item="itemId"\` : Contient l'ID de l'élément
|
|
89
|
+
- \`data-treeview-item-label="label"\` : Contient le libellé de l'élément
|
|
90
|
+
|
|
91
|
+
Pour gérer le drop, ajoutez des gestionnaires d'événements au niveau du conteneur parent et utilisez \`event.target.closest('[data-treeview-item]')\` pour identifier l'élément cible.
|
|
92
|
+
|
|
93
|
+
### Structure des données
|
|
94
|
+
|
|
95
|
+
Le composant attend un tableau d'objets \`CustomTreeViewItem\` qui étend l'interface \`TreeViewBaseItem\` de MUI:
|
|
96
|
+
|
|
97
|
+
\`\`\`typescript
|
|
98
|
+
interface CustomTreeViewItemProps {
|
|
99
|
+
internalId: string; // Identifiant unique de l'élément (obligatoire)
|
|
100
|
+
label: string; // Libellé à afficher (obligatoire)
|
|
101
|
+
iconType?: IconType; // Type d'icône (facultatif)
|
|
102
|
+
customIcon?: SvgIconComponent; // Icône personnalisée si iconType est CUSTOM (facultatif)
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
type CustomTreeViewItem = TreeViewBaseItem<CustomTreeViewItemProps>;
|
|
106
|
+
\`\`\`
|
|
107
|
+
`
|
|
108
|
+
}
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
}, C = (n) => {
|
|
112
|
+
const i = [], l = (o) => {
|
|
113
|
+
i.push(o), o.children && o.children.forEach(
|
|
114
|
+
(t) => l(t)
|
|
115
|
+
);
|
|
116
|
+
};
|
|
117
|
+
return n.forEach((o) => l(o)), i;
|
|
118
|
+
}, Y = ({
|
|
119
|
+
items: n,
|
|
120
|
+
selectedItemId: i,
|
|
121
|
+
onItemSelect: l
|
|
122
|
+
}) => {
|
|
123
|
+
const o = C(n);
|
|
124
|
+
return /* @__PURE__ */ s(T, { sx: { width: "100%", maxHeight: 300, overflow: "auto" }, children: [
|
|
125
|
+
/* @__PURE__ */ e(c, { variant: "h6", sx: { p: 2 }, children: "Sélection externe" }),
|
|
126
|
+
/* @__PURE__ */ e(q, {}),
|
|
127
|
+
/* @__PURE__ */ e(H, { children: o.map((t) => /* @__PURE__ */ e(A, { disablePadding: !0, children: /* @__PURE__ */ e(
|
|
128
|
+
V,
|
|
129
|
+
{
|
|
130
|
+
selected: i === t.internalId,
|
|
131
|
+
onClick: () => l(t.internalId),
|
|
132
|
+
children: /* @__PURE__ */ e(F, { primary: t.label })
|
|
133
|
+
}
|
|
134
|
+
) }, t.internalId)) })
|
|
135
|
+
] });
|
|
136
|
+
}, z = ({
|
|
137
|
+
items: n,
|
|
138
|
+
onRandomSelect: i
|
|
139
|
+
}) => {
|
|
140
|
+
const l = C(n);
|
|
141
|
+
return /* @__PURE__ */ e(a, { sx: { mt: 2, mb: 2 }, children: /* @__PURE__ */ e(k, { variant: "contained", color: "primary", onClick: () => {
|
|
142
|
+
const t = Math.floor(Math.random() * l.length);
|
|
143
|
+
i(l[t].internalId);
|
|
144
|
+
}, children: "Sélection aléatoire" }) });
|
|
145
|
+
}, M = ({ id: n, label: i }) => /* @__PURE__ */ e(
|
|
146
|
+
a,
|
|
147
|
+
{
|
|
148
|
+
draggable: !0,
|
|
149
|
+
onDragStart: (l) => {
|
|
150
|
+
l.dataTransfer.setData(
|
|
151
|
+
"application/json",
|
|
152
|
+
JSON.stringify({ id: n, label: i })
|
|
153
|
+
);
|
|
154
|
+
},
|
|
155
|
+
sx: {
|
|
156
|
+
padding: 1,
|
|
157
|
+
margin: 1,
|
|
158
|
+
backgroundColor: "grey.100",
|
|
159
|
+
borderRadius: 1,
|
|
160
|
+
display: "inline-block",
|
|
161
|
+
cursor: "grab",
|
|
162
|
+
"&:hover": {
|
|
163
|
+
backgroundColor: "grey.200"
|
|
164
|
+
}
|
|
165
|
+
},
|
|
166
|
+
children: /* @__PURE__ */ s(c, { variant: "body2", display: "flex", alignItems: "center", children: [
|
|
167
|
+
/* @__PURE__ */ e(P, { fontSize: "small", sx: { mr: 1 } }),
|
|
168
|
+
i
|
|
169
|
+
] })
|
|
170
|
+
}
|
|
171
|
+
), g = [
|
|
172
|
+
{
|
|
173
|
+
internalId: "documents",
|
|
174
|
+
label: "Mes formulaires",
|
|
175
|
+
iconType: r.FOLDER,
|
|
176
|
+
children: [
|
|
177
|
+
{
|
|
178
|
+
internalId: "folder1",
|
|
179
|
+
label: "Premier dossier",
|
|
180
|
+
iconType: r.FOLDER,
|
|
181
|
+
children: [
|
|
182
|
+
{
|
|
183
|
+
internalId: "subfolder1",
|
|
184
|
+
label: "Sous-dossier 1",
|
|
185
|
+
iconType: r.FOLDER
|
|
186
|
+
},
|
|
187
|
+
{
|
|
188
|
+
internalId: "subfolder2",
|
|
189
|
+
label: "Sous-dossier 2",
|
|
190
|
+
iconType: r.FOLDER
|
|
191
|
+
}
|
|
192
|
+
]
|
|
193
|
+
},
|
|
194
|
+
{
|
|
195
|
+
internalId: "folder2",
|
|
196
|
+
label: "Deuxième dossier",
|
|
197
|
+
iconType: r.FOLDER
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
internalId: "folder3",
|
|
201
|
+
label: "Troisième dossier",
|
|
202
|
+
iconType: r.FOLDER
|
|
203
|
+
}
|
|
204
|
+
]
|
|
205
|
+
},
|
|
206
|
+
{
|
|
207
|
+
internalId: "shared",
|
|
208
|
+
label: "Formulaires partagés avec moi",
|
|
209
|
+
iconType: r.SHARE
|
|
210
|
+
},
|
|
211
|
+
{
|
|
212
|
+
internalId: "trash",
|
|
213
|
+
label: "Corbeille",
|
|
214
|
+
iconType: r.TRASH
|
|
215
|
+
}
|
|
216
|
+
], N = [
|
|
217
|
+
{
|
|
218
|
+
internalId: "bookmarks",
|
|
219
|
+
label: "Favoris",
|
|
220
|
+
iconType: O,
|
|
221
|
+
children: [
|
|
222
|
+
{
|
|
223
|
+
internalId: "important",
|
|
224
|
+
label: "Important",
|
|
225
|
+
iconType: r.CUSTOM,
|
|
226
|
+
customIcon: B
|
|
227
|
+
}
|
|
228
|
+
]
|
|
229
|
+
},
|
|
230
|
+
...g
|
|
231
|
+
], y = [
|
|
232
|
+
{
|
|
233
|
+
internalId: "documents",
|
|
234
|
+
label: "Documents",
|
|
235
|
+
iconType: r.SHARE,
|
|
236
|
+
children: [
|
|
237
|
+
{
|
|
238
|
+
internalId: "reports",
|
|
239
|
+
label: "Rapports",
|
|
240
|
+
iconType: r.FOLDER,
|
|
241
|
+
children: [
|
|
242
|
+
{
|
|
243
|
+
internalId: "report1",
|
|
244
|
+
label: "Rapport Janvier",
|
|
245
|
+
iconType: r.FOLDER
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
internalId: "report2",
|
|
249
|
+
label: "Rapport Février",
|
|
250
|
+
iconType: r.FOLDER
|
|
251
|
+
},
|
|
252
|
+
{
|
|
253
|
+
internalId: "report3",
|
|
254
|
+
label: "Rapport Mars",
|
|
255
|
+
iconType: r.FOLDER
|
|
256
|
+
}
|
|
257
|
+
]
|
|
258
|
+
},
|
|
259
|
+
{ internalId: "invoices", label: "Factures", iconType: r.FOLDER }
|
|
260
|
+
]
|
|
261
|
+
},
|
|
262
|
+
{
|
|
263
|
+
internalId: "media",
|
|
264
|
+
label: "Médias",
|
|
265
|
+
iconType: r.FOLDER,
|
|
266
|
+
children: [
|
|
267
|
+
{ internalId: "images", label: "Images", iconType: r.FOLDER },
|
|
268
|
+
{ internalId: "videos", label: "Vidéos", iconType: r.FOLDER }
|
|
269
|
+
]
|
|
270
|
+
},
|
|
271
|
+
{
|
|
272
|
+
internalId: "downloads",
|
|
273
|
+
label: "Téléchargements",
|
|
274
|
+
iconType: r.FOLDER
|
|
275
|
+
}
|
|
276
|
+
], ne = {
|
|
277
|
+
render: () => {
|
|
278
|
+
const [n, i] = p(""), l = R(
|
|
279
|
+
(o, t) => {
|
|
280
|
+
console.log(`Élément sélectionné: ${t}`), t && i(t);
|
|
281
|
+
},
|
|
282
|
+
[]
|
|
283
|
+
);
|
|
284
|
+
return /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
|
|
285
|
+
I,
|
|
286
|
+
{
|
|
287
|
+
items: g,
|
|
288
|
+
selectedItemId: n,
|
|
289
|
+
handleSelectedItemChange: l
|
|
290
|
+
}
|
|
291
|
+
) });
|
|
292
|
+
},
|
|
293
|
+
parameters: {
|
|
294
|
+
controls: { disable: !0 },
|
|
295
|
+
actions: { disable: !0 },
|
|
296
|
+
docs: {
|
|
297
|
+
description: {
|
|
298
|
+
story: "Exemple de base avec des icônes standard et démonstration de sélection."
|
|
299
|
+
}
|
|
300
|
+
}
|
|
301
|
+
}
|
|
302
|
+
}, oe = {
|
|
303
|
+
args: {
|
|
304
|
+
items: g,
|
|
305
|
+
selectedItemId: "folder1",
|
|
306
|
+
handleSelectedItemChange: (n, i) => {
|
|
307
|
+
console.log(`Élément sélectionné: ${i}`);
|
|
308
|
+
},
|
|
309
|
+
iconColor: "success"
|
|
310
|
+
},
|
|
311
|
+
render: (n) => /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(I, { ...n }) }),
|
|
312
|
+
parameters: {
|
|
313
|
+
docs: {
|
|
314
|
+
description: {
|
|
315
|
+
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."
|
|
316
|
+
}
|
|
317
|
+
}
|
|
318
|
+
}
|
|
319
|
+
}, ie = {
|
|
320
|
+
render: () => {
|
|
321
|
+
const [n, i] = p("bookmarks"), l = R(
|
|
322
|
+
(o, t) => {
|
|
323
|
+
console.log(`Élément sélectionné: ${t}`), t && i(t);
|
|
324
|
+
},
|
|
325
|
+
[]
|
|
326
|
+
);
|
|
327
|
+
return /* @__PURE__ */ e(a, { sx: { maxWidth: 300, overflowY: "hidden" }, children: /* @__PURE__ */ e(
|
|
328
|
+
I,
|
|
329
|
+
{
|
|
330
|
+
items: N,
|
|
331
|
+
selectedItemId: n,
|
|
332
|
+
handleSelectedItemChange: l
|
|
333
|
+
}
|
|
334
|
+
) });
|
|
335
|
+
},
|
|
336
|
+
parameters: {
|
|
337
|
+
controls: { disable: !0 },
|
|
338
|
+
actions: { disable: !0 },
|
|
339
|
+
docs: {
|
|
340
|
+
description: {
|
|
341
|
+
story: "Exemple utilisant à la fois des icônes prédéfinies et des icônes personnalisées."
|
|
342
|
+
}
|
|
343
|
+
}
|
|
344
|
+
}
|
|
345
|
+
}, le = {
|
|
346
|
+
render: () => {
|
|
347
|
+
const n = [
|
|
348
|
+
{
|
|
349
|
+
internalId: "root",
|
|
350
|
+
label: "Structure imbriquée complexe",
|
|
351
|
+
iconType: r.FOLDER,
|
|
352
|
+
children: [
|
|
353
|
+
{
|
|
354
|
+
internalId: "level1-1",
|
|
355
|
+
label: "Niveau 1.1",
|
|
356
|
+
iconType: r.FOLDER,
|
|
357
|
+
children: [
|
|
358
|
+
{
|
|
359
|
+
internalId: "level2-1",
|
|
360
|
+
label: "Niveau 2.1",
|
|
361
|
+
iconType: r.FOLDER,
|
|
362
|
+
children: [
|
|
363
|
+
{
|
|
364
|
+
internalId: "level3-1V",
|
|
365
|
+
label: "VOUS M'AVEZ TROUVÉ HIHIHI",
|
|
366
|
+
iconType: r.FOLDER
|
|
367
|
+
},
|
|
368
|
+
{
|
|
369
|
+
internalId: "level3-2",
|
|
370
|
+
label: "Niveau 3.2",
|
|
371
|
+
iconType: r.SHARE
|
|
372
|
+
}
|
|
373
|
+
]
|
|
374
|
+
},
|
|
375
|
+
{
|
|
376
|
+
internalId: "level2-2",
|
|
377
|
+
label: "Niveau 2.2",
|
|
378
|
+
iconType: r.TRASH
|
|
379
|
+
}
|
|
380
|
+
]
|
|
381
|
+
},
|
|
382
|
+
{
|
|
383
|
+
internalId: "level1-2",
|
|
384
|
+
label: "Niveau 1.2",
|
|
385
|
+
iconType: r.CUSTOM,
|
|
386
|
+
customIcon: O
|
|
387
|
+
}
|
|
388
|
+
]
|
|
389
|
+
}
|
|
390
|
+
], [i, l] = p("level2-1"), o = R(
|
|
391
|
+
(t, d) => {
|
|
392
|
+
console.log(`Élément sélectionné: ${d}`), d && l(d);
|
|
393
|
+
},
|
|
394
|
+
[]
|
|
395
|
+
);
|
|
396
|
+
return /* @__PURE__ */ e(a, { sx: { maxWidth: 400, overflowY: "hidden" }, children: /* @__PURE__ */ e(
|
|
397
|
+
I,
|
|
398
|
+
{
|
|
399
|
+
items: n,
|
|
400
|
+
selectedItemId: i,
|
|
401
|
+
handleSelectedItemChange: o
|
|
402
|
+
}
|
|
403
|
+
) });
|
|
404
|
+
},
|
|
405
|
+
parameters: {
|
|
406
|
+
controls: { disable: !0 },
|
|
407
|
+
actions: { disable: !0 },
|
|
408
|
+
docs: {
|
|
409
|
+
description: {
|
|
410
|
+
story: "Exemple d'une structure profondément imbriquée."
|
|
411
|
+
}
|
|
412
|
+
}
|
|
413
|
+
}
|
|
414
|
+
}, se = {
|
|
415
|
+
render: () => {
|
|
416
|
+
const n = ["primary", "secondary", "info"], [i, l] = p({
|
|
417
|
+
primary: "",
|
|
418
|
+
secondary: "",
|
|
419
|
+
info: ""
|
|
420
|
+
});
|
|
421
|
+
return /* @__PURE__ */ e(
|
|
422
|
+
a,
|
|
423
|
+
{
|
|
424
|
+
sx: {
|
|
425
|
+
display: "flex",
|
|
426
|
+
flexDirection: "row",
|
|
427
|
+
gap: 3,
|
|
428
|
+
overflowY: "hidden"
|
|
429
|
+
},
|
|
430
|
+
children: n.map((o) => /* @__PURE__ */ s(
|
|
431
|
+
a,
|
|
432
|
+
{
|
|
433
|
+
sx: {
|
|
434
|
+
maxWidth: 250,
|
|
435
|
+
overflowY: "hidden"
|
|
436
|
+
},
|
|
437
|
+
children: [
|
|
438
|
+
/* @__PURE__ */ s(c, { variant: "subtitle2", gutterBottom: !0, children: [
|
|
439
|
+
"Icônes ",
|
|
440
|
+
o
|
|
441
|
+
] }),
|
|
442
|
+
/* @__PURE__ */ e(
|
|
443
|
+
I,
|
|
444
|
+
{
|
|
445
|
+
items: g,
|
|
446
|
+
selectedItemId: i[o],
|
|
447
|
+
handleSelectedItemChange: (t, d) => {
|
|
448
|
+
d && l((m) => ({ ...m, [o]: d }));
|
|
449
|
+
},
|
|
450
|
+
iconColor: o
|
|
451
|
+
}
|
|
452
|
+
)
|
|
453
|
+
]
|
|
454
|
+
},
|
|
455
|
+
o
|
|
456
|
+
))
|
|
457
|
+
}
|
|
458
|
+
);
|
|
459
|
+
},
|
|
460
|
+
parameters: {
|
|
461
|
+
controls: { disable: !0 },
|
|
462
|
+
actions: { disable: !0 },
|
|
463
|
+
docs: {
|
|
464
|
+
description: {
|
|
465
|
+
story: "Démonstration des principales options de couleurs disponibles pour les icônes."
|
|
466
|
+
}
|
|
467
|
+
}
|
|
468
|
+
}
|
|
469
|
+
}, ae = {
|
|
470
|
+
render: () => {
|
|
471
|
+
const [n, i] = p("reports"), l = (d, m) => {
|
|
472
|
+
console.log("TreeView sélection:", m), m && i(m);
|
|
473
|
+
}, o = (d) => {
|
|
474
|
+
console.log("Sélection externe:", d), i(d);
|
|
475
|
+
};
|
|
476
|
+
return /* @__PURE__ */ s(a, { sx: { width: "100%", overflowY: "hidden" }, children: [
|
|
477
|
+
/* @__PURE__ */ s(c, { variant: "subtitle1", gutterBottom: !0, children: [
|
|
478
|
+
"Élément sélectionné: ",
|
|
479
|
+
/* @__PURE__ */ e("strong", { children: (() => {
|
|
480
|
+
const m = C(y).find(
|
|
481
|
+
(w) => w.internalId === n
|
|
482
|
+
);
|
|
483
|
+
return m ? m.label : "Aucun élément sélectionné";
|
|
484
|
+
})() }),
|
|
485
|
+
" (ID:",
|
|
486
|
+
" ",
|
|
487
|
+
n,
|
|
488
|
+
")"
|
|
489
|
+
] }),
|
|
490
|
+
/* @__PURE__ */ e(
|
|
491
|
+
z,
|
|
492
|
+
{
|
|
493
|
+
items: y,
|
|
494
|
+
onRandomSelect: o
|
|
495
|
+
}
|
|
496
|
+
),
|
|
497
|
+
/* @__PURE__ */ s(h, { container: !0, spacing: 3, sx: { overflowY: "hidden" }, children: [
|
|
498
|
+
/* @__PURE__ */ e(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ s(T, { sx: { p: 2, overflowY: "hidden" }, children: [
|
|
499
|
+
/* @__PURE__ */ e(c, { variant: "h6", gutterBottom: !0, children: "TreeView" }),
|
|
500
|
+
/* @__PURE__ */ e(
|
|
501
|
+
I,
|
|
502
|
+
{
|
|
503
|
+
items: y,
|
|
504
|
+
selectedItemId: n,
|
|
505
|
+
handleSelectedItemChange: l
|
|
506
|
+
}
|
|
507
|
+
)
|
|
508
|
+
] }) }),
|
|
509
|
+
/* @__PURE__ */ e(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ e(
|
|
510
|
+
Y,
|
|
511
|
+
{
|
|
512
|
+
items: y,
|
|
513
|
+
selectedItemId: n,
|
|
514
|
+
onItemSelect: o
|
|
515
|
+
}
|
|
516
|
+
) })
|
|
517
|
+
] })
|
|
518
|
+
] });
|
|
519
|
+
},
|
|
520
|
+
parameters: {
|
|
521
|
+
controls: { disable: !0 },
|
|
522
|
+
actions: { disable: !0 },
|
|
523
|
+
docs: {
|
|
524
|
+
description: {
|
|
525
|
+
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."
|
|
526
|
+
}
|
|
527
|
+
}
|
|
528
|
+
}
|
|
529
|
+
}, de = {
|
|
530
|
+
render: () => {
|
|
531
|
+
var E, L;
|
|
532
|
+
const [n, i] = p([
|
|
533
|
+
...g
|
|
534
|
+
]), [l, o] = p("folder1"), [t, d] = p(null), m = [
|
|
535
|
+
{ id: "doc1", label: "Document 1" },
|
|
536
|
+
{ id: "doc2", label: "Document 2" },
|
|
537
|
+
{ id: "doc3", label: "Document 3" }
|
|
538
|
+
], w = (u) => {
|
|
539
|
+
u.preventDefault();
|
|
540
|
+
const b = u.target, D = b.closest("[data-treeview-item]");
|
|
541
|
+
let f = null, S = null;
|
|
542
|
+
D ? (f = D.getAttribute("data-treeview-item"), S = D.getAttribute("data-treeview-item-label")) : b.closest("[data-treeview-root]") && (f = null, S = "Racine du TreeView");
|
|
543
|
+
try {
|
|
544
|
+
const v = JSON.parse(u.dataTransfer.getData("application/json"));
|
|
545
|
+
d({
|
|
546
|
+
itemId: f,
|
|
547
|
+
itemLabel: S,
|
|
548
|
+
droppedItem: v
|
|
549
|
+
}), f && o(f);
|
|
550
|
+
} catch (v) {
|
|
551
|
+
console.error("Erreur lors de la récupération des données", v);
|
|
552
|
+
}
|
|
553
|
+
};
|
|
554
|
+
return /* @__PURE__ */ s(a, { sx: { maxWidth: 700, overflowY: "hidden" }, children: [
|
|
555
|
+
/* @__PURE__ */ e(c, { variant: "h6", gutterBottom: !0, children: "Exemple de Drag & Drop avec le TreeView" }),
|
|
556
|
+
/* @__PURE__ */ e(c, { variant: "body2", gutterBottom: !0, children: "Glissez-déposez un des documents ci-dessous sur un élément du TreeView." }),
|
|
557
|
+
/* @__PURE__ */ e(a, { sx: { display: "flex", mb: 2 }, children: m.map((u) => /* @__PURE__ */ e(M, { id: u.id, label: u.label }, u.id)) }),
|
|
558
|
+
/* @__PURE__ */ s(h, { container: !0, spacing: 3, children: [
|
|
559
|
+
/* @__PURE__ */ e(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ s(
|
|
560
|
+
a,
|
|
561
|
+
{
|
|
562
|
+
sx: {
|
|
563
|
+
p: 2,
|
|
564
|
+
border: "1px dashed gray",
|
|
565
|
+
borderRadius: 1,
|
|
566
|
+
minHeight: 300,
|
|
567
|
+
overflowY: "hidden",
|
|
568
|
+
backgroundColor: "background.paper"
|
|
569
|
+
},
|
|
570
|
+
onDragOver: (u) => u.preventDefault(),
|
|
571
|
+
onDrop: w,
|
|
572
|
+
children: [
|
|
573
|
+
/* @__PURE__ */ e(c, { variant: "subtitle1", gutterBottom: !0, children: "Zone de drop" }),
|
|
574
|
+
/* @__PURE__ */ e(
|
|
575
|
+
I,
|
|
576
|
+
{
|
|
577
|
+
items: n,
|
|
578
|
+
selectedItemId: l,
|
|
579
|
+
handleSelectedItemChange: (u, b) => {
|
|
580
|
+
b && o(b);
|
|
581
|
+
}
|
|
582
|
+
}
|
|
583
|
+
)
|
|
584
|
+
]
|
|
585
|
+
}
|
|
586
|
+
) }),
|
|
587
|
+
/* @__PURE__ */ e(h, { item: !0, xs: 12, md: 6, children: /* @__PURE__ */ s(T, { sx: { p: 2, minHeight: 300 }, children: [
|
|
588
|
+
/* @__PURE__ */ e(c, { variant: "subtitle1", gutterBottom: !0, children: "Informations du dernier drop" }),
|
|
589
|
+
t ? /* @__PURE__ */ s(a, { children: [
|
|
590
|
+
/* @__PURE__ */ s(c, { variant: "body2", children: [
|
|
591
|
+
/* @__PURE__ */ e("strong", { children: "Élément cible :" }),
|
|
592
|
+
" ",
|
|
593
|
+
t.itemLabel,
|
|
594
|
+
" ",
|
|
595
|
+
t.itemId && `(ID: ${t.itemId})`
|
|
596
|
+
] }),
|
|
597
|
+
/* @__PURE__ */ s(c, { variant: "body2", children: [
|
|
598
|
+
/* @__PURE__ */ e("strong", { children: "Élément déposé :" }),
|
|
599
|
+
" ",
|
|
600
|
+
(E = t.droppedItem) == null ? void 0 : E.label,
|
|
601
|
+
" (ID:",
|
|
602
|
+
" ",
|
|
603
|
+
(L = t.droppedItem) == null ? void 0 : L.id,
|
|
604
|
+
")"
|
|
605
|
+
] }),
|
|
606
|
+
/* @__PURE__ */ s(a, { sx: { mt: 2 }, children: [
|
|
607
|
+
/* @__PURE__ */ e(c, { variant: "body2", children: /* @__PURE__ */ e("strong", { children: "Code pour gérer ce drop :" }) }),
|
|
608
|
+
/* @__PURE__ */ e(T, { sx: { p: 1, mt: 1, backgroundColor: "grey.100" }, children: /* @__PURE__ */ e(
|
|
609
|
+
"pre",
|
|
610
|
+
{
|
|
611
|
+
style: {
|
|
612
|
+
margin: 0,
|
|
613
|
+
fontSize: "0.8rem",
|
|
614
|
+
whiteSpace: "pre-wrap"
|
|
615
|
+
},
|
|
616
|
+
children: `// Dans votre gestionnaire d'événements
|
|
617
|
+
const handleDrop = (e) => {
|
|
618
|
+
e.preventDefault();
|
|
619
|
+
|
|
620
|
+
// Identifier l'élément cible
|
|
621
|
+
const target = e.target;
|
|
622
|
+
const treeviewItem = target.closest('[data-treeview-item]');
|
|
623
|
+
|
|
624
|
+
if (treeviewItem) {
|
|
625
|
+
const targetId = treeviewItem.getAttribute('data-treeview-item');
|
|
626
|
+
const targetLabel = treeviewItem.getAttribute('data-treeview-item-label');
|
|
627
|
+
|
|
628
|
+
// Récupérer les données de l'élément déposé
|
|
629
|
+
const droppedData = JSON.parse(e.dataTransfer.getData('application/json'));
|
|
630
|
+
|
|
631
|
+
console.log(\`Élément "\${droppedData.label}" déposé sur "\${targetLabel}"\`);
|
|
632
|
+
|
|
633
|
+
// Votre logique pour traiter le drop...
|
|
634
|
+
}
|
|
635
|
+
};`
|
|
636
|
+
}
|
|
637
|
+
) })
|
|
638
|
+
] })
|
|
639
|
+
] }) : /* @__PURE__ */ e(c, { variant: "body2", children: "Aucun élément déposé pour le moment. Glissez un document sur le TreeView pour voir les informations ici." })
|
|
640
|
+
] }) })
|
|
641
|
+
] })
|
|
642
|
+
] });
|
|
643
|
+
},
|
|
644
|
+
parameters: {
|
|
645
|
+
controls: { disable: !0 },
|
|
646
|
+
actions: { disable: !0 },
|
|
647
|
+
docs: {
|
|
648
|
+
description: {
|
|
649
|
+
story: "Cette story démontre comment utiliser les attributs `data-` du TreeView pour implémenter une fonctionnalité de drag and drop. Glissez un document sur un élément du TreeView pour voir comment accéder aux informations de l'élément cible."
|
|
650
|
+
}
|
|
651
|
+
}
|
|
652
|
+
}
|
|
653
|
+
};
|
|
654
|
+
export {
|
|
655
|
+
de as AvecDragAndDrop,
|
|
656
|
+
ie as AvecIconesPersonnalisees,
|
|
657
|
+
oe as Controlable,
|
|
658
|
+
ne as Default,
|
|
659
|
+
se as OptionsDeCouleurs,
|
|
660
|
+
le as StructureImbriquee,
|
|
661
|
+
ae as Synchronicite,
|
|
662
|
+
re as default
|
|
663
|
+
};
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import * as h from "react";
|
|
2
2
|
import { jsxs as b, jsx as x } from "react/jsx-runtime";
|
|
3
|
-
import { H as w,
|
|
4
|
-
import { m as N } from "./memoTheme-
|
|
5
|
-
import { u as O, s as R, c as j } from "./DefaultPropsProvider-
|
|
6
|
-
import { c as z } from "./capitalize-
|
|
3
|
+
import { H as w, G as C, I as T, P as e } from "./generateUtilityClasses-EXBFO7eY.js";
|
|
4
|
+
import { m as N } from "./memoTheme-DJWQ754x.js";
|
|
5
|
+
import { u as O, s as R, c as j } from "./DefaultPropsProvider-CQixa6JQ.js";
|
|
6
|
+
import { c as z } from "./capitalize-BJ0FEsU7.js";
|
|
7
7
|
function E(o) {
|
|
8
|
-
return
|
|
8
|
+
return w("MuiSvgIcon", o);
|
|
9
9
|
}
|
|
10
|
-
const P =
|
|
10
|
+
const P = C("MuiSvgIcon", ["root", "colorPrimary", "colorSecondary", "colorAction", "colorError", "colorDisabled", "fontSizeInherit", "fontSizeSmall", "fontSizeMedium", "fontSizeLarge"]), $ = (o) => {
|
|
11
11
|
const {
|
|
12
12
|
color: r,
|
|
13
13
|
fontSize: t,
|