GGLinnk/foris-js
1
0
Fork 0
mirror of https://gitlab.nic.cz/turris/reforis/foris-js.git synced 2025-06-15 13:36:35 +02:00
Code Issues Releases Activity

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

Browse Source
This commit is contained in:
Maciej Lenartowicz
2019-10-07 09:18:25 +00:00
parent 0af56ec84c
commit afa8c160a3
5 changed files with 53 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/bootstrap/NumberInput.js
View File

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

28
src/bootstrap/__tests__/NumberInput.test.js
View File

@ -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}}));
});
});