1 | import React, { Component } from 'react';
|
2 | import PropTypes from 'prop-types';
|
3 | import DatePicker from 'bee-datepicker';
|
4 | import zhCN from 'bee-datepicker/build/locale/zh_CN';
|
5 | import FormControl from 'bee-form-control';
|
6 | import Select from 'bee-select';
|
7 | import InputNumber from 'bee-input-number';
|
8 | import FilterDropDown from './FilterDropDown';
|
9 |
|
10 | const { RangePicker,YearPicker,MonthPicker,WeekPicker } = DatePicker;
|
11 |
|
12 | const propTypes = {
|
13 | filterDropdown: PropTypes.string
|
14 | };
|
15 |
|
16 | class FilterType extends Component {
|
17 | constructor(props) {
|
18 | super(props);
|
19 | this.state = {
|
20 | value: "",
|
21 | text: "",
|
22 | selectValue: "",
|
23 | dateValue: "",
|
24 | open: false,
|
25 | condition: props.filterDropdownType == 'string' ? 'LIKE' : 'EQ',
|
26 | number: 0
|
27 | }
|
28 | }
|
29 |
|
30 | |
31 |
|
32 |
|
33 |
|
34 | clearFilter = () => {
|
35 | let { onFilterClear, dataIndex } = this.props;
|
36 | if (this.state.value !== "") {
|
37 | this.setState({
|
38 | value: "",
|
39 | condition: this.props.filterDropdownType == 'string' ? 'LIKE' : 'EQ'
|
40 | }, () => {
|
41 |
|
42 | onFilterClear && onFilterClear(dataIndex);
|
43 | });
|
44 | }
|
45 | }
|
46 |
|
47 | |
48 |
|
49 |
|
50 |
|
51 | changeText = (val) => {
|
52 | let { onFilterChange, dataIndex } = this.props;
|
53 | this.setState({
|
54 | value: val
|
55 | }, () => {
|
56 | onFilterChange(dataIndex, val, this.state.condition);
|
57 | });
|
58 | }
|
59 |
|
60 | |
61 |
|
62 |
|
63 |
|
64 | changeTextCall = (e) => {
|
65 | let { onFilterChange, dataIndex } = this.props;
|
66 | if (e.keyCode == 13) {
|
67 | e.target.value !== "" && onFilterChange(dataIndex, e.target.value, this.state.condition);
|
68 | }
|
69 | }
|
70 | |
71 |
|
72 |
|
73 |
|
74 | changeValue = () => {
|
75 | this.setState({
|
76 | value: ""
|
77 | });
|
78 | }
|
79 | |
80 |
|
81 |
|
82 |
|
83 |
|
84 |
|
85 | onSelectDropdown = (item) => {
|
86 | let { onFilterChange, dataIndex } = this.props;
|
87 | this.setState({
|
88 | condition: item.key
|
89 | }, () => {
|
90 | this.state.value !== "" && onFilterChange && onFilterChange(dataIndex, this.state.value, this.state.condition);
|
91 | });
|
92 | }
|
93 |
|
94 | |
95 |
|
96 |
|
97 |
|
98 | changeNumber = (value) => {
|
99 | let { onFilterChange, dataIndex } = this.props;
|
100 | this.setState({
|
101 | value
|
102 | }, () => {
|
103 | onFilterChange(dataIndex, value, this.state.condition);
|
104 | });
|
105 | }
|
106 |
|
107 | clearNumber = () => {
|
108 | let { onChange } = this.props;
|
109 | onChange && onChange("");
|
110 | this.setState({
|
111 | value: ""
|
112 | });
|
113 | }
|
114 |
|
115 |
|
116 | changeTextCallBlur = (val) => {
|
117 | let { onChange } = this.props;
|
118 | onChange && onChange(val);
|
119 | }
|
120 |
|
121 | changeSelect = (value) => {
|
122 | let { onFilterChange, dataIndex } = this.props;
|
123 | if (onFilterChange) {
|
124 | onFilterChange(dataIndex, value, this.state.condition);
|
125 | this.setState({
|
126 | value
|
127 | });
|
128 | }
|
129 | }
|
130 |
|
131 | clearSelectValue = () => {
|
132 | this.setState({
|
133 | selectValue: ""
|
134 | }, () => {
|
135 | this.changeSelect("");
|
136 | });
|
137 | }
|
138 |
|
139 | clearDateValue = () => {
|
140 | this.setState({
|
141 | dateValue: ""
|
142 | }, () => {
|
143 | this.changeDate("");
|
144 | });
|
145 | }
|
146 |
|
147 | changeDate = (value) => {
|
148 | let { onFilterChange, dataIndex } = this.props;
|
149 | if (onFilterChange) {
|
150 | onFilterChange(dataIndex, value, this.state.condition);
|
151 | this.setState({
|
152 | value,
|
153 | open: false
|
154 | });
|
155 | }
|
156 | }
|
157 |
|
158 | |
159 |
|
160 |
|
161 |
|
162 |
|
163 |
|
164 | renderControl = (rendertype) => {
|
165 | let { filterInputNumberOptions, filterDropdownIncludeKeys, dataIndex, filterDropdown, filterDropdownType, format, className, onChange, onSelectDropdown, clsPrefix, locale } = this.props;
|
166 | switch (rendertype) {
|
167 | case 'text':
|
168 | return <div className={`${clsPrefix} filter-wrap`}>
|
169 | <FormControl
|
170 | value={this.state.value}
|
171 | className={className}
|
172 | onChange={this.changeText}
|
173 | onKeyDown={this.changeTextCall}
|
174 | //onBlur={this.changeTextCallBlur}
|
175 | />
|
176 | <FilterDropDown
|
177 | locale={locale}
|
178 | dataIndex={dataIndex}
|
179 | dataText={this.state.value}
|
180 | onSelectDropdown={this.onSelectDropdown}
|
181 | onClickClear={this.clearFilter}
|
182 | isShowClear={this.state.value}
|
183 | isShowCondition={filterDropdown}
|
184 | filterDropdownType={filterDropdownType}
|
185 | filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
186 | >
|
187 | </FilterDropDown>
|
188 | </div>
|
189 | case 'number':
|
190 | return <div className={`${clsPrefix} filter-wrap`}>
|
191 | <InputNumber
|
192 | {...filterInputNumberOptions}
|
193 | className={className}
|
194 | value={this.state.value}
|
195 | onChange={this.changeNumber}
|
196 | iconStyle="one"
|
197 | />
|
198 | <FilterDropDown
|
199 | locale={locale}
|
200 | dataIndex={dataIndex}
|
201 | dataText={this.state.value}
|
202 | onSelectDropdown={this.onSelectDropdown}
|
203 | onClickClear={this.clearFilter}
|
204 | isShowClear={this.state.value != 0}
|
205 | isShowCondition={filterDropdown}
|
206 | filterDropdownType={filterDropdownType}
|
207 | filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
208 | >
|
209 | </FilterDropDown>
|
210 | </div>
|
211 | case 'dropdown':
|
212 | return <div className={`${clsPrefix} filter-wrap`}>
|
213 | <Select
|
214 | {...this.props}
|
215 | size="sm"
|
216 | value={this.state.value}
|
217 | onChange={this.changeSelect}
|
218 | /><FilterDropDown
|
219 | locale={locale}
|
220 | dataIndex={dataIndex}
|
221 | dataText={this.state.value}
|
222 | onSelectDropdown={this.onSelectDropdown}
|
223 | onClickClear={this.clearFilter}
|
224 | isShowCondition={filterDropdown}
|
225 | isShowClear={this.state.value}
|
226 | filterDropdownType={filterDropdownType}
|
227 | filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
228 | >
|
229 | </FilterDropDown></div>
|
230 | case 'date':
|
231 | return <div className={`${clsPrefix} filter-wrap`}>
|
232 | <DatePicker
|
233 | {...this.props}
|
234 | value={this.state.value}
|
235 | onChange={this.changeDate}
|
236 | open={this.state.open}
|
237 | format={format}
|
238 | locale={zhCN}
|
239 | /><FilterDropDown
|
240 | locale={locale}
|
241 | dataIndex={dataIndex}
|
242 | dataText={this.state.value}
|
243 | onSelectDropdown={this.onSelectDropdown}
|
244 | onClickClear={this.clearFilter}
|
245 | isShowCondition={filterDropdown}
|
246 | isShowClear={this.state.value}
|
247 | filterDropdownType={filterDropdownType}
|
248 | filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
249 | >
|
250 | </FilterDropDown>
|
251 | </div>
|
252 | case 'dateyear':
|
253 | return <div className={`${clsPrefix} filter-wrap`}>
|
254 | <YearPicker
|
255 | {...this.props}
|
256 | value={this.state.value}
|
257 | onChange={this.changeDate}
|
258 | open={this.state.open}
|
259 | format={format}
|
260 | locale={zhCN}
|
261 | /><FilterDropDown
|
262 | locale={locale}
|
263 | dataIndex={dataIndex}
|
264 | dataText={this.state.value}
|
265 | onSelectDropdown={this.onSelectDropdown}
|
266 | onClickClear={this.clearFilter}
|
267 | isShowCondition={filterDropdown}
|
268 | isShowClear={this.state.value}
|
269 | filterDropdownType={filterDropdownType}
|
270 | filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
271 | >
|
272 | </FilterDropDown>
|
273 | </div>
|
274 | case 'datemonth':
|
275 | return <div className={`${clsPrefix} filter-wrap`}>
|
276 | <MonthPicker
|
277 | {...this.props}
|
278 | value={this.state.value}
|
279 | onChange={this.changeDate}
|
280 | open={this.state.open}
|
281 | format={format}
|
282 | locale={zhCN}
|
283 | /><FilterDropDown
|
284 | locale={locale}
|
285 | dataIndex={dataIndex}
|
286 | dataText={this.state.value}
|
287 | onSelectDropdown={this.onSelectDropdown}
|
288 | onClickClear={this.clearFilter}
|
289 | isShowCondition={filterDropdown}
|
290 | isShowClear={this.state.value}
|
291 | filterDropdownType={filterDropdownType}
|
292 | filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
293 | >
|
294 | </FilterDropDown>
|
295 | </div>
|
296 | case 'dateweek':
|
297 | return <div className={`${clsPrefix} filter-wrap`}>
|
298 | <WeekPicker
|
299 | {...this.props}
|
300 | value={this.state.value}
|
301 | onChange={this.changeDate}
|
302 | open={this.state.open}
|
303 | format={format}
|
304 | locale={zhCN}
|
305 | /><FilterDropDown
|
306 | locale={locale}
|
307 | dataIndex={dataIndex}
|
308 | dataText={this.state.value}
|
309 | onSelectDropdown={this.onSelectDropdown}
|
310 | onClickClear={this.clearFilter}
|
311 | isShowCondition={filterDropdown}
|
312 | isShowClear={this.state.value}
|
313 | filterDropdownType={filterDropdownType}
|
314 | filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
315 | >
|
316 | </FilterDropDown>
|
317 | </div>
|
318 | case 'daterange':
|
319 | return <div className={`${clsPrefix} filter-wrap`}>
|
320 | <RangePicker
|
321 | {...this.props}
|
322 | value={this.state.value}
|
323 | onChange={this.changeDate}
|
324 | open={this.state.open}
|
325 | format={format}
|
326 | showTime={true}
|
327 | locale={zhCN}
|
328 | placeholder={'开始 ~ 结束'}
|
329 | dateInputPlaceholder={['开始', '结束']}
|
330 | showClear={true}
|
331 | /><FilterDropDown
|
332 | locale={locale}
|
333 | dataIndex={dataIndex}
|
334 | dataText={this.state.value}
|
335 | onSelectDropdown={this.onSelectDropdown}
|
336 | onClickClear={this.clearFilter}
|
337 | isShowCondition={filterDropdown}
|
338 | isShowClear={this.state.value}
|
339 | filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
340 | >
|
341 | </FilterDropDown>
|
342 | </div>
|
343 | case 'bool':
|
344 | return <div className={`${clsPrefix} filter-wrap`}>
|
345 | <Switch
|
346 | className={className}
|
347 | onChange={onChange}
|
348 | />
|
349 | <FilterDropDown locale={locale}
|
350 | onSelectDropdown={onSelectDropdown}
|
351 | filterDropdownIncludeKeys={filterDropdownIncludeKeys}
|
352 | >
|
353 | </FilterDropDown>
|
354 | </div>
|
355 | default:
|
356 | return <div></div>;
|
357 | }
|
358 |
|
359 | }
|
360 | render() {
|
361 | let { rendertype } = this.props;
|
362 | return (
|
363 | <div data-filter-type='filterContext'>{this.renderControl(rendertype)}</div>
|
364 | );
|
365 | }
|
366 | }
|
367 | FilterType.propTypes = propTypes;
|
368 | FilterType.defaultProps = {
|
369 | filterDropdown: 'show'
|
370 | }
|
371 | export default FilterType;
|