From afa8c160a3841c7c6df0bca7ca6a188af30eebbc Mon Sep 17 00:00:00 2001
From: Maciej Lenartowicz <maciej.lenartowicz@nic.cz>
Date: Mon, 7 Oct 2019 09:18:25 +0000
Subject: [PATCH] Resolve "Increment/decrement value in NumberInput when +/-
 button is kept pushed."

---
 package-lock.json                           |  2 +-
 package.json                                |  2 +-
 src/bootstrap/NumberInput.js                | 22 ++++++++++++----
 src/bootstrap/__tests__/NumberInput.test.js | 28 ++++++++++-----------
 src/utils/hooks.js                          | 20 +++++++++++++++
 5 files changed, 53 insertions(+), 21 deletions(-)
 create mode 100644 src/utils/hooks.js

diff --git a/package-lock.json b/package-lock.json
index dad8c2c..a4b339c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "0.1.0-beta.7",
+  "version": "0.1.0-beta.8",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 0646b86..c2ded42 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "foris",
-  "version": "0.1.0-beta.7",
+  "version": "0.1.0-beta.8",
   "description": "Set of components and utils for Foris and its plugins.",
   "author": "CZ.NIC, z.s.p.o.",
   "repository": {
diff --git a/src/bootstrap/NumberInput.js b/src/bootstrap/NumberInput.js
index 63139da..e841622 100644
--- a/src/bootstrap/NumberInput.js
+++ b/src/bootstrap/NumberInput.js
@@ -6,8 +6,9 @@
  */
 
 import React from "react";
-
 import PropTypes from "prop-types";
+
+import { useConditionalTimeout } from "utils/hooks";
 import { Input } from "./Input";
 import "./NumberInput.css";
 
@@ -33,15 +34,25 @@ NumberInput.defaultProps = {
     value: 0,
 };
 
-export function NumberInput({ onChange, inlineText, ...props }) {
+export function NumberInput({
+    onChange, inlineText, value, ...props
+}) {
+    function updateValue(initialValue, difference) {
+        onChange({ target: { value: initialValue + difference } });
+    }
+
+    const enableIncrease = useConditionalTimeout({ callback: updateValue }, value, 1);
+    const enableDecrease = useConditionalTimeout({ callback: updateValue }, value, -1);
+
     return (
-        <Input type="number" onChange={onChange} {...props}>
+        <Input type="number" onChange={onChange} value={value} {...props}>
             <div className="input-group-append">
                 {inlineText && <p className="input-group-text">{inlineText}</p>}
                 <button
                     type="button"
                     className="btn btn-outline-secondary"
-                    onClick={() => onChange({ target: { value: props.value + 1 } })}
+                    onMouseDown={() => enableIncrease(true)}
+                    onMouseUp={() => enableIncrease(false)}
                     aria-label="Increase"
                 >
                     <i className="fas fa-plus" />
@@ -49,7 +60,8 @@ export function NumberInput({ onChange, inlineText, ...props }) {
                 <button
                     type="button"
                     className="btn btn-outline-secondary"
-                    onClick={() => onChange({ target: { value: props.value - 1 } })}
+                    onMouseDown={() => enableDecrease(true)}
+                    onMouseUp={() => enableDecrease(false)}
                     aria-label="Decrease"
                 >
                     <i className="fas fa-minus" />
diff --git a/src/bootstrap/__tests__/NumberInput.test.js b/src/bootstrap/__tests__/NumberInput.test.js
index d26e2e4..dccc607 100644
--- a/src/bootstrap/__tests__/NumberInput.test.js
+++ b/src/bootstrap/__tests__/NumberInput.test.js
@@ -7,39 +7,39 @@
 
 import React from "react";
 
-import { render, fireEvent } from "customTestRender";
+import { render, fireEvent, getByLabelText, wait } from "customTestRender";
 
 import { NumberInput } from "../NumberInput";
 
 describe("<NumberInput/>", () => {
     const onChangeMock = jest.fn();
-    let container;
-    let getByLabelText;
+    let componentContainer;
 
     beforeEach(() => {
-        ({ container, getByLabelText } = render(
+        const { container } = render(
             <NumberInput
                 label="Test label"
                 helpText="Some help text"
                 value={1}
                 onChange={onChangeMock}
             />
-        ));
+        );
+        componentContainer = container;
     });
 
     it("Render number input", () => {
-        expect(container.firstChild).toMatchSnapshot();
+        expect(componentContainer.firstChild).toMatchSnapshot();
     });
 
-    it("Increase number with button", () => {
-        const increaseButton = getByLabelText("Increase");
-        fireEvent.click(increaseButton);
-        expect(onChangeMock).toHaveBeenCalledWith({"target": {"value": 2}});
+    it("Increase number with button", async () => {
+        const increaseButton = getByLabelText(componentContainer, "Increase");
+        fireEvent.mouseDown(increaseButton);
+        await wait(() => expect(onChangeMock).toHaveBeenCalledWith({"target": {"value": 2}}));
     });
 
-    it("Decrease number with button", () => {
-        const decreaseButton = getByLabelText("Decrease");
-        fireEvent.click(decreaseButton);
-        expect(onChangeMock).toHaveBeenCalledWith({"target": {"value": 0}});
+    it("Decrease number with button", async () => {
+        const decreaseButton = getByLabelText(componentContainer, "Decrease");
+        fireEvent.mouseDown(decreaseButton);
+        await wait(() => expect(onChangeMock).toHaveBeenCalledWith({"target": {"value": 0}}));
     });
 });
diff --git a/src/utils/hooks.js b/src/utils/hooks.js
new file mode 100644
index 0000000..8fcb09d
--- /dev/null
+++ b/src/utils/hooks.js
@@ -0,0 +1,20 @@
+/*
+ * Copyright (C) 2019 CZ.NIC z.s.p.o. (http://www.nic.cz/)
+ *
+ * This is free software, licensed under the GNU General Public License v3.
+ * See /LICENSE for more information.
+ */
+
+import { useState, useEffect } from "react";
+
+/** Execute callback when condition is set to true. */
+export function useConditionalTimeout({ callback, timeout = 125 }, ...callbackArgs) {
+    const [condition, setCondition] = useState(false);
+    useEffect(() => {
+        if (condition) {
+            const interval = setTimeout(() => callback(...callbackArgs), timeout);
+            return () => setTimeout(interval);
+        }
+    }, [condition, callback, timeout, callbackArgs]);
+    return setCondition;
+}