@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
284 lines (282 loc) • 8.87 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 ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
import Button from '@mui/material/Button';
import React, { useState } from 'react';
import Popover from '@mui/material/Popover';
import { defineMessages, useIntl } from 'react-intl';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import RadioGroup from '@mui/material/RadioGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Radio from '@mui/material/Radio';
import SearchIcon from '@mui/icons-material/SearchRounded';
import { Checkbox, FormGroup } from '@mui/material';
import { makeStyles } from 'tss-react/mui';
import Box from '@mui/material/Box';
const useStyles = makeStyles()((theme) => ({
paper: {
width: '300px'
},
header: {
background: theme.palette.mode === 'dark' ? theme.palette.background.default : theme.palette.grey['100'],
padding: '10px'
},
body: {
padding: '10px',
position: 'relative'
},
formControl: {
width: '100%',
padding: '5px 15px 20px 15px'
},
search: {
width: '100%',
margin: 'auto',
position: 'relative'
},
searchIcon: {
width: theme.spacing(7),
color: '#828282',
height: '41px;',
position: 'absolute',
pointerEvents: 'none',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
zIndex: 1
},
searchTextField: {
'& input': {
paddingLeft: '50px'
}
}
}));
const messages = defineMessages({
pathExpression: {
id: 'publishingDashboard.pathExpression',
defaultMessage: 'Path Expression'
},
environment: {
id: 'common.publishingTarget',
defaultMessage: 'Publishing Target'
},
state: {
id: 'publishingDashboard.state',
defaultMessage: 'State'
},
all: {
id: 'publishingDashboard.all',
defaultMessage: 'All'
},
READY_FOR_LIVE: {
id: 'publishingDashboard.READY_FOR_LIVE',
defaultMessage: 'Ready for Live'
},
PROCESSING: {
id: 'publishingDashboard.PROCESSING',
defaultMessage: 'Processing'
},
COMPLETED: {
id: 'publishingDashboard.COMPLETED',
defaultMessage: 'Completed'
},
CANCELLED: {
id: 'publishingDashboard.CANCELLED',
defaultMessage: 'Cancelled'
},
BLOCKED: {
id: 'publishingDashboard.BLOCKED',
defaultMessage: 'Blocked'
}
});
export function FilterDropdown(props) {
const [anchorEl, setAnchorEl] = React.useState(null);
const { classes } = useStyles();
const { text, className, handleFilterChange, handleEnterKey, currentFilters, filters } = props;
const [path, setPath] = useState('');
const { formatMessage } = useIntl();
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleClose = () => {
setAnchorEl(null);
};
const onKeyPress = (event, path) => {
if (event.charCode === 13) {
handleEnterKey(path);
}
};
return React.createElement(
'div',
null,
React.createElement(
Button,
{ variant: 'outlined', onClick: handleClick, className: className },
text,
' ',
React.createElement(ArrowDropDownIcon, null)
),
React.createElement(
Popover,
{
id: 'publishingFilterDropdown',
anchorEl: anchorEl,
classes: { paper: classes.paper },
keepMounted: true,
open: Boolean(anchorEl),
onClose: handleClose,
anchorOrigin: {
vertical: 'bottom',
horizontal: 'right'
},
transformOrigin: {
vertical: 'top',
horizontal: 'right'
}
},
React.createElement(
'section',
null,
React.createElement(
'header',
{ className: classes.header },
React.createElement(
Typography,
{ variant: 'body1' },
React.createElement('strong', null, formatMessage(messages.pathExpression))
)
),
React.createElement(
Box,
{ className: classes.body, display: 'flex', alignItems: 'center' },
React.createElement('div', { className: classes.searchIcon }, React.createElement(SearchIcon, null)),
React.createElement(TextField, {
id: 'path',
name: 'path',
className: classes.searchTextField,
InputLabelProps: { shrink: true },
fullWidth: true,
placeholder: 'e.g. /SOME/PATH/*',
onChange: (event) => setPath(event.target.value),
onKeyPress: (event) => onKeyPress(event, path),
value: path
})
)
),
React.createElement(
'section',
null,
React.createElement(
'header',
{ className: classes.header },
React.createElement(
Typography,
{ variant: 'body1' },
React.createElement('strong', null, formatMessage(messages.environment))
)
),
React.createElement(
'div',
{ className: classes.formControl },
React.createElement(
RadioGroup,
{
'aria-label': formatMessage(messages.environment),
name: 'environment',
value: currentFilters.environment,
onChange: handleFilterChange
},
React.createElement(FormControlLabel, {
value: '',
control: React.createElement(Radio, { color: 'primary' }),
label: formatMessage(messages.all)
}),
filters.environments &&
filters.environments.map((filter, index) =>
React.createElement(FormControlLabel, {
key: index,
value: filter,
control: React.createElement(Radio, { color: 'primary' }),
label: filter
})
)
)
)
),
React.createElement(
'section',
null,
React.createElement(
'header',
{ className: classes.header },
React.createElement(
Typography,
{ variant: 'body1', sx: { ml: '5px' } },
React.createElement(FormControlLabel, {
value: '',
label: React.createElement('strong', null, formatMessage(messages.state)),
control: React.createElement(Checkbox, {
color: 'primary',
value: '',
indeterminate: currentFilters.state.length > 0 && currentFilters.state.length !== filters.states.length,
checked: currentFilters.state.length === filters.states.length,
onChange: handleFilterChange
})
})
)
),
React.createElement(
'div',
{ className: classes.formControl },
React.createElement(
FormGroup,
null,
filters.states.map((filter, index) =>
React.createElement(FormControlLabel, {
key: index,
value: filter,
control: React.createElement(Checkbox, {
color: 'primary',
value: filter,
checked: currentFilters.state.includes(filter),
onChange: handleFilterChange
}),
label: formatMessage(messages[filter])
})
)
)
)
)
)
);
}
export default FilterDropdown;