1 | import React , { Component } from 'react';
|
2 | import PropTypes from 'prop-types'
|
3 | import InputNumber from './InputNumber';
|
4 |
|
5 | const noop = ()=>{};
|
6 |
|
7 | const propsTypes = {
|
8 | clsfix:PropTypes.string,
|
9 | className:PropTypes.string,
|
10 | value:PropTypes.array,
|
11 | onChange:PropTypes.func,
|
12 | onBlur:PropTypes.func,
|
13 | onFocus:PropTypes.func,
|
14 | placeholder:PropTypes.array,
|
15 |
|
16 | max: PropTypes.number,
|
17 | min: PropTypes.number,
|
18 | step: PropTypes.number,
|
19 | precision: PropTypes.number,
|
20 | format: PropTypes.func,
|
21 | delay: PropTypes.number,
|
22 | disabled:PropTypes.bool,
|
23 | toThousands:PropTypes.bool,
|
24 | toNumber:PropTypes.bool
|
25 | }
|
26 |
|
27 | const defaultProps = {
|
28 | clsfix:'u-input-number',
|
29 | className:'',
|
30 | value:[],
|
31 | placeholder:[],
|
32 | onChange:noop,
|
33 | onBlur:noop,
|
34 | onFocus:noop
|
35 | }
|
36 |
|
37 | class InputNumberGroup extends Component {
|
38 |
|
39 | static displayName = 'InputNumberGroup';
|
40 |
|
41 | constructor(props){
|
42 | super(props);
|
43 | this.state={
|
44 | value:props.value||[]
|
45 | }
|
46 | }
|
47 |
|
48 | componentWillReceiveProps(nextProps){
|
49 | if('value' in nextProps){
|
50 | this.setState({
|
51 | value:nextProps.value
|
52 | })
|
53 | }
|
54 | }
|
55 |
|
56 | onChange=(index,v)=>{
|
57 | let { value } = this.state;
|
58 | value[index] = v;
|
59 | this.setState({
|
60 | value
|
61 | })
|
62 | this.props.onChange(value);
|
63 | }
|
64 | onFocus=(index,v)=>{
|
65 | let { value } = this.state;
|
66 | value[index] = v;
|
67 | this.setState({
|
68 | value
|
69 | })
|
70 | this.props.onFocus(value);
|
71 | }
|
72 | onBlur=(index,v)=>{
|
73 | let { value } = this.state;
|
74 | if(index==1){
|
75 | if(v<value[0]){
|
76 | console.warn('The second value must be greater than or equal to the first value');
|
77 | }
|
78 | }
|
79 | value[index] = v;
|
80 | this.setState({
|
81 | value
|
82 | })
|
83 |
|
84 | this.props.onBlur(value)
|
85 | }
|
86 |
|
87 | render(){
|
88 | let { className,clsfix,value,onChange,placeholder,split,onBlur,onFocus, ...other } = this.props;
|
89 | let { value:stateValue } = this.state;
|
90 | return (
|
91 | <div className={`${clsfix}-group ${className}`}>
|
92 | <InputNumber
|
93 | onChange={(value)=>{this.onChange(0,value)}}
|
94 | onBlur={(value)=>{this.onBlur(0,value)}}
|
95 | onFocus={(value)=>{this.onFocus(0,value)}}
|
96 | value={stateValue[0]}
|
97 | placeholder={placeholder[0]}
|
98 | {...other}/>
|
99 | {
|
100 | split?split:<span className={`${clsfix}-group-split`}>~</span>
|
101 | }
|
102 | <InputNumber
|
103 | onChange={(value)=>{this.onChange(1,value)}}
|
104 | onBlur={(value)=>{this.onBlur(1,value)}}
|
105 | onFocus={(value)=>{this.onFocus(1,value)}}
|
106 | value={stateValue[1]}
|
107 | placeholder={placeholder[1]}
|
108 | {...other}/>
|
109 | </div>
|
110 | )
|
111 | }
|
112 | }
|
113 |
|
114 | InputNumberGroup.propsTypes = propsTypes;
|
115 | InputNumberGroup.defaultProps = defaultProps;
|
116 |
|
117 | export default InputNumberGroup; |
\ | No newline at end of file |