@octopusdeploy/design-system-components/dist/src/components/SortableList/SortableList.js

The design systems component library.

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.SortableList = SortableList;
const jsx_runtime_1 = require("react/jsx-runtime");
const core_1 = require("@dnd-kit/core");
const sortable_1 = require("@dnd-kit/sortable");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_1 = require("react");
const CustomSensor_1 = require("./CustomSensor");
const SortableItem_1 = __importDefault(require("./SortableItem"));
function SortableList(props) {
    const items = (0, react_1.useMemo)(() => props.items.map((x) => ({ id: x.Id, value: x })), [props.items]);
    const [active, setActive] = (0, react_1.useState)(null);
    const activeItem = (0, react_1.useMemo)(() => items.find((item) => item.id === active?.id), [active, items]);
    const sensors = (0, core_1.useSensors)((0, core_1.useSensor)(CustomSensor_1.CustomMouseSensor), (0, core_1.useSensor)(CustomSensor_1.CustomTouchSensor));
    const itemMoved = ({ active, over }) => {
        if (over && active.id !== over.id) {
            const activeIndex = items.findIndex(({ id }) => id === active.id);
            const overIndex = items.findIndex(({ id }) => id === over.id);
            props.onItemsUpdated((0, sortable_1.arrayMove)(items, activeIndex, overIndex).map((x) => x.value));
        }
        setActive(null);
    };
    const itemDeleted = (itemId) => {
        const remainingItems = items.filter((x) => x.id !== itemId);
        props.onItemsUpdated(remainingItems.map((x) => x.value));
    };
    const itemUpdated = (itemId, newValue) => {
        const orderedItems = items.slice();
        const itemToUpdate = orderedItems.find((x) => x.id === itemId);
        if (itemToUpdate === undefined)
            return;
        itemToUpdate.value.Name = newValue;
        props.onItemsUpdated(orderedItems.map((x) => x.value));
    };
    return ((0, jsx_runtime_1.jsxs)(core_1.DndContext, { sensors: sensors, onDragStart: ({ active }) => setActive(active), onDragEnd: itemMoved, onDragCancel: () => setActive(null), children: [(0, jsx_runtime_1.jsx)(sortable_1.SortableContext, { items: items, strategy: sortable_1.verticalListSortingStrategy, children: (0, jsx_runtime_1.jsx)("ol", { className: styles.sortableList, children: items.map((item) => ((0, jsx_runtime_1.jsx)(SortableItem_1.default, { id: item.id, name: item.value.Name, label: props.label, customContent: props.renderItem?.(item.value), onItemUpdated: props.isItemEditable ? (newValue) => itemUpdated(item.id, newValue) : undefined, onItemDeleted: props.isItemEditable ? () => itemDeleted(item.id) : undefined }, item.id))) }) }), (0, jsx_runtime_1.jsx)(core_1.DragOverlay, { dropAnimation: null, className: styles.dragOverlay, children: activeItem ? ((0, jsx_runtime_1.jsx)(SortableItem_1.default, { id: activeItem.id, name: activeItem.value.Name, label: props.label, onItemUpdated: props.isItemEditable ? () => { } : undefined, onItemDeleted: props.isItemEditable ? () => { } : undefined }, activeItem.id)) : null })] }));
}
const styles = {
    sortableList: (0, css_1.css)({
        display: "flex",
        flexDirection: "column",
        gap: design_system_tokens_1.space[16],
        listStyle: "none",
        touchAction: "none",
    }),
    dragOverlay: (0, css_1.css)({
        opacity: "0.8",
    }),
};