From 7d97d3d8eeb748c509235d55a968c3b49ed92f0c Mon Sep 17 00:00:00 2001 From: ronnie Date: Fri, 9 Sep 2022 12:23:43 +0530 Subject: [PATCH 01/11] update: changes --- .gitignore | 1 - dist/accessibility/index.js | 23 + dist/components/Calendar/index.js | 830 ++++++++++++++++++ dist/components/Calendar/index.test.js | 11 + dist/components/DateInput/index.js | 199 +++++ dist/components/DateRange/index.js | 279 ++++++ dist/components/DateRange/index.test.js | 104 +++ dist/components/DateRangePicker/index.js | 116 +++ dist/components/DayCell/index.js | 321 +++++++ dist/components/DefinedRange/index.js | 220 +++++ dist/components/DefinedRange/index.test.js | 115 +++ dist/components/InputRangeField/index.js | 124 +++ dist/components/InputRangeField/index.test.js | 122 +++ dist/components/Month/index.js | 212 +++++ dist/defaultRanges.js | 143 +++ dist/index.js | 59 ++ dist/locale/index.js | 503 +++++++++++ dist/styles.css | 197 +++++ dist/styles.js | 60 ++ dist/theme/default.css | 386 ++++++++ dist/utils.js | 107 +++ 21 files changed, 4131 insertions(+), 1 deletion(-) create mode 100644 dist/accessibility/index.js create mode 100644 dist/components/Calendar/index.js create mode 100644 dist/components/Calendar/index.test.js create mode 100644 dist/components/DateInput/index.js create mode 100644 dist/components/DateRange/index.js create mode 100644 dist/components/DateRange/index.test.js create mode 100644 dist/components/DateRangePicker/index.js create mode 100644 dist/components/DayCell/index.js create mode 100644 dist/components/DefinedRange/index.js create mode 100644 dist/components/DefinedRange/index.test.js create mode 100644 dist/components/InputRangeField/index.js create mode 100644 dist/components/InputRangeField/index.test.js create mode 100644 dist/components/Month/index.js create mode 100644 dist/defaultRanges.js create mode 100644 dist/index.js create mode 100644 dist/locale/index.js create mode 100644 dist/styles.css create mode 100644 dist/styles.js create mode 100644 dist/theme/default.css create mode 100644 dist/utils.js diff --git a/.gitignore b/.gitignore index 31ca39e05..ecd51e813 100755 --- a/.gitignore +++ b/.gitignore @@ -5,5 +5,4 @@ node_modules/ *.orig lib/ NOTES.txt -dist/ styleguide/ diff --git a/dist/accessibility/index.js b/dist/accessibility/index.js new file mode 100644 index 000000000..e66bf7f82 --- /dev/null +++ b/dist/accessibility/index.js @@ -0,0 +1,23 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.ariaLabelsShape = void 0; + +var _propTypes = _interopRequireDefault(require("prop-types")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var ariaLabelsShape = _propTypes.default.shape({ + dateInput: _propTypes.default.objectOf(_propTypes.default.shape({ + startDate: _propTypes.default.string, + endDate: _propTypes.default.string + })), + monthPicker: _propTypes.default.string, + yearPicker: _propTypes.default.string, + prevButton: _propTypes.default.string, + nextButton: _propTypes.default.string +}); + +exports.ariaLabelsShape = ariaLabelsShape; \ No newline at end of file diff --git a/dist/components/Calendar/index.js b/dist/components/Calendar/index.js new file mode 100644 index 000000000..79a13966d --- /dev/null +++ b/dist/components/Calendar/index.js @@ -0,0 +1,830 @@ +"use strict"; + +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +var _DayCell = require("../DayCell"); + +var _Month = _interopRequireDefault(require("../Month")); + +var _DateInput = _interopRequireDefault(require("../DateInput")); + +var _utils = require("../../utils"); + +var _classnames3 = _interopRequireDefault(require("classnames")); + +var _reactList = _interopRequireDefault(require("react-list")); + +var _shallowEqual = require("shallow-equal"); + +var _max = _interopRequireDefault(require("date-fns/max")); + +var _min = _interopRequireDefault(require("date-fns/min")); + +var _differenceInDays = _interopRequireDefault(require("date-fns/differenceInDays")); + +var _isSameMonth = _interopRequireDefault(require("date-fns/isSameMonth")); + +var _addDays = _interopRequireDefault(require("date-fns/addDays")); + +var _endOfMonth = _interopRequireDefault(require("date-fns/endOfMonth")); + +var _startOfMonth = _interopRequireDefault(require("date-fns/startOfMonth")); + +var _differenceInCalendarMonths = _interopRequireDefault(require("date-fns/differenceInCalendarMonths")); + +var _setMonth2 = _interopRequireDefault(require("date-fns/setMonth")); + +var _setYear2 = _interopRequireDefault(require("date-fns/setYear")); + +var _addYears = _interopRequireDefault(require("date-fns/addYears")); + +var _isSameDay = _interopRequireDefault(require("date-fns/isSameDay")); + +var _endOfWeek = _interopRequireDefault(require("date-fns/endOfWeek")); + +var _startOfWeek = _interopRequireDefault(require("date-fns/startOfWeek")); + +var _eachDayOfInterval = _interopRequireDefault(require("date-fns/eachDayOfInterval")); + +var _format = _interopRequireDefault(require("date-fns/format")); + +var _subMonths = _interopRequireDefault(require("date-fns/subMonths")); + +var _addMonths = _interopRequireDefault(require("date-fns/addMonths")); + +var _enUS = _interopRequireDefault(require("date-fns/locale/en-US")); + +var _styles = _interopRequireDefault(require("../../styles")); + +var _accessibility = require("../../accessibility"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } + +function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } + +function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } + +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } + +function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } + +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } + +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } + +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +var Calendar = /*#__PURE__*/function (_PureComponent) { + _inherits(Calendar, _PureComponent); + + var _super = _createSuper(Calendar); + + function Calendar(_props, context) { + var _this; + + _classCallCheck(this, Calendar); + + _this = _super.call(this, _props, context); + + _defineProperty(_assertThisInitialized(_this), "focusToDate", function (date) { + var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _this.props; + var preventUnnecessary = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true; + + if (!props.scroll.enabled) { + if (preventUnnecessary && props.preventSnapRefocus) { + var focusedDateDiff = (0, _differenceInCalendarMonths.default)(date, _this.state.focusedDate); + var isAllowedForward = props.calendarFocus === 'forwards' && focusedDateDiff >= 0; + var isAllowedBackward = props.calendarFocus === 'backwards' && focusedDateDiff <= 0; + + if ((isAllowedForward || isAllowedBackward) && Math.abs(focusedDateDiff) < props.months) { + return; + } + } + + _this.setState({ + focusedDate: date + }); + + return; + } + + var targetMonthIndex = (0, _differenceInCalendarMonths.default)(date, props.minDate, _this.dateOptions); + + var visibleMonths = _this.list.getVisibleRange(); + + if (preventUnnecessary && visibleMonths.includes(targetMonthIndex)) return; + _this.isFirstRender = true; + + _this.list.scrollTo(targetMonthIndex); + + _this.setState({ + focusedDate: date + }); + }); + + _defineProperty(_assertThisInitialized(_this), "updateShownDate", function () { + var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.props; + var newProps = props.scroll.enabled ? _objectSpread(_objectSpread({}, props), {}, { + months: _this.list.getVisibleRange().length + }) : props; + var newFocus = (0, _utils.calcFocusDate)(_this.state.focusedDate, newProps); + + _this.focusToDate(newFocus, newProps); + }); + + _defineProperty(_assertThisInitialized(_this), "updatePreview", function (val) { + if (!val) { + _this.setState({ + preview: null + }); + + return; + } + + var preview = { + startDate: val, + endDate: val, + color: _this.props.color + }; + + _this.setState({ + preview: preview + }); + }); + + _defineProperty(_assertThisInitialized(_this), "changeShownDate", function (value) { + var mode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'set'; + var focusedDate = _this.state.focusedDate; + var _this$props = _this.props, + onShownDateChange = _this$props.onShownDateChange, + minDate = _this$props.minDate, + maxDate = _this$props.maxDate; + var modeMapper = { + monthOffset: function monthOffset() { + return (0, _addMonths.default)(focusedDate, value); + }, + setMonth: function (_setMonth) { + function setMonth() { + return _setMonth.apply(this, arguments); + } + + setMonth.toString = function () { + return _setMonth.toString(); + }; + + return setMonth; + }(function () { + return (0, _setMonth2.default)(focusedDate, value); + }), + setYear: function (_setYear) { + function setYear() { + return _setYear.apply(this, arguments); + } + + setYear.toString = function () { + return _setYear.toString(); + }; + + return setYear; + }(function () { + return (0, _setYear2.default)(focusedDate, value); + }), + set: function set() { + return value; + } + }; + var newDate = (0, _min.default)([(0, _max.default)([modeMapper[mode](), minDate]), maxDate]); + + _this.focusToDate(newDate, _this.props, false); + + onShownDateChange && onShownDateChange(newDate); + }); + + _defineProperty(_assertThisInitialized(_this), "handleRangeFocusChange", function (rangesIndex, rangeItemIndex) { + _this.props.onRangeFocusChange && _this.props.onRangeFocusChange([rangesIndex, rangeItemIndex]); + }); + + _defineProperty(_assertThisInitialized(_this), "handleScroll", function () { + var _this$props2 = _this.props, + onShownDateChange = _this$props2.onShownDateChange, + minDate = _this$props2.minDate; + var focusedDate = _this.state.focusedDate; + + var _assertThisInitialize = _assertThisInitialized(_this), + isFirstRender = _assertThisInitialize.isFirstRender; + + var visibleMonths = _this.list.getVisibleRange(); // prevent scroll jump with wrong visible value + + + if (visibleMonths[0] === undefined) return; + var visibleMonth = (0, _addMonths.default)(minDate, visibleMonths[0] || 0); + var isFocusedToDifferent = !(0, _isSameMonth.default)(visibleMonth, focusedDate); + + if (isFocusedToDifferent && !isFirstRender) { + _this.setState({ + focusedDate: visibleMonth + }); + + onShownDateChange && onShownDateChange(visibleMonth); + } + + _this.isFirstRender = false; + }); + + _defineProperty(_assertThisInitialized(_this), "renderMonthAndYear", function (focusedDate, changeShownDate, props) { + var showMonthArrow = props.showMonthArrow, + minDate = props.minDate, + maxDate = props.maxDate, + showMonthAndYearPickers = props.showMonthAndYearPickers, + ariaLabels = props.ariaLabels; + var upperYearLimit = (maxDate || Calendar.defaultProps.maxDate).getFullYear(); + var lowerYearLimit = (minDate || Calendar.defaultProps.minDate).getFullYear(); + var styles = _this.styles; + return /*#__PURE__*/_react.default.createElement("div", { + onMouseUp: function onMouseUp(e) { + return e.stopPropagation(); + }, + className: styles.monthAndYearWrapper + }, showMonthArrow ? /*#__PURE__*/_react.default.createElement("button", { + type: "button", + className: (0, _classnames3.default)(styles.nextPrevButton, styles.prevButton), + onClick: function onClick() { + return changeShownDate(-1, 'monthOffset'); + }, + "aria-label": ariaLabels.prevButton + }, /*#__PURE__*/_react.default.createElement("i", null)) : null, showMonthAndYearPickers ? /*#__PURE__*/_react.default.createElement("span", { + className: styles.monthAndYearPickers + }, /*#__PURE__*/_react.default.createElement("span", { + className: styles.monthPicker + }, /*#__PURE__*/_react.default.createElement("select", { + value: focusedDate.getMonth(), + onChange: function onChange(e) { + return changeShownDate(e.target.value, 'setMonth'); + }, + "aria-label": ariaLabels.monthPicker + }, _this.state.monthNames.map(function (monthName, i) { + return /*#__PURE__*/_react.default.createElement("option", { + key: i, + value: i + }, monthName); + }))), /*#__PURE__*/_react.default.createElement("span", { + className: styles.monthAndYearDivider + }), /*#__PURE__*/_react.default.createElement("span", { + className: styles.yearPicker + }, /*#__PURE__*/_react.default.createElement("select", { + value: focusedDate.getFullYear(), + onChange: function onChange(e) { + return changeShownDate(e.target.value, 'setYear'); + }, + "aria-label": ariaLabels.yearPicker + }, new Array(upperYearLimit - lowerYearLimit + 1).fill(upperYearLimit).map(function (val, i) { + var year = val - i; + return /*#__PURE__*/_react.default.createElement("option", { + key: year, + value: year + }, year); + })))) : /*#__PURE__*/_react.default.createElement("span", { + className: styles.monthAndYearPickers + }, _this.state.monthNames[focusedDate.getMonth()], " ", focusedDate.getFullYear()), showMonthArrow ? /*#__PURE__*/_react.default.createElement("button", { + type: "button", + className: (0, _classnames3.default)(styles.nextPrevButton, styles.nextButton), + onClick: function onClick() { + return changeShownDate(+1, 'monthOffset'); + }, + "aria-label": ariaLabels.nextButton + }, /*#__PURE__*/_react.default.createElement("i", null)) : null); + }); + + _defineProperty(_assertThisInitialized(_this), "renderDateDisplay", function () { + var _this$props3 = _this.props, + focusedRange = _this$props3.focusedRange, + color = _this$props3.color, + ranges = _this$props3.ranges, + rangeColors = _this$props3.rangeColors, + dateDisplayFormat = _this$props3.dateDisplayFormat, + editableDateInputs = _this$props3.editableDateInputs, + startDatePlaceholder = _this$props3.startDatePlaceholder, + endDatePlaceholder = _this$props3.endDatePlaceholder, + ariaLabels = _this$props3.ariaLabels; + var defaultColor = rangeColors[focusedRange[0]] || color; + var styles = _this.styles; + return /*#__PURE__*/_react.default.createElement("div", { + className: styles.dateDisplayWrapper + }, ranges.map(function (range, i) { + if (range.showDateDisplay === false || range.disabled && !range.showDateDisplay) return null; + return /*#__PURE__*/_react.default.createElement("div", { + className: styles.dateDisplay, + key: i, + style: { + color: range.color || defaultColor + } + }, /*#__PURE__*/_react.default.createElement(_DateInput.default, { + className: (0, _classnames3.default)(styles.dateDisplayItem, _defineProperty({}, styles.dateDisplayItemActive, focusedRange[0] === i && focusedRange[1] === 0)), + readOnly: !editableDateInputs, + disabled: range.disabled, + value: range.startDate, + placeholder: startDatePlaceholder, + dateOptions: _this.dateOptions, + dateDisplayFormat: dateDisplayFormat, + ariaLabel: ariaLabels.dateInput && ariaLabels.dateInput[range.key] && ariaLabels.dateInput[range.key].startDate, + onChange: _this.onDragSelectionEnd, + onFocus: function onFocus() { + return _this.handleRangeFocusChange(i, 0); + } + }), /*#__PURE__*/_react.default.createElement(_DateInput.default, { + className: (0, _classnames3.default)(styles.dateDisplayItem, _defineProperty({}, styles.dateDisplayItemActive, focusedRange[0] === i && focusedRange[1] === 1)), + readOnly: !editableDateInputs, + disabled: range.disabled, + value: range.endDate, + placeholder: endDatePlaceholder, + dateOptions: _this.dateOptions, + dateDisplayFormat: dateDisplayFormat, + ariaLabel: ariaLabels.dateInput && ariaLabels.dateInput[range.key] && ariaLabels.dateInput[range.key].endDate, + onChange: _this.onDragSelectionEnd, + onFocus: function onFocus() { + return _this.handleRangeFocusChange(i, 1); + } + })); + })); + }); + + _defineProperty(_assertThisInitialized(_this), "onDragSelectionStart", function (date) { + var _this$props4 = _this.props, + onChange = _this$props4.onChange, + dragSelectionEnabled = _this$props4.dragSelectionEnabled; + + if (dragSelectionEnabled) { + _this.setState({ + drag: { + status: true, + range: { + startDate: date, + endDate: date + }, + disablePreview: true + } + }); + } else { + onChange && onChange(date); + } + }); + + _defineProperty(_assertThisInitialized(_this), "onDragSelectionEnd", function (date) { + var _this$props5 = _this.props, + updateRange = _this$props5.updateRange, + displayMode = _this$props5.displayMode, + onChange = _this$props5.onChange, + dragSelectionEnabled = _this$props5.dragSelectionEnabled; + if (!dragSelectionEnabled) return; + + if (displayMode === 'date' || !_this.state.drag.status) { + onChange && onChange(date); + return; + } + + var newRange = { + startDate: _this.state.drag.range.startDate, + endDate: date + }; + + if (displayMode !== 'dateRange' || (0, _isSameDay.default)(newRange.startDate, date)) { + _this.setState({ + drag: { + status: false, + range: {} + } + }, function () { + return onChange && onChange(date); + }); + } else { + _this.setState({ + drag: { + status: false, + range: {} + } + }, function () { + updateRange && updateRange(newRange); + }); + } + }); + + _defineProperty(_assertThisInitialized(_this), "onDragSelectionMove", function (date) { + var drag = _this.state.drag; + if (!drag.status || !_this.props.dragSelectionEnabled) return; + + _this.setState({ + drag: { + status: drag.status, + range: { + startDate: drag.range.startDate, + endDate: date + }, + disablePreview: true + } + }); + }); + + _defineProperty(_assertThisInitialized(_this), "estimateMonthSize", function (index, cache) { + var _this$props6 = _this.props, + direction = _this$props6.direction, + minDate = _this$props6.minDate; + var scrollArea = _this.state.scrollArea; + + if (cache) { + _this.listSizeCache = cache; + if (cache[index]) return cache[index]; + } + + if (direction === 'horizontal') return scrollArea.monthWidth; + var monthStep = (0, _addMonths.default)(minDate, index); + + var _getMonthDisplayRange = (0, _utils.getMonthDisplayRange)(monthStep, _this.dateOptions), + start = _getMonthDisplayRange.start, + end = _getMonthDisplayRange.end; + + var isLongMonth = (0, _differenceInDays.default)(end, start, _this.dateOptions) + 1 > 7 * 5; + return isLongMonth ? scrollArea.longMonthHeight : scrollArea.monthHeight; + }); + + _this.dateOptions = { + locale: _props.locale + }; + if (_props.weekStartsOn !== undefined) _this.dateOptions.weekStartsOn = _props.weekStartsOn; + _this.styles = (0, _utils.generateStyles)([_styles.default, _props.classNames]); + _this.listSizeCache = {}; + _this.isFirstRender = true; + _this.state = { + monthNames: _this.getMonthNames(), + focusedDate: (0, _utils.calcFocusDate)(null, _props), + drag: { + status: false, + range: { + startDate: null, + endDate: null + }, + disablePreview: false + }, + scrollArea: _this.calcScrollArea(_props) + }; + return _this; + } + + _createClass(Calendar, [{ + key: "getMonthNames", + value: function getMonthNames() { + var _this2 = this; + + return _toConsumableArray(Array(12).keys()).map(function (i) { + return _this2.props.locale.localize.month(i); + }); + } + }, { + key: "calcScrollArea", + value: function calcScrollArea(props) { + var direction = props.direction, + months = props.months, + scroll = props.scroll; + if (!scroll.enabled) return { + enabled: false + }; + var longMonthHeight = scroll.longMonthHeight || scroll.monthHeight; + + if (direction === 'vertical') { + return { + enabled: true, + monthHeight: scroll.monthHeight || 220, + longMonthHeight: longMonthHeight || 260, + calendarWidth: 'auto', + calendarHeight: (scroll.calendarHeight || longMonthHeight || 240) * months + }; + } + + return { + enabled: true, + monthWidth: scroll.monthWidth || 332, + calendarWidth: (scroll.calendarWidth || scroll.monthWidth || 332) * months, + monthHeight: longMonthHeight || 300, + calendarHeight: longMonthHeight || 300 + }; + } + }, { + key: "componentDidMount", + value: function componentDidMount() { + var _this3 = this; + + if (this.props.scroll.enabled) { + // prevent react-list's initial render focus problem + setTimeout(function () { + return _this3.focusToDate(_this3.state.focusedDate); + }); + } + } + }, { + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + var propMapper = { + dateRange: 'ranges', + date: 'date' + }; + var targetProp = propMapper[this.props.displayMode]; + + if (this.props[targetProp] !== prevProps[targetProp]) { + this.updateShownDate(this.props); + } + + if (prevProps.locale !== this.props.locale || prevProps.weekStartsOn !== this.props.weekStartsOn) { + this.dateOptions = { + locale: this.props.locale + }; + if (this.props.weekStartsOn !== undefined) this.dateOptions.weekStartsOn = this.props.weekStartsOn; + this.setState({ + monthNames: this.getMonthNames() + }); + } + + if (!(0, _shallowEqual.shallowEqualObjects)(prevProps.scroll, this.props.scroll)) { + this.setState({ + scrollArea: this.calcScrollArea(this.props) + }); + } + } + }, { + key: "renderWeekdays", + value: function renderWeekdays() { + var _this4 = this; + + var now = new Date(); + return /*#__PURE__*/_react.default.createElement("div", { + className: this.styles.weekDays + }, (0, _eachDayOfInterval.default)({ + start: (0, _startOfWeek.default)(now, this.dateOptions), + end: (0, _endOfWeek.default)(now, this.dateOptions) + }).map(function (day, i) { + return /*#__PURE__*/_react.default.createElement("span", { + className: _this4.styles.weekDay, + key: i + }, (0, _format.default)(day, _this4.props.weekdayDisplayFormat, _this4.dateOptions)); + })); + } + }, { + key: "render", + value: function render() { + var _this5 = this; + + var _this$props7 = this.props, + showDateDisplay = _this$props7.showDateDisplay, + onPreviewChange = _this$props7.onPreviewChange, + scroll = _this$props7.scroll, + direction = _this$props7.direction, + disabledDates = _this$props7.disabledDates, + disabledDay = _this$props7.disabledDay, + maxDate = _this$props7.maxDate, + minDate = _this$props7.minDate, + rangeColors = _this$props7.rangeColors, + color = _this$props7.color, + navigatorRenderer = _this$props7.navigatorRenderer, + className = _this$props7.className, + preview = _this$props7.preview; + var _this$state = this.state, + scrollArea = _this$state.scrollArea, + focusedDate = _this$state.focusedDate; + var isVertical = direction === 'vertical'; + var monthAndYearRenderer = navigatorRenderer || this.renderMonthAndYear; + var ranges = this.props.ranges.map(function (range, i) { + return _objectSpread(_objectSpread({}, range), {}, { + color: range.color || rangeColors[i] || color + }); + }); + return /*#__PURE__*/_react.default.createElement("div", { + className: (0, _classnames3.default)(this.styles.calendarWrapper, className), + onMouseUp: function onMouseUp() { + return _this5.setState({ + drag: { + status: false, + range: {} + } + }); + }, + onMouseLeave: function onMouseLeave() { + _this5.setState({ + drag: { + status: false, + range: {} + } + }); + } + }, showDateDisplay && this.renderDateDisplay(), monthAndYearRenderer(focusedDate, this.changeShownDate, this.props), scroll.enabled ? /*#__PURE__*/_react.default.createElement("div", null, isVertical && this.renderWeekdays(this.dateOptions), /*#__PURE__*/_react.default.createElement("div", { + className: (0, _classnames3.default)(this.styles.infiniteMonths, isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal), + onMouseLeave: function onMouseLeave() { + return onPreviewChange && onPreviewChange(); + }, + style: { + width: scrollArea.calendarWidth + 11, + height: scrollArea.calendarHeight + 11 + }, + onScroll: this.handleScroll + }, /*#__PURE__*/_react.default.createElement(_reactList.default, { + length: (0, _differenceInCalendarMonths.default)((0, _endOfMonth.default)(maxDate), (0, _addDays.default)((0, _startOfMonth.default)(minDate), -1), this.dateOptions), + treshold: 500, + type: "variable", + ref: function ref(target) { + return _this5.list = target; + }, + itemSizeEstimator: this.estimateMonthSize, + axis: isVertical ? 'y' : 'x', + itemRenderer: function itemRenderer(index, key) { + var monthStep = (0, _addMonths.default)(minDate, index); + return /*#__PURE__*/_react.default.createElement(_Month.default, _extends({}, _this5.props, { + onPreviewChange: onPreviewChange || _this5.updatePreview, + preview: preview || _this5.state.preview, + ranges: ranges, + key: key, + drag: _this5.state.drag, + dateOptions: _this5.dateOptions, + disabledDates: disabledDates, + disabledDay: disabledDay, + month: monthStep, + onDragSelectionStart: _this5.onDragSelectionStart, + onDragSelectionEnd: _this5.onDragSelectionEnd, + onDragSelectionMove: _this5.onDragSelectionMove, + onMouseLeave: function onMouseLeave() { + return onPreviewChange && onPreviewChange(); + }, + styles: _this5.styles, + style: isVertical ? { + height: _this5.estimateMonthSize(index) + } : { + height: scrollArea.monthHeight, + width: _this5.estimateMonthSize(index) + }, + showMonthName: true, + showWeekDays: !isVertical + })); + } + }))) : /*#__PURE__*/_react.default.createElement("div", { + className: (0, _classnames3.default)(this.styles.months, isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal) + }, new Array(this.props.months).fill(null).map(function (_, i) { + var monthStep = (0, _addMonths.default)(_this5.state.focusedDate, i); + ; + + if (_this5.props.calendarFocus === 'backwards') { + monthStep = (0, _subMonths.default)(_this5.state.focusedDate, _this5.props.months - 1 - i); + } + + return /*#__PURE__*/_react.default.createElement(_Month.default, _extends({}, _this5.props, { + onPreviewChange: onPreviewChange || _this5.updatePreview, + preview: preview || _this5.state.preview, + ranges: ranges, + key: i, + drag: _this5.state.drag, + dateOptions: _this5.dateOptions, + disabledDates: disabledDates, + disabledDay: disabledDay, + month: monthStep, + onDragSelectionStart: _this5.onDragSelectionStart, + onDragSelectionEnd: _this5.onDragSelectionEnd, + onDragSelectionMove: _this5.onDragSelectionMove, + onMouseLeave: function onMouseLeave() { + return onPreviewChange && onPreviewChange(); + }, + styles: _this5.styles, + showWeekDays: !isVertical || i === 0, + showMonthName: !isVertical || i > 0 + })); + }))); + } + }]); + + return Calendar; +}(_react.PureComponent); + +Calendar.defaultProps = { + showMonthArrow: true, + showMonthAndYearPickers: true, + disabledDates: [], + disabledDay: function disabledDay() {}, + classNames: {}, + locale: _enUS.default, + ranges: [], + focusedRange: [0, 0], + dateDisplayFormat: 'MMM d, yyyy', + monthDisplayFormat: 'MMM yyyy', + weekdayDisplayFormat: 'E', + dayDisplayFormat: 'd', + showDateDisplay: true, + showPreview: true, + displayMode: 'date', + months: 1, + color: '#3d91ff', + scroll: { + enabled: false + }, + direction: 'vertical', + maxDate: (0, _addYears.default)(new Date(), 20), + minDate: (0, _addYears.default)(new Date(), -100), + rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'], + startDatePlaceholder: 'Early', + endDatePlaceholder: 'Continuous', + editableDateInputs: false, + dragSelectionEnabled: true, + fixedHeight: false, + calendarFocus: 'forwards', + preventSnapRefocus: false, + ariaLabels: {} +}; +Calendar.propTypes = { + showMonthArrow: _propTypes.default.bool, + showMonthAndYearPickers: _propTypes.default.bool, + disabledDates: _propTypes.default.array, + disabledDay: _propTypes.default.func, + minDate: _propTypes.default.object, + maxDate: _propTypes.default.object, + date: _propTypes.default.object, + onChange: _propTypes.default.func, + onPreviewChange: _propTypes.default.func, + onRangeFocusChange: _propTypes.default.func, + classNames: _propTypes.default.object, + locale: _propTypes.default.object, + shownDate: _propTypes.default.object, + onShownDateChange: _propTypes.default.func, + ranges: _propTypes.default.arrayOf(_DayCell.rangeShape), + preview: _propTypes.default.shape({ + startDate: _propTypes.default.object, + endDate: _propTypes.default.object, + color: _propTypes.default.string + }), + dateDisplayFormat: _propTypes.default.string, + monthDisplayFormat: _propTypes.default.string, + weekdayDisplayFormat: _propTypes.default.string, + weekStartsOn: _propTypes.default.number, + dayDisplayFormat: _propTypes.default.string, + focusedRange: _propTypes.default.arrayOf(_propTypes.default.number), + initialFocusedRange: _propTypes.default.arrayOf(_propTypes.default.number), + months: _propTypes.default.number, + className: _propTypes.default.string, + showDateDisplay: _propTypes.default.bool, + showPreview: _propTypes.default.bool, + displayMode: _propTypes.default.oneOf(['dateRange', 'date']), + color: _propTypes.default.string, + updateRange: _propTypes.default.func, + scroll: _propTypes.default.shape({ + enabled: _propTypes.default.bool, + monthHeight: _propTypes.default.number, + longMonthHeight: _propTypes.default.number, + monthWidth: _propTypes.default.number, + calendarWidth: _propTypes.default.number, + calendarHeight: _propTypes.default.number + }), + direction: _propTypes.default.oneOf(['vertical', 'horizontal']), + startDatePlaceholder: _propTypes.default.string, + endDatePlaceholder: _propTypes.default.string, + navigatorRenderer: _propTypes.default.func, + rangeColors: _propTypes.default.arrayOf(_propTypes.default.string), + editableDateInputs: _propTypes.default.bool, + dragSelectionEnabled: _propTypes.default.bool, + fixedHeight: _propTypes.default.bool, + calendarFocus: _propTypes.default.string, + preventSnapRefocus: _propTypes.default.bool, + ariaLabels: _accessibility.ariaLabelsShape +}; +var _default = Calendar; +exports.default = _default; \ No newline at end of file diff --git a/dist/components/Calendar/index.test.js b/dist/components/Calendar/index.test.js new file mode 100644 index 000000000..ae10d96d7 --- /dev/null +++ b/dist/components/Calendar/index.test.js @@ -0,0 +1,11 @@ +"use strict"; + +var _Calendar = _interopRequireDefault(require("../Calendar")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +describe('Calendar', function () { + test('Should resolve', function () { + expect(_Calendar.default).toEqual(expect.anything()); + }); +}); \ No newline at end of file diff --git a/dist/components/DateInput/index.js b/dist/components/DateInput/index.js new file mode 100644 index 000000000..f4041c9d1 --- /dev/null +++ b/dist/components/DateInput/index.js @@ -0,0 +1,199 @@ +"use strict"; + +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +var _classnames = _interopRequireDefault(require("classnames")); + +var _isEqual = _interopRequireDefault(require("date-fns/isEqual")); + +var _isValid = _interopRequireDefault(require("date-fns/isValid")); + +var _parse = _interopRequireDefault(require("date-fns/parse")); + +var _format = _interopRequireDefault(require("date-fns/format")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } + +function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +var DateInput = /*#__PURE__*/function (_PureComponent) { + _inherits(DateInput, _PureComponent); + + var _super = _createSuper(DateInput); + + function DateInput(props, context) { + var _this; + + _classCallCheck(this, DateInput); + + _this = _super.call(this, props, context); + + _defineProperty(_assertThisInitialized(_this), "onKeyDown", function (e) { + var value = _this.state.value; + + if (e.key === 'Enter') { + _this.update(value); + } + }); + + _defineProperty(_assertThisInitialized(_this), "onChange", function (e) { + _this.setState({ + value: e.target.value, + changed: true, + invalid: false + }); + }); + + _defineProperty(_assertThisInitialized(_this), "onBlur", function () { + var value = _this.state.value; + + _this.update(value); + }); + + _this.state = { + invalid: false, + changed: false, + value: _this.formatDate(props) + }; + return _this; + } + + _createClass(DateInput, [{ + key: "componentDidUpdate", + value: function componentDidUpdate(prevProps) { + var value = prevProps.value; + + if (!(0, _isEqual.default)(value, this.props.value)) { + this.setState({ + value: this.formatDate(this.props) + }); + } + } + }, { + key: "formatDate", + value: function formatDate(_ref) { + var value = _ref.value, + dateDisplayFormat = _ref.dateDisplayFormat, + dateOptions = _ref.dateOptions; + + if (value && (0, _isValid.default)(value)) { + return (0, _format.default)(value, dateDisplayFormat, dateOptions); + } + + return ''; + } + }, { + key: "update", + value: function update(value) { + var _this$state = this.state, + invalid = _this$state.invalid, + changed = _this$state.changed; + + if (invalid || !changed || !value) { + return; + } + + var _this$props = this.props, + onChange = _this$props.onChange, + dateDisplayFormat = _this$props.dateDisplayFormat, + dateOptions = _this$props.dateOptions; + var parsed = (0, _parse.default)(value, dateDisplayFormat, new Date(), dateOptions); + + if ((0, _isValid.default)(parsed)) { + this.setState({ + changed: false + }, function () { + return onChange(parsed); + }); + } else { + this.setState({ + invalid: true + }); + } + } + }, { + key: "render", + value: function render() { + var _this$props2 = this.props, + className = _this$props2.className, + readOnly = _this$props2.readOnly, + placeholder = _this$props2.placeholder, + ariaLabel = _this$props2.ariaLabel, + disabled = _this$props2.disabled, + onFocus = _this$props2.onFocus; + var _this$state2 = this.state, + value = _this$state2.value, + invalid = _this$state2.invalid; + return /*#__PURE__*/_react.default.createElement("span", { + className: (0, _classnames.default)('rdrDateInput', className) + }, /*#__PURE__*/_react.default.createElement("input", { + readOnly: readOnly, + disabled: disabled, + value: value, + placeholder: placeholder, + "aria-label": ariaLabel, + onKeyDown: this.onKeyDown, + onChange: this.onChange, + onBlur: this.onBlur, + onFocus: onFocus + }), invalid && /*#__PURE__*/_react.default.createElement("span", { + className: "rdrWarning" + }, "\u26A0")); + } + }]); + + return DateInput; +}(_react.PureComponent); + +DateInput.propTypes = { + value: _propTypes.default.object, + placeholder: _propTypes.default.string, + disabled: _propTypes.default.bool, + readOnly: _propTypes.default.bool, + dateOptions: _propTypes.default.object, + dateDisplayFormat: _propTypes.default.string, + ariaLabel: _propTypes.default.string, + className: _propTypes.default.string, + onFocus: _propTypes.default.func.isRequired, + onChange: _propTypes.default.func.isRequired +}; +DateInput.defaultProps = { + readOnly: true, + disabled: false, + dateDisplayFormat: 'MMM D, YYYY' +}; +var _default = DateInput; +exports.default = _default; \ No newline at end of file diff --git a/dist/components/DateRange/index.js b/dist/components/DateRange/index.js new file mode 100644 index 000000000..63854883a --- /dev/null +++ b/dist/components/DateRange/index.js @@ -0,0 +1,279 @@ +"use strict"; + +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +var _Calendar = _interopRequireDefault(require("../Calendar")); + +var _DayCell = require("../DayCell"); + +var _utils = require("../../utils"); + +var _max = _interopRequireDefault(require("date-fns/max")); + +var _isWithinInterval = _interopRequireDefault(require("date-fns/isWithinInterval")); + +var _min = _interopRequireDefault(require("date-fns/min")); + +var _addDays = _interopRequireDefault(require("date-fns/addDays")); + +var _differenceInCalendarDays = _interopRequireDefault(require("date-fns/differenceInCalendarDays")); + +var _isBefore = _interopRequireDefault(require("date-fns/isBefore")); + +var _classnames = _interopRequireDefault(require("classnames")); + +var _styles = _interopRequireDefault(require("../../styles")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } + +function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +var DateRange = /*#__PURE__*/function (_Component) { + _inherits(DateRange, _Component); + + var _super = _createSuper(DateRange); + + function DateRange(props, context) { + var _this; + + _classCallCheck(this, DateRange); + + _this = _super.call(this, props, context); + + _defineProperty(_assertThisInitialized(_this), "calcNewSelection", function (value) { + var isSingleValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; + var focusedRange = _this.props.focusedRange || _this.state.focusedRange; + var _this$props = _this.props, + ranges = _this$props.ranges, + onChange = _this$props.onChange, + maxDate = _this$props.maxDate, + moveRangeOnFirstSelection = _this$props.moveRangeOnFirstSelection, + retainEndDateOnFirstSelection = _this$props.retainEndDateOnFirstSelection, + disabledDates = _this$props.disabledDates; + var focusedRangeIndex = focusedRange[0]; + var selectedRange = ranges[focusedRangeIndex]; + if (!selectedRange || !onChange) return {}; + var startDate = selectedRange.startDate, + endDate = selectedRange.endDate; + var now = new Date(); + var nextFocusRange; + + if (!isSingleValue) { + startDate = value.startDate; + endDate = value.endDate; + } else if (focusedRange[1] === 0) { + // startDate selection + var dayOffset = (0, _differenceInCalendarDays.default)(endDate || now, startDate); + + var calculateEndDate = function calculateEndDate() { + if (moveRangeOnFirstSelection) { + return (0, _addDays.default)(value, dayOffset); + } + + if (retainEndDateOnFirstSelection) { + if (!endDate || (0, _isBefore.default)(value, endDate)) { + return endDate; + } + + return value; + } + + return value || now; + }; + + startDate = value; + endDate = calculateEndDate(); + if (maxDate) endDate = (0, _min.default)([endDate, maxDate]); + nextFocusRange = [focusedRange[0], 1]; + } else { + endDate = value; + } // reverse dates if startDate before endDate + + + var isStartDateSelected = focusedRange[1] === 0; + + if ((0, _isBefore.default)(endDate, startDate)) { + isStartDateSelected = !isStartDateSelected; + var _ref = [endDate, startDate]; + startDate = _ref[0]; + endDate = _ref[1]; + } + + var inValidDatesWithinRange = disabledDates.filter(function (disabledDate) { + return (0, _isWithinInterval.default)(disabledDate, { + start: startDate, + end: endDate + }); + }); + + if (inValidDatesWithinRange.length > 0) { + if (isStartDateSelected) { + startDate = (0, _addDays.default)((0, _max.default)(inValidDatesWithinRange), 1); + } else { + endDate = (0, _addDays.default)((0, _min.default)(inValidDatesWithinRange), -1); + } + } + + if (!nextFocusRange) { + var nextFocusRangeIndex = (0, _utils.findNextRangeIndex)(_this.props.ranges, focusedRange[0]); + nextFocusRange = [nextFocusRangeIndex, 0]; + } + + return { + wasValid: !(inValidDatesWithinRange.length > 0), + range: { + startDate: startDate, + endDate: endDate + }, + nextFocusRange: nextFocusRange + }; + }); + + _defineProperty(_assertThisInitialized(_this), "setSelection", function (value, isSingleValue) { + var _this$props2 = _this.props, + onChange = _this$props2.onChange, + ranges = _this$props2.ranges, + onRangeFocusChange = _this$props2.onRangeFocusChange; + var focusedRange = _this.props.focusedRange || _this.state.focusedRange; + var focusedRangeIndex = focusedRange[0]; + var selectedRange = ranges[focusedRangeIndex]; + if (!selectedRange) return; + + var newSelection = _this.calcNewSelection(value, isSingleValue); + + onChange(_defineProperty({}, selectedRange.key || "range".concat(focusedRangeIndex + 1), _objectSpread(_objectSpread({}, selectedRange), newSelection.range))); + + _this.setState({ + focusedRange: newSelection.nextFocusRange, + preview: null + }); + + onRangeFocusChange && onRangeFocusChange(newSelection.nextFocusRange); + }); + + _defineProperty(_assertThisInitialized(_this), "handleRangeFocusChange", function (focusedRange) { + _this.setState({ + focusedRange: focusedRange + }); + + _this.props.onRangeFocusChange && _this.props.onRangeFocusChange(focusedRange); + }); + + _defineProperty(_assertThisInitialized(_this), "updatePreview", function (val) { + var _ranges$focusedRange$; + + if (!val) { + _this.setState({ + preview: null + }); + + return; + } + + var _this$props3 = _this.props, + rangeColors = _this$props3.rangeColors, + ranges = _this$props3.ranges; + var focusedRange = _this.props.focusedRange || _this.state.focusedRange; + var color = ((_ranges$focusedRange$ = ranges[focusedRange[0]]) === null || _ranges$focusedRange$ === void 0 ? void 0 : _ranges$focusedRange$.color) || rangeColors[focusedRange[0]] || color; + + _this.setState({ + preview: _objectSpread(_objectSpread({}, val.range), {}, { + color: color + }) + }); + }); + + _this.state = { + focusedRange: props.initialFocusedRange || [(0, _utils.findNextRangeIndex)(props.ranges), 0], + preview: null + }; + _this.styles = (0, _utils.generateStyles)([_styles.default, props.classNames]); + return _this; + } + + _createClass(DateRange, [{ + key: "render", + value: function render() { + var _this2 = this; + + return /*#__PURE__*/_react.default.createElement(_Calendar.default, _extends({ + focusedRange: this.state.focusedRange, + onRangeFocusChange: this.handleRangeFocusChange, + preview: this.state.preview, + onPreviewChange: function onPreviewChange(value) { + _this2.updatePreview(value ? _this2.calcNewSelection(value) : null); + } + }, this.props, { + displayMode: "dateRange", + className: (0, _classnames.default)(this.styles.dateRangeWrapper, this.props.className), + onChange: this.setSelection, + updateRange: function updateRange(val) { + return _this2.setSelection(val, false); + }, + ref: function ref(target) { + _this2.calendar = target; + } + })); + } + }]); + + return DateRange; +}(_react.Component); + +DateRange.defaultProps = { + classNames: {}, + ranges: [], + moveRangeOnFirstSelection: false, + retainEndDateOnFirstSelection: false, + rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'], + disabledDates: [] +}; +DateRange.propTypes = _objectSpread(_objectSpread({}, _Calendar.default.propTypes), {}, { + onChange: _propTypes.default.func, + onRangeFocusChange: _propTypes.default.func, + className: _propTypes.default.string, + ranges: _propTypes.default.arrayOf(_DayCell.rangeShape), + moveRangeOnFirstSelection: _propTypes.default.bool, + retainEndDateOnFirstSelection: _propTypes.default.bool +}); +var _default = DateRange; +exports.default = _default; \ No newline at end of file diff --git a/dist/components/DateRange/index.test.js b/dist/components/DateRange/index.test.js new file mode 100644 index 000000000..743eee224 --- /dev/null +++ b/dist/components/DateRange/index.test.js @@ -0,0 +1,104 @@ +"use strict"; + +var _react = _interopRequireDefault(require("react")); + +var _isSameDay = _interopRequireDefault(require("date-fns/isSameDay")); + +var _addDays = _interopRequireDefault(require("date-fns/addDays")); + +var _subDays = _interopRequireDefault(require("date-fns/subDays")); + +var _DateRange = _interopRequireDefault(require("../DateRange")); + +var _reactTestRenderer = _interopRequireDefault(require("react-test-renderer")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +var testRenderer = null; +var instance = null; +var endDate = new Date(); +var startDate = (0, _subDays.default)(endDate, 7); +var commonProps = { + ranges: [{ + startDate: startDate, + endDate: endDate, + key: 'selection' + }], + onChange: function onChange() {}, + moveRangeOnFirstSelection: false +}; + +var compareRanges = function compareRanges(newRange, assertionRange) { + ['startDate', 'endDate'].forEach(function (key) { + if (!newRange[key] || !assertionRange[key]) { + return expect(newRange[key]).toEqual(assertionRange[key]); + } + + return expect((0, _isSameDay.default)(newRange[key], assertionRange[key])).toEqual(true); + }); +}; + +beforeEach(function () { + testRenderer = _reactTestRenderer.default.create( /*#__PURE__*/_react.default.createElement(_DateRange.default, commonProps)); + instance = testRenderer.getInstance(); +}); +describe('DateRange', function () { + test('Should resolve', function () { + expect(_DateRange.default).toEqual(expect.anything()); + }); + test('calculate new selection by resetting end date', function () { + var methodResult = instance.calcNewSelection((0, _subDays.default)(endDate, 10), true); + compareRanges(methodResult.range, { + startDate: (0, _subDays.default)(endDate, 10), + endDate: (0, _subDays.default)(endDate, 10) + }); + }); + test('calculate new selection by resetting end date if start date is not before', function () { + var methodResult = instance.calcNewSelection((0, _addDays.default)(endDate, 2), true); + compareRanges(methodResult.range, { + startDate: (0, _addDays.default)(endDate, 2), + endDate: (0, _addDays.default)(endDate, 2) + }); + }); + test('calculate new selection based on moveRangeOnFirstSelection prop', function () { + testRenderer.update( /*#__PURE__*/_react.default.createElement(_DateRange.default, _extends({}, commonProps, { + moveRangeOnFirstSelection: true + }))); + var methodResult = instance.calcNewSelection((0, _subDays.default)(endDate, 10), true); + compareRanges(methodResult.range, { + startDate: (0, _subDays.default)(endDate, 10), + endDate: (0, _subDays.default)(endDate, 3) + }); + }); + test('calculate new selection by retaining end date, based on retainEndDateOnFirstSelection prop', function () { + testRenderer.update( /*#__PURE__*/_react.default.createElement(_DateRange.default, _extends({}, commonProps, { + retainEndDateOnFirstSelection: true + }))); + var methodResult = instance.calcNewSelection((0, _subDays.default)(endDate, 10), true); + compareRanges(methodResult.range, { + startDate: (0, _subDays.default)(endDate, 10), + endDate: endDate + }); + }); + test('calculate new selection by retaining the unset end date, based on retainEndDateOnFirstSelection prop', function () { + testRenderer.update( /*#__PURE__*/_react.default.createElement(_DateRange.default, _extends({}, commonProps, { + ranges: [_objectSpread(_objectSpread({}, commonProps.ranges[0]), {}, { + endDate: null + })], + retainEndDateOnFirstSelection: true + }))); + var methodResult = instance.calcNewSelection((0, _subDays.default)(endDate, 10), true); + compareRanges(methodResult.range, { + startDate: (0, _subDays.default)(endDate, 10), + endDate: null + }); + }); +}); \ No newline at end of file diff --git a/dist/components/DateRangePicker/index.js b/dist/components/DateRangePicker/index.js new file mode 100644 index 000000000..2210d04d9 --- /dev/null +++ b/dist/components/DateRangePicker/index.js @@ -0,0 +1,116 @@ +"use strict"; + +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +var _DateRange = _interopRequireDefault(require("../DateRange")); + +var _DefinedRange = _interopRequireDefault(require("../DefinedRange")); + +var _utils = require("../../utils"); + +var _classnames = _interopRequireDefault(require("classnames")); + +var _styles = _interopRequireDefault(require("../../styles")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } + +function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } + +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +var DateRangePicker = /*#__PURE__*/function (_Component) { + _inherits(DateRangePicker, _Component); + + var _super = _createSuper(DateRangePicker); + + function DateRangePicker(props) { + var _this; + + _classCallCheck(this, DateRangePicker); + + _this = _super.call(this, props); + _this.state = { + focusedRange: [(0, _utils.findNextRangeIndex)(props.ranges), 0] + }; + _this.styles = (0, _utils.generateStyles)([_styles.default, props.classNames]); + return _this; + } + + _createClass(DateRangePicker, [{ + key: "render", + value: function render() { + var _this2 = this; + + var focusedRange = this.state.focusedRange; + return /*#__PURE__*/_react.default.createElement("div", { + className: (0, _classnames.default)(this.styles.dateRangePickerWrapper, this.props.className) + }, /*#__PURE__*/_react.default.createElement(_DefinedRange.default, _extends({ + focusedRange: focusedRange, + onPreviewChange: function onPreviewChange(value) { + return _this2.dateRange.updatePreview(value ? _this2.dateRange.calcNewSelection(value, typeof value === 'string') : null); + } + }, this.props, { + range: this.props.ranges[focusedRange[0]], + className: undefined + })), /*#__PURE__*/_react.default.createElement(_DateRange.default, _extends({ + onRangeFocusChange: function onRangeFocusChange(focusedRange) { + return _this2.setState({ + focusedRange: focusedRange + }); + }, + focusedRange: focusedRange + }, this.props, { + ref: function ref(t) { + return _this2.dateRange = t; + }, + className: undefined + }))); + } + }]); + + return DateRangePicker; +}(_react.Component); + +DateRangePicker.defaultProps = {}; +DateRangePicker.propTypes = _objectSpread(_objectSpread(_objectSpread({}, _DateRange.default.propTypes), _DefinedRange.default.propTypes), {}, { + className: _propTypes.default.string +}); +var _default = DateRangePicker; +exports.default = _default; \ No newline at end of file diff --git a/dist/components/DayCell/index.js b/dist/components/DayCell/index.js new file mode 100644 index 000000000..0b02de69d --- /dev/null +++ b/dist/components/DayCell/index.js @@ -0,0 +1,321 @@ +"use strict"; + +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = exports.rangeShape = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +var _classnames4 = _interopRequireDefault(require("classnames")); + +var _endOfDay = _interopRequireDefault(require("date-fns/endOfDay")); + +var _isBefore = _interopRequireDefault(require("date-fns/isBefore")); + +var _isAfter = _interopRequireDefault(require("date-fns/isAfter")); + +var _isSameDay = _interopRequireDefault(require("date-fns/isSameDay")); + +var _format = _interopRequireDefault(require("date-fns/format")); + +var _startOfDay = _interopRequireDefault(require("date-fns/startOfDay")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } + +function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); } + +function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } + +function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); } + +function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); } + +function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); } + +function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +var DayCell = /*#__PURE__*/function (_Component) { + _inherits(DayCell, _Component); + + var _super = _createSuper(DayCell); + + function DayCell(props, context) { + var _this; + + _classCallCheck(this, DayCell); + + _this = _super.call(this, props, context); + + _defineProperty(_assertThisInitialized(_this), "handleKeyEvent", function (event) { + var _this$props = _this.props, + day = _this$props.day, + onMouseDown = _this$props.onMouseDown, + onMouseUp = _this$props.onMouseUp; + + if ([13 + /* space */ + , 32 + /* enter */ + ].includes(event.keyCode)) { + if (event.type === 'keydown') onMouseDown(day);else onMouseUp(day); + } + }); + + _defineProperty(_assertThisInitialized(_this), "handleMouseEvent", function (event) { + var _this$props2 = _this.props, + day = _this$props2.day, + disabled = _this$props2.disabled, + onPreviewChange = _this$props2.onPreviewChange, + onMouseEnter = _this$props2.onMouseEnter, + onMouseDown = _this$props2.onMouseDown, + onMouseUp = _this$props2.onMouseUp; + var stateChanges = {}; + + if (disabled) { + onPreviewChange(); + return; + } + + switch (event.type) { + case 'mouseenter': + onMouseEnter(day); + onPreviewChange(day); + stateChanges.hover = true; + break; + + case 'blur': + case 'mouseleave': + stateChanges.hover = false; + break; + + case 'mousedown': + stateChanges.active = true; + onMouseDown(day); + break; + + case 'mouseup': + event.stopPropagation(); + stateChanges.active = false; + onMouseUp(day); + break; + + case 'focus': + onPreviewChange(day); + break; + } + + if (Object.keys(stateChanges).length) { + _this.setState(stateChanges); + } + }); + + _defineProperty(_assertThisInitialized(_this), "getClassNames", function () { + var _classnames; + + var _this$props3 = _this.props, + isPassive = _this$props3.isPassive, + isToday = _this$props3.isToday, + isWeekend = _this$props3.isWeekend, + isStartOfWeek = _this$props3.isStartOfWeek, + isEndOfWeek = _this$props3.isEndOfWeek, + isStartOfMonth = _this$props3.isStartOfMonth, + isEndOfMonth = _this$props3.isEndOfMonth, + disabled = _this$props3.disabled, + styles = _this$props3.styles; + return (0, _classnames4.default)(styles.day, (_classnames = {}, _defineProperty(_classnames, styles.dayPassive, isPassive), _defineProperty(_classnames, styles.dayDisabled, disabled), _defineProperty(_classnames, styles.dayToday, isToday), _defineProperty(_classnames, styles.dayWeekend, isWeekend), _defineProperty(_classnames, styles.dayStartOfWeek, isStartOfWeek), _defineProperty(_classnames, styles.dayEndOfWeek, isEndOfWeek), _defineProperty(_classnames, styles.dayStartOfMonth, isStartOfMonth), _defineProperty(_classnames, styles.dayEndOfMonth, isEndOfMonth), _defineProperty(_classnames, styles.dayHovered, _this.state.hover), _defineProperty(_classnames, styles.dayActive, _this.state.active), _classnames)); + }); + + _defineProperty(_assertThisInitialized(_this), "renderPreviewPlaceholder", function () { + var _classnames2; + + var _this$props4 = _this.props, + preview = _this$props4.preview, + day = _this$props4.day, + styles = _this$props4.styles; + if (!preview) return null; + var startDate = preview.startDate ? (0, _endOfDay.default)(preview.startDate) : null; + var endDate = preview.endDate ? (0, _startOfDay.default)(preview.endDate) : null; + var isInRange = (!startDate || (0, _isAfter.default)(day, startDate)) && (!endDate || (0, _isBefore.default)(day, endDate)); + var isStartEdge = !isInRange && (0, _isSameDay.default)(day, startDate); + var isEndEdge = !isInRange && (0, _isSameDay.default)(day, endDate); + return /*#__PURE__*/_react.default.createElement("span", { + className: (0, _classnames4.default)((_classnames2 = {}, _defineProperty(_classnames2, styles.dayStartPreview, isStartEdge), _defineProperty(_classnames2, styles.dayInPreview, isInRange), _defineProperty(_classnames2, styles.dayEndPreview, isEndEdge), _classnames2)), + style: { + color: preview.color + } + }); + }); + + _defineProperty(_assertThisInitialized(_this), "renderSelectionPlaceholders", function () { + var _this$props5 = _this.props, + styles = _this$props5.styles, + ranges = _this$props5.ranges, + day = _this$props5.day; + + if (_this.props.displayMode === 'date') { + var isSelected = (0, _isSameDay.default)(_this.props.day, _this.props.date); + return isSelected ? /*#__PURE__*/_react.default.createElement("span", { + className: styles.selected, + style: { + color: _this.props.color + } + }) : null; + } + + var inRanges = ranges.reduce(function (result, range) { + var startDate = range.startDate; + var endDate = range.endDate; + + if (startDate && endDate && (0, _isBefore.default)(endDate, startDate)) { + var _ref = [endDate, startDate]; + startDate = _ref[0]; + endDate = _ref[1]; + } + + startDate = startDate ? (0, _endOfDay.default)(startDate) : null; + endDate = endDate ? (0, _startOfDay.default)(endDate) : null; + var isInRange = (!startDate || (0, _isAfter.default)(day, startDate)) && (!endDate || (0, _isBefore.default)(day, endDate)); + var isStartEdge = !isInRange && (0, _isSameDay.default)(day, startDate); + var isEndEdge = !isInRange && (0, _isSameDay.default)(day, endDate); + + if (isInRange || isStartEdge || isEndEdge) { + return [].concat(_toConsumableArray(result), [_objectSpread({ + isStartEdge: isStartEdge, + isEndEdge: isEndEdge, + isInRange: isInRange + }, range)]); + } + + return result; + }, []); + return inRanges.map(function (range, i) { + var _classnames3; + + return /*#__PURE__*/_react.default.createElement("span", { + key: i, + className: (0, _classnames4.default)((_classnames3 = {}, _defineProperty(_classnames3, styles.startEdge, range.isStartEdge), _defineProperty(_classnames3, styles.endEdge, range.isEndEdge), _defineProperty(_classnames3, styles.inRange, range.isInRange), _classnames3)), + style: { + color: range.color || _this.props.color + } + }); + }); + }); + + _this.state = { + hover: false, + active: false + }; + return _this; + } + + _createClass(DayCell, [{ + key: "render", + value: function render() { + var dayContentRenderer = this.props.dayContentRenderer; + return /*#__PURE__*/_react.default.createElement("button", _extends({ + type: "button", + onMouseEnter: this.handleMouseEvent, + onMouseLeave: this.handleMouseEvent, + onFocus: this.handleMouseEvent, + onMouseDown: this.handleMouseEvent, + onMouseUp: this.handleMouseEvent, + onBlur: this.handleMouseEvent, + onPauseCapture: this.handleMouseEvent, + onKeyDown: this.handleKeyEvent, + onKeyUp: this.handleKeyEvent, + className: this.getClassNames(this.props.styles) + }, this.props.disabled || this.props.isPassive ? { + tabIndex: -1 + } : {}, { + style: { + color: this.props.color + } + }), this.renderSelectionPlaceholders(), this.renderPreviewPlaceholder(), /*#__PURE__*/_react.default.createElement("span", { + className: this.props.styles.dayNumber + }, (dayContentRenderer === null || dayContentRenderer === void 0 ? void 0 : dayContentRenderer(this.props.day)) || /*#__PURE__*/_react.default.createElement("span", null, (0, _format.default)(this.props.day, this.props.dayDisplayFormat)))); + } + }]); + + return DayCell; +}(_react.Component); + +DayCell.defaultProps = {}; + +var rangeShape = _propTypes.default.shape({ + startDate: _propTypes.default.object, + endDate: _propTypes.default.object, + color: _propTypes.default.string, + key: _propTypes.default.string, + autoFocus: _propTypes.default.bool, + disabled: _propTypes.default.bool, + showDateDisplay: _propTypes.default.bool +}); + +exports.rangeShape = rangeShape; +DayCell.propTypes = { + day: _propTypes.default.object.isRequired, + dayDisplayFormat: _propTypes.default.string, + date: _propTypes.default.object, + ranges: _propTypes.default.arrayOf(rangeShape), + preview: _propTypes.default.shape({ + startDate: _propTypes.default.object, + endDate: _propTypes.default.object, + color: _propTypes.default.string + }), + onPreviewChange: _propTypes.default.func, + previewColor: _propTypes.default.string, + disabled: _propTypes.default.bool, + isPassive: _propTypes.default.bool, + isToday: _propTypes.default.bool, + isWeekend: _propTypes.default.bool, + isStartOfWeek: _propTypes.default.bool, + isEndOfWeek: _propTypes.default.bool, + isStartOfMonth: _propTypes.default.bool, + isEndOfMonth: _propTypes.default.bool, + color: _propTypes.default.string, + displayMode: _propTypes.default.oneOf(['dateRange', 'date']), + styles: _propTypes.default.object, + onMouseDown: _propTypes.default.func, + onMouseUp: _propTypes.default.func, + onMouseEnter: _propTypes.default.func, + dayContentRenderer: _propTypes.default.func +}; +var _default = DayCell; +exports.default = _default; \ No newline at end of file diff --git a/dist/components/DefinedRange/index.js b/dist/components/DefinedRange/index.js new file mode 100644 index 000000000..014a20432 --- /dev/null +++ b/dist/components/DefinedRange/index.js @@ -0,0 +1,220 @@ +"use strict"; + +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +var _styles = _interopRequireDefault(require("../../styles")); + +var _defaultRanges = require("../../defaultRanges"); + +var _DayCell = require("../DayCell"); + +var _InputRangeField = _interopRequireDefault(require("../InputRangeField")); + +var _classnames = _interopRequireDefault(require("classnames")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } + +function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } + +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +var DefinedRange = /*#__PURE__*/function (_Component) { + _inherits(DefinedRange, _Component); + + var _super = _createSuper(DefinedRange); + + function DefinedRange(props) { + var _this; + + _classCallCheck(this, DefinedRange); + + _this = _super.call(this, props); + + _defineProperty(_assertThisInitialized(_this), "handleRangeChange", function (range) { + var _this$props = _this.props, + onChange = _this$props.onChange, + ranges = _this$props.ranges, + focusedRange = _this$props.focusedRange; + var selectedRange = ranges[focusedRange[0]]; + if (!onChange || !selectedRange) return; + onChange(_defineProperty({}, selectedRange.key || "range".concat(focusedRange[0] + 1), _objectSpread(_objectSpread({}, selectedRange), range))); + }); + + _this.state = { + rangeOffset: 0, + focusedInput: -1 + }; + return _this; + } + + _createClass(DefinedRange, [{ + key: "getRangeOptionValue", + value: function getRangeOptionValue(option) { + var _this$props2 = this.props, + _this$props2$ranges = _this$props2.ranges, + ranges = _this$props2$ranges === void 0 ? [] : _this$props2$ranges, + _this$props2$focusedR = _this$props2.focusedRange, + focusedRange = _this$props2$focusedR === void 0 ? [] : _this$props2$focusedR; + + if (typeof option.getCurrentValue !== 'function') { + return ''; + } + + var selectedRange = ranges[focusedRange[0]] || {}; + return option.getCurrentValue(selectedRange) || ''; + } + }, { + key: "getSelectedRange", + value: function getSelectedRange(ranges, staticRange) { + var focusedRangeIndex = ranges.findIndex(function (range) { + if (!range.startDate || !range.endDate || range.disabled) return false; + return staticRange.isSelected(range); + }); + var selectedRange = ranges[focusedRangeIndex]; + return { + selectedRange: selectedRange, + focusedRangeIndex: focusedRangeIndex + }; + } + }, { + key: "render", + value: function render() { + var _this2 = this; + + var _this$props3 = this.props, + headerContent = _this$props3.headerContent, + footerContent = _this$props3.footerContent, + onPreviewChange = _this$props3.onPreviewChange, + inputRanges = _this$props3.inputRanges, + staticRanges = _this$props3.staticRanges, + ranges = _this$props3.ranges, + renderStaticRangeLabel = _this$props3.renderStaticRangeLabel, + rangeColors = _this$props3.rangeColors, + className = _this$props3.className; + return /*#__PURE__*/_react.default.createElement("div", { + className: (0, _classnames.default)(_styles.default.definedRangesWrapper, className) + }, headerContent, /*#__PURE__*/_react.default.createElement("div", { + className: _styles.default.staticRanges + }, staticRanges.map(function (staticRange, i) { + var _this2$getSelectedRan = _this2.getSelectedRange(ranges, staticRange), + selectedRange = _this2$getSelectedRan.selectedRange, + focusedRangeIndex = _this2$getSelectedRan.focusedRangeIndex; + + var labelContent; + + if (staticRange.hasCustomRendering) { + labelContent = renderStaticRangeLabel(staticRange); + } else { + labelContent = staticRange.label; + } + + return /*#__PURE__*/_react.default.createElement("button", { + type: "button", + className: (0, _classnames.default)(_styles.default.staticRange, _defineProperty({}, _styles.default.staticRangeSelected, Boolean(selectedRange))), + style: { + color: selectedRange ? selectedRange.color || rangeColors[focusedRangeIndex] : null + }, + key: i, + onClick: function onClick() { + return _this2.handleRangeChange(staticRange.range(_this2.props)); + }, + onFocus: function onFocus() { + return onPreviewChange && onPreviewChange(staticRange.range(_this2.props)); + }, + onMouseOver: function onMouseOver() { + return onPreviewChange && onPreviewChange(staticRange.range(_this2.props)); + }, + onMouseLeave: function onMouseLeave() { + onPreviewChange && onPreviewChange(); + } + }, /*#__PURE__*/_react.default.createElement("span", { + tabIndex: -1, + className: _styles.default.staticRangeLabel + }, labelContent)); + })), /*#__PURE__*/_react.default.createElement("div", { + className: _styles.default.inputRanges + }, inputRanges.map(function (rangeOption, i) { + return /*#__PURE__*/_react.default.createElement(_InputRangeField.default, { + key: i, + styles: _styles.default, + label: rangeOption.label, + onFocus: function onFocus() { + return _this2.setState({ + focusedInput: i, + rangeOffset: 0 + }); + }, + onBlur: function onBlur() { + return _this2.setState({ + rangeOffset: 0 + }); + }, + onChange: function onChange(value) { + return _this2.handleRangeChange(rangeOption.range(value, _this2.props)); + }, + value: _this2.getRangeOptionValue(rangeOption) + }); + })), footerContent); + } + }]); + + return DefinedRange; +}(_react.Component); + +DefinedRange.propTypes = { + inputRanges: _propTypes.default.array, + staticRanges: _propTypes.default.array, + ranges: _propTypes.default.arrayOf(_DayCell.rangeShape), + focusedRange: _propTypes.default.arrayOf(_propTypes.default.number), + onPreviewChange: _propTypes.default.func, + onChange: _propTypes.default.func, + footerContent: _propTypes.default.any, + headerContent: _propTypes.default.any, + rangeColors: _propTypes.default.arrayOf(_propTypes.default.string), + className: _propTypes.default.string, + renderStaticRangeLabel: _propTypes.default.func +}; +DefinedRange.defaultProps = { + inputRanges: _defaultRanges.defaultInputRanges, + staticRanges: _defaultRanges.defaultStaticRanges, + ranges: [], + rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'], + focusedRange: [0, 0] +}; +var _default = DefinedRange; +exports.default = _default; \ No newline at end of file diff --git a/dist/components/DefinedRange/index.test.js b/dist/components/DefinedRange/index.test.js new file mode 100644 index 000000000..9cfae20a3 --- /dev/null +++ b/dist/components/DefinedRange/index.test.js @@ -0,0 +1,115 @@ +"use strict"; + +var _react = _interopRequireDefault(require("react")); + +var _enzyme = require("enzyme"); + +var _DefinedRange = _interopRequireDefault(require("../DefinedRange")); + +var _isSameDay = _interopRequireDefault(require("date-fns/isSameDay")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +describe('DefinedRange tests', function () { + test('Should call "renderStaticRangeLabel" callback correct amount of times according to the "hasCustomRendering" option', function () { + var renderStaticRangeLabel = jest.fn(); + (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DefinedRange.default, { + staticRanges: [{ + label: 'Dynamic Label', + range: {}, + isSelected: function isSelected(range) { + var definedRange = this.range(); + return (0, _isSameDay.default)(range.startDate, definedRange.startDate) && (0, _isSameDay.default)(range.endDate, definedRange.endDate); + }, + hasCustomRendering: true + }, { + label: 'Static Label', + range: {}, + isSelected: function isSelected(range) { + var definedRange = this.range(); + return (0, _isSameDay.default)(range.startDate, definedRange.startDate) && (0, _isSameDay.default)(range.endDate, definedRange.endDate); + } + }, { + label: 'Hede', + range: {}, + isSelected: function isSelected(range) { + var definedRange = this.range(); + return (0, _isSameDay.default)(range.startDate, definedRange.startDate) && (0, _isSameDay.default)(range.endDate, definedRange.endDate); + }, + hasCustomRendering: true + }], + renderStaticRangeLabel: renderStaticRangeLabel + })); + expect(renderStaticRangeLabel).toHaveBeenCalledTimes(2); + }); + test('Should render dynamic static label contents correctly', function () { + var renderItalicLabelContent = function renderItalicLabelContent() { + return /*#__PURE__*/_react.default.createElement("i", { + className: 'italic-label-content' + }, 'Italic Content'); + }; + + var renderBoldLabelContent = function renderBoldLabelContent() { + return /*#__PURE__*/_react.default.createElement("b", { + className: 'bold-label-content' + }, 'Bold Content'); + }; + + var renderSomethingElse = function renderSomethingElse() { + return /*#__PURE__*/_react.default.createElement("img", { + className: 'random-image' + }); + }; + + var renderStaticRangeLabel = function renderStaticRangeLabel(staticRange) { + var result; + + if (staticRange.id === 'italic') { + result = renderItalicLabelContent(); + } else if (staticRange.id === 'bold') { + result = renderBoldLabelContent(); + } else { + result = renderSomethingElse(); + } + + return result; + }; + + var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_DefinedRange.default, { + staticRanges: [{ + id: 'italic', + range: {}, + isSelected: function isSelected(range) { + var definedRange = this.range(); + return (0, _isSameDay.default)(range.startDate, definedRange.startDate) && (0, _isSameDay.default)(range.endDate, definedRange.endDate); + }, + hasCustomRendering: true + }, { + label: 'Static Label', + range: {}, + isSelected: function isSelected(range) { + var definedRange = this.range(); + return (0, _isSameDay.default)(range.startDate, definedRange.startDate) && (0, _isSameDay.default)(range.endDate, definedRange.endDate); + } + }, { + id: 'whatever', + range: {}, + isSelected: function isSelected(range) { + var definedRange = this.range(); + return (0, _isSameDay.default)(range.startDate, definedRange.startDate) && (0, _isSameDay.default)(range.endDate, definedRange.endDate); + }, + hasCustomRendering: true + }, { + id: 'bold', + range: {}, + isSelected: function isSelected(range) { + var definedRange = this.range(); + return (0, _isSameDay.default)(range.startDate, definedRange.startDate) && (0, _isSameDay.default)(range.endDate, definedRange.endDate); + }, + hasCustomRendering: true + }], + renderStaticRangeLabel: renderStaticRangeLabel + })); + expect(wrapper).toMatchSnapshot(); + }); +}); \ No newline at end of file diff --git a/dist/components/InputRangeField/index.js b/dist/components/InputRangeField/index.js new file mode 100644 index 000000000..0a3166029 --- /dev/null +++ b/dist/components/InputRangeField/index.js @@ -0,0 +1,124 @@ +"use strict"; + +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } + +function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +var MIN = 0; +var MAX = 99999; + +var InputRangeField = /*#__PURE__*/function (_Component) { + _inherits(InputRangeField, _Component); + + var _super = _createSuper(InputRangeField); + + function InputRangeField(props, context) { + var _this; + + _classCallCheck(this, InputRangeField); + + _this = _super.call(this, props, context); + + _defineProperty(_assertThisInitialized(_this), "onChange", function (e) { + var onChange = _this.props.onChange; + var value = parseInt(e.target.value, 10); + value = isNaN(value) ? 0 : Math.max(Math.min(MAX, value), MIN); + onChange(value); + }); + + return _this; + } + + _createClass(InputRangeField, [{ + key: "shouldComponentUpdate", + value: function shouldComponentUpdate(nextProps) { + var _this$props = this.props, + value = _this$props.value, + label = _this$props.label, + placeholder = _this$props.placeholder; + return value !== nextProps.value || label !== nextProps.label || placeholder !== nextProps.placeholder; + } + }, { + key: "render", + value: function render() { + var _this$props2 = this.props, + label = _this$props2.label, + placeholder = _this$props2.placeholder, + value = _this$props2.value, + styles = _this$props2.styles, + onBlur = _this$props2.onBlur, + onFocus = _this$props2.onFocus; + return /*#__PURE__*/_react.default.createElement("div", { + className: styles.inputRange + }, /*#__PURE__*/_react.default.createElement("input", { + className: styles.inputRangeInput, + placeholder: placeholder, + value: value, + min: MIN, + max: MAX, + onChange: this.onChange, + onFocus: onFocus, + onBlur: onBlur + }), /*#__PURE__*/_react.default.createElement("span", { + className: styles.inputRangeLabel + }, label)); + } + }]); + + return InputRangeField; +}(_react.Component); + +InputRangeField.propTypes = { + value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), + label: _propTypes.default.oneOfType([_propTypes.default.element, _propTypes.default.node]).isRequired, + placeholder: _propTypes.default.string, + styles: _propTypes.default.shape({ + inputRange: _propTypes.default.string, + inputRangeInput: _propTypes.default.string, + inputRangeLabel: _propTypes.default.string + }).isRequired, + onBlur: _propTypes.default.func.isRequired, + onFocus: _propTypes.default.func.isRequired, + onChange: _propTypes.default.func.isRequired +}; +InputRangeField.defaultProps = { + value: '', + placeholder: '-' +}; +var _default = InputRangeField; +exports.default = _default; \ No newline at end of file diff --git a/dist/components/InputRangeField/index.test.js b/dist/components/InputRangeField/index.test.js new file mode 100644 index 000000000..ee9af016c --- /dev/null +++ b/dist/components/InputRangeField/index.test.js @@ -0,0 +1,122 @@ +"use strict"; + +var _react = _interopRequireDefault(require("react")); + +var _enzyme = require("enzyme"); + +var _InputRangeField = _interopRequireDefault(require("../InputRangeField")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var styles = { + inputRange: 'range', + inputRangeInput: 'input', + inputRangeLabel: 'label' +}; + +var toChangeEvent = function toChangeEvent(value) { + return { + target: { + value: value + } + }; +}; + +describe('InputRangeField tests', function () { + test('Should parse input value to number', function () { + var onChange = jest.fn(); + var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_InputRangeField.default, { + label: "Input label", + styles: styles, + onChange: onChange, + onFocus: jest.fn(), + onBlur: jest.fn() + })); + wrapper.find('input').simulate('change', toChangeEvent('3')); + expect(onChange).lastCalledWith(3); + wrapper.find('input').simulate('change', toChangeEvent(12)); + expect(onChange).lastCalledWith(12); + wrapper.find('input').simulate('change', toChangeEvent('')); + expect(onChange).lastCalledWith(0); + wrapper.find('input').simulate('change', toChangeEvent('invalid number')); + expect(onChange).lastCalledWith(0); + wrapper.find('input').simulate('change', toChangeEvent(-12)); + expect(onChange).lastCalledWith(0); + wrapper.find('input').simulate('change', toChangeEvent(99999999)); + expect(onChange).lastCalledWith(99999); + expect(onChange).toHaveBeenCalledTimes(6); + expect(wrapper).toMatchSnapshot(); + }); + test('Should rerender when props change', function () { + var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_InputRangeField.default, { + value: 12, + placeholder: "Placeholder", + label: "Input label", + styles: styles, + onChange: jest.fn(), + onFocus: jest.fn(), + onBlur: jest.fn() + })); + expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('value')).toEqual(12); + expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('placeholder')).toEqual('Placeholder'); + expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Input label'); + wrapper.setProps({ + value: '32' + }); + expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('value')).toEqual('32'); + expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('placeholder')).toEqual('Placeholder'); + expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Input label'); + wrapper.setProps({ + placeholder: '-' + }); + expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('value')).toEqual('32'); + expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('placeholder')).toEqual('-'); + expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Input label'); + wrapper.setProps({ + label: 'Label' + }); + expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('value')).toEqual('32'); + expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('placeholder')).toEqual('-'); + expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Label'); + }); + test('Should render the label as a Component', function () { + var Label = function Label() { + return /*#__PURE__*/_react.default.createElement("span", { + className: "input-range-field-label" + }, "Input label"); + }; + + var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_InputRangeField.default, { + value: 12, + placeholder: "Placeholder", + label: /*#__PURE__*/_react.default.createElement(Label, null), + styles: styles, + onChange: jest.fn(), + onFocus: jest.fn(), + onBlur: jest.fn() + })); + expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('value')).toEqual(12); + expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('placeholder')).toEqual('Placeholder'); + expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Input label'); + expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Input label'); + expect(wrapper.find(".input-range-field-label").text()).toEqual('Input label'); + wrapper.setProps({ + value: '32' + }); + expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('value')).toEqual('32'); + expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('placeholder')).toEqual('Placeholder'); + expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Input label'); + wrapper.setProps({ + placeholder: '-' + }); + expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('value')).toEqual('32'); + expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('placeholder')).toEqual('-'); + expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Input label'); + wrapper.setProps({ + label: 'Label' + }); + expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('value')).toEqual('32'); + expect(wrapper.find(".".concat(styles.inputRangeInput)).prop('placeholder')).toEqual('-'); + expect(wrapper.find(".".concat(styles.inputRangeLabel)).text()).toEqual('Label'); + }); +}); \ No newline at end of file diff --git a/dist/components/Month/index.js b/dist/components/Month/index.js new file mode 100644 index 000000000..b65979b56 --- /dev/null +++ b/dist/components/Month/index.js @@ -0,0 +1,212 @@ +"use strict"; + +function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; + +var _react = _interopRequireWildcard(require("react")); + +var _propTypes = _interopRequireDefault(require("prop-types")); + +var _DayCell = _interopRequireWildcard(require("../DayCell")); + +var _eachDayOfInterval = _interopRequireDefault(require("date-fns/eachDayOfInterval")); + +var _isWithinInterval = _interopRequireDefault(require("date-fns/isWithinInterval")); + +var _isWeekend = _interopRequireDefault(require("date-fns/isWeekend")); + +var _isAfter = _interopRequireDefault(require("date-fns/isAfter")); + +var _isSameDay = _interopRequireDefault(require("date-fns/isSameDay")); + +var _isBefore = _interopRequireDefault(require("date-fns/isBefore")); + +var _endOfWeek = _interopRequireDefault(require("date-fns/endOfWeek")); + +var _startOfWeek = _interopRequireDefault(require("date-fns/startOfWeek")); + +var _endOfDay = _interopRequireDefault(require("date-fns/endOfDay")); + +var _startOfDay = _interopRequireDefault(require("date-fns/startOfDay")); + +var _format = _interopRequireDefault(require("date-fns/format")); + +var _utils = require("../../utils"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } + +function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } + +function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } + +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } + +function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } + +function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } + +function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } + +function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } + +function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } + +function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } + +function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } + +function renderWeekdays(styles, dateOptions, weekdayDisplayFormat) { + var now = new Date(); + return /*#__PURE__*/_react.default.createElement("div", { + className: styles.weekDays + }, (0, _eachDayOfInterval.default)({ + start: (0, _startOfWeek.default)(now, dateOptions), + end: (0, _endOfWeek.default)(now, dateOptions) + }).map(function (day, i) { + return /*#__PURE__*/_react.default.createElement("span", { + className: styles.weekDay, + key: i + }, (0, _format.default)(day, weekdayDisplayFormat, dateOptions)); + })); +} + +var Month = /*#__PURE__*/function (_PureComponent) { + _inherits(Month, _PureComponent); + + var _super = _createSuper(Month); + + function Month() { + _classCallCheck(this, Month); + + return _super.apply(this, arguments); + } + + _createClass(Month, [{ + key: "render", + value: function render() { + var _this = this; + + var now = new Date(); + var _this$props = this.props, + displayMode = _this$props.displayMode, + focusedRange = _this$props.focusedRange, + drag = _this$props.drag, + styles = _this$props.styles, + disabledDates = _this$props.disabledDates, + disabledDay = _this$props.disabledDay; + var minDate = this.props.minDate && (0, _startOfDay.default)(this.props.minDate); + var maxDate = this.props.maxDate && (0, _endOfDay.default)(this.props.maxDate); + var monthDisplay = (0, _utils.getMonthDisplayRange)(this.props.month, this.props.dateOptions, this.props.fixedHeight); + var ranges = this.props.ranges; + + if (displayMode === 'dateRange' && drag.status) { + var _drag$range = drag.range, + startDate = _drag$range.startDate, + endDate = _drag$range.endDate; + ranges = ranges.map(function (range, i) { + if (i !== focusedRange[0]) return range; + return _objectSpread(_objectSpread({}, range), {}, { + startDate: startDate, + endDate: endDate + }); + }); + } + + var showPreview = this.props.showPreview && !drag.disablePreview; + return /*#__PURE__*/_react.default.createElement("div", { + className: styles.month, + style: this.props.style + }, this.props.showMonthName ? /*#__PURE__*/_react.default.createElement("div", { + className: styles.monthName + }, (0, _format.default)(this.props.month, this.props.monthDisplayFormat, this.props.dateOptions)) : null, this.props.showWeekDays && renderWeekdays(styles, this.props.dateOptions, this.props.weekdayDisplayFormat), /*#__PURE__*/_react.default.createElement("div", { + className: styles.days, + onMouseLeave: this.props.onMouseLeave + }, (0, _eachDayOfInterval.default)({ + start: monthDisplay.start, + end: monthDisplay.end + }).map(function (day, index) { + var isStartOfMonth = (0, _isSameDay.default)(day, monthDisplay.startDateOfMonth); + var isEndOfMonth = (0, _isSameDay.default)(day, monthDisplay.endDateOfMonth); + var isOutsideMinMax = minDate && (0, _isBefore.default)(day, minDate) || maxDate && (0, _isAfter.default)(day, maxDate); + var isDisabledSpecifically = disabledDates.some(function (disabledDate) { + return (0, _isSameDay.default)(disabledDate, day); + }); + var isDisabledDay = disabledDay(day); + return /*#__PURE__*/_react.default.createElement(_DayCell.default, _extends({}, _this.props, { + ranges: ranges, + day: day, + preview: showPreview ? _this.props.preview : null, + isWeekend: (0, _isWeekend.default)(day, _this.props.dateOptions), + isToday: (0, _isSameDay.default)(day, now), + isStartOfWeek: (0, _isSameDay.default)(day, (0, _startOfWeek.default)(day, _this.props.dateOptions)), + isEndOfWeek: (0, _isSameDay.default)(day, (0, _endOfWeek.default)(day, _this.props.dateOptions)), + isStartOfMonth: isStartOfMonth, + isEndOfMonth: isEndOfMonth, + key: index, + disabled: isOutsideMinMax || isDisabledSpecifically || isDisabledDay, + isPassive: !(0, _isWithinInterval.default)(day, { + start: monthDisplay.startDateOfMonth, + end: monthDisplay.endDateOfMonth + }), + styles: styles, + onMouseDown: _this.props.onDragSelectionStart, + onMouseUp: _this.props.onDragSelectionEnd, + onMouseEnter: _this.props.onDragSelectionMove, + dragRange: drag.range, + drag: drag.status + })); + }))); + } + }]); + + return Month; +}(_react.PureComponent); + +Month.defaultProps = {}; +Month.propTypes = { + style: _propTypes.default.object, + styles: _propTypes.default.object, + month: _propTypes.default.object, + drag: _propTypes.default.object, + dateOptions: _propTypes.default.object, + disabledDates: _propTypes.default.array, + disabledDay: _propTypes.default.func, + preview: _propTypes.default.shape({ + startDate: _propTypes.default.object, + endDate: _propTypes.default.object + }), + showPreview: _propTypes.default.bool, + displayMode: _propTypes.default.oneOf(['dateRange', 'date']), + minDate: _propTypes.default.object, + maxDate: _propTypes.default.object, + ranges: _propTypes.default.arrayOf(_DayCell.rangeShape), + focusedRange: _propTypes.default.arrayOf(_propTypes.default.number), + onDragSelectionStart: _propTypes.default.func, + onDragSelectionEnd: _propTypes.default.func, + onDragSelectionMove: _propTypes.default.func, + onMouseLeave: _propTypes.default.func, + monthDisplayFormat: _propTypes.default.string, + weekdayDisplayFormat: _propTypes.default.string, + dayDisplayFormat: _propTypes.default.string, + showWeekDays: _propTypes.default.bool, + showMonthName: _propTypes.default.bool, + fixedHeight: _propTypes.default.bool +}; +var _default = Month; +exports.default = _default; \ No newline at end of file diff --git a/dist/defaultRanges.js b/dist/defaultRanges.js new file mode 100644 index 000000000..ff0260ac4 --- /dev/null +++ b/dist/defaultRanges.js @@ -0,0 +1,143 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.createStaticRanges = createStaticRanges; +exports.defaultInputRanges = exports.defaultStaticRanges = void 0; + +var _differenceInCalendarDays = _interopRequireDefault(require("date-fns/differenceInCalendarDays")); + +var _isSameDay = _interopRequireDefault(require("date-fns/isSameDay")); + +var _endOfWeek = _interopRequireDefault(require("date-fns/endOfWeek")); + +var _startOfWeek = _interopRequireDefault(require("date-fns/startOfWeek")); + +var _addMonths = _interopRequireDefault(require("date-fns/addMonths")); + +var _endOfMonth = _interopRequireDefault(require("date-fns/endOfMonth")); + +var _startOfMonth = _interopRequireDefault(require("date-fns/startOfMonth")); + +var _startOfDay = _interopRequireDefault(require("date-fns/startOfDay")); + +var _endOfDay = _interopRequireDefault(require("date-fns/endOfDay")); + +var _addDays = _interopRequireDefault(require("date-fns/addDays")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } + +function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } + +var defineds = { + startOfWeek: (0, _startOfWeek.default)(new Date()), + endOfWeek: (0, _endOfWeek.default)(new Date()), + startOfLastWeek: (0, _startOfWeek.default)((0, _addDays.default)(new Date(), -7)), + endOfLastWeek: (0, _endOfWeek.default)((0, _addDays.default)(new Date(), -7)), + startOfToday: (0, _startOfDay.default)(new Date()), + endOfToday: (0, _endOfDay.default)(new Date()), + startOfYesterday: (0, _startOfDay.default)((0, _addDays.default)(new Date(), -1)), + endOfYesterday: (0, _endOfDay.default)((0, _addDays.default)(new Date(), -1)), + startOfMonth: (0, _startOfMonth.default)(new Date()), + endOfMonth: (0, _endOfMonth.default)(new Date()), + startOfLastMonth: (0, _startOfMonth.default)((0, _addMonths.default)(new Date(), -1)), + endOfLastMonth: (0, _endOfMonth.default)((0, _addMonths.default)(new Date(), -1)) +}; +var staticRangeHandler = { + range: {}, + isSelected: function isSelected(range) { + var definedRange = this.range(); + return (0, _isSameDay.default)(range.startDate, definedRange.startDate) && (0, _isSameDay.default)(range.endDate, definedRange.endDate); + } +}; + +function createStaticRanges(ranges) { + return ranges.map(function (range) { + return _objectSpread(_objectSpread({}, staticRangeHandler), range); + }); +} + +var defaultStaticRanges = createStaticRanges([{ + label: 'Today', + range: function range() { + return { + startDate: defineds.startOfToday, + endDate: defineds.endOfToday + }; + } +}, { + label: 'Yesterday', + range: function range() { + return { + startDate: defineds.startOfYesterday, + endDate: defineds.endOfYesterday + }; + } +}, { + label: 'This Week', + range: function range() { + return { + startDate: defineds.startOfWeek, + endDate: defineds.endOfWeek + }; + } +}, { + label: 'Last Week', + range: function range() { + return { + startDate: defineds.startOfLastWeek, + endDate: defineds.endOfLastWeek + }; + } +}, { + label: 'This Month', + range: function range() { + return { + startDate: defineds.startOfMonth, + endDate: defineds.endOfMonth + }; + } +}, { + label: 'Last Month', + range: function range() { + return { + startDate: defineds.startOfLastMonth, + endDate: defineds.endOfLastMonth + }; + } +}]); +exports.defaultStaticRanges = defaultStaticRanges; +var defaultInputRanges = [{ + label: 'days up to today', + range: function range(value) { + return { + startDate: (0, _addDays.default)(defineds.startOfToday, (Math.max(Number(value), 1) - 1) * -1), + endDate: defineds.endOfToday + }; + }, + getCurrentValue: function getCurrentValue(range) { + if (!(0, _isSameDay.default)(range.endDate, defineds.endOfToday)) return '-'; + if (!range.startDate) return '∞'; + return (0, _differenceInCalendarDays.default)(defineds.endOfToday, range.startDate) + 1; + } +}, { + label: 'days starting today', + range: function range(value) { + var today = new Date(); + return { + startDate: today, + endDate: (0, _addDays.default)(today, Math.max(Number(value), 1) - 1) + }; + }, + getCurrentValue: function getCurrentValue(range) { + if (!(0, _isSameDay.default)(range.startDate, defineds.startOfToday)) return '-'; + if (!range.endDate) return '∞'; + return (0, _differenceInCalendarDays.default)(range.endDate, defineds.startOfToday) + 1; + } +}]; +exports.defaultInputRanges = defaultInputRanges; \ No newline at end of file diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 000000000..5ceb02ae4 --- /dev/null +++ b/dist/index.js @@ -0,0 +1,59 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +Object.defineProperty(exports, "DateRange", { + enumerable: true, + get: function get() { + return _DateRange.default; + } +}); +Object.defineProperty(exports, "Calendar", { + enumerable: true, + get: function get() { + return _Calendar.default; + } +}); +Object.defineProperty(exports, "DateRangePicker", { + enumerable: true, + get: function get() { + return _DateRangePicker.default; + } +}); +Object.defineProperty(exports, "DefinedRange", { + enumerable: true, + get: function get() { + return _DefinedRange.default; + } +}); +Object.defineProperty(exports, "defaultInputRanges", { + enumerable: true, + get: function get() { + return _defaultRanges.defaultInputRanges; + } +}); +Object.defineProperty(exports, "defaultStaticRanges", { + enumerable: true, + get: function get() { + return _defaultRanges.defaultStaticRanges; + } +}); +Object.defineProperty(exports, "createStaticRanges", { + enumerable: true, + get: function get() { + return _defaultRanges.createStaticRanges; + } +}); + +var _DateRange = _interopRequireDefault(require("./components/DateRange")); + +var _Calendar = _interopRequireDefault(require("./components/Calendar")); + +var _DateRangePicker = _interopRequireDefault(require("./components/DateRangePicker")); + +var _DefinedRange = _interopRequireDefault(require("./components/DefinedRange")); + +var _defaultRanges = require("./defaultRanges"); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } \ No newline at end of file diff --git a/dist/locale/index.js b/dist/locale/index.js new file mode 100644 index 000000000..4fe1de4ad --- /dev/null +++ b/dist/locale/index.js @@ -0,0 +1,503 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +Object.defineProperty(exports, "af", { + enumerable: true, + get: function get() { + return _af.default; + } +}); +Object.defineProperty(exports, "arDZ", { + enumerable: true, + get: function get() { + return _arDZ.default; + } +}); +Object.defineProperty(exports, "arSA", { + enumerable: true, + get: function get() { + return _arSA.default; + } +}); +Object.defineProperty(exports, "be", { + enumerable: true, + get: function get() { + return _be.default; + } +}); +Object.defineProperty(exports, "bg", { + enumerable: true, + get: function get() { + return _bg.default; + } +}); +Object.defineProperty(exports, "bn", { + enumerable: true, + get: function get() { + return _bn.default; + } +}); +Object.defineProperty(exports, "ca", { + enumerable: true, + get: function get() { + return _ca.default; + } +}); +Object.defineProperty(exports, "cs", { + enumerable: true, + get: function get() { + return _cs.default; + } +}); +Object.defineProperty(exports, "cy", { + enumerable: true, + get: function get() { + return _cy.default; + } +}); +Object.defineProperty(exports, "da", { + enumerable: true, + get: function get() { + return _da.default; + } +}); +Object.defineProperty(exports, "de", { + enumerable: true, + get: function get() { + return _de.default; + } +}); +Object.defineProperty(exports, "el", { + enumerable: true, + get: function get() { + return _el.default; + } +}); +Object.defineProperty(exports, "enAU", { + enumerable: true, + get: function get() { + return _enAU.default; + } +}); +Object.defineProperty(exports, "enCA", { + enumerable: true, + get: function get() { + return _enCA.default; + } +}); +Object.defineProperty(exports, "enGB", { + enumerable: true, + get: function get() { + return _enGB.default; + } +}); +Object.defineProperty(exports, "enUS", { + enumerable: true, + get: function get() { + return _enUS.default; + } +}); +Object.defineProperty(exports, "eo", { + enumerable: true, + get: function get() { + return _eo.default; + } +}); +Object.defineProperty(exports, "es", { + enumerable: true, + get: function get() { + return _es.default; + } +}); +Object.defineProperty(exports, "et", { + enumerable: true, + get: function get() { + return _et.default; + } +}); +Object.defineProperty(exports, "faIR", { + enumerable: true, + get: function get() { + return _faIR.default; + } +}); +Object.defineProperty(exports, "fi", { + enumerable: true, + get: function get() { + return _fi.default; + } +}); +Object.defineProperty(exports, "fr", { + enumerable: true, + get: function get() { + return _fr.default; + } +}); +Object.defineProperty(exports, "frCA", { + enumerable: true, + get: function get() { + return _frCA.default; + } +}); +Object.defineProperty(exports, "gl", { + enumerable: true, + get: function get() { + return _gl.default; + } +}); +Object.defineProperty(exports, "gu", { + enumerable: true, + get: function get() { + return _gu.default; + } +}); +Object.defineProperty(exports, "he", { + enumerable: true, + get: function get() { + return _he.default; + } +}); +Object.defineProperty(exports, "hi", { + enumerable: true, + get: function get() { + return _hi.default; + } +}); +Object.defineProperty(exports, "hr", { + enumerable: true, + get: function get() { + return _hr.default; + } +}); +Object.defineProperty(exports, "hu", { + enumerable: true, + get: function get() { + return _hu.default; + } +}); +Object.defineProperty(exports, "hy", { + enumerable: true, + get: function get() { + return _hy.default; + } +}); +Object.defineProperty(exports, "id", { + enumerable: true, + get: function get() { + return _id.default; + } +}); +Object.defineProperty(exports, "is", { + enumerable: true, + get: function get() { + return _is.default; + } +}); +Object.defineProperty(exports, "it", { + enumerable: true, + get: function get() { + return _it.default; + } +}); +Object.defineProperty(exports, "ja", { + enumerable: true, + get: function get() { + return _ja.default; + } +}); +Object.defineProperty(exports, "ka", { + enumerable: true, + get: function get() { + return _ka.default; + } +}); +Object.defineProperty(exports, "kk", { + enumerable: true, + get: function get() { + return _kk.default; + } +}); +Object.defineProperty(exports, "ko", { + enumerable: true, + get: function get() { + return _ko.default; + } +}); +Object.defineProperty(exports, "lt", { + enumerable: true, + get: function get() { + return _lt.default; + } +}); +Object.defineProperty(exports, "lv", { + enumerable: true, + get: function get() { + return _lv.default; + } +}); +Object.defineProperty(exports, "ms", { + enumerable: true, + get: function get() { + return _ms.default; + } +}); +Object.defineProperty(exports, "nb", { + enumerable: true, + get: function get() { + return _nb.default; + } +}); +Object.defineProperty(exports, "nl", { + enumerable: true, + get: function get() { + return _nl.default; + } +}); +Object.defineProperty(exports, "nn", { + enumerable: true, + get: function get() { + return _nn.default; + } +}); +Object.defineProperty(exports, "pl", { + enumerable: true, + get: function get() { + return _pl.default; + } +}); +Object.defineProperty(exports, "pt", { + enumerable: true, + get: function get() { + return _pt.default; + } +}); +Object.defineProperty(exports, "ptBR", { + enumerable: true, + get: function get() { + return _ptBR.default; + } +}); +Object.defineProperty(exports, "ro", { + enumerable: true, + get: function get() { + return _ro.default; + } +}); +Object.defineProperty(exports, "ru", { + enumerable: true, + get: function get() { + return _ru.default; + } +}); +Object.defineProperty(exports, "sk", { + enumerable: true, + get: function get() { + return _sk.default; + } +}); +Object.defineProperty(exports, "sl", { + enumerable: true, + get: function get() { + return _sl.default; + } +}); +Object.defineProperty(exports, "sr", { + enumerable: true, + get: function get() { + return _sr.default; + } +}); +Object.defineProperty(exports, "srLatn", { + enumerable: true, + get: function get() { + return _srLatn.default; + } +}); +Object.defineProperty(exports, "sv", { + enumerable: true, + get: function get() { + return _sv.default; + } +}); +Object.defineProperty(exports, "ta", { + enumerable: true, + get: function get() { + return _ta.default; + } +}); +Object.defineProperty(exports, "te", { + enumerable: true, + get: function get() { + return _te.default; + } +}); +Object.defineProperty(exports, "th", { + enumerable: true, + get: function get() { + return _th.default; + } +}); +Object.defineProperty(exports, "tr", { + enumerable: true, + get: function get() { + return _tr.default; + } +}); +Object.defineProperty(exports, "ug", { + enumerable: true, + get: function get() { + return _ug.default; + } +}); +Object.defineProperty(exports, "uk", { + enumerable: true, + get: function get() { + return _uk.default; + } +}); +Object.defineProperty(exports, "vi", { + enumerable: true, + get: function get() { + return _vi.default; + } +}); +Object.defineProperty(exports, "zhCN", { + enumerable: true, + get: function get() { + return _zhCN.default; + } +}); +Object.defineProperty(exports, "zhTW", { + enumerable: true, + get: function get() { + return _zhTW.default; + } +}); + +var _af = _interopRequireDefault(require("date-fns/locale/af")); + +var _arDZ = _interopRequireDefault(require("date-fns/locale/ar-DZ")); + +var _arSA = _interopRequireDefault(require("date-fns/locale/ar-SA")); + +var _be = _interopRequireDefault(require("date-fns/locale/be")); + +var _bg = _interopRequireDefault(require("date-fns/locale/bg")); + +var _bn = _interopRequireDefault(require("date-fns/locale/bn")); + +var _ca = _interopRequireDefault(require("date-fns/locale/ca")); + +var _cs = _interopRequireDefault(require("date-fns/locale/cs")); + +var _cy = _interopRequireDefault(require("date-fns/locale/cy")); + +var _da = _interopRequireDefault(require("date-fns/locale/da")); + +var _de = _interopRequireDefault(require("date-fns/locale/de")); + +var _el = _interopRequireDefault(require("date-fns/locale/el")); + +var _enAU = _interopRequireDefault(require("date-fns/locale/en-AU")); + +var _enCA = _interopRequireDefault(require("date-fns/locale/en-CA")); + +var _enGB = _interopRequireDefault(require("date-fns/locale/en-GB")); + +var _enUS = _interopRequireDefault(require("date-fns/locale/en-US")); + +var _eo = _interopRequireDefault(require("date-fns/locale/eo")); + +var _es = _interopRequireDefault(require("date-fns/locale/es")); + +var _et = _interopRequireDefault(require("date-fns/locale/et")); + +var _faIR = _interopRequireDefault(require("date-fns/locale/fa-IR")); + +var _fi = _interopRequireDefault(require("date-fns/locale/fi")); + +var _fr = _interopRequireDefault(require("date-fns/locale/fr")); + +var _frCA = _interopRequireDefault(require("date-fns/locale/fr-CA")); + +var _gl = _interopRequireDefault(require("date-fns/locale/gl")); + +var _gu = _interopRequireDefault(require("date-fns/locale/gu")); + +var _he = _interopRequireDefault(require("date-fns/locale/he")); + +var _hi = _interopRequireDefault(require("date-fns/locale/hi")); + +var _hr = _interopRequireDefault(require("date-fns/locale/hr")); + +var _hu = _interopRequireDefault(require("date-fns/locale/hu")); + +var _hy = _interopRequireDefault(require("date-fns/locale/hy")); + +var _id = _interopRequireDefault(require("date-fns/locale/id")); + +var _is = _interopRequireDefault(require("date-fns/locale/is")); + +var _it = _interopRequireDefault(require("date-fns/locale/it")); + +var _ja = _interopRequireDefault(require("date-fns/locale/ja")); + +var _ka = _interopRequireDefault(require("date-fns/locale/ka")); + +var _kk = _interopRequireDefault(require("date-fns/locale/kk")); + +var _ko = _interopRequireDefault(require("date-fns/locale/ko")); + +var _lt = _interopRequireDefault(require("date-fns/locale/lt")); + +var _lv = _interopRequireDefault(require("date-fns/locale/lv")); + +var _ms = _interopRequireDefault(require("date-fns/locale/ms")); + +var _nb = _interopRequireDefault(require("date-fns/locale/nb")); + +var _nl = _interopRequireDefault(require("date-fns/locale/nl")); + +var _nn = _interopRequireDefault(require("date-fns/locale/nn")); + +var _pl = _interopRequireDefault(require("date-fns/locale/pl")); + +var _pt = _interopRequireDefault(require("date-fns/locale/pt")); + +var _ptBR = _interopRequireDefault(require("date-fns/locale/pt-BR")); + +var _ro = _interopRequireDefault(require("date-fns/locale/ro")); + +var _ru = _interopRequireDefault(require("date-fns/locale/ru")); + +var _sk = _interopRequireDefault(require("date-fns/locale/sk")); + +var _sl = _interopRequireDefault(require("date-fns/locale/sl")); + +var _sr = _interopRequireDefault(require("date-fns/locale/sr")); + +var _srLatn = _interopRequireDefault(require("date-fns/locale/sr-Latn")); + +var _sv = _interopRequireDefault(require("date-fns/locale/sv")); + +var _ta = _interopRequireDefault(require("date-fns/locale/ta")); + +var _te = _interopRequireDefault(require("date-fns/locale/te")); + +var _th = _interopRequireDefault(require("date-fns/locale/th")); + +var _tr = _interopRequireDefault(require("date-fns/locale/tr")); + +var _ug = _interopRequireDefault(require("date-fns/locale/ug")); + +var _uk = _interopRequireDefault(require("date-fns/locale/uk")); + +var _vi = _interopRequireDefault(require("date-fns/locale/vi")); + +var _zhCN = _interopRequireDefault(require("date-fns/locale/zh-CN")); + +var _zhTW = _interopRequireDefault(require("date-fns/locale/zh-TW")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } \ No newline at end of file diff --git a/dist/styles.css b/dist/styles.css new file mode 100644 index 000000000..930c7de43 --- /dev/null +++ b/dist/styles.css @@ -0,0 +1,197 @@ +.rdrCalendarWrapper { + box-sizing: border-box; + background: #ffffff; + display: inline-flex; + flex-direction: column; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.rdrDateDisplay{ + display: flex; + justify-content: space-between; +} + +.rdrDateDisplayItem{ + flex: 1 1; + width: 0; + text-align: center; + color: inherit; +} + +.rdrDateDisplayItem + .rdrDateDisplayItem{ + margin-left: 0.833em; + } + +.rdrDateDisplayItem input{ + text-align: inherit + } + +.rdrDateDisplayItem input:disabled{ + cursor: default; + } + +.rdrDateDisplayItemActive{} + +.rdrMonthAndYearWrapper { + box-sizing: inherit; + display: flex; + justify-content: space-between; +} + +.rdrMonthAndYearPickers{ + flex: 1 1 auto; + display: flex; + justify-content: center; + align-items: center; +} + +.rdrMonthPicker{} + +.rdrYearPicker{} + +.rdrNextPrevButton { + box-sizing: inherit; + cursor: pointer; + outline: none; +} + +.rdrPprevButton {} + +.rdrNextButton {} + +.rdrMonths{ + display: flex; +} + +.rdrMonthsVertical{ + flex-direction: column; +} + +.rdrMonthsHorizontal > div > div > div{ + display: flex; + flex-direction: row; +} + +.rdrMonth{ + width: 27.667em; +} + +.rdrWeekDays{ + display: flex; +} + +.rdrWeekDay { + flex-basis: calc(100% / 7); + box-sizing: inherit; + text-align: center; +} + +.rdrDays{ + display: flex; + flex-wrap: wrap; +} + +.rdrDateDisplayWrapper{} + +.rdrMonthName{} + +.rdrInfiniteMonths{ + overflow: auto; +} + +.rdrDateRangeWrapper{ + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.rdrDateInput { + position: relative; +} + +.rdrDateInput input { + outline: none; + } + +.rdrDateInput .rdrWarning { + position: absolute; + font-size: 1.6em; + line-height: 1.6em; + top: 0; + right: .25em; + color: #FF0000; + } + +.rdrDay { + box-sizing: inherit; + width: calc(100% / 7); + position: relative; + font: inherit; + cursor: pointer; +} + +.rdrDayNumber { + display: block; + position: relative; +} + +.rdrDayNumber span{ + color: #1d2429; + } + +.rdrDayDisabled { + cursor: not-allowed; +} + +@supports (-ms-ime-align: auto) { + .rdrDay { + flex-basis: 14.285% !important; + } +} + +.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{ + pointer-events: none; +} + +.rdrInRange{} + +.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{ + pointer-events: none; +} + +.rdrDayHovered{} + +.rdrDayActive{} + +.rdrDateRangePickerWrapper{ + display: inline-flex; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.rdrDefinedRangesWrapper{} + +.rdrStaticRanges{ + display: flex; + flex-direction: column; +} + +.rdrStaticRange{ + font-size: inherit; +} + +.rdrStaticRangeLabel{} + +.rdrInputRanges{} + +.rdrInputRange{ + display: flex; +} + +.rdrInputRangeInput{} diff --git a/dist/styles.js b/dist/styles.js new file mode 100644 index 000000000..e760d6cf4 --- /dev/null +++ b/dist/styles.js @@ -0,0 +1,60 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.default = void 0; +var _default = { + dateRangeWrapper: 'rdrDateRangeWrapper', + calendarWrapper: 'rdrCalendarWrapper', + dateDisplay: 'rdrDateDisplay', + dateDisplayItem: 'rdrDateDisplayItem', + dateDisplayItemActive: 'rdrDateDisplayItemActive', + monthAndYearWrapper: 'rdrMonthAndYearWrapper', + monthAndYearPickers: 'rdrMonthAndYearPickers', + nextPrevButton: 'rdrNextPrevButton', + month: 'rdrMonth', + weekDays: 'rdrWeekDays', + weekDay: 'rdrWeekDay', + days: 'rdrDays', + day: 'rdrDay', + dayNumber: 'rdrDayNumber', + dayPassive: 'rdrDayPassive', + dayToday: 'rdrDayToday', + dayStartOfWeek: 'rdrDayStartOfWeek', + dayEndOfWeek: 'rdrDayEndOfWeek', + daySelected: 'rdrDaySelected', + dayDisabled: 'rdrDayDisabled', + dayStartOfMonth: 'rdrDayStartOfMonth', + dayEndOfMonth: 'rdrDayEndOfMonth', + dayWeekend: 'rdrDayWeekend', + dayStartPreview: 'rdrDayStartPreview', + dayInPreview: 'rdrDayInPreview', + dayEndPreview: 'rdrDayEndPreview', + dayHovered: 'rdrDayHovered', + dayActive: 'rdrDayActive', + inRange: 'rdrInRange', + endEdge: 'rdrEndEdge', + startEdge: 'rdrStartEdge', + prevButton: 'rdrPprevButton', + nextButton: 'rdrNextButton', + selected: 'rdrSelected', + months: 'rdrMonths', + monthPicker: 'rdrMonthPicker', + yearPicker: 'rdrYearPicker', + dateDisplayWrapper: 'rdrDateDisplayWrapper', + definedRangesWrapper: 'rdrDefinedRangesWrapper', + staticRanges: 'rdrStaticRanges', + staticRange: 'rdrStaticRange', + inputRanges: 'rdrInputRanges', + inputRange: 'rdrInputRange', + inputRangeInput: 'rdrInputRangeInput', + dateRangePickerWrapper: 'rdrDateRangePickerWrapper', + staticRangeLabel: 'rdrStaticRangeLabel', + staticRangeSelected: 'rdrStaticRangeSelected', + monthName: 'rdrMonthName', + infiniteMonths: 'rdrInfiniteMonths', + monthsVertical: 'rdrMonthsVertical', + monthsHorizontal: 'rdrMonthsHorizontal' +}; +exports.default = _default; \ No newline at end of file diff --git a/dist/theme/default.css b/dist/theme/default.css new file mode 100644 index 000000000..0e12bb90b --- /dev/null +++ b/dist/theme/default.css @@ -0,0 +1,386 @@ +.rdrCalendarWrapper{ + color: #000000; + font-size: 12px; +} + +.rdrDateDisplayWrapper{ + background-color: rgb(239, 242, 247); +} + +.rdrDateDisplay{ + margin: 0.833em; +} + +.rdrDateDisplayItem{ + border-radius: 4px; + background-color: rgb(255, 255, 255); + box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21); + border: 1px solid transparent; +} + +.rdrDateDisplayItem input{ + cursor: pointer; + height: 2.5em; + line-height: 2.5em; + border: 0px; + background: transparent; + width: 100%; + color: #849095; + } + +.rdrDateDisplayItemActive{ + border-color: currentColor; +} + +.rdrDateDisplayItemActive input{ + color: #7d888d + } + +.rdrMonthAndYearWrapper { + align-items: center; + height: 60px; + padding-top: 10px; +} + +.rdrMonthAndYearPickers{ + font-weight: 600; +} + +.rdrMonthAndYearPickers select{ + -moz-appearance: none; + appearance: none; + -webkit-appearance: none; + border: 0; + background: transparent; + padding: 10px 30px 10px 10px; + border-radius: 4px; + outline: 0; + color: #3e484f; + background: url("data:image/svg+xml;utf8,") no-repeat; + background-position: right 8px center; + cursor: pointer; + text-align: center + } + +.rdrMonthAndYearPickers select:hover{ + background-color: rgba(0,0,0,0.07); + } + +.rdrMonthPicker, .rdrYearPicker{ + margin: 0 5px +} + +.rdrNextPrevButton { + display: block; + width: 24px; + height: 24px; + margin: 0 0.833em; + padding: 0; + border: 0; + border-radius: 5px; + background: #EFF2F7 +} + +.rdrNextPrevButton:hover{ + background: #E1E7F0; + } + +.rdrNextPrevButton i { + display: block; + width: 0; + height: 0; + padding: 0; + text-align: center; + border-style: solid; + margin: auto; + transform: translate(-3px, 0px); + } + +.rdrPprevButton i { + border-width: 4px 6px 4px 4px; + border-color: transparent rgb(52, 73, 94) transparent transparent; + transform: translate(-3px, 0px); + } + +.rdrNextButton i { + margin: 0 0 0 7px; + border-width: 4px 4px 4px 6px; + border-color: transparent transparent transparent rgb(52, 73, 94); + transform: translate(3px, 0px); + } + +.rdrWeekDays { + padding: 0 0.833em; +} + +.rdrMonth{ + padding: 0 0.833em 1.666em 0.833em; +} + +.rdrMonth .rdrWeekDays { + padding: 0; + } + +.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{ + display: none; +} + +.rdrWeekDay { + font-weight: 400; + line-height: 2.667em; + color: rgb(132, 144, 149); +} + +.rdrDay { + background: transparent; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border: 0; + padding: 0; + line-height: 3.000em; + height: 3.000em; + text-align: center; + color: #1d2429 +} + +.rdrDay:focus { + outline: 0; + } + +.rdrDayNumber { + outline: 0; + font-weight: 300; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + top: 5px; + bottom: 5px; + display: flex; + align-items: center; + justify-content: center; +} + +.rdrDayToday .rdrDayNumber span{ + font-weight: 500 +} + +.rdrDayToday .rdrDayNumber span:after{ + content: ''; + position: absolute; + bottom: 4px; + left: 50%; + transform: translate(-50%, 0); + width: 18px; + height: 2px; + border-radius: 2px; + background: #3d91ff; + } + +.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after,.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after{ + background: #fff; + } + +.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span{ + color: rgba(255, 255, 255, 0.85); + } + +.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{ + background: currentColor; + position: absolute; + top: 5px; + left: 0; + right: 0; + bottom: 5px; +} + +.rdrSelected{ + left: 2px; + right: 2px; +} + +.rdrInRange{} + +.rdrStartEdge{ + border-top-left-radius: 1.042em; + border-bottom-left-radius: 1.042em; + left: 2px; +} + +.rdrEndEdge{ + border-top-right-radius: 1.042em; + border-bottom-right-radius: 1.042em; + right: 2px; +} + +.rdrSelected{ + border-radius: 1.042em; +} + +.rdrDayStartOfMonth .rdrInRange, .rdrDayStartOfMonth .rdrEndEdge, .rdrDayStartOfWeek .rdrInRange, .rdrDayStartOfWeek .rdrEndEdge{ + border-top-left-radius: 1.042em; + border-bottom-left-radius: 1.042em; + left: 2px; + } + +.rdrDayEndOfMonth .rdrInRange, .rdrDayEndOfMonth .rdrStartEdge, .rdrDayEndOfWeek .rdrInRange, .rdrDayEndOfWeek .rdrStartEdge{ + border-top-right-radius: 1.042em; + border-bottom-right-radius: 1.042em; + right: 2px; + } + +.rdrDayStartOfMonth .rdrDayInPreview, .rdrDayStartOfMonth .rdrDayEndPreview, .rdrDayStartOfWeek .rdrDayInPreview, .rdrDayStartOfWeek .rdrDayEndPreview{ + border-top-left-radius: 1.333em; + border-bottom-left-radius: 1.333em; + border-left-width: 1px; + left: 0px; + } + +.rdrDayEndOfMonth .rdrDayInPreview, .rdrDayEndOfMonth .rdrDayStartPreview, .rdrDayEndOfWeek .rdrDayInPreview, .rdrDayEndOfWeek .rdrDayStartPreview{ + border-top-right-radius: 1.333em; + border-bottom-right-radius: 1.333em; + border-right-width: 1px; + right: 0px; + } + +.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{ + background: rgba(255, 255, 255, 0.09); + position: absolute; + top: 3px; + left: 0px; + right: 0px; + bottom: 3px; + pointer-events: none; + border: 0px solid currentColor; + z-index: 1; +} + +.rdrDayStartPreview{ + border-top-width: 1px; + border-left-width: 1px; + border-bottom-width: 1px; + border-top-left-radius: 1.333em; + border-bottom-left-radius: 1.333em; + left: 0px; +} + +.rdrDayInPreview{ + border-top-width: 1px; + border-bottom-width: 1px; +} + +.rdrDayEndPreview{ + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-top-right-radius: 1.333em; + border-bottom-right-radius: 1.333em; + right: 2px; + right: 0px; +} + +.rdrDefinedRangesWrapper{ + font-size: 12px; + width: 226px; + border-right: solid 1px #eff2f7; + background: #fff; +} + +.rdrDefinedRangesWrapper .rdrStaticRangeSelected{ + color: currentColor; + font-weight: 600; + } + +.rdrStaticRange{ + border: 0; + cursor: pointer; + display: block; + outline: 0; + border-bottom: 1px solid #eff2f7; + padding: 0; + background: #fff +} + +.rdrStaticRange:hover .rdrStaticRangeLabel,.rdrStaticRange:focus .rdrStaticRangeLabel{ + background: #eff2f7; + } + +.rdrStaticRangeLabel{ + display: block; + outline: 0; + line-height: 18px; + padding: 10px 20px; + text-align: left; +} + +.rdrInputRanges{ + padding: 10px 0; +} + +.rdrInputRange{ + align-items: center; + padding: 5px 20px; +} + +.rdrInputRangeInput{ + width: 30px; + height: 30px; + line-height: 30px; + border-radius: 4px; + text-align: center; + border: solid 1px rgb(222, 231, 235); + margin-right: 10px; + color: rgb(108, 118, 122) +} + +.rdrInputRangeInput:focus, .rdrInputRangeInput:hover{ + border-color: rgb(180, 191, 196); + outline: 0; + color: #333; + } + +.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after{ + content: ''; + border: 1px solid currentColor; + border-radius: 1.333em; + position: absolute; + top: -2px; + bottom: -2px; + left: 0px; + right: 0px; + background: transparent; +} + +.rdrDayPassive{ + pointer-events: none; +} + +.rdrDayPassive .rdrDayNumber span{ + color: #d5dce0; + } + +.rdrDayPassive .rdrInRange, .rdrDayPassive .rdrStartEdge, .rdrDayPassive .rdrEndEdge, .rdrDayPassive .rdrSelected, .rdrDayPassive .rdrDayStartPreview, .rdrDayPassive .rdrDayInPreview, .rdrDayPassive .rdrDayEndPreview{ + display: none; + } + +.rdrDayDisabled { + background-color: rgb(248, 248, 248); +} + +.rdrDayDisabled .rdrDayNumber span{ + color: #aeb9bf; + } + +.rdrDayDisabled .rdrInRange, .rdrDayDisabled .rdrStartEdge, .rdrDayDisabled .rdrEndEdge, .rdrDayDisabled .rdrSelected, .rdrDayDisabled .rdrDayStartPreview, .rdrDayDisabled .rdrDayInPreview, .rdrDayDisabled .rdrDayEndPreview{ + filter: grayscale(100%) opacity(60%); + } + +.rdrMonthName{ + text-align: left; + font-weight: 600; + color: #849095; + padding: 0.833em; +} diff --git a/dist/utils.js b/dist/utils.js new file mode 100644 index 000000000..7af2d165c --- /dev/null +++ b/dist/utils.js @@ -0,0 +1,107 @@ +"use strict"; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.calcFocusDate = calcFocusDate; +exports.findNextRangeIndex = findNextRangeIndex; +exports.getMonthDisplayRange = getMonthDisplayRange; +exports.generateStyles = generateStyles; + +var _classnames = _interopRequireDefault(require("classnames")); + +var _addDays = _interopRequireDefault(require("date-fns/addDays")); + +var _differenceInCalendarMonths = _interopRequireDefault(require("date-fns/differenceInCalendarMonths")); + +var _differenceInCalendarDays = _interopRequireDefault(require("date-fns/differenceInCalendarDays")); + +var _endOfWeek = _interopRequireDefault(require("date-fns/endOfWeek")); + +var _startOfWeek = _interopRequireDefault(require("date-fns/startOfWeek")); + +var _endOfMonth = _interopRequireDefault(require("date-fns/endOfMonth")); + +var _startOfMonth = _interopRequireDefault(require("date-fns/startOfMonth")); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function calcFocusDate(currentFocusedDate, props) { + var shownDate = props.shownDate, + date = props.date, + months = props.months, + ranges = props.ranges, + focusedRange = props.focusedRange, + displayMode = props.displayMode; // find primary date according the props + + var targetInterval; + + if (displayMode === 'dateRange') { + var range = ranges[focusedRange[0]] || {}; + targetInterval = { + start: range.startDate, + end: range.endDate + }; + } else { + targetInterval = { + start: date, + end: date + }; + } + + targetInterval.start = (0, _startOfMonth.default)(targetInterval.start || new Date()); + targetInterval.end = (0, _endOfMonth.default)(targetInterval.end || targetInterval.start); + var targetDate = targetInterval.start || targetInterval.end || shownDate || new Date(); // initial focus + + if (!currentFocusedDate) return shownDate || targetDate; // // just return targetDate for native scrolled calendars + // if (props.scroll.enabled) return targetDate; + + if ((0, _differenceInCalendarMonths.default)(targetInterval.start, targetInterval.end) > months) { + // don't change focused if new selection in view area + return currentFocusedDate; + } + + return targetDate; +} + +function findNextRangeIndex(ranges) { + var currentRangeIndex = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : -1; + var nextIndex = ranges.findIndex(function (range, i) { + return i > currentRangeIndex && range.autoFocus !== false && !range.disabled; + }); + if (nextIndex !== -1) return nextIndex; + return ranges.findIndex(function (range) { + return range.autoFocus !== false && !range.disabled; + }); +} + +function getMonthDisplayRange(date, dateOptions, fixedHeight) { + var startDateOfMonth = (0, _startOfMonth.default)(date, dateOptions); + var endDateOfMonth = (0, _endOfMonth.default)(date, dateOptions); + var startDateOfCalendar = (0, _startOfWeek.default)(startDateOfMonth, dateOptions); + var endDateOfCalendar = (0, _endOfWeek.default)(endDateOfMonth, dateOptions); + + if (fixedHeight && (0, _differenceInCalendarDays.default)(endDateOfCalendar, startDateOfCalendar) <= 34) { + endDateOfCalendar = (0, _addDays.default)(endDateOfCalendar, 7); + } + + return { + start: startDateOfCalendar, + end: endDateOfCalendar, + startDateOfMonth: startDateOfMonth, + endDateOfMonth: endDateOfMonth + }; +} + +function generateStyles(sources) { + if (!sources.length) return {}; + var generatedStyles = sources.filter(function (source) { + return Boolean(source); + }).reduce(function (styles, styleSource) { + Object.keys(styleSource).forEach(function (key) { + styles[key] = (0, _classnames.default)(styles[key], styleSource[key]); + }); + return styles; + }, {}); + return generatedStyles; +} \ No newline at end of file From e5ab7de948b7d0dcf4fd3de362188539267b0ee9 Mon Sep 17 00:00:00 2001 From: ronnie Date: Fri, 9 Sep 2022 12:30:04 +0530 Subject: [PATCH 02/11] update: changes --- . eslintignore | 1 - 1 file changed, 1 deletion(-) diff --git a/. eslintignore b/. eslintignore index cd275d762..549020206 100644 --- a/. eslintignore +++ b/. eslintignore @@ -1,4 +1,3 @@ /node_modules/* /lib/* -/dist/* **/*.snap From cb9c3eeebedd2a41e48ddd3a2a5c657536ff8c79 Mon Sep 17 00:00:00 2001 From: ronnie Date: Fri, 9 Sep 2022 12:37:44 +0530 Subject: [PATCH 03/11] update: added test comment --- src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/index.js b/src/index.js index f729322b2..3b02272e3 100644 --- a/src/index.js +++ b/src/index.js @@ -3,3 +3,4 @@ export { default as Calendar } from './components/Calendar'; export { default as DateRangePicker } from './components/DateRangePicker'; export { default as DefinedRange } from './components/DefinedRange'; export { defaultInputRanges, defaultStaticRanges, createStaticRanges } from './defaultRanges'; +// test comment From 6b970141702b75d59335a697b894db2dca91a8ac Mon Sep 17 00:00:00 2001 From: ronnie Date: Fri, 9 Sep 2022 12:57:01 +0530 Subject: [PATCH 04/11] update: changes --- src/assets/arrow-left.svg | 3 + src/assets/arrow-right.svg | 3 + src/components/Calendar/index.js | 199 +++--- src/components/DateRangePicker/index.js | 17 +- src/components/DayCell/index.js | 65 +- src/components/DefinedRange/README.md | 90 --- .../__snapshots__/index.test.js.snap | 238 ------- src/components/DefinedRange/index.js | 142 ---- src/components/DefinedRange/index.scss | 20 - src/components/DefinedRange/index.test.js | 135 ---- src/components/Month/index.js | 53 +- src/index.css | 660 ++++++++++++++++++ src/index.js | 4 +- 13 files changed, 835 insertions(+), 794 deletions(-) create mode 100644 src/assets/arrow-left.svg create mode 100644 src/assets/arrow-right.svg delete mode 100644 src/components/DefinedRange/README.md delete mode 100644 src/components/DefinedRange/__snapshots__/index.test.js.snap delete mode 100644 src/components/DefinedRange/index.js delete mode 100644 src/components/DefinedRange/index.scss delete mode 100644 src/components/DefinedRange/index.test.js create mode 100644 src/index.css diff --git a/src/assets/arrow-left.svg b/src/assets/arrow-left.svg new file mode 100644 index 000000000..e0564c500 --- /dev/null +++ b/src/assets/arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/arrow-right.svg b/src/assets/arrow-right.svg new file mode 100644 index 000000000..20cc4805b --- /dev/null +++ b/src/assets/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index 73b9faa48..56026c286 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -25,11 +25,14 @@ import { isSameMonth, differenceInDays, min, - max, + max } from 'date-fns'; import defaultLocale from 'date-fns/locale/en-US'; import coreStyles from '../../styles'; import { ariaLabelsShape } from '../../accessibility'; +import dayjs from 'dayjs'; +import ArrowLeft from '../../assets/arrow-left.svg'; +import ArrowRight from '../../assets/arrow-right.svg'; class Calendar extends PureComponent { constructor(props, context) { @@ -45,9 +48,9 @@ class Calendar extends PureComponent { drag: { status: false, range: { startDate: null, endDate: null }, - disablePreview: false, + disablePreview: false }, - scrollArea: this.calcScrollArea(props), + scrollArea: this.calcScrollArea(props) }; } getMonthNames() { @@ -65,7 +68,7 @@ class Calendar extends PureComponent { monthHeight: scroll.monthHeight || 220, longMonthHeight: longMonthHeight || 260, calendarWidth: 'auto', - calendarHeight: (scroll.calendarHeight || longMonthHeight || 240) * months, + calendarHeight: (scroll.calendarHeight || longMonthHeight || 240) * months }; } return { @@ -73,11 +76,12 @@ class Calendar extends PureComponent { monthWidth: scroll.monthWidth || 332, calendarWidth: (scroll.calendarWidth || scroll.monthWidth || 332) * months, monthHeight: longMonthHeight || 300, - calendarHeight: longMonthHeight || 300, + calendarHeight: longMonthHeight || 300 }; } focusToDate = (date, props = this.props, preventUnnecessary = true) => { if (!props.scroll.enabled) { + if (preventUnnecessary) return; if (preventUnnecessary && props.preventSnapRefocus) { const focusedDateDiff = differenceInCalendarMonths(date, this.state.focusedDate); const isAllowedForward = props.calendarFocus === 'forwards' && focusedDateDiff >= 0; @@ -100,7 +104,7 @@ class Calendar extends PureComponent { const newProps = props.scroll.enabled ? { ...props, - months: this.list.getVisibleRange().length, + months: this.list.getVisibleRange().length } : props; const newFocus = calcFocusDate(this.state.focusedDate, newProps); @@ -114,7 +118,7 @@ class Calendar extends PureComponent { const preview = { startDate: val, endDate: val, - color: this.props.color, + color: this.props.color }; this.setState({ preview }); }; @@ -128,22 +132,18 @@ class Calendar extends PureComponent { componentDidUpdate(prevProps) { const propMapper = { dateRange: 'ranges', - date: 'date', + date: 'date' }; const targetProp = propMapper[this.props.displayMode]; if (this.props[targetProp] !== prevProps[targetProp]) { this.updateShownDate(this.props); } - if ( - prevProps.locale !== this.props.locale || - prevProps.weekStartsOn !== this.props.weekStartsOn - ) { + if (prevProps.locale !== this.props.locale || prevProps.weekStartsOn !== this.props.weekStartsOn) { this.dateOptions = { locale: this.props.locale }; - if (this.props.weekStartsOn !== undefined) - this.dateOptions.weekStartsOn = this.props.weekStartsOn; + if (this.props.weekStartsOn !== undefined) this.dateOptions.weekStartsOn = this.props.weekStartsOn; this.setState({ - monthNames: this.getMonthNames(), + monthNames: this.getMonthNames() }); } @@ -159,7 +159,7 @@ class Calendar extends PureComponent { monthOffset: () => addMonths(focusedDate, value), setMonth: () => setMonth(focusedDate, value), setYear: () => setYear(focusedDate, value), - set: () => value, + set: () => value }; const newDate = min([max([modeMapper[mode](), minDate]), maxDate]); @@ -186,68 +186,65 @@ class Calendar extends PureComponent { this.isFirstRender = false; }; renderMonthAndYear = (focusedDate, changeShownDate, props) => { - const { showMonthArrow, minDate, maxDate, showMonthAndYearPickers, ariaLabels } = props; - const upperYearLimit = (maxDate || Calendar.defaultProps.maxDate).getFullYear(); - const lowerYearLimit = (minDate || Calendar.defaultProps.minDate).getFullYear(); const styles = this.styles; + let startMonth = ''; + let endMonth = ''; + new Array(this.props.months).fill(null).map((_, i) => { + let monthStep = addMonths(this.state.focusedDate, i); + if (this.props.calendarFocus === 'backwards') { + monthStep = subMonths(this.state.focusedDate, this.props.months - 1 - i); + } + if (i === 0) { + startMonth = monthStep; + } + if (i === this.props.months - 1) { + endMonth = monthStep; + } + }); + return ( -
e.stopPropagation()} className={styles.monthAndYearWrapper}> - {showMonthArrow ? ( - - ) : null} - {showMonthAndYearPickers ? ( - - - - - - - - - - ) : ( - - {this.state.monthNames[focusedDate.getMonth()]} {focusedDate.getFullYear()} - - )} - {showMonthArrow ? ( -
+
+

+ {dayjs(startMonth).format('MMMM')} +

+
+
+

+ {dayjs(startMonth).format('YYYY')} +

+
+ + +
+
+

+ {dayjs(endMonth).format('MMMM')} +

+
+
+

+ {dayjs(startMonth).format('YYYY')} +

+
+
changeShownDate(+1, 'monthOffset')} - aria-label={ariaLabels.nextButton}> - - - ) : null} + > + +
+
); }; @@ -257,7 +254,7 @@ class Calendar extends PureComponent {
{eachDayOfInterval({ start: startOfWeek(now, this.dateOptions), - end: endOfWeek(now, this.dateOptions), + end: endOfWeek(now, this.dateOptions) }).map((day, i) => ( {format(day, this.props.weekdayDisplayFormat, this.dateOptions)} @@ -276,7 +273,7 @@ class Calendar extends PureComponent { editableDateInputs, startDatePlaceholder, endDatePlaceholder, - ariaLabels, + ariaLabels } = this.props; const defaultColor = rangeColors[focusedRange[0]] || color; @@ -285,16 +282,12 @@ class Calendar extends PureComponent { return (
{ranges.map((range, i) => { - if (range.showDateDisplay === false || (range.disabled && !range.showDateDisplay)) - return null; + if (range.showDateDisplay === false || (range.disabled && !range.showDateDisplay)) return null; return ( -
+
onChange && onChange(date)); @@ -378,8 +371,8 @@ class Calendar extends PureComponent { drag: { status: drag.status, range: { startDate: drag.range.startDate, endDate: date }, - disablePreview: true, - }, + disablePreview: true + } }); }; @@ -410,7 +403,7 @@ class Calendar extends PureComponent { color, navigatorRenderer, className, - preview, + preview } = this.props; const { scrollArea, focusedDate } = this.state; const isVertical = direction === 'vertical'; @@ -418,7 +411,7 @@ class Calendar extends PureComponent { const ranges = this.props.ranges.map((range, i) => ({ ...range, - color: range.color || rangeColors[i] || color, + color: range.color || rangeColors[i] || color })); return (
this.setState({ drag: { status: false, range: {} } })} onMouseLeave={() => { this.setState({ drag: { status: false, range: {} } }); - }}> + }} + > {showDateDisplay && this.renderDateDisplay()} {monthAndYearRenderer(focusedDate, this.changeShownDate, this.props)} {scroll.enabled ? ( @@ -440,9 +434,10 @@ class Calendar extends PureComponent { onMouseLeave={() => onPreviewChange && onPreviewChange()} style={{ width: scrollArea.calendarWidth + 11, - height: scrollArea.calendarHeight + 11, + height: scrollArea.calendarHeight + 11 }} - onScroll={this.handleScroll}> + onScroll={this.handleScroll} + > + )} + > {new Array(this.props.months).fill(null).map((_, i) => { - let monthStep = addMonths(this.state.focusedDate, i);; + let monthStep = addMonths(this.state.focusedDate, i); if (this.props.calendarFocus === 'backwards') { monthStep = subMonths(this.state.focusedDate, this.props.months - 1 - i); } @@ -504,6 +500,7 @@ class Calendar extends PureComponent { preview={preview || this.state.preview} ranges={ranges} key={i} + index={i} drag={this.state.drag} dateOptions={this.dateOptions} disabledDates={disabledDates} @@ -545,7 +542,7 @@ Calendar.defaultProps = { months: 1, color: '#3d91ff', scroll: { - enabled: false, + enabled: false }, direction: 'vertical', maxDate: addYears(new Date(), 20), @@ -558,7 +555,7 @@ Calendar.defaultProps = { fixedHeight: false, calendarFocus: 'forwards', preventSnapRefocus: false, - ariaLabels: {}, + ariaLabels: {} }; Calendar.propTypes = { @@ -580,7 +577,7 @@ Calendar.propTypes = { preview: PropTypes.shape({ startDate: PropTypes.object, endDate: PropTypes.object, - color: PropTypes.string, + color: PropTypes.string }), dateDisplayFormat: PropTypes.string, monthDisplayFormat: PropTypes.string, @@ -602,7 +599,7 @@ Calendar.propTypes = { longMonthHeight: PropTypes.number, monthWidth: PropTypes.number, calendarWidth: PropTypes.number, - calendarHeight: PropTypes.number, + calendarHeight: PropTypes.number }), direction: PropTypes.oneOf(['vertical', 'horizontal']), startDatePlaceholder: PropTypes.string, @@ -614,7 +611,7 @@ Calendar.propTypes = { fixedHeight: PropTypes.bool, calendarFocus: PropTypes.string, preventSnapRefocus: PropTypes.bool, - ariaLabels: ariaLabelsShape, + ariaLabels: ariaLabelsShape }; export default Calendar; diff --git a/src/components/DateRangePicker/index.js b/src/components/DateRangePicker/index.js index 949a17233..44d46f79f 100644 --- a/src/components/DateRangePicker/index.js +++ b/src/components/DateRangePicker/index.js @@ -1,7 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import DateRange from '../DateRange'; -import DefinedRange from '../DefinedRange'; import { findNextRangeIndex, generateStyles } from '../../utils'; import classnames from 'classnames'; import coreStyles from '../../styles'; @@ -10,7 +9,7 @@ class DateRangePicker extends Component { constructor(props) { super(props); this.state = { - focusedRange: [findNextRangeIndex(props.ranges), 0], + focusedRange: [findNextRangeIndex(props.ranges), 0] }; this.styles = generateStyles([coreStyles, props.classNames]); } @@ -18,17 +17,6 @@ class DateRangePicker extends Component { const { focusedRange } = this.state; return (
- - this.dateRange.updatePreview( - value ? this.dateRange.calcNewSelection(value, typeof value === 'string') : null - ) - } - {...this.props} - range={this.props.ranges[focusedRange[0]]} - className={undefined} - /> this.setState({ focusedRange })} focusedRange={focusedRange} @@ -45,8 +33,7 @@ DateRangePicker.defaultProps = {}; DateRangePicker.propTypes = { ...DateRange.propTypes, - ...DefinedRange.propTypes, - className: PropTypes.string, + className: PropTypes.string }; export default DateRangePicker; diff --git a/src/components/DayCell/index.js b/src/components/DayCell/index.js index 26f12539e..451f1f301 100644 --- a/src/components/DayCell/index.js +++ b/src/components/DayCell/index.js @@ -10,7 +10,7 @@ class DayCell extends Component { this.state = { hover: false, - active: false, + active: false }; } @@ -66,7 +66,7 @@ class DayCell extends Component { isStartOfMonth, isEndOfMonth, disabled, - styles, + styles } = this.props; return classnames(styles.day, { @@ -79,7 +79,7 @@ class DayCell extends Component { [styles.dayStartOfMonth]: isStartOfMonth, [styles.dayEndOfMonth]: isEndOfMonth, [styles.dayHovered]: this.state.hover, - [styles.dayActive]: this.state.active, + [styles.dayActive]: this.state.active }); }; renderPreviewPlaceholder = () => { @@ -87,8 +87,7 @@ class DayCell extends Component { if (!preview) return null; const startDate = preview.startDate ? endOfDay(preview.startDate) : null; const endDate = preview.endDate ? startOfDay(preview.endDate) : null; - const isInRange = - (!startDate || isAfter(day, startDate)) && (!endDate || isBefore(day, endDate)); + const isInRange = (!startDate || isAfter(day, startDate)) && (!endDate || isBefore(day, endDate)); const isStartEdge = !isInRange && isSameDay(day, startDate); const isEndEdge = !isInRange && isSameDay(day, endDate); return ( @@ -96,7 +95,7 @@ class DayCell extends Component { className={classnames({ [styles.dayStartPreview]: isStartEdge, [styles.dayInPreview]: isInRange, - [styles.dayEndPreview]: isEndEdge, + [styles.dayEndPreview]: isEndEdge })} style={{ color: preview.color }} /> @@ -106,9 +105,7 @@ class DayCell extends Component { const { styles, ranges, day } = this.props; if (this.props.displayMode === 'date') { let isSelected = isSameDay(this.props.day, this.props.date); - return isSelected ? ( - - ) : null; + return isSelected ? : null; } const inRanges = ranges.reduce((result, range) => { @@ -119,8 +116,7 @@ class DayCell extends Component { } startDate = startDate ? endOfDay(startDate) : null; endDate = endDate ? startOfDay(endDate) : null; - const isInRange = - (!startDate || isAfter(day, startDate)) && (!endDate || isBefore(day, endDate)); + const isInRange = (!startDate || isAfter(day, startDate)) && (!endDate || isBefore(day, endDate)); const isStartEdge = !isInRange && isSameDay(day, startDate); const isEndEdge = !isInRange && isSameDay(day, endDate); if (isInRange || isStartEdge || isEndEdge) { @@ -130,8 +126,8 @@ class DayCell extends Component { isStartEdge, isEndEdge: isEndEdge, isInRange, - ...range, - }, + ...range + } ]; } return result; @@ -143,9 +139,16 @@ class DayCell extends Component { className={classnames({ [styles.startEdge]: range.isStartEdge, [styles.endEdge]: range.isEndEdge, - [styles.inRange]: range.isInRange, + [styles.inRange]: range.isInRange })} - style={{ color: range.color || this.props.color }} + style={{ + color: range.color || this.props.color, + borderRadius: 4, + left: 0, + right: 0, + top: 0, + bottom: 0 + }} /> )); }; @@ -155,9 +158,9 @@ class DayCell extends Component { return ( ); @@ -189,7 +202,7 @@ export const rangeShape = PropTypes.shape({ key: PropTypes.string, autoFocus: PropTypes.bool, disabled: PropTypes.bool, - showDateDisplay: PropTypes.bool, + showDateDisplay: PropTypes.bool }); DayCell.propTypes = { @@ -200,7 +213,7 @@ DayCell.propTypes = { preview: PropTypes.shape({ startDate: PropTypes.object, endDate: PropTypes.object, - color: PropTypes.string, + color: PropTypes.string }), onPreviewChange: PropTypes.func, previewColor: PropTypes.string, @@ -218,7 +231,7 @@ DayCell.propTypes = { onMouseDown: PropTypes.func, onMouseUp: PropTypes.func, onMouseEnter: PropTypes.func, - dayContentRenderer: PropTypes.func, + dayContentRenderer: PropTypes.func }; export default DayCell; diff --git a/src/components/DefinedRange/README.md b/src/components/DefinedRange/README.md deleted file mode 100644 index 315a02589..000000000 --- a/src/components/DefinedRange/README.md +++ /dev/null @@ -1,90 +0,0 @@ -#### Example: Default Labels - -```jsx inside Markdown -import { useState } from 'react'; - -const [state, setState] = useState([ - { - startDate: new Date(), - endDate: null, - key: 'selection' - } -]); - - setState([item.selection])} - ranges={state} -/>; -``` -#### Example: Custom range labels - -```jsx inside Markdown -import { useState } from 'react'; - -const renderStaticRangeLabel = () => ( - -); - -class CustomStaticRangeLabelContent extends React.Component { - constructor(props) { - super(props); - - this.state = { - currentDateString: Date(), - }; - - this.intervalId = setInterval(() => { - this.setState({ - currentDateString: Date(), - }); - }, 1000); - } - - componentWillUnmount() { - if (this.intervalId) { - clearInterval(this.intervalId); - } - } - - render() { - const { currentDateString } = this.state; - const { text } = this.props; - - return ( - - {text} - - {currentDateString} - - - ); - } -} - -const [state, setState] = useState([ - { - startDate: new Date(), - endDate: null, - key: 'selection' - } -]); - - setState([item.selection])} - ranges={state} - renderStaticRangeLabel={renderStaticRangeLabel} - staticRanges={[ - { - label: 'Hoy', - hasCustomRendering: true, - range: () => ({ - startDate: new Date(), - endDate: new Date() - }), - isSelected() { - return true; - } - } - ]} -/>; -``` diff --git a/src/components/DefinedRange/__snapshots__/index.test.js.snap b/src/components/DefinedRange/__snapshots__/index.test.js.snap deleted file mode 100644 index 05a520b28..000000000 --- a/src/components/DefinedRange/__snapshots__/index.test.js.snap +++ /dev/null @@ -1,238 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`DefinedRange tests Should render dynamic static label contents correctly 1`] = ` -
-
- - - - -
-
- - -
-
-`; diff --git a/src/components/DefinedRange/index.js b/src/components/DefinedRange/index.js deleted file mode 100644 index 10ca9f960..000000000 --- a/src/components/DefinedRange/index.js +++ /dev/null @@ -1,142 +0,0 @@ -import React, { Component } from 'react'; -import PropTypes from 'prop-types'; -import styles from '../../styles'; -import { defaultInputRanges, defaultStaticRanges } from '../../defaultRanges'; -import { rangeShape } from '../DayCell'; -import InputRangeField from '../InputRangeField'; -import cx from 'classnames'; - -class DefinedRange extends Component { - constructor(props) { - super(props); - this.state = { - rangeOffset: 0, - focusedInput: -1, - }; - } - - handleRangeChange = range => { - const { onChange, ranges, focusedRange } = this.props; - const selectedRange = ranges[focusedRange[0]]; - if (!onChange || !selectedRange) return; - onChange({ - [selectedRange.key || `range${focusedRange[0] + 1}`]: { ...selectedRange, ...range }, - }); - }; - - getRangeOptionValue(option) { - const { ranges = [], focusedRange = [] } = this.props; - - if (typeof option.getCurrentValue !== 'function') { - return ''; - } - - const selectedRange = ranges[focusedRange[0]] || {}; - return option.getCurrentValue(selectedRange) || ''; - } - - getSelectedRange(ranges, staticRange) { - const focusedRangeIndex = ranges.findIndex(range => { - if (!range.startDate || !range.endDate || range.disabled) return false; - return staticRange.isSelected(range); - }); - const selectedRange = ranges[focusedRangeIndex]; - return { selectedRange, focusedRangeIndex }; - } - - render() { - const { - headerContent, - footerContent, - onPreviewChange, - inputRanges, - staticRanges, - ranges, - renderStaticRangeLabel, - rangeColors, - className, - } = this.props; - - return ( -
- {headerContent} -
- {staticRanges.map((staticRange, i) => { - const { selectedRange, focusedRangeIndex } = this.getSelectedRange(ranges, staticRange); - let labelContent; - - if (staticRange.hasCustomRendering) { - labelContent = renderStaticRangeLabel(staticRange); - } else { - labelContent = staticRange.label; - } - - return ( - - ); - })} -
-
- {inputRanges.map((rangeOption, i) => ( - this.setState({ focusedInput: i, rangeOffset: 0 })} - onBlur={() => this.setState({ rangeOffset: 0 })} - onChange={value => this.handleRangeChange(rangeOption.range(value, this.props))} - value={this.getRangeOptionValue(rangeOption)} - /> - ))} -
- {footerContent} -
- ); - } -} - -DefinedRange.propTypes = { - inputRanges: PropTypes.array, - staticRanges: PropTypes.array, - ranges: PropTypes.arrayOf(rangeShape), - focusedRange: PropTypes.arrayOf(PropTypes.number), - onPreviewChange: PropTypes.func, - onChange: PropTypes.func, - footerContent: PropTypes.any, - headerContent: PropTypes.any, - rangeColors: PropTypes.arrayOf(PropTypes.string), - className: PropTypes.string, - renderStaticRangeLabel: PropTypes.func, -}; - -DefinedRange.defaultProps = { - inputRanges: defaultInputRanges, - staticRanges: defaultStaticRanges, - ranges: [], - rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'], - focusedRange: [0, 0], -}; - -export default DefinedRange; diff --git a/src/components/DefinedRange/index.scss b/src/components/DefinedRange/index.scss deleted file mode 100644 index 9f05efa0c..000000000 --- a/src/components/DefinedRange/index.scss +++ /dev/null @@ -1,20 +0,0 @@ -.rdrDefinedRangesWrapper{} - -.rdrStaticRanges{ - display: flex; - flex-direction: column; -} - -.rdrStaticRange{ - font-size: inherit; -} - -.rdrStaticRangeLabel{} - -.rdrInputRanges{} - -.rdrInputRange{ - display: flex; -} - -.rdrInputRangeInput{} diff --git a/src/components/DefinedRange/index.test.js b/src/components/DefinedRange/index.test.js deleted file mode 100644 index 7a56f34ab..000000000 --- a/src/components/DefinedRange/index.test.js +++ /dev/null @@ -1,135 +0,0 @@ -import React from 'react'; -import { mount, shallow } from 'enzyme'; - -import DefinedRange from '../DefinedRange'; -import { isSameDay } from 'date-fns'; - -describe('DefinedRange tests', () => { - test('Should call "renderStaticRangeLabel" callback correct amount of times according to the "hasCustomRendering" option', () => { - const renderStaticRangeLabel = jest.fn(); - - mount( - - ); - - expect(renderStaticRangeLabel).toHaveBeenCalledTimes(2); - }); - - test('Should render dynamic static label contents correctly', () => { - const renderItalicLabelContent = () => ( - {'Italic Content'} - ); - const renderBoldLabelContent = () => {'Bold Content'}; - const renderSomethingElse = () => ; - - const renderStaticRangeLabel = function(staticRange) { - let result; - - if (staticRange.id === 'italic') { - result = renderItalicLabelContent(); - } else if (staticRange.id === 'bold') { - result = renderBoldLabelContent(); - } else { - result = renderSomethingElse(); - } - - return result; - }; - - const wrapper = shallow( - - ); - - expect(wrapper).toMatchSnapshot(); - }); -}); diff --git a/src/components/Month/index.js b/src/components/Month/index.js index 6f7802636..b82ab799b 100644 --- a/src/components/Month/index.js +++ b/src/components/Month/index.js @@ -13,20 +13,20 @@ import { isAfter, isWeekend, isWithinInterval, - eachDayOfInterval, + eachDayOfInterval } from 'date-fns'; import { getMonthDisplayRange } from '../../utils'; function renderWeekdays(styles, dateOptions, weekdayDisplayFormat) { const now = new Date(); return ( -
+
{eachDayOfInterval({ start: startOfWeek(now, dateOptions), - end: endOfWeek(now, dateOptions), + end: endOfWeek(now, dateOptions) }).map((day, i) => ( - {format(day, weekdayDisplayFormat, dateOptions)} + {format(day, 'EEEEEE', dateOptions)} ))}
@@ -52,30 +52,23 @@ class Month extends PureComponent { return { ...range, startDate, - endDate, + endDate }; }); } const showPreview = this.props.showPreview && !drag.disablePreview; return ( -
- {this.props.showMonthName ? ( -
- {format(this.props.month, this.props.monthDisplayFormat, this.props.dateOptions)} -
- ) : null} - {this.props.showWeekDays && - renderWeekdays(styles, this.props.dateOptions, this.props.weekdayDisplayFormat)} -
- {eachDayOfInterval({ start: monthDisplay.start, end: monthDisplay.end }).map( - (day, index) => { + <> +
+ {this.props.showWeekDays && + renderWeekdays(styles, this.props.dateOptions, this.props.weekdayDisplayFormat)} +
+ {eachDayOfInterval({ start: monthDisplay.start, end: monthDisplay.end }).map((day, index) => { const isStartOfMonth = isSameDay(day, monthDisplay.startDateOfMonth); const isEndOfMonth = isSameDay(day, monthDisplay.endDateOfMonth); const isOutsideMinMax = (minDate && isBefore(day, minDate)) || (maxDate && isAfter(day, maxDate)); - const isDisabledSpecifically = disabledDates.some(disabledDate => - isSameDay(disabledDate, day) - ); + const isDisabledSpecifically = disabledDates.some(disabledDate => isSameDay(disabledDate, day)); const isDisabledDay = disabledDay(day); return ( ); - } - )} + })} +
-
+ {this.props.index === 0 && ( +
+ )} + ); } } @@ -125,7 +128,7 @@ Month.propTypes = { disabledDay: PropTypes.func, preview: PropTypes.shape({ startDate: PropTypes.object, - endDate: PropTypes.object, + endDate: PropTypes.object }), showPreview: PropTypes.bool, displayMode: PropTypes.oneOf(['dateRange', 'date']), @@ -142,7 +145,7 @@ Month.propTypes = { dayDisplayFormat: PropTypes.string, showWeekDays: PropTypes.bool, showMonthName: PropTypes.bool, - fixedHeight: PropTypes.bool, + fixedHeight: PropTypes.bool }; export default Month; diff --git a/src/index.css b/src/index.css new file mode 100644 index 000000000..d91969832 --- /dev/null +++ b/src/index.css @@ -0,0 +1,660 @@ +.rdrCalendarWrapper { + box-sizing: border-box; + background: #ffffff; + display: inline-flex; + flex-direction: column; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.rdrDateDisplay { + display: flex; + justify-content: space-between; +} + +.rdrDateDisplayItem { + flex: 1 1; + width: 0; + text-align: center; + color: inherit; +} + +.rdrDateDisplayItem + .rdrDateDisplayItem { + margin-left: 0.833em; +} + +.rdrDateDisplayItem input { + text-align: inherit; +} + +.rdrDateDisplayItem input:disabled { + cursor: default; +} + +.rdrDateDisplayItemActive { +} + +.rdrMonthAndYearWrapper { + box-sizing: inherit; + display: flex; + justify-content: space-between; +} + +.rdrMonthAndYearPickers { + flex: 1 1 auto; + display: flex; + justify-content: center; + align-items: center; +} + +.rdrMonthPicker { +} + +.rdrYearPicker { +} + +.rdrNextPrevButton { + box-sizing: inherit; + cursor: pointer; + outline: none; +} + +.rdrPprevButton { +} + +.rdrNextButton { +} + +.rdrMonths { + display: flex; +} + +.rdrMonthsVertical { + flex-direction: column; +} + +.rdrMonthsHorizontal > div > div > div { + display: flex; + flex-direction: row; +} + +.rdrMonth { + width: 27.667em; +} + +.rdrWeekDays { + display: flex; +} + +.rdrWeekDay { + flex-basis: calc(100% / 7); + box-sizing: inherit; + text-align: center; +} + +.rdrDays { + display: flex; + flex-wrap: wrap; +} + +.rdrDateDisplayWrapper { +} + +.rdrMonthName { +} + +.rdrInfiniteMonths { + overflow: auto; +} + +.rdrDateRangeWrapper { + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.rdrDateInput { + position: relative; +} + +.rdrDateInput input { + outline: none; +} + +.rdrDateInput .rdrWarning { + position: absolute; + font-size: 1.6em; + line-height: 1.6em; + top: 0; + right: 0.25em; + color: #ff0000; +} + +.rdrDay { + box-sizing: inherit; + width: calc(100% / 7); + position: relative; + font: inherit; + cursor: pointer; +} + +.rdrDayNumber { + display: block; + position: relative; +} + +.rdrDayNumber span { + color: #1d2429; +} + +.rdrDayDisabled { + cursor: not-allowed; +} + +@supports (-ms-ime-align: auto) { + .rdrDay { + flex-basis: 14.285% !important; + } +} + +.rdrSelected, +.rdrInRange, +.rdrStartEdge, +.rdrEndEdge { + pointer-events: none; +} + +.rdrInRange { +} + +.rdrDayStartPreview, +.rdrDayInPreview, +.rdrDayEndPreview { + pointer-events: none; +} + +.rdrDayHovered { +} + +.rdrDayActive { +} + +.rdrDateRangePickerWrapper { + display: inline-flex; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.rdrDefinedRangesWrapper { +} + +.rdrStaticRanges { + display: flex; + flex-direction: column; +} + +.rdrStaticRange { + font-size: inherit; +} + +.rdrStaticRangeLabel { +} + +.rdrInputRanges { +} + +.rdrInputRange { + display: flex; +} + +.rdrInputRangeInput { +} + +.rdrCalendarWrapper { + color: #000000; + font-size: 12px; +} + +.rdrDateDisplayWrapper { + background-color: rgb(239, 242, 247); +} + +.rdrDateDisplay { + margin: 0.833em; +} + +.rdrDateDisplayItem { + border-radius: 4px; + background-color: rgb(255, 255, 255); + box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21); + border: 1px solid transparent; +} + +.rdrDateDisplayItem input { + cursor: pointer; + height: 2.5em; + line-height: 2.5em; + border: 0px; + background: transparent; + width: 100%; + color: #849095; +} + +.rdrDateDisplayItemActive { + border-color: currentColor; +} + +.rdrDateDisplayItemActive input { + color: #7d888d; +} + +.rdrMonthAndYearWrapper { + align-items: center; + height: 60px; + padding-top: 10px; +} + +.rdrMonthAndYearPickers { + font-weight: 600; +} + +.rdrMonthAndYearPickers select { + -moz-appearance: none; + appearance: none; + -webkit-appearance: none; + border: 0; + background: transparent; + padding: 10px 30px 10px 10px; + border-radius: 4px; + outline: 0; + color: #3e484f; + background: url("data:image/svg+xml;utf8,") + no-repeat; + background-position: right 8px center; + cursor: pointer; + text-align: center; +} + +.rdrMonthAndYearPickers select:hover { + background-color: rgba(0, 0, 0, 0.07); +} + +.rdrMonthPicker, +.rdrYearPicker { + margin: 0 5px; +} + +.rdrNextPrevButton { + display: block; + width: 24px; + height: 24px; + margin: 0 0.833em; + padding: 0; + border: 0; + border-radius: 5px; + background: #eff2f7; +} + +.rdrNextPrevButton:hover { + background: #e1e7f0; +} + +.rdrNextPrevButton i { + display: block; + width: 0; + height: 0; + padding: 0; + text-align: center; + border-style: solid; + margin: auto; + transform: translate(-3px, 0px); +} + +.rdrPprevButton i { + border-width: 4px 6px 4px 4px; + border-color: transparent rgb(52, 73, 94) transparent transparent; + transform: translate(-3px, 0px); +} + +.rdrNextButton i { + margin: 0 0 0 7px; + border-width: 4px 4px 4px 6px; + border-color: transparent transparent transparent rgb(52, 73, 94); + transform: translate(3px, 0px); +} + +.rdrWeekDays { + padding: 0 0.833em; +} + +.rdrMonth { + padding: 0 0.833em 1.666em 0.833em; +} + +.rdrMonth .rdrWeekDays { + padding: 0; +} + +.rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName { + display: none; +} + +.rdrWeekDay { + font-weight: 400; + line-height: 2.667em; + color: rgb(132, 144, 149); +} + +.rdrDay { + background: transparent; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; + border: 0; + padding: 0; + line-height: 3em; + height: 3em; + text-align: center; + color: #1d2429; +} + +.rdrDay:focus { + outline: 0; +} + +.rdrDayNumber { + outline: 0; + font-weight: 300; + position: absolute; + left: 0; + right: 0; + top: 0; + bottom: 0; + top: 5px; + bottom: 5px; + display: flex; + align-items: center; + justify-content: center; +} + +.rdrDayToday .rdrDayNumber span { + font-weight: 500; +} + +.rdrDayToday .rdrDayNumber span:after { + content: ''; + position: absolute; + bottom: 4px; + left: 50%; + transform: translate(-50%, 0); + background: #3d91ff; +} + +.rdrDayToday:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span:after, +.rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after, +.rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after, +.rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after { + background: #fff; +} + +.rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span, +.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span, +.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span, +.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span { + color: rgba(255, 255, 255, 0.85); +} + +.rdrSelected, +.rdrInRange, +.rdrStartEdge, +.rdrEndEdge { + background: currentColor; + position: absolute; + top: 5px; + left: 0; + right: 0; + bottom: 5px; +} + +.rdrSelected { + left: 2px; + right: 2px; +} + +.rdrInRange { +} + +.rdrStartEdge { + border-top-left-radius: 1.042em; + border-bottom-left-radius: 1.042em; + left: 2px; +} + +.rdrEndEdge { + border-top-right-radius: 1.042em; + border-bottom-right-radius: 1.042em; + right: 2px; +} + +.rdrSelected { + border-radius: 1.042em; +} + +.rdrDayStartOfMonth .rdrInRange, +.rdrDayStartOfMonth .rdrEndEdge, +.rdrDayStartOfWeek .rdrInRange, +.rdrDayStartOfWeek .rdrEndEdge { + border-top-left-radius: 1.042em; + border-bottom-left-radius: 1.042em; + left: 2px; +} + +.rdrDayEndOfMonth .rdrInRange, +.rdrDayEndOfMonth .rdrStartEdge, +.rdrDayEndOfWeek .rdrInRange, +.rdrDayEndOfWeek .rdrStartEdge { + border-top-right-radius: 1.042em; + border-bottom-right-radius: 1.042em; + right: 2px; +} + +.rdrDayStartOfMonth .rdrDayInPreview, +.rdrDayStartOfMonth .rdrDayEndPreview, +.rdrDayStartOfWeek .rdrDayInPreview, +.rdrDayStartOfWeek .rdrDayEndPreview { + border-top-left-radius: 1.333em; + border-bottom-left-radius: 1.333em; + border-left-width: 1px; + left: 0px; +} + +.rdrDayEndOfMonth .rdrDayInPreview, +.rdrDayEndOfMonth .rdrDayStartPreview, +.rdrDayEndOfWeek .rdrDayInPreview, +.rdrDayEndOfWeek .rdrDayStartPreview { + border-top-right-radius: 1.333em; + border-bottom-right-radius: 1.333em; + border-right-width: 1px; + right: 0px; +} + +.rdrDayStartPreview, +.rdrDayInPreview, +.rdrDayEndPreview { + background: rgba(255, 255, 255, 0.09); + position: absolute; + top: 3px; + left: 0px; + right: 0px; + bottom: 3px; + pointer-events: none; + border: 0px solid currentColor; + z-index: 1; +} + +.rdrDayStartPreview { + border-top-width: 1px; + border-left-width: 1px; + border-bottom-width: 1px; + border-top-left-radius: 1.333em; + border-bottom-left-radius: 1.333em; + left: 0px; +} + +.rdrDayInPreview { + border-top-width: 1px; + border-bottom-width: 1px; +} + +.rdrDayEndPreview { + border-top-width: 1px; + border-right-width: 1px; + border-bottom-width: 1px; + border-top-right-radius: 1.333em; + border-bottom-right-radius: 1.333em; + right: 2px; + right: 0px; +} + +.rdrDefinedRangesWrapper { + font-size: 12px; + width: 226px; + border-right: solid 1px #eff2f7; + background: #fff; +} + +.rdrDefinedRangesWrapper .rdrStaticRangeSelected { + color: currentColor; + font-weight: 600; +} + +.rdrStaticRange { + border: 0; + cursor: pointer; + display: block; + outline: 0; + border-bottom: 1px solid #eff2f7; + padding: 0; + background: #fff; +} + +.rdrStaticRange:hover .rdrStaticRangeLabel, +.rdrStaticRange:focus .rdrStaticRangeLabel { + background: #eff2f7; +} + +.rdrStaticRangeLabel { + display: block; + outline: 0; + line-height: 18px; + padding: 10px 20px; + text-align: left; +} + +.rdrInputRanges { + padding: 10px 0; +} + +.rdrInputRange { + align-items: center; + padding: 5px 20px; +} + +.rdrInputRangeInput { + width: 30px; + height: 30px; + line-height: 30px; + border-radius: 4px; + text-align: center; + border: solid 1px rgb(222, 231, 235); + margin-right: 10px; + color: rgb(108, 118, 122); +} + +.rdrInputRangeInput:focus, +.rdrInputRangeInput:hover { + border-color: rgb(180, 191, 196); + outline: 0; + color: #333; +} + +.rdrCalendarWrapper:not(.rdrDateRangeWrapper) .rdrDayHovered .rdrDayNumber:after { + content: ''; + border: 1px solid currentColor; + border-radius: 1.333em; + position: absolute; + top: -2px; + bottom: -2px; + left: 0px; + right: 0px; + background: transparent; +} + +.rdrDayPassive { + pointer-events: none; +} + +.rdrDayPassive .rdrDayNumber span { + color: #d5dce0; +} + +.rdrDayPassive .rdrInRange, +.rdrDayPassive .rdrStartEdge, +.rdrDayPassive .rdrEndEdge, +.rdrDayPassive .rdrSelected, +.rdrDayPassive .rdrDayStartPreview, +.rdrDayPassive .rdrDayInPreview, +.rdrDayPassive .rdrDayEndPreview { + display: none; +} + +.rdrDayDisabled { + background-color: rgb(248, 248, 248); +} + +.rdrDayDisabled .rdrDayNumber span { + color: #aeb9bf; +} + +.rdrDayDisabled .rdrInRange, +.rdrDayDisabled .rdrStartEdge, +.rdrDayDisabled .rdrEndEdge, +.rdrDayDisabled .rdrSelected, +.rdrDayDisabled .rdrDayStartPreview, +.rdrDayDisabled .rdrDayInPreview, +.rdrDayDisabled .rdrDayEndPreview { + filter: grayscale(100%) opacity(60%); +} + +.rdrMonthName { + text-align: left; + font-weight: 600; + color: #849095; + padding: 0.833em; +} + +.rdrEndEdge + .rdrDayNumber { + background: #834bff !important; +} +.rdrStartEdge + .rdrDayNumber { + background: #834bff !important; +} +.rdrInRange + .rdrDayNumber { + background: #e9dfff !important; +} +.rdrInRange + .rdrDayNumber > span { + color: #834bff !important; +} + +.rdrDayPassive > .rdrDayNumber { + background: #fafafa !important; +} +.rdrDayPassive > .rdrDayNumber > span { + display: none !important; +} diff --git a/src/index.js b/src/index.js index 3b02272e3..55fd56699 100644 --- a/src/index.js +++ b/src/index.js @@ -1,6 +1,6 @@ +import './index.css'; + export { default as DateRange } from './components/DateRange'; export { default as Calendar } from './components/Calendar'; export { default as DateRangePicker } from './components/DateRangePicker'; -export { default as DefinedRange } from './components/DefinedRange'; export { defaultInputRanges, defaultStaticRanges, createStaticRanges } from './defaultRanges'; -// test comment From 40d6c0701266dd728619b68a4ace27a737f315e9 Mon Sep 17 00:00:00 2001 From: ronnie Date: Fri, 9 Sep 2022 12:58:51 +0530 Subject: [PATCH 05/11] update: changes --- dist/components/Calendar/index.js | 120 ++++++----- dist/components/DateRangePicker/index.js | 14 +- dist/components/DayCell/index.js | 30 ++- dist/components/DefinedRange/index.js | 220 --------------------- dist/components/DefinedRange/index.test.js | 115 ----------- dist/components/Month/index.js | 27 ++- dist/index.js | 10 +- dist/styles.css | 197 ------------------ 8 files changed, 113 insertions(+), 620 deletions(-) delete mode 100644 dist/components/DefinedRange/index.js delete mode 100644 dist/components/DefinedRange/index.test.js delete mode 100644 dist/styles.css diff --git a/dist/components/Calendar/index.js b/dist/components/Calendar/index.js index 79a13966d..8305363a5 100644 --- a/dist/components/Calendar/index.js +++ b/dist/components/Calendar/index.js @@ -67,6 +67,12 @@ var _styles = _interopRequireDefault(require("../../styles")); var _accessibility = require("../../accessibility"); +var _dayjs = _interopRequireDefault(require("dayjs")); + +var _arrowLeft = _interopRequireDefault(require("../../assets/arrow-left.svg")); + +var _arrowRight = _interopRequireDefault(require("../../assets/arrow-right.svg")); + function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } @@ -130,6 +136,8 @@ var Calendar = /*#__PURE__*/function (_PureComponent) { var preventUnnecessary = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : true; if (!props.scroll.enabled) { + if (preventUnnecessary) return; + if (preventUnnecessary && props.preventSnapRefocus) { var focusedDateDiff = (0, _differenceInCalendarMonths.default)(date, _this.state.focusedDate); var isAllowedForward = props.calendarFocus === 'forwards' && focusedDateDiff >= 0; @@ -271,67 +279,73 @@ var Calendar = /*#__PURE__*/function (_PureComponent) { }); _defineProperty(_assertThisInitialized(_this), "renderMonthAndYear", function (focusedDate, changeShownDate, props) { - var showMonthArrow = props.showMonthArrow, - minDate = props.minDate, - maxDate = props.maxDate, - showMonthAndYearPickers = props.showMonthAndYearPickers, - ariaLabels = props.ariaLabels; - var upperYearLimit = (maxDate || Calendar.defaultProps.maxDate).getFullYear(); - var lowerYearLimit = (minDate || Calendar.defaultProps.minDate).getFullYear(); var styles = _this.styles; + var startMonth = ''; + var endMonth = ''; + new Array(_this.props.months).fill(null).map(function (_, i) { + var monthStep = (0, _addMonths.default)(_this.state.focusedDate, i); + + if (_this.props.calendarFocus === 'backwards') { + monthStep = (0, _subMonths.default)(_this.state.focusedDate, _this.props.months - 1 - i); + } + + if (i === 0) { + startMonth = monthStep; + } + + if (i === _this.props.months - 1) { + endMonth = monthStep; + } + }); return /*#__PURE__*/_react.default.createElement("div", { onMouseUp: function onMouseUp(e) { return e.stopPropagation(); }, - className: styles.monthAndYearWrapper - }, showMonthArrow ? /*#__PURE__*/_react.default.createElement("button", { - type: "button", - className: (0, _classnames3.default)(styles.nextPrevButton, styles.prevButton), + className: styles.monthAndYearWrapper, + style: { + marginBottom: 16 + } + }, /*#__PURE__*/_react.default.createElement("div", { + className: "flex items-center" + }, /*#__PURE__*/_react.default.createElement("div", { + className: "w-10 h-10 bg-gray-3 rounded-[4px] flex items-center justify-center cursor-pointer", onClick: function onClick() { return changeShownDate(-1, 'monthOffset'); - }, - "aria-label": ariaLabels.prevButton - }, /*#__PURE__*/_react.default.createElement("i", null)) : null, showMonthAndYearPickers ? /*#__PURE__*/_react.default.createElement("span", { - className: styles.monthAndYearPickers - }, /*#__PURE__*/_react.default.createElement("span", { - className: styles.monthPicker - }, /*#__PURE__*/_react.default.createElement("select", { - value: focusedDate.getMonth(), - onChange: function onChange(e) { - return changeShownDate(e.target.value, 'setMonth'); - }, - "aria-label": ariaLabels.monthPicker - }, _this.state.monthNames.map(function (monthName, i) { - return /*#__PURE__*/_react.default.createElement("option", { - key: i, - value: i - }, monthName); - }))), /*#__PURE__*/_react.default.createElement("span", { - className: styles.monthAndYearDivider - }), /*#__PURE__*/_react.default.createElement("span", { - className: styles.yearPicker - }, /*#__PURE__*/_react.default.createElement("select", { - value: focusedDate.getFullYear(), - onChange: function onChange(e) { - return changeShownDate(e.target.value, 'setYear'); - }, - "aria-label": ariaLabels.yearPicker - }, new Array(upperYearLimit - lowerYearLimit + 1).fill(upperYearLimit).map(function (val, i) { - var year = val - i; - return /*#__PURE__*/_react.default.createElement("option", { - key: year, - value: year - }, year); - })))) : /*#__PURE__*/_react.default.createElement("span", { - className: styles.monthAndYearPickers - }, _this.state.monthNames[focusedDate.getMonth()], " ", focusedDate.getFullYear()), showMonthArrow ? /*#__PURE__*/_react.default.createElement("button", { - type: "button", - className: (0, _classnames3.default)(styles.nextPrevButton, styles.nextButton), + } + }, /*#__PURE__*/_react.default.createElement("img", { + src: _arrowLeft.default + })), /*#__PURE__*/_react.default.createElement("div", { + className: "rounded-[4px] bg-[#F9F7FC] px-4 py-1", + style: { + marginLeft: 16 + } + }, /*#__PURE__*/_react.default.createElement("p", { + className: "leading-7 text-[#834BFF] font-semibold text-[16px] " + }, (0, _dayjs.default)(startMonth).format('MMMM'))), /*#__PURE__*/_react.default.createElement("div", { + className: "rounded-[4px] bg-[#F9F7FC] px-4 py-1 ml-2" + }, /*#__PURE__*/_react.default.createElement("p", { + className: "leading-7 text-[#834BFF] font-semibold text-[16px] " + }, (0, _dayjs.default)(startMonth).format('YYYY')))), /*#__PURE__*/_react.default.createElement("div", { + className: "flex items-center" + }, /*#__PURE__*/_react.default.createElement("div", { + className: "rounded-[4px] bg-[#F9F7FC] px-4 py-1" + }, /*#__PURE__*/_react.default.createElement("p", { + className: "leading-7 text-[#834BFF] font-semibold text-[16px] " + }, (0, _dayjs.default)(endMonth).format('MMMM'))), /*#__PURE__*/_react.default.createElement("div", { + className: "rounded-[4px] bg-[#F9F7FC] px-4 py-1 ml-2 mr-6", + style: { + marginRight: 16 + } + }, /*#__PURE__*/_react.default.createElement("p", { + className: "leading-7 text-[#834BFF] font-semibold text-[16px] " + }, (0, _dayjs.default)(startMonth).format('YYYY'))), /*#__PURE__*/_react.default.createElement("div", { + className: "w-10 h-10 bg-gray-3 rounded-[4px] flex items-center justify-center cursor-pointer", onClick: function onClick() { return changeShownDate(+1, 'monthOffset'); - }, - "aria-label": ariaLabels.nextButton - }, /*#__PURE__*/_react.default.createElement("i", null)) : null); + } + }, /*#__PURE__*/_react.default.createElement("img", { + src: _arrowRight.default + })))); }); _defineProperty(_assertThisInitialized(_this), "renderDateDisplay", function () { @@ -704,7 +718,6 @@ var Calendar = /*#__PURE__*/function (_PureComponent) { className: (0, _classnames3.default)(this.styles.months, isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal) }, new Array(this.props.months).fill(null).map(function (_, i) { var monthStep = (0, _addMonths.default)(_this5.state.focusedDate, i); - ; if (_this5.props.calendarFocus === 'backwards') { monthStep = (0, _subMonths.default)(_this5.state.focusedDate, _this5.props.months - 1 - i); @@ -715,6 +728,7 @@ var Calendar = /*#__PURE__*/function (_PureComponent) { preview: preview || _this5.state.preview, ranges: ranges, key: i, + index: i, drag: _this5.state.drag, dateOptions: _this5.dateOptions, disabledDates: disabledDates, diff --git a/dist/components/DateRangePicker/index.js b/dist/components/DateRangePicker/index.js index 2210d04d9..e7c3c0d29 100644 --- a/dist/components/DateRangePicker/index.js +++ b/dist/components/DateRangePicker/index.js @@ -13,8 +13,6 @@ var _propTypes = _interopRequireDefault(require("prop-types")); var _DateRange = _interopRequireDefault(require("../DateRange")); -var _DefinedRange = _interopRequireDefault(require("../DefinedRange")); - var _utils = require("../../utils"); var _classnames = _interopRequireDefault(require("classnames")); @@ -81,15 +79,7 @@ var DateRangePicker = /*#__PURE__*/function (_Component) { var focusedRange = this.state.focusedRange; return /*#__PURE__*/_react.default.createElement("div", { className: (0, _classnames.default)(this.styles.dateRangePickerWrapper, this.props.className) - }, /*#__PURE__*/_react.default.createElement(_DefinedRange.default, _extends({ - focusedRange: focusedRange, - onPreviewChange: function onPreviewChange(value) { - return _this2.dateRange.updatePreview(value ? _this2.dateRange.calcNewSelection(value, typeof value === 'string') : null); - } - }, this.props, { - range: this.props.ranges[focusedRange[0]], - className: undefined - })), /*#__PURE__*/_react.default.createElement(_DateRange.default, _extends({ + }, /*#__PURE__*/_react.default.createElement(_DateRange.default, _extends({ onRangeFocusChange: function onRangeFocusChange(focusedRange) { return _this2.setState({ focusedRange: focusedRange @@ -109,7 +99,7 @@ var DateRangePicker = /*#__PURE__*/function (_Component) { }(_react.Component); DateRangePicker.defaultProps = {}; -DateRangePicker.propTypes = _objectSpread(_objectSpread(_objectSpread({}, _DateRange.default.propTypes), _DefinedRange.default.propTypes), {}, { +DateRangePicker.propTypes = _objectSpread(_objectSpread({}, _DateRange.default.propTypes), {}, { className: _propTypes.default.string }); var _default = DateRangePicker; diff --git a/dist/components/DayCell/index.js b/dist/components/DayCell/index.js index 0b02de69d..1a0c0664d 100644 --- a/dist/components/DayCell/index.js +++ b/dist/components/DayCell/index.js @@ -232,7 +232,12 @@ var DayCell = /*#__PURE__*/function (_Component) { key: i, className: (0, _classnames4.default)((_classnames3 = {}, _defineProperty(_classnames3, styles.startEdge, range.isStartEdge), _defineProperty(_classnames3, styles.endEdge, range.isEndEdge), _defineProperty(_classnames3, styles.inRange, range.isInRange), _classnames3)), style: { - color: range.color || _this.props.color + color: range.color || _this.props.color, + borderRadius: 4, + left: 0, + right: 0, + top: 0, + bottom: 0 } }); }); @@ -250,10 +255,10 @@ var DayCell = /*#__PURE__*/function (_Component) { value: function render() { var dayContentRenderer = this.props.dayContentRenderer; return /*#__PURE__*/_react.default.createElement("button", _extends({ - type: "button", - onMouseEnter: this.handleMouseEvent, - onMouseLeave: this.handleMouseEvent, - onFocus: this.handleMouseEvent, + type: "button" // onMouseEnter={this.handleMouseEvent} + // onMouseLeave={this.handleMouseEvent} + // onFocus={this.handleMouseEvent} + , onMouseDown: this.handleMouseEvent, onMouseUp: this.handleMouseEvent, onBlur: this.handleMouseEvent, @@ -265,10 +270,21 @@ var DayCell = /*#__PURE__*/function (_Component) { tabIndex: -1 } : {}, { style: { - color: this.props.color + color: this.props.color, + width: 43, + height: 43, + margin: 2 } }), this.renderSelectionPlaceholders(), this.renderPreviewPlaceholder(), /*#__PURE__*/_react.default.createElement("span", { - className: this.props.styles.dayNumber + className: this.props.styles.dayNumber, + style: { + top: '0px', + left: '0px', + right: '0px', + bottom: '0px', + borderRadius: 4, + background: '#FAFAFA' + } }, (dayContentRenderer === null || dayContentRenderer === void 0 ? void 0 : dayContentRenderer(this.props.day)) || /*#__PURE__*/_react.default.createElement("span", null, (0, _format.default)(this.props.day, this.props.dayDisplayFormat)))); } }]); diff --git a/dist/components/DefinedRange/index.js b/dist/components/DefinedRange/index.js deleted file mode 100644 index 014a20432..000000000 --- a/dist/components/DefinedRange/index.js +++ /dev/null @@ -1,220 +0,0 @@ -"use strict"; - -function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } - -Object.defineProperty(exports, "__esModule", { - value: true -}); -exports.default = void 0; - -var _react = _interopRequireWildcard(require("react")); - -var _propTypes = _interopRequireDefault(require("prop-types")); - -var _styles = _interopRequireDefault(require("../../styles")); - -var _defaultRanges = require("../../defaultRanges"); - -var _DayCell = require("../DayCell"); - -var _InputRangeField = _interopRequireDefault(require("../InputRangeField")); - -var _classnames = _interopRequireDefault(require("classnames")); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); } - -function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; } - -function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; } - -function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } - -function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } - -function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } - -function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); } - -function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } - -function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; } - -function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); } - -function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } - -function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } - -function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } - -function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } - -var DefinedRange = /*#__PURE__*/function (_Component) { - _inherits(DefinedRange, _Component); - - var _super = _createSuper(DefinedRange); - - function DefinedRange(props) { - var _this; - - _classCallCheck(this, DefinedRange); - - _this = _super.call(this, props); - - _defineProperty(_assertThisInitialized(_this), "handleRangeChange", function (range) { - var _this$props = _this.props, - onChange = _this$props.onChange, - ranges = _this$props.ranges, - focusedRange = _this$props.focusedRange; - var selectedRange = ranges[focusedRange[0]]; - if (!onChange || !selectedRange) return; - onChange(_defineProperty({}, selectedRange.key || "range".concat(focusedRange[0] + 1), _objectSpread(_objectSpread({}, selectedRange), range))); - }); - - _this.state = { - rangeOffset: 0, - focusedInput: -1 - }; - return _this; - } - - _createClass(DefinedRange, [{ - key: "getRangeOptionValue", - value: function getRangeOptionValue(option) { - var _this$props2 = this.props, - _this$props2$ranges = _this$props2.ranges, - ranges = _this$props2$ranges === void 0 ? [] : _this$props2$ranges, - _this$props2$focusedR = _this$props2.focusedRange, - focusedRange = _this$props2$focusedR === void 0 ? [] : _this$props2$focusedR; - - if (typeof option.getCurrentValue !== 'function') { - return ''; - } - - var selectedRange = ranges[focusedRange[0]] || {}; - return option.getCurrentValue(selectedRange) || ''; - } - }, { - key: "getSelectedRange", - value: function getSelectedRange(ranges, staticRange) { - var focusedRangeIndex = ranges.findIndex(function (range) { - if (!range.startDate || !range.endDate || range.disabled) return false; - return staticRange.isSelected(range); - }); - var selectedRange = ranges[focusedRangeIndex]; - return { - selectedRange: selectedRange, - focusedRangeIndex: focusedRangeIndex - }; - } - }, { - key: "render", - value: function render() { - var _this2 = this; - - var _this$props3 = this.props, - headerContent = _this$props3.headerContent, - footerContent = _this$props3.footerContent, - onPreviewChange = _this$props3.onPreviewChange, - inputRanges = _this$props3.inputRanges, - staticRanges = _this$props3.staticRanges, - ranges = _this$props3.ranges, - renderStaticRangeLabel = _this$props3.renderStaticRangeLabel, - rangeColors = _this$props3.rangeColors, - className = _this$props3.className; - return /*#__PURE__*/_react.default.createElement("div", { - className: (0, _classnames.default)(_styles.default.definedRangesWrapper, className) - }, headerContent, /*#__PURE__*/_react.default.createElement("div", { - className: _styles.default.staticRanges - }, staticRanges.map(function (staticRange, i) { - var _this2$getSelectedRan = _this2.getSelectedRange(ranges, staticRange), - selectedRange = _this2$getSelectedRan.selectedRange, - focusedRangeIndex = _this2$getSelectedRan.focusedRangeIndex; - - var labelContent; - - if (staticRange.hasCustomRendering) { - labelContent = renderStaticRangeLabel(staticRange); - } else { - labelContent = staticRange.label; - } - - return /*#__PURE__*/_react.default.createElement("button", { - type: "button", - className: (0, _classnames.default)(_styles.default.staticRange, _defineProperty({}, _styles.default.staticRangeSelected, Boolean(selectedRange))), - style: { - color: selectedRange ? selectedRange.color || rangeColors[focusedRangeIndex] : null - }, - key: i, - onClick: function onClick() { - return _this2.handleRangeChange(staticRange.range(_this2.props)); - }, - onFocus: function onFocus() { - return onPreviewChange && onPreviewChange(staticRange.range(_this2.props)); - }, - onMouseOver: function onMouseOver() { - return onPreviewChange && onPreviewChange(staticRange.range(_this2.props)); - }, - onMouseLeave: function onMouseLeave() { - onPreviewChange && onPreviewChange(); - } - }, /*#__PURE__*/_react.default.createElement("span", { - tabIndex: -1, - className: _styles.default.staticRangeLabel - }, labelContent)); - })), /*#__PURE__*/_react.default.createElement("div", { - className: _styles.default.inputRanges - }, inputRanges.map(function (rangeOption, i) { - return /*#__PURE__*/_react.default.createElement(_InputRangeField.default, { - key: i, - styles: _styles.default, - label: rangeOption.label, - onFocus: function onFocus() { - return _this2.setState({ - focusedInput: i, - rangeOffset: 0 - }); - }, - onBlur: function onBlur() { - return _this2.setState({ - rangeOffset: 0 - }); - }, - onChange: function onChange(value) { - return _this2.handleRangeChange(rangeOption.range(value, _this2.props)); - }, - value: _this2.getRangeOptionValue(rangeOption) - }); - })), footerContent); - } - }]); - - return DefinedRange; -}(_react.Component); - -DefinedRange.propTypes = { - inputRanges: _propTypes.default.array, - staticRanges: _propTypes.default.array, - ranges: _propTypes.default.arrayOf(_DayCell.rangeShape), - focusedRange: _propTypes.default.arrayOf(_propTypes.default.number), - onPreviewChange: _propTypes.default.func, - onChange: _propTypes.default.func, - footerContent: _propTypes.default.any, - headerContent: _propTypes.default.any, - rangeColors: _propTypes.default.arrayOf(_propTypes.default.string), - className: _propTypes.default.string, - renderStaticRangeLabel: _propTypes.default.func -}; -DefinedRange.defaultProps = { - inputRanges: _defaultRanges.defaultInputRanges, - staticRanges: _defaultRanges.defaultStaticRanges, - ranges: [], - rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'], - focusedRange: [0, 0] -}; -var _default = DefinedRange; -exports.default = _default; \ No newline at end of file diff --git a/dist/components/DefinedRange/index.test.js b/dist/components/DefinedRange/index.test.js deleted file mode 100644 index 9cfae20a3..000000000 --- a/dist/components/DefinedRange/index.test.js +++ /dev/null @@ -1,115 +0,0 @@ -"use strict"; - -var _react = _interopRequireDefault(require("react")); - -var _enzyme = require("enzyme"); - -var _DefinedRange = _interopRequireDefault(require("../DefinedRange")); - -var _isSameDay = _interopRequireDefault(require("date-fns/isSameDay")); - -function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } - -describe('DefinedRange tests', function () { - test('Should call "renderStaticRangeLabel" callback correct amount of times according to the "hasCustomRendering" option', function () { - var renderStaticRangeLabel = jest.fn(); - (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_DefinedRange.default, { - staticRanges: [{ - label: 'Dynamic Label', - range: {}, - isSelected: function isSelected(range) { - var definedRange = this.range(); - return (0, _isSameDay.default)(range.startDate, definedRange.startDate) && (0, _isSameDay.default)(range.endDate, definedRange.endDate); - }, - hasCustomRendering: true - }, { - label: 'Static Label', - range: {}, - isSelected: function isSelected(range) { - var definedRange = this.range(); - return (0, _isSameDay.default)(range.startDate, definedRange.startDate) && (0, _isSameDay.default)(range.endDate, definedRange.endDate); - } - }, { - label: 'Hede', - range: {}, - isSelected: function isSelected(range) { - var definedRange = this.range(); - return (0, _isSameDay.default)(range.startDate, definedRange.startDate) && (0, _isSameDay.default)(range.endDate, definedRange.endDate); - }, - hasCustomRendering: true - }], - renderStaticRangeLabel: renderStaticRangeLabel - })); - expect(renderStaticRangeLabel).toHaveBeenCalledTimes(2); - }); - test('Should render dynamic static label contents correctly', function () { - var renderItalicLabelContent = function renderItalicLabelContent() { - return /*#__PURE__*/_react.default.createElement("i", { - className: 'italic-label-content' - }, 'Italic Content'); - }; - - var renderBoldLabelContent = function renderBoldLabelContent() { - return /*#__PURE__*/_react.default.createElement("b", { - className: 'bold-label-content' - }, 'Bold Content'); - }; - - var renderSomethingElse = function renderSomethingElse() { - return /*#__PURE__*/_react.default.createElement("img", { - className: 'random-image' - }); - }; - - var renderStaticRangeLabel = function renderStaticRangeLabel(staticRange) { - var result; - - if (staticRange.id === 'italic') { - result = renderItalicLabelContent(); - } else if (staticRange.id === 'bold') { - result = renderBoldLabelContent(); - } else { - result = renderSomethingElse(); - } - - return result; - }; - - var wrapper = (0, _enzyme.shallow)( /*#__PURE__*/_react.default.createElement(_DefinedRange.default, { - staticRanges: [{ - id: 'italic', - range: {}, - isSelected: function isSelected(range) { - var definedRange = this.range(); - return (0, _isSameDay.default)(range.startDate, definedRange.startDate) && (0, _isSameDay.default)(range.endDate, definedRange.endDate); - }, - hasCustomRendering: true - }, { - label: 'Static Label', - range: {}, - isSelected: function isSelected(range) { - var definedRange = this.range(); - return (0, _isSameDay.default)(range.startDate, definedRange.startDate) && (0, _isSameDay.default)(range.endDate, definedRange.endDate); - } - }, { - id: 'whatever', - range: {}, - isSelected: function isSelected(range) { - var definedRange = this.range(); - return (0, _isSameDay.default)(range.startDate, definedRange.startDate) && (0, _isSameDay.default)(range.endDate, definedRange.endDate); - }, - hasCustomRendering: true - }, { - id: 'bold', - range: {}, - isSelected: function isSelected(range) { - var definedRange = this.range(); - return (0, _isSameDay.default)(range.startDate, definedRange.startDate) && (0, _isSameDay.default)(range.endDate, definedRange.endDate); - }, - hasCustomRendering: true - }], - renderStaticRangeLabel: renderStaticRangeLabel - })); - expect(wrapper).toMatchSnapshot(); - }); -}); \ No newline at end of file diff --git a/dist/components/Month/index.js b/dist/components/Month/index.js index b65979b56..e595ca71e 100644 --- a/dist/components/Month/index.js +++ b/dist/components/Month/index.js @@ -74,7 +74,10 @@ function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.g function renderWeekdays(styles, dateOptions, weekdayDisplayFormat) { var now = new Date(); return /*#__PURE__*/_react.default.createElement("div", { - className: styles.weekDays + className: styles.weekDays, + style: { + width: 330 + } }, (0, _eachDayOfInterval.default)({ start: (0, _startOfWeek.default)(now, dateOptions), end: (0, _endOfWeek.default)(now, dateOptions) @@ -82,7 +85,7 @@ function renderWeekdays(styles, dateOptions, weekdayDisplayFormat) { return /*#__PURE__*/_react.default.createElement("span", { className: styles.weekDay, key: i - }, (0, _format.default)(day, weekdayDisplayFormat, dateOptions)); + }, (0, _format.default)(day, 'EEEEEE', dateOptions)); })); } @@ -129,14 +132,15 @@ var Month = /*#__PURE__*/function (_PureComponent) { } var showPreview = this.props.showPreview && !drag.disablePreview; - return /*#__PURE__*/_react.default.createElement("div", { + return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", { className: styles.month, style: this.props.style - }, this.props.showMonthName ? /*#__PURE__*/_react.default.createElement("div", { - className: styles.monthName - }, (0, _format.default)(this.props.month, this.props.monthDisplayFormat, this.props.dateOptions)) : null, this.props.showWeekDays && renderWeekdays(styles, this.props.dateOptions, this.props.weekdayDisplayFormat), /*#__PURE__*/_react.default.createElement("div", { + }, this.props.showWeekDays && renderWeekdays(styles, this.props.dateOptions, this.props.weekdayDisplayFormat), /*#__PURE__*/_react.default.createElement("div", { className: styles.days, - onMouseLeave: this.props.onMouseLeave + onMouseLeave: this.props.onMouseLeave, + style: { + width: 330 + } }, (0, _eachDayOfInterval.default)({ start: monthDisplay.start, end: monthDisplay.end @@ -171,7 +175,14 @@ var Month = /*#__PURE__*/function (_PureComponent) { dragRange: drag.range, drag: drag.status })); - }))); + }))), this.props.index === 0 && /*#__PURE__*/_react.default.createElement("div", { + style: { + width: 0.5, + background: '#E6E7E7', + margin: '10px 10px 0px 28px', + height: '90%' + } + })); } }]); diff --git a/dist/index.js b/dist/index.js index 5ceb02ae4..5beead76a 100644 --- a/dist/index.js +++ b/dist/index.js @@ -21,12 +21,6 @@ Object.defineProperty(exports, "DateRangePicker", { return _DateRangePicker.default; } }); -Object.defineProperty(exports, "DefinedRange", { - enumerable: true, - get: function get() { - return _DefinedRange.default; - } -}); Object.defineProperty(exports, "defaultInputRanges", { enumerable: true, get: function get() { @@ -46,14 +40,14 @@ Object.defineProperty(exports, "createStaticRanges", { } }); +require("./index.css"); + var _DateRange = _interopRequireDefault(require("./components/DateRange")); var _Calendar = _interopRequireDefault(require("./components/Calendar")); var _DateRangePicker = _interopRequireDefault(require("./components/DateRangePicker")); -var _DefinedRange = _interopRequireDefault(require("./components/DefinedRange")); - var _defaultRanges = require("./defaultRanges"); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } \ No newline at end of file diff --git a/dist/styles.css b/dist/styles.css deleted file mode 100644 index 930c7de43..000000000 --- a/dist/styles.css +++ /dev/null @@ -1,197 +0,0 @@ -.rdrCalendarWrapper { - box-sizing: border-box; - background: #ffffff; - display: inline-flex; - flex-direction: column; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.rdrDateDisplay{ - display: flex; - justify-content: space-between; -} - -.rdrDateDisplayItem{ - flex: 1 1; - width: 0; - text-align: center; - color: inherit; -} - -.rdrDateDisplayItem + .rdrDateDisplayItem{ - margin-left: 0.833em; - } - -.rdrDateDisplayItem input{ - text-align: inherit - } - -.rdrDateDisplayItem input:disabled{ - cursor: default; - } - -.rdrDateDisplayItemActive{} - -.rdrMonthAndYearWrapper { - box-sizing: inherit; - display: flex; - justify-content: space-between; -} - -.rdrMonthAndYearPickers{ - flex: 1 1 auto; - display: flex; - justify-content: center; - align-items: center; -} - -.rdrMonthPicker{} - -.rdrYearPicker{} - -.rdrNextPrevButton { - box-sizing: inherit; - cursor: pointer; - outline: none; -} - -.rdrPprevButton {} - -.rdrNextButton {} - -.rdrMonths{ - display: flex; -} - -.rdrMonthsVertical{ - flex-direction: column; -} - -.rdrMonthsHorizontal > div > div > div{ - display: flex; - flex-direction: row; -} - -.rdrMonth{ - width: 27.667em; -} - -.rdrWeekDays{ - display: flex; -} - -.rdrWeekDay { - flex-basis: calc(100% / 7); - box-sizing: inherit; - text-align: center; -} - -.rdrDays{ - display: flex; - flex-wrap: wrap; -} - -.rdrDateDisplayWrapper{} - -.rdrMonthName{} - -.rdrInfiniteMonths{ - overflow: auto; -} - -.rdrDateRangeWrapper{ - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.rdrDateInput { - position: relative; -} - -.rdrDateInput input { - outline: none; - } - -.rdrDateInput .rdrWarning { - position: absolute; - font-size: 1.6em; - line-height: 1.6em; - top: 0; - right: .25em; - color: #FF0000; - } - -.rdrDay { - box-sizing: inherit; - width: calc(100% / 7); - position: relative; - font: inherit; - cursor: pointer; -} - -.rdrDayNumber { - display: block; - position: relative; -} - -.rdrDayNumber span{ - color: #1d2429; - } - -.rdrDayDisabled { - cursor: not-allowed; -} - -@supports (-ms-ime-align: auto) { - .rdrDay { - flex-basis: 14.285% !important; - } -} - -.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{ - pointer-events: none; -} - -.rdrInRange{} - -.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{ - pointer-events: none; -} - -.rdrDayHovered{} - -.rdrDayActive{} - -.rdrDateRangePickerWrapper{ - display: inline-flex; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.rdrDefinedRangesWrapper{} - -.rdrStaticRanges{ - display: flex; - flex-direction: column; -} - -.rdrStaticRange{ - font-size: inherit; -} - -.rdrStaticRangeLabel{} - -.rdrInputRanges{} - -.rdrInputRange{ - display: flex; -} - -.rdrInputRangeInput{} From 9ac13a905ecc0678af8f9d823d6a14e55c37b0b8 Mon Sep 17 00:00:00 2001 From: ronnie Date: Fri, 9 Sep 2022 13:04:06 +0530 Subject: [PATCH 06/11] update: changes --- src/index.js | 2 -- src/styles.scss | 1 - 2 files changed, 3 deletions(-) diff --git a/src/index.js b/src/index.js index 55fd56699..994d82e52 100644 --- a/src/index.js +++ b/src/index.js @@ -1,5 +1,3 @@ -import './index.css'; - export { default as DateRange } from './components/DateRange'; export { default as Calendar } from './components/Calendar'; export { default as DateRangePicker } from './components/DateRangePicker'; diff --git a/src/styles.scss b/src/styles.scss index ad1901ab3..0cc4304f2 100644 --- a/src/styles.scss +++ b/src/styles.scss @@ -3,4 +3,3 @@ @import 'components/DateInput/index.scss'; @import 'components/DayCell/index.scss'; @import 'components/DateRangePicker/index.scss'; -@import 'components/DefinedRange/index.scss'; From acce0c69c6d9161114c7ff57fb5f65f03235c7ab Mon Sep 17 00:00:00 2001 From: ronnie Date: Fri, 9 Sep 2022 13:08:31 +0530 Subject: [PATCH 07/11] update: changes --- dist/index.js | 2 - dist/styles.css | 176 ++++++++++++++++++++++++++++++++++++++++++++++++ package.json | 1 + 3 files changed, 177 insertions(+), 2 deletions(-) create mode 100644 dist/styles.css diff --git a/dist/index.js b/dist/index.js index 5beead76a..0bcc32e4c 100644 --- a/dist/index.js +++ b/dist/index.js @@ -40,8 +40,6 @@ Object.defineProperty(exports, "createStaticRanges", { } }); -require("./index.css"); - var _DateRange = _interopRequireDefault(require("./components/DateRange")); var _Calendar = _interopRequireDefault(require("./components/Calendar")); diff --git a/dist/styles.css b/dist/styles.css new file mode 100644 index 000000000..fd1be23f4 --- /dev/null +++ b/dist/styles.css @@ -0,0 +1,176 @@ +.rdrCalendarWrapper { + box-sizing: border-box; + background: #ffffff; + display: inline-flex; + flex-direction: column; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.rdrDateDisplay{ + display: flex; + justify-content: space-between; +} + +.rdrDateDisplayItem{ + flex: 1 1; + width: 0; + text-align: center; + color: inherit; +} + +.rdrDateDisplayItem + .rdrDateDisplayItem{ + margin-left: 0.833em; + } + +.rdrDateDisplayItem input{ + text-align: inherit + } + +.rdrDateDisplayItem input:disabled{ + cursor: default; + } + +.rdrDateDisplayItemActive{} + +.rdrMonthAndYearWrapper { + box-sizing: inherit; + display: flex; + justify-content: space-between; +} + +.rdrMonthAndYearPickers{ + flex: 1 1 auto; + display: flex; + justify-content: center; + align-items: center; +} + +.rdrMonthPicker{} + +.rdrYearPicker{} + +.rdrNextPrevButton { + box-sizing: inherit; + cursor: pointer; + outline: none; +} + +.rdrPprevButton {} + +.rdrNextButton {} + +.rdrMonths{ + display: flex; +} + +.rdrMonthsVertical{ + flex-direction: column; +} + +.rdrMonthsHorizontal > div > div > div{ + display: flex; + flex-direction: row; +} + +.rdrMonth{ + width: 27.667em; +} + +.rdrWeekDays{ + display: flex; +} + +.rdrWeekDay { + flex-basis: calc(100% / 7); + box-sizing: inherit; + text-align: center; +} + +.rdrDays{ + display: flex; + flex-wrap: wrap; +} + +.rdrDateDisplayWrapper{} + +.rdrMonthName{} + +.rdrInfiniteMonths{ + overflow: auto; +} + +.rdrDateRangeWrapper{ + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.rdrDateInput { + position: relative; +} + +.rdrDateInput input { + outline: none; + } + +.rdrDateInput .rdrWarning { + position: absolute; + font-size: 1.6em; + line-height: 1.6em; + top: 0; + right: .25em; + color: #FF0000; + } + +.rdrDay { + box-sizing: inherit; + width: calc(100% / 7); + position: relative; + font: inherit; + cursor: pointer; +} + +.rdrDayNumber { + display: block; + position: relative; +} + +.rdrDayNumber span{ + color: #1d2429; + } + +.rdrDayDisabled { + cursor: not-allowed; +} + +@supports (-ms-ime-align: auto) { + .rdrDay { + flex-basis: 14.285% !important; + } +} + +.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{ + pointer-events: none; +} + +.rdrInRange{} + +.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{ + pointer-events: none; +} + +.rdrDayHovered{} + +.rdrDayActive{} + +.rdrDateRangePickerWrapper{ + display: inline-flex; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} diff --git a/package.json b/package.json index 45d1a59c3..cbc58f84b 100644 --- a/package.json +++ b/package.json @@ -39,6 +39,7 @@ ], "dependencies": { "classnames": "^2.2.6", + "dayjs": "^1.11.5", "prop-types": "^15.7.2", "react-list": "^0.8.13", "shallow-equal": "^1.2.1" From 94b78e20cc1acfe6a0bec1416dddb4ddd4381187 Mon Sep 17 00:00:00 2001 From: ronnie Date: Fri, 9 Sep 2022 13:12:41 +0530 Subject: [PATCH 08/11] update: added assets --- dist/assets/arrow-left.svg | 3 +++ dist/assets/arrow-right.svg | 3 +++ 2 files changed, 6 insertions(+) create mode 100644 dist/assets/arrow-left.svg create mode 100644 dist/assets/arrow-right.svg diff --git a/dist/assets/arrow-left.svg b/dist/assets/arrow-left.svg new file mode 100644 index 000000000..e0564c500 --- /dev/null +++ b/dist/assets/arrow-left.svg @@ -0,0 +1,3 @@ + + + diff --git a/dist/assets/arrow-right.svg b/dist/assets/arrow-right.svg new file mode 100644 index 000000000..20cc4805b --- /dev/null +++ b/dist/assets/arrow-right.svg @@ -0,0 +1,3 @@ + + + From b783f4020358e70e081f2aae070ae4044dfb74e0 Mon Sep 17 00:00:00 2001 From: ronnie Date: Fri, 9 Sep 2022 13:24:38 +0530 Subject: [PATCH 09/11] update: changes --- dist/assets/arrow-left.svg | 3 --- dist/assets/arrow-right.svg | 3 --- dist/assets/left.png | Bin 0 -> 510 bytes dist/assets/right.png | Bin 0 -> 536 bytes dist/components/Calendar/index.js | 12 ++++++++---- src/components/Calendar/index.js | 8 ++++---- 6 files changed, 12 insertions(+), 14 deletions(-) delete mode 100644 dist/assets/arrow-left.svg delete mode 100644 dist/assets/arrow-right.svg create mode 100644 dist/assets/left.png create mode 100644 dist/assets/right.png diff --git a/dist/assets/arrow-left.svg b/dist/assets/arrow-left.svg deleted file mode 100644 index e0564c500..000000000 --- a/dist/assets/arrow-left.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/dist/assets/arrow-right.svg b/dist/assets/arrow-right.svg deleted file mode 100644 index 20cc4805b..000000000 --- a/dist/assets/arrow-right.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/dist/assets/left.png b/dist/assets/left.png new file mode 100644 index 0000000000000000000000000000000000000000..68e0a51162932fe56b8a365b31539bdddf39d99f GIT binary patch literal 510 zcmVzBn8Sw&GSh?a1vFG>jjKL>oZos{WTsmFzjZ*T@s^LZZ*{0pYNaP<$$0N@#FUST+~Ce56jx-?&K z0Dw;cf8K%50N3Q9Q6>0*n<^A8^3Fg9H`7qKcL3kOH@4=QM#{MafKLFw-+|9U;9da$ zuJC)(elwdT;A;w$QvgMgmtWyeD~g~|yP#?Kl_JS8faC`2-lkhlJ~@6Vf}D4OZ9>@r znKiXd7}N(bwqZ~Z|LY+7i6BPp0s%4e8HVkxCl^yCfsv<1zXzo5vg*%4m^*1!k7>dl zBsPd;XEB+*C7pFZfzn#9(=@FCpIg(>6sqg`!Nor~fG&t*Y3Rb5GWpiJRztqgUd4EX zmN+4=dM2k{h?0R;vSKL*E-QJMUL!MawAWwPI}5_fQ49E9dH?_b07*qoM6N<$f{N(T AD*ylh literal 0 HcmV?d00001 diff --git a/dist/assets/right.png b/dist/assets/right.png new file mode 100644 index 0000000000000000000000000000000000000000..a621cbc878304fce19b65a2529a4e707013b19b3 GIT binary patch literal 536 zcmV+z0_XjSP)eRM?&Xvq0i(5GKG(z|qkWIyy2!m;g42YzBz4fxJOl8j1J7K08G&Pk-)m zxy!F`Y@e*})3fx+0XT7B1gBA+=a*XR$0#z5l-~;o$Qh?ml3c&x&ola+#&HZy)07a1 zh}mw_od^N5(P;DnfnZfYsYa%0oZ@NLn#i#d3M;V&PgrxHV>}+O08G|h8v{jERUhC1 z_Z9phgqYy5?yq5v6Ep)4tSUgDU}B6};`o#H)<%eEBBiXs0c!(0OsLj`0!y3>gfw9_ z2ZoRk&WStdmna(2OELx)I2&k9)HLdC6XuhWliP=vfq{vq{*KA$)o@L)f@mK~sX9&5 z2F0iCtt%nS4+Yr1XT2-Xft%HZOV`e;U(l$O2nZ!u8y4h zyjKPOvq0ni0NsSM&I0EO^g-kn{;{4YZQ0000 changeShownDate(-1, 'monthOffset')} > - +

@@ -242,7 +242,7 @@ class Calendar extends PureComponent { className="w-10 h-10 bg-gray-3 rounded-[4px] flex items-center justify-center cursor-pointer" onClick={() => changeShownDate(+1, 'monthOffset')} > - +

From 01b9505fc5eb6a9c06aae57870e004dd89701699 Mon Sep 17 00:00:00 2001 From: ronnie Date: Fri, 9 Sep 2022 13:43:25 +0530 Subject: [PATCH 10/11] update: changes --- dist/assets/left.png | Bin 510 -> 0 bytes dist/assets/right.png | Bin 536 -> 0 bytes dist/components/Calendar/index.js | 8 ++------ src/assets/arrow-left.svg | 3 --- src/assets/arrow-right.svg | 3 --- src/components/Calendar/index.js | 14 ++++++++++---- 6 files changed, 12 insertions(+), 16 deletions(-) delete mode 100644 dist/assets/left.png delete mode 100644 dist/assets/right.png delete mode 100644 src/assets/arrow-left.svg delete mode 100644 src/assets/arrow-right.svg diff --git a/dist/assets/left.png b/dist/assets/left.png deleted file mode 100644 index 68e0a51162932fe56b8a365b31539bdddf39d99f..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 510 zcmVzBn8Sw&GSh?a1vFG>jjKL>oZos{WTsmFzjZ*T@s^LZZ*{0pYNaP<$$0N@#FUST+~Ce56jx-?&K z0Dw;cf8K%50N3Q9Q6>0*n<^A8^3Fg9H`7qKcL3kOH@4=QM#{MafKLFw-+|9U;9da$ zuJC)(elwdT;A;w$QvgMgmtWyeD~g~|yP#?Kl_JS8faC`2-lkhlJ~@6Vf}D4OZ9>@r znKiXd7}N(bwqZ~Z|LY+7i6BPp0s%4e8HVkxCl^yCfsv<1zXzo5vg*%4m^*1!k7>dl zBsPd;XEB+*C7pFZfzn#9(=@FCpIg(>6sqg`!Nor~fG&t*Y3Rb5GWpiJRztqgUd4EX zmN+4=dM2k{h?0R;vSKL*E-QJMUL!MawAWwPI}5_fQ49E9dH?_b07*qoM6N<$f{N(T AD*ylh diff --git a/dist/assets/right.png b/dist/assets/right.png deleted file mode 100644 index a621cbc878304fce19b65a2529a4e707013b19b3..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 536 zcmV+z0_XjSP)eRM?&Xvq0i(5GKG(z|qkWIyy2!m;g42YzBz4fxJOl8j1J7K08G&Pk-)m zxy!F`Y@e*})3fx+0XT7B1gBA+=a*XR$0#z5l-~;o$Qh?ml3c&x&ola+#&HZy)07a1 zh}mw_od^N5(P;DnfnZfYsYa%0oZ@NLn#i#d3M;V&PgrxHV>}+O08G|h8v{jERUhC1 z_Z9phgqYy5?yq5v6Ep)4tSUgDU}B6};`o#H)<%eEBBiXs0c!(0OsLj`0!y3>gfw9_ z2ZoRk&WStdmna(2OELx)I2&k9)HLdC6XuhWliP=vfq{vq{*KA$)o@L)f@mK~sX9&5 z2F0iCtt%nS4+Yr1XT2-Xft%HZOV`e;U(l$O2nZ!u8y4h zyjKPOvq0ni0NsSM&I0EO^g-kn{;{4YZQ0000 - - diff --git a/src/assets/arrow-right.svg b/src/assets/arrow-right.svg deleted file mode 100644 index 20cc4805b..000000000 --- a/src/assets/arrow-right.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index 6dca87b7c..53cfb74b1 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -31,8 +31,6 @@ import defaultLocale from 'date-fns/locale/en-US'; import coreStyles from '../../styles'; import { ariaLabelsShape } from '../../accessibility'; import dayjs from 'dayjs'; -import ArrowLeft from '../../assets/left.png'; -import ArrowRight from '../../assets/right.png'; class Calendar extends PureComponent { constructor(props, context) { @@ -213,7 +211,11 @@ class Calendar extends PureComponent { className="w-10 h-10 bg-gray-3 rounded-[4px] flex items-center justify-center cursor-pointer" onClick={() => changeShownDate(-1, 'monthOffset')} > - +

@@ -242,7 +244,11 @@ class Calendar extends PureComponent { className="w-10 h-10 bg-gray-3 rounded-[4px] flex items-center justify-center cursor-pointer" onClick={() => changeShownDate(+1, 'monthOffset')} > - +

From e7679c6f7dac936e4b1c16c17bc7ad95578a5855 Mon Sep 17 00:00:00 2001 From: Shivam Dev Date: Mon, 12 Sep 2022 16:10:55 +0300 Subject: [PATCH 11/11] update: calender text css --- dist/components/Calendar/index.js | 2 +- dist/styles.css | 2 ++ dist/theme/default.css | 2 +- src/components/Calendar/index.js | 2 +- src/components/DayCell/index.scss | 2 ++ src/index.css | 7 ++++--- src/theme/default.scss | 6 +++--- 7 files changed, 14 insertions(+), 9 deletions(-) diff --git a/dist/components/Calendar/index.js b/dist/components/Calendar/index.js index f2ec66ec5..a2b150f0a 100644 --- a/dist/components/Calendar/index.js +++ b/dist/components/Calendar/index.js @@ -318,7 +318,7 @@ var Calendar = /*#__PURE__*/function (_PureComponent) { marginLeft: 16 } }, /*#__PURE__*/_react.default.createElement("p", { - className: "leading-7 text-[#834BFF] font-semibold text-[16px] " + className: "leading-7 text-[#834BFF] font-semibold text-[16px]" }, (0, _dayjs.default)(startMonth).format('MMMM'))), /*#__PURE__*/_react.default.createElement("div", { className: "rounded-[4px] bg-[#F9F7FC] px-4 py-1 ml-2" }, /*#__PURE__*/_react.default.createElement("p", { diff --git a/dist/styles.css b/dist/styles.css index fd1be23f4..8b79fa3d2 100644 --- a/dist/styles.css +++ b/dist/styles.css @@ -141,6 +141,8 @@ .rdrDayNumber span{ color: #1d2429; + font-weight: 500; + font-size: 14px; } .rdrDayDisabled { diff --git a/dist/theme/default.css b/dist/theme/default.css index 0e12bb90b..75796caea 100644 --- a/dist/theme/default.css +++ b/dist/theme/default.css @@ -185,7 +185,7 @@ } .rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span,.rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span{ - color: rgba(255, 255, 255, 0.85); + color: #FFFFFF; } .rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{ diff --git a/src/components/Calendar/index.js b/src/components/Calendar/index.js index 53cfb74b1..dde2775cb 100644 --- a/src/components/Calendar/index.js +++ b/src/components/Calendar/index.js @@ -218,7 +218,7 @@ class Calendar extends PureComponent { />
-

+

{dayjs(startMonth).format('MMMM')}

diff --git a/src/components/DayCell/index.scss b/src/components/DayCell/index.scss index e6f0c6543..f8b461a22 100644 --- a/src/components/DayCell/index.scss +++ b/src/components/DayCell/index.scss @@ -11,6 +11,8 @@ position: relative; span{ color: #1d2429; + font-weight: 500; + font-size: 14px; } } diff --git a/src/index.css b/src/index.css index d91969832..2d14e7c8d 100644 --- a/src/index.css +++ b/src/index.css @@ -147,7 +147,8 @@ } .rdrDayNumber span { - color: #1d2429; + color: #575E63; + font-weight: 500; } .rdrDayDisabled { @@ -400,14 +401,14 @@ .rdrDayToday:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span:after, .rdrDayToday:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span:after, .rdrDayToday:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span:after { - background: #fff; + background: #FFFFFF; } .rdrDay:not(.rdrDayPassive) .rdrInRange ~ .rdrDayNumber span, .rdrDay:not(.rdrDayPassive) .rdrStartEdge ~ .rdrDayNumber span, .rdrDay:not(.rdrDayPassive) .rdrEndEdge ~ .rdrDayNumber span, .rdrDay:not(.rdrDayPassive) .rdrSelected ~ .rdrDayNumber span { - color: rgba(255, 255, 255, 0.85); + color: #FFFFFF; } .rdrSelected, diff --git a/src/theme/default.scss b/src/theme/default.scss index 0e17aecac..3f6aadfba 100644 --- a/src/theme/default.scss +++ b/src/theme/default.scss @@ -119,11 +119,11 @@ .rdrWeekDays { padding: 0; } -} +} .rdrMonths.rdrMonthsVertical .rdrMonth:first-child .rdrMonthName{ display: none; -} +} .rdrWeekDay { font-weight: 400; @@ -187,7 +187,7 @@ .rdrInRange, .rdrStartEdge, .rdrEndEdge, .rdrSelected{ & ~ .rdrDayNumber{ span{ - color: rgba(255, 255, 255, 0.85); + color: #FFFFFF; } } }