@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
103 lines (102 loc) • 4.44 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Group, Stack, useProps } from '@mantine/core';
import { useMemo } from 'react';
import { useCollectionContext } from '../../CollectionContext.js';
import { DragHandle } from '../shared/DragHandle.js';
import { renderColumnHeader } from '../shared/headerUtils.js';
import { createItemRenderers, mapItemsToComponents } from '../shared/itemRenderer.js';
import { LAYOUT_BODY_DEFAULT_PROPS } from '../shared/layoutConstants.js';
import { RemoveButton } from '../shared/RemoveButton.js';
import classes from './VerticalLayout.module.css';
const defaultProps = LAYOUT_BODY_DEFAULT_PROPS;
/**
* Renders the stack of fields (columns) for a vertical layout item
*/ const renderFieldStack = (item, index, columns, cellContext, layoutClasses)=>/*#__PURE__*/ _jsx(Stack, {
gap: "xs",
className: layoutClasses.fieldGroup,
children: columns.map((column, colIndex)=>{
const columnId = column.id ?? `column-${colIndex}`;
const header = renderColumnHeader(column.header, colIndex);
return /*#__PURE__*/ _jsxs(Box, {
className: layoutClasses.field,
children: [
header && /*#__PURE__*/ _jsx(Box, {
className: layoutClasses.fieldLabel,
children: header
}),
/*#__PURE__*/ _jsx(Box, {
className: layoutClasses.fieldContent,
children: column.cell(item, index, cellContext)
})
]
}, columnId);
})
});
/**
* Vertical layout content renderer - renders: [DragHandle?] [Stack of fields] [RemoveButton?]
* For non-draggable items with remove button
*/ const renderVerticalContent = (item, index, columns, cellContext, layoutClasses)=>{
const showRemove = cellContext.removable && cellContext.onRemove && !cellContext.draggable;
return /*#__PURE__*/ _jsxs(Group, {
wrap: "nowrap",
align: "flex-start",
gap: "sm",
className: layoutClasses.itemContent,
children: [
renderFieldStack(item, index, columns, cellContext, layoutClasses),
showRemove && /*#__PURE__*/ _jsx(RemoveButton, {
removable: cellContext.removable,
onRemove: cellContext.onRemove
})
]
});
};
/**
* Vertical layout content renderer for draggable items
* Renders: [DragHandle] [Stack of fields] [RemoveButton?]
*/ const renderVerticalDraggableContent = (item, index, columns, cellContext, layoutClasses, dragHandleProps)=>/*#__PURE__*/ _jsxs(Group, {
wrap: "nowrap",
align: "flex-start",
gap: "sm",
className: layoutClasses.itemContent,
children: [
/*#__PURE__*/ _jsx(DragHandle, {
setActivatorNodeRef: dragHandleProps.setActivatorNodeRef,
listeners: dragHandleProps.listeners,
attributes: dragHandleProps.attributes
}),
renderFieldStack(item, index, columns, cellContext, layoutClasses),
cellContext.removable && cellContext.onRemove && /*#__PURE__*/ _jsx(RemoveButton, {
removable: cellContext.removable,
onRemove: cellContext.onRemove
})
]
});
// Create renderers once - they are stable component references
const verticalRenderers = createItemRenderers();
export const VerticalLayoutBody = (props)=>{
const collectionCtx = useCollectionContext();
const { items, onRemove, removable, draggable, disabled, readOnly, getItemId, gap, ref, ...others } = useProps('VerticalLayoutBody', defaultProps, props);
const config = useMemo(()=>({
renderContent: renderVerticalContent,
containerSelector: 'item',
inlineControls: false,
renderDraggableContent: renderVerticalDraggableContent
}), []);
const itemComponents = mapItemsToComponents(items, verticalRenderers, config, classes, {
getItemId,
onRemove,
removable,
draggable,
disabled,
readOnly,
columns: collectionCtx.columns
});
return /*#__PURE__*/ _jsx(Stack, {
ref: ref,
gap: gap,
...others,
children: itemComponents
});
};
//# sourceMappingURL=VerticalLayoutBody.js.map