Merge branch '4-increment-decrement' into 'dev'

Resolve "Increment/decrement value in NumberInput when +/- button is kept pushed."

Closes #4

See merge request turris/reforis/foris-js!14

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": {

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": {

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" />

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 componentContainer;
-    let getByLabelText;
 
     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", () => {
+    it("Increase number with button", async () => {
-        const increaseButton = getByLabelText("Increase");
+        const increaseButton = getByLabelText(componentContainer, "Increase");
-        fireEvent.click(increaseButton);
+        fireEvent.mouseDown(increaseButton);
-        expect(onChangeMock).toHaveBeenCalledWith({"target": {"value": 2}});
+        await wait(() => expect(onChangeMock).toHaveBeenCalledWith({"target": {"value": 2}}));
     });
 
-    it("Decrease number with button", () => {
+    it("Decrease number with button", async () => {
-        const decreaseButton = getByLabelText("Decrease");
+        const decreaseButton = getByLabelText(componentContainer, "Decrease");
-        fireEvent.click(decreaseButton);
+        fireEvent.mouseDown(decreaseButton);
-        expect(onChangeMock).toHaveBeenCalledWith({"target": {"value": 0}});
+        await wait(() => expect(onChangeMock).toHaveBeenCalledWith({"target": {"value": 0}}));
     });
 });

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;
+}