Gitee-select-react NPM

gitee-select-react

选择框组件，基于 rc-select 实现，主要特性有：

支持远程加载选项
遵循 Gitee 企业版视觉规范
提供无边框样式
支持设置 autoWidth 属性让选择框自适应选项宽度

安装

npm install --save gitee-select-react

用法

以下是基于 rc-select 新增的一些属性的用法，其它属性的用法请参考 rc-select 的文档：https://github.com/react-component/select

remote

是否从远程加载选项列表。当值为 true 时，必须传入 onFetchMore。

remoteSearch

是否使用远程搜索功能。默认值为 true，在 select 组件中输入搜索词时，onFetchMore 函数可将参数中的 search 属性作为请求参数发送，让后端搜索选项。当值为 false 时，select 组件会直接对已加载的选项列表进行搜索，设置 filterOption 属性可自定义搜索方法。

<Select
  remote
  remoteSearch={false}
  onFetchMore={({ page }) => {
      /// ...
  }}
  filterOption={(search, option) => option.label.includes(search)}
/>

onFetchMore

加载更多选项的回调函数。函数的参数包含 page 和 search 属性。

<Select
    remote
    onFetchMore={({ page, search }) => {
        // 请求远程数据
        // ...
    }}
/>

extraOptions

额外的选项列表。该列表中选项会被前置插入在选项列表中，主要用于：

提供预加载的选项。
插入“全部”、“默认”、“未选择”等额外选项。

autoLoadSelectedOption

自动加载已选中的选项。当传入的 value 是不存在于已加载的选项列表的值时，Select 组件会调用 onFetchMore 加载缺失的选项列表，onFetchMore 的参数中的 missingOptions 记录了缺失的选项。

<Select
    autoLoadSelectedOption
    onFetchMore={({ page, search, missingOptions }) => {
        // 加载指定页的选项列表
        // ...

        // 如果有缺失的选项，则顺便加载它们
        if (Array.isArray(missingOptions)) {
            // ...
        }
    }}
/>

autoWidth

是否让 select 组件的宽度自适应内容。

noBorder

是否使用无边框样式。

searchInMenu

是否在下拉菜单中显示搜索输入框。

optionRender

选项的渲染方法。当 remote 为 true 时，可传入该方法来自定义选项的渲染结果。

<Select
  remote
  optionRender={(option) => (
    <Select.Option value={option.value} key={option.value}>
      <i className={`icon ${option.icon}`} />
      {option.label}
      {option.customContent}
    </Select.Option>
  )}
/>