[datetime] feat(DateRangeInput): add support for disabling start or e…

…nd input (#3607)
palantir · Jun 18, 2019 · d24377e · d24377e · blueprint-bot · Jun 18, 2019
1 parent 0af186b
commit d24377e
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 2 deletions.
diff --git a/packages/datetime/src/dateRangeInput.tsx b/packages/datetime/src/dateRangeInput.tsx
@@ -342,14 +342,13 @@ export class DateRangeInput extends AbstractPureComponent<IDateRangeInputProps,
 
     private renderInputGroup = (boundary: Boundary) => {
         const inputProps = this.getInputProps(boundary);
-
         const handleInputEvent = boundary === Boundary.START ? this.handleStartInputEvent : this.handleEndInputEvent;
 
         return (
             <InputGroup
                 autoComplete="off"
+                disabled={inputProps.disabled || this.props.disabled}
                 {...inputProps}
-                disabled={this.props.disabled}
                 intent={this.isInputInErrorState(boundary) ? Intent.DANGER : inputProps.intent}
                 inputRef={this.getInputRef(boundary)}
                 onBlur={handleInputEvent}

diff --git a/packages/datetime/test/dateRangeInputTests.tsx b/packages/datetime/test/dateRangeInputTests.tsx
@@ -136,6 +136,36 @@ describe("<DateRangeInput>", () => {
     });
 
     describe("startInputProps and endInputProps", () => {
+        it("startInput is disabled when startInputProps={ disabled: true }", () => {
+            const { root } = wrap(<DateRangeInput {...DATE_FORMAT} startInputProps={{ disabled: true }} />);
+            const startInput = getStartInput(root);
+
+            startInput.simulate("click");
+            expect(root.find(Popover).prop("isOpen")).to.be.false;
+            expect(startInput.prop("disabled")).to.be.true;
+        });
+
+        it("endInput is not disabled when startInputProps={ disabled: true }", () => {
+            const { root } = wrap(<DateRangeInput {...DATE_FORMAT} startInputProps={{ disabled: true }} />);
+            const endInput = getEndInput(root);
+            expect(endInput.prop("disabled")).to.be.false;
+        });
+
+        it("endInput is disabled when endInputProps={ disabled: true }", () => {
+            const { root } = wrap(<DateRangeInput {...DATE_FORMAT} endInputProps={{ disabled: true }} />);
+            const endInput = getEndInput(root);
+
+            endInput.simulate("click");
+            expect(root.find(Popover).prop("isOpen")).to.be.false;
+            expect(endInput.prop("disabled")).to.be.true;
+        });
+
+        it("startInput is not disabled when endInputProps={ disabled: true }", () => {
+            const { root } = wrap(<DateRangeInput {...DATE_FORMAT} endInputProps={{ disabled: true }} />);
+            const startInput = getStartInput(root);
+            expect(startInput.prop("disabled")).to.be.false;
+        });
+
         describe("startInputProps", () => {
             runTestSuite(getStartInput, inputGroupProps => {
                 return mount(<DateRangeInput {...DATE_FORMAT} startInputProps={inputGroupProps} />);