feat/TanStack-Form (#18346)

2025-04-18 15:54:22 +08:00
parent efe5db38ee
commit 1e7418095f
38 changed files with 959 additions and 127 deletions
--- a/web/app/components/datasets/documents/detail/completed/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/index.tsx
@@ -220,13 +220,11 @@ const Completed: FC<ICompletedProps> = ({
  const resetList = useCallback(() => {
    setSelectedSegmentIds([])
    invalidSegmentList()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [invalidSegmentList])

  const resetChildList = useCallback(() => {
    invalidChildSegmentList()
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
+  }, [invalidChildSegmentList])

  const onClickCard = (detail: SegmentDetailModel, isEditMode = false) => {
    setCurrSegment({ segInfo: detail, showModal: true, isEditMode })
@@ -253,7 +251,7 @@ const Completed: FC<ICompletedProps> = ({
  const invalidChunkListEnabled = useInvalid(useChunkListEnabledKey)
  const invalidChunkListDisabled = useInvalid(useChunkListDisabledKey)

-  const refreshChunkListWithStatusChanged = () => {
+  const refreshChunkListWithStatusChanged = useCallback(() => {
    switch (selectedStatus) {
      case 'all':
        invalidChunkListDisabled()
@@ -262,7 +260,7 @@ const Completed: FC<ICompletedProps> = ({
      default:
        invalidSegmentList()
    }
-  }
+  }, [selectedStatus, invalidChunkListDisabled, invalidChunkListEnabled, invalidSegmentList])

  const onChangeSwitch = useCallback(async (enable: boolean, segId?: string) => {
    const operationApi = enable ? enableSegment : disableSegment
@@ -280,8 +278,7 @@ const Completed: FC<ICompletedProps> = ({
        notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
      },
    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [datasetId, documentId, selectedSegmentIds, segments])
+  }, [datasetId, documentId, selectedSegmentIds, segments, disableSegment, enableSegment, t, notify, refreshChunkListWithStatusChanged])

  const { mutateAsync: deleteSegment } = useDeleteSegment()

@@ -296,12 +293,11 @@ const Completed: FC<ICompletedProps> = ({
        notify({ type: 'error', message: t('common.actionMsg.modifiedUnsuccessfully') })
      },
    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [datasetId, documentId, selectedSegmentIds])
+  }, [datasetId, documentId, selectedSegmentIds, deleteSegment, resetList, t, notify])

  const { mutateAsync: updateSegment } = useUpdateSegment()

-  const refreshChunkListDataWithDetailChanged = () => {
+  const refreshChunkListDataWithDetailChanged = useCallback(() => {
    switch (selectedStatus) {
      case 'all':
        invalidChunkListDisabled()
@@ -316,7 +312,7 @@ const Completed: FC<ICompletedProps> = ({
        invalidChunkListEnabled()
        break
    }
-  }
+  }, [selectedStatus, invalidChunkListDisabled, invalidChunkListEnabled, invalidChunkListAll])

  const handleUpdateSegment = useCallback(async (
    segmentId: string,
@@ -375,17 +371,18 @@ const Completed: FC<ICompletedProps> = ({
        eventEmitter?.emit('update-segment-done')
      },
    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [segments, datasetId, documentId])
+  }, [segments, datasetId, documentId, updateSegment, docForm, notify, eventEmitter, onCloseSegmentDetail, refreshChunkListDataWithDetailChanged, t])

  useEffect(() => {
    resetList()
+  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [pathname])

  useEffect(() => {
    if (importStatus === ProcessStatus.COMPLETED)
      resetList()
-  }, [importStatus, resetList])
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [importStatus])

  const onCancelBatchOperation = useCallback(() => {
    setSelectedSegmentIds([])
@@ -430,8 +427,7 @@ const Completed: FC<ICompletedProps> = ({
      const count = segmentListData?.total || 0
      return `${total} ${t('datasetDocuments.segment.searchResults', { count })}`
    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [segmentListData?.total, mode, parentMode, searchValue, selectedStatus])
+  }, [segmentListData, mode, parentMode, searchValue, selectedStatus, t])

  const toggleFullScreen = useCallback(() => {
    setFullScreen(!fullScreen)
@@ -449,8 +445,7 @@ const Completed: FC<ICompletedProps> = ({
      resetList()
      currentPage !== totalPages && setCurrentPage(totalPages)
    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [segmentListData, limit, currentPage])
+  }, [segmentListData, limit, currentPage, resetList])

  const { mutateAsync: deleteChildSegment } = useDeleteChildSegment()

@@ -470,8 +465,7 @@ const Completed: FC<ICompletedProps> = ({
        },
      },
    )
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [datasetId, documentId, parentMode])
+  }, [datasetId, documentId, parentMode, deleteChildSegment, resetList, resetChildList, t, notify])

  const handleAddNewChildChunk = useCallback((parentChunkId: string) => {
    setShowNewChildSegmentModal(true)
@@ -490,8 +484,7 @@ const Completed: FC<ICompletedProps> = ({
    else {
      resetChildList()
    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [parentMode, currChunkId, segments])
+  }, [parentMode, currChunkId, segments, refreshChunkListDataWithDetailChanged, resetChildList])

  const viewNewlyAddedChildChunk = useCallback(() => {
    const totalPages = childChunkListData?.total_pages || 0
@@ -505,8 +498,7 @@ const Completed: FC<ICompletedProps> = ({
      resetChildList()
      currentPage !== totalPages && setCurrentPage(totalPages)
    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [childChunkListData, limit, currentPage])
+  }, [childChunkListData, limit, currentPage, resetChildList])

  const onClickSlice = useCallback((detail: ChildChunkDetail) => {
    setCurrChildChunk({ childChunkInfo: detail, showModal: true })
@@ -560,8 +552,7 @@ const Completed: FC<ICompletedProps> = ({
        eventEmitter?.emit('update-child-segment-done')
      },
    })
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [segments, childSegments, datasetId, documentId, parentMode])
+  }, [segments, datasetId, documentId, parentMode, updateChildSegment, notify, eventEmitter, onCloseChildSegmentDetail, refreshChunkListDataWithDetailChanged, resetChildList, t])

  const onClearFilter = useCallback(() => {
    setInputValue('')
@@ -570,6 +561,12 @@ const Completed: FC<ICompletedProps> = ({
    setCurrentPage(1)
  }, [])

+  const selectDefaultValue = useMemo(() => {
+    if (selectedStatus === 'all')
+      return 'all'
+    return selectedStatus ? 1 : 0
+  }, [selectedStatus])
+
  return (
    <SegmentListContext.Provider value={{
      isCollapsed,
@@ -583,7 +580,7 @@ const Completed: FC<ICompletedProps> = ({
        <Checkbox
          className='shrink-0'
          checked={isAllSelected}
-          mixed={!isAllSelected && isSomeSelected}
+          indeterminate={!isAllSelected && isSomeSelected}
          onCheck={onSelectedAll}
          disabled={isLoadingSegmentList}
        />
@@ -591,7 +588,7 @@ const Completed: FC<ICompletedProps> = ({
        <SimpleSelect
          onSelect={onChangeStatus}
          items={statusList.current}
-          defaultValue={selectedStatus === 'all' ? 'all' : selectedStatus ? 1 : 0}
+          defaultValue={selectDefaultValue}
          className={s.select}
          wrapperClassName='h-fit mr-2'
          optionWrapClassName='w-[160px]'
--- a/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-card/index.tsx
@@ -106,13 +106,11 @@ const SegmentCard: FC<ISegmentCardProps> = ({
  const wordCountText = useMemo(() => {
    const total = formatNumber(word_count)
    return `${total} ${t('datasetDocuments.segment.characters', { count: word_count })}`
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [word_count])
+  }, [word_count, t])

  const labelPrefix = useMemo(() => {
    return isParentChildMode ? t('datasetDocuments.segment.parentChunk') : t('datasetDocuments.segment.chunk')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isParentChildMode])
+  }, [isParentChildMode, t])

  if (loading)
    return <ParentChunkCardSkeleton />
--- a/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-detail.tsx
@@ -86,8 +86,7 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({

  const titleText = useMemo(() => {
    return isEditMode ? t('datasetDocuments.segment.editChunk') : t('datasetDocuments.segment.chunkDetail')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isEditMode])
+  }, [isEditMode, t])

  const isQAModel = useMemo(() => {
    return docForm === ChunkingMode.qa
@@ -98,13 +97,11 @@ const SegmentDetail: FC<ISegmentDetailProps> = ({
    const total = formatNumber(isEditMode ? contentLength : segInfo!.word_count as number)
    const count = isEditMode ? contentLength : segInfo!.word_count as number
    return `${total} ${t('datasetDocuments.segment.characters', { count })}`
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isEditMode, question.length, answer.length, segInfo?.word_count, isQAModel])
+  }, [isEditMode, question.length, answer.length, isQAModel, segInfo, t])

  const labelPrefix = useMemo(() => {
    return isParentChildMode ? t('datasetDocuments.segment.parentChunk') : t('datasetDocuments.segment.chunk')
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isParentChildMode])
+  }, [isParentChildMode, t])

  return (
    <div className={'flex h-full flex-col'}>
--- a/web/app/components/datasets/documents/detail/completed/segment-list.tsx
+++ b/web/app/components/datasets/documents/detail/completed/segment-list.tsx
@@ -42,7 +42,7 @@ const SegmentList = (
    embeddingAvailable,
    onClearFilter,
  }: ISegmentListProps & {
-    ref: React.RefObject<unknown>;
+    ref: React.LegacyRef<HTMLDivElement>
  },
 ) => {
  const mode = useDocumentContext(s => s.mode)
--- a/web/app/components/datasets/documents/list.tsx
+++ b/web/app/components/datasets/documents/list.tsx
@@ -202,7 +202,7 @@ export const OperationAction: FC<{
  const isListScene = scene === 'list'

  const onOperate = async (operationName: OperationName) => {
-    let opApi = deleteDocument
+    let opApi
    switch (operationName) {
      case 'archive':
        opApi = archiveDocument
@@ -490,7 +490,7 @@ const DocumentList: FC<IDocumentListProps> = ({

  const handleAction = (actionName: DocumentActionType) => {
    return async () => {
-      let opApi = deleteDocument
+      let opApi
      switch (actionName) {
        case DocumentActionType.archive:
          opApi = archiveDocument
@@ -527,7 +527,7 @@ const DocumentList: FC<IDocumentListProps> = ({
                    <Checkbox
                      className='mr-2 shrink-0'
                      checked={isAllSelected}
-                      mixed={!isAllSelected && isSomeSelected}
+                      indeterminate={!isAllSelected && isSomeSelected}
                      onCheck={onSelectedAll}
                    />
                  )}