Feature/expose view to labels

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 "›".|<ul><li>String: `"›"`</li><li>React element: `<NextIcon />`</li></ul>|
-|next2Label|Defines the content of the "next on higher level" button on the navigation pane. Defaults to "»". |<ul><li>String: `"»"`</li><li>React element: `<DoubleNextIcon />`</li></ul>|
+|nextLabel|Defines the content of the "next" button on the navigation pane. Defaults to "›".|<ul><li>String: `"›"`</li><li>React element: `<NextIcon />`</li><li>Function: `(view) => 'Next ' + view`</li></ul>|
+|next2Label|Defines the content of the "next on higher level" button on the navigation pane. Defaults to "»". |<ul><li>String: `"»"`</li><li>React element: `<DoubleNextIcon />`</li><li>Function: `(view) => 'Next ' + view`</li></ul>|
 |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 "‹".|<ul><li>String: `"‹"`</li><li>React element: `<PreviousIcon />`</li></ul>|
-|prev2Label|Defines the content of the "previous on higher level" button on the navigation pane. Defaults to "«".|<ul><li>String: `"«"`</li><li>React element: `<DoublePreviousIcon />`</li></ul>|
+|prevLabel|Defines the content of the "previous" button on the navigation pane. Defaults to "‹".|<ul><li>String: `"‹"`</li><li>React element: `<PreviousIcon />`</li><li>Function: `(view) => 'Prev ' + view`</li></ul>|
+|prev2Label|Defines the content of the "previous on higher level" button on the navigation pane. Defaults to "«".|<ul><li>String: `"«"`</li><li>React element: `<DoublePreviousIcon />`</li><li>Function: `(view) => 'Prev ' + view`</li></ul>|
 |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`|

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,

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}
           </button>
         )}
         <button
@@ -138,7 +138,7 @@ export default class Navigation extends Component {
           onClick={this.onClickPrevious}
           type="button"
         >
-          {prevLabel}
+          {typeof prevLabel === 'function' ? prevLabel(view) : prevLabel}
         </button>
         <button
           className="react-calendar__navigation__label"
@@ -158,7 +158,7 @@ export default class Navigation extends Component {
           onClick={this.onClickNext}
           type="button"
         >
-          {nextLabel}
+          {typeof nextLabel === 'function' ? nextLabel(view) : nextLabel}
         </button>
         {next2Label !== null && view !== 'century' && (
           <button
@@ -167,7 +167,7 @@ export default class Navigation extends Component {
             onClick={this.onClickNext2}
             type="button"
           >
-            {next2Label}
+            {typeof next2Label === 'function' ? next2Label(view) : next2Label}
           </button>
         )}
       </div>
@@ -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,

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(
+      <Navigation
+        activeStartDate={new Date(2017, 0, 1)}
+        drillUp={jest.fn()}
+        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}
+      />
+    );
+
+    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(