### FilterGroup

---
这是一个table filter component 的集合
为什么使用它?

1. 这里是filter组件的总入口,后期替换修改都会在这个组件里面,有集中约束的效果
2. 在快速开发项目时,复制粘贴的业务组件,不涉及到组件的修改,仅修改配置即可
3. 常用组件的默认配置已经写好提供, 特殊配置由业务页面按需求单独添加.
4. 配置生成由业务页面调用=>配置生成器函数,生成独立业务页面配置,防止配置污染

### params

---
##### onCreateFilterConfig

生成器函数
@params (iterator) => any	
@return (new Filter Config)

iterator是一个处理函数
接收defaultConfig
返回一个新的config:type = FilterType
```
type FilterType = { 
	key:			string,				//ant组件名  search | DatePicker | RangePicker |...
	onChange:		any,				//change事件触发
	value: 			any,				//默认值
	render?: 		any,				//是否自定义组件
	config?: 		any,				//筛选组件自定义配置
} 
```
defaultConfig.key 为组件的component name
例如 Search | RangePicker ...等等

生成器函数例子:
```
//create filter component config
createFilterGroupConfig(config,index){
    const { key }  = config
    switch(key){
        case  "RangePicker":
            var { searchStartDate,searchEndDate } = this.state
            config.value = [moment(searchStartDate),moment(searchEndDate)];
            config.onChange = this.onHandleDateChange.bind(this);
            config.labelName = '创建时间'
            return config
        case 'Search':
            var { serarchInput } =x this.state
            config.value = serarchInput
            config.onSearch = this.onHandleSearch.bind(this)
            config.onChange = this.onHandleInput.bind(this)
            config.config = {
                ...config.config,
                placeholder:'计划名称/计划ID'
            }
            return config
        case 'Select':
            var { selectValue, selectOptions } = this.state
            config.value = selectValue
            config.options = selectOptions.filter(e => { return e && e['name'] ? true : false })
                .map(e => { return { value: e['id'], label: e['name'] } })
            config.config = {
                ...config.config,
                showSearch: true,
                allowClear: true,
                onChange: this.onHandleChange.bind(this),
                placeholder: '请选择渠道',
                style: { width: 300 },
                filterOption: (input, option: any) => option.props.children.toLowerCase().indexOf            (input.toLowerCase()) >= 0,
            }
            return config
        default :
            return config
    }
}
```

##### filterGroup: string[],

过滤组件的key
例如
```
filterGroup = ["Search","RangePicker","Select"]
```

##### fixeRightGroup?: any[]

右侧的按钮一类的list
右边float-right 固定渲染列 一般为button

### 例子

---
```
/* filter */
<FilterGroup 
    filterGroup={['RangePicker','Search','Select']}
    onCreateFilterConfig={this.createFilterGroupConfig.bind(this)}
    fixeRightGroup={[
        (
            <FilterColumns
                columns={this.columns}
                cacheKey="ops-open-product"
                initCallback
                onChangeColums={this.onHandleColumsChange.bind(this)}
            >
                <Button>自定义列</Button>
            </FilterColumns>      
        )
    ]}
/>
```


### default config

---
```
{
    RangePicker:{
        key:'RangePicker',
        value:[moment().subtract(7,'day'),moment()],
        config:{
            allowClear: false,
            format:'YYYY-MM-DD',
            disabledDate:function(current) {
                return current && current > moment();
            },
            ranges:{
                '今天':[moment(),moment()],
                '昨天':[moment().subtract(1,'day'),moment().subtract(1,'day')],
                '过去7天':[moment().subtract(7,'day'),moment()],
                '过去30天':[moment().subtract(30,'day'),moment()],
                '本月':[moment().startOf('month'),moment()],
                '上个月':[moment().month(moment().month() - 1).startOf('month'),
                        moment().month(moment().month() - 1).endOf('month')],
            },
            style:{
                width:'230px',
                fontSize:'14px'
            }
        },
        onChange:function(){}
    },
    Search: {
        key:'Search',
        value:'',
        config:{
            placeholder:'Search input',
            enterButton:true,
            disabled:false,
            style:{ 
                width: '180px',
            },
        },
        onSearch:function(){},
        onChange:function(){}
    },
    Select:{
        key:'Select',
        value:'',
        config:{
            style:{ 
                width: '150px'
            },
        },
        options:[],
        onChange:function(){}
    } 
}
```