feat: infinite tree

src/components/InfiniteTable/HeaderCheckbox.tsx

@@ -1,29 +1,36 @@
-import React, { memo, useEffect } from "react";
+import React, { memo, useEffect, useCallback } from "react";
+
+interface HeaderCheckboxCompProps {
+  value: boolean | null;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
+}
 
 const HeaderCheckboxComp = memo(
-  ({
-    value,
-    onChange,
-  }: {
-    value: boolean | null;
-    onChange: (value: boolean | null) => void;
-  }) => {
-    const checkboxRef = React.useRef();
+  ({ value, onChange }: HeaderCheckboxCompProps) => {
+    const checkboxRef = React.useRef<HTMLInputElement>(null);
 
     useEffect(() => {
-      const cbRef = checkboxRef.current as any;
-
-      if (value === true) {
-        cbRef.checked = true;
-        cbRef.indeterminate = false;
-      } else if (value === false) {
-        cbRef.checked = false;
-        cbRef.indeterminate = false;
-      } else if (value === null) {
-        cbRef.checked = false;
-        cbRef.indeterminate = true;
+      const cbRef = checkboxRef.current;
+      if (cbRef) {
+        if (value === true) {
+          cbRef.checked = true;
+          cbRef.indeterminate = false;
+        } else if (value === false) {
+          cbRef.checked = false;
+          cbRef.indeterminate = false;
+        } else if (value === null) {
+          cbRef.checked = false;
+          cbRef.indeterminate = true;
+        }
       }
-    });
+    }, [value]);
+
+    const handleChange = useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        onChange(event);
+      },
+      [onChange],
+    );
 
     return (
       <input
@@ -37,9 +44,10 @@ const HeaderCheckboxComp = memo(
         onDoubleClick={(e) => {
           e.stopPropagation();
         }}
-        ref={checkboxRef as any}
+        ref={checkboxRef}
         type="checkbox"
-        onChange={onChange as any}
+        onChange={handleChange}
+        checked={value === true}
         tabIndex={-1}
       />
     );
@@ -48,40 +56,31 @@ const HeaderCheckboxComp = memo(
 
 HeaderCheckboxComp.displayName = "HeaderCheckboxComp";
 
+interface HeaderCheckboxProps {
+  selectedRowKeysLength: number;
+  totalRows: number;
+  onSelectionCheckboxClicked?: (
+    event: React.ChangeEvent<HTMLInputElement>,
+  ) => void;
+}
+
 export const HeaderCheckbox = memo(
   ({
     selectedRowKeysLength,
     totalRows,
-    allRowSelected,
-    onHeaderCheckboxChange,
-    allRowSelectedMode,
-  }: {
-    selectedRowKeysLength: number;
-    totalRows: number;
-    allRowSelected: boolean;
-    onHeaderCheckboxChange: (value: boolean | null) => void;
-    allRowSelectedMode: boolean;
-  }) => {
-    const noRowsSelected = selectedRowKeysLength === 0;
-    const someRowsSelected =
-      selectedRowKeysLength > 0 && totalRows !== selectedRowKeysLength;
-
-    let value: boolean | null = false;
-
-    if (allRowSelectedMode) {
-      value = true;
-    } else if (totalRows === selectedRowKeysLength && totalRows > 0) {
-      value = true;
-    } else if (allRowSelected) {
-      value = true;
-    } else if (noRowsSelected) {
-      value = false;
-    } else if (someRowsSelected) {
-      value = null;
-    }
+    onSelectionCheckboxClicked,
+  }: HeaderCheckboxProps) => {
+    const value = React.useMemo(() => {
+      if (selectedRowKeysLength === 0) return false;
+      if (selectedRowKeysLength === totalRows && totalRows > 0) return true;
+      return null;
+    }, [selectedRowKeysLength, totalRows]);
 
     return (
-      <HeaderCheckboxComp value={value} onChange={onHeaderCheckboxChange} />
+      <HeaderCheckboxComp
+        value={value}
+        onChange={onSelectionCheckboxClicked!}
+      />
     );
   },
 );