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

The design systems component library.

"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = SortableItem;
const jsx_runtime_1 = require("react/jsx-runtime");
const sortable_1 = require("@dnd-kit/sortable");
const utilities_1 = require("@dnd-kit/utilities");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const Text_1 = require("../Form/Text");
const IconButton_1 = require("../IconButton");
function SortableItem({ id, name, label, customContent, onItemDeleted, onItemUpdated }) {
    const { attributes, isDragging, listeners, setNodeRef, transform, transition } = (0, sortable_1.useSortable)({ id });
    const style = {
        transform: utilities_1.CSS.Translate.toString(transform),
        transition,
    };
    return isDragging ? ((0, jsx_runtime_1.jsx)("li", { className: (0, css_1.cx)(styles.sortableItemDropArea, { [styles.sortableItemDropAreaEditMode]: !!onItemUpdated }), ...attributes, ...listeners, ref: setNodeRef, style: style, children: (0, jsx_runtime_1.jsx)("div", { className: styles.sortableItemDropBar }) })) : ((0, jsx_runtime_1.jsxs)("li", { className: styles.sortableItem, ...attributes, ...listeners, ref: setNodeRef, style: style, children: [(0, jsx_runtime_1.jsx)(design_system_icons_1.GripDotsVerticalIcon, { size: 24 }), customContent ? (customContent) : onItemUpdated ? ((0, jsx_runtime_1.jsx)("div", { className: styles.itemName, "data-no-dnd": true, children: (0, jsx_runtime_1.jsx)(Text_1.Text, { label: label, value: name, onChange: (newValue) => {
                        onItemUpdated(newValue);
                    } }) })) : ((0, jsx_runtime_1.jsx)("span", { className: styles.itemName, children: name })), onItemDeleted && ((0, jsx_runtime_1.jsx)("div", { "data-no-dnd": true, children: (0, jsx_runtime_1.jsx)(IconButton_1.DeprecatedIconButton, { accessibleName: "Cancel", icon: "XmarkIcon", onClick: () => {
                        onItemDeleted();
                    } }) }))] }));
}
const styles = {
    sortableItem: (0, css_1.css)({
        padding: design_system_tokens_1.space[12],
        border: `${design_system_tokens_1.borderWidth[1]} solid ${design_system_tokens_1.themeTokens.color.border.primary}`,
        borderRadius: design_system_tokens_1.borderRadius.medium,
        display: "flex",
        alignItems: "center",
        gap: design_system_tokens_1.space[8],
        backgroundColor: design_system_tokens_1.themeTokens.color.background.primary.default,
        cursor: "pointer",
        touchAction: "manipulation",
        ".MuiTextField-root": {
            marginBottom: "0 !important",
        },
    }),
    sortableItemDropArea: (0, css_1.css)({
        padding: design_system_tokens_1.space[12],
        height: "50px",
        width: "100%",
        display: "flex",
        alignItems: "center",
    }),
    sortableItemDropAreaEditMode: (0, css_1.css)({
        height: "78px",
    }),
    sortableItemDropBar: (0, css_1.css)({
        border: `${design_system_tokens_1.borderWidth[1]} solid ${design_system_tokens_1.colorScales.blue[500]}`,
        borderRadius: design_system_tokens_1.borderRadius.medium,
        backgroundColor: design_system_tokens_1.colorScales.blue[500],
        height: design_system_tokens_1.space[4],
        width: "100%",
    }),
    itemName: (0, css_1.css)({
        font: design_system_tokens_1.text.body.regular.large,
        width: "100%",
    }),
};