@findify/react-components
Version:
Findify react UI components
68 lines (67 loc) • 2.35 kB
JavaScript
/**
* @module components/search/DesktopFacets
*/
import Text from "../../Text";
import Icon from "../../Icon";
import Button from "../../Button";
var styles = {
"root": "findify-components-search--desktop-facets",
"container": "findify-components-search--desktop-facets__container",
"sticky": "findify-components-search--desktop-facets__sticky",
"horizontal": "findify-components-search--desktop-facets__horizontal",
"header": "findify-components-search--desktop-facets__header",
"title": "findify-components-search--desktop-facets__title",
"icon": "findify-components-search--desktop-facets__icon",
"reset": "findify-components-search--desktop-facets__reset",
"hide": "findify-components-search--desktop-facets__hide"
};
import useTranslations from "../../../helpers/useTranslations";
/** Props that hidable facet titles accept */
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
export default (function (_ref) {
var _ref$theme = _ref.theme,
theme = _ref$theme === void 0 ? styles : _ref$theme,
meta = _ref.meta,
onReset = _ref.onReset,
onHide = _ref.onHide,
hidable = _ref.hidable;
var translate = useTranslations();
return /*#__PURE__*/_jsxs("div", {
className: theme.header,
tabIndex: -1,
children: [/*#__PURE__*/_jsx(Icon, {
name: "Filters",
title: translate('facets.filters'),
className: theme.icon
}), /*#__PURE__*/_jsxs(Text, {
primary: true,
uppercase: true,
className: theme.title,
children: [translate('facets.filters'), meta.get('filters') && meta.get('filters').size ? /*#__PURE__*/_jsx(Button, {
tabIndex: -1,
onClick: onReset,
children: /*#__PURE__*/_jsxs(Text, {
secondary: true,
uppercase: true,
style: {
marginLeft: 5
},
children: ["(", translate('facets.clearAll'), ")"]
})
}) : null]
}), hidable ? /*#__PURE__*/_jsx(Button, {
tabIndex: -1,
className: theme.hide,
onClick: onHide,
children: /*#__PURE__*/_jsxs(Text, {
secondary: true,
uppercase: true,
children: [translate('facets.hide'), /*#__PURE__*/_jsx(Icon, {
name: "XDark",
title: "Hide filters"
})]
})
}) : null]
});
});