From a350e001907c1d68e770023af2a44ae211a0da81 Mon Sep 17 00:00:00 2001 From: boatkorachal Date: Tue, 7 Jun 2016 02:00:16 +0700 Subject: [PATCH 1/4] add navbarElement prop --- src/DayPicker.js | 44 +++++++++++++++++++++++++++++--------------- 1 file changed, 29 insertions(+), 15 deletions(-) diff --git a/src/DayPicker.js b/src/DayPicker.js index f50384259e..ac783c4f17 100644 --- a/src/DayPicker.js +++ b/src/DayPicker.js @@ -46,6 +46,7 @@ export default class DayPicker extends Component { renderDay: PropTypes.func, weekdayComponent: PropTypes.func, navbarComponent: PropTypes.func, + navbarElement: PropTypes.element, captionElement: PropTypes.element, @@ -330,7 +331,34 @@ export default class DayPicker extends Component { this.showPreviousMonth(); } } + renderNavbar() { + const { + locale, + localeUtils, + canChangeMonth, + onDayClick, + navbarComponent, + navbarElement, + ...attributes } = this.props; + if (!canChangeMonth) return null + const props = { + className: 'DayPicker-NavBar', + nextMonth: this.getNextNavigableMonth(), + previousMonth: this.getPreviousNavigableMonth(), + showPreviousButton: this.allowPreviousMonth(), + showNextButton: this.allowNextMonth(), + onNextClick: this.showNextMonth, + onPreviousClick: this.showPreviousMonth, + dir: attributes.dir, + locale, + localeUtils, + } + if (navbarElement) { + return React.cloneElement(navbarElement, props) + } + return React.createElement(navbarComponent, props) + } renderDayInMonth(day, month) { let dayModifiers = []; if (DateUtils.isSameDay(day, new Date())) { @@ -414,7 +442,6 @@ export default class DayPicker extends Component { localeUtils, canChangeMonth, onDayClick, - navbarComponent, ...attributes } = this.props; let className = `DayPicker DayPicker--${locale}`; @@ -434,20 +461,7 @@ export default class DayPicker extends Component { tabIndex={canChangeMonth && attributes.tabIndex} onKeyDown={this.handleKeyDown} > - {canChangeMonth && - React.createElement(navbarComponent, { - className: 'DayPicker-NavBar', - nextMonth: this.getNextNavigableMonth(), - previousMonth: this.getPreviousNavigableMonth(), - showPreviousButton: this.allowPreviousMonth(), - showNextButton: this.allowNextMonth(), - onNextClick: this.showNextMonth, - onPreviousClick: this.showPreviousMonth, - dir: attributes.dir, - locale, - localeUtils, - }) - } + {this.renderNavbar()} {this.renderMonths()} ); From 34bff9794e6ef8bb603164a2e0d364791ea17597 Mon Sep 17 00:00:00 2001 From: boatkorachal Date: Fri, 10 Jun 2016 14:26:12 +0700 Subject: [PATCH 2/4] add weekdayElement prop --- src/DayPicker.js | 12 ++++++------ src/Month.js | 9 ++++++++- src/Weekdays.js | 22 +++++++++++++--------- 3 files changed, 27 insertions(+), 16 deletions(-) diff --git a/src/DayPicker.js b/src/DayPicker.js index ac783c4f17..06fa520ebe 100644 --- a/src/DayPicker.js +++ b/src/DayPicker.js @@ -45,6 +45,7 @@ export default class DayPicker extends Component { renderDay: PropTypes.func, weekdayComponent: PropTypes.func, + weekdayElement: PropTypes.element, navbarComponent: PropTypes.func, navbarElement: PropTypes.element, @@ -336,12 +337,11 @@ export default class DayPicker extends Component { locale, localeUtils, canChangeMonth, - onDayClick, navbarComponent, navbarElement, ...attributes } = this.props; - if (!canChangeMonth) return null + if (!canChangeMonth) return null; const props = { className: 'DayPicker-NavBar', nextMonth: this.getNextNavigableMonth(), @@ -353,11 +353,11 @@ export default class DayPicker extends Component { dir: attributes.dir, locale, localeUtils, - } + }; if (navbarElement) { - return React.cloneElement(navbarElement, props) + return React.cloneElement(navbarElement, props); } - return React.createElement(navbarComponent, props) + return React.createElement(navbarComponent, props); } renderDayInMonth(day, month) { let dayModifiers = []; @@ -417,6 +417,7 @@ export default class DayPicker extends Component { wrapperClassName="DayPicker-Body" weekClassName="DayPicker-Week" weekdayComponent={this.props.weekdayComponent} + weekdayElement={this.props.weekdayElement} locale={this.props.locale} localeUtils={this.props.localeUtils} key={i} @@ -439,7 +440,6 @@ export default class DayPicker extends Component { render() { const { locale, - localeUtils, canChangeMonth, onDayClick, ...attributes } = this.props; diff --git a/src/Month.js b/src/Month.js index 2518492992..f17b45b69a 100644 --- a/src/Month.js +++ b/src/Month.js @@ -15,6 +15,7 @@ export default function Month({ wrapperClassName, weekClassName, weekdayComponent, + weekdayElement, fixedWeeks, }) { const captionProps = { @@ -27,7 +28,12 @@ export default function Month({ return (
{React.cloneElement(captionElement, captionProps)} - +
{ weeks.map((week, j) => @@ -52,5 +58,6 @@ Month.propTypes = { wrapperClassName: PropTypes.string, weekClassName: PropTypes.string, weekdayComponent: PropTypes.func.isRequired, + weekdayElement: PropTypes.element, fixedWeeks: PropTypes.bool, }; diff --git a/src/Weekdays.js b/src/Weekdays.js index a9835646ae..8c2a668968 100644 --- a/src/Weekdays.js +++ b/src/Weekdays.js @@ -5,18 +5,21 @@ export default function Weekdays({ locale, localeUtils, weekdayComponent, + weekdayElement, }) { const days = []; for (let i = 0; i < 7; i++) { - days.push( - React.createElement(weekdayComponent, { - key: i, - className: 'DayPicker-Weekday', - weekday: i, - localeUtils, - locale, - }) - ); + const elemProps = { + key: i, + className: 'DayPicker-Weekday', + weekday: i, + localeUtils, + locale, + }; + const elem = weekdayElement ? + React.cloneElement(weekdayElement, elemProps) : + React.createElement(weekdayComponent, elemProps); + days.push(elem); } return ( @@ -32,4 +35,5 @@ Weekdays.propTypes = { locale: PropTypes.string.isRequired, localeUtils: DayPickerPropTypes.localeUtils.isRequired, weekdayComponent: PropTypes.func.isRequired, + weekdayElement: PropTypes.element, }; From fd68e41a6378db8dd3d7f7564c0475461515b35d Mon Sep 17 00:00:00 2001 From: boatkorachal Date: Fri, 10 Jun 2016 16:31:27 +0700 Subject: [PATCH 3/4] update tests for navbarElement and weekdayElement --- test/DayPicker.js | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) diff --git a/test/DayPicker.js b/test/DayPicker.js index a999943c49..6f79cd864e 100644 --- a/test/DayPicker.js +++ b/test/DayPicker.js @@ -1,10 +1,13 @@ /* eslint-disable global-require, max-len */ import React from 'react'; import SyntheticEvent from 'react/lib/SyntheticEvent'; +import { isElement } from 'react-addons-test-utils'; import { shallow, mount, render } from 'enzyme'; import { expect } from 'chai'; import sinon, { spy } from 'sinon'; import DayPicker from '../src/DayPicker'; +import Navbar from '../src/Navbar'; +import Weekday from '../src/Weekday'; import keys from '../src/keys'; describe('', () => { @@ -110,6 +113,31 @@ describe('', () => { const wrapper = mount(); expect(wrapper.containsMatchingElement(caption)).to.be.true; }); + it('should render a custom navbar element', () => { + const CustomNavbar = ({ className }) =>
Navbar
; + const navbar = ; + const dayPicker = + const wrapper = mount(dayPicker); + + expect(isElement(dayPicker.props.navbarElement)).to.be.true; + expect(wrapper.containsMatchingElement(navbar)).to.be.true; + expect(wrapper.find('.DayPicker-NavBar')).to.exist; + expect(wrapper.find('.DayPicker-NavBar').at(0)).to.have.text('Navbar'); + }); + it('should render a custom weekday element', () => { + const CustomWeekday = ({ className, weekday }) =>
{ weekday }
+ const weekday = ; + const dayPicker = + const wrapper = mount(dayPicker); + + expect(isElement(dayPicker.props.weekdayElement)).to.be.true; + expect(wrapper.containsMatchingElement(weekday)).to.be.true; + expect(wrapper.find('.DayPicker-Weekday')).to.have.length(7); + const weekdayDoms = wrapper.find('.DayPicker-Weekday'); + weekdayDoms.forEach((_, i) => { + expect(weekdayDoms.at(i)).to.have.text(i); + }) + }); it('should not render the outside days', () => { const wrapper = mount(); expect(wrapper.find('.DayPicker-Day').at(0)).to.have.text(''); From 98782370dbad2d4567113fb24712c11ffaed5c4f Mon Sep 17 00:00:00 2001 From: boatkorachal Date: Fri, 10 Jun 2016 16:42:21 +0700 Subject: [PATCH 4/4] fix lint --- test/DayPicker.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/test/DayPicker.js b/test/DayPicker.js index 6f79cd864e..5ace7e53b6 100644 --- a/test/DayPicker.js +++ b/test/DayPicker.js @@ -1,13 +1,11 @@ /* eslint-disable global-require, max-len */ -import React from 'react'; +import React, { PropTypes } from 'react'; import SyntheticEvent from 'react/lib/SyntheticEvent'; import { isElement } from 'react-addons-test-utils'; import { shallow, mount, render } from 'enzyme'; import { expect } from 'chai'; import sinon, { spy } from 'sinon'; import DayPicker from '../src/DayPicker'; -import Navbar from '../src/Navbar'; -import Weekday from '../src/Weekday'; import keys from '../src/keys'; describe('', () => { @@ -114,9 +112,10 @@ describe('', () => { expect(wrapper.containsMatchingElement(caption)).to.be.true; }); it('should render a custom navbar element', () => { - const CustomNavbar = ({ className }) =>
Navbar
; + const CustomNavbar = ({ className }) =>
Navbar
; + CustomNavbar.propTypes = { className: PropTypes.string }; const navbar = ; - const dayPicker = + const dayPicker = ; const wrapper = mount(dayPicker); expect(isElement(dayPicker.props.navbarElement)).to.be.true; @@ -125,9 +124,10 @@ describe('', () => { expect(wrapper.find('.DayPicker-NavBar').at(0)).to.have.text('Navbar'); }); it('should render a custom weekday element', () => { - const CustomWeekday = ({ className, weekday }) =>
{ weekday }
+ const CustomWeekday = ({ className, weekday }) =>
{weekday}
; + CustomWeekday.propTypes = { className: PropTypes.string, weekday: PropTypes.number }; const weekday = ; - const dayPicker = + const dayPicker = ; const wrapper = mount(dayPicker); expect(isElement(dayPicker.props.weekdayElement)).to.be.true; @@ -136,7 +136,7 @@ describe('', () => { const weekdayDoms = wrapper.find('.DayPicker-Weekday'); weekdayDoms.forEach((_, i) => { expect(weekdayDoms.at(i)).to.have.text(i); - }) + }); }); it('should not render the outside days', () => { const wrapper = mount();