@octopusdeploy/design-system-components
Version:
The design systems component library.
59 lines (58 loc) • 3.27 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.default = SortableItem;
const jsx_runtime_1 = require("react/jsx-runtime");
const sortable_1 = require("@dnd-kit/react/sortable");
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, index, name, label, customContent, onItemDeleted, onItemUpdated, isOverlay, }) {
const { ref, isDragging } = (0, sortable_1.useSortable)({
id,
index,
});
return !isOverlay && isDragging ? ((0, jsx_runtime_1.jsx)("li", { className: (0, css_1.cx)(styles.sortableItemDropArea, { [styles.sortableItemDropAreaEditMode]: !!onItemUpdated }), ref: ref, children: (0, jsx_runtime_1.jsx)("div", { className: styles.sortableItemDropBar }) })) : ((0, jsx_runtime_1.jsxs)("li", { className: styles.sortableItem, ref: ref, 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%",
}),
};