@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
139 lines (137 loc) • 4.74 kB
JavaScript
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU Lesser General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU Lesser General Public License for more details.
*
* You should have received a copy of the GNU Lesser General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
/*
* Copyright (C) 2007-2022 Crafter Software Corporation. All Rights Reserved.
*
* This program is free software: you can redistribute it and/or modify
* it under the terms of the GNU General Public License version 3 as published by
* the Free Software Foundation.
*
* This program is distributed in the hope that it will be useful,
* but WITHOUT ANY WARRANTY; without even the implied warranty of
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
* GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { defineMessages, useIntl } from 'react-intl';
import Button from '@mui/material/Button';
import SiteSearchFilterCheckboxes from '../SiteSearchFilterCheckboxes';
import SiteSearchFilterRadios from '../SiteSearchFilterRadios';
import SiteSearchRangeSelector from '../SiteSearchRangeSelector';
import React from 'react';
import { makeStyles } from 'tss-react/mui';
const useStyles = makeStyles()((theme) => ({
filterActions: {
textAlign: 'right'
},
button: {
margin: theme.spacing(1)
}
}));
const messages = defineMessages({
apply: {
id: 'words.apply',
defaultMessage: 'Apply'
},
clear: {
id: 'words.clear',
defaultMessage: 'Clear'
}
});
export function SiteSearchFilter(props) {
const { classes } = useStyles();
const { formatMessage } = useIntl();
const {
facet,
handleFilterChange,
facetsLookupTable,
facetLabelLookup,
checkedFilters,
setCheckedFilters,
handleClearClick
} = props;
const handleCheckboxClick = (key, checked, facet) => {
const facetFilter = checkedFilters[facet] || {};
facetFilter[key] = checked;
setCheckedFilters(Object.assign(Object.assign({}, checkedFilters), { [facet]: facetFilter }));
};
const handleRadioClick = (value, facet) => {
if (value === '') {
value = undefined;
}
handleFilterChange({ name: facet, value: value }, true);
};
const handleApplyClick = (facet) => {
if (checkedFilters[facet]) {
let values = Object.keys(checkedFilters[facet]).filter((name) => checkedFilters[facet][name]);
if (values.length === 0) {
values = undefined;
}
handleFilterChange({ name: facet, value: values }, true);
}
};
return React.createElement(
'div',
null,
React.createElement(
'div',
{ className: classes.filterActions },
React.createElement(
Button,
{ variant: 'outlined', className: classes.button, onClick: () => handleClearClick(facet) },
formatMessage(messages.clear)
),
facetsLookupTable[facet].multiple &&
React.createElement(
Button,
{ variant: 'contained', color: 'primary', className: classes.button, onClick: () => handleApplyClick(facet) },
formatMessage(messages.apply)
)
),
React.createElement(
'div',
{ className: 'filterBody' },
facetsLookupTable[facet].multiple
? React.createElement(SiteSearchFilterCheckboxes, {
facetData: facetsLookupTable[facet],
facet: facet,
facetLabelLookup: facetLabelLookup,
handleCheckboxClick: handleCheckboxClick,
checkedFilters: checkedFilters
})
: React.createElement(
React.Fragment,
null,
React.createElement(SiteSearchFilterRadios, {
facetData: facetsLookupTable[facet],
facet: facet,
handleRadioClick: handleRadioClick,
checkedFilters: checkedFilters
}),
facetsLookupTable[facet].range &&
!facetsLookupTable[facet].date &&
React.createElement(SiteSearchRangeSelector, {
facet: facet,
handleFilterChange: handleFilterChange,
checkedFilters: checkedFilters
})
)
)
);
}
export default SiteSearchFilter;