ib-advanced-filter

React advanced filter

Setup develop environment

git clone http://gitlab.alibaba-inc.com/ib-fe/ib-advanced-filter
cd ib-advanced-filter
npm install
npm 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.