初始化

wwf

4 天以前 a430284aa21e3ae1f0d5654e55b2ad2852519cc2

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

@@ -2,9 +2,9 @@
import { useTranslation } from 'react-i18next'
import { FixedSizeList as List, areEqual } from 'react-window'
import type { ListChildComponentProps } from 'react-window'
import { RiArrowDownSLine, RiArrowRightSLine } from '@remixicon/react'
import Checkbox from '../../checkbox'
import NotionIcon from '../../notion-icon'
import s from './index.module.css'
import cn from '@/utils/classnames'
import type { DataSourceNotionPage, DataSourceNotionPageMap } from '@/models/common'

@@ -94,16 +94,10 @@
    if (hasChild) {
      return (
        <div
          className='mr-1 flex h-5 w-5 shrink-0 items-center justify-center rounded-md hover:bg-components-button-ghost-bg-hover'
          className={cn(s.arrow, current.expand && s['arrow-expand'], 'shrink-0 mr-1 w-5 h-5 hover:bg-gray-200 rounded-md')}
          style={{ marginLeft: current.depth * 8 }}
          onClick={() => handleToggle(index)}
        >
          {
            current.expand
              ? <RiArrowDownSLine className='h-4 w-4 text-text-tertiary' />
              : <RiArrowRightSLine className='h-4 w-4 text-text-tertiary' />
          }
        </div>
        />
      )
    }
    if (current.parent_id === 'root' || !pagesMap[current.parent_id]) {
@@ -112,18 +106,20 @@
      )
    }
    return (
      <div className='mr-1 h-5 w-5 shrink-0' style={{ marginLeft: current.depth * 8 }} />
      <div className='shrink-0 mr-1 w-5 h-5' style={{ marginLeft: current.depth * 8 }} />
    )
  }

  return (
    <div
      className={cn('group flex cursor-pointer items-center rounded-md pl-2 pr-[2px] hover:bg-state-base-hover',
        previewPageId === current.page_id && 'bg-state-base-hover')}
      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
        className='mr-2 shrink-0'
        className={cn(
          'shrink-0 mr-2 group-hover:border-primary-600 group-hover:border-[2px]',
          disabled && 'group-hover:border-transparent',
        )}
        checked={checkedIds.has(current.page_id)}
        disabled={disabled}
        onCheck={() => {
@@ -134,12 +130,12 @@
      />
      {!searchValue && renderArrow()}
      <NotionIcon
        className='mr-1 shrink-0'
        className='shrink-0 mr-1'
        type='page'
        src={current.page_icon}
      />
      <div
        className='grow truncate text-[13px] font-medium leading-4 text-text-secondary'
        className='grow text-sm font-medium text-gray-700 truncate'
        title={current.page_name}
      >
        {current.page_name}
@@ -147,9 +143,7 @@
      {
        canPreview && (
          <div
            className='ml-1 hidden h-6 shrink-0 cursor-pointer items-center rounded-md border-[0.5px] border-components-button-secondary-border bg-components-button-secondary-bg px-2 text-xs
            font-medium leading-4 text-components-button-secondary-text shadow-xs shadow-shadow-shadow-3 backdrop-blur-[10px]
            hover:border-components-button-secondary-border-hover hover:bg-components-button-secondary-bg-hover group-hover:flex'
            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>
@@ -158,7 +152,7 @@
      {
        searchValue && (
          <div
            className='ml-1 max-w-[120px] shrink-0 truncate text-xs text-text-quaternary'
            className='shrink-0 ml-1 max-w-[120px] text-xs text-gray-400 truncate'
            title={breadCrumbs.join(' / ')}
          >
            {breadCrumbs.join(' / ')}
@@ -284,7 +278,7 @@

  if (!currentDataList.length) {
    return (
      <div className='flex h-[296px] items-center justify-center text-[13px] text-text-tertiary'>
      <div className='flex items-center justify-center h-[296px] text-[13px] text-gray-500'>
        {t('common.dataSource.notion.selector.noSearchResult')}
      </div>
    )