1 |
|
2 |
|
3 |
|
4 |
|
5 | import React, { Component } from 'react';
|
6 | import PropTypes from 'prop-types';
|
7 | import Dropdown from 'bee-dropdown';
|
8 | import Menu from 'bee-menus';
|
9 | import Button from 'bee-button';
|
10 | import Icon from 'bee-icon';
|
11 | import i18n from './lib/i18n';
|
12 | import { getComponentLocale } from 'bee-locale/build/tool';
|
13 | const { Item } = Menu;
|
14 |
|
15 |
|
16 | class FilterDropDown extends Component {
|
17 | constructor() {
|
18 | super();
|
19 | this.state = {
|
20 | selectValue: ['LIKE'],
|
21 | selectNumberValue: ['EQ']
|
22 | }
|
23 | }
|
24 | |
25 |
|
26 |
|
27 |
|
28 |
|
29 | onSelectDropdown = (item) => {
|
30 | let { onSelectDropdown, filterDropdownType } = this.props;
|
31 | if (onSelectDropdown) {
|
32 | if (filterDropdownType == 'string') {
|
33 | this.setState({
|
34 | selectValue: [item.key]
|
35 | }, () => {
|
36 | onSelectDropdown(item);
|
37 | });
|
38 | }
|
39 | if (filterDropdownType == 'number') {
|
40 | this.setState({
|
41 | selectNumberValue: [item.key]
|
42 | }, () => {
|
43 | onSelectDropdown(item);
|
44 | });
|
45 | }
|
46 | }
|
47 | }
|
48 |
|
49 | |
50 |
|
51 |
|
52 |
|
53 | onClickClear = () => {
|
54 | let { onClickClear } = this.props;
|
55 | if (onClickClear) {
|
56 | this.setState({
|
57 |
|
58 |
|
59 | }, () => {
|
60 | onClickClear();
|
61 | });
|
62 | }
|
63 | }
|
64 |
|
65 | |
66 |
|
67 |
|
68 |
|
69 |
|
70 | getMenu = () => {
|
71 | let { selectValue, selectNumberValue } = this.state;
|
72 | let { filterDropdownType, filterDropdownIncludeKeys } = this.props;
|
73 | let locale = getComponentLocale(this.props, this.context, 'Table', () => i18n);
|
74 | let stringEnum = {
|
75 | LIKE: 'include',
|
76 | ULIKE: 'exclusive',
|
77 | EQ: 'equal',
|
78 | UEQ: 'unequal',
|
79 | START: 'begin',
|
80 | END: 'end'
|
81 | };
|
82 | let numberEnum = {
|
83 | GT: 'greater_than',
|
84 | GTEQ: 'great_than_equal_to',
|
85 | LT: 'less_than',
|
86 | LTEQ: 'less_than_equal_to',
|
87 | EQ: 'be_equal_to',
|
88 | UEQ: 'not_equal_to'
|
89 | };
|
90 | if (filterDropdownIncludeKeys != undefined) {
|
91 | switch (filterDropdownType) {
|
92 | case 'string':
|
93 | return <Menu
|
94 | onClick={this.onSelectDropdown}
|
95 | selectedKeys={selectValue}
|
96 | >
|
97 | {
|
98 | filterDropdownIncludeKeys.map(item => {
|
99 | return <Item key={item}>{locale[stringEnum[item]]}</Item>
|
100 | })
|
101 | }
|
102 | </Menu>
|
103 | case 'number':
|
104 | return <Menu
|
105 | onClick={this.onSelectDropdown}
|
106 | selectedKeys={selectNumberValue}
|
107 | >
|
108 | {
|
109 | filterDropdownIncludeKeys.map(item => {
|
110 | return <Item key={item}>{locale[numberEnum[item]]}</Item>
|
111 | })
|
112 | }
|
113 | </Menu>
|
114 | default:
|
115 | return <div></div>;
|
116 | }
|
117 | } else {
|
118 | switch (filterDropdownType) {
|
119 | case 'string':
|
120 | return <Menu
|
121 | onClick={this.onSelectDropdown}
|
122 | selectedKeys={selectValue}
|
123 | >
|
124 | <Item key="LIKE">{locale['include']}</Item>
|
125 | <Item key="ULIKE">{locale['exclusive']}</Item>
|
126 | <Item key="EQ">{locale['equal']}</Item>
|
127 | <Item key="UEQ">{locale['unequal']}</Item>
|
128 | <Item key="RLIKE">{locale['begin']}</Item>
|
129 | <Item key="LLIKE">{locale['end']}</Item>
|
130 | </Menu>
|
131 | case 'number':
|
132 | return <Menu
|
133 | onClick={this.onSelectDropdown}
|
134 | selectedKeys={selectNumberValue}
|
135 | >
|
136 | <Item key="GT">{locale['greater_than']}</Item>
|
137 | <Item key="GTEQ">{locale['great_than_equal_to']}</Item>
|
138 | <Item key="LT">{locale['less_than']}</Item>
|
139 | <Item key="LTEQ">{locale['less_than_equal_to']}</Item>
|
140 | <Item key="EQ">{locale['be_equal_to']}</Item>
|
141 | <Item key="UEQ">{locale['not_equal_to']}</Item>
|
142 | </Menu>
|
143 | default:
|
144 | return <div></div>;
|
145 | }
|
146 | }
|
147 | }
|
148 | render() {
|
149 | let { isShowCondition } = this.props;
|
150 |
|
151 | return (<div className="filter-btns">
|
152 | {isShowCondition == 'show' && <Dropdown
|
153 | overlayClassName="u-filter-dropdown-menu-wrap"
|
154 | trigger={['click']}
|
155 | overlay={this.getMenu()}
|
156 | animation="slide-up"
|
157 | >
|
158 | <Button
|
159 | shape="border"
|
160 | style={{ marginLeft: "2px", minWidth: "0px", width: "26px", lineHeight: "24px", padding: 0 }}
|
161 | >
|
162 | <Icon style={{ padding: 0, color: '#585858' }} type="uf-filter" />
|
163 | </Button>
|
164 | </Dropdown>}
|
165 | <Button
|
166 | onClick={this.onClickClear}
|
167 | shape="border"
|
168 | style={{ marginLeft: "2px", minWidth: "0px", width: "26px", lineHeight: "24px", padding: 0, "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }}
|
169 | >
|
170 | <Icon style={{ padding: 0, color: '#585858', "visibility": this.props.isShowClear || this.state.selectValue.length > 0 ? "visible" : "hidden" }} type="uf-filterno" />
|
171 | </Button>
|
172 | </div>
|
173 | );
|
174 | }
|
175 | }
|
176 |
|
177 | FilterDropDown.propTypes = {
|
178 | isShowCondition: PropTypes.string,
|
179 | filterDropdownType: PropTypes.oneOf(['string', 'number'])
|
180 | }
|
181 |
|
182 | FilterDropDown.defaultProps = {
|
183 | isShowCondition: 'show',
|
184 | filterDropdownType: 'string'
|
185 | }
|
186 |
|
187 | FilterDropDown.contextTypes = {
|
188 | beeLocale: PropTypes.object
|
189 | };
|
190 | export default FilterDropDown;
|