npm

ib-bizui-filter

0.1.0 • Public • Published

ib-advanced-filter

React advanced filter

NPM version build status Test Coverage Dependency Status devDependency Status NPM downloads

Sauce Test Status

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,handleSubmitprops必须在自定义的返回的组件中做为属性传入。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.

Package Sidebar

Install

npm i ib-bizui-filter

Weekly Downloads

0

Version

0.1.0

License

MIT

Unpacked Size

32.8 kB

Total Files

18

Last publish

Collaborators

  • lecepin