1.0.2 • Published 6 years ago

custom-filter v1.0.2

Weekly downloads
2
License
ISC
Repository
github
Last release
6 years ago

custom-filter 文档

描述:针对于 react antd 表格组件中表头搜索,原则上支持所有 antd 及自定义 form 组件,如组件值与触发方法不是 value 及 onChange 则需要设置 valuePropName, validateTrigger

属性描述
formantd form 对象 form={this.props.form}
title显示名称
name变量名称
initialValue默认值
validatorform validator 验证方法
valuePropName子节点的值的属性,如 Switch 的是 'checked' 默认 'value'
validateTrigger子节点的值的触发方法, 默认 'onChange'
onOk点击确定按钮的回调
overlayClassName浮层类名
renderParent是否渲染在父级

example

import React from 'react';
import ReactDOM from 'react-dom';
import {Form, Input, Select} from 'antd';
import { FormComponentProps } from 'antd/lib/form';
import CustomFilter from 'custom-filter';


interface DemoProps extends FormComponentProps{

}
class Demo extends React.Component<DemoProps,any>{
    constructor(props:DemoProps) {
        super(props);
    }
    render(){
        return <div>
            <CustomFilter
                title = '姓名'
                form = {this.props.form}
                name = 'name'
                initialValue = '我是默认值'
                onOk={(name, value, title) => {console.log(name, value, title)}}
                // valuePropName='initValue' 
                // validateTrigger='onSelect'
            >
                <Input />
            </CustomFilter>
            <CustomFilter
                title = '性别'
                form = {this.props.form}
                name = 'sex'
                initialValue = '1'
                onOk={(name, value, title) => {console.log(name, value, title)}}
                // valuePropName='initValue' 
                // validateTrigger='onSelect'
            >
                <Select style={{width: 120}}>
                    <Select.Option value='1'>男</Select.Option>
                    <Select.Option value='0'>女</Select.Option>
                </Select>
            </CustomFilter>
            {
                // ... you can use antd all form component or custom component
            }
        </div>
    }
}

const DemoForm = Form.create()(Demo);

ReactDOM.render(<DemoForm/>, document.getElementById('root'));