dify/web/app/education-apply/search-input.tsx

import type { ChangeEventHandler } from 'react'
import {
  useCallback,
  useRef,
  useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import { useEducation } from './hooks'
import Input from '@/app/components/base/input'
import {
  PortalToFollowElem,
  PortalToFollowElemContent,
  PortalToFollowElemTrigger,
} from '@/app/components/base/portal-to-follow-elem'

type SearchInputProps = {
  value?: string
  onChange: (value: string) => void
}
const SearchInput = ({
  value,
  onChange,
}: SearchInputProps) => {
  const { t } = useTranslation()
  const [open, setOpen] = useState(false)
  const {
    schools,
    setSchools,
    querySchoolsWithDebounced,
    handleUpdateSchools,
    hasNext,
  } = useEducation()
  const pageRef = useRef(0)
  const valueRef = useRef(value)

  const handleSearch = useCallback((debounced?: boolean) => {
    const keywords = valueRef.current
    const page = pageRef.current
    if (debounced) {
      querySchoolsWithDebounced({
        keywords,
        page,
      })
      return
    }

    handleUpdateSchools({
      keywords,
      page,
    })
  }, [querySchoolsWithDebounced, handleUpdateSchools])

  const handleValueChange: ChangeEventHandler<HTMLInputElement> = useCallback((e) => {
    setOpen(true)
    setSchools([])
    pageRef.current = 0
    const inputValue = e.target.value
    valueRef.current = inputValue
    onChange(inputValue)
    handleSearch(true)
  }, [onChange, handleSearch, setSchools])

  const handleScroll = useCallback((e: Event) => {
    const target = e.target as HTMLDivElement
    const {
      scrollTop,
      scrollHeight,
      clientHeight,
    } = target
    if (scrollTop + clientHeight >= scrollHeight - 5 && scrollTop > 0 && hasNext) {
      pageRef.current += 1
      handleSearch()
    }
  }, [handleSearch, hasNext])

  return (
    <PortalToFollowElem
      open={open}
      onOpenChange={setOpen}
      placement='bottom'
      offset={4}
      triggerPopupSameWidth
    >
      <PortalToFollowElemTrigger className='block w-full'>
        <Input
          className='w-full'
          placeholder={t('education.form.schoolName.placeholder')}
          value={value}
          onChange={handleValueChange}
        />
      </PortalToFollowElemTrigger>
      <PortalToFollowElemContent className='z-[32]'>
        {
          !!schools.length && value && (
            <div
              className='max-h-[330px] overflow-y-auto rounded-xl border-[0.5px] border-components-panel-border bg-components-panel-bg-blur p-1'
              onScroll={handleScroll as any}
            >
              {
                schools.map((school, index) => (
                  <div
                    key={index}
                    className='system-md-regular flex h-8 cursor-pointer items-center truncate rounded-lg px-2 py-1.5 text-text-secondary hover:bg-state-base-hover'
                    title={school}
                    onClick={() => {
                      onChange(school)
                      setOpen(false)
                    }}
                  >
                    {school}
                  </div>
                ))
              }
            </div>
          )
        }
      </PortalToFollowElemContent>
    </PortalToFollowElem>
  )
}

export default SearchInput