refs #83365: search select checkbox indeterminate

- sepalate interface for indeterminate input.
- clean the source code.

packages/app/src/components/SearchPage/DeleteSelectedPageGroup.tsx

@@ -1,5 +1,6 @@
 import React, { FC, useEffect, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
+import { IndeterminateInputElement } from '~/interfaces/indeterminate-checkbox';
 import { CheckboxType } from '../../interfaces/search';
 
 type Props = {
@@ -9,9 +10,6 @@ type Props = {
   onClickSelectAllCheckbox?: (nextSelectAllCheckboxType: CheckboxType) => void,
 }
 
-interface IndeterminateInputElement extends HTMLInputElement {
-  indeterminate:boolean
-}
 
 const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
   const { t } = useTranslation();
@@ -30,11 +28,10 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
     if (onClickDeleteAllButton != null) { onClickDeleteAllButton() }
   };
 
-  const elm = useRef<IndeterminateInputElement>(null);
+  const selectAllCheckboxElm = useRef<IndeterminateInputElement>(null);
   useEffect(() => {
-    if (elm.current != null && elm.current.indeterminate != null) {
-      // eslint-disable-next-line
-      elm.current.indeterminate = selectAllCheckboxType === CheckboxType.INDETERMINATE;
+    if (selectAllCheckboxElm.current != null) {
+      selectAllCheckboxElm.current.indeterminate = selectAllCheckboxType === CheckboxType.INDETERMINATE;
     }
   }, [selectAllCheckboxType]);
 
@@ -46,7 +43,7 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
         type="checkbox"
         name="check-all-pages"
         className="grw-indeterminate-checkbox"
-        ref={elm}
+        ref={selectAllCheckboxElm}
         disabled={props.isSelectAllCheckboxDisabled}
         onClick={onClickCheckbox}
         checked={selectAllCheckboxType === CheckboxType.ALL_CHECKED}

packages/app/src/interfaces/indeterminate-checkbox.ts

@@ -0,0 +1,3 @@
+export interface IndeterminateInputElement extends HTMLInputElement {
+  indeterminate:boolean
+}