dash-core-components
Version:
Core component suite for Dash
188 lines (186 loc) • 9.49 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("react-dates/initialize");
var _reactDates = require("react-dates");
var _react = _interopRequireWildcard(require("react"));
var _uniqid = _interopRequireDefault(require("uniqid"));
var _DatePickerRange = require("../components/DatePickerRange.react");
var _convertToMoment3 = _interopRequireDefault(require("../utils/convertToMoment"));
var _LoadingElement = _interopRequireDefault(require("../utils/LoadingElement"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
class DatePickerRange extends _react.Component {
constructor(props) {
super(props);
this.propsToState = this.propsToState.bind(this);
this.onDatesChange = this.onDatesChange.bind(this);
this.isOutsideRange = this.isOutsideRange.bind(this);
this.state = {
focused: false,
start_date_id: props.start_date_id || (0, _uniqid.default)(),
end_date_id: props.end_date_id || (0, _uniqid.default)()
};
}
propsToState(newProps) {
var force = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
var state = {};
if (force || newProps.start_date !== this.props.start_date) {
state.start_date = newProps.start_date;
}
if (force || newProps.end_date !== this.props.end_date) {
state.end_date = newProps.end_date;
}
if (force || newProps.max_date_allowed !== this.props.max_date_allowed) {
state.max_date_allowed = (0, _convertToMoment3.default)(newProps, ['max_date_allowed']).max_date_allowed;
}
if (force || newProps.min_date_allowed !== this.props.min_date_allowed) {
state.min_date_allowed = (0, _convertToMoment3.default)(newProps, ['min_date_allowed']).min_date_allowed;
}
if (force || newProps.disabled_days !== this.props.disabled_days) {
state.disabled_days = (0, _convertToMoment3.default)(newProps, ['disabled_days']).disabled_days;
}
if (Object.keys(state).length) {
this.setState(state);
}
}
UNSAFE_componentWillReceiveProps(newProps) {
this.propsToState(newProps);
}
UNSAFE_componentWillMount() {
this.propsToState(this.props, true);
}
onDatesChange(_ref) {
var start_date = _ref.startDate,
end_date = _ref.endDate;
var _this$props = this.props,
setProps = _this$props.setProps,
updatemode = _this$props.updatemode,
clearable = _this$props.clearable;
var oldMomentDates = (0, _convertToMoment3.default)(this.state, ['start_date', 'end_date']);
if (start_date && !start_date.isSame(oldMomentDates.start_date)) {
if (updatemode === 'singledate') {
setProps({
start_date: start_date.format('YYYY-MM-DD')
});
} else {
this.setState({
start_date: start_date.format('YYYY-MM-DD')
});
}
}
if (end_date && !end_date.isSame(oldMomentDates.end_date)) {
if (updatemode === 'singledate') {
setProps({
end_date: end_date.format('YYYY-MM-DD')
});
} else if (updatemode === 'bothdates') {
setProps({
start_date: this.state.start_date,
end_date: end_date.format('YYYY-MM-DD')
});
}
}
if (clearable && !start_date && !end_date && (oldMomentDates.start_date !== start_date || oldMomentDates.end_date !== end_date)) {
setProps({
start_date: null,
end_date: null
});
}
}
isOutsideRange(date) {
return this.state.min_date_allowed && date.isBefore(this.state.min_date_allowed) || this.state.max_date_allowed && date.isAfter(this.state.max_date_allowed) || this.state.disabled_days && this.state.disabled_days.some(d => date.isSame(d, 'day'));
}
render() {
var focusedInput = this.state.focusedInput;
var _this$props2 = this.props,
calendar_orientation = _this$props2.calendar_orientation,
clearable = _this$props2.clearable,
day_size = _this$props2.day_size,
disabled = _this$props2.disabled,
display_format = _this$props2.display_format,
end_date_placeholder_text = _this$props2.end_date_placeholder_text,
first_day_of_week = _this$props2.first_day_of_week,
is_RTL = _this$props2.is_RTL,
minimum_nights = _this$props2.minimum_nights,
month_format = _this$props2.month_format,
number_of_months_shown = _this$props2.number_of_months_shown,
reopen_calendar_on_clear = _this$props2.reopen_calendar_on_clear,
show_outside_days = _this$props2.show_outside_days,
start_date_placeholder_text = _this$props2.start_date_placeholder_text,
stay_open_on_select = _this$props2.stay_open_on_select,
with_full_screen_portal = _this$props2.with_full_screen_portal,
with_portal = _this$props2.with_portal,
id = _this$props2.id,
style = _this$props2.style,
className = _this$props2.className,
start_date_id = _this$props2.start_date_id,
end_date_id = _this$props2.end_date_id;
var _convertToMoment = (0, _convertToMoment3.default)(this.props, ['initial_visible_month']),
initial_visible_month = _convertToMoment.initial_visible_month;
var _convertToMoment2 = (0, _convertToMoment3.default)(this.state, ['start_date', 'end_date']),
start_date = _convertToMoment2.start_date,
end_date = _convertToMoment2.end_date;
var verticalFlag = calendar_orientation !== 'vertical';
var DatePickerWrapperStyles = _objectSpread({
position: 'relative',
display: 'inline-block'
}, style);
// the height in px of the top part of the calendar (that holds
// the name of the month)
var baselineHeight = 145;
return /*#__PURE__*/_react.default.createElement(_LoadingElement.default, {
id: id,
style: DatePickerWrapperStyles,
className: className
}, /*#__PURE__*/_react.default.createElement(_reactDates.DateRangePicker, {
daySize: day_size,
disabled: disabled,
displayFormat: display_format,
enableOutsideDays: show_outside_days,
endDate: end_date,
endDatePlaceholderText: end_date_placeholder_text,
firstDayOfWeek: first_day_of_week,
focusedInput: focusedInput,
initialVisibleMonth: () => {
if (initial_visible_month) {
return initial_visible_month;
} else if (end_date && focusedInput === 'endDate') {
return end_date;
} else if (start_date && focusedInput === 'startDate') {
return start_date;
}
return start_date;
},
isOutsideRange: this.isOutsideRange,
isRTL: is_RTL,
keepOpenOnDateSelect: stay_open_on_select,
minimumNights: minimum_nights,
monthFormat: month_format,
numberOfMonths: number_of_months_shown,
onDatesChange: this.onDatesChange,
onFocusChange: focusedInput => this.setState({
focusedInput
}),
orientation: calendar_orientation,
reopenPickerOnClearDates: reopen_calendar_on_clear,
showClearDates: clearable,
startDate: start_date,
startDatePlaceholderText: start_date_placeholder_text,
withFullScreenPortal: with_full_screen_portal && verticalFlag,
withPortal: with_portal && verticalFlag,
startDateId: start_date_id || this.state.start_date_id,
endDateId: end_date_id || this.state.end_date_id,
verticalHeight: baselineHeight + day_size * 6 + 'px'
}));
}
}
exports.default = DatePickerRange;
DatePickerRange.propTypes = _DatePickerRange.propTypes;