Skip to content

Commit

Permalink
Add new "snap" prop #35
Browse files Browse the repository at this point in the history
  • Loading branch information
@vlad-ignatov
vlad-ignatov committed Jul 28, 2017
1 parent 5c865fa commit 51b9c85
Show file tree
Hide file tree
Showing 5 changed files with 60 additions and 5 deletions.
40 changes: 39 additions & 1 deletion __tests__/misc.test.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ import TestUtils from 'react-dom/test-utils'

describe ('NumericInput/misc', function() {

this.timeout(10000);

/**
* Assert that the user can type a value lower than the current "min"
* @see https://github.com/vlad-ignatov/react-numeric-input/issues/19
Expand Down Expand Up @@ -138,5 +140,41 @@ describe ('NumericInput/misc', function() {
})

done();
})
});

it ('Can snap to steps', done => {
const KEYCODE_UP = 38;
const KEYCODE_DOWN = 40;
const tests = [
[0.2 , KEYCODE_UP , "0.5" ], // 0.2 + 0.5 = 0.5
[0.3 , KEYCODE_UP , "1.0" ], // 0.3 + 0.5 = 1.0
[0.5 , KEYCODE_UP , "1.0" ], // 0.5 + 0.5 = 1.0
[0.6 , KEYCODE_UP , "1.0" ], // 0.6 + 0.5 = 1.0
[0.9 , KEYCODE_UP , "1.5" ], // 0.9 + 0.5 = 1.5
[1.1 , KEYCODE_UP , "1.5" ], // 1.1 + 0.5 = 1.5
[9.1 , KEYCODE_UP , "9.5" ], // 9.1 + 0.5 = 9.5
[9.3 , KEYCODE_UP , "10.0" ], // 9.3 + 0.5 = 10.0
[11.1 , KEYCODE_UP , "10.0" ], // 11.1 + 0.5 = 10.0 (<= max)
[11.1 , KEYCODE_DOWN, "10.0" ], // 11.1 - 0.5 = 10.0 (<= max)
[1.1 , KEYCODE_DOWN, "0.5" ], // 1.1 - 0.5 = 0.5
[0.3 , KEYCODE_DOWN, "0.0" ], // 0.3 - 0.5 = 0.0
[0.1 , KEYCODE_DOWN, "-0.5" ], // 0.1 - 0.5 = -0.5
[-1.1 , KEYCODE_DOWN, "-1.5" ], // -1.1 - 0.5 = -1.5
[-1.4 , KEYCODE_DOWN, "-2.0" ], // -1.4 - 0.5 = -2.0
[-10.4, KEYCODE_DOWN, "-10.0"], // -10.4 - 0.5 = -2.0 (>= min)
[-10.4, KEYCODE_UP , "-10.0"], // -10.4 + 0.5 = -2.0 (>= min)
[-8.4 , KEYCODE_UP , "-8.0" ] // -8.4 + 0.5 = -8.0
];

tests.forEach(([inputValue, key, result]) => {
let widget = TestUtils.renderIntoDocument(
<NumericInput min={-10} max={10} precision={1} step={0.5} value={inputValue} snap />
);
let input = widget.refs.input;
TestUtils.Simulate.keyDown(input, { keyCode: key });
expect(input.value).toEqual(result);
});

done();
});
})
8 changes: 7 additions & 1 deletion dist/react-numeric-input.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -457,6 +457,10 @@ return /******/ (function(modules) { // webpackBootstrap
value: function _step(n, callback) {
var _n = this._toNumber((this.state.value || 0) + this.props.step * n, false);

if (this.props.snap) {
_n = Math.round(_n / this.props.step) * this.props.step;
}

if (_n !== this.state.value) {
this.setState({ value: _n, stringValue: _n }, callback);
return true;
Expand Down Expand Up @@ -651,14 +655,15 @@ return /******/ (function(modules) { // webpackBootstrap
var parse = _props.parse;
var format = _props.format;
var mobile = _props.mobile;
var snap = _props.snap;
var value = _props.value;
var type = _props.type;
var style = _props.style;
var defaultValue = _props.defaultValue;
var onInvalid = _props.onInvalid;
var onValid = _props.onValid;

var rest = _objectWithoutProperties(_props, ['step', 'min', 'max', 'precision', 'parse', 'format', 'mobile', 'value', 'type', 'style', 'defaultValue', 'onInvalid', 'onValid']);
var rest = _objectWithoutProperties(_props, ['step', 'min', 'max', 'precision', 'parse', 'format', 'mobile', 'snap', 'value', 'type', 'style', 'defaultValue', 'onInvalid', 'onValid']);

// Build the styles

Expand Down Expand Up @@ -930,6 +935,7 @@ return /******/ (function(modules) { // webpackBootstrap
disabled: _propTypes2.default.bool,
readOnly: _propTypes2.default.bool,
required: _propTypes2.default.bool,
snap: _propTypes2.default.bool,
noValidate: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string]),
style: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.bool]),
type: _propTypes2.default.string,
Expand Down
2 changes: 1 addition & 1 deletion dist/react-numeric-input.min.js
View file

Large diffs are not rendered by default.

8 changes: 7 additions & 1 deletion index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -293,6 +293,10 @@ module.exports =
value: function _step(n, callback) {
var _n = this._toNumber((this.state.value || 0) + this.props.step * n, false);

if (this.props.snap) {
_n = Math.round(_n / this.props.step) * this.props.step;
}

if (_n !== this.state.value) {
this.setState({ value: _n, stringValue: _n }, callback);
return true;
Expand Down Expand Up @@ -424,14 +428,15 @@ module.exports =
var parse = _props.parse;
var format = _props.format;
var mobile = _props.mobile;
var snap = _props.snap;
var value = _props.value;
var type = _props.type;
var style = _props.style;
var defaultValue = _props.defaultValue;
var onInvalid = _props.onInvalid;
var onValid = _props.onValid;

var rest = _objectWithoutProperties(_props, ['step', 'min', 'max', 'precision', 'parse', 'format', 'mobile', 'value', 'type', 'style', 'defaultValue', 'onInvalid', 'onValid']);
var rest = _objectWithoutProperties(_props, ['step', 'min', 'max', 'precision', 'parse', 'format', 'mobile', 'snap', 'value', 'type', 'style', 'defaultValue', 'onInvalid', 'onValid']);

for (var x in NumericInput.style) {
css[x] = _extends({}, NumericInput.style[x], style ? style[x] || {} : {});
Expand Down Expand Up @@ -699,6 +704,7 @@ module.exports =
disabled: _propTypes2.default.bool,
readOnly: _propTypes2.default.bool,
required: _propTypes2.default.bool,
snap: _propTypes2.default.bool,
noValidate: _propTypes2.default.oneOfType([_propTypes2.default.bool, _propTypes2.default.string]),
style: _propTypes2.default.oneOfType([_propTypes2.default.object, _propTypes2.default.bool]),
type: _propTypes2.default.string,
Expand Down
7 changes: 6 additions & 1 deletion src/NumericInput.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ class NumericInput extends Component
disabled : PropTypes.bool,
readOnly : PropTypes.bool,
required : PropTypes.bool,
snap : PropTypes.bool,
noValidate : PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
style : PropTypes.oneOfType([PropTypes.object, PropTypes.bool]),
type : PropTypes.string,
Expand Down Expand Up @@ -581,6 +582,10 @@ class NumericInput extends Component
false
);

if (this.props.snap) {
_n = Math.round(_n / this.props.step) * this.props.step
}

if (_n !== this.state.value) {
this.setState({ value: _n, stringValue: _n }, callback);
return true
Expand Down Expand Up @@ -737,7 +742,7 @@ class NumericInput extends Component

let {
// These are ignored in rendering
step, min, max, precision, parse, format, mobile,
step, min, max, precision, parse, format, mobile, snap,
value, type, style, defaultValue, onInvalid, onValid,

// The rest are passed to the input
Expand Down

0 comments on commit 51b9c85

Please sign in to comment.