@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
264 lines (263 loc) • 11.9 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Collection", {
enumerable: true,
get: function() {
return Collection;
}
});
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("@dnd-kit/core");
var _modifiers = require("@dnd-kit/modifiers");
var _sortable = require("@dnd-kit/sortable");
var _core1 = require("@mantine/core");
var _hooks = require("@mantine/hooks");
var _createFactoryComponent = require("../../utils/createFactoryComponent.js");
var _Collectionmodulecss = /*#__PURE__*/ _interop_require_default._(require("./Collection.module.css"));
var _CollectionAddButton = require("./CollectionAddButton.js");
var _CollectionContext = require("./CollectionContext.js");
var _CollectionItem = require("./CollectionItem.js");
var _CollectionLayouts = require("./layouts/CollectionLayouts.js");
var defaultProps = {
draggable: false,
addLabel: 'Add item',
addDisabledTooltip: 'There is already an empty item',
disabled: false,
readOnly: false,
gap: 'md',
required: false,
getItemId: function getItemId(param) {
var id = param.id;
return id;
}
};
var Collection = function Collection(props) {
var _ref;
var _useProps = (0, _core1.useProps)('Collection', defaultProps, props), value = _useProps.value, onChange = _useProps.onChange, onRemoveItem = _useProps.onRemoveItem, onReorderItem = _useProps.onReorderItem, onInsertItem = _useProps.onInsertItem, disabled = _useProps.disabled, readOnly = _useProps.readOnly, draggable = _useProps.draggable, children = _useProps.children, columns = _useProps.columns, layout = _useProps.layout, gap = _useProps.gap, required = _useProps.required, newItem = _useProps.newItem, addLabel = _useProps.addLabel, addDisabledTooltip = _useProps.addDisabledTooltip, allowAdd = _useProps.allowAdd, label = _useProps.label, labelProps = _useProps.labelProps, withAsterisk = _useProps.withAsterisk, description = _useProps.description, descriptionProps = _useProps.descriptionProps, error = _useProps.error, errorProps = _useProps.errorProps, getItemId = _useProps.getItemId, ref = _useProps.ref, // Style props
style = _useProps.style, className = _useProps.className, classNames = _useProps.classNames, styles = _useProps.styles, unstyled = _useProps.unstyled, others = _object_without_properties._(_useProps, [
"value",
"onChange",
"onRemoveItem",
"onReorderItem",
"onInsertItem",
"disabled",
"readOnly",
"draggable",
"children",
"columns",
"layout",
"gap",
"required",
"newItem",
"addLabel",
"addDisabledTooltip",
"allowAdd",
"label",
"labelProps",
"withAsterisk",
"description",
"descriptionProps",
"error",
"errorProps",
"getItemId",
"ref",
"style",
"className",
"classNames",
"styles",
"unstyled"
]);
// Runtime validation: ensure columns and children are mutually exclusive
if (columns && children) {
throw new Error('Collection: Cannot use both "columns" and "children" props.');
}
if (layout && !columns) {
throw new Error('Collection: "layout" prop can only be used with "columns" prop.');
}
var getStyles = (0, _core1.useStyles)({
name: 'Collection',
classes: _Collectionmodulecss.default,
props: props,
className: className,
style: style,
classNames: classNames,
styles: styles,
unstyled: unstyled
});
var sensors = (0, _core.useSensors)((0, _core.useSensor)(_core.PointerSensor), (0, _core.useSensor)(_core.KeyboardSensor, {
coordinateGetter: _sortable.sortableKeyboardCoordinates
}));
var canEdit = !disabled && !readOnly;
var items = value !== null && value !== void 0 ? value : [];
var hasOnlyOneItem = items.length === 1;
/**
* Enforcing onChange when the value is modified will make sure the errors are carried through.
*/ (0, _hooks.useDidUpdate)(function() {
onChange === null || onChange === void 0 ? void 0 : onChange(items);
}, [
JSON.stringify(items)
]);
var isRequired = typeof withAsterisk === 'boolean' ? withAsterisk : required;
var _label = label ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Input.Label, _object_spread_props._(_object_spread._({
required: isRequired
}, labelProps), {
children: label
})) : null;
var _description = description ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Input.Description, _object_spread_props._(_object_spread._({}, descriptionProps), {
children: description
})) : null;
var _error = error ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Input.Error, _object_spread_props._(_object_spread._({}, errorProps), {
pt: "xs",
children: error
})) : null;
var _header = _label || _description ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core1.Stack, {
gap: "xxs",
pb: "xs",
children: [
_label,
_description
]
}) : null;
var standardizedItems = items.map(function(item, index) {
var _ref;
return {
id: (_ref = getItemId === null || getItemId === void 0 ? void 0 : getItemId(item, index)) !== null && _ref !== void 0 ? _ref : String(index),
data: item
};
});
var getIndex = function getIndex(id) {
return standardizedItems.findIndex(function(item) {
return item.id === id;
});
};
var handleDragEnd = function handleDragEnd(param) {
var over = param.over, active = param.active;
if (over) {
var activeIndex = getIndex(String(active.id));
var overIndex = getIndex(String(over.id));
if (activeIndex !== overIndex) {
onReorderItem === null || onReorderItem === void 0 ? void 0 : onReorderItem({
from: activeIndex,
to: overIndex
});
}
}
};
var addAllowed = typeof allowAdd === 'boolean' ? allowAdd : (_ref = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(items)) !== null && _ref !== void 0 ? _ref : true;
var handleAdd = function handleAdd() {
var _ref;
var newItemValue = typeof newItem === 'function' ? newItem() : newItem;
onInsertItem === null || onInsertItem === void 0 ? void 0 : onInsertItem(newItemValue, (_ref = items === null || items === void 0 ? void 0 : items.length) !== null && _ref !== void 0 ? _ref : 0);
};
var _addButton = canEdit ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_CollectionAddButton.CollectionAddButton, {
addLabel: addLabel,
addDisabledTooltip: addDisabledTooltip,
addAllowed: addAllowed,
onAdd: handleAdd
}) : null;
// Column-based layout pattern
if (columns) {
var Layout = layout || _CollectionLayouts.CollectionLayouts.Horizontal;
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_CollectionContext.CollectionProvider, {
value: {
getStyles: getStyles,
columns: columns
},
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.DndContext, {
onDragEnd: handleDragEnd,
sensors: sensors,
modifiers: [
_modifiers.restrictToVerticalAxis,
_modifiers.restrictToParentElement
],
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_sortable.SortableContext, {
items: standardizedItems,
strategy: _sortable.verticalListSortingStrategy,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core1.Box, _object_spread_props._(_object_spread._({
ref: ref
}, others, getStyles('root')), {
children: [
_header,
/*#__PURE__*/ (0, _jsxruntime.jsxs)(Layout, {
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(Layout.Header, {
draggable: draggable && canEdit,
removable: canEdit && !(isRequired && hasOnlyOneItem)
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(Layout.Body, {
items: items,
onRemove: canEdit ? onRemoveItem : undefined,
removable: canEdit && !(isRequired && hasOnlyOneItem),
draggable: draggable && canEdit,
disabled: disabled,
readOnly: readOnly,
getItemId: getItemId,
gap: gap
})
]
}),
_addButton,
_error
]
}))
})
})
});
}
// Legacy children render prop pattern
var renderedItems = standardizedItems.map(function(item, index) {
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_CollectionItem.CollectionItem, {
id: item.id,
disabled: !canEdit,
draggable: draggable,
onRemove: function onRemove() {
return onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(index);
},
removable: !(isRequired && hasOnlyOneItem),
children: children(item.data, index)
}, item.id);
});
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_CollectionContext.CollectionProvider, {
value: {
getStyles: getStyles
},
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.DndContext, {
onDragEnd: handleDragEnd,
sensors: sensors,
modifiers: [
_modifiers.restrictToVerticalAxis,
_modifiers.restrictToParentElement
],
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_sortable.SortableContext, {
items: standardizedItems,
strategy: _sortable.verticalListSortingStrategy,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core1.Box, _object_spread_props._(_object_spread._({
ref: ref
}, others, getStyles('root')), {
children: [
_header,
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_core1.Stack, _object_spread_props._(_object_spread._({
gap: gap
}, getStyles('items')), {
children: [
renderedItems,
_addButton
]
})),
_error
]
}))
})
})
});
};
Collection.displayName = 'Collection';
Collection.extend = _createFactoryComponent.identity;
Collection.Layouts = _CollectionLayouts.CollectionLayouts;
//# sourceMappingURL=Collection.js.map