diff --git a/.babelrc b/.babelrc index afd61d7d5..85fcc3f9b 100644 --- a/.babelrc +++ b/.babelrc @@ -1,11 +1,8 @@ { - "presets": [ - "env", - "react" - ], + "presets": ["env", "react"], "plugins": [ - "date-fns", + "./babel.js", "transform-object-rest-spread", "transform-export-extensions" ] -} \ No newline at end of file +} diff --git a/.gitignore b/.gitignore index c95a69547..2f36e49f6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,8 @@ node_modules/ .DS_Store *.log -dist/ +# dist/ +demo/dist .idea *.orig lib/ diff --git a/CHANGELOG.md b/CHANGELOG.md index a08cf1844..0b088409c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,68 +1,75 @@ # Changelog + All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). - - ## [Unreleased] ### Changed -- BREAKING: `Calendar` and `DateRange` are now totally controlled components with stateless date management. -- BREAKING: React-date-range is no longer use moment out of the box. Input and output values are native Date object. Until v2 version you don't depent on momentjs. You can keep continue to use moment if you want like below +* BREAKING: `Calendar` and `DateRange` are now totally controlled components with stateless date management. + +* BREAKING: React-date-range is no longer use moment out of the box. Input and output values are native Date object. Until v2 version you don't depent on momentjs. You can keep continue to use moment if you want like below OLD + ```js // this.state.eventDate: momentjs object this.setState({eventDate: date})} + onChange={date => this.setState({ eventDate: date })} /> ``` NEW + ```js this.setState({ eventDate: date })} // + onChange={date => this.setState({ eventDate: date })} // /> ``` NEW with moment (or any other date libraries) + ```js this.setState({ eventDate: moment(date) })} // + onChange={date => this.setState({ eventDate: moment(date) })} // /> ``` -- BREAKING: Theming and style approach complately changed. `react-date-range` don't use inline styles any more. At the new version you should import **skeleton styles** and **theme styles** + +* BREAKING: Theming and style approach complately changed. `react-date-range` don't use inline styles any more. At the new version you should import **skeleton styles** and **theme styles** ```js // main style file -import 'react-date-range/dist/styles.css'; +import "react-date-range/dist/styles.css"; // theme css file -import 'react-date-range/dist/theme/default.css'; +import "react-date-range/dist/theme/default.css"; ``` -- BREAKING: `Calendar` and `DateRange` Components, no longer support string typed `lang` prop. +* BREAKING: `Calendar` and `DateRange` Components, no longer support string typed `lang` prop. + +OLD - OLD - ```js - +```js + ``` - NEW - ```js - import turkish from 'react-date-range/locale/tr'; - // you can view full list in https://github.com/Adphorus/react-date-range/tree/next/src/locale/index.js - +NEW + +```js +import turkish from "react-date-range/locale/tr"; +// you can view full list in https://github.com/Adphorus/react-date-range/tree/next/src/locale/index.js +; ``` -- BREAKING: `DateRange` handle range data with `ranges:Array` prop instead of `startDate` and `endDate` props. +* BREAKING: `DateRange` handle range data with `ranges:Array` prop instead of `startDate` and `endDate` props. OLD + ```js { - console.log(changes); - /* prints + key: "selection" + } + ]} + onChange={changes => { + console.log(changes); + /* prints { selection: { startDate: Date, @@ -97,36 +107,42 @@ NEW } } */ - }} - /> + }} +/> ``` -- `calendars` prop renamed as `months`. And `Calendar` component is accepting `months` prop just like `DateRange`. Default value changed to `1` from `2`. -### Removed -- `format` prop removed. No longer accepts string input for `Calendar` or `DateRange`. You should parse dates like below: -Native js: `new Date(dateString)` -Date-fns: `fns.parse(dateString)` -Momentjs: `moment(dateString).toDate()` +* `calendars` prop renamed as `months`. And `Calendar` component is accepting `months` prop just like `DateRange`. Default value changed to `1` from `2`. + + ### Removed -- `disableDaysBeforeToday` prop removed. use `minDate={new Date()}` instead. -- `firstDayOfWeek` prop removed. It is auto detecting from locale prop. -- `init` prop removed. -- `specialDays` prop removed. +* `format` prop removed. No longer accepts string input for `Calendar` or `DateRange`. You should parse dates like below: + Native js: `new Date(dateString)` + date-fns2: `fns.parse(dateString)` + Momentjs: `moment(dateString).toDate()` + +* `disableDaysBeforeToday` prop removed. use `minDate={new Date()}` instead. +* `firstDayOfWeek` prop removed. It is auto detecting from locale prop. +* `init` prop removed. +* `specialDays` prop removed. ### Added -- `disabledDates` prop: It's a set of disabled dates. -- `DefinedRanges` component: It's a set of date presets. Receives `inputRanges`, `staticRanges` for setting date ranges. -- `DateRangePicker` component. It's combined version of `DateRange` with `DefinedRanges` component. -- Date range selection by drag. -- Infinite scroll feature. Sample usage: + +* `disabledDates` prop: It's a set of disabled dates. +* `DefinedRanges` component: It's a set of date presets. Receives `inputRanges`, `staticRanges` for setting date ranges. +* `DateRangePicker` component. It's combined version of `DateRange` with `DefinedRanges` component. +* Date range selection by drag. +* Infinite scroll feature. Sample usage: + ```js const horizontalScroll={enabled: true, monthHeight: 300, monthWidth: 300 }; const verticalScroll={enabled: true, monthHeight: 220, longMonthHeight: 240 }; ``` -- `showPreview` prop added to control visibility of preview. Default value is `true`. -- `preview` prop added: It displays a preview range and overwrite DateRange's default preview. You can set a controlled preview with below shape of object. + +* `showPreview` prop added to control visibility of preview. Default value is `true`. +* `preview` prop added: It displays a preview range and overwrite DateRange's default preview. You can set a controlled preview with below shape of object. + ```js { startDate: [Date Object] || null, @@ -134,9 +150,10 @@ Momentjs: `moment(dateString).toDate()` color: '#fed14c', } ``` -- `onPreviewChange(date)` prop added: Callback function for preview changes. You can set controlled custom previews with `preview` prop. -- `focusedRange` prop added: It defines which range and step are focused. Common initial value is `[0, 0]`; first value is index of ranges, second value is which step on date range(startDate or endDate). -- `initialFocusedRange` prop added: Initial value for focused range. See `focusedRange` for usage. -- `onRangeFocusChange` prop added: Callback function for focus changes by user. -- `dragSelectionEnabled` prop added -- `showMonthAndYearPickers` prop added \ No newline at end of file + +* `onPreviewChange(date)` prop added: Callback function for preview changes. You can set controlled custom previews with `preview` prop. +* `focusedRange` prop added: It defines which range and step are focused. Common initial value is `[0, 0]`; first value is index of ranges, second value is which step on date range(startDate or endDate). +* `initialFocusedRange` prop added: Initial value for focused range. See `focusedRange` for usage. +* `onRangeFocusChange` prop added: Callback function for focus changes by user. +* `dragSelectionEnabled` prop added +* `showMonthAndYearPickers` prop added diff --git a/babel.js b/babel.js new file mode 100644 index 000000000..4b37af54b --- /dev/null +++ b/babel.js @@ -0,0 +1,160 @@ +'use strict'; + +Object.defineProperty(exports, '__esModule', { + value: true, +}); + +var _slicedToArray = (function() { + function sliceIterator(arr, i) { + var _arr = []; + var _n = true; + var _d = false; + var _e = undefined; + try { + for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { + _arr.push(_s.value); + if (i && _arr.length === i) break; + } + } catch (err) { + _d = true; + _e = err; + } finally { + try { + if (!_n && _i['return']) _i['return'](); + } finally { + if (_d) throw _e; + } + } + return _arr; + } + return function(arr, i) { + if (Array.isArray(arr)) { + return arr; + } else if (Symbol.iterator in Object(arr)) { + return sliceIterator(arr, i); + } else { + throw new TypeError('Invalid attempt to destructure non-iterable instance'); + } + }; +})(); + +var _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; + }; + +var _fs = require('fs'); + +var _fs2 = _interopRequireDefault(_fs); + +var _module2 = require('module'); + +var _module3 = _interopRequireDefault(_module2); + +var _path = require('path'); + +var _path2 = _interopRequireDefault(_path); + +function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { default: obj }; +} + +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 _module = new _module3.default(); + +var modulePath = _path2.default.dirname( + _module3.default._resolveFilename( + 'date-fns2', + _extends({}, _module, { + paths: _module3.default._nodeModulePaths(process.cwd()), + }) + ) +); + +var indexFile = _fs2.default.readFileSync(modulePath + '/index.js', 'utf-8'); +var regStr = "([\\S]+): require\\('.\\/([\\S]+)\\/index.js'\\)"; + +var regx = new RegExp(regStr); +var globalRegx = new RegExp(regStr, 'g'); + +var pkgMap = indexFile + .match(globalRegx) + .map(function(exp) { + return exp.match(regx).slice(1); + }) + .reduce(function(result, _ref) { + var _ref2 = _slicedToArray(_ref, 2), + pkgId = _ref2[0], + path = _ref2[1]; + + return _extends({}, result, _defineProperty({}, pkgId, path)); + }, {}); + +exports.default = function(_ref3) { + var t = _ref3.types; + return { + visitor: { + ImportDeclaration: function ImportDeclaration(path) { + var node = path.node; + var specifiers = node.specifiers, + source = node.source; + var pkgId = source.value; + + if (pkgId !== 'date-fns2') { + return; + } + + if (!specifiers.filter(t.isImportSpecifier).length) { + return; + } + + specifiers.forEach(function(spec) { + var _spec = spec, + local = _spec.local, + imported = _spec.imported; + var localName = local.name; + + var importedPath = 'date-fns2'; + + if (t.isImportSpecifier(spec)) { + var importedName = imported.name; + + spec = t.importDefaultSpecifier(t.identifier(localName)); + + if (!pkgMap[importedName]) { + throw new Error('date-fns2 does not contain module "' + importedName + '"'); + } + + importedPath = 'date-fns2/' + pkgMap[importedName]; + } + + path.insertAfter(t.importDeclaration([spec], t.stringLiteral(importedPath))); + }); + + path.remove(); + }, + }, + }; +}; diff --git a/demo/src/components/Main.js b/demo/src/components/Main.js index 06e0b5356..6c79798f2 100644 --- a/demo/src/components/Main.js +++ b/demo/src/components/Main.js @@ -1,7 +1,7 @@ import React, { Component } from 'react'; import { Calendar, DateRange, DateRangePicker, DefinedRange } from '../../../src'; import * as rdrLocales from '../../../src/locale'; -import { format, addDays } from 'date-fns'; +import { format, addDays } from 'date-fns2'; import Section from './Section'; const nameMapper = { diff --git a/dist/components/Calendar.js b/dist/components/Calendar.js new file mode 100644 index 000000000..1db89934f --- /dev/null +++ b/dist/components/Calendar.js @@ -0,0 +1,756 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _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; }; + +var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _DayCell = require('./DayCell.js'); + +var _Month = require('./Month.js'); + +var _Month2 = _interopRequireDefault(_Month); + +var _utils = require('../utils'); + +var _classnames3 = require('classnames'); + +var _classnames4 = _interopRequireDefault(_classnames3); + +var _reactList = require('react-list'); + +var _reactList2 = _interopRequireDefault(_reactList); + +var _max = require('date-fns2/max'); + +var _max2 = _interopRequireDefault(_max); + +var _min = require('date-fns2/min'); + +var _min2 = _interopRequireDefault(_min); + +var _differenceInDays = require('date-fns2/differenceInDays'); + +var _differenceInDays2 = _interopRequireDefault(_differenceInDays); + +var _isSameMonth = require('date-fns2/isSameMonth'); + +var _isSameMonth2 = _interopRequireDefault(_isSameMonth); + +var _addDays = require('date-fns2/addDays'); + +var _addDays2 = _interopRequireDefault(_addDays); + +var _endOfMonth = require('date-fns2/endOfMonth'); + +var _endOfMonth2 = _interopRequireDefault(_endOfMonth); + +var _startOfMonth = require('date-fns2/startOfMonth'); + +var _startOfMonth2 = _interopRequireDefault(_startOfMonth); + +var _differenceInCalendarMonths = require('date-fns2/differenceInCalendarMonths'); + +var _differenceInCalendarMonths2 = _interopRequireDefault(_differenceInCalendarMonths); + +var _setMonth2 = require('date-fns2/setMonth'); + +var _setMonth3 = _interopRequireDefault(_setMonth2); + +var _setYear2 = require('date-fns2/setYear'); + +var _setYear3 = _interopRequireDefault(_setYear2); + +var _addYears = require('date-fns2/addYears'); + +var _addYears2 = _interopRequireDefault(_addYears); + +var _isSameDay = require('date-fns2/isSameDay'); + +var _isSameDay2 = _interopRequireDefault(_isSameDay); + +var _endOfWeek = require('date-fns2/endOfWeek'); + +var _endOfWeek2 = _interopRequireDefault(_endOfWeek); + +var _startOfWeek = require('date-fns2/startOfWeek'); + +var _startOfWeek2 = _interopRequireDefault(_startOfWeek); + +var _eachDayOfInterval = require('date-fns2/eachDayOfInterval'); + +var _eachDayOfInterval2 = _interopRequireDefault(_eachDayOfInterval); + +var _format = require('date-fns2/format'); + +var _format2 = _interopRequireDefault(_format); + +var _addMonths = require('date-fns2/addMonths'); + +var _addMonths2 = _interopRequireDefault(_addMonths); + +var _enUS = require('date-fns2/locale/en-US'); + +var _enUS2 = _interopRequireDefault(_enUS); + +var _styles = require('../styles'); + +var _styles2 = _interopRequireDefault(_styles); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +console.log(_enUS2.default); + +var Calendar = function (_PureComponent) { + _inherits(Calendar, _PureComponent); + + function Calendar(props, context) { + _classCallCheck(this, Calendar); + + var _this = _possibleConstructorReturn(this, (Calendar.__proto__ || Object.getPrototypeOf(Calendar)).call(this, props, context)); + + _this.changeShownDate = _this.changeShownDate.bind(_this); + _this.focusToDate = _this.focusToDate.bind(_this); + _this.updateShownDate = _this.updateShownDate.bind(_this); + _this.handleRangeFocusChange = _this.handleRangeFocusChange.bind(_this); + _this.renderDateDisplay = _this.renderDateDisplay.bind(_this); + _this.onDragSelectionStart = _this.onDragSelectionStart.bind(_this); + _this.onDragSelectionEnd = _this.onDragSelectionEnd.bind(_this); + _this.onDragSelectionMove = _this.onDragSelectionMove.bind(_this); + _this.renderMonthAndYear = _this.renderMonthAndYear.bind(_this); + _this.updatePreview = _this.updatePreview.bind(_this); + _this.estimateMonthSize = _this.estimateMonthSize.bind(_this); + _this.handleScroll = _this.handleScroll.bind(_this); + _this.dateOptions = { locale: props.locale }; + _this.styles = (0, _utils.generateStyles)([_styles2.default, props.classNames]); + _this.listSizeCache = {}; + _this.state = { + 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: '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: 'focusToDate', + value: function focusToDate(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) { + this.setState({ focusedDate: date }); + return; + } + var targetMonthIndex = (0, _differenceInCalendarMonths2.default)(date, props.minDate, this.dateOptions); + var visibleMonths = this.list.getVisibleRange(); + if (preventUnnecessary && visibleMonths.includes(targetMonthIndex)) return; + this.list.scrollTo(targetMonthIndex); + this.setState({ focusedDate: date }); + } + }, { + key: 'updateShownDate', + value: function updateShownDate() { + var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : this.props; + + var newProps = props.scroll.enabled ? _extends({}, props, { + months: this.list.getVisibleRange().length + }) : props; + var newFocus = (0, _utils.calcFocusDate)(this.state.focusedDate, newProps); + this.focusToDate(newFocus, newProps); + } + }, { + key: 'updatePreview', + value: function updatePreview(val) { + if (!val) { + this.setState({ preview: null }); + return; + } + var preview = { + startDate: val, + endDate: val, + color: this.props.color + }; + this.setState({ preview: preview }); + } + }, { + key: 'componentDidMount', + value: function componentDidMount() { + var _this2 = this; + + if (this.props.scroll.enabled) { + // prevent react-list's initial render focus problem + setTimeout(function () { + return _this2.focusToDate(_this2.state.focusedDate); + }, 1); + } + } + }, { + key: 'componentWillReceiveProps', + value: function componentWillReceiveProps(nextProps) { + var propMapper = { + dateRange: 'ranges', + date: 'date' + }; + var targetProp = propMapper[nextProps.displayMode]; + if (this.props.locale !== nextProps.locale) { + this.dateOptions = { locale: nextProps.locale }; + } + if (JSON.stringify(this.props.scroll) !== JSON.stringify(nextProps.scroll)) { + this.setState({ scrollArea: this.calcScrollArea(nextProps) }); + } + if (nextProps[targetProp] !== this.props[targetProp]) { + this.updateShownDate(nextProps); + } + } + }, { + key: 'changeShownDate', + value: function changeShownDate(value) { + var mode = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'set'; + var focusedDate = this.state.focusedDate; + var _props = this.props, + onShownDateChange = _props.onShownDateChange, + minDate = _props.minDate, + maxDate = _props.maxDate; + + var modeMapper = { + monthOffset: function monthOffset() { + return (0, _addMonths2.default)(focusedDate, value); + }, + setMonth: function setMonth() { + return (0, _setMonth3.default)(focusedDate, value); + }, + setYear: function setYear() { + return (0, _setYear3.default)(focusedDate, value); + }, + set: function set() { + return value; + } + }; + var newDate = (0, _min2.default)([(0, _max2.default)([modeMapper[mode](), minDate]), maxDate]); + this.focusToDate(newDate, this.props, false); + onShownDateChange && onShownDateChange(newDate); + } + }, { + key: 'handleRangeFocusChange', + value: function handleRangeFocusChange(rangesIndex, rangeItemIndex) { + this.props.onRangeFocusChange && this.props.onRangeFocusChange([rangesIndex, rangeItemIndex]); + } + }, { + key: 'handleScroll', + value: function handleScroll() { + var _props2 = this.props, + onShownDateChange = _props2.onShownDateChange, + minDate = _props2.minDate; + + var visibleMonths = this.list.getVisibleRange(); + // prevent scroll jump with wrong visible value + if (visibleMonths[0] === undefined) return; + var visibleMonth = (0, _addMonths2.default)(minDate, visibleMonths[0] || 0); + var isFocusedToDifferent = !(0, _isSameMonth2.default)(visibleMonth, this.state.focusedDate); + if (isFocusedToDifferent) { + this.setState({ focusedDate: visibleMonth }); + onShownDateChange && onShownDateChange(visibleMonth); + } + } + }, { + key: 'renderMonthAndYear', + value: function renderMonthAndYear(focusedDate, changeShownDate, props) { + var showMonthArrow = props.showMonthArrow, + locale = props.locale, + minDate = props.minDate, + maxDate = props.maxDate, + showMonthAndYearPickers = props.showMonthAndYearPickers; + + var upperYearLimit = (maxDate || Calendar.defaultProps.maxDate).getFullYear(); + var lowerYearLimit = (minDate || Calendar.defaultProps.minDate).getFullYear(); + var styles = this.styles; + return _react2.default.createElement( + 'div', + { onMouseUp: function onMouseUp(e) { + return e.stopPropagation(); + }, className: styles.monthAndYearWrapper }, + showMonthArrow ? _react2.default.createElement( + 'button', + { + type: 'button', + className: (0, _classnames4.default)(styles.nextPrevButton, styles.prevButton), + onClick: function onClick() { + return changeShownDate(-1, 'monthOffset'); + } }, + _react2.default.createElement('i', null) + ) : null, + showMonthAndYearPickers ? _react2.default.createElement( + 'span', + { className: styles.monthAndYearPickers }, + _react2.default.createElement( + 'span', + { className: styles.monthPicker }, + _react2.default.createElement( + 'select', + { + value: focusedDate.getMonth(), + onChange: function onChange(e) { + return changeShownDate(e.target.value, 'setMonth'); + } }, + locale.localize.months().map(function (month, i) { + return _react2.default.createElement( + 'option', + { key: i, value: i }, + month + ); + }) + ) + ), + _react2.default.createElement('span', { className: styles.monthAndYearDivider }), + _react2.default.createElement( + 'span', + { className: styles.yearPicker }, + _react2.default.createElement( + 'select', + { + value: focusedDate.getFullYear(), + onChange: function onChange(e) { + return changeShownDate(e.target.value, 'setYear'); + } }, + new Array(upperYearLimit - lowerYearLimit + 1).fill(upperYearLimit).map(function (val, i) { + var year = val - i; + return _react2.default.createElement( + 'option', + { key: year, value: year }, + year + ); + }) + ) + ) + ) : _react2.default.createElement( + 'span', + { className: styles.monthAndYearPickers }, + locale.localize.months()[focusedDate.getMonth()], + ' ', + focusedDate.getFullYear() + ), + showMonthArrow ? _react2.default.createElement( + 'button', + { + type: 'button', + className: (0, _classnames4.default)(styles.nextPrevButton, styles.nextButton), + onClick: function onClick() { + return changeShownDate(+1, 'monthOffset'); + } }, + _react2.default.createElement('i', null) + ) : null + ); + } + }, { + key: 'renderWeekdays', + value: function renderWeekdays() { + var _this3 = this; + + var now = new Date(); + return _react2.default.createElement( + 'div', + { className: this.styles.weekDays }, + (0, _eachDayOfInterval2.default)({ + start: (0, _startOfWeek2.default)(now, this.dateOptions), + end: (0, _endOfWeek2.default)(now, this.dateOptions) + }).map(function (day, i) { + return _react2.default.createElement( + 'span', + { className: _this3.styles.weekDay, key: i }, + (0, _format2.default)(day, 'ddd', _this3.dateOptions) + ); + }) + ); + } + }, { + key: 'renderDateDisplay', + value: function renderDateDisplay() { + var _this4 = this; + + var _props3 = this.props, + focusedRange = _props3.focusedRange, + color = _props3.color, + ranges = _props3.ranges, + rangeColors = _props3.rangeColors; + + var defaultColor = rangeColors[focusedRange[0]] || color; + var styles = this.styles; + return _react2.default.createElement( + 'div', + { className: styles.dateDisplayWrapper }, + ranges.map(function (range, i) { + if (range.showDateDisplay === false || range.disabled && !range.showDateDisplay) return null; + return _react2.default.createElement( + 'div', + { + className: styles.dateDisplay, + key: i, + style: { color: range.color || defaultColor } }, + _react2.default.createElement( + 'span', + { + className: (0, _classnames4.default)(styles.dateDisplayItem, _defineProperty({}, styles.dateDisplayItemActive, focusedRange[0] === i && focusedRange[1] === 0)), + onFocus: function onFocus() { + return _this4.handleRangeFocusChange(i, 0); + } }, + _react2.default.createElement('input', { + disabled: range.disabled, + readOnly: true, + value: _this4.formatDateDisplay(range.startDate, 'Early') + }) + ), + _react2.default.createElement( + 'span', + { + className: (0, _classnames4.default)(styles.dateDisplayItem, _defineProperty({}, styles.dateDisplayItemActive, focusedRange[0] === i && focusedRange[1] === 1)), + onFocus: function onFocus() { + return _this4.handleRangeFocusChange(i, 1); + } }, + _react2.default.createElement('input', { + disabled: range.disabled, + readOnly: true, + value: _this4.formatDateDisplay(range.endDate, 'Continuous') + }) + ) + ); + }) + ); + } + }, { + key: 'onDragSelectionStart', + value: function onDragSelectionStart(date) { + var _props4 = this.props, + onChange = _props4.onChange, + dragSelectionEnabled = _props4.dragSelectionEnabled; + + + if (dragSelectionEnabled) { + this.setState({ + drag: { + status: true, + range: { startDate: date, endDate: date }, + disablePreview: true + } + }); + } else { + onChange && onChange(date); + } + } + }, { + key: 'onDragSelectionEnd', + value: function onDragSelectionEnd(date) { + var _props5 = this.props, + updateRange = _props5.updateRange, + displayMode = _props5.displayMode, + onChange = _props5.onChange, + dragSelectionEnabled = _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, _isSameDay2.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); + }); + } + } + }, { + key: 'onDragSelectionMove', + value: function onDragSelectionMove(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 + } + }); + } + }, { + key: 'estimateMonthSize', + value: function estimateMonthSize(index, cache) { + var _props6 = this.props, + direction = _props6.direction, + minDate = _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, _addMonths2.default)(minDate, index); + + var _getMonthDisplayRange = (0, _utils.getMonthDisplayRange)(monthStep, this.dateOptions), + start = _getMonthDisplayRange.start, + end = _getMonthDisplayRange.end; + + var isLongMonth = (0, _differenceInDays2.default)(end, start, this.dateOptions) + 1 > 7 * 5; + return isLongMonth ? scrollArea.longMonthHeight : scrollArea.monthHeight; + } + }, { + key: 'formatDateDisplay', + value: function formatDateDisplay(date, defaultText) { + if (!date) return defaultText; + return (0, _format2.default)(date, this.props.dateDisplayFormat, this.dateOptions); + } + }, { + key: 'render', + value: function render() { + var _this5 = this; + + var _props7 = this.props, + showDateDisplay = _props7.showDateDisplay, + onPreviewChange = _props7.onPreviewChange, + scroll = _props7.scroll, + direction = _props7.direction, + disabledDates = _props7.disabledDates, + maxDate = _props7.maxDate, + minDate = _props7.minDate, + rangeColors = _props7.rangeColors, + color = _props7.color; + var _state = this.state, + scrollArea = _state.scrollArea, + focusedDate = _state.focusedDate; + + var isVertical = direction === 'vertical'; + var navigatorRenderer = this.props.navigatorRenderer || this.renderMonthAndYear; + + var ranges = this.props.ranges.map(function (range, i) { + return _extends({}, range, { + color: range.color || rangeColors[i] || color + }); + }); + return _react2.default.createElement( + 'div', + { + className: (0, _classnames4.default)(this.styles.calendarWrapper, this.props.className), + onMouseUp: function onMouseUp() { + return _this5.setState({ drag: { status: false, range: {} } }); + }, + onMouseLeave: function onMouseLeave() { + _this5.setState({ drag: { status: false, range: {} } }); + } }, + showDateDisplay && this.renderDateDisplay(), + navigatorRenderer(focusedDate, this.changeShownDate, this.props), + scroll.enabled ? _react2.default.createElement( + 'div', + null, + isVertical && this.renderWeekdays(this.dateOptions), + _react2.default.createElement( + 'div', + { + className: (0, _classnames4.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 }, + _react2.default.createElement(_reactList2.default, { + length: (0, _differenceInCalendarMonths2.default)((0, _endOfMonth2.default)(maxDate), (0, _addDays2.default)((0, _startOfMonth2.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, _addMonths2.default)(minDate, index); + return _react2.default.createElement(_Month2.default, _extends({}, _this5.props, { + onPreviewChange: _this5.props.onPreviewChange || _this5.updatePreview, + preview: _this5.props.preview || _this5.state.preview, + ranges: ranges, + key: key, + drag: _this5.state.drag, + dateOptions: _this5.dateOptions, + disabledDates: disabledDates, + 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 + })); + } + }) + ) + ) : _react2.default.createElement( + 'div', + { + className: (0, _classnames4.default)(this.styles.months, isVertical ? this.styles.monthsVertical : this.styles.monthsHorizontal) }, + new Array(this.props.months).fill(null).map(function (_, i) { + var monthStep = (0, _addMonths2.default)(_this5.state.focusedDate, i); + return _react2.default.createElement(_Month2.default, _extends({}, _this5.props, { + onPreviewChange: _this5.props.onPreviewChange || _this5.updatePreview, + preview: _this5.props.preview || _this5.state.preview, + ranges: ranges, + key: i, + drag: _this5.state.drag, + dateOptions: _this5.dateOptions, + disabledDates: disabledDates, + 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: [], + classNames: {}, + locale: _enUS2.default, + ranges: [], + focusedRange: [0, 0], + dateDisplayFormat: 'MMM D, YYYY', + monthDisplayFormat: 'MMM YYYY', + showDateDisplay: true, + showPreview: true, + displayMode: 'date', + months: 1, + color: '#3d91ff', + scroll: { + enabled: false + }, + direction: 'vertical', + maxDate: (0, _addYears2.default)(new Date(), 20), + minDate: (0, _addYears2.default)(new Date(), -100), + rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'], + dragSelectionEnabled: true +}; + +Calendar.propTypes = { + showMonthArrow: _propTypes2.default.bool, + showMonthAndYearPickers: _propTypes2.default.bool, + disabledDates: _propTypes2.default.array, + minDate: _propTypes2.default.object, + maxDate: _propTypes2.default.object, + date: _propTypes2.default.object, + onChange: _propTypes2.default.func, + onPreviewChange: _propTypes2.default.func, + onRangeFocusChange: _propTypes2.default.func, + classNames: _propTypes2.default.object, + locale: _propTypes2.default.object, + shownDate: _propTypes2.default.object, + onShownDateChange: _propTypes2.default.func, + ranges: _propTypes2.default.arrayOf(_DayCell.rangeShape), + preview: _propTypes2.default.shape({ + startDate: _propTypes2.default.object, + endDate: _propTypes2.default.object, + color: _propTypes2.default.string + }), + dateDisplayFormat: _propTypes2.default.string, + monthDisplayFormat: _propTypes2.default.string, + focusedRange: _propTypes2.default.arrayOf(_propTypes2.default.number), + initialFocusedRange: _propTypes2.default.arrayOf(_propTypes2.default.number), + months: _propTypes2.default.number, + className: _propTypes2.default.string, + showDateDisplay: _propTypes2.default.bool, + showPreview: _propTypes2.default.bool, + displayMode: _propTypes2.default.oneOf(['dateRange', 'date']), + color: _propTypes2.default.string, + updateRange: _propTypes2.default.func, + scroll: _propTypes2.default.shape({ + enabled: _propTypes2.default.bool, + monthHeight: _propTypes2.default.number, + longMonthHeight: _propTypes2.default.number, + monthWidth: _propTypes2.default.number, + calendarWidth: _propTypes2.default.number, + calendarHeight: _propTypes2.default.number + }), + direction: _propTypes2.default.oneOf(['vertical', 'horizontal']), + navigatorRenderer: _propTypes2.default.func, + rangeColors: _propTypes2.default.arrayOf(_propTypes2.default.string), + dragSelectionEnabled: _propTypes2.default.bool, + focusedDate: _propTypes2.default.object +}; + +exports.default = Calendar; \ No newline at end of file diff --git a/dist/components/DateRange.js b/dist/components/DateRange.js new file mode 100644 index 000000000..9706d3b7a --- /dev/null +++ b/dist/components/DateRange.js @@ -0,0 +1,245 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _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; }; + +var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _Calendar = require('./Calendar.js'); + +var _Calendar2 = _interopRequireDefault(_Calendar); + +var _DayCell = require('./DayCell'); + +var _utils = require('../utils.js'); + +var _max = require('date-fns2/max'); + +var _max2 = _interopRequireDefault(_max); + +var _isWithinInterval = require('date-fns2/isWithinInterval'); + +var _isWithinInterval2 = _interopRequireDefault(_isWithinInterval); + +var _min = require('date-fns2/min'); + +var _min2 = _interopRequireDefault(_min); + +var _addDays = require('date-fns2/addDays'); + +var _addDays2 = _interopRequireDefault(_addDays); + +var _differenceInCalendarDays = require('date-fns2/differenceInCalendarDays'); + +var _differenceInCalendarDays2 = _interopRequireDefault(_differenceInCalendarDays); + +var _isBefore = require('date-fns2/isBefore'); + +var _isBefore2 = _interopRequireDefault(_isBefore); + +var _classnames = require('classnames'); + +var _classnames2 = _interopRequireDefault(_classnames); + +var _styles = require('../styles'); + +var _styles2 = _interopRequireDefault(_styles); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var DateRange = function (_Component) { + _inherits(DateRange, _Component); + + function DateRange(props, context) { + _classCallCheck(this, DateRange); + + var _this = _possibleConstructorReturn(this, (DateRange.__proto__ || Object.getPrototypeOf(DateRange)).call(this, props, context)); + + _this.setSelection = _this.setSelection.bind(_this); + _this.handleRangeFocusChange = _this.handleRangeFocusChange.bind(_this); + _this.updatePreview = _this.updatePreview.bind(_this); + _this.calcNewSelection = _this.calcNewSelection.bind(_this); + _this.state = { + focusedRange: props.initialFocusedRange || [(0, _utils.findNextRangeIndex)(props.ranges), 0], + preview: null + }; + _this.styles = (0, _utils.generateStyles)([_styles2.default, props.classNames]); + return _this; + } + + _createClass(DateRange, [{ + key: 'calcNewSelection', + value: function calcNewSelection(value) { + var isSingleValue = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : true; + + var focusedRange = this.props.focusedRange || this.state.focusedRange; + var _props = this.props, + ranges = _props.ranges, + onChange = _props.onChange, + maxDate = _props.maxDate, + moveRangeOnFirstSelection = _props.moveRangeOnFirstSelection, + disabledDates = _props.disabledDates; + + var focusedRangeIndex = focusedRange[0]; + var selectedRange = ranges[focusedRangeIndex]; + if (!selectedRange || !onChange) return {}; + + var startDate = selectedRange.startDate, + endDate = selectedRange.endDate; + + if (!endDate) endDate = new Date(startDate); + var nextFocusRange = void 0; + if (!isSingleValue) { + startDate = value.startDate; + endDate = value.endDate; + } else if (focusedRange[1] === 0) { + // startDate selection + var dayOffset = (0, _differenceInCalendarDays2.default)(endDate, startDate); + startDate = value; + endDate = moveRangeOnFirstSelection ? (0, _addDays2.default)(value, dayOffset) : value; + if (maxDate) endDate = (0, _min2.default)([endDate, maxDate]); + nextFocusRange = [focusedRange[0], 1]; + } else { + endDate = value; + } + + // reverse dates if startDate before endDate + var isStartDateSelected = focusedRange[1] === 0; + if ((0, _isBefore2.default)(endDate, startDate)) { + isStartDateSelected = !isStartDateSelected; + var _ref = [endDate, startDate]; + startDate = _ref[0]; + endDate = _ref[1]; + } + + var inValidDatesWithinRange = disabledDates.filter(function (disabledDate) { + return (0, _isWithinInterval2.default)(disabledDate, { + start: startDate, + end: endDate + }); + }); + + if (inValidDatesWithinRange.length > 0) { + if (isStartDateSelected) { + startDate = (0, _addDays2.default)((0, _max2.default)(inValidDatesWithinRange), 1); + } else { + endDate = (0, _addDays2.default)((0, _min2.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 + }; + } + }, { + key: 'setSelection', + value: function setSelection(value, isSingleValue) { + var _props2 = this.props, + onChange = _props2.onChange, + ranges = _props2.ranges, + onRangeFocusChange = _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' + (focusedRangeIndex + 1), _extends({}, selectedRange, newSelection.range))); + this.setState({ + focusedRange: newSelection.nextFocusRange, + preview: null + }); + onRangeFocusChange && onRangeFocusChange(newSelection.nextFocusRange); + } + }, { + key: 'handleRangeFocusChange', + value: function handleRangeFocusChange(focusedRange) { + this.setState({ focusedRange: focusedRange }); + this.props.onRangeFocusChange && this.props.onRangeFocusChange(focusedRange); + } + }, { + key: 'updatePreview', + value: function updatePreview(val) { + if (!val) { + this.setState({ preview: null }); + return; + } + var _props3 = this.props, + rangeColors = _props3.rangeColors, + ranges = _props3.ranges; + + var focusedRange = this.props.focusedRange || this.state.focusedRange; + var color = ranges[focusedRange[0]].color || rangeColors[focusedRange[0]] || color; + this.setState({ preview: _extends({}, val.range, { color: color }) }); + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + return _react2.default.createElement(_Calendar2.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, _classnames2.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, + rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'], + disabledDates: [] +}; + +DateRange.propTypes = _extends({}, _Calendar2.default.propTypes, { + onChange: _propTypes2.default.func, + onRangeFocusChange: _propTypes2.default.func, + className: _propTypes2.default.string, + ranges: _propTypes2.default.arrayOf(_DayCell.rangeShape), + moveRangeOnFirstSelection: _propTypes2.default.bool +}); + +exports.default = DateRange; \ No newline at end of file diff --git a/dist/components/DateRangePicker.js b/dist/components/DateRangePicker.js new file mode 100644 index 000000000..5275bda39 --- /dev/null +++ b/dist/components/DateRangePicker.js @@ -0,0 +1,103 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _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; }; + +var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _DateRange = require('./DateRange'); + +var _DateRange2 = _interopRequireDefault(_DateRange); + +var _DefinedRange = require('./DefinedRange'); + +var _DefinedRange2 = _interopRequireDefault(_DefinedRange); + +var _utils = require('../utils.js'); + +var _classnames = require('classnames'); + +var _classnames2 = _interopRequireDefault(_classnames); + +var _styles = require('../styles'); + +var _styles2 = _interopRequireDefault(_styles); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var DateRangePicker = function (_Component) { + _inherits(DateRangePicker, _Component); + + function DateRangePicker(props) { + _classCallCheck(this, DateRangePicker); + + var _this = _possibleConstructorReturn(this, (DateRangePicker.__proto__ || Object.getPrototypeOf(DateRangePicker)).call(this, props)); + + _this.state = { + focusedRange: [(0, _utils.findNextRangeIndex)(props.ranges), 0] + }; + _this.styles = (0, _utils.generateStyles)([_styles2.default, props.classNames]); + return _this; + } + + _createClass(DateRangePicker, [{ + key: 'render', + value: function render() { + var _this2 = this; + + var focusedRange = this.state.focusedRange; + + return _react2.default.createElement( + 'div', + { className: (0, _classnames2.default)(this.styles.dateRangePickerWrapper, this.props.className) }, + _react2.default.createElement(_DefinedRange2.default, _extends({ + focusedRange: focusedRange, + onPreviewChange: function onPreviewChange(value) { + return _this2.dateRange.updatePreview(value); + } + }, this.props, { + range: this.props.ranges[focusedRange[0]], + className: undefined + })), + _react2.default.createElement(_DateRange2.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 = _extends({}, _DateRange2.default.propTypes, _DefinedRange2.default.propTypes, { + className: _propTypes2.default.string +}); + +exports.default = DateRangePicker; \ No newline at end of file diff --git a/dist/components/DayCell.js b/dist/components/DayCell.js new file mode 100644 index 000000000..d27ea8010 --- /dev/null +++ b/dist/components/DayCell.js @@ -0,0 +1,304 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.rangeShape = undefined; + +var _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; }; + +var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _classnames4 = require('classnames'); + +var _classnames5 = _interopRequireDefault(_classnames4); + +var _endOfDay = require('date-fns2/endOfDay'); + +var _endOfDay2 = _interopRequireDefault(_endOfDay); + +var _isBefore = require('date-fns2/isBefore'); + +var _isBefore2 = _interopRequireDefault(_isBefore); + +var _isAfter = require('date-fns2/isAfter'); + +var _isAfter2 = _interopRequireDefault(_isAfter); + +var _isSameDay = require('date-fns2/isSameDay'); + +var _isSameDay2 = _interopRequireDefault(_isSameDay); + +var _format = require('date-fns2/format'); + +var _format2 = _interopRequireDefault(_format); + +var _startOfDay = require('date-fns2/startOfDay'); + +var _startOfDay2 = _interopRequireDefault(_startOfDay); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr2 = Array(arr.length); i < arr.length; i++) { arr2[i] = arr[i]; } return arr2; } else { return Array.from(arr); } } + +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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint-disable no-fallthrough */ + + +var DayCell = function (_Component) { + _inherits(DayCell, _Component); + + function DayCell(props, context) { + _classCallCheck(this, DayCell); + + var _this = _possibleConstructorReturn(this, (DayCell.__proto__ || Object.getPrototypeOf(DayCell)).call(this, props, context)); + + _this.state = { + hover: false, + active: false + }; + _this.getClassNames = _this.getClassNames.bind(_this); + _this.handleMouseEvent = _this.handleMouseEvent.bind(_this); + _this.handleKeyEvent = _this.handleKeyEvent.bind(_this); + _this.renderSelectionPlaceholders = _this.renderSelectionPlaceholders.bind(_this); + _this.renderPreviewPlaceholder = _this.renderPreviewPlaceholder.bind(_this); + return _this; + } + + _createClass(DayCell, [{ + key: 'handleKeyEvent', + value: function handleKeyEvent(event) { + var day = this.props.day; + + switch (event.keyCode) { + case 13: //space + case 32: + //enter + if (event.type === 'keydown') { + this.props.onMouseDown(day); + } else { + this.props.onMouseUp(day); + } + break; + } + } + }, { + key: 'handleMouseEvent', + value: function handleMouseEvent(event) { + var _props = this.props, + day = _props.day, + disabled = _props.disabled, + onPreviewChange = _props.onPreviewChange; + + var stateChanges = {}; + if (disabled) { + onPreviewChange(); + return; + } + + switch (event.type) { + case 'mouseenter': + this.props.onMouseEnter(day); + onPreviewChange(day); + stateChanges.hover = true; + break; + case 'blur': + case 'mouseleave': + stateChanges.hover = false; + break; + case 'mousedown': + stateChanges.active = true; + this.props.onMouseDown(day); + break; + case 'mouseup': + event.stopPropagation(); + stateChanges.active = false; + this.props.onMouseUp(day); + break; + case 'focus': + onPreviewChange(day); + break; + } + if (Object.keys(stateChanges).length) { + this.setState(stateChanges); + } + } + }, { + key: 'getClassNames', + value: function getClassNames() { + var _classnames; + + var _props2 = this.props, + isPassive = _props2.isPassive, + isToday = _props2.isToday, + isWeekend = _props2.isWeekend, + isStartOfWeek = _props2.isStartOfWeek, + isEndOfWeek = _props2.isEndOfWeek, + isStartOfMonth = _props2.isStartOfMonth, + isEndOfMonth = _props2.isEndOfMonth, + disabled = _props2.disabled, + styles = _props2.styles; + + + return (0, _classnames5.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)); + } + }, { + key: 'renderPreviewPlaceholder', + value: function renderPreviewPlaceholder() { + var _classnames2; + + var _props3 = this.props, + preview = _props3.preview, + day = _props3.day, + styles = _props3.styles; + + if (!preview) return null; + var startDate = preview.startDate ? (0, _endOfDay2.default)(preview.startDate) : null; + var endDate = preview.endDate ? (0, _startOfDay2.default)(preview.endDate) : null; + var isInRange = (!startDate || (0, _isAfter2.default)(day, startDate)) && (!endDate || (0, _isBefore2.default)(day, endDate)); + var isStartEdge = !isInRange && (0, _isSameDay2.default)(day, startDate); + var isEndEdge = !isInRange && (0, _isSameDay2.default)(day, endDate); + return _react2.default.createElement('span', { + className: (0, _classnames5.default)((_classnames2 = {}, _defineProperty(_classnames2, styles.dayStartPreview, isStartEdge), _defineProperty(_classnames2, styles.dayInPreview, isInRange), _defineProperty(_classnames2, styles.dayEndPreview, isEndEdge), _classnames2)), + style: { color: preview.color } + }); + } + }, { + key: 'renderSelectionPlaceholders', + value: function renderSelectionPlaceholders() { + var _this2 = this; + + var _props4 = this.props, + styles = _props4.styles, + ranges = _props4.ranges, + day = _props4.day; + + if (this.props.displayMode === 'date') { + var isSelected = (0, _isSameDay2.default)(this.props.day, this.props.date); + return isSelected ? _react2.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, _isBefore2.default)(endDate, startDate)) { + var _ref = [endDate, startDate]; + startDate = _ref[0]; + endDate = _ref[1]; + } + startDate = startDate ? (0, _endOfDay2.default)(startDate) : null; + endDate = endDate ? (0, _startOfDay2.default)(endDate) : null; + var isInRange = (!startDate || (0, _isAfter2.default)(day, startDate)) && (!endDate || (0, _isBefore2.default)(day, endDate)); + var isStartEdge = !isInRange && (0, _isSameDay2.default)(day, startDate); + var isEndEdge = !isInRange && (0, _isSameDay2.default)(day, endDate); + if (isInRange || isStartEdge || isEndEdge) { + return [].concat(_toConsumableArray(result), [_extends({ + isStartEdge: isStartEdge, + isEndEdge: isEndEdge, + isInRange: isInRange + }, range)]); + } + return result; + }, []); + + return inRanges.map(function (range, i) { + var _classnames3; + + return _react2.default.createElement('span', { + key: i, + className: (0, _classnames5.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 || _this2.props.color } + }); + }); + } + }, { + key: 'render', + value: function render() { + var styles = this.props.styles; + + return _react2.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(styles) + }, this.props.disabled || this.props.isPassive ? { tabIndex: -1 } : {}, { + style: { color: this.props.color } }), + this.renderSelectionPlaceholders(), + this.renderPreviewPlaceholder(), + _react2.default.createElement( + 'span', + { className: styles.dayNumber }, + _react2.default.createElement( + 'span', + null, + (0, _format2.default)(this.props.day, 'D') + ) + ) + ); + } + }]); + + return DayCell; +}(_react.Component); + +DayCell.defaultProps = {}; + +var rangeShape = exports.rangeShape = _propTypes2.default.shape({ + startDate: _propTypes2.default.object, + endDate: _propTypes2.default.object, + color: _propTypes2.default.string, + key: _propTypes2.default.string, + autoFocus: _propTypes2.default.bool, + disabled: _propTypes2.default.bool, + showDateDisplay: _propTypes2.default.bool +}); + +DayCell.propTypes = { + day: _propTypes2.default.object.isRequired, + date: _propTypes2.default.object, + ranges: _propTypes2.default.arrayOf(rangeShape), + preview: _propTypes2.default.shape({ + startDate: _propTypes2.default.object, + endDate: _propTypes2.default.object + }), + onPreviewChange: _propTypes2.default.func, + previewColor: _propTypes2.default.string, + disabled: _propTypes2.default.bool, + isPassive: _propTypes2.default.bool, + isToday: _propTypes2.default.bool, + isWeekend: _propTypes2.default.bool, + isStartOfWeek: _propTypes2.default.bool, + isEndOfWeek: _propTypes2.default.bool, + isStartOfMonth: _propTypes2.default.bool, + isEndOfMonth: _propTypes2.default.bool, + color: _propTypes2.default.string, + displayMode: _propTypes2.default.oneOf(['dateRange', 'date']), + styles: _propTypes2.default.object, + onMouseDown: _propTypes2.default.func, + onMouseUp: _propTypes2.default.func, + onMouseEnter: _propTypes2.default.func +}; + +exports.default = DayCell; \ No newline at end of file diff --git a/dist/components/DefinedRange.js b/dist/components/DefinedRange.js new file mode 100644 index 000000000..4f712437c --- /dev/null +++ b/dist/components/DefinedRange.js @@ -0,0 +1,192 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _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; }; + +var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _styles = require('../styles'); + +var _styles2 = _interopRequireDefault(_styles); + +var _defaultRanges = require('../defaultRanges'); + +var _DayCell = require('./DayCell'); + +var _classnames = require('classnames'); + +var _classnames2 = _interopRequireDefault(_classnames); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + +var DefinedRanges = function (_Component) { + _inherits(DefinedRanges, _Component); + + function DefinedRanges(props) { + _classCallCheck(this, DefinedRanges); + + var _this = _possibleConstructorReturn(this, (DefinedRanges.__proto__ || Object.getPrototypeOf(DefinedRanges)).call(this, props)); + + _this.state = { + rangeOffset: 0, + focusedInput: -1 + }; + _this.handleRangeChange = _this.handleRangeChange.bind(_this); + return _this; + } + + _createClass(DefinedRanges, [{ + key: 'handleRangeChange', + value: function handleRangeChange(range) { + var _props = this.props, + onChange = _props.onChange, + ranges = _props.ranges, + focusedRange = _props.focusedRange; + + var selectedRange = ranges[focusedRange[0]]; + if (!onChange || !selectedRange) return; + onChange(_defineProperty({}, selectedRange.key || 'range' + (focusedRange[0] + 1), _extends({}, selectedRange, range))); + } + }, { + 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 _props2 = this.props, + onPreviewChange = _props2.onPreviewChange, + ranges = _props2.ranges, + rangeColors = _props2.rangeColors, + className = _props2.className; + + return _react2.default.createElement( + 'div', + { className: (0, _classnames2.default)(_styles2.default.definedRangesWrapper, className) }, + this.props.headerContent, + _react2.default.createElement( + 'div', + { className: _styles2.default.staticRanges }, + this.props.staticRanges.map(function (staticRange, i) { + var _getSelectedRange = _this2.getSelectedRange(ranges, staticRange), + selectedRange = _getSelectedRange.selectedRange, + focusedRangeIndex = _getSelectedRange.focusedRangeIndex; + + return _react2.default.createElement( + 'button', + { + type: 'button', + className: (0, _classnames2.default)(_styles2.default.staticRange, _defineProperty({}, _styles2.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() { + _this2.props.onPreviewChange && _this2.props.onPreviewChange(); + } }, + _react2.default.createElement( + 'span', + { tabIndex: -1, className: _styles2.default.staticRangeLabel }, + staticRange.label + ) + ); + }) + ), + _react2.default.createElement( + 'div', + { className: _styles2.default.inputRanges }, + this.props.inputRanges.map(function (rangeOption, i) { + return _react2.default.createElement( + 'div', + { className: _styles2.default.inputRange, key: i }, + _react2.default.createElement('input', { + className: _styles2.default.inputRangeInput, + onFocus: function onFocus() { + return _this2.setState({ focusedInput: i, rangeOffset: 0 }); + }, + onBlur: function onBlur() { + return _this2.setState({ rangeOffset: 0 }); + }, + onChange: function onChange(e) { + var value = parseInt(e.target.value, 10); + value = isNaN(value) ? 0 : Math.max(Math.min(99999, value), 0); + _this2.handleRangeChange(rangeOption.range(value, _this2.props)); + }, + min: 0, + max: 99999, + value: rangeOption.getCurrentValue ? rangeOption.getCurrentValue(ranges[_this2.props.focusedRange[0]] || {}) : '-' + }), + _react2.default.createElement( + 'span', + { className: _styles2.default.inputRangeLabel }, + rangeOption.label + ) + ); + }) + ), + this.props.footerContent + ); + } + }]); + + return DefinedRanges; +}(_react.Component); + +DefinedRanges.propTypes = { + inputRanges: _propTypes2.default.array, + staticRanges: _propTypes2.default.array, + ranges: _propTypes2.default.arrayOf(_DayCell.rangeShape), + focusedRange: _propTypes2.default.arrayOf(_propTypes2.default.number), + onPreviewChange: _propTypes2.default.func, + onChange: _propTypes2.default.func, + footerContent: _propTypes2.default.any, + headerContent: _propTypes2.default.any, + rangeColors: _propTypes2.default.arrayOf(_propTypes2.default.string), + className: _propTypes2.default.string +}; + +DefinedRanges.defaultProps = { + inputRanges: _defaultRanges.defaultInputRanges, + staticRanges: _defaultRanges.defaultStaticRanges, + ranges: [], + rangeColors: ['#3d91ff', '#3ecf8e', '#fed14c'], + focusedRange: [0, 0] +}; + +exports.default = DefinedRanges; \ No newline at end of file diff --git a/dist/components/Month.js b/dist/components/Month.js new file mode 100644 index 000000000..b768afa35 --- /dev/null +++ b/dist/components/Month.js @@ -0,0 +1,215 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _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; }; + +var _createClass = 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +var _react = require('react'); + +var _react2 = _interopRequireDefault(_react); + +var _propTypes = require('prop-types'); + +var _propTypes2 = _interopRequireDefault(_propTypes); + +var _DayCell = require('./DayCell.js'); + +var _DayCell2 = _interopRequireDefault(_DayCell); + +var _eachDayOfInterval = require('date-fns2/eachDayOfInterval'); + +var _eachDayOfInterval2 = _interopRequireDefault(_eachDayOfInterval); + +var _isWithinInterval = require('date-fns2/isWithinInterval'); + +var _isWithinInterval2 = _interopRequireDefault(_isWithinInterval); + +var _isWeekend = require('date-fns2/isWeekend'); + +var _isWeekend2 = _interopRequireDefault(_isWeekend); + +var _isAfter = require('date-fns2/isAfter'); + +var _isAfter2 = _interopRequireDefault(_isAfter); + +var _isSameDay = require('date-fns2/isSameDay'); + +var _isSameDay2 = _interopRequireDefault(_isSameDay); + +var _isBefore = require('date-fns2/isBefore'); + +var _isBefore2 = _interopRequireDefault(_isBefore); + +var _endOfWeek = require('date-fns2/endOfWeek'); + +var _endOfWeek2 = _interopRequireDefault(_endOfWeek); + +var _startOfWeek = require('date-fns2/startOfWeek'); + +var _startOfWeek2 = _interopRequireDefault(_startOfWeek); + +var _endOfDay = require('date-fns2/endOfDay'); + +var _endOfDay2 = _interopRequireDefault(_endOfDay); + +var _startOfDay = require('date-fns2/startOfDay'); + +var _startOfDay2 = _interopRequireDefault(_startOfDay); + +var _format = require('date-fns2/format'); + +var _format2 = _interopRequireDefault(_format); + +var _utils = require('../utils'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } /* eslint-disable no-fallthrough */ + + +function renderWeekdays(styles, dateOptions) { + var now = new Date(); + return _react2.default.createElement( + 'div', + { className: styles.weekDays }, + (0, _eachDayOfInterval2.default)({ + start: (0, _startOfWeek2.default)(now, dateOptions), + end: (0, _endOfWeek2.default)(now, dateOptions) + }).map(function (day, i) { + return _react2.default.createElement( + 'span', + { className: styles.weekDay, key: i }, + (0, _format2.default)(day, 'ddd', dateOptions) + ); + }) + ); +} + +var Month = function (_PureComponent) { + _inherits(Month, _PureComponent); + + function Month() { + _classCallCheck(this, Month); + + return _possibleConstructorReturn(this, (Month.__proto__ || Object.getPrototypeOf(Month)).apply(this, arguments)); + } + + _createClass(Month, [{ + key: 'render', + value: function render() { + var _this2 = this; + + var now = new Date(); + var _props = this.props, + displayMode = _props.displayMode, + focusedRange = _props.focusedRange, + drag = _props.drag, + styles = _props.styles, + disabledDates = _props.disabledDates; + + var minDate = this.props.minDate && (0, _startOfDay2.default)(this.props.minDate); + var maxDate = this.props.maxDate && (0, _endOfDay2.default)(this.props.maxDate); + var monthDisplay = (0, _utils.getMonthDisplayRange)(this.props.month, this.props.dateOptions); + 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 _extends({}, range, { + startDate: startDate, + endDate: endDate + }); + }); + } + var showPreview = this.props.showPreview && !drag.disablePreview; + return _react2.default.createElement( + 'div', + { className: styles.month, style: this.props.style }, + this.props.showMonthName ? _react2.default.createElement( + 'div', + { className: styles.monthName }, + (0, _format2.default)(this.props.month, this.props.monthDisplayFormat, this.props.dateOptions) + ) : null, + this.props.showWeekDays && renderWeekdays(styles, this.props.dateOptions), + _react2.default.createElement( + 'div', + { className: styles.days, onMouseLeave: this.props.onMouseLeave }, + (0, _eachDayOfInterval2.default)({ start: monthDisplay.start, end: monthDisplay.end }).map(function (day, index) { + var isStartOfMonth = (0, _isSameDay2.default)(day, monthDisplay.startDateOfMonth); + var isEndOfMonth = (0, _isSameDay2.default)(day, monthDisplay.endDateOfMonth); + var isOutsideMinMax = minDate && (0, _isBefore2.default)(day, minDate) || maxDate && (0, _isAfter2.default)(day, maxDate); + var isDisabledSpecifically = disabledDates.some(function (disabledDate) { + return (0, _isSameDay2.default)(disabledDate, day); + }); + return _react2.default.createElement(_DayCell2.default, _extends({}, _this2.props, { + ranges: ranges, + day: day, + preview: showPreview ? _this2.props.preview : null, + isWeekend: (0, _isWeekend2.default)(day, _this2.props.dateOptions), + isToday: (0, _isSameDay2.default)(day, now), + isStartOfWeek: (0, _isSameDay2.default)(day, (0, _startOfWeek2.default)(day, _this2.props.dateOptions)), + isEndOfWeek: (0, _isSameDay2.default)(day, (0, _endOfWeek2.default)(day, _this2.props.dateOptions)), + isStartOfMonth: isStartOfMonth, + isEndOfMonth: isEndOfMonth, + key: index, + disabled: isOutsideMinMax || isDisabledSpecifically, + isPassive: !(0, _isWithinInterval2.default)(day, { + start: monthDisplay.startDateOfMonth, + end: monthDisplay.endDateOfMonth + }), + styles: styles, + onMouseDown: _this2.props.onDragSelectionStart, + onMouseUp: _this2.props.onDragSelectionEnd, + onMouseEnter: _this2.props.onDragSelectionMove, + dragRange: drag.range, + drag: drag.status + })); + }) + ) + ); + } + }]); + + return Month; +}(_react.PureComponent); + +Month.defaultProps = {}; + +Month.propTypes = { + style: _propTypes2.default.object, + styles: _propTypes2.default.object, + month: _propTypes2.default.object, + drag: _propTypes2.default.object, + dateOptions: _propTypes2.default.object, + disabledDates: _propTypes2.default.array, + preview: _propTypes2.default.shape({ + startDate: _propTypes2.default.object, + endDate: _propTypes2.default.object + }), + showPreview: _propTypes2.default.bool, + displayMode: _propTypes2.default.oneOf(['dateRange', 'date']), + minDate: _propTypes2.default.object, + maxDate: _propTypes2.default.object, + ranges: _propTypes2.default.arrayOf(_DayCell.rangeShape), + focusedRange: _propTypes2.default.arrayOf(_propTypes2.default.number), + onDragSelectionStart: _propTypes2.default.func, + onDragSelectionEnd: _propTypes2.default.func, + onDragSelectionMove: _propTypes2.default.func, + onMouseLeave: _propTypes2.default.func, + monthDisplayFormat: _propTypes2.default.string, + showWeekDays: _propTypes2.default.bool, + showMonthName: _propTypes2.default.bool +}; + +exports.default = Month; \ No newline at end of file diff --git a/dist/defaultRanges.js b/dist/defaultRanges.js new file mode 100644 index 000000000..17122ea56 --- /dev/null +++ b/dist/defaultRanges.js @@ -0,0 +1,160 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.defaultInputRanges = exports.defaultStaticRanges = undefined; + +var _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; }; + +exports.createStaticRanges = createStaticRanges; + +var _differenceInCalendarDays = require('date-fns2/differenceInCalendarDays'); + +var _differenceInCalendarDays2 = _interopRequireDefault(_differenceInCalendarDays); + +var _isSameDay = require('date-fns2/isSameDay'); + +var _isSameDay2 = _interopRequireDefault(_isSameDay); + +var _endOfWeek = require('date-fns2/endOfWeek'); + +var _endOfWeek2 = _interopRequireDefault(_endOfWeek); + +var _startOfWeek = require('date-fns2/startOfWeek'); + +var _startOfWeek2 = _interopRequireDefault(_startOfWeek); + +var _addMonths = require('date-fns2/addMonths'); + +var _addMonths2 = _interopRequireDefault(_addMonths); + +var _endOfMonth = require('date-fns2/endOfMonth'); + +var _endOfMonth2 = _interopRequireDefault(_endOfMonth); + +var _startOfMonth = require('date-fns2/startOfMonth'); + +var _startOfMonth2 = _interopRequireDefault(_startOfMonth); + +var _startOfDay = require('date-fns2/startOfDay'); + +var _startOfDay2 = _interopRequireDefault(_startOfDay); + +var _endOfDay = require('date-fns2/endOfDay'); + +var _endOfDay2 = _interopRequireDefault(_endOfDay); + +var _addDays = require('date-fns2/addDays'); + +var _addDays2 = _interopRequireDefault(_addDays); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +var defineds = { + startOfWeek: (0, _startOfWeek2.default)(new Date()), + endOfWeek: (0, _endOfWeek2.default)(new Date()), + startOfLastWeek: (0, _startOfWeek2.default)((0, _addDays2.default)(new Date(), -7)), + endOfLastWeek: (0, _endOfWeek2.default)((0, _addDays2.default)(new Date(), -7)), + startOfToday: (0, _startOfDay2.default)(new Date()), + endOfToday: (0, _endOfDay2.default)(new Date()), + startOfYesterday: (0, _startOfDay2.default)((0, _addDays2.default)(new Date(), -1)), + endOfYesterday: (0, _endOfDay2.default)((0, _addDays2.default)(new Date(), -1)), + startOfMonth: (0, _startOfMonth2.default)(new Date()), + endOfMonth: (0, _endOfMonth2.default)(new Date()), + startOfLastMonth: (0, _startOfMonth2.default)((0, _addMonths2.default)(new Date(), -1)), + endOfLastMonth: (0, _endOfMonth2.default)((0, _addMonths2.default)(new Date(), -1)) +}; + +var staticRangeHandler = { + range: {}, + isSelected: function isSelected(range) { + var definedRange = this.range(); + return (0, _isSameDay2.default)(range.startDate, definedRange.startDate) && (0, _isSameDay2.default)(range.endDate, definedRange.endDate); + } +}; + +function createStaticRanges(ranges) { + return ranges.map(function (range) { + return _extends({}, staticRangeHandler, range); + }); +} + +var defaultStaticRanges = exports.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 + }; + } +}]); + +var defaultInputRanges = exports.defaultInputRanges = [{ + label: 'days up to today', + range: function range(value) { + return { + startDate: (0, _addDays2.default)(defineds.startOfToday, (Math.max(Number(value), 1) - 1) * -1), + endDate: defineds.endOfToday + }; + }, + getCurrentValue: function getCurrentValue(range) { + if (!(0, _isSameDay2.default)(range.endDate, defineds.endOfToday)) return '-'; + if (!range.startDate) return '∞'; + return (0, _differenceInCalendarDays2.default)(defineds.endOfToday, range.startDate) + 1; + } +}, { + label: 'days starting today', + range: function range(value) { + var today = new Date(); + return { + startDate: today, + endDate: (0, _addDays2.default)(today, Math.max(Number(value), 1) - 1) + }; + }, + getCurrentValue: function getCurrentValue(range) { + if (!(0, _isSameDay2.default)(range.startDate, defineds.startOfToday)) return '-'; + if (!range.endDate) return '∞'; + return (0, _differenceInCalendarDays2.default)(range.endDate, defineds.startOfToday) + 1; + } +}]; \ No newline at end of file diff --git a/dist/index.js b/dist/index.js new file mode 100644 index 000000000..cc0d2d150 --- /dev/null +++ b/dist/index.js @@ -0,0 +1,64 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _DateRange = require('./components/DateRange'); + +Object.defineProperty(exports, 'DateRange', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_DateRange).default; + } +}); + +var _Calendar = require('./components/Calendar'); + +Object.defineProperty(exports, 'Calendar', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_Calendar).default; + } +}); + +var _DateRangePicker = require('./components/DateRangePicker'); + +Object.defineProperty(exports, 'DateRangePicker', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_DateRangePicker).default; + } +}); + +var _DefinedRange = require('./components/DefinedRange'); + +Object.defineProperty(exports, 'DefinedRange', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_DefinedRange).default; + } +}); + +var _defaultRanges = require('./defaultRanges'); + +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; + } +}); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } \ No newline at end of file diff --git a/dist/locale/ar.js b/dist/locale/ar.js new file mode 100644 index 000000000..56d9eeb21 --- /dev/null +++ b/dist/locale/ar.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _ar = require('date-fns2/locale/ar'); + +var _ar2 = _interopRequireDefault(_ar); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _ar2.default; \ No newline at end of file diff --git a/dist/locale/bg.js b/dist/locale/bg.js new file mode 100644 index 000000000..17904ccd7 --- /dev/null +++ b/dist/locale/bg.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _bg = require('date-fns2/locale/bg'); + +var _bg2 = _interopRequireDefault(_bg); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _bg2.default; \ No newline at end of file diff --git a/dist/locale/ca.js b/dist/locale/ca.js new file mode 100644 index 000000000..9a1521f66 --- /dev/null +++ b/dist/locale/ca.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _ca = require('date-fns2/locale/ca'); + +var _ca2 = _interopRequireDefault(_ca); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _ca2.default; \ No newline at end of file diff --git a/dist/locale/cs.js b/dist/locale/cs.js new file mode 100644 index 000000000..38cfa124f --- /dev/null +++ b/dist/locale/cs.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _cs = require('date-fns2/locale/cs'); + +var _cs2 = _interopRequireDefault(_cs); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _cs2.default; \ No newline at end of file diff --git a/dist/locale/da.js b/dist/locale/da.js new file mode 100644 index 000000000..f8bc240b3 --- /dev/null +++ b/dist/locale/da.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _da = require('date-fns2/locale/da'); + +var _da2 = _interopRequireDefault(_da); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _da2.default; \ No newline at end of file diff --git a/dist/locale/de.js b/dist/locale/de.js new file mode 100644 index 000000000..b7f98dd04 --- /dev/null +++ b/dist/locale/de.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _de = require('date-fns2/locale/de'); + +var _de2 = _interopRequireDefault(_de); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _de2.default; \ No newline at end of file diff --git a/dist/locale/el.js b/dist/locale/el.js new file mode 100644 index 000000000..38b482ef8 --- /dev/null +++ b/dist/locale/el.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _el = require('date-fns2/locale/el'); + +var _el2 = _interopRequireDefault(_el); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _el2.default; \ No newline at end of file diff --git a/dist/locale/en-GB.js b/dist/locale/en-GB.js new file mode 100644 index 000000000..6a3b63342 --- /dev/null +++ b/dist/locale/en-GB.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _enGB = require('date-fns2/locale/en-GB'); + +var _enGB2 = _interopRequireDefault(_enGB); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _enGB2.default; \ No newline at end of file diff --git a/dist/locale/en-US.js b/dist/locale/en-US.js new file mode 100644 index 000000000..445aebbf8 --- /dev/null +++ b/dist/locale/en-US.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _enUS = require('date-fns2/locale/en-US'); + +var _enUS2 = _interopRequireDefault(_enUS); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _enUS2.default; \ No newline at end of file diff --git a/dist/locale/eo.js b/dist/locale/eo.js new file mode 100644 index 000000000..e3e087f02 --- /dev/null +++ b/dist/locale/eo.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _eo = require('date-fns2/locale/eo'); + +var _eo2 = _interopRequireDefault(_eo); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _eo2.default; \ No newline at end of file diff --git a/dist/locale/es.js b/dist/locale/es.js new file mode 100644 index 000000000..9315a13ed --- /dev/null +++ b/dist/locale/es.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _es = require('date-fns2/locale/es'); + +var _es2 = _interopRequireDefault(_es); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _es2.default; \ No newline at end of file diff --git a/dist/locale/fi.js b/dist/locale/fi.js new file mode 100644 index 000000000..ea2edb88f --- /dev/null +++ b/dist/locale/fi.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _fi = require('date-fns2/locale/fi'); + +var _fi2 = _interopRequireDefault(_fi); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _fi2.default; \ No newline at end of file diff --git a/dist/locale/fil.js b/dist/locale/fil.js new file mode 100644 index 000000000..343359a76 --- /dev/null +++ b/dist/locale/fil.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _fil = require('date-fns2/locale/fil'); + +var _fil2 = _interopRequireDefault(_fil); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _fil2.default; \ No newline at end of file diff --git a/dist/locale/fr-CH.js b/dist/locale/fr-CH.js new file mode 100644 index 000000000..4d0fab32d --- /dev/null +++ b/dist/locale/fr-CH.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _frCH = require('date-fns2/locale/fr-CH'); + +var _frCH2 = _interopRequireDefault(_frCH); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _frCH2.default; \ No newline at end of file diff --git a/dist/locale/fr.js b/dist/locale/fr.js new file mode 100644 index 000000000..b52fa1adc --- /dev/null +++ b/dist/locale/fr.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _fr = require('date-fns2/locale/fr'); + +var _fr2 = _interopRequireDefault(_fr); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _fr2.default; \ No newline at end of file diff --git a/dist/locale/hr.js b/dist/locale/hr.js new file mode 100644 index 000000000..900e06631 --- /dev/null +++ b/dist/locale/hr.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _hr = require('date-fns2/locale/hr'); + +var _hr2 = _interopRequireDefault(_hr); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _hr2.default; \ No newline at end of file diff --git a/dist/locale/id.js b/dist/locale/id.js new file mode 100644 index 000000000..13de55047 --- /dev/null +++ b/dist/locale/id.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _id = require('date-fns2/locale/id'); + +var _id2 = _interopRequireDefault(_id); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _id2.default; \ No newline at end of file diff --git a/dist/locale/index.js b/dist/locale/index.js new file mode 100644 index 000000000..eb5420d90 --- /dev/null +++ b/dist/locale/index.js @@ -0,0 +1,331 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _ar = require('./ar.js'); + +Object.defineProperty(exports, 'ar', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_ar).default; + } +}); + +var _bg = require('./bg.js'); + +Object.defineProperty(exports, 'bg', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_bg).default; + } +}); + +var _ca = require('./ca.js'); + +Object.defineProperty(exports, 'ca', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_ca).default; + } +}); + +var _cs = require('./cs.js'); + +Object.defineProperty(exports, 'cs', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_cs).default; + } +}); + +var _da = require('./da.js'); + +Object.defineProperty(exports, 'da', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_da).default; + } +}); + +var _de = require('./de.js'); + +Object.defineProperty(exports, 'de', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_de).default; + } +}); + +var _el = require('./el.js'); + +Object.defineProperty(exports, 'el', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_el).default; + } +}); + +var _enGB = require('./en-GB.js'); + +Object.defineProperty(exports, 'enGB', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_enGB).default; + } +}); + +var _enUS = require('./en-US.js'); + +Object.defineProperty(exports, 'enUS', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_enUS).default; + } +}); + +var _eo = require('./eo.js'); + +Object.defineProperty(exports, 'eo', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_eo).default; + } +}); + +var _es = require('./es.js'); + +Object.defineProperty(exports, 'es', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_es).default; + } +}); + +var _fi = require('./fi.js'); + +Object.defineProperty(exports, 'fi', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_fi).default; + } +}); + +var _fil = require('./fil.js'); + +Object.defineProperty(exports, 'fil', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_fil).default; + } +}); + +var _fr = require('./fr.js'); + +Object.defineProperty(exports, 'fr', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_fr).default; + } +}); + +var _frCH = require('./fr-CH.js'); + +Object.defineProperty(exports, 'frCH', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_frCH).default; + } +}); + +var _hr = require('./hr.js'); + +Object.defineProperty(exports, 'hr', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_hr).default; + } +}); + +var _id = require('./id.js'); + +Object.defineProperty(exports, 'id', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_id).default; + } +}); + +var _is = require('./is.js'); + +Object.defineProperty(exports, 'is', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_is).default; + } +}); + +var _it = require('./it.js'); + +Object.defineProperty(exports, 'it', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_it).default; + } +}); + +var _ja = require('./ja.js'); + +Object.defineProperty(exports, 'ja', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_ja).default; + } +}); + +var _ko = require('./ko.js'); + +Object.defineProperty(exports, 'ko', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_ko).default; + } +}); + +var _mk = require('./mk.js'); + +Object.defineProperty(exports, 'mk', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_mk).default; + } +}); + +var _nb = require('./nb.js'); + +Object.defineProperty(exports, 'nb', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_nb).default; + } +}); + +var _nl = require('./nl.js'); + +Object.defineProperty(exports, 'nl', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_nl).default; + } +}); + +var _pl = require('./pl.js'); + +Object.defineProperty(exports, 'pl', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_pl).default; + } +}); + +var _pt = require('./pt.js'); + +Object.defineProperty(exports, 'pt', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_pt).default; + } +}); + +var _ro = require('./ro.js'); + +Object.defineProperty(exports, 'ro', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_ro).default; + } +}); + +var _ru = require('./ru.js'); + +Object.defineProperty(exports, 'ru', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_ru).default; + } +}); + +var _sk = require('./sk.js'); + +Object.defineProperty(exports, 'sk', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_sk).default; + } +}); + +var _sv = require('./sv.js'); + +Object.defineProperty(exports, 'sv', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_sv).default; + } +}); + +var _th = require('./th.js'); + +Object.defineProperty(exports, 'th', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_th).default; + } +}); + +var _tr = require('./tr.js'); + +Object.defineProperty(exports, 'tr', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_tr).default; + } +}); + +var _ua = require('./ua.js'); + +Object.defineProperty(exports, 'ua', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_ua).default; + } +}); + +var _vi = require('./vi.js'); + +Object.defineProperty(exports, 'vi', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_vi).default; + } +}); + +var _zhCN = require('./zh-CN.js'); + +Object.defineProperty(exports, 'zhCN', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_zhCN).default; + } +}); + +var _zhTW = require('./zh-TW.js'); + +Object.defineProperty(exports, 'zhTW', { + enumerable: true, + get: function get() { + return _interopRequireDefault(_zhTW).default; + } +}); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } \ No newline at end of file diff --git a/dist/locale/is.js b/dist/locale/is.js new file mode 100644 index 000000000..86e0814bb --- /dev/null +++ b/dist/locale/is.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _is = require('date-fns2/locale/is'); + +var _is2 = _interopRequireDefault(_is); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _is2.default; \ No newline at end of file diff --git a/dist/locale/it.js b/dist/locale/it.js new file mode 100644 index 000000000..a4002e639 --- /dev/null +++ b/dist/locale/it.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _it = require('date-fns2/locale/it'); + +var _it2 = _interopRequireDefault(_it); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _it2.default; \ No newline at end of file diff --git a/dist/locale/ja.js b/dist/locale/ja.js new file mode 100644 index 000000000..05570a1fd --- /dev/null +++ b/dist/locale/ja.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _ja = require('date-fns2/locale/ja'); + +var _ja2 = _interopRequireDefault(_ja); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _ja2.default; \ No newline at end of file diff --git a/dist/locale/ko.js b/dist/locale/ko.js new file mode 100644 index 000000000..57a07176b --- /dev/null +++ b/dist/locale/ko.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _ko = require('date-fns2/locale/ko'); + +var _ko2 = _interopRequireDefault(_ko); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _ko2.default; \ No newline at end of file diff --git a/dist/locale/mk.js b/dist/locale/mk.js new file mode 100644 index 000000000..667e0451a --- /dev/null +++ b/dist/locale/mk.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _mk = require('date-fns2/locale/mk'); + +var _mk2 = _interopRequireDefault(_mk); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _mk2.default; \ No newline at end of file diff --git a/dist/locale/nb.js b/dist/locale/nb.js new file mode 100644 index 000000000..67fa82a18 --- /dev/null +++ b/dist/locale/nb.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _nb = require('date-fns2/locale/nb'); + +var _nb2 = _interopRequireDefault(_nb); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _nb2.default; \ No newline at end of file diff --git a/dist/locale/nl.js b/dist/locale/nl.js new file mode 100644 index 000000000..495939d3f --- /dev/null +++ b/dist/locale/nl.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _nl = require('date-fns2/locale/nl'); + +var _nl2 = _interopRequireDefault(_nl); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _nl2.default; \ No newline at end of file diff --git a/dist/locale/pl.js b/dist/locale/pl.js new file mode 100644 index 000000000..7a2005cd2 --- /dev/null +++ b/dist/locale/pl.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _pl = require('date-fns2/locale/pl'); + +var _pl2 = _interopRequireDefault(_pl); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _pl2.default; \ No newline at end of file diff --git a/dist/locale/pt.js b/dist/locale/pt.js new file mode 100644 index 000000000..ea924f5d7 --- /dev/null +++ b/dist/locale/pt.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _pt = require('date-fns2/locale/pt'); + +var _pt2 = _interopRequireDefault(_pt); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _pt2.default; \ No newline at end of file diff --git a/dist/locale/ro.js b/dist/locale/ro.js new file mode 100644 index 000000000..5fcbc784d --- /dev/null +++ b/dist/locale/ro.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _ro = require('date-fns2/locale/ro'); + +var _ro2 = _interopRequireDefault(_ro); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _ro2.default; \ No newline at end of file diff --git a/dist/locale/ru.js b/dist/locale/ru.js new file mode 100644 index 000000000..a011e9cce --- /dev/null +++ b/dist/locale/ru.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _ru = require('date-fns2/locale/ru'); + +var _ru2 = _interopRequireDefault(_ru); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _ru2.default; \ No newline at end of file diff --git a/dist/locale/sk.js b/dist/locale/sk.js new file mode 100644 index 000000000..fa89d84dd --- /dev/null +++ b/dist/locale/sk.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _sk = require('date-fns2/locale/sk'); + +var _sk2 = _interopRequireDefault(_sk); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _sk2.default; \ No newline at end of file diff --git a/dist/locale/sv.js b/dist/locale/sv.js new file mode 100644 index 000000000..fdb6e41ac --- /dev/null +++ b/dist/locale/sv.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _sv = require('date-fns2/locale/sv'); + +var _sv2 = _interopRequireDefault(_sv); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _sv2.default; \ No newline at end of file diff --git a/dist/locale/th.js b/dist/locale/th.js new file mode 100644 index 000000000..e4cfd7f03 --- /dev/null +++ b/dist/locale/th.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _th = require('date-fns2/locale/th'); + +var _th2 = _interopRequireDefault(_th); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _th2.default; \ No newline at end of file diff --git a/dist/locale/tr.js b/dist/locale/tr.js new file mode 100644 index 000000000..2c232b004 --- /dev/null +++ b/dist/locale/tr.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _tr = require('date-fns2/locale/tr'); + +var _tr2 = _interopRequireDefault(_tr); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _tr2.default; \ No newline at end of file diff --git a/dist/locale/ua.js b/dist/locale/ua.js new file mode 100644 index 000000000..5e5fe211f --- /dev/null +++ b/dist/locale/ua.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _ua = require('date-fns2/locale/ua'); + +var _ua2 = _interopRequireDefault(_ua); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _ua2.default; \ No newline at end of file diff --git a/dist/locale/vi.js b/dist/locale/vi.js new file mode 100644 index 000000000..122ffc906 --- /dev/null +++ b/dist/locale/vi.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _vi = require('date-fns2/locale/vi'); + +var _vi2 = _interopRequireDefault(_vi); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _vi2.default; \ No newline at end of file diff --git a/dist/locale/zh-CN.js b/dist/locale/zh-CN.js new file mode 100644 index 000000000..dbd657467 --- /dev/null +++ b/dist/locale/zh-CN.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _zhCN = require('date-fns2/locale/zh-CN'); + +var _zhCN2 = _interopRequireDefault(_zhCN); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _zhCN2.default; \ No newline at end of file diff --git a/dist/locale/zh-TW.js b/dist/locale/zh-TW.js new file mode 100644 index 000000000..909056e80 --- /dev/null +++ b/dist/locale/zh-TW.js @@ -0,0 +1,13 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _zhTW = require('date-fns2/locale/zh-TW'); + +var _zhTW2 = _interopRequireDefault(_zhTW); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } + +exports.default = _zhTW2.default; \ No newline at end of file diff --git a/dist/styles.css b/dist/styles.css new file mode 100644 index 000000000..a972b927d --- /dev/null +++ b/dist/styles.css @@ -0,0 +1,227 @@ +.rdrCalendarWrapper { + -webkit-box-sizing: border-box; + box-sizing: border-box; + background: #ffffff; + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.rdrDateDisplay{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.rdrDateDisplayItem{ + -webkit-box-flex: 1; + -ms-flex: 1 1; + 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 { + -webkit-box-sizing: inherit; + box-sizing: inherit; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; +} + +.rdrMonthAndYearPickers{ + -webkit-box-flex: 1; + -ms-flex: 1 1 auto; + flex: 1 1 auto; + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.rdrMonthPicker{} + +.rdrYearPicker{} + +.rdrNextPrevButton { + -webkit-box-sizing: inherit; + box-sizing: inherit; + cursor: pointer; + outline: none; +} + +.rdrPprevButton {} + +.rdrNextButton {} + +.rdrMonths{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.rdrMonthsVertical{ + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.rdrMonthsHorizontal > div > div > div{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: horizontal; + -webkit-box-direction: normal; + -ms-flex-direction: row; + flex-direction: row; +} + +.rdrMonth{ + width: 27.667em; +} + +.rdrWeekDays{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.rdrWeekDay { + -ms-flex-preferred-size: calc(100% / 7); + flex-basis: calc(100% / 7); + -webkit-box-sizing: inherit; + box-sizing: inherit; + text-align: center; +} + +.rdrDays{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; +} + +.rdrDateDisplayWrapper{} + +.rdrMonthName{} + +.rdrInfiniteMonths{ + overflow: auto; +} + +.rdrDateRangeWrapper{ + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.rdrDay { + -webkit-box-sizing: inherit; + 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; +} + +.rdrSelected, .rdrInRange, .rdrStartEdge, .rdrEndEdge{ + pointer-events: none; +} + +.rdrInRange{} + +.rdrDayStartPreview, .rdrDayInPreview, .rdrDayEndPreview{ + pointer-events: none; +} + +.rdrDayHovered{} + +.rdrDayActive{} + +.rdrDateRangePickerWrapper{ + display: -webkit-inline-box; + display: -ms-inline-flexbox; + display: inline-flex; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +.rdrDefinedRangesWrapper{} + +.rdrStaticRanges{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-orient: vertical; + -webkit-box-direction: normal; + -ms-flex-direction: column; + flex-direction: column; +} + +.rdrStaticRange{ + font-size: inherit; +} + +.rdrStaticRangeLabel{} + +.rdrInputRanges{} + +.rdrInputRange{ + display: -webkit-box; + display: -ms-flexbox; + display: flex; +} + +.rdrInputRangeInput{} diff --git a/dist/styles.js b/dist/styles.js new file mode 100644 index 000000000..fa382b3b1 --- /dev/null +++ b/dist/styles.js @@ -0,0 +1,58 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.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' +}; \ No newline at end of file diff --git a/dist/theme/default.css b/dist/theme/default.css new file mode 100644 index 000000000..819e33823 --- /dev/null +++ b/dist/theme/default.css @@ -0,0 +1,399 @@ +.rdrCalendarWrapper{ + color: #000000; + font-size: 12px; +} + +.rdrDateDisplay{ + background-color: rgb(239, 242, 247); + padding: 0.833em; +} + +.rdrDateDisplayItem{ + border-radius: 4px; + background-color: rgb(255, 255, 255); + -webkit-box-shadow: 0 1px 2px 0 rgba(35, 57, 66, 0.21); + 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 { + -webkit-box-align: center; + -ms-flex-align: center; + 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; + -webkit-transform: translate(-3px, 0px); + transform: translate(-3px, 0px); +} + +.rdrPprevButton i { + border-width: 4px 6px 4px 4px; + border-color: transparent rgb(52, 73, 94) transparent transparent; + -webkit-transform: translate(-3px, 0px); + 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); + -webkit-transform: translate(3px, 0px); + 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: -webkit-box; + display: -ms-flexbox; + display: flex; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + -webkit-box-pack: center; + -ms-flex-pack: center; + justify-content: center; +} + +.rdrDayToday .rdrDayNumber span{ + font-weight: 500 +} + +.rdrDayToday .rdrDayNumber span:after{ + content: ''; + position: absolute; + bottom: 4px; + left: 50%; + -webkit-transform: translate(-50%, 0); + 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{ + -webkit-box-align: center; + -ms-flex-align: center; + 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{ + -webkit-filter: grayscale(100%) opacity(60%); + 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..d61d8da60 --- /dev/null +++ b/dist/utils.js @@ -0,0 +1,120 @@ +'use strict'; + +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports.calcFocusDate = calcFocusDate; +exports.findNextRangeIndex = findNextRangeIndex; +exports.getMonthDisplayRange = getMonthDisplayRange; +exports.generateStyles = generateStyles; + +var _classnames = require('classnames'); + +var _classnames2 = _interopRequireDefault(_classnames); + +var _endOfWeek = require('date-fns2/endOfWeek'); + +var _endOfWeek2 = _interopRequireDefault(_endOfWeek); + +var _startOfWeek = require('date-fns2/startOfWeek'); + +var _startOfWeek2 = _interopRequireDefault(_startOfWeek); + +var _endOfMonth = require('date-fns2/endOfMonth'); + +var _endOfMonth2 = _interopRequireDefault(_endOfMonth); + +var _startOfMonth = require('date-fns2/startOfMonth'); + +var _startOfMonth2 = _interopRequireDefault(_startOfMonth); + +var _areIntervalsOverlapping = require('date-fns2/areIntervalsOverlapping'); + +var _areIntervalsOverlapping2 = _interopRequireDefault(_areIntervalsOverlapping); + +var _addMonths = require('date-fns2/addMonths'); + +var _addMonths2 = _interopRequireDefault(_addMonths); + +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, + focusedDate = props.focusedDate; + // find primary date according the props + + var targetInterval = void 0; + if (displayMode === 'dateRange') { + var range = ranges[focusedRange[0]] || {}; + targetInterval = { + start: range.startDate, + end: range.endDate + }; + } else { + targetInterval = { + start: date, + end: date + }; + } + targetInterval.start = (0, _startOfMonth2.default)(targetInterval.start || new Date()); + targetInterval.end = (0, _endOfMonth2.default)(targetInterval.end || targetInterval.start); + var targetDate = focusedDate || 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; + var currentFocusInterval = { + start: (0, _startOfMonth2.default)(currentFocusedDate), + end: (0, _endOfMonth2.default)((0, _addMonths2.default)(currentFocusedDate, months - 1)) + }; + if ((0, _areIntervalsOverlapping2.default)(targetInterval, currentFocusInterval)) { + // 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) { + var startDateOfMonth = (0, _startOfMonth2.default)(date, dateOptions); + var endDateOfMonth = (0, _endOfMonth2.default)(date, dateOptions); + var startDateOfCalendar = (0, _startOfWeek2.default)(startDateOfMonth, dateOptions); + var endDateOfCalendar = (0, _endOfWeek2.default)(endDateOfMonth, dateOptions); + 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, _classnames2.default)(styles[key], styleSource[key]); + }); + return styles; + }, {}); + return generatedStyles; +} \ No newline at end of file diff --git a/package.json b/package.json index af3f12920..c340290ad 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,8 @@ }, "dependencies": { "classnames": "^2.2.1", - "date-fns": "2.0.0-alpha.7", + "date-fns": "^2.0.0-alpha.16", + "date-fns2": "npm:date-fns@2.0.0-alpha.7", "prop-types": "^15.5.10", "react-list": "^0.8.8" }, diff --git a/src/components/Calendar.js b/src/components/Calendar.js index be26e122b..585214752 100644 --- a/src/components/Calendar.js +++ b/src/components/Calendar.js @@ -23,10 +23,12 @@ import { differenceInDays, min, max, -} from 'date-fns'; -import defaultLocale from 'date-fns/locale/en-US'; +} from 'date-fns2'; +import defaultLocale from 'date-fns2/locale/en-US'; import coreStyles from '../styles'; +console.log(defaultLocale); + class Calendar extends PureComponent { constructor(props, context) { super(props, context); @@ -534,6 +536,7 @@ Calendar.propTypes = { navigatorRenderer: PropTypes.func, rangeColors: PropTypes.arrayOf(PropTypes.string), dragSelectionEnabled: PropTypes.bool, + focusedDate: PropTypes.object, }; export default Calendar; diff --git a/src/components/DateRange.js b/src/components/DateRange.js index 6815f0679..73f18465e 100644 --- a/src/components/DateRange.js +++ b/src/components/DateRange.js @@ -3,7 +3,7 @@ import PropTypes from 'prop-types'; import Calendar from './Calendar.js'; import { rangeShape } from './DayCell'; import { findNextRangeIndex, generateStyles } from '../utils.js'; -import { isBefore, differenceInCalendarDays, addDays, min, isWithinInterval, max } from 'date-fns'; +import { isBefore, differenceInCalendarDays, addDays, min, isWithinInterval, max } from 'date-fns2'; import classnames from 'classnames'; import coreStyles from '../styles'; diff --git a/src/components/DayCell.js b/src/components/DayCell.js index 72bda900e..c26315061 100644 --- a/src/components/DayCell.js +++ b/src/components/DayCell.js @@ -2,7 +2,7 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; import classnames from 'classnames'; -import { startOfDay, format, isSameDay, isAfter, isBefore, endOfDay } from 'date-fns'; +import { startOfDay, format, isSameDay, isAfter, isBefore, endOfDay } from 'date-fns2'; class DayCell extends Component { constructor(props, context) { diff --git a/src/components/Month.js b/src/components/Month.js index 92358f0d0..004d3f498 100644 --- a/src/components/Month.js +++ b/src/components/Month.js @@ -14,7 +14,7 @@ import { isWeekend, isWithinInterval, eachDayOfInterval, -} from 'date-fns'; +} from 'date-fns2'; import { getMonthDisplayRange } from '../utils'; function renderWeekdays(styles, dateOptions) { diff --git a/src/defaultRanges.js b/src/defaultRanges.js index fb91ebb25..71f84d82a 100644 --- a/src/defaultRanges.js +++ b/src/defaultRanges.js @@ -9,7 +9,7 @@ import { endOfWeek, isSameDay, differenceInCalendarDays, -} from 'date-fns'; +} from 'date-fns2'; const defineds = { startOfWeek: startOfWeek(new Date()), diff --git a/src/locale/ar.js b/src/locale/ar.js index 93e5c0c31..6773d6385 100644 --- a/src/locale/ar.js +++ b/src/locale/ar.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/ar'; +import locale from 'date-fns2/locale/ar'; export default locale; diff --git a/src/locale/bg.js b/src/locale/bg.js index ec3233c0d..5c360c288 100644 --- a/src/locale/bg.js +++ b/src/locale/bg.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/bg'; +import locale from 'date-fns2/locale/bg'; export default locale; diff --git a/src/locale/ca.js b/src/locale/ca.js index e75a255c0..63b28c909 100644 --- a/src/locale/ca.js +++ b/src/locale/ca.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/ca'; +import locale from 'date-fns2/locale/ca'; export default locale; diff --git a/src/locale/cs.js b/src/locale/cs.js index d740dcdfa..23e257d1d 100644 --- a/src/locale/cs.js +++ b/src/locale/cs.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/cs'; +import locale from 'date-fns2/locale/cs'; export default locale; diff --git a/src/locale/da.js b/src/locale/da.js index 0d1d8e39d..50288c073 100644 --- a/src/locale/da.js +++ b/src/locale/da.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/da'; +import locale from 'date-fns2/locale/da'; export default locale; diff --git a/src/locale/de.js b/src/locale/de.js index 01177754e..9b7282c53 100644 --- a/src/locale/de.js +++ b/src/locale/de.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/de'; +import locale from 'date-fns2/locale/de'; export default locale; diff --git a/src/locale/el.js b/src/locale/el.js index 6819d92ca..0c9dc4825 100644 --- a/src/locale/el.js +++ b/src/locale/el.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/el'; +import locale from 'date-fns2/locale/el'; export default locale; diff --git a/src/locale/en-GB.js b/src/locale/en-GB.js index 579753e7a..33d685a30 100644 --- a/src/locale/en-GB.js +++ b/src/locale/en-GB.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/en-GB'; +import locale from 'date-fns2/locale/en-GB'; export default locale; diff --git a/src/locale/en-US.js b/src/locale/en-US.js index 3efb78fdb..cbb269774 100644 --- a/src/locale/en-US.js +++ b/src/locale/en-US.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/en-US'; +import locale from 'date-fns2/locale/en-US'; export default locale; diff --git a/src/locale/eo.js b/src/locale/eo.js index f8c5200d4..9c7956a5e 100644 --- a/src/locale/eo.js +++ b/src/locale/eo.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/eo'; +import locale from 'date-fns2/locale/eo'; export default locale; diff --git a/src/locale/es.js b/src/locale/es.js index 457052216..10b76a5d2 100644 --- a/src/locale/es.js +++ b/src/locale/es.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/es'; +import locale from 'date-fns2/locale/es'; export default locale; diff --git a/src/locale/fi.js b/src/locale/fi.js index 03568ff09..514460ba5 100644 --- a/src/locale/fi.js +++ b/src/locale/fi.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/fi'; +import locale from 'date-fns2/locale/fi'; export default locale; diff --git a/src/locale/fil.js b/src/locale/fil.js index 7701eeba4..1d8b641a5 100644 --- a/src/locale/fil.js +++ b/src/locale/fil.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/fil'; +import locale from 'date-fns2/locale/fil'; export default locale; diff --git a/src/locale/fr-CH.js b/src/locale/fr-CH.js index a263272cd..4a2e3a1dd 100644 --- a/src/locale/fr-CH.js +++ b/src/locale/fr-CH.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/fr-CH'; +import locale from 'date-fns2/locale/fr-CH'; export default locale; diff --git a/src/locale/fr.js b/src/locale/fr.js index 5a1f1e478..6138f64cf 100644 --- a/src/locale/fr.js +++ b/src/locale/fr.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/fr'; +import locale from 'date-fns2/locale/fr'; export default locale; diff --git a/src/locale/hr.js b/src/locale/hr.js index 902ff9422..9315d1260 100644 --- a/src/locale/hr.js +++ b/src/locale/hr.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/hr'; +import locale from 'date-fns2/locale/hr'; export default locale; diff --git a/src/locale/id.js b/src/locale/id.js index 76eb50431..7aeffc793 100644 --- a/src/locale/id.js +++ b/src/locale/id.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/id'; +import locale from 'date-fns2/locale/id'; export default locale; diff --git a/src/locale/is.js b/src/locale/is.js index fa990be1c..5ebc4e921 100644 --- a/src/locale/is.js +++ b/src/locale/is.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/is'; +import locale from 'date-fns2/locale/is'; export default locale; diff --git a/src/locale/it.js b/src/locale/it.js index 06d2d8c8c..0fdc12c63 100644 --- a/src/locale/it.js +++ b/src/locale/it.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/it'; +import locale from 'date-fns2/locale/it'; export default locale; diff --git a/src/locale/ja.js b/src/locale/ja.js index afc0134c7..3566d4bef 100644 --- a/src/locale/ja.js +++ b/src/locale/ja.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/ja'; +import locale from 'date-fns2/locale/ja'; export default locale; diff --git a/src/locale/ko.js b/src/locale/ko.js index dd91462b9..e52def500 100644 --- a/src/locale/ko.js +++ b/src/locale/ko.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/ko'; +import locale from 'date-fns2/locale/ko'; export default locale; diff --git a/src/locale/mk.js b/src/locale/mk.js index 8be723d66..2835ccf5e 100644 --- a/src/locale/mk.js +++ b/src/locale/mk.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/mk'; +import locale from 'date-fns2/locale/mk'; export default locale; diff --git a/src/locale/nb.js b/src/locale/nb.js index 5982f30fc..db09a0104 100644 --- a/src/locale/nb.js +++ b/src/locale/nb.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/nb'; +import locale from 'date-fns2/locale/nb'; export default locale; diff --git a/src/locale/nl.js b/src/locale/nl.js index f9263a590..d9410b607 100644 --- a/src/locale/nl.js +++ b/src/locale/nl.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/nl'; +import locale from 'date-fns2/locale/nl'; export default locale; diff --git a/src/locale/pl.js b/src/locale/pl.js index a03d6aef6..408546252 100644 --- a/src/locale/pl.js +++ b/src/locale/pl.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/pl'; +import locale from 'date-fns2/locale/pl'; export default locale; diff --git a/src/locale/pt.js b/src/locale/pt.js index c686574b6..a2115e41f 100644 --- a/src/locale/pt.js +++ b/src/locale/pt.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/pt'; +import locale from 'date-fns2/locale/pt'; export default locale; diff --git a/src/locale/ro.js b/src/locale/ro.js index b7326ab16..dd5e18a14 100644 --- a/src/locale/ro.js +++ b/src/locale/ro.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/ro'; +import locale from 'date-fns2/locale/ro'; export default locale; diff --git a/src/locale/ru.js b/src/locale/ru.js index 506fce828..ec54da816 100644 --- a/src/locale/ru.js +++ b/src/locale/ru.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/ru'; +import locale from 'date-fns2/locale/ru'; export default locale; diff --git a/src/locale/sk.js b/src/locale/sk.js index a25ba812e..a31ac450a 100644 --- a/src/locale/sk.js +++ b/src/locale/sk.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/sk'; +import locale from 'date-fns2/locale/sk'; export default locale; diff --git a/src/locale/sv.js b/src/locale/sv.js index 8b6bc69bd..0855d235f 100644 --- a/src/locale/sv.js +++ b/src/locale/sv.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/sv'; +import locale from 'date-fns2/locale/sv'; export default locale; diff --git a/src/locale/th.js b/src/locale/th.js index 241f6d8cc..3730617f2 100644 --- a/src/locale/th.js +++ b/src/locale/th.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/th'; +import locale from 'date-fns2/locale/th'; export default locale; diff --git a/src/locale/tr.js b/src/locale/tr.js index 26514cf2d..acb616a56 100644 --- a/src/locale/tr.js +++ b/src/locale/tr.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/tr'; +import locale from 'date-fns2/locale/tr'; export default locale; diff --git a/src/locale/ua.js b/src/locale/ua.js index 6ef04244e..53376553b 100644 --- a/src/locale/ua.js +++ b/src/locale/ua.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/ua'; +import locale from 'date-fns2/locale/ua'; export default locale; diff --git a/src/locale/vi.js b/src/locale/vi.js index a8cc55c50..b20d8e391 100644 --- a/src/locale/vi.js +++ b/src/locale/vi.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/vi'; +import locale from 'date-fns2/locale/vi'; export default locale; diff --git a/src/locale/zh-CN.js b/src/locale/zh-CN.js index ff2c7385f..6d53f9a52 100644 --- a/src/locale/zh-CN.js +++ b/src/locale/zh-CN.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/zh-CN'; +import locale from 'date-fns2/locale/zh-CN'; export default locale; diff --git a/src/locale/zh-TW.js b/src/locale/zh-TW.js index 64e8becbf..27a158e70 100644 --- a/src/locale/zh-TW.js +++ b/src/locale/zh-TW.js @@ -1,2 +1,2 @@ -import locale from 'date-fns/locale/zh-TW'; +import locale from 'date-fns2/locale/zh-TW'; export default locale; diff --git a/src/utils.js b/src/utils.js index 6a8bffd20..38fb3bc60 100644 --- a/src/utils.js +++ b/src/utils.js @@ -6,10 +6,10 @@ import { endOfMonth, startOfWeek, endOfWeek, -} from 'date-fns'; +} from 'date-fns2'; export function calcFocusDate(currentFocusedDate, props) { - const { shownDate, date, months, ranges, focusedRange, displayMode } = props; + const { shownDate, date, months, ranges, focusedRange, displayMode, focusedDate } = props; // find primary date according the props let targetInterval; if (displayMode === 'dateRange') { @@ -26,7 +26,7 @@ export function calcFocusDate(currentFocusedDate, props) { } targetInterval.start = startOfMonth(targetInterval.start || new Date()); targetInterval.end = endOfMonth(targetInterval.end || targetInterval.start); - const targetDate = targetInterval.start || targetInterval.end || shownDate || new Date(); + const targetDate = focusedDate || targetInterval.start || targetInterval.end || shownDate || new Date(); // initial focus if (!currentFocusedDate) return shownDate || targetDate; diff --git a/yarn.lock b/yarn.lock index 6ef9a6374..0406966ce 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1922,10 +1922,14 @@ dashdash@^1.12.0: dependencies: assert-plus "^1.0.0" -date-fns@2.0.0-alpha.7: +"date-fns2@npm:date-fns@2.0.0-alpha.7": version "2.0.0-alpha.7" resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.7.tgz#245ad16f95764eababfb2c0a41fd5d033c20e57a" +date-fns@^2.0.0-alpha.16: + version "2.0.0-alpha.16" + resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.0.0-alpha.16.tgz#d249a6c9b799252652fb9e3f25460eaf9de86ac7" + date-now@^0.1.4: version "0.1.4" resolved "https://registry.yarnpkg.com/date-now/-/date-now-0.1.4.tgz#eaf439fd4d4848ad74e5cc7dbef200672b9e345b"