1 | import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
|
2 | import _createClass from 'babel-runtime/helpers/createClass';
|
3 | import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
|
4 | import _inherits from 'babel-runtime/helpers/inherits';
|
5 | import React from 'react';
|
6 | import { Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
|
7 | import BaseComponent from './base';
|
8 |
|
9 | var InputNumber = function (_BaseComponent) {
|
10 | _inherits(InputNumber, _BaseComponent);
|
11 |
|
12 | function InputNumber() {
|
13 | _classCallCheck(this, InputNumber);
|
14 |
|
15 | var _this = _possibleConstructorReturn(this, (InputNumber.__proto__ || Object.getPrototypeOf(InputNumber)).apply(this, arguments));
|
16 |
|
17 | _this.onPressInDown = function (e) {
|
18 | _this.onPressIn('_stepDown');
|
19 | _this.down(e, true);
|
20 | };
|
21 | _this.onPressOutDown = function () {
|
22 | _this.onPressOut('_stepDown');
|
23 | _this.stop();
|
24 | };
|
25 | _this.onPressInUp = function (e) {
|
26 | _this.onPressIn('_stepUp');
|
27 | _this.up(e, true);
|
28 | };
|
29 | _this.onPressOutUp = function () {
|
30 | _this.onPressOut('_stepUp');
|
31 | _this.stop();
|
32 | };
|
33 | return _this;
|
34 | }
|
35 |
|
36 | _createClass(InputNumber, [{
|
37 | key: 'onPressIn',
|
38 | value: function onPressIn(type) {
|
39 | if (this.props.disabled) {
|
40 | return;
|
41 | }
|
42 | var styles = this.props.styles;
|
43 |
|
44 | this[type].setNativeProps({
|
45 | style: [styles.stepWrap, styles.highlightStepBorderColor]
|
46 | });
|
47 | this[type + 'Text'].setNativeProps({
|
48 | style: [styles.stepText, styles.highlightStepTextColor]
|
49 | });
|
50 | }
|
51 | }, {
|
52 | key: 'onPressOut',
|
53 | value: function onPressOut(type) {
|
54 | if (this.props.disabled) {
|
55 | return;
|
56 | }
|
57 | var styles = this.props.styles;
|
58 |
|
59 | this[type].setNativeProps({
|
60 | style: [styles.stepWrap]
|
61 | });
|
62 | this[type + 'Text'].setNativeProps({
|
63 | style: [styles.stepText]
|
64 | });
|
65 | }
|
66 | }, {
|
67 | key: 'getValueFromEvent',
|
68 | value: function getValueFromEvent(e) {
|
69 | return e.nativeEvent.text;
|
70 | }
|
71 | }, {
|
72 | key: 'render',
|
73 | value: function render() {
|
74 | var _this2 = this;
|
75 |
|
76 | var props = this.props,
|
77 | state = this.state;
|
78 | var _props = this.props,
|
79 | style = _props.style,
|
80 | upStyle = _props.upStyle,
|
81 | downStyle = _props.downStyle,
|
82 | inputStyle = _props.inputStyle,
|
83 | styles = _props.styles;
|
84 |
|
85 | var editable = !this.props.readOnly && !this.props.disabled;
|
86 | var upDisabledStyle = null;
|
87 | var downDisabledStyle = null;
|
88 | var upDisabledTextStyle = null;
|
89 | var downDisabledTextStyle = null;
|
90 | var value = +state.value;
|
91 | if (!isNaN(value)) {
|
92 | var val = Number(value);
|
93 | if (val >= props.max) {
|
94 | upDisabledStyle = styles.stepDisabled;
|
95 | upDisabledTextStyle = styles.disabledStepTextColor;
|
96 | }
|
97 | if (val <= props.min) {
|
98 | downDisabledStyle = styles.stepDisabled;
|
99 | downDisabledTextStyle = styles.disabledStepTextColor;
|
100 | }
|
101 | } else {
|
102 | upDisabledStyle = styles.stepDisabled;
|
103 | downDisabledStyle = styles.stepDisabled;
|
104 | upDisabledTextStyle = styles.disabledStepTextColor;
|
105 | downDisabledTextStyle = styles.disabledStepTextColor;
|
106 | }
|
107 | var inputDisabledStyle = null;
|
108 | if (props.disabled) {
|
109 | upDisabledStyle = styles.stepDisabled;
|
110 | downDisabledStyle = styles.stepDisabled;
|
111 | upDisabledTextStyle = styles.disabledStepTextColor;
|
112 | downDisabledTextStyle = styles.disabledStepTextColor;
|
113 | inputDisabledStyle = styles.disabledStepTextColor;
|
114 | }
|
115 | var inputDisplayValue = void 0;
|
116 | if (state.focused) {
|
117 | inputDisplayValue = '' + state.inputValue;
|
118 | } else {
|
119 | inputDisplayValue = '' + state.value;
|
120 | }
|
121 | if (inputDisplayValue === undefined) {
|
122 | inputDisplayValue = '';
|
123 | }
|
124 | return React.createElement(
|
125 | View,
|
126 | { style: [styles.container, style] },
|
127 | React.createElement(
|
128 | TouchableWithoutFeedback,
|
129 | { onPressIn: editable && !downDisabledStyle ? this.onPressInDown : undefined, onPressOut: editable && !downDisabledStyle ? this.onPressOutDown : undefined, accessible: true, accessibilityLabel: 'Decrease Value', accessibilityComponentType: 'button', accessibilityTraits: editable && !downDisabledStyle ? 'button' : 'disabled' },
|
130 | React.createElement(
|
131 | View,
|
132 | { ref: function ref(component) {
|
133 | return _this2._stepDown = component;
|
134 | }, style: [styles.stepWrap, downDisabledStyle, downStyle] },
|
135 | React.createElement(
|
136 | Text,
|
137 | { ref: function ref(component) {
|
138 | return _this2._stepDownText = component;
|
139 | }, style: [styles.stepText, downDisabledTextStyle] },
|
140 | '-'
|
141 | )
|
142 | )
|
143 | ),
|
144 | React.createElement(TextInput, { style: [styles.input, inputDisabledStyle, inputStyle], value: inputDisplayValue, autoFocus: props.autoFocus, editable: editable, onFocus: this.onFocus, onEndEditing: this.onBlur, onChange: this.onChange, underlineColorAndroid: 'transparent', keyboardType: props.keyboardType }),
|
145 | React.createElement(
|
146 | TouchableWithoutFeedback,
|
147 | { onPressIn: editable && !upDisabledStyle ? this.onPressInUp : undefined, onPressOut: editable && !upDisabledStyle ? this.onPressOutUp : undefined, accessible: true, accessibilityLabel: 'Increase Value', accessibilityComponentType: 'button', accessibilityTraits: editable && !upDisabledStyle ? 'button' : 'disabled' },
|
148 | React.createElement(
|
149 | View,
|
150 | { ref: function ref(component) {
|
151 | return _this2._stepUp = component;
|
152 | }, style: [styles.stepWrap, upDisabledStyle, upStyle] },
|
153 | React.createElement(
|
154 | Text,
|
155 | { ref: function ref(component) {
|
156 | return _this2._stepUpText = component;
|
157 | }, style: [styles.stepText, upDisabledTextStyle] },
|
158 | '+'
|
159 | )
|
160 | )
|
161 | )
|
162 | );
|
163 | }
|
164 | }]);
|
165 |
|
166 | return InputNumber;
|
167 | }(BaseComponent);
|
168 |
|
169 | export default InputNumber; |
\ | No newline at end of file |