rmc-input-number/es/index.ios.js

input-number ui component for react(web & react-native)

import _classCallCheck from 'babel-runtime/helpers/classCallCheck';
import _createClass from 'babel-runtime/helpers/createClass';
import _possibleConstructorReturn from 'babel-runtime/helpers/possibleConstructorReturn';
import _inherits from 'babel-runtime/helpers/inherits';
import React from 'react';
import { Text, TextInput, TouchableWithoutFeedback, View } from 'react-native';
import BaseComponent from './base';

var InputNumber = function (_BaseComponent) {
    _inherits(InputNumber, _BaseComponent);

    function InputNumber() {
        _classCallCheck(this, InputNumber);

        var _this = _possibleConstructorReturn(this, (InputNumber.__proto__ || Object.getPrototypeOf(InputNumber)).apply(this, arguments));

        _this.onPressInDown = function (e) {
            _this.onPressIn('_stepDown');
            _this.down(e, true);
        };
        _this.onPressOutDown = function () {
            _this.onPressOut('_stepDown');
            _this.stop();
        };
        _this.onPressInUp = function (e) {
            _this.onPressIn('_stepUp');
            _this.up(e, true);
        };
        _this.onPressOutUp = function () {
            _this.onPressOut('_stepUp');
            _this.stop();
        };
        return _this;
    }

    _createClass(InputNumber, [{
        key: 'onPressIn',
        value: function onPressIn(type) {
            if (this.props.disabled) {
                return;
            }
            var styles = this.props.styles;

            this[type].setNativeProps({
                style: [styles.stepWrap, styles.highlightStepBorderColor]
            });
            this[type + 'Text'].setNativeProps({
                style: [styles.stepText, styles.highlightStepTextColor]
            });
        }
    }, {
        key: 'onPressOut',
        value: function onPressOut(type) {
            if (this.props.disabled) {
                return;
            }
            var styles = this.props.styles;

            this[type].setNativeProps({
                style: [styles.stepWrap]
            });
            this[type + 'Text'].setNativeProps({
                style: [styles.stepText]
            });
        }
    }, {
        key: 'getValueFromEvent',
        value: function getValueFromEvent(e) {
            return e.nativeEvent.text;
        }
    }, {
        key: 'render',
        value: function render() {
            var _this2 = this;

            var props = this.props,
                state = this.state;
            var _props = this.props,
                style = _props.style,
                upStyle = _props.upStyle,
                downStyle = _props.downStyle,
                inputStyle = _props.inputStyle,
                styles = _props.styles;

            var editable = !this.props.readOnly && !this.props.disabled;
            var upDisabledStyle = null;
            var downDisabledStyle = null;
            var upDisabledTextStyle = null;
            var downDisabledTextStyle = null;
            var value = +state.value;
            if (!isNaN(value)) {
                var val = Number(value);
                if (val >= props.max) {
                    upDisabledStyle = styles.stepDisabled;
                    upDisabledTextStyle = styles.disabledStepTextColor;
                }
                if (val <= props.min) {
                    downDisabledStyle = styles.stepDisabled;
                    downDisabledTextStyle = styles.disabledStepTextColor;
                }
            } else {
                upDisabledStyle = styles.stepDisabled;
                downDisabledStyle = styles.stepDisabled;
                upDisabledTextStyle = styles.disabledStepTextColor;
                downDisabledTextStyle = styles.disabledStepTextColor;
            }
            var inputDisabledStyle = null;
            if (props.disabled) {
                upDisabledStyle = styles.stepDisabled;
                downDisabledStyle = styles.stepDisabled;
                upDisabledTextStyle = styles.disabledStepTextColor;
                downDisabledTextStyle = styles.disabledStepTextColor;
                inputDisabledStyle = styles.disabledStepTextColor;
            }
            var inputDisplayValue = void 0;
            if (state.focused) {
                inputDisplayValue = '' + state.inputValue;
            } else {
                inputDisplayValue = '' + state.value;
            }
            if (inputDisplayValue === undefined) {
                inputDisplayValue = '';
            }
            return React.createElement(
                View,
                { style: [styles.container, style] },
                React.createElement(
                    TouchableWithoutFeedback,
                    { onPressIn: editable && !downDisabledStyle ? this.onPressInDown : undefined, onPressOut: editable && !downDisabledStyle ? this.onPressOutDown : undefined, accessible: true, accessibilityLabel: 'Decrease Value', accessibilityComponentType: 'button', accessibilityTraits: editable && !downDisabledStyle ? 'button' : 'disabled' },
                    React.createElement(
                        View,
                        { ref: function ref(component) {
                                return _this2._stepDown = component;
                            }, style: [styles.stepWrap, downDisabledStyle, downStyle] },
                        React.createElement(
                            Text,
                            { ref: function ref(component) {
                                    return _this2._stepDownText = component;
                                }, style: [styles.stepText, downDisabledTextStyle] },
                            '-'
                        )
                    )
                ),
                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 }),
                React.createElement(
                    TouchableWithoutFeedback,
                    { onPressIn: editable && !upDisabledStyle ? this.onPressInUp : undefined, onPressOut: editable && !upDisabledStyle ? this.onPressOutUp : undefined, accessible: true, accessibilityLabel: 'Increase Value', accessibilityComponentType: 'button', accessibilityTraits: editable && !upDisabledStyle ? 'button' : 'disabled' },
                    React.createElement(
                        View,
                        { ref: function ref(component) {
                                return _this2._stepUp = component;
                            }, style: [styles.stepWrap, upDisabledStyle, upStyle] },
                        React.createElement(
                            Text,
                            { ref: function ref(component) {
                                    return _this2._stepUpText = component;
                                }, style: [styles.stepText, upDisabledTextStyle] },
                            '+'
                        )
                    )
                )
            );
        }
    }]);

    return InputNumber;
}(BaseComponent);

export default InputNumber;