Merge branch 'feat/77525-80785-implement-select-all-checkbox' into feat/77525-81100-check-if-selected-pages-has-page

# Conflicts:
#	packages/app/src/components/SearchPage.jsx
#	packages/app/src/components/SearchPage/SearchResultListItem.tsx

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

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React, { FC, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import loggerFactory from '~/utils/logger';
 import { CheckboxType } from '../../interfaces/search';
@@ -6,21 +6,29 @@ import { CheckboxType } from '../../interfaces/search';
 const logger = loggerFactory('growi:searchResultList');
 
 type Props = {
-  checkboxState: CheckboxType,
+  selectedPagesCount: number,
+  searchedPagesCount: number,
   onClickInvoked?: () => void,
-  onCheckInvoked?: () => void,
+  onClickSelectAllCheckbox?: () => void,
 }
 
 const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
   const { t } = useTranslation();
   const {
-    checkboxState, onClickInvoked, onCheckInvoked,
+    onClickInvoked, onClickSelectAllCheckbox, selectedPagesCount, searchedPagesCount,
   } = props;
 
-  const onCheckAllPages = () => {
-    if (onCheckInvoked == null) { logger.error('onCheckInvoked is null') }
-    else { onCheckInvoked() }
-  };
+  const checkboxType = useMemo(() => {
+    switch (selectedPagesCount) {
+      case 0:
+        return CheckboxType.NONE_CHECKED;
+      case searchedPagesCount:
+        return CheckboxType.ALL_CHECKED;
+      default:
+        return CheckboxType.INDETERMINATE;
+    }
+  }, [selectedPagesCount, searchedPagesCount]);
+
 
   return (
     <>
@@ -31,8 +39,12 @@ const DeleteSelectedPageGroup:FC<Props> = (props:Props) => {
         type="checkbox"
         name="check-all-pages"
         className="custom-control custom-checkbox ml-1 align-self-center"
-        onClick={onCheckAllPages}
-        checked={checkboxState !== CheckboxType.NONE_CHECKED}
+        onClick={() => {
+          if (onClickSelectAllCheckbox != null) {
+            onClickSelectAllCheckbox();
+          }
+        }}
+        checked={checkboxType !== CheckboxType.NONE_CHECKED}
       />
       <button
         type="button"

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

@@ -3,16 +3,16 @@ import { useTranslation } from 'react-i18next';
 import SearchPageForm from './SearchPageForm';
 import AppContainer from '../../client/services/AppContainer';
 import DeleteSelectedPageGroup from './DeleteSelectedPageGroup';
-import { CheckboxType } from '../../interfaces/search';
 
 type Props = {
   searchingKeyword: string,
-  checkboxState: CheckboxType,
   appContainer: AppContainer,
+  selectedPagesCount: number,
+  searchedPagesCount: number,
   onSearchInvoked: (data : any[]) => boolean,
   onExcludeUsersHome?: () => void,
   onExcludeTrash?: () => void,
-  onClickInvoked?: () => void,
+  onClickSelectAllCheckbox?: () => void,
 }
 
 const SearchControl: FC <Props> = (props: Props) => {
@@ -52,9 +52,10 @@ const SearchControl: FC <Props> = (props: Props) => {
       <div className="d-flex my-4">
         {/* Todo: design will be fixed in #80324. Function will be implemented in #77525 */}
         <DeleteSelectedPageGroup
-          checkboxState={props.checkboxState}
           onClickInvoked={onDeleteSelectedPageHandler}
-          onCheckInvoked={props.onClickInvoked}
+          onClickSelectAllCheckbox={props.onClickSelectAllCheckbox}
+          selectedPagesCount={props.selectedPagesCount}
+          searchedPagesCount={props.searchedPagesCount}
         />
         <div className="d-flex align-items-center border rounded border-gray px-2 py-1 mr-2 ml-auto">
           <label className="my-0 mr-2" htmlFor="flexCheckDefault">

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

@@ -86,22 +86,16 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
   const dPagePath = new DevidedPagePath(page.path, false, true);
   const pagePathElem = <PagePathLabel page={page} isFormerOnly />;
 
-  const onClickSearchedResultItem = () => {
-    if (onClickInvoked == null) { logger.error('onClickInvoked is null') }
-    else onClickInvoked(page._id);
-  };
-
-  const onClickCheckbox = () => {
-    if (onClickCheckboxInvoked == null) { logger.error('onClickCheckboxInvoked is null') }
-    else onClickCheckboxInvoked(page);
-  };
-
   return (
     <li key={page._id} className={`page-list-li search-page-item w-100 border-bottom pr-4 list-group-item-action ${isSelected ? 'active' : ''}`}>
       <a
         className="d-block pt-3"
         href={pageId}
-        onClick={onClickSearchedResultItem}
+        onClick={() => {
+          if (onClickInvoked != null) {
+            onClickInvoked(page._id);
+          }
+        }}
       >
         <div className="d-flex">
           {/* checkbox */}
@@ -110,7 +104,11 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
               className="form-check-input my-auto"
               type="checkbox"
               id="flexCheckDefault"
-              onClick={onClickCheckbox}
+              onClick={() => {
+                if (onClickCheckboxInvoked != null) {
+                  onClickCheckboxInvoked(page);
+                }
+              }}
               checked={isChecked}
             />
           </div>