@coveord/plasma-mantine/dist/esm/components/Collection/CollectionItem.js

A Plasma flavoured Mantine theme

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useSortable } from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { Group, useProps } from '@mantine/core';
import { useCollectionContext } from './CollectionContext.js';
import { DragHandle } from './layouts/shared/DragHandle.js';
import { RemoveButton } from './layouts/shared/RemoveButton.js';
const defaultProps = {
    removable: true,
    gap: 'sm'
};
const StaticCollectionItem = (props)=>{
    const { children, removable, onRemove, id, // Style props
    style, className, classNames, styles, ...others } = useProps('CollectionItem', defaultProps, props);
    const ctx = useCollectionContext();
    return /*#__PURE__*/ _jsxs(Group, {
        "data-testid": `item-${id}`,
        ...ctx.getStyles('item', {
            style,
            className,
            classNames,
            styles
        }),
        ...others,
        children: [
            children,
            /*#__PURE__*/ _jsx(RemoveButton, {
                removable: removable,
                onRemove: onRemove
            })
        ]
    });
};
const DisabledCollectionItem = (props)=>{
    const ctx = useCollectionContext();
    const { children, id, removable: _removable, onRemove: _onRemove, // Style props
    style, className, classNames, styles, ...others } = useProps('CollectionItem', defaultProps, props);
    return /*#__PURE__*/ _jsx(Group, {
        "data-testid": `item-${id}`,
        ...ctx.getStyles('item', {
            style,
            className,
            classNames,
            styles
        }),
        ...others,
        children: children
    });
};
const DraggableCollectionItem = (props)=>{
    const ctx = useCollectionContext();
    const { children, removable, onRemove, id, // Style props
    className, classNames, styles, ...others } = useProps('CollectionItem', defaultProps, props);
    const { attributes, listeners, setNodeRef, transform, transition, isDragging, setActivatorNodeRef } = useSortable({
        id
    });
    return /*#__PURE__*/ _jsxs(Group, {
        "data-testid": `item-${id}`,
        ref: setNodeRef,
        ...ctx.getStyles('item', {
            style: transform ? {
                transform: CSS.Transform.toString(transform),
                transition
            } : undefined,
            className,
            classNames,
            styles
        }),
        "data-isdragging": isDragging,
        ...others,
        children: [
            /*#__PURE__*/ _jsx(DragHandle, {
                setActivatorNodeRef: setActivatorNodeRef,
                listeners: listeners,
                attributes: attributes
            }),
            children,
            /*#__PURE__*/ _jsx(RemoveButton, {
                removable: removable,
                onRemove: onRemove
            })
        ]
    });
};
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