fix: notion-page-selector preview

web/app/components/base/notion-page-selector/base.tsx

@@ -13,6 +13,7 @@ type NotionPageSelectorProps = {
   value?: string[]
   onSelect: (selectedPages: (DataSourceNotionPage & { workspace_id: string })[]) => void
   canPreview?: boolean
+  previewPageId?: string
   onPreview?: (selectedPage: DataSourceNotionPage & { workspace_id: string }) => void
 }
 
@@ -20,6 +21,7 @@ const NotionPageSelector = ({
   value,
   onSelect,
   canPreview,
+  previewPageId,
   onPreview,
 }: NotionPageSelectorProps) => {
   const [searchValue, setSearchValue] = useState('')
@@ -30,9 +32,9 @@ const NotionPageSelector = ({
   const [currentWorkspaceId, setCurrentWorkspaceId] = useState('')
   const currentWorkspace = notionWorkspaces.find(workspace => workspace.id === currentWorkspaceId)
 
-  const handleSearchValueChange = (value: string) => {
+  const handleSearchValueChange = useCallback((value: string) => {
     setSearchValue(value)
-  }
+  }, [])
   const handleSelectWorkspace = useCallback((workspaceId: string) => {
     setCurrentWorkspaceId(workspaceId)
   }, [])
@@ -76,19 +78,16 @@ const NotionPageSelector = ({
         />
       </div>
       <div className='rounded-b-xl overflow-hidden'>
-        {
-          currentWorkspace?.source_info.pages.length && (
-            <PageSelector
-              key={currentWorkspaceId}
-              value={value}
-              searchValue={searchValue}
-              list={currentWorkspace?.source_info.pages}
-              onSelect={handleSelecPages}
-              canPreview={canPreview}
-              onPreview={handlePreviewPage}
-            />
-          )
-        }
+        <PageSelector
+          key={currentWorkspaceId}
+          value={value}
+          searchValue={searchValue}
+          list={currentWorkspace?.source_info.pages || []}
+          onSelect={handleSelecPages}
+          canPreview={canPreview}
+          previewPageId={previewPageId}
+          onPreview={handlePreviewPage}
+        />
       </div>
       {
         showDataSourceSetting && (

web/app/components/base/notion-page-selector/page-selector/index.module.css

@@ -8,4 +8,10 @@
 
 .arrow-expand {
   transform: rotate(0);
+}
+
+.preview-item {
+  background-color: #eff4ff;
+  border: 1px solid #D1E0FF;
+  box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
 }
\ No newline at end of file

web/app/components/base/notion-page-selector/page-selector/index.tsx

-import { memo, useEffect, useState } from 'react'
+import { memo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { FixedSizeList as List, areEqual } from 'react-window'
 import type { ListChildComponentProps } from 'react-window'
@@ -14,6 +14,7 @@ type PageSelectorProps = {
   list: DataSourceNotionPage[]
   onSelect: (selectedPages: DataSourceNotionPage[]) => void
   canPreview?: boolean
+  previewPageId?: string
   onPreview?: (selectedPage: DataSourceNotionPage) => void
 }
 type NotionPageMap = Record<string, DataSourceNotionPage>
@@ -73,9 +74,10 @@ const Item = memo(({ index, style, data }: ListChildComponentProps<{
   handlePreview: (index: number) => void
   listMapWithChildrenAndDescendants: NotionPageTreeMap
   searchValue: string
+  previewPageId: string
 }>) => {
   const { t } = useTranslation()
-  const { dataList, handleToggle, checkedIds, handleCheck, canPreview, handlePreview, listMapWithChildrenAndDescendants, searchValue } = data
+  const { dataList, handleToggle, checkedIds, handleCheck, canPreview, handlePreview, listMapWithChildrenAndDescendants, searchValue, previewPageId } = data
   const current = dataList[index]
   const currentWithChildrenAndDescendants = listMapWithChildrenAndDescendants[current.page_id]
   const hasChild = currentWithChildrenAndDescendants.descendants.size > 0
@@ -105,7 +107,7 @@ const Item = memo(({ index, style, data }: ListChildComponentProps<{
 
   return (
     <div
-      className='group flex items-center pl-2 pr-[2px] rounded-md hover:bg-gray-100 cursor-pointer'
+      className={cn('group flex items-center pl-2 pr-[2px] rounded-md border border-transparent hover:bg-gray-100 cursor-pointer', previewPageId === current.page_id && s['preview-item'])}
       style={{ ...style, top: style.top as number + 8, left: 8, right: 8, width: 'calc(100% - 16px)' }}
     >
       <Checkbox
@@ -128,7 +130,7 @@ const Item = memo(({ index, style, data }: ListChildComponentProps<{
       {
         canPreview && (
           <div
-            className='shrink-0 hidden group-hover:flex items-center ml-1 px-2 h-6 rounded-md text-xs font-medium text-gray-700 cursor-pointer hover:bg-gray-50'
+            className='shrink-0 hidden group-hover:flex items-center ml-1 px-2 h-6 rounded-md text-xs font-medium text-gray-500 cursor-pointer hover:bg-gray-50 hover:text-gray-700'
             onClick={() => handlePreview(index)}>
             {t('common.dataSource.notion.selector.preview')}
           </div>
@@ -154,8 +156,10 @@ const PageSelector = ({
   list,
   onSelect,
   canPreview = true,
+  previewPageId,
   onPreview,
 }: PageSelectorProps) => {
+  const { t } = useTranslation()
   const [dataList, setDataList] = useState<NotionPageItem[]>(
     list.filter(item => item.parent_id === 'root').map((item) => {
       return {
@@ -165,8 +169,20 @@ const PageSelector = ({
       }
     }),
   )
-  const [searchDataList, setSearchDataList] = useState<NotionPageItem[]>([])
+  const searchDataList = list.filter((item) => {
+    return item.page_name.includes(searchValue)
+  }).map((item) => {
+    return {
+      ...item,
+      expand: false,
+      deepth: 0,
+    }
+  })
+  const currentDataList = searchValue ? searchDataList : dataList
   const [checkedIds, setCheckedIds] = useState<Set<string>>(new Set(value || []))
+  const [localPreviewPageId, setLocalPreviewPageId] = useState('')
+  const currentPreviewPageId = previewPageId === undefined ? localPreviewPageId : previewPageId
+
   const listMap = list.reduce((prev: NotionPageMap, next: DataSourceNotionPage) => {
     prev[next.page_id] = next
 
@@ -210,7 +226,7 @@ const PageSelector = ({
   }
 
   const handleCheck = (index: number) => {
-    const current = searchValue ? searchDataList[index] : dataList[index]
+    const current = currentDataList[index]
     const pageId = current.page_id
     const currentWithChildrenAndDescendants = listMapWithChildrenAndDescendants[pageId]
 
@@ -236,35 +252,33 @@ const PageSelector = ({
   }
 
   const handlePreview = (index: number) => {
-    if (onPreview) {
-      const current = dataList[index]
-      const pageId = current.page_id
+    const current = currentDataList[index]
+    const pageId = current.page_id
+
+    setLocalPreviewPageId(pageId)
+
+    if (onPreview)
       onPreview(listMap[pageId])
-    }
   }
 
-  useEffect(() => {
-    setSearchDataList(list.filter((item) => {
-      return item.page_name.includes(searchValue)
-    }).map((item) => {
-      return {
-        ...item,
-        expand: false,
-        deepth: 0,
-      }
-    }))
-  }, [searchValue])
+  if (!currentDataList.length) {
+    return (
+      <div className='flex items-center justify-center h-[296px] text-[13px] text-gray-500'>
+        {t('common.dataSource.notion.selector.noSearchResult')}
+      </div>
+    )
+  }
 
   return (
     <List
       className='py-2'
       height={296}
-      itemCount={searchValue ? searchDataList.length : dataList.length}
+      itemCount={currentDataList.length}
       itemSize={28}
       width='100%'
       itemKey={(index, data) => data.dataList[index].page_id}
       itemData={{
-        dataList: searchValue ? searchDataList : dataList,
+        dataList: currentDataList,
         handleToggle,
         checkedIds,
         handleCheck,
@@ -272,6 +286,7 @@ const PageSelector = ({
         handlePreview,
         listMapWithChildrenAndDescendants,
         searchValue,
+        previewPageId: currentPreviewPageId,
       }}
     >
       {Item}

web/app/components/base/notion-page-selector/search-input/index.tsx

@@ -16,7 +16,7 @@ const SearchInput = ({
 
   const handleClear = useCallback(() => {
     onChange('')
-  }, [])
+  }, [onChange])
 
   return (
     <div className={cn(s['input-wrapper'], 'flex items-center px-2 h-7 border border-gray-300 rounded-md', `${value ? 'bg-white' : 'bg-gray-100'}`)}>

web/i18n/lang/common.en.ts

@@ -190,7 +190,7 @@ const translation = {
       selector: {
         pageSelected: 'Pages Selected',
         searchPages: 'Search pages...',
-        noSerachResult: 'No search resluts',
+        noSearchResult: 'No search resluts',
         addPages: 'Add pages',
         preview: 'PREVIEW',
       },

web/i18n/lang/common.zh.ts

@@ -191,7 +191,7 @@ const translation = {
       selector: {
         pageSelected: '已选页面',
         searchPages: '搜索页面...',
-        noSerachResult: '无搜索结果',
+        noSearchResult: '无搜索结果',
         addPages: '添加页面',
         preview: '预览',
       },