mk-component/lib/components/input/inputNumber.js

- 1、npm install mk-component --save

'use strict';

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

var _input = require('antd/lib/input');

var _input2 = _interopRequireDefault(_input);

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

var _extends3 = _interopRequireDefault(_extends2);

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

var _defineProperty3 = _interopRequireDefault(_defineProperty2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

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 _react2 = _interopRequireDefault(_react);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

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

var InputNumberComponent = function (_Component) {
    (0, _inherits3.default)(InputNumberComponent, _Component);

    function InputNumberComponent(props) {
        (0, _classCallCheck3.default)(this, InputNumberComponent);

        var _this = (0, _possibleConstructorReturn3.default)(this, (InputNumberComponent.__proto__ || (0, _getPrototypeOf2.default)(InputNumberComponent)).call(this, props));

        _this.state = {
            oldValue: "",
            value: "",
            max: Infinity,
            min: -Infinity,
            format: ""
        };

        _this.state = _this.calculateState(props);
        return _this;
    }

    (0, _createClass3.default)(InputNumberComponent, [{
        key: 'componentWillReceiveProps',
        value: function componentWillReceiveProps(nextProps) {
            this.setState(this.calculateState(nextProps));
        }
    }, {
        key: 'calculateState',
        value: function calculateState(props) {
            var data = {};

            if (props.value !== undefined) {
                data.value = props.value + '';
                data.oldValue = data.value;
            } else {
                data.value = '';
                data.oldValue = data.value;
            }

            if (props.min !== undefined && props.min !== null && props.min !== '' && !isNaN(props.min)) data.min = props.min;

            if (props.max !== undefined && props.max !== null && props.max !== '' && !isNaN(props.max)) data.max = props.max;

            if (props.format) data.format = props.format;

            return data;
        }
    }, {
        key: 'getCurrentValidValue',
        value: function getCurrentValidValue(value) {
            var val = value;
            var props = this.props;

            if (val === '') {
                return '';
            } else if (!this.isNotCompleteNumber(val)) {
                val = Number(val);
                if (val < this.state.min) {
                    return this.state.min;
                }

                if (val > this.state.max) {
                    return this.state.max;
                }
            } else {
                return this.state.value;
            }
            return value;
        }

        /**
         * 转换为数字
         * @param  {[type]} num [description]
         * @return {[type]}     [description]
         */

    }, {
        key: 'toNumber',
        value: function toNumber(num) {
            if (this.isNotCompleteNumber(num)) {
                return num;
            }
            return Number(num);
        }

        /**
         * 判断是否非完整数字
         * @param  {[type]}  num [description]
         * @return {Boolean}     [description]
         */

    }, {
        key: 'isNotCompleteNumber',
        value: function isNotCompleteNumber(num) {
            return isNaN(num) || num === '' || num.toString().indexOf('.') === num.toString().length - 1;
        }

        /**
         * 根据精度转换值
         * @param  {[type]} num [description]
         * @return {[type]}     [description]
         */

    }, {
        key: 'toPrecisionAsStep',
        value: function toPrecisionAsStep(num) {
            //非完整数字直接返回, NaN,'',3444.
            if (this.isNotCompleteNumber(num) || num === '') {
                return num;
            }

            //获取精度
            var precision = Math.abs(this.getMaxPrecision(num));

            //精度非0的数字，转换
            if (precision) {
                return Number(num).toFixed(precision);
            }
            return num.toString();
        }

        /**
         * 获取最大精度
         * @param  {[type]} currentValue [description]
         * @return {[type]}              [description]
         */

    }, {
        key: 'getMaxPrecision',
        value: function getMaxPrecision(currentValue) {
            var step = this.props.step;

            var stepPrecision = this.getPrecision(currentValue);
            //存在step取step的精度，step的值例如0.0001
            if (step) stepPrecision = this.getPrecision(step);
            return stepPrecision;
        }

        /**
         * 获取精度
         * @param  {[type]} value [description]
         * @return {[type]}       [description]
         */

    }, {
        key: 'getPrecision',
        value: function getPrecision(value) {
            var valueString = value.toString();
            //取e-后字符转换成int,e-10=>10
            if (valueString.indexOf('e-') >= 0) {
                return parseInt(valueString.slice(valueString.indexOf('e-') + 1), 10);
            }

            var precision = 0;
            //取小数点后字符长度0.0001=>4
            if (valueString.indexOf('.') >= 0) {
                precision = valueString.length - valueString.indexOf('.') - 1;
            }
            //否则0
            return precision;
        }
    }, {
        key: 'onChange',
        value: function onChange(e) {
            var value = e.target.value;

            //去除逗号

            value = value.replace(/\,/g, '');

            var isZero = parseFloat(value) === 0;

            //第一个字符是0，第二个不是.去除掉0
            if (value.length > 1 && value.substring(0, 1) == 0 && value.substring(1, 2) != '.' && !isZero) {
                value = value.substring(1);
            }

            if (isZero) {
                this.currentValue = value + '';
                this.setState({ value: value + '' });
                this.state.oldValue != value && this.props.onChange && this.props.onChange(this.toNumber(this.toPrecisionAsStep(value)));
                return;
            }

            var reg = /^-?(0|[1-9][0-9]*)(\.[0-9]*)?$/;
            var step = this.props.step;
            //是数字或者是空或者是-

            if (!isNaN(value) && reg.test(value) || value === '' || value === '-') {

                //最后一个字符是不是. 并且 数字不是-
                if (value.charAt(value.length - 1) !== '.' && value !== '-') {
                    value = this.getCurrentValidValue(value);
                    if (this.getStep(value) > this.getStep(step)) {
                        value = this.toPrecisionAsStep(value);
                    }
                    this.setState({ value: value + '' });
                    this.state.oldValue != value && this.props.onChange && this.props.onChange(this.toNumber(this.toPrecisionAsStep(value)));
                } else {
                    this.setState({ value: value + '' });
                }
            }
        }
    }, {
        key: 'getStep',
        value: function getStep(str) {
            var strAfterPoint = (str + '').split('.')[1];
            return strAfterPoint && strAfterPoint.length ? strAfterPoint.length : 0;
        }
    }, {
        key: 'onBlur',
        value: function onBlur() {
            var value = this.state.value;

            //最后一个字符是.或者-那么去掉
            if (value && (value.charAt(value.length - 1) === '.' || value === '-')) {
                value = value.slice(0, -1);
                value = this.getCurrentValidValue(value);
                this.setState({ value: value + '' });
                this.state.oldValue != value && this.props.onChange && this.props.onChange(this.toNumber(this.toPrecisionAsStep(value)));
            }

            this.state.oldValue != value && this.props.onBlur && this.props.onBlur(this.toNumber(this.toPrecisionAsStep(value)));
        }
    }, {
        key: 'render',
        value: function render() {
            var className = (0, _classnames2.default)((0, _defineProperty3.default)({
                'mk-input-number': true
            }, this.props.className, !!this.props.className));
            return _react2.default.createElement(_input2.default, (0, _extends3.default)({}, this.props, {
                onChange: this.onChange.bind(this),
                onBlur: this.onBlur.bind(this),
                value: this.state.value,
                className: className
            }));
        }
    }]);
    return InputNumberComponent;
}(_react.Component);

exports.default = InputNumberComponent;
module.exports = exports['default'];