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

Jump to bottom

Add support for shifting endDateOffset if offset range includes blocked days #2137

Open
wants to merge 4 commits into
base: master
Choose a base branch
from
Open

Add support for shifting endDateOffset if offset range includes blocked days #2137

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
870b5fa
React-dates enable support for building
karan9 Jun 29, 2022
89e8810
dates: add support for shifting offset for disabled dates
karan9 Jul 24, 2021
6542bf0
Fix Calendar offset delta
karan9 Jun 29, 2022
81d5d32
Enable the updated calendar
karan9 Jun 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
6 changes: 3 additions & 3 deletions .gitignore
View file
Open in desktop
Expand Up @@ -33,9 +33,9 @@ node_modules
.node_repl_history

# build folder
lib
esm
test-build
# lib
# esm
# test-build
.idea

# gh-pages
Expand Down
342 changes: 342 additions & 0 deletions esm/components/CalendarDay.js
View file
Open in desktop
@@ -0,0 +1,342 @@
import _extends from "@babel/runtime/helpers/esm/extends";
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
import shallowEqual from "enzyme-shallow-equal";

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }

import React from 'react';
import PropTypes from 'prop-types';
import momentPropTypes from 'react-moment-proptypes';
import { forbidExtraProps, nonNegativeInteger } from 'airbnb-prop-types';
import { withStyles, withStylesPropTypes } from 'react-with-styles';
import moment from 'moment';
import raf from 'raf';
import { CalendarDayPhrases } from '../defaultPhrases';
import getPhrasePropTypes from '../utils/getPhrasePropTypes';
import getCalendarDaySettings from '../utils/getCalendarDaySettings';
import ModifiersShape from '../shapes/ModifiersShape';
import { DAY_SIZE } from '../constants';
var propTypes = process.env.NODE_ENV !== "production" ? forbidExtraProps(_objectSpread(_objectSpread({}, withStylesPropTypes), {}, {
day: momentPropTypes.momentObj,
daySize: nonNegativeInteger,
isOutsideDay: PropTypes.bool,
modifiers: ModifiersShape,
isFocused: PropTypes.bool,
tabIndex: PropTypes.oneOf([0, -1]),
onDayClick: PropTypes.func,
onDayMouseEnter: PropTypes.func,
onDayMouseLeave: PropTypes.func,
renderDayContents: PropTypes.func,
ariaLabelFormat: PropTypes.string,
// internationalization
phrases: PropTypes.shape(getPhrasePropTypes(CalendarDayPhrases))
})) : {};
var defaultProps = {
day: moment(),
daySize: DAY_SIZE,
isOutsideDay: false,
modifiers: new Set(),
isFocused: false,
tabIndex: -1,
onDayClick: function onDayClick() {},
onDayMouseEnter: function onDayMouseEnter() {},
onDayMouseLeave: function onDayMouseLeave() {},
renderDayContents: null,
ariaLabelFormat: 'dddd, LL',
// internationalization
phrases: CalendarDayPhrases
};

var CalendarDay = /*#__PURE__*/function (_ref2, _ref) {
_inheritsLoose(CalendarDay, _ref2);

var _proto = CalendarDay.prototype;

_proto[_ref] = function (nextProps, nextState) {
return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
};

function CalendarDay() {
var _this;

for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}

_this = _ref2.call.apply(_ref2, [this].concat(args)) || this;
_this.setButtonRef = _this.setButtonRef.bind(_assertThisInitialized(_this));
return _this;
}

_proto.componentDidUpdate = function componentDidUpdate(prevProps) {
var _this2 = this;

var _this$props = this.props,
isFocused = _this$props.isFocused,
tabIndex = _this$props.tabIndex;

if (tabIndex === 0) {
if (isFocused || tabIndex !== prevProps.tabIndex) {
raf(function () {
if (_this2.buttonRef) {
_this2.buttonRef.focus();
}
});
}
}
};

_proto.onDayClick = function onDayClick(day, e) {
var onDayClick = this.props.onDayClick;
onDayClick(day, e);
};

_proto.onDayMouseEnter = function onDayMouseEnter(day, e) {
var onDayMouseEnter = this.props.onDayMouseEnter;
onDayMouseEnter(day, e);
};

_proto.onDayMouseLeave = function onDayMouseLeave(day, e) {
var onDayMouseLeave = this.props.onDayMouseLeave;
onDayMouseLeave(day, e);
};

_proto.onKeyDown = function onKeyDown(day, e) {
var onDayClick = this.props.onDayClick;
var key = e.key;

if (key === 'Enter' || key === ' ') {
onDayClick(day, e);
}
};

_proto.setButtonRef = function setButtonRef(ref) {
this.buttonRef = ref;
};

_proto.render = function render() {
var _this3 = this;

var _this$props2 = this.props,
day = _this$props2.day,
ariaLabelFormat = _this$props2.ariaLabelFormat,
daySize = _this$props2.daySize,
isOutsideDay = _this$props2.isOutsideDay,
modifiers = _this$props2.modifiers,
renderDayContents = _this$props2.renderDayContents,
tabIndex = _this$props2.tabIndex,
css = _this$props2.css,
styles = _this$props2.styles,
phrases = _this$props2.phrases;
if (!day) return /*#__PURE__*/React.createElement("td", null);

var _getCalendarDaySettin = getCalendarDaySettings(day, ariaLabelFormat, daySize, modifiers, phrases),
daySizeStyles = _getCalendarDaySettin.daySizeStyles,
useDefaultCursor = _getCalendarDaySettin.useDefaultCursor,
selected = _getCalendarDaySettin.selected,
hoveredSpan = _getCalendarDaySettin.hoveredSpan,
isOutsideRange = _getCalendarDaySettin.isOutsideRange,
ariaLabel = _getCalendarDaySettin.ariaLabel;

return /*#__PURE__*/React.createElement("td", _extends({}, css(styles.CalendarDay, useDefaultCursor && styles.CalendarDay__defaultCursor, styles.CalendarDay__default, isOutsideDay && styles.CalendarDay__outside, modifiers.has('today') && styles.CalendarDay__today, modifiers.has('first-day-of-week') && styles.CalendarDay__firstDayOfWeek, modifiers.has('last-day-of-week') && styles.CalendarDay__lastDayOfWeek, modifiers.has('hovered-offset') && styles.CalendarDay__hovered_offset, modifiers.has('hovered-start-first-possible-end') && styles.CalendarDay__hovered_start_first_possible_end, modifiers.has('hovered-start-blocked-minimum-nights') && styles.CalendarDay__hovered_start_blocked_min_nights, modifiers.has('highlighted-calendar') && styles.CalendarDay__highlighted_calendar, modifiers.has('blocked-minimum-nights') && styles.CalendarDay__blocked_minimum_nights, modifiers.has('blocked-calendar') && styles.CalendarDay__blocked_calendar, hoveredSpan && styles.CalendarDay__hovered_span, modifiers.has('after-hovered-start') && styles.CalendarDay__after_hovered_start, modifiers.has('selected-span') && styles.CalendarDay__selected_span, modifiers.has('selected-start') && styles.CalendarDay__selected_start, modifiers.has('selected-end') && styles.CalendarDay__selected_end, selected && !modifiers.has('selected-span') && styles.CalendarDay__selected, modifiers.has('before-hovered-end') && styles.CalendarDay__before_hovered_end, modifiers.has('no-selected-start-before-selected-end') && styles.CalendarDay__no_selected_start_before_selected_end, modifiers.has('selected-start-in-hovered-span') && styles.CalendarDay__selected_start_in_hovered_span, modifiers.has('selected-end-in-hovered-span') && styles.CalendarDay__selected_end_in_hovered_span, modifiers.has('selected-start-no-selected-end') && styles.CalendarDay__selected_start_no_selected_end, modifiers.has('selected-end-no-selected-start') && styles.CalendarDay__selected_end_no_selected_start, isOutsideRange && styles.CalendarDay__blocked_out_of_range, daySizeStyles), {
role: "button" // eslint-disable-line jsx-a11y/no-noninteractive-element-to-interactive-role
,
ref: this.setButtonRef,
"aria-disabled": modifiers.has('blocked')
}, modifiers.has('today') ? {
'aria-current': 'date'
} : {}, {
"aria-label": ariaLabel,
onMouseEnter: function onMouseEnter(e) {
_this3.onDayMouseEnter(day, e);
},
onMouseLeave: function onMouseLeave(e) {
_this3.onDayMouseLeave(day, e);
},
onMouseUp: function onMouseUp(e) {
e.currentTarget.blur();
},
onClick: function onClick(e) {
_this3.onDayClick(day, e);
},
onKeyDown: function onKeyDown(e) {
_this3.onKeyDown(day, e);
},
tabIndex: tabIndex
}), renderDayContents ? renderDayContents(day, modifiers) : day.format('D'));
};

return CalendarDay;
}(React.PureComponent || React.Component, !React.PureComponent && "shouldComponentUpdate");

CalendarDay.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
CalendarDay.defaultProps = defaultProps;
export { CalendarDay as PureCalendarDay };
export default withStyles(function (_ref3) {
var _ref3$reactDates = _ref3.reactDates,
color = _ref3$reactDates.color,
font = _ref3$reactDates.font;
return {
CalendarDay: {
boxSizing: 'border-box',
cursor: 'pointer',
fontSize: font.size,
textAlign: 'center',
':active': {
outline: 0
}
},
CalendarDay__defaultCursor: {
cursor: 'default'
},
CalendarDay__default: {
border: "1px solid ".concat(color.core.borderLight),
color: color.text,
background: color.background,
':hover': {
background: color.core.borderLight,
border: "1px solid ".concat(color.core.borderLight),
color: 'inherit'
}
},
CalendarDay__hovered_offset: {
background: color.core.borderBright,
border: "1px double ".concat(color.core.borderLight),
color: 'inherit'
},
CalendarDay__outside: {
border: 0,
background: color.outside.backgroundColor,
color: color.outside.color,
':hover': {
border: 0
}
},
CalendarDay__blocked_minimum_nights: {
background: color.minimumNights.backgroundColor,
border: "1px solid ".concat(color.minimumNights.borderColor),
color: color.minimumNights.color,
':hover': {
background: color.minimumNights.backgroundColor_hover,
color: color.minimumNights.color_active
},
':active': {
background: color.minimumNights.backgroundColor_active,
color: color.minimumNights.color_active
}
},
CalendarDay__highlighted_calendar: {
background: color.highlighted.backgroundColor,
color: color.highlighted.color,
':hover': {
background: color.highlighted.backgroundColor_hover,
color: color.highlighted.color_active
},
':active': {
background: color.highlighted.backgroundColor_active,
color: color.highlighted.color_active
}
},
CalendarDay__selected_span: {
background: color.selectedSpan.backgroundColor,
border: "1px double ".concat(color.selectedSpan.borderColor),
color: color.selectedSpan.color,
':hover': {
background: color.selectedSpan.backgroundColor_hover,
border: "1px double ".concat(color.selectedSpan.borderColor),
color: color.selectedSpan.color_active
},
':active': {
background: color.selectedSpan.backgroundColor_active,
border: "1px double ".concat(color.selectedSpan.borderColor),
color: color.selectedSpan.color_active
}
},
CalendarDay__selected: {
background: color.selected.backgroundColor,
border: "1px double ".concat(color.selected.borderColor),
color: color.selected.color,
':hover': {
background: color.selected.backgroundColor_hover,
border: "1px double ".concat(color.selected.borderColor),
color: color.selected.color_active
},
':active': {
background: color.selected.backgroundColor_active,
border: "1px double ".concat(color.selected.borderColor),
color: color.selected.color_active
}
},
CalendarDay__hovered_span: {
background: color.hoveredSpan.backgroundColor,
border: "1px double ".concat(color.hoveredSpan.borderColor),
color: color.hoveredSpan.color,
':hover': {
background: color.hoveredSpan.backgroundColor_hover,
border: "1px double ".concat(color.hoveredSpan.borderColor),
color: color.hoveredSpan.color_active
},
':active': {
background: color.hoveredSpan.backgroundColor_active,
border: "1px double ".concat(color.hoveredSpan.borderColor),
color: color.hoveredSpan.color_active
}
},
CalendarDay__blocked_calendar: {
background: color.blocked_calendar.backgroundColor,
border: "1px solid ".concat(color.blocked_calendar.borderColor),
color: color.blocked_calendar.color,
':hover': {
background: color.blocked_calendar.backgroundColor_hover,
border: "1px solid ".concat(color.blocked_calendar.borderColor),
color: color.blocked_calendar.color_active
},
':active': {
background: color.blocked_calendar.backgroundColor_active,
border: "1px solid ".concat(color.blocked_calendar.borderColor),
color: color.blocked_calendar.color_active
}
},
CalendarDay__blocked_out_of_range: {
background: color.blocked_out_of_range.backgroundColor,
border: "1px solid ".concat(color.blocked_out_of_range.borderColor),
color: color.blocked_out_of_range.color,
':hover': {
background: color.blocked_out_of_range.backgroundColor_hover,
border: "1px solid ".concat(color.blocked_out_of_range.borderColor),
color: color.blocked_out_of_range.color_active
},
':active': {
background: color.blocked_out_of_range.backgroundColor_active,
border: "1px solid ".concat(color.blocked_out_of_range.borderColor),
color: color.blocked_out_of_range.color_active
}
},
CalendarDay__hovered_start_first_possible_end: {
background: color.core.borderLighter,
border: "1px double ".concat(color.core.borderLighter)
},
CalendarDay__hovered_start_blocked_min_nights: {
background: color.core.borderLighter,
border: "1px double ".concat(color.core.borderLight)
},
CalendarDay__selected_start: {},
CalendarDay__selected_end: {},
CalendarDay__today: {},
CalendarDay__firstDayOfWeek: {},
CalendarDay__lastDayOfWeek: {},
CalendarDay__after_hovered_start: {},
CalendarDay__before_hovered_end: {},
CalendarDay__no_selected_start_before_selected_end: {},
CalendarDay__selected_start_in_hovered_span: {},
CalendarDay__selected_end_in_hovered_span: {},
CalendarDay__selected_start_no_selected_end: {},
CalendarDay__selected_end_no_selected_start: {}
};
}, {
pureComponent: typeof React.PureComponent !== 'undefined'
})(CalendarDay);
13 changes: 13 additions & 0 deletions esm/components/CalendarIcon.js
View file
Open in desktop
@@ -0,0 +1,13 @@
import React from "react";

var CalendarIcon = function CalendarIcon(props) {
return /*#__PURE__*/React.createElement("svg", props, /*#__PURE__*/React.createElement("path", {
d: "m107 1393h241v-241h-241zm295 0h268v-241h-268zm-295-295h241v-268h-241zm295 0h268v-268h-268zm-295-321h241v-241h-241zm616 616h268v-241h-268zm-321-616h268v-241h-268zm643 616h241v-241h-241zm-322-295h268v-268h-268zm-294-723v-241c0-7-3-14-8-19-6-5-12-8-19-8h-54c-7 0-13 3-19 8-5 5-8 12-8 19v241c0 7 3 14 8 19 6 5 12 8 19 8h54c7 0 13-3 19-8 5-5 8-12 8-19zm616 723h241v-268h-241zm-322-321h268v-241h-268zm322 0h241v-241h-241zm27-402v-241c0-7-3-14-8-19-6-5-12-8-19-8h-54c-7 0-13 3-19 8-5 5-8 12-8 19v241c0 7 3 14 8 19 6 5 12 8 19 8h54c7 0 13-3 19-8 5-5 8-12 8-19zm321-54v1072c0 29-11 54-32 75s-46 32-75 32h-1179c-29 0-54-11-75-32s-32-46-32-75v-1072c0-29 11-54 32-75s46-32 75-32h107v-80c0-37 13-68 40-95s57-39 94-39h54c37 0 68 13 95 39 26 26 39 58 39 95v80h321v-80c0-37 13-69 40-95 26-26 57-39 94-39h54c37 0 68 13 94 39s40 58 40 95v80h107c29 0 54 11 75 32s32 46 32 75z"
}));
};

CalendarIcon.defaultProps = {
focusable: "false",
viewBox: "0 0 1393.1 1500"
};
export default CalendarIcon;