feat: supported initial search in settings

gravity-ui · Sep 27, 2023 · b425a69 · b425a69
1 parent a3173a7
commit b425a69
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 5 deletions.
diff --git a/src/components/Settings/Settings.tsx b/src/components/Settings/Settings.tsx
@@ -23,6 +23,7 @@ export interface SettingsProps {
     filterPlaceholder?: string;
     emptyPlaceholder?: string;
     initialPage?: string;
+    initialSearch?: string;
     onPageChange?: (page: string | undefined) => void;
     renderNotFound?: () => React.ReactNode;
     renderLoading?: () => React.ReactNode;
@@ -56,6 +57,7 @@ export interface SettingsSectionProps {
 
 export interface SettingsItemProps {
     title: string;
+    highlightedTitle?: React.ReactNode | null;
     renderTitleComponent?: (highlightedTitle: React.ReactNode | null) => React.ReactNode;
     align?: 'top' | 'center';
     children: React.ReactNode;
@@ -115,6 +117,7 @@ const getPageTitleById = (menu: SettingsMenuType, activePage: string) => {
 type SettingsContentProps = Omit<SettingsProps, 'loading' | 'renderLoading'>;
 function SettingsContent({
     initialPage,
+    initialSearch,
     children,
     renderNotFound,
     title = i18n('label_title'),
@@ -124,7 +127,7 @@ function SettingsContent({
     onPageChange,
     onClose,
 }: SettingsContentProps) {
-    const [search, setSearch] = React.useState('');
+    const [search, setSearch] = React.useState(initialSearch ?? '');
     const {menu, pages} = getSettingsFromChildren(children, search);
     const pageKeys = Object.keys(pages);
     const [selectedPage, setCurrentPage] = React.useState<string | undefined>(
@@ -206,7 +209,7 @@ function SettingsContent({
                                     <div key={title} className={b('section-item')}>
                                         {React.cloneElement(element, {
                                             ...element.props,
-                                            title:
+                                            highlightedTitle:
                                                 search && title
                                                     ? prepareTitle(title, search)
                                                     : title,
@@ -228,6 +231,7 @@ function SettingsContent({
                     <SettingsSearch
                         inputRef={searchInputRef}
                         className={b('search')}
+                        initialValue={initialSearch}
                         onChange={setSearch}
                         autoFocus={false}
                         inputSize={'l'}
@@ -259,6 +263,7 @@ function SettingsContent({
                     <SettingsSearch
                         inputRef={searchInputRef}
                         className={b('search')}
+                        initialValue={initialSearch}
                         onChange={setSearch}
                         placeholder={filterPlaceholder}
                         autoFocus
@@ -290,6 +295,7 @@ Settings.Section = function SettingsSection({children}: SettingsSectionProps) {
 
 Settings.Item = function SettingsItem({
     title,
+    highlightedTitle,
     children,
     align = 'center',
     withBadge,
@@ -299,7 +305,9 @@ Settings.Item = function SettingsItem({
 }: SettingsItemProps) {
     const {renderRightAdornment, showRightAdornmentOnHover} = useSettingsContext();
     const titleNode = (
-        <span className={b('item-title', {badge: withBadge})}>{renderTitleComponent(title)}</span>
+        <span className={b('item-title', {badge: withBadge})}>
+            {renderTitleComponent(highlightedTitle)}
+        </span>
     );
     return (
         <div className={b('item', {align, mode})}>

diff --git a/src/components/Settings/SettingsSearch/SettingsSearch.tsx b/src/components/Settings/SettingsSearch/SettingsSearch.tsx
@@ -10,6 +10,7 @@ const b = block('settings-search');
 
 interface SettingsSearchProps {
     className?: string;
+    initialValue?: string;
     onChange: (search: string) => void;
     debounce?: number;
     inputRef?: React.Ref<HTMLInputElement>;
@@ -20,18 +21,26 @@ interface SettingsSearchProps {
 
 export function SettingsSearch({
     className,
+    initialValue,
     onChange,
     debounce = 200,
     inputRef,
     inputSize,
     placeholder,
     autoFocus = true,
 }: SettingsSearchProps) {
-    const onChangeStable = useStableCallback(onChange);
-    const handleUpdate = React.useCallback(debounceFn(onChangeStable, debounce), [debounce]);
+    const [value, setValue] = React.useState(initialValue ?? '');
+
+    const onChangeDebounced = useStableCallback(debounceFn(onChange, debounce));
+    const handleUpdate = useStableCallback((updated: string) => {
+        setValue(updated);
+        onChangeDebounced(updated);
+    });
+
     return (
         <div className={b(null, className)}>
             <TextInput
+                value={value}
                 controlRef={inputRef}
                 hasClear
                 autoFocus={autoFocus}