Skip to content

Commit 626ca16

Browse files
idanenmartijnrusschen
idanen
authored and
martijnrusschen
committed
Allow passing popperProps. Fixes Hacker0x01#1525 (Hacker0x01#1526)
1 parent f63972d commit 626ca16

File tree

2 files changed

+70
-60
lines changed

2 files changed

+70
-60
lines changed

‎src/index.jsx

Lines changed: 52 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import Calendar from './calendar';
2-
import React from 'react';
3-
import PropTypes from 'prop-types';
4-
import PopperComponent, { popperPlacementPositions } from './popper_component';
5-
import classnames from 'classnames';
1+
import Calendar from "./calendar";
2+
import React from "react";
3+
import PropTypes from "prop-types";
4+
import PopperComponent, { popperPlacementPositions } from "./popper_component";
5+
import classnames from "classnames";
66
import {
77
newDate,
88
now,
@@ -34,13 +34,13 @@ import {
3434
safeDateFormat,
3535
getHightLightDaysMap,
3636
getYear,
37-
getMonth,
38-
} from './date_utils';
39-
import onClickOutside from 'react-onclickoutside';
37+
getMonth
38+
} from "./date_utils";
39+
import onClickOutside from "react-onclickoutside";
4040

41-
export { default as CalendarContainer } from './calendar_container';
41+
export { default as CalendarContainer } from "./calendar_container";
4242

43-
const outsideClickIgnoreClass = 'react-datepicker-ignore-onclickoutside';
43+
const outsideClickIgnoreClass = "react-datepicker-ignore-onclickoutside";
4444
const WrappedCalendar = onClickOutside(Calendar);
4545

4646
// Compares dates year+month combinations
@@ -65,7 +65,7 @@ function hasSelectionChanged(date1, date2) {
6565
/**
6666
* General datepicker component.
6767
*/
68-
const INPUT_ERR_1 = 'Date input not valid.';
68+
const INPUT_ERR_1 = "Date input not valid.";
6969

7070
export default class DatePicker extends React.Component {
7171
static propTypes = {
@@ -85,7 +85,7 @@ export default class DatePicker extends React.Component {
8585
dayClassName: PropTypes.func,
8686
disabled: PropTypes.bool,
8787
disabledKeyboardNavigation: PropTypes.bool,
88-
dropdownMode: PropTypes.oneOf(['scroll', 'select']).isRequired,
88+
dropdownMode: PropTypes.oneOf(["scroll", "select"]).isRequired,
8989
endDate: PropTypes.object,
9090
excludeDates: PropTypes.array,
9191
filterDate: PropTypes.func,
@@ -123,6 +123,7 @@ export default class DatePicker extends React.Component {
123123
popperClassName: PropTypes.string, // <PopperComponent/> props
124124
popperModifiers: PropTypes.object, // <PopperComponent/> props
125125
popperPlacement: PropTypes.oneOf(popperPlacementPositions), // <PopperComponent/> props
126+
popperProps: PropTypes.object,
126127
preventOpenOnFocus: PropTypes.bool,
127128
readOnly: PropTypes.bool,
128129
required: PropTypes.bool,
@@ -168,12 +169,12 @@ export default class DatePicker extends React.Component {
168169
static get defaultProps() {
169170
return {
170171
allowSameDay: false,
171-
dateFormat: 'L',
172-
dateFormatCalendar: 'MMMM YYYY',
172+
dateFormat: "L",
173+
dateFormatCalendar: "MMMM YYYY",
173174
onChange() {},
174175
disabled: false,
175176
disabledKeyboardNavigation: false,
176-
dropdownMode: 'scroll',
177+
dropdownMode: "scroll",
177178
onFocus() {},
178179
onBlur() {},
179180
onKeyDown() {},
@@ -190,9 +191,9 @@ export default class DatePicker extends React.Component {
190191
shouldCloseOnSelect: true,
191192
showTimeSelect: false,
192193
timeIntervals: 30,
193-
timeCaption: 'Time',
194-
previousMonthButtonLabel: 'Previous Month',
195-
nextMonthButtonLabel: 'Next month',
194+
timeCaption: "Time",
195+
previousMonthButtonLabel: "Previous Month",
196+
nextMonthButtonLabel: "Next month"
196197
};
197198
}
198199

@@ -210,7 +211,7 @@ export default class DatePicker extends React.Component {
210211
}
211212
if (prevProps.highlightDates !== this.props.highlightDates) {
212213
this.setState({
213-
highlightDates: getHightLightDaysMap(this.props.highlightDates),
214+
highlightDates: getHightLightDaysMap(this.props.highlightDates)
214215
});
215216
}
216217
if (
@@ -253,7 +254,7 @@ export default class DatePicker extends React.Component {
253254
// transforming highlighted days (perhaps nested array)
254255
// to flat Map for faster access in day.jsx
255256
highlightDates: getHightLightDaysMap(this.props.highlightDates),
256-
focused: false,
257+
focused: false
257258
};
258259
};
259260

@@ -276,7 +277,7 @@ export default class DatePicker extends React.Component {
276277
open && this.state.open
277278
? this.state.preSelection
278279
: this.calcInitialState().preSelection,
279-
lastPreSelectChange: PRESELECT_CHANGE_VIA_NAVIGATE,
280+
lastPreSelectChange: PRESELECT_CHANGE_VIA_NAVIGATE
280281
});
281282
};
282283
inputOk = () =>
@@ -335,15 +336,15 @@ export default class DatePicker extends React.Component {
335336
if (this.props.onChangeRaw) {
336337
this.props.onChangeRaw.apply(this, allArgs);
337338
if (
338-
typeof event.isDefaultPrevented !== 'function' ||
339+
typeof event.isDefaultPrevented !== "function" ||
339340
event.isDefaultPrevented()
340341
) {
341342
return;
342343
}
343344
}
344345
this.setState({
345346
inputValue: event.target.value,
346-
lastPreSelectChange: PRESELECT_CHANGE_VIA_INPUT,
347+
lastPreSelectChange: PRESELECT_CHANGE_VIA_INPUT
347348
});
348349
const date = parseDate(event.target.value, this.props);
349350
if (date || !event.target.value) {
@@ -357,7 +358,7 @@ export default class DatePicker extends React.Component {
357358
this.setState({ preventFocus: true }, () => {
358359
this.preventFocusTimeout = setTimeout(
359360
() => this.setState({ preventFocus: false }),
360-
50,
361+
50
361362
);
362363
return this.preventFocusTimeout;
363364
});
@@ -396,12 +397,12 @@ export default class DatePicker extends React.Component {
396397
changedDate = setTime(newDate(changedDate), {
397398
hour: getHour(selected),
398399
minute: getMinute(selected),
399-
second: getSecond(selected),
400+
second: getSecond(selected)
400401
});
401402
}
402403
if (!this.props.inline) {
403404
this.setState({
404-
preSelection: changedDate,
405+
preSelection: changedDate
405406
});
406407
}
407408
}
@@ -417,15 +418,15 @@ export default class DatePicker extends React.Component {
417418

418419
setPreSelection = date => {
419420
const isDateRangePresent =
420-
typeof this.props.minDate !== 'undefined' &&
421-
typeof this.props.maxDate !== 'undefined';
421+
typeof this.props.minDate !== "undefined" &&
422+
typeof this.props.maxDate !== "undefined";
422423
const isValidDateSelection =
423424
isDateRangePresent && date
424425
? isDayInRange(date, this.props.minDate, this.props.maxDate)
425426
: true;
426427
if (isValidDateSelection) {
427428
this.setState({
428-
preSelection: date,
429+
preSelection: date
429430
});
430431
}
431432
};
@@ -436,11 +437,11 @@ export default class DatePicker extends React.Component {
436437
: this.getPreSelection();
437438
let changedDate = setTime(cloneDate(selected), {
438439
hour: getHour(time),
439-
minute: getMinute(time),
440+
minute: getMinute(time)
440441
});
441442

442443
this.setState({
443-
preSelection: changedDate,
444+
preSelection: changedDate
444445
});
445446

446447
this.props.onChange(changedDate);
@@ -464,13 +465,13 @@ export default class DatePicker extends React.Component {
464465
!this.props.inline &&
465466
!this.props.preventOpenOnFocus
466467
) {
467-
if (eventKey === 'ArrowDown' || eventKey === 'ArrowUp') {
468+
if (eventKey === "ArrowDown" || eventKey === "ArrowUp") {
468469
this.onInputClick();
469470
}
470471
return;
471472
}
472473
const copy = newDate(this.state.preSelection);
473-
if (eventKey === 'Enter') {
474+
if (eventKey === "Enter") {
474475
event.preventDefault();
475476
if (
476477
this.inputOk() &&
@@ -485,7 +486,7 @@ export default class DatePicker extends React.Component {
485486

486487
this.setOpen(false);
487488
}
488-
} else if (eventKey === 'Escape') {
489+
} else if (eventKey === "Escape") {
489490
event.preventDefault();
490491

491492
this.input.blur();
@@ -496,33 +497,33 @@ export default class DatePicker extends React.Component {
496497
if (!this.inputOk()) {
497498
this.props.onInputError({ code: 1, msg: INPUT_ERR_1 });
498499
}
499-
} else if (eventKey === 'Tab') {
500+
} else if (eventKey === "Tab") {
500501
this.setOpen(false);
501502
} else if (!this.props.disabledKeyboardNavigation) {
502503
let newSelection;
503504
switch (eventKey) {
504-
case 'ArrowLeft':
505+
case "ArrowLeft":
505506
newSelection = subtractDays(copy, 1);
506507
break;
507-
case 'ArrowRight':
508+
case "ArrowRight":
508509
newSelection = addDays(copy, 1);
509510
break;
510-
case 'ArrowUp':
511+
case "ArrowUp":
511512
newSelection = subtractWeeks(copy, 1);
512513
break;
513-
case 'ArrowDown':
514+
case "ArrowDown":
514515
newSelection = addWeeks(copy, 1);
515516
break;
516-
case 'PageUp':
517+
case "PageUp":
517518
newSelection = subtractMonths(copy, 1);
518519
break;
519-
case 'PageDown':
520+
case "PageDown":
520521
newSelection = addMonths(copy, 1);
521522
break;
522-
case 'Home':
523+
case "Home":
523524
newSelection = subtractYears(copy, 1);
524525
break;
525-
case 'End':
526+
case "End":
526527
newSelection = addYears(copy, 1);
527528
break;
528529
}
@@ -628,6 +629,7 @@ export default class DatePicker extends React.Component {
628629
nextMonthButtonLabel={this.props.nextMonthButtonLabel}
629630
disabledKeyboardNavigation={this.props.disabledKeyboardNavigation}
630631
renderCustomHeader={this.props.renderCustomHeader}
632+
popperProps={this.props.popperProps}
631633
>
632634
{this.props.children}
633635
</WrappedCalendar>
@@ -640,11 +642,11 @@ export default class DatePicker extends React.Component {
640642
});
641643

642644
const customInput = this.props.customInput || <input type="text" />;
643-
const customInputRef = this.props.customInputRef || 'ref';
645+
const customInputRef = this.props.customInputRef || "ref";
644646
const inputValue =
645-
typeof this.props.value === 'string'
647+
typeof this.props.value === "string"
646648
? this.props.value
647-
: typeof this.state.inputValue === 'string'
649+
: typeof this.state.inputValue === "string"
648650
? this.state.inputValue
649651
: safeDateFormat(this.props.selected, this.props);
650652

@@ -668,7 +670,7 @@ export default class DatePicker extends React.Component {
668670
title: this.props.title,
669671
readOnly: this.props.readOnly,
670672
required: this.props.required,
671-
tabIndex: this.props.tabIndex,
673+
tabIndex: this.props.tabIndex
672674
});
673675
};
674676

@@ -725,10 +727,11 @@ export default class DatePicker extends React.Component {
725727
popperContainer={this.props.popperContainer}
726728
popperComponent={calendar}
727729
popperPlacement={this.props.popperPlacement}
730+
popperProps={this.props.popperProps}
728731
/>
729732
);
730733
}
731734
}
732735

733-
const PRESELECT_CHANGE_VIA_INPUT = 'input';
734-
const PRESELECT_CHANGE_VIA_NAVIGATE = 'navigate';
736+
const PRESELECT_CHANGE_VIA_INPUT = "input";
737+
const PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";

‎src/popper_component.jsx

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ export default class PopperComponent extends React.Component {
2626
popperModifiers: PropTypes.object, // <datepicker/> props
2727
popperPlacement: PropTypes.oneOf(popperPlacementPositions), // <datepicker/> props
2828
popperContainer: PropTypes.func,
29+
popperProps: PropTypes.object,
2930
targetComponent: PropTypes.element
3031
};
3132

@@ -39,6 +40,7 @@ export default class PopperComponent extends React.Component {
3940
boundariesElement: "viewport"
4041
}
4142
},
43+
popperProps: {},
4244
popperPlacement: "bottom-start"
4345
};
4446
}
@@ -50,6 +52,7 @@ export default class PopperComponent extends React.Component {
5052
popperComponent,
5153
popperModifiers,
5254
popperPlacement,
55+
popperProps,
5356
targetComponent
5457
} = this.props;
5558

@@ -58,7 +61,11 @@ export default class PopperComponent extends React.Component {
5861
if (!hidePopper) {
5962
const classes = classnames("react-datepicker-popper", className);
6063
popper = (
61-
<Popper modifiers={popperModifiers} placement={popperPlacement}>
64+
<Popper
65+
modifiers={popperModifiers}
66+
placement={popperPlacement}
67+
{...popperProps}
68+
>
6269
{({ ref, style, placement, arrowProps }) => (
6370
<div
6471
{...{ ref, style }}
@@ -77,16 +84,16 @@ export default class PopperComponent extends React.Component {
7784
}
7885

7986
return (
80-
<Manager>
81-
<Reference>
82-
{({ ref }) => (
83-
<div ref={ref} className="react-datepicker-wrapper">
84-
{targetComponent}
85-
</div>
86-
)}
87-
</Reference>
88-
{popper}
89-
</Manager>
87+
<Manager>
88+
<Reference>
89+
{({ ref }) => (
90+
<div ref={ref} className="react-datepicker-wrapper">
91+
{targetComponent}
92+
</div>
93+
)}
94+
</Reference>
95+
{popper}
96+
</Manager>
9097
);
9198
}
9299
}

0 commit comments

Comments
 (0)