Merge pull request #39 from selsamman/master

feat: Add longStep property to be able to step in larger units when long pressing

Author: marcocesarato

PROPS.md

@@ -41,6 +41,7 @@
 | `inputStyle`            | Input Style (Text number at middle)                                                                                            | Object           |                  | Could overwrite other props                      |
 | `inputProps`            | Customized TextInput Component props                                                                                           | Object           | `null`           |                                                  |
 | `leftButtonProps`       | Customized left button (Touchable Component) props                                                                             | Object           | `null`           |                                                  |
+| `longStep`              | Value to increment or decrement the current spinner value `onLongPress`                                                        | String<br>Number | `step`           |
 | `maxLength`             | Limits the maximum number of characters that can be entered.                                                                   | Number           |                  |                                                  |
 | `max`                   | Max number permitted                                                                                                           | String<br>Number | `null`           |                                                  |
 | `min`                   | Min value permitted                                                                                                            | String<br>Number | `0`              |                                                  |

README.md

@@ -126,6 +126,7 @@ Check the "[Props List](PROPS.md)" file to have the complete list of component p
 | `selectTextOnFocus`    | If `true`, all text will automatically be selected on focus.                                                                   | Bool             | `false` |                                   |
 | `selectionColor`       | The highlight and cursor color of the text input.                                                                              | String           | `null`  |                                   |
 | `step`                 | Value to increment or decrement the current spinner value                                                                      | String<br>Number | `1`     |                                   |
+| `longStep`             | Value to increment or decrement the current spinner value `onLongPress`                                                        | String<br>Number | `step`  |                                   |
 | `speed`                | Speed acceleration ratio of increase or decrease `onLongPress`                                                                 | Number           | `7`     | (value from `1` to `10`)          |
 | `typingTime`           | Time before debounce and trigger `onChange` event                                                                              | Number           | `750`   |                                   |
 | `type`                 | Type of spinner                                                                                                                | String           | `int`   | Can be `int` or `real`/`float`... |

src/InputSpinner.js

@@ -33,6 +33,10 @@ class InputSpinner extends Component {
 		if (!this.isTypeDecimal() && spinnerStep < 1) {
 			spinnerStep = 1;
 		}
+		let spinnerLongStep = this._parseNum(this.props.longStep);
+		if (!this.isTypeDecimal() && spinnerLongStep < 1) {
+			spinnerLongStep = 0;
+		}
 
 		const min = this.props.min != null ? this._parseNum(this.props.min) : null;
 		const max = this.props.max != null ? this._parseNum(this.props.max) : null;
@@ -62,6 +66,7 @@ class InputSpinner extends Component {
 			max: max,
 			value: initialValue,
 			step: spinnerStep,
+			longStep: spinnerLongStep,
 			focused: false,
 			buttonPress: null,
 		};
@@ -99,6 +104,14 @@ class InputSpinner extends Component {
 			}
 			this.setState({step: spinnerStep});
 		}
+		// Parse longStep
+		if (this.props.longStep !== prevProps.longStep) {
+			let spinnerLongStep = this._parseNum(this.props.longStep);
+			if (!this.isTypeDecimal() && spinnerLongStep < 1) {
+				spinnerLongStep = 0;
+			}
+			this.setState({longStep: spinnerLongStep});
+		}
 	}
 
 	/**
@@ -549,11 +562,23 @@ class InputSpinner extends Component {
 
 	/**
 	 * Increase
+	 * @param event
+	 * @param isLongPress
+	 * @returns {Promise<void>}
 	 */
-	async increase() {
+	async increase(event, isLongPress = false) {
 		if (this._isDisabledButtonRight()) return;
 		let currentValue = this._parseNum(this.state.value);
-		let num = currentValue + this._parseNum(this.state.step);
+		let num =
+			currentValue +
+			this._parseNum(
+				isLongPress && this.state.longStep > 0
+					? this.state.longStep
+					: this.state.step,
+			);
+		if (isLongPress && this.state.longStep > 0) {
+			num = Math.round(num / this.state.longStep) * this.state.longStep;
+		}
 
 		if (
 			this.isMaxReached(currentValue) &&
@@ -581,17 +606,32 @@ class InputSpinner extends Component {
 			this.onLongPress(num);
 		}
 
-		this.increaseTimer = setTimeout(this.increase.bind(this), wait);
+		this.increaseTimer = setTimeout(
+			this.increase.bind(this, event, true),
+			wait,
+		);
 		this.onChange(num, true);
 	}
 
 	/**
 	 * Decrease
+	 * @param event
+	 * @param isLongPress
+	 * @returns {Promise<void>}
 	 */
-	async decrease() {
+	async decrease(event, isLongPress = false) {
 		if (this._isDisabledButtonLeft()) return;
 		let currentValue = this._parseNum(this.state.value);
-		let num = currentValue - this._parseNum(this.state.step);
+		let num =
+			currentValue -
+			this._parseNum(
+				isLongPress && this.state.longStep > 0
+					? this.state.longStep
+					: this.state.step,
+			);
+		if (isLongPress && this.state.longStep > 0) {
+			num = Math.round(num / this.state.longStep) * this.state.longStep;
+		}
 
 		if (
 			this.isMinReached(currentValue) &&
@@ -619,7 +659,10 @@ class InputSpinner extends Component {
 			this.onLongPress(num);
 		}
 
-		this.decreaseTimer = setTimeout(this.decrease.bind(this), wait);
+		this.decreaseTimer = setTimeout(
+			this.decrease.bind(this, event, true),
+			wait,
+		);
 		this.onChange(num, true);
 	}
 
@@ -1149,6 +1192,7 @@ InputSpinner.propTypes = {
 	value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 	initialValue: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 	step: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+	longStep: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 	precision: PropTypes.number,
 	shadow: PropTypes.bool,
 	rounded: PropTypes.bool,
@@ -1223,6 +1267,7 @@ InputSpinner.defaultProps = {
 	value: 0,
 	initialValue: null,
 	step: 1,
+	longStep: 0,
 	precision: 2,
 	rounded: true,
 	shadow: false,

src/index.d.ts

@@ -8,6 +8,7 @@ export interface ReactNativeInputSpinnerProps {
 	value?: string | number;
 	initialValue?: string | number;
 	step?: string | number;
+	longStep?: string | number;
 	precision?: number;
 	shadow?: boolean;
 	rounded?: boolean;