@wix/design-system
Version:
@wix/design-system
276 lines (275 loc) • 11.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _react = _interopRequireDefault(require("react"));
var _focus = require("@react-aria/focus");
var _addMonths = _interopRequireDefault(require("date-fns/addMonths"));
var _subMonths = _interopRequireDefault(require("date-fns/subMonths"));
var _startOfMonth = _interopRequireDefault(require("date-fns/startOfMonth"));
var _isSameDay = _interopRequireDefault(require("date-fns/isSameDay"));
var _designSystemsLocaleUtils = require("@wix/design-systems-locale-utils");
var _utils = require("./utils");
var _LocaleUtils = _interopRequireDefault(require("../common/LocaleUtils/LocaleUtils"));
var _BaseCalendar = _interopRequireDefault(require("./BaseCalendar/BaseCalendar"));
var _DatePickerHead = _interopRequireDefault(require("./DatePickerHead"));
var _context = require("../WixStyleReactEnvironmentProvider/context");
var _CalendarSt = require("./Calendar.st.css.js");
var _constants = require("./constants");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/Calendar/Calendar.jsx",
_Calendar;
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var Calendar = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
function Calendar(props) {
var _this;
(0, _classCallCheck2["default"])(this, Calendar);
_this = _callSuper(this, Calendar, [props]);
_this._setMonth = function (month) {
_this.setState({
month: month
});
var onMonthChange = _this.props.onMonthChange;
if (onMonthChange) {
onMonthChange(month);
}
};
_this._getLocaleUtilsFactory = function (locale, firstDayOfWeek) {
return (0, _LocaleUtils["default"])(locale, firstDayOfWeek);
};
_this._createCaptionElement = function () {
var _this$props = _this.props,
showMonthDropdown = _this$props.showMonthDropdown,
showYearDropdown = _this$props.showYearDropdown,
leftArrowAriaLabel = _this$props.leftArrowAriaLabel,
leftArrowAriaLabelledBy = _this$props.leftArrowAriaLabelledBy,
rightArrowAriaLabel = _this$props.rightArrowAriaLabel,
rightArrowAriaLabelledBy = _this$props.rightArrowAriaLabelledBy,
monthDropdownAriaLabel = _this$props.monthDropdownAriaLabel,
monthDropdownAriaLabelledBy = _this$props.monthDropdownAriaLabelledBy,
yearDropdownAriaLabel = _this$props.yearDropdownAriaLabel,
yearDropdownAriaLabelledBy = _this$props.yearDropdownAriaLabelledBy,
size = _this$props.size;
var month = _this.state.month;
var locale = _this._getLocale();
var localeUtils = _this._getLocaleUtilsFactory(locale);
return /*#__PURE__*/_react["default"].createElement(_DatePickerHead["default"], {
className: _CalendarSt.classes.header,
date: month,
showYearDropdown: showYearDropdown,
showMonthDropdown: showMonthDropdown,
locale: typeof locale === 'string' ? locale : '',
localeUtils: localeUtils,
onChange: _this._setMonth,
onLeftArrowClick: function onLeftArrowClick() {
return _this._setMonth((0, _startOfMonth["default"])((0, _addMonths["default"])(month, -1)));
},
onRightArrowClick: function onRightArrowClick() {
return _this._setMonth((0, _startOfMonth["default"])((0, _addMonths["default"])(month, 1)));
},
leftArrowAriaLabel: leftArrowAriaLabel,
leftArrowAriaLabelledBy: leftArrowAriaLabelledBy,
rightArrowAriaLabel: rightArrowAriaLabel,
rightArrowAriaLabelledBy: rightArrowAriaLabelledBy,
monthDropdownAriaLabel: monthDropdownAriaLabel,
monthDropdownAriaLabelledBy: monthDropdownAriaLabelledBy,
yearDropdownAriaLabel: yearDropdownAriaLabel,
yearDropdownAriaLabelledBy: yearDropdownAriaLabelledBy,
size: size,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 174,
columnNumber: 7
}
});
};
var initialMonth = Calendar.getUpdatedMonth(props.value, props.numOfMonths);
_this.state = {
month: initialMonth || new Date()
};
return _this;
}
(0, _inherits2["default"])(Calendar, _React$PureComponent);
return (0, _createClass2["default"])(Calendar, [{
key: "UNSAFE_componentWillReceiveProps",
value: function UNSAFE_componentWillReceiveProps(nextProps) {
if (nextProps.value !== this.props.value) {
var month = Calendar.getUpdatedMonth(nextProps.value, nextProps.numOfMonths, this.state.month);
if (month) {
this.setState({
month: month
});
}
}
}
}, {
key: "_getLocale",
value: function _getLocale() {
return this.props.locale || this.context.locale || 'en';
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
dataHook = _this$props2.dataHook,
className = _this$props2.className,
autoFocus = _this$props2.autoFocus,
numOfMonths = _this$props2.numOfMonths,
firstDayOfWeek = _this$props2.firstDayOfWeek,
onChange = _this$props2.onChange,
onClose = _this$props2.onClose,
excludePastDates = _this$props2.excludePastDates,
filterDate = _this$props2.filterDate,
value = _this$props2.value,
selectionMode = _this$props2.selectionMode,
shouldCloseOnSelect = _this$props2.shouldCloseOnSelect,
locale = _this$props2.locale,
rtl = _this$props2.rtl,
dateIndication = _this$props2.dateIndication,
today = _this$props2.today,
size = _this$props2.size,
onKeyDown = _this$props2.onKeyDown,
containFocus = _this$props2.containFocus;
var month = this.state.month;
return /*#__PURE__*/_react["default"].createElement("div", {
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 230,
columnNumber: 7
}
}, /*#__PURE__*/_react["default"].createElement(_focus.FocusScope, {
contain: autoFocus && containFocus,
restoreFocus: containFocus,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 231,
columnNumber: 9
}
}, /*#__PURE__*/_react["default"].createElement(_BaseCalendar["default"], {
dataHook: dataHook || _constants.dataHooks.baseCalendar,
size: size,
className: (0, _CalendarSt.st)(_CalendarSt.classes.root, className),
autoFocus: autoFocus,
numOfMonths: numOfMonths,
firstDayOfWeek: firstDayOfWeek,
onChange: onChange,
onClose: onClose,
excludePastDates: excludePastDates,
filterDate: filterDate,
value: value,
selectionMode: selectionMode,
shouldCloseOnSelect: shouldCloseOnSelect,
locale: locale,
rtl: rtl,
dateIndication: dateIndication,
today: today,
onDisplayedViewChange: this._setMonth,
displayedMonth: month,
captionElement: this._createCaptionElement(),
onKeyDown: onKeyDown,
__self: this,
__source: {
fileName: _jsxFileName,
lineNumber: 235,
columnNumber: 11
}
})));
}
}], [{
key: "areValuesEqual",
value: function areValuesEqual() {
var value1 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var value2 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
if (!Boolean(value1) && !Boolean(value2)) {
return true;
}
if (Calendar.isRangeValue(value1) && Calendar.isRangeValue(value2)) {
return (0, _isSameDay["default"])(value1.from, value2.from) && (0, _isSameDay["default"])(value1.to, value2.to);
}
return (0, _isSameDay["default"])(value1, value2);
}
}, {
key: "isSingleDay",
value: function isSingleDay(value) {
return value instanceof Date;
}
}, {
key: "isRangeValue",
value: function isRangeValue(value) {
return Boolean(value.from || value.to);
}
}]);
}(_react["default"].PureComponent);
_Calendar = Calendar;
Calendar.displayName = 'Calendar';
Calendar.defaultProps = {
className: '',
filterDate: function filterDate() {
return true;
},
dateIndication: function dateIndication() {
return null;
},
shouldCloseOnSelect: true,
onClose: function onClose() {},
autoFocus: true,
excludePastDates: false,
selectionMode: 'day',
showMonthDropdown: false,
showYearDropdown: false,
numOfMonths: 1,
size: 'medium'
};
Calendar.optionalParse = _BaseCalendar["default"].optionalParse;
/** Return a value in which all string-dates are parsed into Date objects */
Calendar.parseValue = _BaseCalendar["default"].parseValue;
Calendar.nextDay = _BaseCalendar["default"].nextDay;
Calendar.prevDay = _BaseCalendar["default"].prevDay;
Calendar.getUpdatedMonth = function (nextPropsValue, numOfMonths, currentMonthDate) {
var nextValue = _Calendar.parseValue(nextPropsValue);
if (!currentMonthDate) {
return _Calendar.isSingleDay(nextValue) ? nextValue : nextValue.from || nextValue.to;
}
var view = new _utils.CalendarView(currentMonthDate, numOfMonths);
if (_Calendar.isSingleDay(nextValue)) {
if (!view.isContained(nextValue)) {
return nextValue;
}
} else {
var from = nextValue.from,
to = nextValue.to;
if (from && view.isAfterView(from)) {
// F--- => F---
// VVVVV => VVVVV
return from;
} else if (to && view.isBeforeView(to)) {
if (view.isRangeFits(from, to)) {
// F-T => F-T
// VVVVV => VVVVV
return from;
} else {
// F-----T => F-----T
// VVVVV => VVVVV
return (0, _subMonths["default"])(to, numOfMonths - 1);
}
} else if (from && view.isBeforeView(from) && to && view.isAfterView(to)) {
// F-------T => F-------T
// VVVVV => VVVVV
return from; // choose the 'from' anchor arbitrarily
}
}
/*
* We only changed the month if the day (or range.edges) are outside the view.
* This is to avoid changing the month right after a user clicks on the calendar.
*/
return null;
};
Calendar.contextType = _context.WixStyleReactEnvironmentContext;