Merge pull request 'крестик для очистки строки поиска' (#307) from aurora-2023 into test

Reviewed-on: #307

web/src/components/RealtimeTable/RealtimeTable.jsx

@@ -107,6 +107,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 		editingCells: dataEditingCells,
 	} = useRealtimeData(formId, sheetName, direction, formType, year);
 	const [globalFilter, setGlobalFilter] = useState('');
+	const [searchInput, setSearchInput] = useState('');
 	const [searchMatchIndex, setSearchMatchIndex] = useState(-1);
 	const [activeSearchMatch, setActiveSearchMatch] = useState(null);
 	const [pendingSearchDirection, setPendingSearchDirection] = useState(0);
@@ -166,6 +167,10 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 	);
 
 	useEffect(() => () => handleGlobalFilterChange.clear(), [handleGlobalFilterChange]);
+	const handleSearchInputChange = useCallback((value) => {
+		setSearchInput(value);
+		handleGlobalFilterChange(value);
+	}, [handleGlobalFilterChange]);
 
 	const {
 		updateCell: contextUpdateCell,
@@ -803,6 +808,14 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 
 	const handleSearchNext = useCallback(() => navigateToSearchMatch(1), [navigateToSearchMatch]);
 	const handleSearchPrevious = useCallback(() => navigateToSearchMatch(-1), [navigateToSearchMatch]);
+	const handleClearSearch = useCallback(() => {
+		handleGlobalFilterChange.clear();
+		setPendingSearchDirection(0);
+		setSearchInput('');
+		setGlobalFilter('');
+		setSearchMatchIndex(-1);
+		setActiveSearchMatch(null);
+	}, [handleGlobalFilterChange]);
 
 	const handleSearchKeyDown = useCallback(
 		(event) => {
@@ -814,6 +827,7 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 
 			if (normalizeFilterValue(inputValue) !== normalizeFilterValue(globalFilter)) {
 				handleGlobalFilterChange.clear();
+				setSearchInput(inputValue);
 				setGlobalFilter(inputValue);
 				setPendingSearchDirection(direction);
 				return;
@@ -1070,8 +1084,9 @@ const RealtimeTable = ({ formType, formId, sheetName, direction, year }) => {
 				onChangeSizeMult={setSizeMult}
 				denomination={denomination}
 				onChangeDenomination={setTableDenomination}
-				onGlobalFilterChange={handleGlobalFilterChange}
+				onGlobalFilterChange={handleSearchInputChange}
-				globalFilter={globalFilter}
+				onClearSearch={handleClearSearch}
+				globalFilter={searchInput}
 				onSearchKeyDown={handleSearchKeyDown}
 				onSearchNext={handleSearchNext}
 				onSearchPrevious={handleSearchPrevious}

web/src/components/RealtimeTable/SettingPanel/SettingPanel.jsx

@@ -1,3 +1,4 @@
+import FilterAltOutlinedIcon from '@mui/icons-material/FilterAltOutlined';
 import { Divider, IconButton, Stack, Tooltip, Typography } from '@mui/material';
 import { memo, useCallback, useMemo, useState } from 'react';
 import { FORM_TYPE_OPTIONS } from '../../../constants/constants';
@@ -18,7 +19,6 @@ import {
 	Program,
 	Project,
 	RemoveLine,
-	Search,
 	VisibleExpenseItems,
 } from '../../common/icons/icons';
 import { collectLeafColumns } from '../utils/columnUtils';
@@ -76,6 +76,7 @@ const SettingPanel = ({
 	columnsCurStage,
 	onChangeSizeMult,
 	onGlobalFilterChange,
+	onClearSearch,
 	globalFilter,
 	onSearchKeyDown,
 	onSearchNext,
@@ -283,6 +284,8 @@ const SettingPanel = ({
 						<SearchComponent
 							value={globalFilter}
 							onChange={onGlobalFilterChange}
+							onClear={onClearSearch}
+							clearable
 							onKeyDown={onSearchKeyDown}
 							height='2.5rem'
 							sx={searchSx}
@@ -321,7 +324,7 @@ const SettingPanel = ({
 								data-active={showColumnFilters}
 								onClick={handleChangeShowColumnFilters}
 								sx={controlSx}>
-								<Search />
+								<FilterAltOutlinedIcon sx={{ width: '1rem', height: '1rem', color: '#99a1af' }} />
 							</IconButton>
 						</Tooltip>
 					</GroupByObject>

web/src/components/common/SearchComponent.jsx

@@ -1,8 +1,19 @@
-import { InputAdornment, TextField } from '@mui/material';
+import CloseIcon from '@mui/icons-material/Close';
+import { IconButton, InputAdornment, TextField } from '@mui/material';
 import { memo, useEffect, useRef, useState } from 'react';
 import { Search } from './icons/icons';
 
-function SearchComponent({ placeholder = 'Поиск...', value = '', onChange, debounceMs = 0, height = '2rem', sx: sxProp, ...rest }) {
+function SearchComponent({
+	placeholder = 'Поиск...',
+	value = '',
+	onChange,
+	onClear,
+	clearable = false,
+	debounceMs = 0,
+	height = '2rem',
+	sx: sxProp,
+	...rest
+}) {
 	const [inputValue, setInputValue] = useState(value);
 	const onChangeRef = useRef(onChange);
 
@@ -32,6 +43,11 @@ function SearchComponent({ placeholder = 'Поиск...', value = '', onChange,
 		}
 	};
 
+	const handleClear = () => {
+		setInputValue('');
+		(onClear ?? onChange)('');
+	};
+
 	return (
 		<TextField
 			{...rest}
@@ -69,6 +85,21 @@ function SearchComponent({ placeholder = 'Поиск...', value = '', onChange,
 							<Search />
 						</InputAdornment>
 					),
+					...(clearable && inputValue
+						? {
+								endAdornment: (
+									<InputAdornment position='end'>
+										<IconButton
+											aria-label='Очистить поиск'
+											size='small'
+											onMouseDown={(event) => event.preventDefault()}
+											onClick={handleClear}>
+											<CloseIcon fontSize='small' />
+										</IconButton>
+									</InputAdornment>
+								),
+							}
+						: {}),
 				},
 			}}
 		/>