Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 3x 3x 3x | import React, {Component} from 'react'; import PropTypes from 'prop-types'; import {Input, Select} from 'antd'; import isNaN from 'lodash/isNaN'; import isEmpty from 'lodash/isEmpty'; import {injectIntl} from 'react-intl'; import {FilterPlugin, Label} from './share'; const Option = Select.Option; const InputGroup = Input.Group; const operators = [ {symbol: '>', value: 'gt'}, {symbol: '<', value: 'lt'}, {symbol: '=', value: 'eq'}, {symbol: '≥', value: 'gte'}, {symbol: '≤', value: 'lte'}, ]; @injectIntl export default class NumberRangeFilter extends Component { static propTypes = { onChange: PropTypes.func, name: PropTypes.string, label: PropTypes.string, intl: PropTypes.object, }; constructor(props) { super(props); this.state = { input: '', lowInput: '', operator: 'gt', }; this.onInputLow = this.onInputLow.bind(this); this.onInput = this.onInput.bind(this); this.changeOperator = this.changeOperator.bind(this); this.onChange = this.onChange.bind(this); } onInputLow(e) { const {value} = e.target; const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/; if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') { this.setState({ lowInput: value, }, this.onChange); } } onInput(e) { const {value} = e.target; const reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/; if ((!isNaN(value) && reg.test(value)) || value === '' || value === '-') { this.setState({ input: value, }, this.onChange); } } changeOperator(val) { this.setState({ operator: val, }, this.onChange); } onChange() { const {lowInput, input, operator} = this.state; const {name, onChange} = this.props; if (operator === '$between') { onChange({ name: { $gt: isEmpty(lowInput) ? -Infinity : Number(lowInput), $lt: isEmpty(input) ? Infinity : Number(input), } }); } else { onChange(isEmpty(input) ? undefined : { [name]: { [operator]: Number(input) } }); } } render() { const {label, intl} = this.props; const {operator, input} = this.state; const placeholder = intl.formatMessage({ id: 'query.numberRange.placeholder', }); return ( <FilterPlugin> <Label>{label}</Label> <InputGroup compact> <Select style={{width: '20%'}} value={operator} onChange={this.changeOperator} > { operators.map((operator) => <Option key={operator.value} value={operator.value}> {operator.symbol} </Option>) } </Select> <Input style={{width: '40%'}} placeholder={placeholder} value={input} onChange={this.onInput} /> </InputGroup> </FilterPlugin> ); } } |