Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Calendar caption with renderCalendarCaption #341

Merged
merged 2 commits into from
Mar 14, 2017

Conversation

nezed
Copy link
Contributor

@nezed nezed commented Feb 21, 2017

An excerpt from README:

Optionally you can provide calendar caption block renderer.

   renderCalendarInfo: PropTypes.func,

Usage example:

  const CustomInfo = ({day, format}) => (
    <div>
      ❕ Some useful info here
    </div>
  );

  <SingleDatePickerWrapper
    renderCalendarInfo={() => (
      <CustomInfo />
    )}
  />

Example screenshot:

2017-02-20 19 20 29

The renderCalendarInfo prop are universal, and available in DateRangePicker, SingleDatePicker and DayPicker.

As a part of #331

@coveralls
Copy link

Coverage Status

Coverage remained the same at 86.839% when pulling 53ba60e on kupibilet-frontend:calendar-caption into d58f6a9 on airbnb:master.

@ljharb ljharb added the semver-minor: new stuff Any feature or API addition. label Feb 21, 2017
Copy link
Collaborator

@majapw majapw left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi! Sorry for the delay in review. :) This looks great! I have one small nit, and then some questions about the naming of the prop in general. I'd love to get this in ASAP though.

README.md Outdated
@@ -136,6 +136,11 @@ By default, we do not show days from the previous month and the next month in th
initialVisibleMonth: PropTypes.func,
```

Optionally you can provide calendar caption block renderer.
```js
renderCalendarCaption: PropTypes.func,
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm concerned with the nomenclature of using caption here as we already have a <caption> dom element on each table inside each CalendarMonth component. I think using Calendar is also somewhat problematic as this is rendered on the DayPicker level not on the CalendarMonth level. Perhaps renaming it to renderDayPickerCaption or renderDayPickerAdditionalInfo might be a good idea? What do you think?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh this is totes my fault by having the Calendar props story isn't it. What if we called this renderCalendarAdditionalInfo or something? Maybe even just renderAdditionalInfo? God, I'm verbose.

Copy link
Contributor Author

@nezed nezed Mar 7, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@majapw Glad to see your response!
Maybe its better to this props renderCalendarInfo?

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes. Let's do that instead!

@@ -64,6 +64,15 @@ describe('DayPicker', () => {
});
});

describe('renderCaption', () => {
it('caption exists', () => {
const testCaptionClass = 'test-cation-container';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: test-caption-container

@coveralls
Copy link

Coverage Status

Coverage increased (+0.03%) to 82.177% when pulling 864c302 on kupibilet-frontend:calendar-caption into abd0b1b on airbnb:master.

@coveralls
Copy link

Coverage Status

Coverage increased (+0.03%) to 82.177% when pulling 864c302 on kupibilet-frontend:calendar-caption into abd0b1b on airbnb:master.

@coveralls
Copy link

Coverage Status

Coverage increased (+0.03%) to 82.177% when pulling 864c302 on kupibilet-frontend:calendar-caption into abd0b1b on airbnb:master.

@majapw majapw merged commit ff1c362 into react-dates:master Mar 14, 2017
@nezed nezed deleted the calendar-caption branch March 14, 2017 15:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
semver-minor: new stuff Any feature or API addition.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants