@talend/react-faceted-search
Version:
180 lines (179 loc) • 8.55 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.BasicSearch = void 0;
var _react = require("react");
var _propTypes = _interopRequireDefault(require("prop-types"));
var _designSystem = require("@talend/design-system");
var _constants = require("../../constants");
var _badge = require("../../dictionary/badge.dictionary");
var _operator = require("../../dictionary/operator.dictionary");
var _facetedBadges = require("../../hooks/facetedBadges.hook");
var _AddFacetPopover = require("../AddFacetPopover");
var _BadgesGenerator = require("../BadgesGenerator");
var _badgeFaceted = require("../context/badgeFaceted.context");
var _facetedSearch = require("../context/facetedSearch.context");
var _facetedSearch2 = require("../facetedSearch.propTypes");
var _QuickSearchInput = require("../QuickSearchInput");
var _QuickSearchInput2 = require("../QuickSearchInput/QuickSearchInput.component");
var _badgeDefinition = require("../types/badgeDefinition.type");
var _BasicSearchModule = _interopRequireDefault(require("./BasicSearch.module.scss"));
var _lodash = require("lodash");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const isInCreation = badge => (0, _lodash.get)(badge, 'metadata.isInCreation', true);
const BasicSearch = ({
badgesDefinitions = [],
badgesFaceted,
initialBadges = [],
customBadgesDictionary,
customOperatorsDictionary,
initialFilterValue,
onSubmit,
setBadgesFaceted,
callbacks,
badgesDefinitionsSort,
quickSearchPlaceholder,
quickSearchFacetsFilter,
quickSearchInputProps,
quickSearchTypeaheadProps,
disclosureProps
}) => {
const {
id,
t
} = (0, _facetedSearch.useFacetedSearchContext)();
const operatorsDictionary = (0, _react.useMemo)(() => (0, _operator.createOperatorsDict)(t, customOperatorsDictionary), [t, customOperatorsDictionary]);
const badgesDictionary = (0, _react.useMemo)(() => (0, _badge.createBadgesDict)(customBadgesDictionary), [customBadgesDictionary]);
const badges = (0, _react.useMemo)(() => (0, _badge.filterBadgeDefinitionsWithDictionary)(badgesDictionary, badgesDefinitions), [badgesDictionary, badgesDefinitions]);
const [state, dispatch] = (0, _facetedBadges.useFacetedBadges)(badgesFaceted, setBadgesFaceted);
const quicksearchable = (0, _react.useMemo)(() => badgesDefinitions.filter(({
metadata = {}
}) => metadata.isAvailableForQuickSearch), [badgesDefinitions]);
const [badgeState, setBadgeState] = (0, _react.useState)(state.badges);
(0, _react.useEffect)(() => {
if (!state.badges.some(isInCreation) && !(0, _lodash.isEqual)(badgeState, state.badges)) {
setBadgeState(state.badges);
onSubmit({}, state.badges);
}
}, [state.badges, onSubmit]);
(0, _react.useEffect)(() => {
initialBadges.forEach(initial => {
const facet = badges.find(({
properties
}) => properties.attribute === initial.attribute);
const operators = (0, _operator.getOperatorsFromDict)(operatorsDictionary, (0, _lodash.get)(facet, 'metadata.operators'));
dispatch(_facetedBadges.BADGES_ACTIONS.addWithValue((0, _badgeDefinition.generateBadge)(operators)(facet), operatorsDictionary[initial.operator], initial.value));
});
// This is intended
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
const onClickOverlayRow = (_, badgeDefinition) => {
const operators = (0, _operator.getOperatorsFromDict)(operatorsDictionary, (0, _lodash.get)(badgeDefinition, 'metadata.operators'));
dispatch(_facetedBadges.BADGES_ACTIONS.add((0, _badgeDefinition.generateBadge)(operators)(badgeDefinition)));
};
const basicSearchId = `${id}-basic-search`;
const badgeFacetedContextValue = {
state,
dispatch,
onSubmit
};
// removable = undefined means badge can be removed (backward compatible change)
const hasRemovableBadge = state.badges.some(badge => badge.properties.removable !== false);
const quickSearchMinLength = Math.max(quicksearchable.map(quicksearchableItem => {
var _quicksearchableItem$;
return (_quicksearchableItem$ = quicksearchableItem.metadata) === null || _quicksearchableItem$ === void 0 ? void 0 : _quicksearchableItem$.minLength;
})) || 1;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
id: basicSearchId,
className: _BasicSearchModule.default['tc-basic-search'],
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_QuickSearchInput.QuickSearchInput, {
t: t,
className: _BasicSearchModule.default['tc-basic-search-quicksearch'],
facets: quicksearchable,
placeholder: quickSearchPlaceholder,
facetsFilter: quickSearchFacetsFilter,
onSelect: (facet, value) => {
const operators = (0, _operator.getOperatorsFromDict)(operatorsDictionary, (0, _lodash.get)(facet, 'metadata.operators'));
dispatch(_facetedBadges.BADGES_ACTIONS.addWithValue((0, _badgeDefinition.generateBadge)(operators)(facet), operators.find(({
name
}) => name === _QuickSearchInput2.DEFAULT_QUICKSEARCH_OPERATOR) || operators[0], value));
},
inputProps: quickSearchInputProps,
minLength: quickSearchMinLength,
typeaheadProps: quickSearchTypeaheadProps
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
className: _BasicSearchModule.default['tc-basic-search-content'],
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_badgeFaceted.BadgeFacetedProvider, {
value: badgeFacetedContextValue,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_BadgesGenerator.BadgesGenerator, {
badges: state.badges,
badgesDictionary: badgesDictionary,
getBadgeFromDict: _badge.getBadgesFromDict,
id: basicSearchId,
callbacks: callbacks,
t: t
})
}), badgesDefinitions.length > 0 && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.Popover, {
position: "bottom",
isFixed: true,
disclosure: /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonSecondary, {
size: "S",
isDropdown: true,
"data-feature": _constants.USAGE_TRACKING_TAGS.BASIC_ADD,
...disclosureProps,
children: t('BASIC_SEARCH_ADD_FILTER', 'Add filter')
}),
children: popover => /*#__PURE__*/(0, _jsxRuntime.jsx)(_AddFacetPopover.AddFacetPopover, {
badges: state.badges,
badgesDefinitions: badges,
badgesDefinitionsSort: badgesDefinitionsSort,
id: basicSearchId,
initialFilterValue: initialFilterValue,
onClick: (...args) => {
onClickOverlayRow(...args);
popover === null || popover === void 0 ? void 0 : popover.hide();
},
t: t
})
})
})]
}), hasRemovableBadge && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
className: _BasicSearchModule.default['tc-basic-search-clear-content'],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_designSystem.ButtonIcon, {
icon: "trash",
size: "S",
"data-feature": _constants.USAGE_TRACKING_TAGS.BASIC_CLEAR,
onClick: () => dispatch(_facetedBadges.BADGES_ACTIONS.deleteAll()),
children: t('FACETED_SEARCH_BASIC_CLEAR', 'Remove all filters')
})
})]
});
};
exports.BasicSearch = BasicSearch;
BasicSearch.propTypes = {
badgesDefinitions: _facetedSearch2.badgesFacetedPropTypes,
badgesDefinitionsSort: _propTypes.default.func,
badgesFaceted: _propTypes.default.shape({
badges: _facetedSearch2.badgesFacetedPropTypes
}),
initialBadges: _propTypes.default.arrayOf(_propTypes.default.shape({
attribute: _propTypes.default.string,
value: _propTypes.default.any,
operator: _propTypes.default.string
})),
customBadgesDictionary: _propTypes.default.object,
customOperatorsDictionary: _facetedSearch2.operatorsPropTypes,
initialFilterValue: _propTypes.default.string,
quickSearchPlaceholder: _propTypes.default.string,
/* Can be used to filter facets displayed when input changes; (term, facets) => [facets] */
quickSearchFacetsFilter: _propTypes.default.func,
onSubmit: _propTypes.default.func.isRequired,
setBadgesFaceted: _propTypes.default.func,
callbacks: _facetedSearch2.callbacksPropTypes,
quickSearchInputProps: _propTypes.default.object,
disclosureProps: _propTypes.default.object
};
//# sourceMappingURL=BasicSearch.component.js.map