Add a overlayWrapper prop to DayPicker for greater customization.

[wldcordeiro]

This PR tries to address #477 by adding a overlayWrapper prop that allows you to customize the component wrapping the DayPicker within DayPickerInput

[codecov]

Codecov Report

Merging #486 into master will not change coverage.
The diff coverage is 100%.

@@          Coverage Diff          @@
##           master   #486   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          15     15           
  Lines         531    534    +3     
  Branches      109    109           
=====================================
+ Hits          531    534    +3

Impacted Files	Coverage Δ
src/DayPickerInput.js	100% <100%> (ø)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update efd1d6f...8f98e98. Read the comment docs.

[gpbl]

🤔 what if the calendar should be placed after the containerProps.children?

[gpbl]

Hi, thanks for this PR 🙏

I was thinking to add a new prop to DayPickerInput, not implementing it into DayPicker.

Indeed, wrapping DayPicker inside a component can be already done without using the containerProps' children:

<MyWrapper>
   <DayPicker />
</MyWrapper>

What we need is a different wrapper for the overlay, here where we are rendering the DayPicker in DayPickerInput.js:

react-day-picker/src/DayPickerInput.js

Lines 267 to 277 in efd1d6f

	<div className={this.props.classNames.overlay}>
	<DayPicker
	ref={el => (this.daypicker = el)}
	fixedWeeks
	{...this.props.dayPickerProps}
	month={this.state.month}
	selectedDays={selectedDay}
	onDayClick={this.handleDayClick}
	numberOfMonths={1}
	/>
	</div>

For example, I was thinking the prop to be a function and working this way:

<DayPickerInput
  wrapperComponent={ ({children, ...props)} => 
     <div {...props}>
        <p>This is placed before the calendar</p>
        <div>{ children }</div> /* this will render the calendar */
        <p>This is placed after the calendar</p>
     </div>
  }
/>

What do you think?

PS. Maybe it's better call the prop overlayWrapper instead?

[wldcordeiro]

Updated the PR, the prop is now called overlayWrapper and it's on the DayPickerInput. I've added a basic test along with a documentation entry for it.

[gpbl]

Hey, thanks for this – I've fixed some parts in #563. Sorry for the delay...

[gpbl]

Thanks @wldcordeiro for your help! I’ve published the new prop in the v7.