bee-table/src/FilterType.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import DatePicker from 'bee-datepicker';
import zhCN from 'bee-datepicker/build/locale/zh_CN';
import FormControl from 'bee-form-control';
import Select from 'bee-select';
import InputNumber from 'bee-input-number';
import FilterDropDown from './FilterDropDown';

const { RangePicker,YearPicker,MonthPicker,WeekPicker } = DatePicker;

const propTypes = {
    filterDropdown: PropTypes.string
};

class FilterType extends Component {
    constructor(props) {
        super(props);
        this.state = {
            value: "",
            text: "",
            selectValue: "",
            dateValue: "",
            open: false,
            condition: props.filterDropdownType == 'string' ? 'LIKE' : 'EQ',
            number: 0
        }
    }

    /**
     * 清除过滤条件
     *
     */
    clearFilter = () => {
        let { onFilterClear, dataIndex } = this.props;
        if (this.state.value !== "") {
            this.setState({
                value: "",//清空值
                condition: this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ'//切回默认查询条件
            }, () => {
                //调用清除方法参数为当前字段的field
                onFilterClear && onFilterClear(dataIndex);
            });
        }
    }

    /**
     * 设置输入文本的值
     *
     */
    changeText = (val) => {
        let { onFilterChange, dataIndex } = this.props;
        this.setState({
            value: val
        }, () => {
            onFilterChange(dataIndex, val, this.state.condition);
        });
    }

    /**
     * 输入框回车执行回调
     *
     */
    changeTextCall = (e) => {
        let { onFilterChange, dataIndex } = this.props;
        if (e.keyCode == 13) {
            e.target.value !== "" && onFilterChange(dataIndex, e.target.value, this.state.condition);
        }
    }
    /**
     * 更改修改值
     *
     */
    changeValue = () => {
        this.setState({
            value: ""
        });
    }
    /**
     * 下拉条件的回调
     *
     * @param {*} key 字段
     * @param {*} value 值1,2,3...6
     */
    onSelectDropdown = (item) => {
        let { onFilterChange, dataIndex } = this.props;
        this.setState({
            condition: item.key
        }, () => {
            this.state.value !== "" && onFilterChange && onFilterChange(dataIndex, this.state.value, this.state.condition);
        });
    }

    /**
     * 修改数值型的值
     *
     */
    changeNumber = (value) => {
        let { onFilterChange, dataIndex } = this.props;
        this.setState({
            value
        }, () => {
            onFilterChange(dataIndex, value, this.state.condition);
        });
    }
    //清除数值
    clearNumber = () => {
        let { onChange } = this.props;
        onChange && onChange("");
        this.setState({
            value: ""
        });
    }

    //失去焦点后执行函数
    changeTextCallBlur = (val) => {
        let { onChange } = this.props;
        onChange && onChange(val);
    }
    //设置下拉值
    changeSelect = (value) => {
        let { onFilterChange, dataIndex } = this.props;
        if (onFilterChange) {
            onFilterChange(dataIndex, value, this.state.condition);
            this.setState({
                value
            });
        }
    }
    //清除下拉值
    clearSelectValue = () => {
        this.setState({
            selectValue: ""
        }, () => {
            this.changeSelect("");
        });
    }
    //清除日期值
    clearDateValue = () => {
        this.setState({
            dateValue: ""
        }, () => {
            this.changeDate("");
        });
    }
    //设置日期值
    changeDate = (value) => {
        let { onFilterChange, dataIndex } = this.props;
        if (onFilterChange) {
            onFilterChange(dataIndex, value, this.state.condition);
            this.setState({
                value,
                open: false
            });
        }
    }
    //组件渲染
    /**
     * 根据不同的类型生成对应的组件类型包含一些参数的适应
     *
     * @param {*} rendertype 参数类型，包括['text','dropdown','date','dateyear','datemonth','dateweek',daterange','number']
     * @returns
     */
    renderControl = (rendertype) => {
        let { filterInputNumberOptions, filterDropdownIncludeKeys, dataIndex, filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
        switch (rendertype) {
            case 'text':
                return <div className={`${clsPrefix} filter-wrap`}>
                    <FormControl
                        value={this.state.value}
                        className={className}
                        onChange={this.changeText}
                        onKeyDown={this.changeTextCall}
                    //onBlur={this.changeTextCallBlur}
                    />
                    <FilterDropDown
                        locale={locale}
                        dataIndex={dataIndex}
                        dataText={this.state.value}
                        onSelectDropdown={this.onSelectDropdown}
                        onClickClear={this.clearFilter}
                        isShowClear={this.state.value}
                        isShowCondition={filterDropdown}
                        filterDropdownType={filterDropdownType}
                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                    >
                    </FilterDropDown>
                </div>
            case 'number':
                return <div className={`${clsPrefix} filter-wrap`}>
                    <InputNumber
                        {...filterInputNumberOptions}
                        className={className}
                        value={this.state.value}
                        onChange={this.changeNumber}
                        iconStyle="one"
                    />
                    <FilterDropDown
                        locale={locale}
                        dataIndex={dataIndex}
                        dataText={this.state.value}
                        onSelectDropdown={this.onSelectDropdown}
                        onClickClear={this.clearFilter}
                        isShowClear={this.state.value != 0}
                        isShowCondition={filterDropdown}
                        filterDropdownType={filterDropdownType}
                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                    >
                    </FilterDropDown>
                </div>
            case 'dropdown':
                return <div className={`${clsPrefix} filter-wrap`}>
                    <Select
                        {...this.props}
                        size="sm"
                        value={this.state.value}
                        onChange={this.changeSelect}
                    /><FilterDropDown
                        locale={locale}
                        dataIndex={dataIndex}
                        dataText={this.state.value}
                        onSelectDropdown={this.onSelectDropdown}
                        onClickClear={this.clearFilter}
                        isShowCondition={filterDropdown}
                        isShowClear={this.state.value}
                        filterDropdownType={filterDropdownType}
                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                    >
                    </FilterDropDown></div>
            case 'date':
                return <div className={`${clsPrefix} filter-wrap`}>
                    <DatePicker
                        {...this.props}
                        value={this.state.value}
                        onChange={this.changeDate}
                        open={this.state.open}
                        format={format}
                        locale={zhCN}
                    /><FilterDropDown
                        locale={locale}
                        dataIndex={dataIndex}
                        dataText={this.state.value}
                        onSelectDropdown={this.onSelectDropdown}
                        onClickClear={this.clearFilter}
                        isShowCondition={filterDropdown}
                        isShowClear={this.state.value}
                        filterDropdownType={filterDropdownType}
                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                    >
                    </FilterDropDown>
                </div>
            case 'dateyear':
                return <div className={`${clsPrefix} filter-wrap`}>
                    <YearPicker
                        {...this.props}
                        value={this.state.value}
                        onChange={this.changeDate}
                        open={this.state.open}
                        format={format}
                        locale={zhCN}
                    /><FilterDropDown
                        locale={locale}
                        dataIndex={dataIndex}
                        dataText={this.state.value}
                        onSelectDropdown={this.onSelectDropdown}
                        onClickClear={this.clearFilter}
                        isShowCondition={filterDropdown}
                        isShowClear={this.state.value}
                        filterDropdownType={filterDropdownType}
                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                    >
                    </FilterDropDown>
                </div>
            case 'datemonth':
                return <div className={`${clsPrefix} filter-wrap`}>
                    <MonthPicker
                        {...this.props}
                        value={this.state.value}
                        onChange={this.changeDate}
                        open={this.state.open}
                        format={format}
                        locale={zhCN}
                    /><FilterDropDown
                        locale={locale}
                        dataIndex={dataIndex}
                        dataText={this.state.value}
                        onSelectDropdown={this.onSelectDropdown}
                        onClickClear={this.clearFilter}
                        isShowCondition={filterDropdown}
                        isShowClear={this.state.value}
                        filterDropdownType={filterDropdownType}
                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                    >
                    </FilterDropDown>
                </div>
            case 'dateweek':
                return <div className={`${clsPrefix} filter-wrap`}>
                    <WeekPicker
                        {...this.props}
                        value={this.state.value}
                        onChange={this.changeDate}
                        open={this.state.open}
                        format={format}
                        locale={zhCN}
                    /><FilterDropDown
                        locale={locale}
                        dataIndex={dataIndex}
                        dataText={this.state.value}
                        onSelectDropdown={this.onSelectDropdown}
                        onClickClear={this.clearFilter}
                        isShowCondition={filterDropdown}
                        isShowClear={this.state.value}
                        filterDropdownType={filterDropdownType}
                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                    >
                    </FilterDropDown>
                </div>
            case 'daterange':
                return <div className={`${clsPrefix} filter-wrap`}>
                    <RangePicker
                        {...this.props}
                        value={this.state.value}
                        onChange={this.changeDate}
                        open={this.state.open}
                        format={format}
                        showTime={true}
                        locale={zhCN}
                        placeholder={'开始 ~ 结束'}
                        dateInputPlaceholder={['开始', '结束']}
                        showClear={true}
                    /><FilterDropDown
                        locale={locale}
                        dataIndex={dataIndex}
                        dataText={this.state.value}
                        onSelectDropdown={this.onSelectDropdown}
                        onClickClear={this.clearFilter}
                        isShowCondition={filterDropdown}
                        isShowClear={this.state.value}
                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                    >
                    </FilterDropDown>
                </div>
            case 'bool':
                return <div className={`${clsPrefix} filter-wrap`}>
                    <Switch
                        className={className}
                        onChange={onChange}
                    />
                    <FilterDropDown locale={locale}
                        onSelectDropdown={onSelectDropdown}
                        filterDropdownIncludeKeys={filterDropdownIncludeKeys}
                    >
                    </FilterDropDown>
                </div>
            default:
                return <div></div>;
        }

    }
    render() {
        let { rendertype } = this.props;
        return (
            <div data-filter-type='filterContext'>{this.renderControl(rendertype)}</div>
        );
    }
}
FilterType.propTypes = propTypes;
FilterType.defaultProps = {
    filterDropdown: 'show'
}
export default FilterType;