@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
122 lines (120 loc) • 4.49 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 { capitalize, formatBytes } from '../../utils/string';
import RadioGroup from '@mui/material/RadioGroup';
import { nnou } from '../../utils/object';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import React from 'react';
import { makeStyles } from 'tss-react/mui';
const useStyles = makeStyles()(() => ({
checkboxLabel: {
width: '100%',
overflow: 'hidden',
display: '-webkit-box',
WebkitLineClamp: 1,
WebkitBoxOrient: 'vertical'
},
checkboxRoot: {
marginRight: '5px'
}
}));
const messages = defineMessages({
under: {
id: 'searchFilter.under',
defaultMessage: 'Under {value}{unit}'
},
above: {
id: 'searchFilter.above',
defaultMessage: 'Above {value}{unit}'
}
});
export function SiteSearchFilterRadios(props) {
const { facetData, facet, handleRadioClick, checkedFilters } = props;
const items = facetData.values;
const { classes } = useStyles();
const { formatMessage } = useIntl();
const formatValue = (facet, key, value) => {
if (facetData.date) {
return `${value.from}TODATE${value.to}ID${facet}${key}`;
} else if (facetData.range) {
return `${value.from !== null ? value.from : ''}TO${value.to !== null ? value.to : ''}`;
} else {
return key;
}
};
const formatLabel = (facet, key, value) => {
if (facet === 'size') {
if (value.from === null) {
return `${formatMessage(messages.under, { value: formatBytes(value.to), unit: '' })}`;
} else if (value.to === null) {
return `${formatMessage(messages.above, { value: formatBytes(value.from), unit: '' })}`;
} else {
return `${formatBytes(value.from)} - ${formatBytes(value.to)}`;
}
} else if (facet === 'width' || facet === 'height') {
if (value.from === null) {
return `${formatMessage(messages.under, { value: value.to, unit: 'px' })}`;
} else if (value.to === null) {
return `${formatMessage(messages.above, { value: value.from, unit: 'px' })}`;
} else {
return `${value.from}px - ${value.to}px`;
}
} else if (facet === 'last-edit-date') {
return capitalize(key.replace(/-/g, ' '));
}
return key;
};
return React.createElement(
RadioGroup,
null,
Object.keys(items).map((key) => {
let count = nnou(items[key].count) ? items[key].count : items[key];
let label = formatLabel(facet, key, items[key]);
let value = formatValue(facet, key, items[key]);
return React.createElement(FormControlLabel, {
key: key,
name: key,
onChange: (e) => handleRadioClick(e.target.value, facet),
control: React.createElement(Radio, {
checked: checkedFilters && checkedFilters[facet] === value,
color: 'primary',
value: value
}),
label: `${label} (${count})`,
labelPlacement: 'start',
classes: { root: classes.checkboxRoot, label: classes.checkboxLabel }
});
})
);
}
export default SiteSearchFilterRadios;