81100 create flag for checking search item checked

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

@@ -14,7 +14,9 @@ export type ISearchedPage = IPageHasId & {
 
 type Props = {
   pages: ISearchedPage[],
-  selectedPages: ISearchedPage[],
+  selectedPages: ISearchedPage[] & {
+    has: (page: ISearchedPage) => boolean,
+  },
   onClickInvoked?: (pageId: string) => void,
   onChangedInvoked?: (page: ISearchedPage) => void,
   searchResultCount?: number,
@@ -25,11 +27,13 @@ type Props = {
 }
 
 const SearchResultList: FC<Props> = (props:Props) => {
-  const { focusedPage } = props;
+  const { focusedPage, selectedPages } = props;
+
   const focusedPageId = focusedPage != null && focusedPage._id != null ? focusedPage._id : '';
   return (
     <>
       {props.pages.map((page) => {
+        const isChecked = selectedPages.has(page);
         return (
           <SearchResultListItem
             key={page._id}
@@ -37,6 +41,7 @@ const SearchResultList: FC<Props> = (props:Props) => {
             onClickInvoked={props.onClickInvoked}
             onChangedInvoked={props.onChangedInvoked}
             isSelected={page._id === focusedPageId || false}
+            isChecked={isChecked}
           />
         );
       })}

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

@@ -66,6 +66,7 @@ const PageItemControl: FC<PageItemControlProps> = (props: {page: ISearchedPage})
 type Props = {
   page: ISearchedPage,
   isSelected: boolean,
+  isChecked: boolean,
   onChangedInvoked?: (page: ISearchedPage) => void,
   onClickInvoked?: (pageId: string) => void,
 }
@@ -73,7 +74,7 @@ type Props = {
 const SearchResultListItem: FC<Props> = (props:Props) => {
 
   const {
-    page, isSelected, onClickInvoked, onChangedInvoked,
+    page, isSelected, onClickInvoked, onChangedInvoked, isChecked,
   } = props;
 
   // Add prefix 'id_' in pageId, because scrollspy of bootstrap doesn't work when the first letter of id attr of target component is numeral.
@@ -113,6 +114,7 @@ const SearchResultListItem: FC<Props> = (props:Props) => {
                   logger.error(error);
                 }
               }}
+              checked={isChecked}
             />
           </div>
           <div className="w-100">