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.

Sign up for GitHub

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

Allow passing popperProps. Fixes #1525 #1526

Merged
merged 1 commit into from
Oct 25, 2018
Merged

Allow passing popperProps. Fixes #1525 #1526

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
101 changes: 52 additions & 49 deletions src/index.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import Calendar from './calendar';
import React from 'react';
import PropTypes from 'prop-types';
import PopperComponent, { popperPlacementPositions } from './popper_component';
import classnames from 'classnames';
import Calendar from "./calendar";
import React from "react";
import PropTypes from "prop-types";
import PopperComponent, { popperPlacementPositions } from "./popper_component";
import classnames from "classnames";
import {
newDate,
now,
Expand Down Expand Up @@ -34,13 +34,13 @@ import {
safeDateFormat,
getHightLightDaysMap,
getYear,
getMonth,
} from './date_utils';
import onClickOutside from 'react-onclickoutside';
getMonth
} from "./date_utils";
import onClickOutside from "react-onclickoutside";

export { default as CalendarContainer } from './calendar_container';
export { default as CalendarContainer } from "./calendar_container";

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

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

export default class DatePicker extends React.Component {
static propTypes = {
Expand All @@ -85,7 +85,7 @@ export default class DatePicker extends React.Component {
dayClassName: PropTypes.func,
disabled: PropTypes.bool,
disabledKeyboardNavigation: PropTypes.bool,
dropdownMode: PropTypes.oneOf(['scroll', 'select']).isRequired,
dropdownMode: PropTypes.oneOf(["scroll", "select"]).isRequired,
endDate: PropTypes.object,
excludeDates: PropTypes.array,
filterDate: PropTypes.func,
Expand Down Expand Up @@ -123,6 +123,7 @@ export default class DatePicker extends React.Component {
popperClassName: PropTypes.string, // <PopperComponent/> props
popperModifiers: PropTypes.object, // <PopperComponent/> props
popperPlacement: PropTypes.oneOf(popperPlacementPositions), // <PopperComponent/> props
popperProps: PropTypes.object,
preventOpenOnFocus: PropTypes.bool,
readOnly: PropTypes.bool,
required: PropTypes.bool,
Expand Down Expand Up @@ -168,12 +169,12 @@ export default class DatePicker extends React.Component {
static get defaultProps() {
return {
allowSameDay: false,
dateFormat: 'L',
dateFormatCalendar: 'MMMM YYYY',
dateFormat: "L",
dateFormatCalendar: "MMMM YYYY",
onChange() {},
disabled: false,
disabledKeyboardNavigation: false,
dropdownMode: 'scroll',
dropdownMode: "scroll",
onFocus() {},
onBlur() {},
onKeyDown() {},
Expand All @@ -190,9 +191,9 @@ export default class DatePicker extends React.Component {
shouldCloseOnSelect: true,
showTimeSelect: false,
timeIntervals: 30,
timeCaption: 'Time',
previousMonthButtonLabel: 'Previous Month',
nextMonthButtonLabel: 'Next month',
timeCaption: "Time",
previousMonthButtonLabel: "Previous Month",
nextMonthButtonLabel: "Next month"
};
}

Expand All @@ -210,7 +211,7 @@ export default class DatePicker extends React.Component {
}
if (prevProps.highlightDates !== this.props.highlightDates) {
this.setState({
highlightDates: getHightLightDaysMap(this.props.highlightDates),
highlightDates: getHightLightDaysMap(this.props.highlightDates)
});
}
if (
Expand Down Expand Up @@ -253,7 +254,7 @@ export default class DatePicker extends React.Component {
// transforming highlighted days (perhaps nested array)
// to flat Map for faster access in day.jsx
highlightDates: getHightLightDaysMap(this.props.highlightDates),
focused: false,
focused: false
};
};

Expand All @@ -276,7 +277,7 @@ export default class DatePicker extends React.Component {
open && this.state.open
? this.state.preSelection
: this.calcInitialState().preSelection,
lastPreSelectChange: PRESELECT_CHANGE_VIA_NAVIGATE,
lastPreSelectChange: PRESELECT_CHANGE_VIA_NAVIGATE
});
};
inputOk = () =>
Expand Down Expand Up @@ -335,15 +336,15 @@ export default class DatePicker extends React.Component {
if (this.props.onChangeRaw) {
this.props.onChangeRaw.apply(this, allArgs);
if (
typeof event.isDefaultPrevented !== 'function' ||
typeof event.isDefaultPrevented !== "function" ||
event.isDefaultPrevented()
) {
return;
}
}
this.setState({
inputValue: event.target.value,
lastPreSelectChange: PRESELECT_CHANGE_VIA_INPUT,
lastPreSelectChange: PRESELECT_CHANGE_VIA_INPUT
});
const date = parseDate(event.target.value, this.props);
if (date || !event.target.value) {
Expand All @@ -357,7 +358,7 @@ export default class DatePicker extends React.Component {
this.setState({ preventFocus: true }, () => {
this.preventFocusTimeout = setTimeout(
() => this.setState({ preventFocus: false }),
50,
50
);
return this.preventFocusTimeout;
});
Expand Down Expand Up @@ -396,12 +397,12 @@ export default class DatePicker extends React.Component {
changedDate = setTime(newDate(changedDate), {
hour: getHour(selected),
minute: getMinute(selected),
second: getSecond(selected),
second: getSecond(selected)
});
}
if (!this.props.inline) {
this.setState({
preSelection: changedDate,
preSelection: changedDate
});
}
}
Expand All @@ -417,15 +418,15 @@ export default class DatePicker extends React.Component {

setPreSelection = date => {
const isDateRangePresent =
typeof this.props.minDate !== 'undefined' &&
typeof this.props.maxDate !== 'undefined';
typeof this.props.minDate !== "undefined" &&
typeof this.props.maxDate !== "undefined";
const isValidDateSelection =
isDateRangePresent && date
? isDayInRange(date, this.props.minDate, this.props.maxDate)
: true;
if (isValidDateSelection) {
this.setState({
preSelection: date,
preSelection: date
});
}
};
Expand All @@ -436,11 +437,11 @@ export default class DatePicker extends React.Component {
: this.getPreSelection();
let changedDate = setTime(cloneDate(selected), {
hour: getHour(time),
minute: getMinute(time),
minute: getMinute(time)
});

this.setState({
preSelection: changedDate,
preSelection: changedDate
});

this.props.onChange(changedDate);
Expand All @@ -464,13 +465,13 @@ export default class DatePicker extends React.Component {
!this.props.inline &&
!this.props.preventOpenOnFocus
) {
if (eventKey === 'ArrowDown' || eventKey === 'ArrowUp') {
if (eventKey === "ArrowDown" || eventKey === "ArrowUp") {
this.onInputClick();
}
return;
}
const copy = newDate(this.state.preSelection);
if (eventKey === 'Enter') {
if (eventKey === "Enter") {
event.preventDefault();
if (
this.inputOk() &&
Expand All @@ -485,7 +486,7 @@ export default class DatePicker extends React.Component {

this.setOpen(false);
}
} else if (eventKey === 'Escape') {
} else if (eventKey === "Escape") {
event.preventDefault();

this.input.blur();
Expand All @@ -496,33 +497,33 @@ export default class DatePicker extends React.Component {
if (!this.inputOk()) {
this.props.onInputError({ code: 1, msg: INPUT_ERR_1 });
}
} else if (eventKey === 'Tab') {
} else if (eventKey === "Tab") {
this.setOpen(false);
} else if (!this.props.disabledKeyboardNavigation) {
let newSelection;
switch (eventKey) {
case 'ArrowLeft':
case "ArrowLeft":
newSelection = subtractDays(copy, 1);
break;
case 'ArrowRight':
case "ArrowRight":
newSelection = addDays(copy, 1);
break;
case 'ArrowUp':
case "ArrowUp":
newSelection = subtractWeeks(copy, 1);
break;
case 'ArrowDown':
case "ArrowDown":
newSelection = addWeeks(copy, 1);
break;
case 'PageUp':
case "PageUp":
newSelection = subtractMonths(copy, 1);
break;
case 'PageDown':
case "PageDown":
newSelection = addMonths(copy, 1);
break;
case 'Home':
case "Home":
newSelection = subtractYears(copy, 1);
break;
case 'End':
case "End":
newSelection = addYears(copy, 1);
break;
}
Expand Down Expand Up @@ -628,6 +629,7 @@ export default class DatePicker extends React.Component {
nextMonthButtonLabel={this.props.nextMonthButtonLabel}
disabledKeyboardNavigation={this.props.disabledKeyboardNavigation}
renderCustomHeader={this.props.renderCustomHeader}
popperProps={this.props.popperProps}
>
{this.props.children}
</WrappedCalendar>
Expand All @@ -640,11 +642,11 @@ export default class DatePicker extends React.Component {
});

const customInput = this.props.customInput || <input type="text" />;
const customInputRef = this.props.customInputRef || 'ref';
const customInputRef = this.props.customInputRef || "ref";
const inputValue =
typeof this.props.value === 'string'
typeof this.props.value === "string"
? this.props.value
: typeof this.state.inputValue === 'string'
: typeof this.state.inputValue === "string"
? this.state.inputValue
: safeDateFormat(this.props.selected, this.props);

Expand All @@ -668,7 +670,7 @@ export default class DatePicker extends React.Component {
title: this.props.title,
readOnly: this.props.readOnly,
required: this.props.required,
tabIndex: this.props.tabIndex,
tabIndex: this.props.tabIndex
});
};

Expand Down Expand Up @@ -725,10 +727,11 @@ export default class DatePicker extends React.Component {
popperContainer={this.props.popperContainer}
popperComponent={calendar}
popperPlacement={this.props.popperPlacement}
popperProps={this.props.popperProps}
/>
);
}
}

const PRESELECT_CHANGE_VIA_INPUT = 'input';
const PRESELECT_CHANGE_VIA_NAVIGATE = 'navigate';
const PRESELECT_CHANGE_VIA_INPUT = "input";
const PRESELECT_CHANGE_VIA_NAVIGATE = "navigate";
29 changes: 18 additions & 11 deletions src/popper_component.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export default class PopperComponent extends React.Component {
popperModifiers: PropTypes.object, // <datepicker/> props
popperPlacement: PropTypes.oneOf(popperPlacementPositions), // <datepicker/> props
popperContainer: PropTypes.func,
popperProps: PropTypes.object,
targetComponent: PropTypes.element
};

Expand All @@ -39,6 +40,7 @@ export default class PopperComponent extends React.Component {
boundariesElement: "viewport"
}
},
popperProps: {},
popperPlacement: "bottom-start"
};
}
Expand All @@ -50,6 +52,7 @@ export default class PopperComponent extends React.Component {
popperComponent,
popperModifiers,
popperPlacement,
popperProps,
targetComponent
} = this.props;

Expand All @@ -58,7 +61,11 @@ export default class PopperComponent extends React.Component {
if (!hidePopper) {
const classes = classnames("react-datepicker-popper", className);
popper = (
<Popper modifiers={popperModifiers} placement={popperPlacement}>
<Popper
modifiers={popperModifiers}
placement={popperPlacement}
{...popperProps}
>
{({ ref, style, placement, arrowProps }) => (
<div
{...{ ref, style }}
Expand All @@ -77,16 +84,16 @@ export default class PopperComponent extends React.Component {
}

return (
<Manager>
<Reference>
{({ ref }) => (
<div ref={ref} className="react-datepicker-wrapper">
{targetComponent}
</div>
)}
</Reference>
{popper}
</Manager>
<Manager>
<Reference>
{({ ref }) => (
<div ref={ref} className="react-datepicker-wrapper">
{targetComponent}
</div>
)}
</Reference>
{popper}
</Manager>
);
}
}