@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
207 lines (206 loc) • 8.91 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 _plasmareacticons = require("@coveord/plasma-react-icons");
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 _utils = require("../../utils");
var _button = require("../button");
var _Collectionmodulecss = /*#__PURE__*/ _interop_require_default._(require("./Collection.module.css"));
var _CollectionContext = require("./CollectionContext");
var _CollectionItem = require("./CollectionItem");
var defaultProps = {
draggable: false,
addLabel: 'Add item',
addDisabledTooltip: 'There is already an empty item',
disabled: false,
readOnly: false,
gap: 'xs',
required: false,
getItemId: function(param) {
var id = param.id;
return id;
}
};
var Collection = function(props) {
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, 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",
"gap",
"required",
"newItem",
"addLabel",
"addDisabledTooltip",
"allowAdd",
"label",
"labelProps",
"withAsterisk",
"description",
"descriptionProps",
"error",
"errorProps",
"getItemId",
"ref",
"style",
"className",
"classNames",
"styles",
"unstyled"
]);
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 hasOnlyOneItem = value.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(value);
}, [
JSON.stringify(value)
]);
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), {
children: error
})) : null;
var _header = _label || _description ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
children: [
_label,
_description
]
}) : null;
var standardizedItems = value.map(function(item, index) {
var _getItemId;
return {
id: (_getItemId = getItemId === null || getItemId === void 0 ? void 0 : getItemId(item)) !== null && _getItemId !== void 0 ? _getItemId : String(index),
data: item
};
});
var items = standardizedItems.map(function(item, index) {
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_CollectionItem.CollectionItem, {
id: item.id,
disabled: !canEdit,
draggable: draggable,
onRemove: function() {
return onRemoveItem === null || onRemoveItem === void 0 ? void 0 : onRemoveItem(index);
},
removable: !(required && hasOnlyOneItem),
children: children(item.data, index)
}, item.id);
});
var _allowAdd;
var addAllowed = (_allowAdd = allowAdd === null || allowAdd === void 0 ? void 0 : allowAdd(value)) !== null && _allowAdd !== void 0 ? _allowAdd : true;
var _addButton = canEdit ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Group, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Tooltip, {
label: addDisabledTooltip,
disabled: addAllowed,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core1.Box, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_button.Button, {
variant: "subtle",
leftSection: /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.AddSize16Px, {
height: 16
}),
onClick: function() {
var _value_length;
return onInsertItem(newItem, (_value_length = value === null || value === void 0 ? void 0 : value.length) !== null && _value_length !== void 0 ? _value_length : 0);
},
disabled: !addAllowed,
children: addLabel
})
})
})
}) : null;
var getIndex = function(id) {
return standardizedItems.findIndex(function(item) {
return item.id === id;
});
};
var handleDragEnd = function(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
});
}
}
};
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, {
gap: gap,
children: [
items,
_addButton,
_error
]
})
]
}))
})
})
});
};
Collection.extend = _utils.identity;
//# sourceMappingURL=Collection.js.map