cuz/lib/components/NumberInput/index.js

Front-end modular development kit.

'use strict';

var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Button = require('../Button');

var _Button2 = _interopRequireDefault(_Button);

var _Input = require('../Input');

var _Input2 = _interopRequireDefault(_Input);

var NumberInput = _react2['default'].createClass({
  displayName: 'NumberInput',

  propTypes: {
    value: _react2['default'].PropTypes.number,
    max: _react2['default'].PropTypes.number,
    min: _react2['default'].PropTypes.number,
    step: _react2['default'].PropTypes.number,
    disabled: _react2['default'].PropTypes.bool
  },

  getDefaultProps: function getDefaultProps() {
    return {
      value: 0,
      max: Number.POSITIVE_INFINITY,
      min: Number.NEGATIVE_INFINITY,
      step: 1,
      disabled: false
    };
  },

  getInitialState: function getInitialState() {
    var value = +this.props.value;
    return {
      value: value,
      plusDisabled: this.props.disabled || value >= this.props.max,
      minusDisabled: this.props.disabled || value <= this.props.min,
      step: this.props.step
    };
  },

  validationState: function validationState() {
    if (isNaN(this.state.value) || this.state.value > +this.props.max || this.state.value < +this.props.min) return 'error';
  },

  handleChange: function handleChange() {
    var value = +this.refs.input.getValue();
    var state = {
      value: value,
      plusDisabled: value >= +this.props.max,
      minusDisabled: value <= +this.props.min
    };

    this.setState(state);
  },

  plusNumber: function plusNumber() {
    var value = this.state.value + +this.props.step;
    var max = +this.props.max;
    if (value >= max) {
      this.setState({
        value: max,
        plusDisabled: true
      });
      return;
    }
    this.setState({
      value: value,
      minusDisabled: false
    });
  },

  minusNumber: function minusNumber() {
    var value = this.state.value - +this.props.step;
    var min = +this.props.min;
    if (value <= min) {
      this.setState({
        value: min,
        minusDisabled: true
      });
      return;
    }
    this.setState({
      value: value,
      plusDisabled: false
    });
  },

  renderPlusButton: function renderPlusButton() {
    return _react2['default'].createElement(
      _Button2['default'],
      { bsSize: 'small', onClick: this.plusNumber, disabled: this.state.plusDisabled },
      _react2['default'].createElement('i', { className: 'fa fa-plus' })
    );
  },

  renderMinusButton: function renderMinusButton() {
    return _react2['default'].createElement(
      _Button2['default'],
      { bsSize: 'small', onClick: this.minusNumber, disabled: this.state.minusDisabled },
      _react2['default'].createElement('i', { className: 'fa fa-minus' })
    );
  },

  render: function render() {
    return _react2['default'].createElement(
      'div',
      { className: 'number-input' },
      _react2['default'].createElement(_Input2['default'], {
        ref: 'input',
        bsSize: 'small',
        type: 'text',
        value: this.state.value,
        bsStyle: this.validationState(),
        onChange: this.handleChange,
        buttonBefore: this.renderMinusButton(),
        buttonAfter: this.renderPlusButton(),
        disabled: this.props.disabled,
        wrapperClassName: 'form-inline'
      })
    );
  }
});

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