NumberFilter.tsx 3.45 KB
Newer Older
1
import * as React from 'react';
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
2
import {translate} from 'react-i18next';
3
4
5
6
import { Field } from 'redux-form';

import TextField from '@material-ui/core/TextField';

7
import NumberFilterModel from 'model/filter/NumberFilter';
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
8

9
10
11
12
13
interface INumberFilterInternal extends React.ClassAttributes<any> {
    name: string;
    input: any;
    placeholder: string;
    label: string;
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
14
    t: any;
15
16
17
18
19
20
21
}

class NumberFilterInternal extends React.Component<INumberFilterInternal, any> {

    private constructor(props, context) {
        super(props, context);

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
22
23
24
        const { value }: { value: NumberFilterModel } = props.input;
        let textA = value  && value.ge !== null ? value.ge : '';
        let textB = value  && value.le !== null ? value.le : '';
25
26
        if (textA && textB) {
          const sorted = [ +textA, +textB ].sort((a, b) => b - a);
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
27
28
          textA = sorted[0] === 0 ? '0' : sorted[0];
          textB = sorted[1] === 0 ? '0' : sorted[1];
29
30
31
32
33
34
        }
        // console.log('Constructor', textA, textB);
        this.state = { textA, textB };
    }

    public componentWillReceiveProps(nextProps) {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
35
36
37
      const  { value }: { value: NumberFilterModel } = nextProps.input;
      const textA = value  && value.ge !== null ? value.ge : '';
      const textB = value  && value.le !== null ? value.le : '';
38
39
40
41
      // console.log('receive props', textA, textB);
      this.setState({ textA, textB });
    }

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
42
    private report(filter: NumberFilterModel) {
43
        const { input } = this.props;
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
44
45
46
        if (filter) {
          console.log('Reporting', filter);
          input.onChange(filter);
47
48
49
50
51
52
        } else {
          input.onChange(null);
        }
    }

    private textAChange = (event) => {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
53
54
        this.setState({textA: event.target.value , textB: this.state.textB});
        this.report({ge: event.target.value, le: this.state.textB});
55
56
57
    }

    private textBChange = (event) => {
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
58
59
        this.setState({ textA: this.state.textA, textB: event.target.value });
        this.report({ge: this.state.textA, le: event.target.value});
60
61
62
    }

    public render() {
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
63
        const { label, t } = this.props;
64
65
66
        return (
            <div>
                <TextField
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
67
                    style={ {width: '50%'} }
Matija Obreza's avatar
Matija Obreza committed
68
                    InputLabelProps={ { shrink: true } }
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
69
                    label={ t(label) }
70
                    value={ this.state.textA }
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
71
                    placeholder={ t('common:f.fromIncluding') }
72
73
74
                    onChange={ this.textAChange }
                />
                <TextField
Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
75
                    style={ {width: '50%'} }
Matija Obreza's avatar
Matija Obreza committed
76
77
                    InputLabelProps={ { shrink: true } }
                    label=" "
78
                    value={ this.state.textB }
Matija Obreza's avatar
Matija Obreza committed
79
                    placeholder={ t('common:f.toIncluding') }
80
81
82
83
84
85
86
87
88
89
                    onChange={ this.textBChange }
                />
            </div>
        );
    }
}

interface INumberFilter extends React.ClassAttributes<any> {
    name: string;
    label: string;
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
90
    t: any;
91
92
}

Viacheslav Pavlov's avatar
Viacheslav Pavlov committed
93
// NumberFilter supports eq, ge, gt, le, lt
94
95
96
97
98
99
100
class NumberFilter extends React.Component<INumberFilter, any> {

    public constructor(props: any) {
        super(props);
    }

    public render() {
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
101
        const { name, label, t } = this.props;
102
103
104
105
106
        return (
            <div>
                <Field
                    name={ name }
                    component={ NumberFilterInternal }
Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
107
108
                    label={ t(label) }
                    t={ t }
109
110
111
112
113
114
                />
            </div>
        );
    }
}

Viacheslav Pavlov's avatar
i18n    
Viacheslav Pavlov committed
115
export default translate()(NumberFilter);