From 5cb6433a83fffa1b9f0146999cdea8840bb7f7a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Loi=CC=88c=20Correnson?= <loic.correnson@cea.fr>
Date: Sat, 4 Jun 2022 11:23:30 +0200
Subject: [PATCH] [dome/dnd] more doc & lint
---
ivette/src/dome/renderer/newdnd.tsx | 27 +++++++++++++++++++++------
ivette/src/sandbox/usednd.tsx | 2 +-
2 files changed, 22 insertions(+), 7 deletions(-)
diff --git a/ivette/src/dome/renderer/newdnd.tsx b/ivette/src/dome/renderer/newdnd.tsx
index 790f77eb3ba..c582d0a334a 100644
--- a/ivette/src/dome/renderer/newdnd.tsx
+++ b/ivette/src/dome/renderer/newdnd.tsx
@@ -102,14 +102,14 @@ interface DropZone extends DropHandler {
node: HTMLElement;
}
-/**
- D&D Controller.
+/** D&D Controller.
This class allows to connect Drag Sources and Drop Target with each others.
You shall never use the methods of the `DnD` class directly.
- The preferred way for creating `DnD` classes is to use the `useDnD()` React Hook.
- */
+ The preferred way for creating `DnD` classes is to use the `useDnD()`
+ React Hook.
+*/
export class DnD {
constructor() {
@@ -164,7 +164,7 @@ export class DnD {
const rect = hover.node.getBoundingClientRect();
const dropX = Math.round(e.clientX - rect.left);
const dropY = Math.round(e.clientY - rect.top);
- const d = this.dropping = { meta, rect, dropX, dropY }
+ const d = this.dropping = { meta, rect, dropX, dropY };
hover.onDropIn(d);
}
}
@@ -243,7 +243,6 @@ export interface DropTargetProps extends DropHandler {
Remark: a `<DragSource/>` also behaves as a `<DropTarget/>`
when it has Drop handler callbacks.
*/
-
export function DropTarget(props: DropTargetProps): JSX.Element {
const { dnd, disabled = false, className, style, children } = props;
const nodeRef = useDropTarget(dnd, disabled ? undefined : props);
@@ -473,6 +472,7 @@ export interface ItemProps {
children?: React.ReactNode;
}
+/** List item component. Shall only be used inside a `<List/>` component. */
export function Item(props: ItemProps): JSX.Element {
//--- Ordering
const { dnd, items, setSource, setTarget, onStop } =
@@ -513,6 +513,21 @@ export interface ListProps {
children?: React.ReactNode;
}
+/** Sortable list wrapper.
+
+ This component has no DOM element on its own and shall be placed inside a
+ `<div/>` component with a `flex` display, typically an horizontal or vertical
+ Dome box.
+
+ The component wraps its <Item/> children within a local DnD context and
+ enable reordering them by Drag & Drop.
+
+ The behavior of the component can be _controlled_ or _uncontrolled_ whether
+ `items` and `setItems` properties are set or not. In controlled mode, the
+ `items` property is not mandatory to contains all the list elements, in which
+ case the missing elements would be added to the end. Notice that `setItems`
+ callback is only notified after drag & drop.
+*/
export function List(props: ListProps): JSX.Element {
const dnd = useDnD();
const [locals, setLocals] = React.useState<string[]>([]);
diff --git a/ivette/src/sandbox/usednd.tsx b/ivette/src/sandbox/usednd.tsx
index 173c90e1d48..3a6186474a3 100644
--- a/ivette/src/sandbox/usednd.tsx
+++ b/ivette/src/sandbox/usednd.tsx
@@ -93,7 +93,7 @@ function UseDnD(): JSX.Element {
const [items, setItems] = React.useState<string[]>([]);
const [source, setSource] = React.useState('--');
const [target, setTarget] = React.useState('--');
- const onReset = () => {
+ const onReset = (): void => {
setItems([]);
setSource('--');
setTarget('--');
--
GitLab