rtaro-ui/types/search-select.d.ts

UI KIT for Taro

import { ComponentClass } from 'react'
import { CommonEventFunction, CommonEvent } from '@rtarojs/components/types/common'
import AtComponent from './base'
import { AtListItemProps } from './list'
import { PropsType as AtEmptyProps } from '../src/components/empty/PropsType'

export type AtSearchSelectOption = {
  label: string
  value: string
  hidden?: boolean
}

export interface AtSearchSelectProps extends AtComponent {
  /**
   * 可选项
   */
  options?: AtSearchSelectOption[]
  /**
   * 搜索历史
   */
  historyOptions?: AtSearchSelectOption[]
  /**
   * 搜索历史标题
   */
  historyTitle?: string
  /**
   * 搜索关键字颜色
   */
  searchKeyColor?: string
  /**
   * ListItem 入参
   */
  listItemProps?: AtListItemProps
  /**
   * Empty 入参
   */
  emptyProps?: AtEmptyProps
  /**
   * 是否自定义用于触发显示的 dom，与renderTrigger配套
   */
  customTrigger?: boolean
  /**
   * 用于触发显示的 dom
   */
  renderTrigger?: () => JSX.Element | string
  /**
   * 清除
   */
  onClear?: CommonEventFunction
  /**
   * 文本框值变化时回调
   */
  onSearch?: (value: string, e?: CommonEvent) => void
  /**
   * 搜索结果点击事件
   */
  onItemClick?: (item: { label: string; value: string }, e?: CommonEvent) => void
  /**
   * 搜索按钮点击事件
   */
  onConfirm?: (value: string, e?: CommonEvent) => void
  /**
   * 请求可选项数据
   */
  request?: (params: any) => Promise<AtSearchSelectOption[]>
  /**
   * 搜索历史点击事件
   */
  onHistoryItemClick?: (item: AtSearchSelectOption, e?: CommonEvent) => void
  /**
   * 搜索历史删除按钮点击事件
   */
  onHistoryDeleteClick?: (e?: CommonEvent) => void
}

export interface AtSearchSelectState {
  /**
   * 控制显示隐藏
   */
  visible: boolean
  /**
   * 搜索栏输入值
   */
  searchValue: string
  /**
   * 搜索结果选项
   */
  searchOptions: AtSearchSelectOption[] | null
  /**
   * 搜索栏是否聚焦
   */
  focus: boolean
  /**
   * 是否显示加载
   */
  loading: boolean
}

declare const AtSearchSelect: ComponentClass<AtSearchSelectProps>

export default AtSearchSelect