maj deps, retrait react-dnd

klee-contrib · Aug 29, 2024 · 5d114a6 · 5d114a6
1 parent 877ad1a
commit 5d114a6
Show file tree

Hide file tree

Showing 27 changed files with 126 additions and 339 deletions.
diff --git a/package.json b/package.json
@@ -39,15 +39,15 @@
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-typescript": "11.1.6",
     "css-tree": "2.3.1",
-    "lerna": "8.1.6",
-    "postcss": "8.4.39",
+    "lerna": "8.1.8",
+    "postcss": "8.4.41",
     "react-docgen-typescript": "2.2.2",
-    "rollup": "4.18.1",
+    "rollup": "4.21.1",
     "rollup-plugin-copy-glob": "0.3.2",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-preserve-shebang": "1.0.1",
-    "tslib": "2.6.3",
-    "typescript": "5.5.3",
-    "vitest": "2.0.1"
+    "tslib": "2.7.0",
+    "typescript": "5.5.4",
+    "vitest": "2.0.5"
   }
 }
diff --git a/packages/collections/package.json b/packages/collections/package.json
@@ -19,11 +19,9 @@
         "@focus4/forms": "11.18.2",
         "@focus4/stores": "11.18.0",
         "@focus4/styling": "11.18.1",
-        "@focus4/toolbox": "11.18.2",
-        "react-dnd": "16.0.1",
-        "react-dnd-html5-backend": "16.0.1"
+        "@focus4/toolbox": "11.18.2"
     },
     "devDependencies": {
         "@focus4/tooling": "11.18.0"
     }
-}
+}
diff --git a/packages/collections/src/focus4.collections.ts b/packages/collections/src/focus4.collections.ts
@@ -10,7 +10,6 @@ export {
     DefaultEmptyComponent,
     DefaultLoadingComponent,
     DetailProps,
-    DragLayerCss,
     EmptyProps,
     LineProps,
     List,
@@ -31,8 +30,6 @@ export {
     actionBarCss,
     actionBarFor,
     contextualActionsCss,
-    dragLayerCss,
-    getDraggedItems,
     listBaseCss,
     listCss,
     listFor,

diff --git a/packages/collections/src/list/action-bar.tsx b/packages/collections/src/list/action-bar.tsx
@@ -3,7 +3,7 @@ import i18next from "i18next";
 import {reduce} from "lodash";
 import {action, reaction} from "mobx";
 import {useObserver} from "mobx-react";
-import {useEffect, useState} from "react";
+import {ReactElement, useEffect, useState} from "react";
 
 import {CollectionStore} from "@focus4/stores";
 import {CSSProp, getDefaultTransition, useTheme} from "@focus4/styling";
@@ -104,7 +104,7 @@ export function ActionBar<T>({
                     ...oL,
                     <MenuItem key={key} caption={i18next.t(label)} onClick={() => (store.groupingKey = key)} />
                 ],
-                [] as JSX.Element[]
+                [] as ReactElement[]
             );
 
             if (menuItems.length) {

diff --git a/packages/collections/src/list/dnd-utils.ts b/packages/collections/src/list/dnd-utils.ts
diff --git a/packages/collections/src/list/drag-layer.tsx b/packages/collections/src/list/drag-layer.tsx
diff --git a/packages/collections/src/list/index.ts b/packages/collections/src/list/index.ts
@@ -6,8 +6,6 @@ export {
     OperationListItem,
     contextualActionsCss
 } from "./contextual-actions";
-export {getDraggedItems} from "./dnd-utils";
-export {DragLayerCss, dragLayerCss} from "./drag-layer";
 export {DetailProps, LineProps, List, ListCss, listCss, ListProps, ListContext, listFor} from "./list";
 export {ListBaseProps, ListBaseCss, listBaseCss, useListBase} from "./list-base";
 export {Table, TableColumn, TableCss, tableCss, TableProps, tableFor} from "./table";

diff --git a/packages/collections/src/list/list/index.tsx b/packages/collections/src/list/list/index.tsx
@@ -7,7 +7,6 @@ import {CollectionStore} from "@focus4/stores";
 import {CSSProp, useTheme} from "@focus4/styling";
 
 import {OperationListItem} from "../contextual-actions";
-import {DndDragLayer, DragLayerCss} from "../drag-layer";
 import {ListBaseProps, useListBase} from "../list-base";
 import {
     AddItemProps,
@@ -37,16 +36,8 @@ export type ListProps<T> = Omit<ListBaseProps<NoInfer<T>>, "isLoading"> & {
     canOpenDetail?: (data: NoInfer<T>) => boolean;
     /** Composant de détail, à afficher dans un "accordéon" au clic sur un objet. */
     DetailComponent?: ComponentType<DetailProps<NoInfer<T>>>;
-    /** Nombre d'éléments à partir du quel on n'affiche plus d'animation de drag and drop sur les lignes. */
-    disableDragAnimThreshold?: number;
-    /** Type de l'item de liste pour le drag and drop. Par défaut : "item". */
-    dragItemType?: string;
-    /** CSS du DragLayer. */
-    dragLayerTheme?: CSSProp<DragLayerCss>;
     /** Component à afficher lorsque la liste est vide. */
     EmptyComponent?: ComponentType<EmptyProps<NoInfer<T>>>;
-    /** Active le drag and drop. */
-    hasDragAndDrop?: boolean;
     /** Cache le bouton "Ajouter" dans la mosaïque et le composant vide. */
     hideAdditionalItems?: boolean;
     /** Composant de ligne. */
@@ -100,7 +91,6 @@ export type ListProps<T> = Omit<ListBaseProps<NoInfer<T>>, "isLoading"> & {
  *  complémentaires (il s'ouvre bien au bon endroit en mode mosaïque).
  * - Possibilité de définir un `addItemHandler` et son `AddItemComponent`, pour avoir un composant générique pour ajouter un nouvel élément (utile en
  *  particulier pour l'affichage mosaïque).
- * - Possibilité de définir les éléments de la liste comme des [sources de drag and drop](https://react-dnd.github.io/react-dnd/docs/api/use-drag) (via `hasDragAndDrop`)
  *
  * **Ce composant n'a d'intérêt que si vous avez besoin d'une des fonctionnalités listées dans cette description** (la plupart du temps, il s'agit de la pagination, de
  * la sélection, ou des actions de ligne). Sans ça, il n'a aucun avantage sur un simple `list.map()` React classique et apporte une complexité inutile.
@@ -110,11 +100,7 @@ export function List<T>({
     addItemHandler,
     canOpenDetail = () => true,
     DetailComponent,
-    disableDragAnimThreshold,
-    dragItemType,
-    dragLayerTheme,
     EmptyComponent = DefaultEmptyComponent,
-    hasDragAndDrop,
     // @ts-ignore
     hasSelection,
     hideAdditionalItems,
@@ -147,8 +133,6 @@ export function List<T>({
             displayedIdx: undefined as number | undefined,
             /** Ref vers la liste pour déterminer sa largeur. */
             ulRef: null as HTMLUListElement | null,
-            /** Liste des éléments sélectionnés par le drag and drop. */
-            draggedItems: observable<T>([], {deep: false}),
 
             /** Toggle le détail depuis la ligne. */
             async toggleDetail(
@@ -212,10 +196,6 @@ export function List<T>({
         /** Affiche ou non l'ajout d'élément dans la liste (en mosaïque). */
         const isAddItemShown = !!(!hideAdditionalItems && state.addItemHandler && state.mode === "mosaic");
 
-        /** Désactive l'animation de drag and drop sur les lignes. */
-        const disableDragAnimation =
-            disableDragAnimThreshold === undefined ? false : disableDragAnimThreshold <= displayedData.length;
-
         let Component: ComponentType<LineProps<T>>;
         if (state.mode === "list" && LineComponent) {
             Component = LineComponent;
@@ -242,10 +222,7 @@ export function List<T>({
             <Fragment key={itemKey(item, idx)}>
                 <LineWrapper
                     data={item}
-                    disableDragAnimation={disableDragAnimation}
                     domRef={getDomRef(idx)}
-                    draggedItems={hasDragAndDrop ? state.draggedItems : undefined}
-                    dragItemType={dragItemType}
                     hasSelection={store ? hasSelection : undefined}
                     LineComponent={Component}
                     mosaic={state.mode === "mosaic" ? mosaic : undefined}
@@ -280,45 +257,42 @@ export function List<T>({
         ));
 
         return (
-            <>
-                {hasDragAndDrop ? <DndDragLayer i18nPrefix={i18nPrefix} theme={dragLayerTheme} /> : null}
-                <div
-                    className={theme.list({
-                        mosaic: state.mode === "mosaic",
-                        selected: (store && store.selectionStatus !== "none") ?? false
-                    })}
-                >
-                    {/* Gestion de l'empty state. */}
-                    {!isLoading && !hideAdditionalItems && !displayedData.length ? (
-                        <EmptyComponent addItemHandler={state.addItemHandler} i18nPrefix={i18nPrefix} store={store} />
-                    ) : (
-                        <ul
-                            ref={ul => {
-                                state.ulRef = ul;
-                            }}
-                        >
-                            {/* On regarde si on doit ajouter l'élément d'ajout. */}
-                            {isAddItemShown ? (
-                                <li
-                                    key="mosaic-add"
-                                    className={theme.mosaicAdd()}
-                                    style={{width: mosaic.width, height: mosaic.height}}
-                                >
-                                    <AddItemComponent
-                                        addItemHandler={state.addItemHandler}
-                                        i18nPrefix={i18nPrefix}
-                                        mode="mosaic"
-                                    />
-                                </li>
-                            ) : null}
-                            {lines}
-                        </ul>
-                    )}
-                    {/* Gestion de l'affichage du chargement. */}
-                    {isLoading ? <LoadingComponent i18nPrefix={i18nPrefix} store={store} /> : null}
-                    {bottomRow}
-                </div>
-            </>
+            <div
+                className={theme.list({
+                    mosaic: state.mode === "mosaic",
+                    selected: (store && store.selectionStatus !== "none") ?? false
+                })}
+            >
+                {/* Gestion de l'empty state. */}
+                {!isLoading && !hideAdditionalItems && !displayedData.length ? (
+                    <EmptyComponent addItemHandler={state.addItemHandler} i18nPrefix={i18nPrefix} store={store} />
+                ) : (
+                    <ul
+                        ref={ul => {
+                            state.ulRef = ul;
+                        }}
+                    >
+                        {/* On regarde si on doit ajouter l'élément d'ajout. */}
+                        {isAddItemShown ? (
+                            <li
+                                key="mosaic-add"
+                                className={theme.mosaicAdd()}
+                                style={{width: mosaic.width, height: mosaic.height}}
+                            >
+                                <AddItemComponent
+                                    addItemHandler={state.addItemHandler}
+                                    i18nPrefix={i18nPrefix}
+                                    mode="mosaic"
+                                />
+                            </li>
+                        ) : null}
+                        {lines}
+                    </ul>
+                )}
+                {/* Gestion de l'affichage du chargement. */}
+                {isLoading ? <LoadingComponent i18nPrefix={i18nPrefix} store={store} /> : null}
+                {bottomRow}
+            </div>
         );
     });
 }
@@ -345,7 +319,6 @@ export function List<T>({
  *  complémentaires (il s'ouvre bien au bon endroit en mode mosaïque).
  * - Possibilité de définir un `addItemHandler` et son `AddItemComponent`, pour avoir un composant générique pour ajouter un nouvel élément (utile en
  *  particulier pour l'affichage mosaïque).
- * - Possibilité de définir les éléments de la liste comme des [sources de drag and drop](https://react-dnd.github.io/react-dnd/docs/api/use-drag) (via `hasDragAndDrop`)
  *
  * **Ce composant n'a d'intérêt que si vous avez besoin d'une des fonctionnalités listées dans cette description** (la plupart du temps, il s'agit de la pagination, de
  * la sélection, ou des actions de ligne). Sans ça, il n'a aucun avantage sur un simple `list.map()` React classique et apporte une complexité inutile.