@talend/react-faceted-search
Version:
124 lines (123 loc) • 5.84 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AddFacetPopover = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _facetedSearch = require("../facetedSearch.propTypes");
var _AddFacetPopoverHeader = require("./AddFacetPopoverHeader");
var _AddFacetPopoverRow = require("./AddFacetPopoverRow");
var _AddFacetPopoverModule = _interopRequireDefault(require("./AddFacetPopover.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const filterByLabel = label => row => {
const rowLabel = (0, _lodash.isString)(row) ? row : row.properties.label;
return rowLabel.toLocaleLowerCase().includes(label.toLocaleLowerCase().trim());
};
const filterByNotEmpty = row => {
const label = (0, _lodash.isString)(row) ? row : row.properties.label;
return label.trim() !== '';
};
const sortByLabel = (rowA, rowB) => {
const labelA = (0, _lodash.isString)(rowA) ? rowA : rowA.properties.label;
const labelB = (0, _lodash.isString)(rowB) ? rowB : rowB.properties.label;
return labelA.localeCompare(labelB);
};
const getCategories = badgesDefinitions => {
const categories = badgesDefinitions.filter(badgeDefinition => !!badgeDefinition.metadata.category).map(badgeDefinition => badgeDefinition.metadata.category);
return (0, _lodash.uniq)(categories);
};
const getScreens = (badgesDefinitions, filterValue, comparator = sortByLabel) => {
const visibleBadges = badgesDefinitions.filter(badgeDefinition => badgeDefinition.metadata.isAvailableForFacetList !== false);
const categories = getCategories(visibleBadges);
const screens = [{
category: null,
rows: visibleBadges.filter((definition, index, arr) => !definition.metadata.category ||
// remove category duplicates
arr.findIndex(prev => prev.metadata.category === definition.metadata.category) === index).map(badgeDefinition => badgeDefinition.metadata.category || badgeDefinition).filter(filterByNotEmpty).filter(filterByLabel(filterValue))
}, ...categories.map(categoryName => ({
category: categoryName,
rows: badgesDefinitions.filter(badgeDefinition => badgeDefinition.metadata.category === categoryName).filter(filterByNotEmpty).filter(filterByLabel(filterValue))
}))];
if (comparator) {
screens.forEach(screen => screen.rows.sort(comparator));
}
return screens;
};
const AddFacetPopover = ({
badgesDefinitions = [],
badgesDefinitionsSort,
badges,
id,
initialFilterValue,
onClick,
t
}) => {
const addFacetId = `${id}-add-facet-popover`;
const [category, setCategory] = (0, _react.useState)(null);
const [filterValue, setFilterValue] = (0, _react.useState)(initialFilterValue || '');
const getScreensMemo = (0, _react.useCallback)(() => getScreens(badgesDefinitions, filterValue, badgesDefinitionsSort), [badgesDefinitions, filterValue, badgesDefinitionsSort]);
const screens = getScreensMemo();
const screensRef = (0, _react.useRef)((0, _lodash.times)(screens.length, _react.createRef));
const onFilter = event => {
var _event$target;
setFilterValue((event === null || event === void 0 ? void 0 : (_event$target = event.target) === null || _event$target === void 0 ? void 0 : _event$target.value) || '');
};
const resetFilter = () => setFilterValue('');
const onCategoryChange = newCategory => {
setCategory(newCategory);
resetFilter();
};
const onRowClick = (...args) => {
setCategory(null);
onClick(...args);
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
id: addFacetId,
className: _AddFacetPopoverModule.default['tc-add-facet-popover'],
children: screens.map((screen, index) => category === screen.category ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_designSystem.Form, {
ref: screensRef.current[index],
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_AddFacetPopoverHeader.AddFacetPopoverHeader, {
id: `${addFacetId}-${category}`,
category: screen.category,
onCategoryChange: onCategoryChange,
onFilter: onFilter,
filterValue: filterValue,
t: t
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: _AddFacetPopoverModule.default['tc-add-facet-popover-items'],
"data-test": "add-facet-popover-items",
"data-testid": "add-facet-popover-items",
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_designSystem.StackVertical, {
gap: "0",
children: [filterValue !== '' && !screen.rows.length && t('ADD_FACET_FILTER_NO_RESULT', 'No result found'), screen.rows.map(rowItem => (0, _lodash.isString)(rowItem) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_AddFacetPopoverRow.AddFacetPopoverRowItemCategory, {
id: `${id}-open-category`,
label: rowItem,
onClick: onCategoryChange
}, rowItem) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_AddFacetPopoverRow.AddFacetPopoverRowItem, {
badgeDefinition: rowItem,
id: addFacetId,
label: rowItem.properties.label,
onClick: onRowClick,
badges: badges,
t: t
}, rowItem.properties.label))]
})
})]
}, `screen-${screen.category}`) : null)
});
};
exports.AddFacetPopover = AddFacetPopover;
AddFacetPopover.propTypes = {
id: _propTypes.default.string.isRequired,
initialFilterValue: _propTypes.default.string,
badgesDefinitions: _facetedSearch.badgesFacetedPropTypes,
badgesDefinitionsSort: _propTypes.default.func,
badges: _propTypes.default.array.isRequired,
onClick: _propTypes.default.func.isRequired,
t: _propTypes.default.func.isRequired
};
//# sourceMappingURL=AddFacetPopover.component.js.map