@octopusdeploy/design-system-components
Version:
The design systems component library.
59 lines (58 loc) • 3.41 kB
JavaScript
;
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 dom_1 = require("@dnd-kit/dom");
const helpers_1 = require("@dnd-kit/helpers");
const react_1 = require("@dnd-kit/react");
const css_1 = require("@emotion/css");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const react_2 = require("react");
const SortableItem_1 = __importDefault(require("./SortableItem"));
function SortableList(props) {
const items = (0, react_2.useMemo)(() => props.items.map((x) => ({ id: x.Id, value: x })), [props.items]);
const [active, setActive] = (0, react_2.useState)(null);
const activeItem = (0, react_2.useMemo)(() => items.find((item) => item.id === active?.id), [active, items]);
const itemMoved = (event) => {
const reordered = (0, helpers_1.move)(items, event);
if (reordered !== items) {
props.onItemsUpdated(reordered.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)(react_1.DragDropProvider, { sensors: (defaults) => [
...defaults.filter((sensor) => sensor !== dom_1.PointerSensor),
dom_1.PointerSensor.configure({
preventActivation: (event) => {
return event.target instanceof Element && event.target.closest("[data-no-dnd]") !== null;
},
}),
], onDragStart: ({ operation }) => setActive(operation.source), onDragEnd: itemMoved, children: [(0, jsx_runtime_1.jsx)("ol", { className: styles.sortableList, children: items.map((item, index) => ((0, jsx_runtime_1.jsx)(SortableItem_1.default, { id: item.id, index: index, 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)(react_1.DragOverlay, { dropAnimation: null, className: styles.dragOverlay, children: activeItem ? ((0, jsx_runtime_1.jsx)(SortableItem_1.default, { id: activeItem.id, index: -1, isOverlay: true, 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",
}),
};