From ddad97bd401abe8db57d8bfc4915d6170ce7157c Mon Sep 17 00:00:00 2001 From: Brian Jenkins Date: Tue, 23 Oct 2018 07:38:32 -0700 Subject: [PATCH 1/4] Expose view to labels --- src/Calendar.jsx | 8 ++++---- src/Calendar/Navigation.jsx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/Calendar.jsx b/src/Calendar.jsx index 1c6cb059..00e3c8e4 100644 --- a/src/Calendar.jsx +++ b/src/Calendar.jsx @@ -532,8 +532,8 @@ Calendar.propTypes = { minDate: isMinDate, minDetail: PropTypes.oneOf(allViews), navigationLabel: PropTypes.func, - next2Label: PropTypes.node, - nextLabel: PropTypes.node, + next2Label: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), + nextLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), onActiveDateChange: PropTypes.func, onChange: PropTypes.func, onClickDay: PropTypes.func, @@ -543,8 +543,8 @@ Calendar.propTypes = { onClickYear: PropTypes.func, onDrillDown: PropTypes.func, onDrillUp: PropTypes.func, - prev2Label: PropTypes.node, - prevLabel: PropTypes.node, + prev2Label: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), + prevLabel: PropTypes.oneOfType([PropTypes.node, PropTypes.func]), renderChildren: PropTypes.func, // For backwards compatibility returnValue: PropTypes.oneOf(['start', 'end', 'range']), selectRange: PropTypes.bool, diff --git a/src/Calendar/Navigation.jsx b/src/Calendar/Navigation.jsx index c2506444..bf692a44 100644 --- a/src/Calendar/Navigation.jsx +++ b/src/Calendar/Navigation.jsx @@ -129,7 +129,7 @@ export default class Navigation extends Component { onClick={this.onClickPrevious2} type="button" > - {prev2Label} + {typeof prev2Label === 'function' ? prev2Label({ view }) : prev2Label} )} {next2Label !== null && view !== 'century' && ( )} From 51d058b2296bdcbe4139e8f203a4fe8fb4361277 Mon Sep 17 00:00:00 2001 From: Brian Jenkins Date: Tue, 23 Oct 2018 07:50:48 -0700 Subject: [PATCH 2/4] Update tests fix proptypes --- src/Calendar/Navigation.jsx | 8 ++++---- src/Calendar/__tests__/Navigation.jsx | 23 +++++++++++++++++++++++ 2 files changed, 27 insertions(+), 4 deletions(-) diff --git a/src/Calendar/Navigation.jsx b/src/Calendar/Navigation.jsx index bf692a44..2a9b0dd9 100644 --- a/src/Calendar/Navigation.jsx +++ b/src/Calendar/Navigation.jsx @@ -190,11 +190,11 @@ Navigation.propTypes = { locale: PropTypes.string, maxDate: PropTypes.instanceOf(Date), minDate: PropTypes.instanceOf(Date), - next2Label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), - nextLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + next2Label: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]), + nextLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]), navigationLabel: PropTypes.func, - prev2Label: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), - prevLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node]), + prev2Label: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]), + prevLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.node, PropTypes.func]), setActiveStartDate: PropTypes.func.isRequired, view: isView.isRequired, views: isViews.isRequired, diff --git a/src/Calendar/__tests__/Navigation.jsx b/src/Calendar/__tests__/Navigation.jsx index d1b5ce74..1c1eb498 100644 --- a/src/Calendar/__tests__/Navigation.jsx +++ b/src/Calendar/__tests__/Navigation.jsx @@ -139,6 +139,29 @@ describe('Navigation', () => { expect(next2.props.children).toBe('next2Label'); }); + it('displays proper user-defined labels with views on prev2, prev, next and next2 buttons', () => { + const component = shallow( + `next${view}2`} + nextLabel={({ view }) => `next${view}`} + prev2Label={({ view }) => `prev${view}2`} + prevLabel={({ view }) => `prev${view}`} + setActiveStartDate={jest.fn()} + view="month" + views={allViews} + /> + ); + + const [prev2, prev, , next, next2] = component.children(); + + expect(prev2.props.children).toBe('prevmonth2'); + expect(prev.props.children).toBe('prevmonth'); + expect(next.props.children).toBe('nextmonth'); + expect(next2.props.children).toBe('nextmonth2'); + }); + it('calls drillUp function on drill up button click', () => { const drillUpFn = jest.fn(); const component = shallow( From bb2175b887b7f3846a5a83a7919638cce61b047f Mon Sep 17 00:00:00 2001 From: Brian Jenkins Date: Tue, 23 Oct 2018 07:58:44 -0700 Subject: [PATCH 3/4] Update readme --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 853a7757..71090f7e 100644 --- a/README.md +++ b/README.md @@ -96,8 +96,8 @@ Displays a complete, interactive calendar. |minDate|Defines minimum date that the user can select. Periods partially overlapped by minDate will also be selectable, although react-calendar will ensure that no earlier date is selected.|Date: `new Date()`| |minDetail|Defines the least detailed view that the user shall see. Can be "month", "year", "decade" or "century". Defaults to "century".|`"century"`| |navigationLabel|Defines the content of a label rendered on calendar navigation bar.|``({ date, view, label }) => `Current view: ${view}, date: ${date.toLocaleDateString()}` ``| -|nextLabel|Defines the content of the "next" button on the navigation pane. Defaults to "›".|
  • String: `"›"`
  • React element: ``
| -|next2Label|Defines the content of the "next on higher level" button on the navigation pane. Defaults to "»". |
  • String: `"»"`
  • React element: ``
| +|nextLabel|Defines the content of the "next" button on the navigation pane. Defaults to "›".|
  • String: `"›"`
  • React element: ``
  • Function: `(view) => 'Next ' + view`
| +|next2Label|Defines the content of the "next on higher level" button on the navigation pane. Defaults to "»". |
  • String: `"»"`
  • React element: ``
  • Function: `(view) => 'Next ' + view`
| |onActiveDateChange|Function called when the user navigates from one view to another using previous/next button.|`({ activeStartDate, view }) => alert('Changed view to: ', activeStartDate, view)`| |onChange|Function called when the user clicks an item (day on month view, month on year view and so on) on the most detailed view available.|`(value) => alert('New date is: ', value)`| |onClickDay|Function called when the user clicks a day.|`(value) => alert('Clicked day: ', value)`| @@ -107,8 +107,8 @@ Displays a complete, interactive calendar. |onClickYear|Function called when the user clicks a year.|`(value) => alert('Clicked year: ', value)`| |onDrillDown|Function called when the user drills down by clicking a tile.|`({ activeStartDate, view }) => alert('Drilled down to: ', activeStartDate, view)`| |onDrillUp|Function called when the user drills up by clicking drill up button.|`({ activeStartDate, view }) => alert('Drilled up to: ', activeStartDate, view)`| -|prevLabel|Defines the content of the "previous" button on the navigation pane. Defaults to "‹".|
  • String: `"‹"`
  • React element: ``
| -|prev2Label|Defines the content of the "previous on higher level" button on the navigation pane. Defaults to "«".|
  • String: `"«"`
  • React element: ``
| +|prevLabel|Defines the content of the "previous" button on the navigation pane. Defaults to "‹".|
  • String: `"‹"`
  • React element: ``
  • Function: `(view) => 'Prev ' + view`
| +|prev2Label|Defines the content of the "previous on higher level" button on the navigation pane. Defaults to "«".|
  • String: `"«"`
  • React element: ``
  • Function: `(view) => 'Prev ' + view`
| |returnValue|Defines which dates shall be passed by the calendar to the onChange function and onClick{Period} functions. Can be "start", "end" or "range". The latter will cause an array with start and end values to be passed. Defaults to "start".|`"range"`| |showNavigation|Defines whether a navigation bar with arrows and title shall be rendered. Defaults to true.|`false`| |showFixedNumberOfWeeks|Defines whether to always show fixed number of weeks (6). Forces showNeighboringMonth prop to be true. Defaults to false.|`true`| From 850c46f1630681259899ffc8b28a86835b66a420 Mon Sep 17 00:00:00 2001 From: Brian Jenkins Date: Tue, 23 Oct 2018 07:58:56 -0700 Subject: [PATCH 4/4] Non object argument --- src/Calendar/Navigation.jsx | 8 ++++---- src/Calendar/__tests__/Navigation.jsx | 8 ++++---- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/Calendar/Navigation.jsx b/src/Calendar/Navigation.jsx index 2a9b0dd9..c50cb531 100644 --- a/src/Calendar/Navigation.jsx +++ b/src/Calendar/Navigation.jsx @@ -129,7 +129,7 @@ export default class Navigation extends Component { onClick={this.onClickPrevious2} type="button" > - {typeof prev2Label === 'function' ? prev2Label({ view }) : prev2Label} + {typeof prev2Label === 'function' ? prev2Label(view) : prev2Label} )} {next2Label !== null && view !== 'century' && ( )} diff --git a/src/Calendar/__tests__/Navigation.jsx b/src/Calendar/__tests__/Navigation.jsx index 1c1eb498..75ace648 100644 --- a/src/Calendar/__tests__/Navigation.jsx +++ b/src/Calendar/__tests__/Navigation.jsx @@ -144,10 +144,10 @@ describe('Navigation', () => { `next${view}2`} - nextLabel={({ view }) => `next${view}`} - prev2Label={({ view }) => `prev${view}2`} - prevLabel={({ view }) => `prev${view}`} + next2Label={view => `next${view}2`} + nextLabel={view => `next${view}`} + prev2Label={view => `prev${view}2`} + prevLabel={view => `prev${view}`} setActiveStartDate={jest.fn()} view="month" views={allViews}