Disable default styles for number input

src/bootstrap/NumberInput.js

@@ -10,8 +10,6 @@ import React from "react";
 import PropTypes from "prop-types";
 import { Input } from "./Input";
 
-export const NumberInput = ({ ...props }) => <Input type="number" {...props} />;
-
 NumberInput.propTypes = {
     /** Field label. */
     label: PropTypes.string.isRequired,
@@ -24,4 +22,38 @@ NumberInput.propTypes = {
         PropTypes.string,
         PropTypes.number,
     ]),
+    /** Function called when value changes. */
+    onChange: PropTypes.func.isRequired,
+    /** Additional description dispaled to the right of input value. */
+    inlineText: PropTypes.string,
 };
+
+NumberInput.defaultProps = {
+    value: 0,
+};
+
+export function NumberInput({ onChange, inlineText, ...props }) {
+    return (
+        <Input type="number" onChange={onChange} {...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 } })}
+                    aria-label="Increase"
+                >
+                    <i className="fas fa-plus" />
+                </button>
+                <button
+                    type="button"
+                    className="btn btn-outline-secondary"
+                    onClick={() => onChange({ target: { value: props.value - 1 } })}
+                    aria-label="Decrease"
+                >
+                    <i className="fas fa-minus" />
+                </button>
+            </div>
+        </Input>
+    );
+}

src/bootstrap/__tests__/NumberInput.test.js

@@ -7,23 +7,39 @@
 
 import React from "react";
 
-import { render } from "customTestRender";
+import { render, fireEvent } from "customTestRender";
 
 import { NumberInput } from "../NumberInput";
 
-
 describe("<NumberInput/>", () => {
-    it("Render number input", () => {
-        const { container } = render(
+    const onChangeMock = jest.fn();
+    let container;
+    let getByLabelText;
+
+    beforeEach(() => {
+        ({ container, getByLabelText } = render(
             <NumberInput
                 label="Test label"
                 helpText="Some help text"
-                value={1123}
-                onChange={() => {
-                }}
+                value={1}
+                onChange={onChangeMock}
             />
-        );
-        expect(container.firstChild)
-            .toMatchSnapshot();
+        ));
+    });
+
+    it("Render number input", () => {
+        expect(container.firstChild).toMatchSnapshot();
+    });
+
+    it("Increase number with button", () => {
+        const increaseButton = getByLabelText("Increase");
+        fireEvent.click(increaseButton);
+        expect(onChangeMock).toHaveBeenCalledWith({"target": {"value": 2}});
+    });
+
+    it("Decrease number with button", () => {
+        const decreaseButton = getByLabelText("Decrease");
+        fireEvent.click(decreaseButton);
+        expect(onChangeMock).toHaveBeenCalledWith({"target": {"value": 0}});
     });
 });

src/bootstrap/__tests__/__snapshots__/NumberInput.test.js.snap

@@ -19,8 +19,30 @@ exports[`<NumberInput/> Render number input 1`] = `
         class="form-control"
         id="1"
         type="number"
-        value="1123"
+        value="1"
       />
+      <div
+        class="input-group-append"
+      >
+        <button
+          aria-label="Increase"
+          class="btn btn-outline-secondary"
+          type="button"
+        >
+          <i
+            class="fas fa-plus"
+          />
+        </button>
+        <button
+          aria-label="Decrease"
+          class="btn btn-outline-secondary"
+          type="button"
+        >
+          <i
+            class="fas fa-minus"
+          />
+        </button>
+      </div>
     </div>
     <small
       class="form-text text-muted"

src/index.js

@@ -40,6 +40,7 @@ export { WebSockets } from "webSockets/WebSockets";
 
 // Utils
 export { Portal } from "utils/Portal";
+export { undefinedIfEmpty, withoutUndefinedKeys } from "utils/objectHelpers";
 
 // Foris URL
 export { ForisURLs, REFORIS_URL_PREFIX } from "forisUrls";

src/utils/objectHelpers.js

@@ -0,0 +1,20 @@
+/** Return undefined if object has no keys, otherwise return object. */
+export function undefinedIfEmpty(instance) {
+    if (Object.keys(instance).length > 0) {
+        return instance;
+    }
+    return undefined;
+}
+
+/** Return object without keys that have undefined value. */
+export function withoutUndefinedKeys(instance) {
+    return Object.keys(instance).reduce(
+        (accumulator, key) => {
+            if (instance[key] !== undefined) {
+                accumulator[key] = instance[key];
+            }
+            return accumulator;
+        },
+        {},
+    );
+}