Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[core] feat(NumericInput): supply input element to onValueChange #3982

Merged
merged 5 commits into from
Feb 26, 2020
Merged

[core] feat(NumericInput): supply input element to onValueChange #3982

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
744ebd4
[core] feat(NumericInput): supply input element in onValueChange call…
adidahiya Feb 26, 2020
682cc18
small refactor, use optional chaining to invoke callback
adidahiya Feb 26, 2020
a726ba1
fix lint
adidahiya Feb 26, 2020
e326c68
fix more tests
adidahiya Feb 26, 2020
03e78db
fix lint, remove describe.only
adidahiya Feb 26, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 5 additions & 8 deletions packages/core/src/components/forms/numericInput.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export interface INumericInputProps extends IIntentProps, IProps {
onButtonClick?(valueAsNumber: number, valueAsString: string): void;

/** The callback invoked when the value changes due to typing, arrow keys, or button clicks. */
onValueChange?(valueAsNumber: number, valueAsString: string): void;
onValueChange?(valueAsNumber: number, valueAsString: string, inputElement: HTMLInputElement | null): void;
}

export interface INumericInputState {
Expand Down Expand Up @@ -287,7 +287,8 @@ export class NumericInput extends AbstractPureComponent2<HTMLInputProps & INumer
const didControlledValueChange = this.props.value !== prevProps.value;

if (!didControlledValueChange && this.state.value !== prevState.value) {
this.invokeValueCallback(this.state.value, this.props.onValueChange);
const { value: valueAsString } = this.state;
this.props.onValueChange?.(+valueAsString, valueAsString, this.inputElement);
}
}

Expand Down Expand Up @@ -378,7 +379,7 @@ export class NumericInput extends AbstractPureComponent2<HTMLInputProps & INumer
private handleButtonClick = (e: React.MouseEvent | React.KeyboardEvent, direction: IncrementDirection) => {
const delta = this.updateDelta(direction, e);
const nextValue = this.incrementValue(delta);
this.invokeValueCallback(nextValue, this.props.onButtonClick);
this.props.onButtonClick?.(+nextValue, nextValue);
};

private startContinuousChange() {
Expand All @@ -403,7 +404,7 @@ export class NumericInput extends AbstractPureComponent2<HTMLInputProps & INumer

private handleContinuousChange = () => {
const nextValue = this.incrementValue(this.delta);
this.invokeValueCallback(nextValue, this.props.onButtonClick);
this.props.onButtonClick?.(+nextValue, nextValue);
};

// Callbacks - Input
Expand Down Expand Up @@ -488,10 +489,6 @@ export class NumericInput extends AbstractPureComponent2<HTMLInputProps & INumer
this.setState({ shouldSelectAfterUpdate: false, value: nextValue });
};

private invokeValueCallback(value: string, callback: (valueAsNumber: number, valueAsString: string) => void) {
Utils.safeInvoke(callback, +value, value);
}

private incrementValue(delta: number) {
// pretend we're incrementing from 0 if currValue is empty
const currValue = this.state.value || NumericInput.VALUE_ZERO;
Expand Down
38 changes: 28 additions & 10 deletions packages/core/test/controls/numericInputTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import {
import * as React from "react";
import { spy } from "sinon";

import { expectPropValidationError } from "@blueprintjs/test-commons";
import { dispatchMouseEvent, expectPropValidationError } from "@blueprintjs/test-commons";

import * as Errors from "../../src/common/errors";
import {
Expand Down Expand Up @@ -193,15 +193,19 @@ describe("<NumericInput>", () => {
expect(component.state().value).to.equal("1 + 1");
});

it("fires onValueChange with the number value and the string value when the value changes", () => {
it("fires onValueChange with the number value, string value, and input element when the value changes", () => {
const onValueChangeSpy = spy();
const component = mount(<NumericInput onValueChange={onValueChangeSpy} />);

const incrementButton = component.find(Button).first();
incrementButton.simulate("mousedown");
dispatchMouseEvent(document, "mouseup");

expect(onValueChangeSpy.calledOnce).to.be.true;
expect(onValueChangeSpy.firstCall.args).to.deep.equal([1, "1"]);
const inputElement = component
.find("input")
.first()
.getDOMNode();
expect(onValueChangeSpy.calledOnceWithExactly(1, "1", inputElement)).to.be.true;
});

it("fires onButtonClick with the number value and the string value when either button is pressed", () => {
Expand All @@ -213,6 +217,8 @@ describe("<NumericInput>", () => {

// incrementing from 0
incrementButton.simulate("mousedown");
dispatchMouseEvent(document, "mouseup");

expect(onButtonClickSpy.calledOnce).to.be.true;
expect(onButtonClickSpy.firstCall.args).to.deep.equal([1, "1"]);
onButtonClickSpy.resetHistory();
Expand Down Expand Up @@ -611,8 +617,12 @@ describe("<NumericInput>", () => {

const newValue = component.state().value;
expect(newValue).to.equal("0");
expect(onValueChangeSpy.calledOnce).to.be.true;
expect(onValueChangeSpy.firstCall.args).to.deep.equal([0, "0"]);

const inputElement = component
.find("input")
.first()
.getDOMNode();
expect(onValueChangeSpy.calledOnceWithExactly(0, "0", inputElement)).to.be.true;
});

it("does not fire onValueChange if nextProps.min < value", () => {
Expand Down Expand Up @@ -684,8 +694,12 @@ describe("<NumericInput>", () => {

const newValue = component.state().value;
expect(newValue).to.equal("0");
expect(onValueChangeSpy.calledOnce).to.be.true;
expect(onValueChangeSpy.firstCall.args).to.deep.equal([0, "0"]);

const inputElement = component
.find("input")
.first()
.getDOMNode();
expect(onValueChangeSpy.calledOnceWithExactly(0, "0", inputElement)).to.be.true;
});

it("does not fire onValueChange if nextProps.max > value", () => {
Expand Down Expand Up @@ -714,8 +728,12 @@ describe("<NumericInput>", () => {
.simulate("mousedown")
.simulate("mousedown");
expect(component.state().value).to.equal("2");
expect(onValueChangeSpy.callCount).to.equal(1);
expect(onValueChangeSpy.args[0]).to.deep.equal([2, "2"]);

const inputElement = component
.find("input")
.first()
.getDOMNode();
expect(onValueChangeSpy.calledOnceWithExactly(2, "2", inputElement)).to.be.true;
});
});

Expand Down