/*
* SPDX-FileCopyrightText: 2021-2023 The Refinery Authors
*
* SPDX-License-Identifier: EPL-2.0
*/
import CloseIcon from '@mui/icons-material/Close';
import FindReplaceIcon from '@mui/icons-material/FindReplace';
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp';
import Button from '@mui/material/Button';
import Checkbox from '@mui/material/Checkbox';
import FormControlLabel from '@mui/material/FormControlLabel';
import FormHelperText from '@mui/material/FormHelperText';
import IconButton from '@mui/material/IconButton';
import Stack from '@mui/material/Stack';
import TextField from '@mui/material/TextField';
import ToggleButton from '@mui/material/ToggleButton';
import Toolbar from '@mui/material/Toolbar';
import { styled } from '@mui/material/styles';
import useMediaQuery from '@mui/material/useMediaQuery';
import { observer } from 'mobx-react-lite';
import { useCallback, useState } from 'react';
import type SearchPanelStore from './SearchPanelStore';
const SPLIT_MEDIA_QUERY = '@media (max-width: 1200px)';
const DimLabel = styled(FormControlLabel)(({ theme }) => ({
'.MuiFormControlLabel-label': {
...theme.typography.body2,
color: theme.palette.text.secondary,
},
}));
export default observer(function SearchToolbar({
searchPanelStore,
}: {
searchPanelStore: SearchPanelStore;
}): JSX.Element {
const {
id: panelId,
query: { search, valid, caseSensitive, literal, regexp, replace },
invalidRegexp,
} = searchPanelStore;
const split = useMediaQuery(SPLIT_MEDIA_QUERY);
const [showRepalceState, setShowReplaceState] = useState(false);
const showReplace = !split || showRepalceState || replace !== '';
const searchHelperId = `${panelId}-search-helper`;
const replaceId = `${panelId}-replace`;
const searchFieldRef = useCallback(
(element: HTMLInputElement | null) =>
searchPanelStore.setSearchField(element ?? undefined),
[searchPanelStore],
);
return (
searchPanelStore.updateQuery({ search: event.target.value })
}
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault();
if (event.shiftKey) {
searchPanelStore.findPrevious();
} else {
searchPanelStore.findNext();
}
}
}}
variant="standard"
size="small"
sx={{ mt: '4px', mr: 1 }}
inputRef={searchFieldRef}
/>
{invalidRegexp && (
({
my: 0,
mr: 1,
fontSize: 'inherit',
color: theme.palette.error.main,
})}
>
Invalid regexp
)}
searchPanelStore.findPrevious()}
color="inherit"
>
searchPanelStore.findNext()}
color="inherit"
>
searchPanelStore.updateQuery({
caseSensitive: event.target.checked,
})
}
size="small"
/>
}
label="Match case"
/>
searchPanelStore.updateQuery({
literal: event.target.checked,
})
}
size="small"
/>
}
label="Literal"
/>
searchPanelStore.updateQuery({
regexp: event.target.checked,
})
}
size="small"
/>
}
label="Regexp"
/>
{split && (
{
if (showReplace) {
searchPanelStore.updateQuery({ replace: '' });
setShowReplaceState(false);
} else {
setShowReplaceState(true);
}
}}
aria-label="Show replace options"
aria-controls={replaceId}
size="small"
className="iconOnly"
>
)}
searchPanelStore.updateQuery({ replace: event.target.value })
}
onKeyDown={(event) => {
if (event.key === 'Enter') {
event.preventDefault();
searchPanelStore.replaceNext();
}
}}
variant="standard"
size="small"
sx={{ mt: '4px', mr: 1 }}
/>
searchPanelStore.close()}
color="inherit"
>
);
});