Skip to content

Commit

Permalink
fix(Select): custom filter (#673)
Browse files Browse the repository at this point in the history
  • Loading branch information
Bougie committed Sep 26, 2019
1 parent 7634ef6 commit 2226776
Show file tree
Hide file tree
Showing 3 changed files with 109 additions and 46 deletions.
47 changes: 25 additions & 22 deletions components/select/Select.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ class Select extends Component {
showCheckAll: PropTypes.bool,
autoload: PropTypes.bool,
searchable: PropTypes.bool,
filterOption: PropTypes.func,
clearable: PropTypes.bool,
disabled: PropTypes.bool,
placeholder: PropTypes.string,
Expand Down Expand Up @@ -149,7 +150,7 @@ class Select extends Component {
if (this.isRemote()) {
return true
}
return !!searchable
return searchable
}

parseValue (value = this.props.value) {
Expand All @@ -170,7 +171,7 @@ class Select extends Component {
resetSelectedItems (value, dropdownItems = [], listChanged = false) {
const values = this.parseValue(value)
let selectedItems = []
dropdownItems.forEach(item => {
dropdownItems.forEach((item) => {
if (values.includes(item.id)) {
selectedItems.push(item)
}
Expand Down Expand Up @@ -247,11 +248,9 @@ class Select extends Component {
}

this.onChange(selectedItems, item, () => {
this.setState(
{
focusedIndex
}
)
this.setState({
focusedIndex
})
})
if (this.props.type !== 'multiple') {
this.hideDropdown()
Expand Down Expand Up @@ -350,11 +349,10 @@ class Select extends Component {
: keyword
this.autoloadFlag = false // 第一次自动加载数据后，输入的关键词即使为空也不再使用默认关键词

const queryParams = qs.stringify(Object.assign({}, params, key && {[key]: keyword}))
url =
url.includes('?')
? `${url}&${queryParams}`
: `${url}?${queryParams}`
const queryParams = qs.stringify(
Object.assign({}, params, key && { [key]: keyword })
)
url = url.includes('?') ? `${url}&${queryParams}` : `${url}?${queryParams}`

if (type.toUpperCase() === 'POST') {
options.body = JSON.stringify(data)
Expand Down Expand Up @@ -418,7 +416,7 @@ class Select extends Component {
onFilterItems(keyword) {
this.setState(
{
keyword: keyword.toLowerCase()
keyword: keyword
},
() => this.resetFocusedIndex()
)
Expand All @@ -434,13 +432,18 @@ class Select extends Component {
}

matchFilter(item) {
const { filterOption } = this.props
const { searchable, keyword } = this.state
return (
this.isRemote() ||
(!searchable || !keyword) ||
(String(item.id).toLowerCase().includes(keyword) ||
String(item.title).toLowerCase().includes(keyword))
)

const shouldMatch = this.isRemote() ||
(!searchable || !keyword)

if (typeof filterOption === 'function') {
return shouldMatch || filterOption(keyword, item)
}

return shouldMatch || (String(item.id).includes(keyword) ||
String(item.title).includes(keyword))
}

resetFocusedIndex(setState = true) {
Expand Down Expand Up @@ -539,7 +542,7 @@ class Select extends Component {
style={style}
>
<div
className="hi-select__input-container"
className='hi-select__input-container'
ref={(node) => {
this.selectInputContainer = node
}}
Expand Down Expand Up @@ -579,8 +582,8 @@ class Select extends Component {
attachEle={this.selectInputContainer}
zIndex={1050}
topGap={5}
className="hi-select__popper"
placement="top-bottom-start"
className='hi-select__popper'
placement='top-bottom-start'
>
<SelectDropdown
noFoundTip={emptyContent}
Expand Down
51 changes: 51 additions & 0 deletions docs/demo/select/section-search.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
import React from 'react'
import DocViewer from '../../../libs/doc-viewer'
import Select from '../../../components/select'
const prefix = 'select-search'
const code = `import React from 'react'
import Select from '@hi-ui/hiui/es/select'\n
class Demo extends React.Component {
constructor () {
super()
this.state = {
singleList: [
{ title: '小米1', id: 1 },
{ title: '小米2', id: 2, disabled: true },
{ title: '小米3', id: 3, disabled: true },
{ title: '小米4', id: 4 },
{ title: '小米5', id: 5 },
{ title: '小米6', id: 6 },
{ title: '小米8', id: 8 },
{ title: '小米9', id: 9 },
]
}
}
render () {
return (
<Select
type='single'
data={this.state.singleList}
placeholder='搜索多大于等于某个版本'
style={{ width: 200 }}
onChange={(item) => {
console.log('单选结果', item)
}}
searchable
filterOption={(keyword, item) => {
keyword = parseInt(keyword)
return item.id >= keyword
}}
/>
)
}
}`

const DemoBan = () => (
<DocViewer
code={code}
scope={{ Select }}
prefix={prefix}
/>
)
export default DemoBan
57 changes: 33 additions & 24 deletions docs/zh-CN/components/select.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,12 @@ import DemoCustom from '../../demo/select/section-custom'

<DemoCustom />

## 自定义搜索

import DemoSearch from '../../demo/select/section-search'

<DemoSearch />

## 异步单选

import DemoAsync from '../../demo/select/section-async'
Expand All @@ -46,37 +52,40 @@ import DemoAsyncMultiple from '../../demo/select/section-async-multiple'

<DemoAsyncMultiple />

import { Badge } from '@libs'

## Props

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ------------ | ------------------------------------------------------------ | ----------------------------------------------------- | ---------------------- | -------- |
| type | 下拉框类型 | string | 'single' \| 'multiple' | 'single' |
| data | 下拉框选项数据源 | DataItem[] | - | - |
| dataSource | 异步下拉框选项数据源 | DataSource | - | - |
| value | 被选中项的值 | string \| string[] | - | - |
| defaultValue | 默认被选中项的值 | string \| string[] | - | - |
| showCheckAll | 是否显示全选，只对多选生效 | boolean | true \| false | false |
| multipleWrap | 多选模式下是否允许选中结果折行，不建议折行因为会变成动态高度 | string | 'wrap' \| 'nowrap' | 'nowrap' |
| searchable | 是否可以筛选 | boolean | true \| false | false |
| clearable | 是否可以清空 | boolean | true \| false | true |
| autoload | origin 从远端获取数据，初始时是否自动加载 | boolean | true \| false | false |
| disabled | 是否禁用 | boolean | true \| false | false |
| placeholder | 输入框占位 | string | - | 请选择 |
| emptyContent | 没有选项时的提示 | string \| ReactNode | - | 无内容 |
| style | 自定义样式 | object | - | |
| optionWidth | 自定义下拉选项宽度 | number | - | |
| onChange | 改变选项时触发函数，回调值为当前所有选中项的 id 和变更项 | (selectedIds:stirng[], changedItem: DataItem) => void | - | 无内容 |
| render | 自定义下拉菜单渲染函数，回调值为选项数据和是否被选中 | (item: DataItem, selected: boolean) => ReactNode | - | 无内容 |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| ----------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- | -------------------------------------------- | -------- |
| type | 下拉框类型 | string | 'single' \| 'multiple' | 'single' |
| data | 下拉框选项数据源 | DataItem[] | - | - |
| dataSource | 异步下拉框选项数据源 | DataSource | - | - |
| value | 被选中项的值 | string \| string[] | - | - |
| defaultValue | 默认被选中项的值 | string \| string[] | - | - |
| showCheckAll | 是否显示全选，只对多选生效 | boolean | true \| false | false |
| multipleWrap | 多选模式下是否允许选中结果折行，不建议折行因为会变成动态高度 | string | 'wrap' \| 'nowrap' | 'nowrap' |
| searchable | 是否可以筛选 | boolean | true \| false | false |
| <div style={{ width: 160 }}>filterOption<Badge type='feature' text='2.4.0' /></div> | 第一个参数为输入的关键字，第二个为数据项，返回值为 true 时将出现在结果项。仅在 searchable 为 true 时有效 | (keyword: string, item: DataItem) => boolean | (keyword: string, item: DataItem) => boolean | - |
| clearable | 是否可以清空 | boolean | true \| false | true |
| autoload | origin 从远端获取数据，初始时是否自动加载 | boolean | true \| false | false |
| disabled | 是否禁用 | boolean | true \| false | false |
| placeholder | 输入框占位 | string | - | 请选择 |
| emptyContent | 没有选项时的提示 | string \| ReactNode | - | 无内容 |
| style | 自定义样式 | object | - | |
| optionWidth | 自定义下拉选项宽度 | number | - | |
| onChange | 改变选项时触发函数，回调值为当前所有选中项的 id 和变更项 | (selectedIds:stirng[], changedItem: DataItem) => void | - | 无内容 |
| render | 自定义下拉菜单渲染函数，回调值为选项数据和是否被选中 | (item: DataItem, selected: boolean) => ReactNode | - | 无内容 |

## Type

### DataItem

| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | --------------- | ------ | --------------- | ------ |
| title | 下拉选项标题 | string | - | - |
| id | 下拉选项唯一 id | string | 'get' \| 'post' | 'get' |
| disabled | 是否禁用 | object | - | - |
| 参数 | 说明 | 类型 | 可选值 | 默认值 |
| -------- | --------------- | ---------------- | ------ | ------ |
| title | 下拉选项标题 | string | - | - |
| id | 下拉选项唯一 id | string \| number | - | - |
| disabled | 是否禁用 | object | - | - |

### DataSource

Expand Down

0 comments on commit 2226776

Please sign in to comment.