ib-advanced-filter
React advanced filter
Setup develop environment
git clone http://gitlab.alibaba-inc.com/ib-fe/ib-advanced-filtercd ib-advanced-filternpm installnpm start
Usage
import React from 'react'
import IbAdvancedFilter from '../src'
import { Button, Form } from 'uxcore'
const {
SelectFormField,
SearchFormField
} = Form
const Filter = new IbAdvancedFilter()
class Demo extends React.Component {
constructor (props) {
super(props)
this.state = {
}
}
handleQuuery (data) {
console.log(data)
}
render () {
return (
<div className='demo'>
<Filter
onQuery={this.handleQuuery}
showType='tags'
renderSearchField={(props) => { // 右侧搜索栏渲染函数,必须引入props参数
return (
<SearchFormField {...props} jsxname='keyword' />
)
}}
actionBar={[
<Button key='add' type='outline'>新增</Button>,
<Button key='modify' type='outline' disabled>修改</Button>,
<Button key='del' type='outline' disabled>删除</Button>
]}
fields={[
[{
name: 'kindId', // 必填
title: '设备类型',
pluginType: '',
options: [ // 默认值(可选)
{
value: '1',
text: '设备类型1'
},
{
value: '2',
text: '设备类型2'
},
{
value: '3',
text: '设备类型3'
}
],
onChange (data) { // 联动事件触发
if (data.name === 'runState') {
return Promise.resolve({ // 返回格式{name: '当前配置项名', data: []}
name: 'kindId',
data: [{
value: 'mc1',
text: `${data.value.label}m建筑1`
}, {
value: 'mc2',
text: `${data.value.label}m建筑2`
}]})
}
return Promise.resolve()
}
},
{
name: 'runState',
title: '运行状态',
pluginType: '',
options: [
{
value: '1',
text: '在线'
},
{
value: '2',
text: '离线'
},
{
value: '3',
text: '故障'
}
]
}], [{
name: 'jianzhuId',
title: '建筑',
pluginType: '',
onChange (data) { // 需要把name返回
if (data.name === 'runState') {
return Promise.resolve({
name: 'jianzhuId', // 同当前的name,必填
data: [{
value: 'ac1',
text: 'z建筑1'
}, {
value: 'ac2',
text: 'z建筑2'
}]})
}
return Promise.resolve()
},
onSearch: ({ key = '', filterData }) => { // 默认的数据请求事件 及 Select onSearch事件
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve([{
value: 'c1',
text: '建筑1'
}, {
value: 'c2',
text: '建筑2'
}])
}, 500)
})
}
}, {
name: 'changdiId',
title: '场地',
pluginType: '',
options: [{
value: '1',
text: '场地1'
}, {
value: '2',
text: '场地2'
}],
render: (data, props) => {
return (<SelectFormField // 自定义组件,data为当前配置项的数据,props必须传入
{...props}
key='custom'
jsxlabel={data.title}
jsxname={data.name}
jsxplaceholder='请选择'
verticalAlign
jsxdata={data.options}
onSearch={f => f}
/>)
}
}]
]}
/>
</div>
)
}
}
export default Demo
Test Case
npm run test
Coverage
npm run coverage
Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
prefixCls | string | 'ib-bizui' | |
renderSearchField | 右侧搜索框部分显然。自定义返回的表单类的组件,需要填写jsxname 。回调函数的参数中包含 props ,handleSubmit ,props 必须在自定义的返回的组件中做为属性传入。handleSubmit 为表单的提交回掉方法,请在组件的触发提交数据的事件上绑定这个方法,否则读取这个表单的值 |
Func( props:Object, handleSubmit:Function) | f => f |
fields | 筛选字段的配置项 规则: - 传入参数为数组 - 内部也是一个数组,用于达到按行放置。 name:String :表单的名字(必填)title:String :表单的label显示(必填)pluginType:String :String用于高阶组件的标识(选填)options:Array :默认Select下的静态option,[{value:String, text:String}, ...] onSearch:Function :首次加载时的option请求方法,反悔值必须为Promise,首次渲染时无回调参数,之后触发时会含有{key, filterData: Object} ,key 是当前配置中的组件触发时的变化的值,filterData 当前Dialog中form的实际值onChange:Function :联动触发函数。回调参数{value, name} ,value 为当前的值,name 为当前值是由哪个表单字段触发的,返回类型必须为Promise,返回值{name: '同当前配置项name一致', data: {请求成功后的值}} render:Function :回调参数(data,props) ,data 为当前配置中的信息,props 为系统默认提供的属性,需要在自定义组件中传入此属性 |
array[array[item:object],...] | [] |
onQuery | 筛选条件更改的回调,参数为筛选条件结果 | func | f => f |
showType | 组件的显示风格,simple或tags | string | ' numbers' |
buttonGroups | 左侧的按钮区 | array[ele,ele…] | [] |
Contribute
Yes please! See the CONTRIBUTING for details.