[useTree]: added useSelectAll hook.

epam · Dec 12, 2023 · 9adfad3 · 9adfad3
1 parent 7dee098
commit 9adfad3
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 23 deletions.
diff --git a/uui-core/src/data/processing/views/dataRows/useBuildRows.ts b/uui-core/src/data/processing/views/dataRows/useBuildRows.ts
@@ -6,7 +6,6 @@ import { FoldingService } from '../tree/hooks/services';
 import { NodeStats, getDefaultNodeStats, getRowStats, mergeStats } from './stats';
 
 export interface UseBuildRowsProps<TItem, TId, TFilter = any> extends FoldingService<TItem, TId> {
-
     tree: ITree<TItem, TId>;
     dataSourceState: DataSourceState<TFilter, TId>;
     isPartialLoad?: boolean;
@@ -37,7 +36,7 @@ export function useBuildRows<TItem, TId, TFilter = any>({
     getRowProps,
     getLoadingRowProps,
 }: UseBuildRowsProps<TItem, TId, TFilter>) {
-    const rebuildRows = () => {
+    const buildRows = () => {
         const rows: DataRowProps<TItem, TId>[] = [];
         const pinned: Record<string, number> = {};
         const pinnedByParentId: Record<string, number[]> = {};
@@ -150,5 +149,5 @@ export function useBuildRows<TItem, TId, TFilter = any>({
         };
     };
 
-    return useMemo(() => rebuildRows(), [tree]);
+    return useMemo(() => buildRows(), [tree]);
 }
diff --git a/uui-core/src/data/processing/views/dataRows/useDataRows.ts b/uui-core/src/data/processing/views/dataRows/useDataRows.ts
@@ -5,6 +5,7 @@ import { idToKey } from '../helpers';
 import { FoldingService, CheckingService, FocusService, SelectingService } from '../tree/hooks/services';
 import { useDataRowProps } from './useDataRowProps';
 import { useBuildRows } from './useBuildRows';
+import { useSelectAll } from './useSelectAll';
 
 export interface UseDataRowsProps<TItem, TId, TFilter = any> extends FoldingService<TItem, TId>, CheckingService<TItem, TId>, FocusService, SelectingService<TItem, TId> {
     tree: ITree<TItem, TId>;
@@ -85,26 +86,13 @@ export function useDataRows<TItem, TId, TFilter = any>(
         getLoadingRowProps,
     });
 
-    const isSelectAllEnabled = useMemo(() => props.selectAll === undefined ? true : props.selectAll, [props.selectAll]);
-
-    const selectAll = useMemo(() => {
-        if (stats.isSomeCheckable && isSelectAllEnabled) {
-            return {
-                value: stats.isSomeCheckboxEnabled ? stats.isAllChecked : false,
-                onValueChange: handleSelectAll,
-                indeterminate: dataSourceState.checked && dataSourceState.checked.length > 0 && !stats.isAllChecked,
-            };
-        } else if (tree.getRootIds().length === 0 && rowOptions?.checkbox?.isVisible && isSelectAllEnabled) {
-            // Nothing loaded yet, but we guess that something is checkable. Add disabled checkbox for less flicker.
-            return {
-                value: false,
-                onValueChange: () => {},
-                isDisabled: true,
-                indeterminate: dataSourceState.checked?.length > 0,
-            };
-        }
-        return null;
-    }, [tree, rowOptions, dataSourceState.checked, stats, isSelectAllEnabled, handleSelectAll]);
+    const selectAll = useSelectAll({
+        tree,
+        checked: dataSourceState.checked,
+        stats,
+        areCheckboxesVisible: rowOptions?.checkbox?.isVisible,
+        handleSelectAll,
+    });
 
     const getListProps = useCallback((): DataSourceListProps => {
         return {

diff --git a/uui-core/src/data/processing/views/dataRows/useSelectAll.ts b/uui-core/src/data/processing/views/dataRows/useSelectAll.ts
@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+import { ITree } from '../tree';
+import { NodeStats } from './stats';
+
+export interface UseSelectAllProps<TItem, TId> {
+    tree: ITree<TItem, TId>;
+    selectAll?: boolean;
+    stats: NodeStats;
+    checked?: TId[];
+    areCheckboxesVisible: boolean;
+    handleSelectAll: (isChecked: boolean) => void;
+}
+
+export function useSelectAll<TItem, TId>(props: UseSelectAllProps<TItem, TId>) {
+    const isSelectAllEnabled = useMemo(() => props.selectAll === undefined ? true : props.selectAll, [props.selectAll]);
+
+    const selectAll = useMemo(() => {
+        if (props.stats.isSomeCheckable && isSelectAllEnabled) {
+            return {
+                value: props.stats.isSomeCheckboxEnabled ? props.stats.isAllChecked : false,
+                onValueChange: props.handleSelectAll,
+                indeterminate: props.checked && props.checked.length > 0 && !props.stats.isAllChecked,
+            };
+        } else if (props.tree.getRootIds().length === 0 && props.areCheckboxesVisible && isSelectAllEnabled) {
+            // Nothing loaded yet, but we guess that something is checkable. Add disabled checkbox for less flicker.
+            return {
+                value: false,
+                onValueChange: () => {},
+                isDisabled: true,
+                indeterminate: props.checked?.length > 0,
+            };
+        }
+        return null;
+    }, [
+        props.tree,
+        props.areCheckboxesVisible,
+        props.checked,
+        props.stats,
+        isSelectAllEnabled,
+        props.handleSelectAll,
+    ]);
+
+    return selectAll;
+}