weex-nuke/lib/NumberPicker/index.js

基于 Rax 、Weex 的高性能组件体系 ~~

'use strict';

/** @jsx createElement */

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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _rax = require('rax');

var _nukeView = require('../View/index.js');

var _nukeView2 = _interopRequireDefault(_nukeView);

var _nukeEnv = require('../Env/index.js');

var _nukeTouchable = require('../Touchable/index.js');

var _nukeTouchable2 = _interopRequireDefault(_nukeTouchable);

var _nukeThemeProvider = require('../ThemeProvider/index.js');

var _nukeIcon = require('../Icon/index.js');

var _nukeIcon2 = _interopRequireDefault(_nukeIcon);

var _nukeNormalInput = require('../NormalInput/index.js');

var _nukeNormalInput2 = _interopRequireDefault(_nukeNormalInput);

var _styles = require('./styles/index.js');

var _styles2 = _interopRequireDefault(_styles);

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

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var noop = function noop() {};

var NumberPicker = function (_Component) {
  _inherits(NumberPicker, _Component);

  function NumberPicker(props) {
    _classCallCheck(this, NumberPicker);

    var _this = _possibleConstructorReturn(this, (NumberPicker.__proto__ || Object.getPrototypeOf(NumberPicker)).call(this, props));

    var value = void 0;
    if ('value' in props) {
      value = props.value;
    } else {
      value = props.defaultValue;
    }
    value = _this.getValidValue(value);
    _this.state = {
      value: value,
      error: false,
      focused: false,
      displayValue: value
    };
    ['onAdd', 'onReduce', 'onChange', 'onFocus', 'onBlur'].forEach(function (m) {
      _this[m] = _this[m].bind(_this);
    });
    return _this;
  }

  _createClass(NumberPicker, [{
    key: 'componentWillReceiveProps',
    value: function componentWillReceiveProps(nextProps) {
      // todo: dynamic min & max
      if ('value' in nextProps) {
        var value = this.getValidValue(nextProps.value);
        this.setState({
          value: value,
          displayValue: value
        });
      }
    }
  }, {
    key: 'onAdd',
    value: function onAdd() {
      var _props = this.props,
          max = _props.max,
          step = _props.step;

      var nextValue = parseInt(this.state.value, 10) + parseInt(step, 10);

      if (!max || nextValue <= max) {
        this.setValue(nextValue);
      }
    }
  }, {
    key: 'onReduce',
    value: function onReduce() {
      var _props2 = this.props,
          min = _props2.min,
          step = _props2.step;

      var nextValue = parseInt(this.state.value, 10) - parseInt(step, 10);

      if (!min || nextValue >= min) {
        this.setValue(nextValue);
      }
    }
  }, {
    key: 'onChange',
    value: function onChange(val, e) {
      if (this.props.editable) {
        this.setState({
          displayValue: val
        });
      }
      // alert(val);
      this.setValue(val);
    }
  }, {
    key: 'onFocus',
    value: function onFocus() {
      this.setState({ focused: true });
    }
  }, {
    key: 'onBlur',
    value: function onBlur(e) {
      // debugger;
      var val = this.refs.numberpicker.wrappedInstance.getValue();
      // alert(val);

      this.setValue(val);

      this.setState({ focused: false });
    }
  }, {
    key: 'setValue',
    value: function setValue(displayValue) {
      var flag = void 0;
      var value = void 0;
      var error = false;
      var _props3 = this.props,
          disabled = _props3.disabled,
          autoCorrect = _props3.autoCorrect,
          onChange = _props3.onChange;


      if (disabled) {
        return;
      }

      value = this.state.value;
      var validValue = this.getValidValue(displayValue);

      if (autoCorrect) {
        value = displayValue = validValue;
      } else {
        error = validValue.toString() !== displayValue.toString();
        if (!error) {
          value = validValue;
        }
      }

      if (value !== this.state.value || (flag = true) && value.toString() !== this.state.displayValue.toString()) {
        if (!('value' in this.props)) {
          this.setState({
            value: value,
            displayValue: displayValue
          });
        } else if (!error) {
          this.setState({
            displayValue: this.state.value
          });
        }

        this.setState({
          error: error
        });

        if (!flag) {
          onChange(value);
        }
      } else {
        this.setState({
          error: error
        });
      }
    }
  }, {
    key: 'getValue',
    value: function getValue() {
      return this.state.value;
    }
  }, {
    key: 'getValidValue',
    value: function getValidValue(value) {
      var _props4 = this.props,
          min = _props4.min,
          max = _props4.max;


      value = value === '' ? this.state.value : parseInt(value, 10);
      value = isNaN(value) ? this.state.value : value < min ? min : value > max ? max : value;

      return value;
    }
  }, {
    key: 'render',
    value: function render() {
      var _state = this.state,
          value = _state.value,
          displayValue = _state.displayValue,
          focused = _state.focused,
          error = _state.error;

      var styles = this.props.themeStyle;
      var inputWrapStyle = Object.assign({}, styles['input-wrap'], error ? styles['error-input-wrap'] : {});
      var _props5 = this.props,
          min = _props5.min,
          max = _props5.max,
          step = _props5.step,
          disabled = _props5.disabled,
          editable = _props5.editable,
          autoFocus = _props5.autoFocus,
          _props5$style = _props5.style,
          style = _props5$style === undefined ? {} : _props5$style;

      var inputAttrs = {};
      if (disabled || !editable) {
        inputAttrs.disabled = true;
      }
      var inputStyle = Object.assign({}, styles.input, _nukeEnv.isWeb ? styles['input-ff'] : {}, disabled || inputAttrs.disabled ? styles['input-disabled'] : null, error ? styles['error-input'] : {});

      var reduceDisabled = disabled || value <= min || value - step < min;
      var addDisabled = disabled || value >= max || value + step > max;
      return (0, _rax.createElement)(
        _nukeView2.default,
        { style: [styles['number-picker'], style] },
        (0, _rax.createElement)(
          _nukeTouchable2.default,
          { style: [styles.reduce, reduceDisabled ? styles['disabled-button'] : {}], onPress: this.onReduce },
          (0, _rax.createElement)(_nukeIcon2.default, { style: [styles.icon, reduceDisabled ? styles['icon-disabled'] : {}], name: 'minus' })
        ),
        (0, _rax.createElement)(_nukeNormalInput2.default, _extends({
          inputStyle: inputStyle,
          type: 'number',
          fixedFont: true,
          ref: 'numberpicker',
          style: inputWrapStyle,
          materialDesign: false,
          min: min,
          max: max,
          step: step,
          autoFocus: autoFocus
        }, inputAttrs, {
          value: focused || error ? displayValue : value,
          onFocus: this.onFocus,
          onBlur: this.onBlur,
          onChange: this.onChange
        })),
        (0, _rax.createElement)(
          _nukeTouchable2.default,
          { style: [styles.add, addDisabled ? styles['disabled-button'] : {}], onPress: this.onAdd },
          (0, _rax.createElement)(_nukeIcon2.default, { style: [styles.icon, addDisabled ? styles['icon-disabled'] : {}], name: 'add' })
        )
      );
    }
  }]);

  return NumberPicker;
}(_rax.Component);

NumberPicker.defaultProps = {
  step: 1,
  defaultValue: 0,
  editable: true,
  disabled: false,
  autoFocus: false,
  autoCorrect: false,
  onChange: noop,
  style: {},
  themeStyle: {}
};

NumberPicker.propTypes = {
  min: _rax.PropTypes.number,
  max: _rax.PropTypes.number,
  step: _rax.PropTypes.number,
  value: _rax.PropTypes.number,
  editable: _rax.PropTypes.bool,
  disabled: _rax.PropTypes.bool,
  autoFocus: _rax.PropTypes.bool,
  autoCorrect: _rax.PropTypes.bool,
  defaultValue: _rax.PropTypes.number,
  onChange: _rax.PropTypes.func,
  style: _rax.PropTypes.any,
  themeStyle: _rax.PropTypes.any
};
NumberPicker.displayName = 'NumberPicker';

var StyledNumberPicker = (0, _nukeThemeProvider.connectStyle)(_styles2.default, { withRef: true })(NumberPicker);

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