1
0
mirror of https://github.com/Unleash/unleash.git synced 2024-10-28 19:06:12 +01:00

feat: clean up command bar props (#7368)

A lot of things were passed in for search, but since we only have single
command bar, we do not need them and it was bloating our component.
This commit is contained in:
Jaanus Sellin 2024-06-12 09:24:16 +03:00 committed by GitHub
parent dfd02054ce
commit 7fc87e1647
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 11 additions and 70 deletions

View File

@ -1,5 +1,4 @@
import type React from 'react';
import { useEffect, useRef, useState } from 'react';
import { useRef, useState } from 'react';
import {
Box,
IconButton,
@ -11,7 +10,6 @@ import {
import Close from '@mui/icons-material/Close';
import SearchIcon from '@mui/icons-material/Search';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import type { IGetSearchContextOutput } from 'hooks/useSearch';
import { useKeyboardShortcut } from 'hooks/useKeyboardShortcut';
import { SEARCH_INPUT } from 'utils/testIds';
import { useOnClickOutside } from 'hooks/useOnClickOutside';
@ -19,21 +17,6 @@ import { useOnBlur } from 'hooks/useOnBlur';
import { RecentlyVisited } from './RecentlyVisited/RecentlyVisited';
import { useRecentlyVisited } from 'hooks/useRecentlyVisited';
interface ICommandBarProps {
initialValue?: string;
onChange?: (value: string) => void;
onFocus?: () => void;
onBlur?: () => void;
className?: string;
placeholder?: string;
hasFilters?: boolean;
disabled?: boolean;
getSearchContext?: () => IGetSearchContextOutput;
containerStyles?: React.CSSProperties;
debounceTime?: number;
expandable?: boolean;
}
export const CommandResultsPaper = styled(Paper)(({ theme }) => ({
position: 'absolute',
width: '100%',
@ -91,40 +74,19 @@ const StyledClose = styled(Close)(({ theme }) => ({
fontSize: theme.typography.body1.fontSize,
}));
export const CommandBar = ({
initialValue = '',
onChange,
onFocus,
onBlur,
className,
placeholder: customPlaceholder,
hasFilters,
disabled,
getSearchContext,
containerStyles,
expandable = false,
debounceTime = 200,
...rest
}: ICommandBarProps) => {
export const CommandBar = () => {
const searchInputRef = useRef<HTMLInputElement>(null);
const searchContainerRef = useRef<HTMLInputElement>(null);
const [showSuggestions, setShowSuggestions] = useState(false);
const { lastVisited } = useRecentlyVisited();
const hideSuggestions = () => {
setShowSuggestions(false);
onBlur?.();
};
//const { savedQuery, setSavedQuery } = useSavedQuery(id);
const [value, setValue] = useState<string>(initialValue);
//const debouncedOnChange = useAsyncDebounce(onChange, debounceTime);
const [value, setValue] = useState<string>('');
const onSearchChange = (value: string) => {
//debouncedOnChange(value);
setValue(value);
//setSavedQuery(value);
};
const hotkey = useKeyboardShortcut(
@ -146,23 +108,14 @@ export const CommandBar = ({
searchInputRef.current?.blur();
}
});
const placeholder = `${customPlaceholder ?? 'Search'} (${hotkey})`;
const placeholder = `Search (${hotkey})`;
useOnClickOutside([searchContainerRef], hideSuggestions);
useOnBlur(searchContainerRef, hideSuggestions);
useEffect(() => {
setValue(initialValue);
}, [initialValue]);
return (
<StyledContainer
ref={searchContainerRef}
style={containerStyles}
active={expandable && showSuggestions}
{...rest}
>
<StyledSearch className={className}>
<StyledContainer ref={searchContainerRef} active={showSuggestions}>
<StyledSearch>
<SearchIcon
sx={{
mr: 1,
@ -180,9 +133,7 @@ export const CommandBar = ({
onChange={(e) => onSearchChange(e.target.value)}
onFocus={() => {
setShowSuggestions(true);
onFocus?.();
}}
disabled={disabled}
/>
<Box sx={{ width: (theme) => theme.spacing(4) }}>
<ConditionallyRender
@ -209,21 +160,11 @@ export const CommandBar = ({
</StyledSearch>
<ConditionallyRender
condition={
Boolean(hasFilters && getSearchContext) && showSuggestions
}
condition={Boolean(value)}
show={
/*
<SearchSuggestions
onSuggestion={(suggestion) => {
onSearchChange(suggestion);
searchInputRef.current?.focus();
}}
savedQuery={savedQuery}
getSearchContext={getSearchContext!}
/>
*/
<>yousearched</>
<CommandResultsPaper className='dropdown-outline'>
<div>search result</div>
</CommandResultsPaper>
}
elseShow={
showSuggestions && (

View File

@ -53,8 +53,8 @@ process.nextTick(async () => {
createProjectWithEnvironmentConfig: true,
manyStrategiesPagination: true,
enableLegacyVariants: false,
flagCreator: true,
commandBarUI: true,
flagCreator: true,
},
},
authentication: {