@coveord/plasma-mantine
Version:
A Plasma flavoured Mantine theme
236 lines (235 loc) • 11.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
Object.defineProperty(exports, "Facet", {
enumerable: true,
get: function() {
return Facet;
}
});
var _define_property = require("@swc/helpers/_/_define_property");
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 _sliced_to_array = require("@swc/helpers/_/_sliced_to_array");
var _to_consumable_array = require("@swc/helpers/_/_to_consumable_array");
var _jsxruntime = require("react/jsx-runtime");
var _plasmareacticons = require("@coveord/plasma-react-icons");
var _core = require("@mantine/core");
var _hooks = require("@mantine/hooks");
var _clsx = require("clsx");
var _react = require("react");
var _groupOptions = require("../../utils/groupOptions.js");
var _DefaultFacetItem = require("./DefaultFacetItem.js");
var _Facetmodulecss = /*#__PURE__*/ _interop_require_default._(require("./Facet.module.css"));
var _FacetScrollArea = require("./FacetScrollArea.js");
var defaultProps = {
searchPlaceholder: 'Search',
nothingFound: 'No matching items',
placeholder: 'No items',
height: 200,
limit: Infinity,
itemComponent: _DefaultFacetItem.DefaultFacetItem,
listComponent: _FacetScrollArea.FacetScrollArea,
removable: false
};
var Facet = (0, _core.factory)(function(_props, ref) {
var props = (0, _core.useProps)('Facet', defaultProps, _props);
var className = props.className, data = props.data, onChange = props.onChange, onRemove = props.onRemove, _props_initialSelection = props.initialSelection, initialSelection = _props_initialSelection === void 0 ? [] : _props_initialSelection, removable = props.removable, selection = props.selection, ItemComponent = props.itemComponent, ListComponent = props.listComponent, itemCountFormatter = props.itemCountFormatter, searchPlaceholder = props.searchPlaceholder, query = props.query, _props_hideSearch = props.hideSearch, hideSearch = _props_hideSearch === void 0 ? data.length <= 7 : _props_hideSearch, onSearch = props.onSearch, _props_filter = props.filter, filter = _props_filter === void 0 ? defaultFilter : _props_filter, nothingFound = props.nothingFound, placeholder = props.placeholder, title = props.title, height = props.height, radius = props.radius, __staticSelector = props.__staticSelector, classNames = props.classNames, styles = props.styles, limit = props.limit, unstyled = props.unstyled, others = _object_without_properties._(props, [
"className",
"data",
"onChange",
"onRemove",
"initialSelection",
"removable",
"selection",
"itemComponent",
"listComponent",
"itemCountFormatter",
"searchPlaceholder",
"query",
"hideSearch",
"onSearch",
"filter",
"nothingFound",
"placeholder",
"title",
"height",
"radius",
"__staticSelector",
"classNames",
"styles",
"limit",
"unstyled"
]);
var combobox = (0, _core.useCombobox)();
var _useUncontrolled = _sliced_to_array._((0, _hooks.useUncontrolled)({
value: query,
defaultValue: '',
finalValue: '',
onChange: onSearch
}), 2), search = _useUncontrolled[0], handleSearch = _useUncontrolled[1];
var _useUncontrolled1 = _sliced_to_array._((0, _hooks.useUncontrolled)({
value: selection,
defaultValue: initialSelection,
finalValue: [],
onChange: onChange
}), 2), _selection = _useUncontrolled1[0], handleSelection = _useUncontrolled1[1];
var unGroupedItems = [];
var groupedItems = [];
var filteredData = data.filter(function(item) {
return filter(search, item);
}).slice(0, limit);
var sortedData = (0, _groupOptions.groupOptions)({
data: filteredData
});
var handleValueSelect = function handleValueSelect(val) {
return handleSelection(_selection.includes(val) ? _selection.filter(function(v) {
return v !== val;
}) : _to_consumable_array._(_selection).concat([
val
]));
};
var groupName = null;
(0, _react.useEffect)(function() {
combobox.openDropdown();
}, []);
sortedData.forEach(function(item) {
var isSelected = _selection.includes(item.value);
var itemComponent = /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Combobox.Option, {
"aria-selected": isSelected ? true : false,
value: item.value,
onMouseEnter: function onMouseEnter() {
return combobox.resetSelectedOption();
},
className: (0, _clsx.clsx)(_Facetmodulecss.default.facetItem),
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ItemComponent, {
data: item,
selected: isSelected,
countFormatter: itemCountFormatter
})
}, item.value);
if (!item.group) {
unGroupedItems.push(itemComponent);
} else {
if (groupName !== item.group) {
groupName = item.group;
groupedItems.push(/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: _Facetmodulecss.default.separator,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Divider, {
classNames: {
label: _Facetmodulecss.default.separatorLabel
},
label: groupName
})
}, groupName));
}
groupedItems.push(itemComponent);
}
});
if (groupedItems.length > 0 && unGroupedItems.length > 0) {
unGroupedItems.unshift(/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: _Facetmodulecss.default.separator,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Divider, {
unstyled: unstyled,
classNames: {
label: _Facetmodulecss.default.separatorLabel
}
})
}, "ungrouped-separator"));
}
return /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Box, _object_spread_props._(_object_spread._({
className: (0, _clsx.clsx)(_Facetmodulecss.default.facet, className)
}, others), {
ref: ref,
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Combobox, {
store: combobox,
onOptionSubmit: handleValueSelect,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Combobox.EventsTarget, {
children: /*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Box, {
className: _Facetmodulecss.default.facetHeader,
children: [
/*#__PURE__*/ (0, _jsxruntime.jsxs)(_core.Group, {
wrap: "nowrap",
justify: "space-between",
className: _Facetmodulecss.default.facetTitleRow,
children: [
title ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Title, {
order: 5,
className: _Facetmodulecss.default.facetTitle,
children: title
}) : null,
removable ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.CloseButton, {
onClick: onRemove,
className: _Facetmodulecss.default.facetRemoveButton,
"aria-label": "remove facet"
}) : null
]
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)(_core.TextInput, {
unstyled: unstyled,
value: search,
onChange: function onChange(event) {
handleSearch(event.currentTarget.value);
combobox.updateSelectedOptionIndex();
},
placeholder: searchPlaceholder,
"aria-hidden": hideSearch,
tabIndex: hideSearch ? -1 : undefined,
className: (0, _clsx.clsx)(_Facetmodulecss.default.facetSearch, _define_property._({}, _Facetmodulecss.default.hiddenSearch, hideSearch)),
rightSection: search ? /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.CloseButton, {
"aria-label": "clear search",
onClick: function onClick() {
handleSearch('');
}
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_plasmareacticons.IconSearch, {
height: 16
})
})
]
})
}),
/*#__PURE__*/ (0, _jsxruntime.jsx)("div", {
className: _Facetmodulecss.default.facetBody,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Combobox.EventsTarget, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(ListComponent, {
className: _Facetmodulecss.default.facetItems,
mah: height,
style: {
overflow: 'auto',
position: 'relative'
},
tabIndex: hideSearch ? 0 : undefined,
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Combobox.Options, {
"aria-multiselectable": "true",
children: groupedItems.length > 0 || unGroupedItems.length > 0 ? /*#__PURE__*/ (0, _jsxruntime.jsxs)(_jsxruntime.Fragment, {
children: [
groupedItems,
unGroupedItems
]
}) : /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Combobox.Empty, {
children: /*#__PURE__*/ (0, _jsxruntime.jsx)(_core.Text, {
c: "dimmed",
unstyled: unstyled,
size: "sm",
ta: "center",
my: "sm",
children: !search && placeholder ? placeholder : nothingFound
})
})
})
})
})
})
]
})
}));
});
Facet.displayName = 'Facet';
var defaultFilter = function defaultFilter(query, item) {
return item.label.toLowerCase().trim().includes(query.toLowerCase().trim()) || item.value.toLowerCase().trim().includes(query.toLowerCase().trim());
};
//# sourceMappingURL=Facet.js.map