@firecms/core 3.0.0-beta.12 → 3.0.0-beta.14

package/src/components/ArrayContainer.tsx

@@ -1,7 +1,17 @@
 import React, { useCallback, useEffect, useRef, useState } from "react";
-
-import { DragDropContext, Draggable, DraggableProvided, Droppable } from "@hello-pangea/dnd";
-
+import {
+    closestCenter,
+    DndContext,
+    DragEndEvent,
+    KeyboardSensor,
+    PointerSensor,
+    useSensor,
+    useSensors
+} from "@dnd-kit/core";
+import { restrictToVerticalAxis } from "@dnd-kit/modifiers";
+
+import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { getHashValue } from "../util";
 import {
     AddIcon,
@@ -20,11 +30,11 @@ import {
 } from "@firecms/ui";
 
 export type ArrayEntryParams = {
-    index: number,
-    internalId: number,
-    isDragging: boolean,
-    storedProps?: object,
-    storeProps: (props: object) => void
+    index: number;
+    internalId: number;
+    isDragging: boolean;
+    storedProps?: object;
+    storeProps: (props: object) => void;
 };
 
 export type ArrayEntryBuilder = (params: ArrayEntryParams) => React.ReactNode;
@@ -38,8 +48,10 @@ export interface ArrayContainerProps<T> {
     size?: "small" | "medium";
     onInternalIdAdded?: (id: number) => void;
     includeAddButton?: boolean;
+    canAddElements?: boolean;
+    sortable?: boolean;
     newDefaultEntry: T;
-    onValueChange: (value: T[]) => void,
+    onValueChange: (value: T[]) => void;
     className?: string;
     min?: number;
     max?: number;
@@ -47,17 +59,285 @@ export interface ArrayContainerProps<T> {
 
 const buildIdsMap = (value: any[]) =>
     value && Array.isArray(value) && value.length > 0
-        ? value.map((v, index) => {
-            if (!v) return {};
-            return ({
-                [getHashValue(v) + index]: getRandomId()
-            });
-        }).reduce((a, b) => ({ ...a, ...b }), {})
-        : {}
+        ? value
+            .map((v, index) => {
+                if (!v) return {};
+                return {
+                    [getHashValue(v) + index]: getRandomId()
+                };
+            })
+            .reduce((a, b) => ({ ...a, ...b }), {})
+        : {};
+
+type SortableItemProps = {
+    id: number;
+    index: number;
+    size?: "small" | "medium";
+    disabled: boolean;
+    buildEntry: ArrayEntryBuilder;
+    remove: (index: number) => void;
+    copy: (index: number) => void;
+    addInIndex?: (index: number) => void;
+    canAddElements?: boolean;
+    sortable: boolean;
+    storedProps?: object;
+    updateItemCustomProps: (internalId: number, props: object) => void;
+};
+
+function SortableItem({
+                          id,
+                          index,
+                          size,
+                          disabled,
+                          buildEntry,
+                          remove,
+                          copy,
+                          addInIndex,
+                          canAddElements,
+                          sortable,
+                          storedProps,
+                          updateItemCustomProps
+                      }: SortableItemProps) {
+    const {
+        attributes,
+        listeners,
+        setNodeRef,
+        transform,
+        transition,
+        isDragging
+    } = sortable
+        ? useSortable({ id })
+        : {
+            attributes: {},
+            listeners: {},
+            setNodeRef: (node: HTMLElement | null) => {
+            },
+            transform: null,
+            transition: undefined,
+            isDragging: false
+        };
+
+    const style = transform ? {
+        transform: CSS.Transform.toString(transform),
+        transition
+    } : {};
+    const dragHandleProps = sortable ? { ...listeners, ...attributes } : {};
+
+    return (
+        <ArrayContainerItem
+            nodeRef={setNodeRef}
+            style={style}
+            dragHandleProps={dragHandleProps}
+            internalId={id}
+            index={index}
+            size={size}
+            disabled={disabled}
+            buildEntry={buildEntry}
+            remove={remove}
+            copy={copy}
+            addInIndex={addInIndex}
+            canAddElements={canAddElements}
+            sortable={sortable}
+            isDragging={isDragging}
+            storedProps={storedProps}
+            updateItemCustomProps={updateItemCustomProps}
+        />
+    );
+}
+
+type ArrayContainerItemProps = {
+    nodeRef: (node: HTMLElement | null) => void;
+    style: React.CSSProperties;
+    dragHandleProps: any;
+    index: number;
+    internalId: number;
+    size?: "small" | "medium";
+    disabled: boolean;
+    buildEntry: ArrayEntryBuilder;
+    remove: (index: number) => void;
+    copy: (index: number) => void;
+    addInIndex?: (index: number) => void;
+    canAddElements?: boolean;
+    sortable: boolean;
+    isDragging: boolean;
+    storedProps?: object;
+    updateItemCustomProps: (internalId: number, props: object) => void;
+};
+
+export function ArrayContainerItem({
+                                       nodeRef,
+                                       style,
+                                       dragHandleProps,
+                                       index,
+                                       internalId,
+                                       size,
+                                       disabled,
+                                       buildEntry,
+                                       remove,
+                                       copy,
+                                       addInIndex,
+                                       canAddElements,
+                                       sortable,
+                                       isDragging,
+                                       storedProps,
+                                       updateItemCustomProps
+                                   }: ArrayContainerItemProps) {
+    return (
+        <div
+            ref={nodeRef}
+            style={style}
+            className={`relative ${!isDragging ? "hover\\:bg-surface-accent-50 dark\\:hover\\:bg-surface-800 dark\\:hover\\:bg-opacity-20" : ""} rounded-md opacity-100`}
+        >
+            <div className="flex items-start">
+                <div className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">
+                    {buildEntry({
+                        index,
+                        internalId,
+                        isDragging,
+                        storedProps,
+                        storeProps: (props: object) => updateItemCustomProps(internalId, props)
+                    })}
+                </div>
+                <ArrayItemOptions
+                    dragHandleProps={dragHandleProps}
+                    direction={size === "small" ? "row" : "column"}
+                    disabled={disabled}
+                    remove={remove}
+                    index={index}
+                    copy={copy}
+                    canAddElements={canAddElements}
+                    sortable={sortable}
+                    addInIndex={addInIndex}
+                />
+            </div>
+        </div>
+    );
+}
+
+export function ArrayItemOptions({
+                                     dragHandleProps,
+                                     direction,
+                                     disabled,
+                                     remove,
+                                     index,
+                                     copy,
+                                     canAddElements,
+                                     sortable,
+                                     addInIndex,
+                                 }: {
+    dragHandleProps: any;
+    direction?: "row" | "column";
+    disabled: boolean;
+    remove: (index: number) => void;
+    index: number;
+    copy: (index: number) => void;
+    sortable: boolean;
+    canAddElements?: boolean;
+    addInIndex?: (index: number) => void;
+}) {
+    const [menuOpen, setMenuOpen] = useState(false);
+    const iconRef = useRef<HTMLDivElement>(null);
+    useOutsideAlerter(iconRef, () => {
+        if (menuOpen) setMenuOpen(false);
+    });
+
+    const showMenu = canAddElements ?? false;
+
+    const handleIconButtonClick = (e: React.MouseEvent) => {
+        if (showMenu) {
+            e.stopPropagation();
+            e.preventDefault();
+            setMenuOpen(o => !o);
+        } else if (sortable) {
+            // Allow drag to propagate if menu is not shown
+        } else {
+            e.stopPropagation();
+            e.preventDefault();
+        }
+    };
+
+    const title = !disabled && sortable && showMenu ? "Drag to move. Click for options" :
+        !disabled && showMenu ? "Click for options" :
+            !disabled && sortable ? "Drag to move" : undefined;
+
+    return (
+        <div ref={iconRef}
+             className={`pl-2 pt-1 pb-1 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`}>
+            <Tooltip
+                delayDuration={400}
+                open={menuOpen ? false : undefined}
+                side={direction === "column" ? "left" : undefined}
+                title={title}
+            >
+                <IconButton
+                    size="small"
+                    disabled={disabled || (!showMenu && !sortable)}
+                    {...(sortable ? dragHandleProps : {})}
+                    onClick={handleIconButtonClick}
+                    onFocus={() => {
+                        if (sortable && menuOpen) setMenuOpen(false);
+                    }}
+                    className={cls(
+                        (disabled || (!sortable && !showMenu)) ? "cursor-inherit" : "",
+                        sortable && !disabled ? "cursor-grab" : "",
+                        !sortable && showMenu && !disabled ? "cursor-pointer" : ""
+                    )}
+                >
+                    <HandleIcon/>
+                </IconButton>
+            </Tooltip>
+            {showMenu && (
+                <Menu portalContainer={iconRef.current} open={menuOpen} trigger={<div tabIndex={-1}/>}>
+                    <MenuItem
+                        dense
+                        onClick={(e: React.MouseEvent) => {
+                            setMenuOpen(false);
+                            remove(index);
+                        }}
+                    >
+                        <RemoveIcon size={"small"}/>
+                        Remove
+                    </MenuItem>
+                    <MenuItem
+                        dense
+                        onClick={() => {
+                            setMenuOpen(false);
+                            copy(index);
+                        }}
+                    >
+                        <ContentCopyIcon size={"small"}/>
+                        Copy
+                    </MenuItem>
+                    {addInIndex && (
+                        <MenuItem
+                            dense
+                            onClick={() => {
+                                setMenuOpen(false);
+                                addInIndex(index);
+                            }}
+                        >
+                            <KeyboardArrowUpIcon size={"small"}/>
+                            Add on top
+                        </MenuItem>
+                    )}
+                    {addInIndex && (
+                        <MenuItem
+                            dense
+                            onClick={() => {
+                                setMenuOpen(false);
+                                addInIndex(index + 1);
+                            }}
+                        >
+                            <KeyboardArrowDownIcon size={"small"}/>
+                            Add below
+                        </MenuItem>
+                    )}
+                </Menu>
+            )}
+        </div>
+    );
+}
 
-/**
- * @group Form custom fields
- */
 export function ArrayContainer<T>({
                                       droppableId,
                                       addLabel,
@@ -66,31 +346,38 @@ export function ArrayContainer<T>({
                                       buildEntry,
                                       size = "medium",
                                       onInternalIdAdded,
-                                      includeAddButton,
+                                      includeAddButton: deprecatedIncludeAddButton,
+                                      canAddElements: canAddElementsProp = true,
+                                      sortable = true,
                                       newDefaultEntry,
                                       onValueChange,
                                       className,
                                       min = 0,
                                       max = Infinity
                                   }: ArrayContainerProps<T>) {
+    const canAddElements =
+        (canAddElementsProp === undefined ? true : canAddElementsProp) && // Default canAddElementsProp to true if undefined
+        (deprecatedIncludeAddButton === undefined || deprecatedIncludeAddButton);
 
     const hasValue = value && Array.isArray(value) && value.length > 0;
-
-    // Used to track the ids that have displayed the initial show animation
     const internalIdsRef = useRef<Record<string, number>>(buildIdsMap(value));
-
     const [internalIds, setInternalIds] = useState<number[]>(
-        hasValue
-            ? Object.values(internalIdsRef.current)
-            : []
+        hasValue ? Object.values(internalIdsRef.current) : []
     );
-
     const itemCustomPropsRef = useRef<Record<number, object>>({});
 
     const updateItemCustomProps = useCallback((internalId: number, customProps: object) => {
         itemCustomPropsRef.current[internalId] = customProps;
     }, []);
 
+    const pointerSensor = useSensor(PointerSensor, {
+        activationConstraint: {
+            distance: 5,
+        },
+    });
+    const keyboardSensor = useSensor(KeyboardSensor, {});
+    const sensors = useSensors(pointerSensor, keyboardSensor);
+
     useEffect(() => {
         if (hasValue && value && value.length !== internalIds.length) {
             const newInternalIds = value.map((v, index) => {
@@ -112,8 +399,7 @@ export function ArrayContainer<T>({
         if (disabled || (value ?? []).length >= max) return;
         const id = getRandomId();
         const newIds: number[] = [...internalIds, id];
-        if (onInternalIdAdded)
-            onInternalIdAdded(id);
+        if (onInternalIdAdded) onInternalIdAdded(id);
         setInternalIds(newIds);
         onValueChange([...(value ?? []), newDefaultEntry]);
     };
@@ -135,10 +421,8 @@ export function ArrayContainer<T>({
             id,
             ...internalIds.slice(index + 1)
         ];
-        if (onInternalIdAdded)
-            onInternalIdAdded(id);
+        if (onInternalIdAdded) onInternalIdAdded(id);
         setInternalIds(newIds);
-        // insert value in index + 1
         onValueChange([...value.slice(0, index + 1), copyingItem, ...value.slice(index + 1)]);
     };
 
@@ -150,265 +434,113 @@ export function ArrayContainer<T>({
             id,
             ...internalIds.slice(index)
         ];
-        if (onInternalIdAdded)
-            onInternalIdAdded(id);
+        if (onInternalIdAdded) onInternalIdAdded(id);
         setInternalIds(newIds);
         onValueChange([...value.slice(0, index), newDefaultEntry, ...value.slice(index)]);
-    }
-
-    const onDragEnd = (result: any) => {
-        // dropped outside the list
-        if (!result.destination) {
-            return;
-        }
-        const sourceIndex = result.source.index;
-        const destinationIndex = result.destination.index;
+    };
 
-        const newIds = [...internalIds];
-        const temp = newIds[sourceIndex];
-        newIds[sourceIndex] = newIds[destinationIndex];
-        newIds[destinationIndex] = temp;
+    const onDragEnd = (event: DragEndEvent) => {
+        const {
+            active,
+            over
+        } = event;
+        if (!over || active.id === over.id) return;
+
+        const oldIndex = internalIds.indexOf(active.id as number);
+        const newIndex = internalIds.indexOf(over.id as number);
+        if (oldIndex === -1 || newIndex === -1) return;
+        const newIds = arrayMove(internalIds, oldIndex, newIndex);
         setInternalIds(newIds);
-
-        onValueChange(arrayMove(value, sourceIndex, destinationIndex));
+        onValueChange(arrayMove(value, oldIndex, newIndex));
     };
 
-    return (
-        <DragDropContext onDragEnd={onDragEnd}>
-            <Droppable droppableId={droppableId}
-                       renderClone={(provided, snapshot, rubric) => {
-                           const index = rubric.source.index;
-                           const internalId = internalIds[index];
-                           return (
-                               <ArrayContainerItem
-                                   provided={provided}
-                                   internalId={internalId}
-                                   index={index}
-                                   size={size}
-                                   disabled={disabled}
-                                   buildEntry={buildEntry}
-                                   remove={remove}
-                                   copy={copy}
-                                   isDragging={snapshot.isDragging}
-                                   storedProps={itemCustomPropsRef.current[internalId]}
-                                   updateItemCustomProps={updateItemCustomProps}
-                                   addInIndex={addInIndex}
-                                   includeAddButton={includeAddButton}
-                               />
-                           );
-                       }}
-            >
-                {(droppableProvided, droppableSnapshot) => (
-                    <div
-                        className={cls("space-y-1", className)}
-                        {...droppableProvided.droppableProps}
-                        ref={droppableProvided.innerRef}>
-                        {hasValue && internalIds.map((internalId: number, index: number) => {
-                            return (
-                                <Draggable
-                                    key={`array_field_${internalId}`}
-                                    draggableId={`array_field_${internalId}`}
-                                    isDragDisabled={disabled}
-                                    index={index}>
-                                    {(provided, snapshot) => (
-                                        <ArrayContainerItem
-                                            provided={provided}
-                                            internalId={internalId}
-                                            index={index}
-                                            size={size}
-                                            disabled={disabled}
-                                            buildEntry={buildEntry}
-                                            remove={remove}
-                                            copy={copy}
-                                            isDragging={snapshot.isDragging}
-                                            storedProps={itemCustomPropsRef.current[internalId]}
-                                            updateItemCustomProps={updateItemCustomProps}
-                                            addInIndex={addInIndex}
-                                            includeAddButton={includeAddButton}
-                                        />
-                                    )}
-                                </Draggable>
-                            );
-                        })}
-
-                        {droppableProvided.placeholder}
-
-                        {includeAddButton && (
-                            <div className="my-4 justify-center text-left">
-                                <Button
-                                    variant={"text"}
-                                    size={size === "small" ? "small" : "medium"}
-                                    color="primary"
-                                    disabled={disabled || value?.length >= max}
-                                    startIcon={<AddIcon/>}
-                                    onClick={insertInEnd}>
-                                    {addLabel ?? "Add"}
-                                </Button>
-                            </div>
-                        )}
-                    </div>
-                )}
-            </Droppable>
-        </DragDropContext>
-    );
-}
-
-type ArrayContainerItemProps = {
-    provided: DraggableProvided,
-    index: number,
-    internalId: number,
-    size?: "small" | "medium",
-    disabled: boolean,
-    buildEntry: ArrayEntryBuilder,
-    remove: (index: number) => void,
-    copy: (index: number) => void,
-    addInIndex?: (index: number) => void,
-    includeAddButton?: boolean,
-    isDragging: boolean,
-    storedProps?: object,
-    updateItemCustomProps: (internalId: number, props: object) => void
-};
-
-export function ArrayContainerItem({
-                                       provided,
-                                       index,
-                                       internalId,
-                                       size,
-                                       disabled,
-                                       buildEntry,
-                                       remove,
-                                       addInIndex,
-                                       includeAddButton,
-                                       copy,
-                                       isDragging,
-                                       storedProps,
-                                       updateItemCustomProps
-                                   }: ArrayContainerItemProps) {
-
-    return <div
-        ref={provided.innerRef}
-        {...provided.draggableProps}
-        style={provided.draggableProps.style}
-        className={`relative ${
-            !isDragging ? "hover:bg-surface-accent-50 dark:hover:bg-surface-800 dark:hover:bg-opacity-20" : ""
-        } rounded-md opacity-100`}
-    >
-        <div
-            className="flex items-start">
-            <div
-                className="flex-grow w-[calc(100%-48px)] text-text-primary dark:text-text-primary-dark">
-                {buildEntry({
-                    index,
-                    internalId,
-                    isDragging,
-                    storedProps,
-                    storeProps: (props: object) => updateItemCustomProps(internalId, props)
-                })}
-            </div>
-            <ArrayItemOptions direction={size === "small" ? "row" : "column"}
-                              disabled={disabled}
-                              remove={remove}
-                              index={index}
-                              provided={provided}
-                              addInIndex={addInIndex}
-                              includeAddButton={includeAddButton}
-                              copy={copy}/>
+    return sortable ? (
+        <DndContext sensors={sensors}
+                    modifiers={[restrictToVerticalAxis]}
+                    collisionDetection={closestCenter}
+                    onDragEnd={onDragEnd}>
+            <SortableContext items={internalIds} strategy={verticalListSortingStrategy}>
+                <div className={cls("space-y-1", className)} id={droppableId}>
+                    {hasValue &&
+                        internalIds.map((internalId: number, index: number) => (
+                            <SortableItem
+                                key={`array_field_${internalId}`}
+                                id={internalId}
+                                index={index}
+                                size={size}
+                                disabled={disabled}
+                                buildEntry={buildEntry}
+                                remove={remove}
+                                copy={copy}
+                                addInIndex={addInIndex}
+                                canAddElements={canAddElements}
+                                sortable={sortable}
+                                storedProps={itemCustomPropsRef.current[internalId]}
+                                updateItemCustomProps={updateItemCustomProps}
+                            />
+                        ))}
+                    {canAddElements && (
+                        <div className="my-4 justify-center text-left">
+                            <Button
+                                variant={"text"}
+                                size={size === "small" ? "small" : "medium"}
+                                color="primary"
+                                disabled={disabled || (value?.length ?? 0) >= max}
+                                startIcon={<AddIcon/>}
+                                onClick={insertInEnd}
+                                className={"ml-3.5"}
+                            >
+                                {addLabel ?? "Add"}
+                            </Button>
+                        </div>
+                    )}
+                </div>
+            </SortableContext>
+        </DndContext>
+    ) : (
+        <div className={cls("space-y-1", className)} id={droppableId}>
+            {hasValue &&
+                internalIds.map((internalId: number, index: number) => (
+                    <ArrayContainerItem
+                        key={`array_field_${internalId}`}
+                        nodeRef={(node: HTMLElement | null) => {
+                        }}
+                        style={{}}
+                        dragHandleProps={{}}
+                        internalId={internalId}
+                        index={index}
+                        size={size}
+                        disabled={disabled}
+                        buildEntry={buildEntry}
+                        remove={remove}
+                        copy={copy}
+                        addInIndex={addInIndex}
+                        canAddElements={canAddElements}
+                        sortable={false}
+                        isDragging={false}
+                        storedProps={itemCustomPropsRef.current[internalId]}
+                        updateItemCustomProps={updateItemCustomProps}
+                    />
+                ))}
+            {canAddElements && (
+                <div className="my-4 justify-center text-left">
+                    <Button
+                        variant={"text"}
+                        size={size === "small" ? "small" : "medium"}
+                        color="primary"
+                        disabled={disabled || (value?.length ?? 0) >= max}
+                        startIcon={<AddIcon/>}
+                        onClick={insertInEnd}
+                    >
+                        {addLabel ?? "Add"}
+                    </Button>
+                </div>
+            )}
         </div>
-    </div>;
-}
-
-export function ArrayItemOptions({
-                                     direction,
-                                     disabled,
-                                     remove,
-                                     index,
-                                     provided,
-                                     copy,
-                                     includeAddButton,
-                                     addInIndex
-                                 }: {
-    direction?: "row" | "column",
-    disabled: boolean,
-    remove: (index: number) => void,
-    index: number,
-    provided: any,
-    copy: (index: number) => void,
-    includeAddButton?: boolean,
-    addInIndex?: (index: number) => void
-}) {
-
-    const [menuOpen, setMenuOpen] = useState(false);
-
-    const iconRef = React.useRef<HTMLDivElement>(null);
-    useOutsideAlerter(iconRef, () => setMenuOpen(false));
-
-    return <div className={`pl-2 pt-1 pb-1 flex ${direction === "row" ? "flex-row-reverse" : "flex-col"} items-center`}
-                ref={iconRef}
-                {...provided.dragHandleProps}>
-        <Tooltip
-            delayDuration={400}
-            open={menuOpen ? false : undefined}
-            side={direction === "column" ? "left" : undefined}
-            title="Drag to move. Click for more options">
-            <IconButton
-                size="small"
-                disabled={disabled}
-                onClick={(e) => {
-                    e.preventDefault();
-                    setMenuOpen(true);
-                }}
-                onDragStart={(e: any) => {
-                    setMenuOpen(false);
-                }}
-                className={`cursor-${disabled ? "inherit" : "grab"}`}>
-                <HandleIcon/>
-            </IconButton>
-
-            <Menu
-                portalContainer={iconRef.current}
-                open={menuOpen}
-                trigger={<div tabIndex={-1}/>}>
-
-                <MenuItem dense onClick={(e) => {
-                    setMenuOpen(false);
-                    remove(index);
-                }}>
-                    <RemoveIcon size={"small"}/>
-                    Remove
-                </MenuItem>
-                <MenuItem dense onClick={() => {
-                    setMenuOpen(false);
-                    copy(index);
-                }}>
-                    <ContentCopyIcon size={"small"}/>
-                    Copy
-                </MenuItem>
-
-                {includeAddButton && addInIndex && <MenuItem dense
-                                                             onClick={() => {
-                                                                 setMenuOpen(false);
-                                                                 addInIndex(index);
-                                                             }}>
-                    <KeyboardArrowUpIcon size={"small"}/>
-                    Add on top
-                </MenuItem>}
-
-                {includeAddButton && addInIndex && <MenuItem dense
-                                                             onClick={() => {
-                                                                 setMenuOpen(false);
-                                                                 addInIndex(index + 1);
-                                                             }}>
-                    <KeyboardArrowDownIcon size={"small"}/>
-                    Add below
-                </MenuItem>}
-
-            </Menu>
-        </Tooltip>
-
-    </div>;
+    );
 }
 
-function arrayMove(value: any[], sourceIndex: number, destinationIndex: number) {
+function arrayMove<T>(value: T[], sourceIndex: number, destinationIndex: number): T[] {
     const result = Array.from(value);
     const [removed] = result.splice(sourceIndex, 1);
     result.splice(destinationIndex, 0, removed);