80814 modify component

packages/app/src/components/SearchPage/DeleteAllButton.jsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { useTranslation } from 'react-i18next';
-
-const DeleteAllButton = (props) => {
-  const { t } = useTranslation();
-  const { selectedPages } = props;
-
-  function deleteAllSelectedPage() {
-    console.log(selectedPages);
-    // TODO: implement this function
-    // https://estoc.weseek.co.jp/redmine/issues/77543
-    // do something with pagesDelete to delete them.
-  }
-
-  return (
-    <button
-      type="button"
-      className="text-danger font-weight-light"
-      onClick={deleteAllSelectedPage}
-    >
-      <i className="icon-trash ml-3"></i>
-      {t('search_result.delete_all_selected_page')}
-    </button>
-  );
-
-};
-
-DeleteAllButton.propTypes = {
-  selectedPages: PropTypes.array.isRequired,
-};
-export default DeleteAllButton;

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

@@ -0,0 +1,75 @@
+import React, { FC } from 'react';
+import { useTranslation } from 'react-i18next';
+import loggerFactory from '~/utils/logger';
+
+export const NONE_CHECKED = 'NONE_CHECKED';
+export const INDETERMINATE = 'INDETERMINATE';
+export const ALL_CHECKED = 'ALL_CHECKED';
+
+const logger = loggerFactory('growi:searchResultList');
+
+type Props = {
+  isChecked: boolean,
+  checkboxState: string,
+  onClickInvoked?: () => void,
+  onCheckInvoked?: (string) => void,
+}
+
+const DeleteAllButton:FC<Props> = (props:Props) => {
+  const { t } = useTranslation();
+  const {
+    isChecked, checkboxState, onClickInvoked, onCheckInvoked,
+  } = props;
+
+  const changeCheckboxStateHandler = () => {
+    console.log(`changeCheckboxStateHandler is called. current changebox state is ${checkboxState}`);
+    // Todo: determine next checkboxState from one of the following and tell the parent component
+    // to change the checkboxState by passing onCheckInvoked function the next checkboxState
+    // - 'NONE_CHECKED'
+    // - 'INDETERMINATE'
+    // - 'ALL_CHECKED'
+    // https://estoc.weseek.co.jp/redmine/issues/77525
+    try {
+      if (onCheckInvoked == null) { throw new Error('onCheckInvoked is null') }
+      onCheckInvoked('');
+    }
+    catch (error) {
+      logger.error(error);
+    }
+  };
+
+
+  return (
+    <>
+      <input
+        id="check-all-pages"
+        type="checkbox"
+        name="check-all-pages"
+        className="custom-control custom-checkbox"
+        onChange={changeCheckboxStateHandler}
+        checked={isChecked}
+      />
+      <button
+        type="button"
+        className="text-danger font-weight-light"
+        onClick={() => {
+          try {
+            if (onClickInvoked == null) { throw new Error('onClickInvoked is null') }
+            onClickInvoked();
+          }
+          catch (error) {
+            logger.error(error);
+          }
+        }}
+      >
+        <i className="icon-trash ml-3"></i>
+        {t('search_result.delete_all_selected_page')}
+      </button>
+    </>
+  );
+
+};
+
+DeleteAllButton.propTypes = {
+};
+export default DeleteAllButton;

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

@@ -2,8 +2,9 @@ import React, { FC } from 'react';
 import { useTranslation } from 'react-i18next';
 import SearchPageForm from './SearchPageForm';
 import AppContainer from '../../client/services/AppContainer';
-import SelectAllPages from './SelectAllPages';
-import DeleteAllButton from './DeleteAllButton';
+import DeleteSelectedPageGroup, {
+  NONE_CHECKED, // INDETERMINATE, ALL_CHECKED
+} from './DeleteSelectedPageGroup';
 
 type Props = {
   searchingKeyword: string,
@@ -31,6 +32,21 @@ const SearchControl: FC <Props> = (props: Props) => {
     }
   };
 
+  const onDeleteSelectedPageHandler = () => {
+    console.log('onDeleteSelectedPageHandler is called');
+    // TODO: implement this function to delete selected pages.
+    // https://estoc.weseek.co.jp/redmine/issues/77525
+  };
+
+  const onCheckAllPagesInvoked = () => {
+    console.log('onCheckAllPagesInvoked is called');
+    // Todo: set the checkboxState, isChecked, and indeterminate value of checkbox element according to the passed argument
+    // https://estoc.weseek.co.jp/redmine/issues/77525
+
+    // setting checkbox to indeterminate is required to use of useRef to access checkbox element.
+    // ref: https://getbootstrap.com/docs/4.5/components/forms/#checkboxes
+  };
+
   return (
     <div className="">
       <div className="search-page-input sps sps--abv">
@@ -43,9 +59,12 @@ const SearchControl: FC <Props> = (props: Props) => {
       {/* TODO: replace the following elements deleteAll button , relevance button and include specificPath button component */}
       <div className="d-flex my-4">
         {/* Todo: design will be fixed in #80324. Function will be implemented in #77525 */}
-        <SelectAllPages checked={false} onClickInvoked={() => {}} />
-        {/* Todo: design will be fixed in #80324. Function will be implemented in #77525 */}
-        <DeleteAllButton selectedPages={[]} />
+        <DeleteSelectedPageGroup
+          isChecked={false || false} // Todo: change the left value to appropriate value based on checkboxState
+          checkboxState={'' || NONE_CHECKED} // Todo: change the left value to appropriate value
+          onClickInvoked={onDeleteSelectedPageHandler}
+          onCheckInvoked={onCheckAllPagesInvoked}
+        />
         <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">
             {t('Include Subordinated Target Page', { target: '/user' })}

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

@@ -1,23 +0,0 @@
-import React, { FC } from 'react';
-
-type Props = {
-  checked: boolean,
-  onClickInvoked: () => void,
-}
-
-const SelectAllPages: FC<Props> = (props:Props) => {
-  const { onClickInvoked, checked } = props;
-
-  // Tood: show checkbox as indeterminate when some pages are checked but not all
-  // https://getbootstrap.com/docs/4.5/components/forms/#checkboxes
-  return (
-    <input
-      type="checkbox"
-      name="check-delete-all"
-      onClick={onClickInvoked}
-      checked={checked}
-    />
-  );
-};
-
-export default SelectAllPages;