@craftercms/studio-ui
Version:
Services, components, models & utils to build CrafterCMS authoring extensions.
129 lines (127 loc) • 4.37 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 React from 'react';
import { makeStyles } from 'tss-react/mui';
import IconButton from '@mui/material/IconButton';
import { defineMessages, useIntl } from 'react-intl';
import Typography from '@mui/material/Typography';
import LauncherOpenerButton from '../LauncherOpenerButton/LauncherOpenerButton';
import SearchBar from '../SearchBar/SearchBar';
import ListViewIcon from '@mui/icons-material/ViewStreamRounded';
import GridViewIcon from '@mui/icons-material/GridOnRounded';
import ViewToolbar from '../ViewToolbar';
import Tooltip from '@mui/material/Tooltip';
import LogoAndMenuBundleButton from '../LogoAndMenuBundleButton';
const translations = defineMessages({
showHideFilters: {
id: 'searchToolBar.showHideFilters',
defaultMessage: 'Show/hide filters'
},
search: {
id: 'words.search',
defaultMessage: 'Search'
},
changeViewButtonTip: {
id: 'searchToolBar.changeViewButtonTooltip',
defaultMessage: 'Change view'
},
toggleSidebarTooltip: {
id: 'words.filters',
defaultMessage: 'Filters'
}
});
const useStyles = makeStyles()((theme) => ({
searchBarContainer: {
width: '30%',
[theme.breakpoints.up('md')]: {
minWidth: '500px'
}
},
searchPaper: {
flex: 1
}
}));
export function SiteSearchToolBar(props) {
const { onChange, keyword, showActionButton, showTitle, handleChangeView, currentView, onMenuIconClick, embedded } =
props;
const { formatMessage } = useIntl();
const { classes } = useStyles();
return React.createElement(
ViewToolbar,
null,
React.createElement(
'section',
null,
React.createElement(
Tooltip,
{ title: formatMessage(translations.toggleSidebarTooltip) },
React.createElement(LogoAndMenuBundleButton, {
'aria-label': formatMessage(translations.showHideFilters),
onClick: onMenuIconClick,
showCrafterIcon: !embedded
})
),
showTitle &&
React.createElement(
Typography,
{ variant: 'h5', component: 'h2', color: 'textPrimary' },
formatMessage(translations.search)
)
),
React.createElement(
'section',
{ className: classes.searchBarContainer },
React.createElement(SearchBar, {
onChange: onChange,
keyword: keyword,
showActionButton: showActionButton,
showDecoratorIcon: true,
classes: { root: classes.searchPaper },
autoFocus: true
})
),
React.createElement(
'section',
null,
React.createElement(
Tooltip,
{ title: formatMessage(translations.changeViewButtonTip) },
React.createElement(
IconButton,
{ onClick: handleChangeView, size: 'large' },
currentView === 'grid' ? React.createElement(ListViewIcon, null) : React.createElement(GridViewIcon, null)
)
),
!embedded && React.createElement(LauncherOpenerButton, null)
)
);
}
export default SiteSearchToolBar;