Pass dayPickerInput instance to onDayChange (#782)

* Pass `this` to `onDayChange`

* Update type definition

* Update docs

* Fix unit tests

Author: gpbl

docs/src/code-samples/examples/input-state.js

@@ -8,25 +8,31 @@ export default class Example extends React.Component {
     this.handleDayChange = this.handleDayChange.bind(this);
     this.state = {
       selectedDay: undefined,
+      isEmpty: true,
       isDisabled: false,
     };
   }
-  handleDayChange(selectedDay, modifiers) {
+
+  handleDayChange(selectedDay, modifiers, dayPickerInput) {
+    const input = dayPickerInput.getInput();
     this.setState({
       selectedDay,
+      isEmpty: !input.value.trim(),
       isDisabled: modifiers.disabled === true,
     });
   }
+
   render() {
-    const { selectedDay, isDisabled } = this.state;
+    const { selectedDay, isDisabled, isEmpty } = this.state;
     return (
       <div>
         <p>
-          {!selectedDay && '🤔 Type or pick a valid day'}
-          {selectedDay && isDisabled && '😡 This day is disabled'}
+          {isEmpty && 'Please type or pick a day'}
+          {!isEmpty && !selectedDay && 'This day is invalid'}
+          {selectedDay && isDisabled && 'This day is disabled'}
           {selectedDay &&
             !isDisabled &&
-            `😄 You chose ${selectedDay.toLocaleDateString()}`}
+            `You chose ${selectedDay.toLocaleDateString()}`}
         </p>
         <DayPickerInput
           value={selectedDay}

docs/src/pages/api/DayPickerInput.js

@@ -17,13 +17,13 @@ export default () => (
       <a href="#classNames">classNames</a>,{' '}
       <a href="#clickUnselectsDay">clickUnselectsDay</a>,{' '}
       <a href="#component">component</a>,{' '}
-      <a href="#dayPickerProps">dayPickerProps</a>, <a href="#format">format</a>,{' '}
-      <a href="#formatDate">formatDate</a>, <a href="#keepFocus">keepFocus</a>,{' '}
-      <a href="#hideOnDayClick">hideOnDayClick</a>,{' '}
+      <a href="#dayPickerProps">dayPickerProps</a>, <a href="#format">format</a>
+      , <a href="#formatDate">formatDate</a>, <a href="#keepFocus">keepFocus</a>
+      , <a href="#hideOnDayClick">hideOnDayClick</a>,{' '}
       <a href="#inputProps">inputProps</a>,{' '}
       <a href="#overlayComponent">overlayComponent</a>,{' '}
-      <a href="#parseDate">parseDate</a>, <a href="#placeholder">placeholder</a>,{' '}
-      <a href="#showOverlay">showOverlay</a>, <a href="#value">value</a>
+      <a href="#parseDate">parseDate</a>, <a href="#placeholder">placeholder</a>
+      , <a href="#showOverlay">showOverlay</a>, <a href="#value">value</a>
     </p>
     <h4>Event handlers</h4>
     <p>
@@ -32,8 +32,8 @@ export default () => (
     </p>
     <h4>Public methods</h4>
     <p>
-      <a href="#getDayPicker">getDayPicker</a>, <a href="#getInput">getInput</a>,{' '}
-      <a href="#hideDayPicker">hideDayPicker</a>,{' '}
+      <a href="#getDayPicker">getDayPicker</a>, <a href="#getInput">getInput</a>
+      , <a href="#hideDayPicker">hideDayPicker</a>,{' '}
       <a href="#showDayPicker">showDayPicker</a>
     </p>
     <hr />
@@ -118,11 +118,13 @@ export default () => (
         prop, while <code>locale</code> is from{' '}
         <a href="#dayPickerProps">
           <code>dayPickerProps</code>
-        </a>.<br />
+        </a>
+        .<br />
         See also{' '}
         <a href="#parseDate">
           <code>parseDate</code>
-        </a>.
+        </a>
+        .
       </p>
       <p>
         If you are using <a href="http://momentjs.com/">moment.js</a> in your
@@ -221,19 +223,21 @@ function MyDayPickerInput() {
       </h3>
       <p>
         Date parser used for parsing the string typed in the input field. As
-        default, it parses only dates formatted as <code>YYYY-M-D</code>.
-        <br />
+        default, it parses only dates formatted as <code>YYYY-M-D</code>.<br />
         Arguments: <code>format</code> is the value coming from the{' '}
         <a href="#format">
           <code>format</code>
         </a>{' '}
         prop, while <code>locale</code> is from{' '}
         <a href="#dayPickerProps">
           <code>dayPickerProps</code>
-        </a>.<br />See also{' '}
+        </a>
+        .<br />
+        See also{' '}
         <a href="#formatDate">
           <code>formatDate</code>
-        </a>.
+        </a>
+        .
       </p>
       <p>
         If you are using <a href="http://momentjs.com/">moment.js</a> in your
@@ -269,18 +273,43 @@ function MyDayPickerInput() {
 
       <h3>
         <Anchor id="onDayChange" />
-        onDayChange <code>(day: ?Date, modifiers: Object) ⇒ void</code>
+        onDayChange{' '}
+        <code>
+          (day: ?Date, modifiers: Object, dayPickerInput: DayPickerInput) ⇒ void
+        </code>
       </h3>
       <p>
-        Handler function called when the user types a valid day – according to
-        the{' '}
-        <code>
-          <a href="#format">format</a>
-        </code>{' '}
-        prop – or when a day is clicked on the calendar. If the typed value is
-        empty or not valid, `day` is <code>undefined</code> and `modifiers` is
-        an empty object.
+        Handler function called when the user types into the input field or when
+        a day is clicked on the calendar.
+      </p>
+      <p>
+        <strong>Implementation Notes</strong>
       </p>
+      <ul>
+        <li>
+          If the typed value is empty or not valid, <code>day</code> is{' '}
+          <code>undefined</code> and <code>modifiers</code> is an empty object.
+        </li>
+        <li>
+          The third argument is the DayPickerInput instance. You can use it to
+          access to the instance props or public methods
+        </li>
+      </ul>
+      <CodeBlock>{`handleDayChange(selectedDay, modifiers, dayPickerInput) {
+  const input = dayPickerInput.getInput();
+  this.setState({
+    selectedDay,
+    isEmpty: !input.value.trim(),
+    isValidDay: typeof selectedDay !== 'undefined',
+    isDisabled: modifiers.disabled === true,
+  });
+}
+
+<DayPickerInput 
+  onDayChange={handleDayChange} 
+  selectedDay={this.state.selectedDay} 
+/>`}</CodeBlock>
+
       <h3>
         <Anchor id="onDayPickerHide" />
         onDayPickerHide <code>() ⇒ void</code>

src/DayPickerInput.js

@@ -284,7 +284,7 @@ export default class DayPickerInput extends React.Component {
         }),
         {}
       );
-      onDayChange(day, modifiers);
+      onDayChange(day, modifiers, this);
     });
   }
 
@@ -405,14 +405,14 @@ export default class DayPickerInput extends React.Component {
     const { value } = e.target;
     if (value.trim() === '') {
       this.setState({ value, typedValue: undefined });
-      if (onDayChange) onDayChange(undefined, {});
+      if (onDayChange) onDayChange(undefined, {}, this);
       return;
     }
     const day = parseDate(value, format, dayPickerProps.locale);
     if (!day) {
       // Day is invalid: we save the value in the typedValue state
       this.setState({ value, typedValue: value });
-      if (onDayChange) onDayChange(undefined, {});
+      if (onDayChange) onDayChange(undefined, {}, this);
       return;
     }
     this.updateState(day, value);
@@ -491,15 +491,15 @@ export default class DayPickerInput extends React.Component {
         this.hideAfterDayClick
       );
       if (onDayChange) {
-        onDayChange(undefined, modifiers);
+        onDayChange(undefined, modifiers, this);
       }
       return;
     }
 
     const value = formatDate(day, format, dayPickerProps.locale);
     this.setState({ value, typedValue: undefined, month: day }, () => {
       if (onDayChange) {
-        onDayChange(day, modifiers);
+        onDayChange(day, modifiers, this);
       }
       this.hideAfterDayClick();
     });

test/daypickerinput/events.js

@@ -113,7 +113,11 @@ describe('DayPickerInput', () => {
         const wrapper = mount(<DayPickerInput onDayChange={onDayChange} />);
         const input = wrapper.find('input');
         input.simulate('change', { target: { value: '' } });
-        expect(onDayChange).toHaveBeenCalledWith(undefined, {});
+        expect(onDayChange).toHaveBeenCalledWith(
+          undefined,
+          {},
+          expect.anything()
+        );
       });
       it("should update the input's value if the value is not a valid date", () => {
         const wrapper = mount(<DayPickerInput />);
@@ -126,7 +130,11 @@ describe('DayPickerInput', () => {
         const wrapper = mount(<DayPickerInput onDayChange={onDayChange} />);
         const input = wrapper.find('input');
         input.simulate('change', { target: { value: 'foo' } });
-        expect(onDayChange).toHaveBeenCalledWith(undefined, {});
+        expect(onDayChange).toHaveBeenCalledWith(
+          undefined,
+          {},
+          expect.anything()
+        );
       });
       it("should update the input's value and the displayed month", () => {
         const wrapper = mount(<DayPickerInput />);
@@ -344,10 +352,14 @@ describe('DayPickerInput', () => {
           .find('.DayPicker-Day')
           .at(10)
           .simulate('click');
-        expect(onDayChange).toHaveBeenCalledWith(undefined, {
-          selected: true,
-          foo: true,
-        });
+        expect(onDayChange).toHaveBeenCalledWith(
+          undefined,
+          {
+            selected: true,
+            foo: true,
+          },
+          expect.anything()
+        );
       });
       it('should call `onDayChange` when typing an invalid day', () => {
         const onDayChange = jest.fn();
@@ -359,7 +371,11 @@ describe('DayPickerInput', () => {
           .find('input')
           .simulate('change', { target: { value: '02/07/x' } });
         wrapper.update();
-        expect(onDayChange).toHaveBeenCalledWith(undefined, {});
+        expect(onDayChange).toHaveBeenCalledWith(
+          undefined,
+          {},
+          expect.anything()
+        );
         wrapper.setState({ typedValue: '02/07/x', value: '' });
         expect(wrapper.state('typedValue')).toBe('02/07/x');
         expect(wrapper.find('input')).toHaveProp('value', '02/07/x');

types/props.d.ts

@@ -3,6 +3,7 @@
 import * as React from 'react';
 import { ClassNames, Modifier, Modifiers, DayModifiers } from './common';
 import { LocaleUtils } from './utils';
+import { DayPickerInput } from './DayPickerInput';
 
 export interface CaptionElementProps {
   date: Date;
@@ -39,14 +40,14 @@ export interface WeekdayElementProps {
 export interface DayPickerProps {
   canChangeMonth?: boolean;
   captionElement?:
-  | React.ReactElement<Partial<CaptionElementProps>>
-  | React.ComponentClass<CaptionElementProps>
-  | React.SFC<CaptionElementProps>;
+    | React.ReactElement<Partial<CaptionElementProps>>
+    | React.ComponentClass<CaptionElementProps>
+    | React.SFC<CaptionElementProps>;
   className?: string;
   classNames?: ClassNames;
   containerProps?: React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLDivElement>,
-  HTMLDivElement
+    React.HTMLAttributes<HTMLDivElement>,
+    HTMLDivElement
   >;
   disabledDays?: Modifier | Modifier[];
   showOutsideDays?: boolean;
@@ -76,9 +77,9 @@ export interface DayPickerProps {
     string
   ];
   navbarElement?:
-  | React.ReactElement<Partial<NavbarElementProps>>
-  | React.ComponentClass<NavbarElementProps>
-  | React.SFC<NavbarElementProps>;
+    | React.ReactElement<Partial<NavbarElementProps>>
+    | React.ComponentClass<NavbarElementProps>
+    | React.SFC<NavbarElementProps>;
   numberOfMonths?: number;
   onBlur?(e: React.FocusEvent<HTMLDivElement>): void;
   onCaptionClick?(month: Date, e: React.MouseEvent<HTMLDivElement>): void;
@@ -145,9 +146,9 @@ export interface DayPickerProps {
   todayButton?: string;
   toMonth?: Date;
   weekdayElement?:
-  | React.ReactElement<Partial<WeekdayElementProps>>
-  | React.ComponentClass<WeekdayElementProps>
-  | React.SFC<WeekdayElementProps>;
+    | React.ReactElement<Partial<WeekdayElementProps>>
+    | React.ComponentClass<WeekdayElementProps>
+    | React.SFC<WeekdayElementProps>;
   weekdaysLong?: [string, string, string, string, string, string, string];
   weekdaysShort?: [string, string, string, string, string, string, string];
 }
@@ -174,7 +175,11 @@ export interface DayPickerInputProps {
 
   classNames?: ClassNames;
 
-  onDayChange?(day: Date, DayModifiers: DayModifiers): void;
+  onDayChange?(
+    day: Date,
+    DayModifiers: DayModifiers,
+    dayPickerInput: DayPickerInput
+  ): void;
   onDayPickerHide?(): void;
   onChange?(e: React.FocusEvent<HTMLDivElement>): void;
   onClick?(e: React.FocusEvent<HTMLDivElement>): void;