Merge pull request #257 from gpbl/event-handlers

Change event handlers arguments signature (close #256)

README.md

@@ -59,7 +59,7 @@ class MyComponent extends React.Component {
   state = {
     selectedDay: new Date(),
   }
-  handleDayClick(e, day, { disabled, selected }) {
+  handleDayClick(day, { disabled, selected }) {
     if (disabled) {
       return;
     }

docs/API.md

@@ -11,32 +11,32 @@
 | [captionElement](APIProps.md#captionelement) | | `Element` |
 | [className](APIProps.md#className) | | `String` |
 | [containerProps](APIProps.md#containerprops) | | `Object` |
-| [disabledDays](APIProps.md#disableddays) | | See [Modifiers.md](modifiers) |
+| [disabledDays](APIProps.md#disableddays) | | See [modifiers](Modifiers.md) |
 | [enableOutsideDays](APIProps.md#enableoutsidedays) | false | `Bool` |
 | [firstDayOfWeek](APIProps.md#firstdayofweek) | 0 | `Number` |
 | [fixedWeeks](APIProps.md#fixedWeeks) | false | `Bool` |
 | [fromMonth](APIProps.md#frommonth) | | `Date` |
 | [initialMonth](APIProps.md#initialmonth) | Current month | `Date` |
 | [locale](APIProps.md#locale) | en | `String` |
 | [localeUtils](APIProps.md#localeutils) | | `Object` |
-| [modifiers](APIProps.md#modifiers) | | `Object` of [Modifiers.md](modifiers) |
+| [modifiers](APIProps.md#modifiers) | | `Object` of [modifiers](Modifiers.md) |
 | [months](APIProps.md#months) | | `Array<String>` |
 | [navbarElement](APIProps.md#navbarelement) | | `Element` |
 | [numberOfMonths](APIProps.md#numberofmonths) | 1 | `Number` |
-| [onCaptionClick](APIProps.md#oncaptionclick) | | `(e: SyntethicEvent, currentMonth: Date) ⇒ void` |
+| [onCaptionClick](APIProps.md#oncaptionclick) | | `(currentMonth: Date, e: SyntethicEvent) ⇒ void` |
 | [onBlur](APIProps.md#onblur) | | `(e: SyntethicEvent) ⇒ void` |
-| [onDayClick](APIProps.md#ondayclick) | | `(e: SyntethicEvent, day: Date, modifiers: Object) ⇒ void` |
-| [onDayMouseEnter](APIProps.md#ondaymouseenter) | | `(e: SyntethicEvent, day: Date, modifiers: Object) ⇒ void` |
-| [onDayMouseLeave](APIProps.md#ondaymouseleave) | | `(e: SyntethicEvent, day: Date, modifiers: Object) ⇒ void` |
-| [onDayTouchStart](APIProps.md#ondaytouchstart) | | `(e: SyntethicEvent, day: Date, modifiers: Object) ⇒ void` |
-| [onDayTouchEnd](APIProps.md#ondaytouchend) | | `(e: SyntethicEvent, day: Date, modifiers: Object) ⇒ void` |
+| [onDayClick](APIProps.md#ondayclick) | | `(day: Date, modifiers: Object, e: SyntethicEvent) ⇒ void` |
+| [onDayMouseEnter](APIProps.md#ondaymouseenter) | | `(day: Date, modifiers: Object, e: SyntethicEvent) ⇒ void` |
+| [onDayMouseLeave](APIProps.md#ondaymouseleave) | | `(day: Date, modifiers: Object, e: SyntethicEvent) ⇒ void` |
+| [onDayTouchStart](APIProps.md#ondaytouchstart) | | `(day: Date, modifiers: Object, e: SyntethicEvent) ⇒ void` |
+| [onDayTouchEnd](APIProps.md#ondaytouchend) | | `(day: Date, modifiers: Object, e: SyntethicEvent) ⇒ void` |
 | [onFocus](APIProps.md#onfocus) | | `(e: SyntethicEvent) ⇒ void` |
 | [onKeyDown](APIProps.md#onkeydown) | | `(e: SyntethicEvent) ⇒ void` |
 | [onMonthChange](APIProps.md#onmonthchange) | | `(month: Date) ⇒ void` |
 | [pagedNavigation](APIProps.md#pagednavigation) |false | `Bool` |
 | [renderDay](APIProps.md#renderday) | day ⇒ day.getDate() | `(day: Date) ⇒ Element` |
 | [reverseMonths](APIProps.md#reversemonths) | false | `Bool` |
-| [selectedDays](APIProps.md#selecteddays) | | See [Modifiers.md](modifiers) |
+| [selectedDays](APIProps.md#selecteddays) | | See [modifiers](Modifiers.md) |
 | [tabIndex](APIProps.md#tabindex) | | `Number` |
 | [toMonth](APIProps.md#tomonth) | | `Date` |
 | [weekdayElement](APIProps.md#weekdayelement) | | `Element` |

docs/APIProps.md

@@ -190,15 +190,15 @@ An array containing the short weekdays names to use in the month's header. Must
 
 ### onCaptionClick
 
-**Type**: `(e: SyntethicEvent, currentMonth: Date) ⇒ void`
+**Type**: `(currentMonth: Date, e: SyntethicEvent) ⇒ void`
 
 Event handler when the user clicks on the caption in the header displaying the month.
 
 ---
 
 ### onDayClick
 
-**Type**: `(e: SyntethicEvent, day: Date, modifiers: Object) ⇒ void`
+**Type**: `(day: Date, modifiers: Object, e: SyntethicEvent) ⇒ void`
 
 Event handler when the user clicks on a day cell.
 
@@ -212,31 +212,31 @@ Event handler when the calendar get the `blur` event.
 
 ### onDayKeyDown
 
-**Type**: `(e: SyntethicEvent, day: Date, modifiers: Object) ⇒ void`
+**Type**: `(day: Date, modifiers: Object, e: SyntethicEvent) ⇒ void`
 
 Event handler when the day cell gets the `keydown` event.
 
 ### onDayMouseEnter
 
-**Type**: `(e: SyntethicEvent, day: Date, modifiers: Object) ⇒ void`
+**Type**: `(day: Date, modifiers: Object, e: SyntethicEvent) ⇒ void`
 
 Event handler when the mouse enters a day cell.
 
 ### onDayMouseLeave
 
-**Type**: `(e: SyntethicEvent, day: Date, modifiers: Object) ⇒ void`
+**Type**: `(day: Date, modifiers: Object, e: SyntethicEvent) ⇒ void`
 
 Event handler when the mouse leave a day cell.
 
 ### onDayTouchStart
 
-**Type**: `(e: SyntethicEvent, day: Date, modifiers: Object) ⇒ void`
+**Type**: `(day: Date, modifiers: Object, e: SyntethicEvent) ⇒ void`
 
 Event handler when the day cell gets the `touchStart` event.
 
 ### onDayTouchEnd
 
-**Type**: `(e: SyntethicEvent, day: Date, modifiers: Object) ⇒ void`
+**Type**: `(day: Date, modifiers: Object, e: SyntethicEvent) ⇒ void`
 
 Event handler when the day cell gets the `touchEnd` event.
 

docs/Basic.md

@@ -20,7 +20,7 @@ class SelectDay extends React.Component {
   state = {
     selectedDay: new Date(), // We set the selected default as today
   };
-  handleDayClick(e, day) {
+  handleDayClick(day) {
     this.setState({ selectedDay: day });
   }
   render() {
@@ -56,7 +56,7 @@ class SelectDay extends React.Component {
   isDaySelected(day) {
     return DateUtils.isSameDay(day, this.state.selectedDay);
   }
-  handleDayClick(e, day) {
+  handleDayClick(day) {
     this.setState({ selectedDay: day });
   }
   render() {
@@ -94,7 +94,7 @@ The `onDayClick` handler receives as third argument an object that can be inspec
 
 ```jsx
 // snip
-handleDayClick(e, day, { selected }) {
+handleDayClick(day, { selected }) {
   if (selected) {
     // Unselect the day if already selected
     this.state({ selectedDay: undefined });
@@ -155,7 +155,7 @@ class SelectDay extends React.Component {
   state = {
     selectedDay: new Date(),
   };
-  handleDayClick(e, day) {
+  handleDayClick(day) {
     this.setState({ selectedDay: day });
   }
   render() {
@@ -180,7 +180,7 @@ This, however, will make selectable _the disabled days too_. We need instead our
 In the click handler we can use the day's modifiers to check if the day was disabled, and prevent its selection:
 
 ```jsx
-handleDayClick(e, day, { disabled }) {
+handleDayClick(day, { disabled }) {
   if (disabled) {
     // Do not update the state if the day is disabled
     return;

docs/GettingStarted.md

@@ -34,7 +34,7 @@ class SelectDay extends React.Component {
     selectedDay: null
   };
 
-  handleDayClick(e, day, modifiers) {
+  handleDayClick(day) {
     this.setState({ selectedDay: day });
   }
 
@@ -121,7 +121,7 @@ Modifiers are passed to event handlers. For example, if the selected day is clic
 
 ```javascript
 
-handleDayClick(e, day, modifiers) {
+handleDayClick(day, modifiers) {
   if (modifiers.indexOf("selected") > -1) {
     this.setState({
       selectedDay: null
@@ -146,7 +146,7 @@ const modifiers = {
 then, the click handler stops the interaction when the day contains the `isSunday` modifier:
 
 ```javascript
-handleDayClick(e, day, modifiers) {
+handleDayClick(day, modifiers) {
   if (modifiers.indexOf("isSunday") > -1) {
     return;
   }

docs/Modifiers.md

@@ -98,13 +98,13 @@ For example, using the modifiers above, any cell representing a Sunday will have
 Modifiers are passed as argument to the event handlers:
 
 ```jsx
-function handleDayClick(e, day, modifiers) {
+function handleDayClick(day, modifiers) {
   if (modifiers.sundays) {
     console.log('Sunday has been clicked')
   }
 }
 
-function handleDayMouseEnter(e, day, { isFirstOfMonth }) {
+function handleDayMouseEnter(day, { isFirstOfMonth }) {
   if (isFirstOfMonth) {
     console.log('The first day of month received mouse enter')
   }

examples/src/examples/AdvancedModifiers.js

@@ -13,7 +13,7 @@ export default class AdvancedModifiers extends React.Component {
   state = {
     text: 'Please select a day 👻',
   };
-  handleDayClick(e, day, { even, odd, blahblah }) {
+  handleDayClick(day, { even, odd, blahblah }) {
     let text;
     if (even) {
       text = 'Just an even day';
@@ -26,7 +26,7 @@ export default class AdvancedModifiers extends React.Component {
     }
     this.setState({ text });
   }
-  handleDayMouseEnter(e, day, modifiers) {
+  handleDayMouseEnter(day, modifiers) {
     console.log('Day\'s CSS classes', e.target.classList.toString());
     console.log('Day\'s modifiers', modifiers);
   }

examples/src/examples/DisabledDays.js

@@ -11,7 +11,7 @@ export default class DisabledDays extends React.Component {
   state = {
     selectedDay: null,
   };
-  handleDayClick(e, day, { disabled, selected }) {
+  handleDayClick(day, { disabled, selected }) {
     if (disabled) {
       return;
     }

examples/src/examples/InputField.js

@@ -38,7 +38,7 @@ export default class InputField extends React.Component {
     }
   }
 
-  handleDayClick(e, day) {
+  handleDayClick(day) {
     this.setState({
       value: moment(day).format('L'),
       month: day,

examples/src/examples/InputFieldOverlay.js

@@ -80,7 +80,7 @@ export default class InputFieldOverlay extends Component {
   }
 
 
-  handleDayClick(e, day) {
+  handleDayClick(day) {
     this.setState({
       value: moment(day).format('L'),
       selectedDay: day,

examples/src/examples/Modifiers.js

@@ -8,7 +8,7 @@ export default class Modifiers extends React.Component {
     super(props);
     this.handleDayClick = this.handleDayClick.bind(this);
   }
-  handleDayClick(e, day, modifiers) {
+  handleDayClick(day, modifiers) {
     console.log('Day\'s CSS classes', e.target.classList.toString());
     console.log('Day\'s modifiers', modifiers);
   }

examples/src/examples/MultipleDays.js

@@ -10,7 +10,7 @@ export default class MultipleDays extends React.Component {
   state = {
     selectedDays: [],
   };
-  handleDayClick(e, day, { selected }) {
+  handleDayClick(day, { selected }) {
     const { selectedDays } = this.state;
     if (selected) {
       const selectedIndex = selectedDays.findIndex(selectedDay =>

examples/src/examples/Range.js

@@ -14,7 +14,7 @@ export default class Range extends React.Component {
     from: null,
     to: null,
   };
-  handleDayClick(e, day) {
+  handleDayClick(day) {
     const range = DateUtils.addDayToRange(day, this.state);
     this.setState(range);
   }

examples/src/examples/RangeAdvanced.js

@@ -18,7 +18,7 @@ export default class RangeAdvanced extends React.Component {
     to: null,
   };
 
-  handleDayClick(e, day) {
+  handleDayClick(day) {
     const { from, isSelectingLastDay } = this.state;
     // Enable day selection on mouse enter
     if (!isSelectingLastDay) {
@@ -47,7 +47,7 @@ export default class RangeAdvanced extends React.Component {
     }
   }
 
-  handleDayMouseEnter(e, day) {
+  handleDayMouseEnter(day) {
     const { isSelectingLastDay, from } = this.state;
     if (!isSelectingLastDay || (from && day < from) || DateUtils.isSameDay(day, from)) {
       return;

examples/src/examples/Restricted.js

@@ -18,7 +18,7 @@ export default function Restricted() {
         { before: start },
         { after: end },
       ] }
-      onDayClick={ (e, day, { disabled }) => {
+      onDayClick={ (day, { disabled }) => {
         if (!disabled) {
           console.log(day.toLocaleDateString());
         }

examples/src/examples/SelectableDay.js

@@ -10,7 +10,7 @@ export default class SelectableDay extends React.Component {
   state = {
     selectedDay: null,
   };
-  handleDayClick(e, day, { selected }) {
+  handleDayClick(day, { selected }) {
     this.setState({
       selectedDay: selected ? undefined : day,
     });

examples/src/examples/SimpleCalendar.js

@@ -4,5 +4,5 @@ import DayPicker from '../../../src';
 import '../../../src/style.css';
 
 export default function SimpleCalendar() {
-  return <DayPicker onDayClick={ (e, day) => window.alert(day) } />;
+  return <DayPicker onDayClick={ day => console.log(day) } />;
 }

src/Day.js

@@ -8,7 +8,7 @@ function handleEvent(handler, day, modifiers) {
   }
   return (e) => {
     e.persist();
-    handler(e, day, modifiers);
+    handler(day, modifiers, e);
   };
 }
 export default function Day({

src/DayPicker.js

@@ -296,7 +296,7 @@ export default class DayPicker extends Component {
     }
   }
 
-  handleDayKeyDown(e, day, modifiers) {
+  handleDayKeyDown(day, modifiers, e) {
     e.persist();
     switch (e.keyCode) {
       case keys.LEFT:
@@ -319,23 +319,23 @@ export default class DayPicker extends Component {
       case keys.SPACE:
         Helpers.cancelEvent(e);
         if (this.props.onDayClick) {
-          this.handleDayClick(e, day, modifiers);
+          this.handleDayClick(day, modifiers, e);
         }
         break;
       default:
         break;
     }
     if (this.props.onDayKeyDown) {
-      this.props.onDayKeyDown(e, day, modifiers);
+      this.props.onDayKeyDown(day, modifiers, e);
     }
   }
 
-  handleDayClick(e, day, modifiers) {
+  handleDayClick(day, modifiers, e) {
     e.persist();
     if (modifiers.outside) {
       this.handleOutsideDayClick(day);
     }
-    this.props.onDayClick(e, day, modifiers);
+    this.props.onDayClick(day, modifiers, e);
   }
 
   handleOutsideDayClick(day) {

src/Month.js

@@ -25,7 +25,7 @@ export default function Month({
     months,
     localeUtils,
     locale,
-    onClick: onCaptionClick ? e => onCaptionClick(e, month) : undefined,
+    onClick: onCaptionClick ? e => onCaptionClick(month, e) : undefined,
   };
   const weeks = getWeekArray(month, firstDayOfWeek, fixedWeeks);
   return (