All files / src/hocs/components/filter number.js

10.71% Statements 3/28
0% Branches 0/20
0% Functions 0/7
10.71% Lines 3/28

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            4x 4x 4x                                                                                                                                                                                                                
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';
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 {intl} = this.props;
    const {operator, input} = this.state;
    const placeholder = intl.formatMessage({
      id: 'query.numberRange.placeholder',
    });
    return (
      <InputGroup compact>
        <Select style={{width: 60}}
          value={operator}
          onChange={this.changeOperator}
        >
          {
            operators.map((operator) =>
              <Option key={operator.value} value={operator.value}>
                {operator.symbol}
              </Option>)
          }
        </Select>
        <Input
          style={{width: 120}}
          placeholder={placeholder}
          value={input}
          onChange={this.onInput}
        />
      </InputGroup>
    );
  }
}