added checkBox in place of Button

skbkontur · Sep 18, 2024 · 5b75ce3 · 5b75ce3
1 parent 8b808bf
commit 5b75ce3
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git a/db-viewer-ui/src/Components/FieldSelector/FieldSelector.tsx b/db-viewer-ui/src/Components/FieldSelector/FieldSelector.tsx
@@ -21,7 +21,7 @@ interface FieldSelectorProps {
     showSelectAllButton?: boolean;
 }
 
-function filterFieldDefintionsByText(fieldDefinitions: FieldDefinition[], text: string): FieldDefinition[] {
+function filterFieldDefinitionsByText(fieldDefinitions: FieldDefinition[], text: string): FieldDefinition[] {
     if (!text) {
         return fieldDefinitions;
     }
@@ -80,27 +80,29 @@ export function FieldSelector({
         );
     };
 
-    const fieldDefinitionsFiltered = filterFieldDefintionsByText(fieldDefinitions, searchText);
+    const fieldDefinitionsFiltered = filterFieldDefinitionsByText(fieldDefinitions, searchText);
 
     const nothingToDisplay = <span className={jsStyles.nothingToDisplay(theme)}>Ничего не найдено</span>;
     const allFieldsSelected = isAllFieldSelected(fieldDefinitionsFiltered);
     return (
         <div className={jsStyles.root()}>
-            <Input
-                data-tid="FilterInput"
-                leftIcon={<SearchLoupeIcon16Regular />}
-                value={searchText}
-                width={300}
-                onValueChange={setSearchText}
-            />
-            {showSelectAllButton && (
-                <div
-                    data-tid={"TypesSelectAll"}
-                    onClick={() => handleSelectAll(fieldDefinitionsFiltered)}
-                    className={jsStyles.selectAll(theme)}>
-                    {allFieldsSelected ? "Снять выбор с найденных" : "Выбрать все найденные"}
-                </div>
-            )}
+            <RowStack gap={5} verticalAlign="baseline">
+                <Input
+                    data-tid="FilterInput"
+                    leftIcon={<SearchLoupeIcon16Regular />}
+                    value={searchText}
+                    width={300}
+                    onValueChange={setSearchText}
+                />
+                {showSelectAllButton && (
+                    <Checkbox
+                        data-tid="TypesSelectAll"
+                        onValueChange={() => handleSelectAll(fieldDefinitionsFiltered)}
+                        checked={allFieldsSelected}>
+                        Все найденные
+                    </Checkbox>
+                )}
+            </RowStack>
             <RowStack data-tid="ColumnCheckboxes" className={jsStyles.fieldList()} block gap={4}>
                 {fieldDefinitionsFiltered.length === 0 ? <Fit>{nothingToDisplay}</Fit> : null}
 

diff --git a/db-viewer-ui/stories/Commons/FieldSelector.stories.tsx b/db-viewer-ui/stories/Commons/FieldSelector.stories.tsx
@@ -19,6 +19,19 @@ export const Default = (): React.ReactElement => (
     />
 );
 
+export const WithSelectAll = (): React.ReactElement => (
+    <FieldSelector
+        hiddenFields={[]}
+        fieldDefinitions={[
+            { name: "name1", caption: "Name 1" },
+            { name: "name2", caption: "Name 2" },
+        ]}
+        onShowField={action("onShowField")}
+        onHideField={action("onHideField")}
+        showSelectAllButton
+    />
+);
+
 export const LongStrings = (): React.ReactElement => (
     <FieldSelector
         hiddenFields={[]}