Merge branch 'navbar-component' of git://github.com/stanislav-ermakov…

…-roi/react-day-picker into stanislav-ermakov-roi-navbar-component

# Conflicts:
#	DayPicker.js
#	src/DayPicker.js
#	test/DayPicker.js

DayPicker.js

@@ -5,8 +5,10 @@ var DayPicker = require('./lib/DayPicker');
 var DateUtils = require('./lib/DateUtils');
 var LocaleUtils = require('./lib/LocaleUtils');
 var Weekday = require('./lib/Weekday');
+var Navbar = require('./lib/Navbar');
 
 module.exports = DayPicker.default || DayPicker;
 module.exports.DateUtils = DateUtils.default || DateUtils;
 module.exports.LocaleUtils = LocaleUtils.default || LocaleUtils;
 module.exports.WeekdayPropTypes = Weekday.WeekdayPropTypes;
+module.exports.NavbarPropTypes = Navbar.NavbarPropTypes;

docs/APIProps.md

@@ -107,6 +107,23 @@ Custom component to render weekday header. Passed props are:
 
 ---
 
+#### navbarComponent `Component`
+
+Custom component to render navbar. Passed props are:
+
+* `className: string` Wrapper class name.
+* `previousMonth: Date` Previous month.
+* `nextMonth: Date` Next month.
+* `showPreviousButton: bool` Indicates if previous button should be shown.
+* `showNextButton: bool` Indicates if next button should be shown.
+* `onPreviousClick: ()=> void` Previous button click handler.
+* `onNextClick: ()=> void` Next button click handler.
+* `dir: string` Direction 'ltr' or 'rtl'
+* `localeUtils: Object` The [localeUtils](#localeutils-object) object passed to the component.
+* `locale: String` The current [locale](#locale-string) passed to the component.
+
+---
+
 #### onDayClick  `(e: SyntethicEvent, day: Date, modifiers: Object) ⇒ void`
 
 Event handler when the user clicks on a day cell.

src/DayPicker.js

@@ -44,6 +44,7 @@ export default class DayPicker extends Component {
 
     renderDay: PropTypes.func,
     weekdayComponent: PropTypes.func,
+    navbarComponent: PropTypes.func,
 
     captionElement: PropTypes.element,
 
@@ -63,6 +64,7 @@ export default class DayPicker extends Component {
     reverseMonths: false,
     renderDay: day => day.getDate(),
     weekdayComponent: Weekday,
+    navbarComponent: Navbar,
     captionElement: <Caption />,
   };
 
@@ -105,6 +107,19 @@ export default class DayPicker extends Component {
     return this.refs.dayPicker.querySelectorAll('.DayPicker-Day:not(.DayPicker-Day--outside)');
   }
 
+  getNextNavMonth() {
+    const { currentMonth } = this.state;
+    const { numberOfMonths } = this.props;
+
+    return DateUtils.addMonths(currentMonth, numberOfMonths);
+  }
+
+  getPreviousNavMonth() {
+    const { currentMonth } = this.state;
+
+    return DateUtils.addMonths(currentMonth, -1);
+  }
+
   allowPreviousMonth() {
     const previousMonth = DateUtils.addMonths(this.state.currentMonth, -1);
     return this.allowMonth(previousMonth);
@@ -398,8 +413,10 @@ export default class DayPicker extends Component {
   render() {
     const {
       locale,
+      localeUtils,
       canChangeMonth,
       onDayClick,
+      navbarComponent,
     ...attributes } = this.props;
     let className = `DayPicker DayPicker--${locale}`;
 
@@ -420,13 +437,18 @@ export default class DayPicker extends Component {
         onKeyDown={this.handleKeyDown}
       >
         {canChangeMonth &&
-          <Navbar
-            showPreviousButton={this.allowPreviousMonth()}
-            showNextButton={this.allowNextMonth()}
-            onNextClick={this.showNextMonth}
-            onPreviousClick={this.showPreviousMonth}
-            dir={attributes.dir}
-          />
+          React.createElement(navbarComponent, {
+            className: 'DayPicker-NavBar',
+            nextMonth: this.getNextNavMonth(),
+            previousMonth: this.getPreviousNavMonth(),
+            showPreviousButton: this.allowPreviousMonth(),
+            showNextButton: this.allowNextMonth(),
+            onNextClick: this.showNextMonth,
+            onPreviousClick: this.showPreviousMonth,
+            dir: attributes.dir,
+            locale,
+            localeUtils,
+          })
         }
         {this.renderMonths()}
       </div>

src/Navbar.js

@@ -1,8 +1,10 @@
 import React, { PropTypes } from 'react';
+import DayPickerPropTypes from './PropTypes';
 
 const buttonBaseClass = 'DayPicker-NavButton DayPicker-NavButton';
 
 export default function Navbar({
+  className,
   showPreviousButton,
   showNextButton,
   onPreviousClick,
@@ -29,21 +31,29 @@ export default function Navbar({
     />;
 
   return (
-    <div className="DayPicker-NavBar">
+    <div className={className}>
       {dir === 'rtl' ? [nextButton, previousButton] : [previousButton, nextButton]}
     </div>
   );
 }
 
-Navbar.propTypes = {
+export const NavbarPropTypes = {
+  className: PropTypes.string,
+  nextMonth: PropTypes.instanceOf(Date),
+  previousMonth: PropTypes.instanceOf(Date),
   showPreviousButton: PropTypes.bool,
   showNextButton: PropTypes.bool,
   onPreviousClick: PropTypes.func,
   onNextClick: PropTypes.func,
   dir: PropTypes.string,
+  locale: PropTypes.string,
+  localeUtils: DayPickerPropTypes.localeUtils,
 };
 
+Navbar.propTypes = NavbarPropTypes;
+
 Navbar.defaultProps = {
+  className: 'DayPicker-NavBar',
   dir: 'ltr',
   showPreviousButton: true,
   showNextButton: true,

test/DayPicker.js

@@ -26,6 +26,7 @@ describe('<DayPicker />', () => {
       expect(dayPicker.props.reverseMonths).to.equal(false);
       expect(dayPicker.props.renderDay).to.be.a('Function');
       expect(dayPicker.props.weekdayComponent).to.be.a('Function');
+      expect(dayPicker.props.navbarComponent).to.be.a('Function');
       expect(dayPicker.props.tabIndex).to.equal(0);
     });
     it('should have the DayPicker classes', () => {

test/Navbar.js

@@ -13,7 +13,7 @@ describe('<Navbar />', () => {
     expect(navbar.props.showNextButton).to.be.true;
   });
   it('should have the DayPicker classes', () => {
-    const wrapper = shallow(<Navbar />);
+    const wrapper = shallow(<Navbar className="DayPicker-NavBar" />);
     expect(wrapper).to.have.className('DayPicker-NavBar');
   });
   it('should have the navigation buttons classes', () => {