modo-mobile/lib/stepper/index.js

A mobile UI toolkit, based on React

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _defineProperty2 = require('babel-runtime/helpers/defineProperty');

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _react = require('react');

var React = _interopRequireWildcard(_react);

var _classnames4 = require('classnames');

var _classnames5 = _interopRequireDefault(_classnames4);

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj['default'] = obj; return newObj; } }

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }

function getDecimalNum(num) {
    try {
        return num.toString().split('.')[1].length;
    } catch (e) {
        return 0;
    }
}
function accAdd(num1, num2) {
    var r1 = getDecimalNum(num1);
    var r2 = getDecimalNum(num2);
    var m = Math.pow(10, Math.max(r1, r2));
    return +((num1 * m + num2 * m) / m);
}
function subtr(num1, num2) {
    var r1 = getDecimalNum(num1);
    var r2 = getDecimalNum(num2);
    var m = Math.pow(10, Math.max(r1, r2));
    var n = r1 >= r2 ? r1 : r2;
    return +((num1 * m - num2 * m) / m).toFixed(n);
}
function getButtonStatus(value, min, max) {
    var status = {
        disabledReduce: false,
        disabledAdd: false
    };
    if (typeof value !== 'undefined' && value !== null) {
        status.disabledAdd = +value >= max;
        status.disabledReduce = +value <= min;
    }
    return status;
}
function formatNum(value, integer) {
    value = String(value).replace(/[^0-9.-]/g, '');
    return value === '' ? 0 : integer ? Math.floor(value) : +value;
}
function getValidValue(value, min, max, integer) {
    return Math.max(Math.min(formatNum(max, integer), formatNum(value, integer)), formatNum(min, integer));
}

var Stepper = function (_React$PureComponent) {
    (0, _inherits3['default'])(Stepper, _React$PureComponent);

    function Stepper(props) {
        (0, _classCallCheck3['default'])(this, Stepper);

        var _this = (0, _possibleConstructorReturn3['default'])(this, (Stepper.__proto__ || Object.getPrototypeOf(Stepper)).call(this, props));

        _this.onReduce = function () {
            var _this$props = _this.props,
                disabled = _this$props.disabled,
                min = _this$props.min,
                step = _this$props.step,
                integer = _this$props.integer;
            var inputValue = _this.state.inputValue;

            var val = subtr(inputValue, step);
            if (disabled || formatNum(val, integer) < formatNum(min, integer)) {
                return;
            }
            _this.onChange(val);
        };
        _this.onAdd = function () {
            var _this$props2 = _this.props,
                disabled = _this$props2.disabled,
                max = _this$props2.max,
                step = _this$props2.step,
                integer = _this$props2.integer;
            var inputValue = _this.state.inputValue;

            var val = accAdd(inputValue, step);
            if (disabled || formatNum(val, integer) > formatNum(max, integer)) {
                return;
            }
            _this.onChange(val);
        };
        _this.onChange = function (val) {
            var _this$props3 = _this.props,
                max = _this$props3.max,
                min = _this$props3.min;

            _this.setState((0, _extends3['default'])({ inputValue: val }, getButtonStatus(val, min, max)));
            var onChange = _this.props.onChange;

            if (onChange) onChange(val);
        };
        _this.handleChange = function (e) {
            var value = e.target.value;

            _this.onChange(value);
        };
        _this.handleInputBlur = function () {
            var _this$props4 = _this.props,
                max = _this$props4.max,
                min = _this$props4.min,
                integer = _this$props4.integer;
            var inputValue = _this.state.inputValue;

            _this.setState({ inputValue: getValidValue(inputValue, min, max, integer) });
        };
        var value = props.value,
            defaultValue = props.defaultValue,
            max = props.max,
            min = props.min;

        var newValue = value || defaultValue || 0;

        var _getButtonStatus = getButtonStatus(newValue, min, max),
            disabledReduce = _getButtonStatus.disabledReduce,
            disabledAdd = _getButtonStatus.disabledAdd;

        _this.state = {
            inputValue: newValue,
            disabledReduce: disabledReduce,
            disabledAdd: disabledAdd
        };
        return _this;
    }

    (0, _createClass3['default'])(Stepper, [{
        key: 'render',
        value: function render() {
            var _classnames, _classnames2, _classnames3;

            var _props = this.props,
                prefixCls = _props.prefixCls,
                disabled = _props.disabled,
                readOnly = _props.readOnly,
                min = _props.min,
                max = _props.max,
                step = _props.step;
            var _state = this.state,
                inputValue = _state.inputValue,
                disabledReduce = _state.disabledReduce,
                disabledAdd = _state.disabledAdd;

            var wrapCls = (0, _classnames5['default'])((_classnames = {}, (0, _defineProperty3['default'])(_classnames, '' + prefixCls, true), (0, _defineProperty3['default'])(_classnames, prefixCls + '-disabled', disabled), _classnames));
            var reduceCls = (0, _classnames5['default'])((_classnames2 = {}, (0, _defineProperty3['default'])(_classnames2, prefixCls + '-button', true), (0, _defineProperty3['default'])(_classnames2, prefixCls + '-button-reduce', true), (0, _defineProperty3['default'])(_classnames2, prefixCls + '-button-disabled', disabledReduce), _classnames2));
            var addCls = (0, _classnames5['default'])((_classnames3 = {}, (0, _defineProperty3['default'])(_classnames3, prefixCls + '-button', true), (0, _defineProperty3['default'])(_classnames3, prefixCls + '-button-add', true), (0, _defineProperty3['default'])(_classnames3, prefixCls + '-button-disabled', disabledAdd), _classnames3));
            return React.createElement(
                'div',
                { className: wrapCls },
                React.createElement('div', { className: reduceCls, onClick: this.onReduce }),
                React.createElement(
                    'div',
                    { className: prefixCls + '-number' },
                    React.createElement('input', { type: 'number', value: inputValue, readOnly: readOnly || disabled, onBlur: this.handleInputBlur, onChange: this.handleChange, min: min, max: max, step: step })
                ),
                React.createElement('div', { className: addCls, onClick: this.onAdd })
            );
        }
    }], [{
        key: 'getDerivedStateFromProps',
        value: function getDerivedStateFromProps(nextProps) {
            if (typeof nextProps.value !== 'undefined') {
                var value = nextProps.value,
                    min = nextProps.min,
                    max = nextProps.max;

                return getButtonStatus(value, min, max);
            }
            return null;
        }
    }]);
    return Stepper;
}(React.PureComponent);

exports['default'] = Stepper;

Stepper.defaultProps = {
    prefixCls: 'm-stepper',
    step: 1,
    min: -Number.MAX_SAFE_INTEGER,
    max: Number.MAX_SAFE_INTEGER,
    disabled: false,
    readOnly: false,
    integer: false
};
module.exports = exports['default'];