@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
134 lines (133 loc) • 6.08 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "VerticalLayoutBody", {
enumerable: true,
get: function() {
return VerticalLayoutBody;
}
});
var _interop_require_default = require("@swc/helpers/_/_interop_require_default");
var _object_spread = require("@swc/helpers/_/_object_spread");
var _object_spread_props = require("@swc/helpers/_/_object_spread_props");
var _object_without_properties = require("@swc/helpers/_/_object_without_properties");
var _jsxruntime = require("react/jsx-runtime");
var _core = require("@mantine/core");
var _react = require("react");
var _CollectionContext = require("../../CollectionContext.js");
var _DragHandle = require("../shared/DragHandle.js");
var _headerUtils = require("../shared/headerUtils.js");
var _itemRenderer = require("../shared/itemRenderer.js");
var _layoutConstants = require("../shared/layoutConstants.js");
var _RemoveButton = require("../shared/RemoveButton.js");
var _VerticalLayoutmodulecss = /*#__PURE__*/ _interop_require_default._(require("./VerticalLayout.module.css"));
var defaultProps = _layoutConstants.LAYOUT_BODY_DEFAULT_PROPS;
/**
* Renders the stack of fields (columns) for a vertical layout item
*/ var renderFieldStack = function renderFieldStack(item, index, columns, cellContext, layoutClasses) {
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Stack, {
gap: "xs",
className: layoutClasses.fieldGroup,
children: columns.map(function(column, colIndex) {
var _column_id;
var columnId = (_column_id = column.id) !== null && _column_id !== void 0 ? _column_id : "column-".concat(colIndex);
var header = (0, _headerUtils.renderColumnHeader)(column.header, colIndex);
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Box, {
className: layoutClasses.field,
children: [
header && /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, {
className: layoutClasses.fieldLabel,
children: header
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.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
*/ var renderVerticalContent = function renderVerticalContent(item, index, columns, cellContext, layoutClasses) {
var showRemove = cellContext.removable && cellContext.onRemove && !cellContext.draggable;
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
wrap: "nowrap",
align: "flex-start",
gap: "sm",
className: layoutClasses.itemContent,
children: [
renderFieldStack(item, index, columns, cellContext, layoutClasses),
showRemove && /*#__PURE__*/ (0, _jsxruntime.jsx)(_RemoveButton.RemoveButton, {
removable: cellContext.removable,
onRemove: cellContext.onRemove
})
]
});
};
/**
* Vertical layout content renderer for draggable items
* Renders: [DragHandle] [Stack of fields] [RemoveButton?]
*/ var renderVerticalDraggableContent = function renderVerticalDraggableContent(item, index, columns, cellContext, layoutClasses, dragHandleProps) {
return /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
wrap: "nowrap",
align: "flex-start",
gap: "sm",
className: layoutClasses.itemContent,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_DragHandle.DragHandle, {
setActivatorNodeRef: dragHandleProps.setActivatorNodeRef,
listeners: dragHandleProps.listeners,
attributes: dragHandleProps.attributes
}),
renderFieldStack(item, index, columns, cellContext, layoutClasses),
cellContext.removable && cellContext.onRemove && /*#__PURE__*/ (0, _jsxruntime.jsx)(_RemoveButton.RemoveButton, {
removable: cellContext.removable,
onRemove: cellContext.onRemove
})
]
});
};
// Create renderers once - they are stable component references
var verticalRenderers = (0, _itemRenderer.createItemRenderers)();
var VerticalLayoutBody = function VerticalLayoutBody(props) {
var collectionCtx = (0, _CollectionContext.useCollectionContext)();
var _useProps = (0, _core.useProps)('VerticalLayoutBody', defaultProps, props), items = _useProps.items, onRemove = _useProps.onRemove, removable = _useProps.removable, draggable = _useProps.draggable, disabled = _useProps.disabled, readOnly = _useProps.readOnly, getItemId = _useProps.getItemId, gap = _useProps.gap, ref = _useProps.ref, others = _object_without_properties._(_useProps, [
"items",
"onRemove",
"removable",
"draggable",
"disabled",
"readOnly",
"getItemId",
"gap",
"ref"
]);
var config = (0, _react.useMemo)(function() {
return {
renderContent: renderVerticalContent,
containerSelector: 'item',
inlineControls: false,
renderDraggableContent: renderVerticalDraggableContent
};
}, []);
var itemComponents = (0, _itemRenderer.mapItemsToComponents)(items, verticalRenderers, config, _VerticalLayoutmodulecss.default, {
getItemId: getItemId,
onRemove: onRemove,
removable: removable,
draggable: draggable,
disabled: disabled,
readOnly: readOnly,
columns: collectionCtx.columns
});
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Stack, _object_spread_props._(_object_spread._({
ref: ref,
gap: gap
}, others), {
children: itemComponents
}));
};
//# sourceMappingURL=VerticalLayoutBody.js.map