@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
91 lines (90 loc) • 2.97 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DragAndDropSize24Px, RemoveSize16Px } from '@coveord/plasma-react-icons';
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { ActionIcon, Group } from '@mantine/core';
import { useCollectionContext } from './CollectionContext';
const RemoveButton = ({ onClick })=>/*#__PURE__*/ _jsx(ActionIcon, {
style: {
alignSelf: 'center'
},
variant: "subtle",
onClick: onClick,
color: "action",
children: /*#__PURE__*/ _jsx(RemoveSize16Px, {
height: 16
})
});
const RemoveButtonPlaceholder = ()=>/*#__PURE__*/ _jsx("div", {
style: {
width: 28
}
});
const StaticCollectionItem = ({ onRemove, removable = true, children })=>{
const ctx = useCollectionContext();
const removeButton = removable && onRemove ? /*#__PURE__*/ _jsx(RemoveButton, {
onClick: onRemove
}) : /*#__PURE__*/ _jsx(RemoveButtonPlaceholder, {});
return /*#__PURE__*/ _jsxs(Group, {
...ctx.getStyles('item'),
children: [
children,
removeButton
]
});
};
const DisabledCollectionItem = ({ children })=>{
const ctx = useCollectionContext();
return /*#__PURE__*/ _jsx(Group, {
...ctx.getStyles('item'),
children: children
});
};
const DraggableCollectionItem = ({ id, onRemove, removable = true, children })=>{
const ctx = useCollectionContext();
const removeButton = removable && onRemove ? /*#__PURE__*/ _jsx(RemoveButton, {
onClick: onRemove
}) : null;
const { attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef } = useSortable({
id
});
return /*#__PURE__*/ _jsxs(Group, {
ref: setNodeRef,
...ctx.getStyles('item', {
style: transform ? {
transform: CSS.Transform.toString(transform),
transition
} : undefined
}),
"data-isdragging": isDragging,
children: [
/*#__PURE__*/ _jsx("div", {
ref: setActivatorNodeRef,
...listeners,
...attributes,
...ctx.getStyles('dragHandle'),
children: /*#__PURE__*/ _jsx(DragAndDropSize24Px, {
height: 16
})
}),
children,
removeButton
]
});
};
export const CollectionItem = ({ draggable, disabled, ...otherProps })=>{
if (disabled) {
return /*#__PURE__*/ _jsx(DisabledCollectionItem, {
...otherProps
});
}
if (draggable) {
return /*#__PURE__*/ _jsx(DraggableCollectionItem, {
...otherProps
});
}
return /*#__PURE__*/ _jsx(StaticCollectionItem, {
...otherProps
});
};
//# sourceMappingURL=CollectionItem.js.map