diff --git a/.gitignore b/.gitignore index 2131e73a6d..059df98162 100644 --- a/.gitignore +++ b/.gitignore @@ -8,7 +8,7 @@ pids *.pid *.seed -# Directory for instrumented libs generated by jscoverage/JSCover +# Directory for instrumented libs generated by jscoverage/JSCoer lib-cov # Coverage directory used by tools like istanbul @@ -33,7 +33,7 @@ node_modules .node_repl_history # build folder -lib +# lib .idea # gh-pages diff --git a/README.md b/README.md index c002fd944c..e69de29bb2 100644 --- a/README.md +++ b/README.md @@ -1,258 +0,0 @@ -# react-dates [![Version Badge][npm-version-svg]][package-url] - -[![Build Status][travis-svg]][travis-url] -[![dependency status][deps-svg]][deps-url] -[![dev dependency status][dev-deps-svg]][dev-deps-url] -[![License][license-image]][license-url] -[![Downloads][downloads-image]][downloads-url] - -[![npm badge][npm-badge-png]][package-url] - -> An easily internationalizable, mobile-friendly datepicker library for the web. - -![react-dates in action](https://raw.githubusercontent.com/airbnb/react-dates/master/react-dates-demo.gif) - -## Live Playground - -For examples of the datepicker in action, go to http://airbnb.io/react-dates. - -OR - -To run that demo on your own computer: -* Clone this repository -* `npm install` -* `npm run storybook` -* Visit http://localhost:9001/ - -## Getting Started -### Install dependencies -Ensure packages are installed with correct version numbers by running: - ```sh - ( - export PKG=react-dates; - npm info "$PKG" peerDependencies --json | command sed 's/[\{\},]//g ; s/: /@/g; s/ *//g' | xargs npm install --save "$PKG" - ) - ``` - - Which produces and runs a command like: - - ```sh - npm install --save react-dates moment@>=#.## react@>=#.## react-dom@>=#.## react-addons-shallow-compare@>=#.## - ``` - -### Include component -```js -import { DateRangePicker, SingleDatePicker, DayPickerRangeController } from 'react-dates'; -``` - -### Include CSS -#### Webpack -Using Webpack with CSS loader, add the following import to your app: -```js -import 'react-dates/lib/css/_datepicker.css'; -``` - -#### Without Webpack: -Create a CSS file with the contents of `require.resolve('react-dates/lib/css/_datepicker.css')` and include it in your html `` section. - -### Make some awesome datepickers - -We provide a handful of components for your use. If you supply essential props to each component, you'll get a full featured interactive date picker. With additional optional props, you can customize the look and feel of the inputs, calendar, etc. You can see what each of the props do in the [live demo](http://airbnb.io/react-dates/) or explore -how to properly wrap the pickers in the [examples folder](https://github.com/airbnb/react-dates/tree/master/examples). - -#### DateRangePicker -The `DateRangePicker` is a fully controlled component that allows users to select a date range. You can control the selected -dates using the `startDate`, `endDate`, and `onDatesChange` props as shown below. The `DateRangePicker` also manages internal -state for partial dates entered by typing (although `onDatesChange` will not trigger until a date has been entered -completely in that case). Similarly, you can control which input is focused as well as calendar visibility (the calendar is -only visible if `focusedInput` is defined) with the `focusedInput` and `onFocusChange` props as shown below. - -Here is the minimum *REQUIRED* setup you need to get the `DateRangePicker` working: -```jsx - this.setState({ startDate, endDate })} // PropTypes.func.isRequired, - focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null, - onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired, -/> -``` - -The following is a list of other *OPTIONAL* props you may provide to the `DateRangePicker` to customize appearance and behavior to your heart's desire. Again, please explore the [storybook](http://airbnb.io/react-dates/?selectedKind=DRP%20-%20Input%20Props&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for more information on what each of these props do. -```js -// input related props -startDateId: PropTypes.string.isRequired, -startDatePlaceholderText: PropTypes.string, -endDateId: PropTypes.string.isRequired, -endDatePlaceholderText: PropTypes.string, -disabled: PropTypes.bool, -required: PropTypes.bool, -screenReaderInputMessage: PropTypes.string, -showClearDates: PropTypes.bool, -showDefaultInputIcon: PropTypes.bool, -customInputIcon: PropTypes.node, -customArrowIcon: PropTypes.node, -customCloseIcon: PropTypes.node, - -// calendar presentation and interaction related props -orientation: OrientationShape, -anchorDirection: anchorDirectionShape, -horizontalMargin: PropTypes.number, -withPortal: PropTypes.bool, -withFullScreenPortal: PropTypes.bool, -initialVisibleMonth: PropTypes.func, -numberOfMonths: PropTypes.number, -keepOpenOnDateSelect: PropTypes.bool, -reopenPickerOnClearDates: PropTypes.bool, -renderCalendarInfo: PropTypes.func, - -// navigation related props -navPrev: PropTypes.node, -navNext: PropTypes.node, -onPrevMonthClick: PropTypes.func, -onNextMonthClick: PropTypes.func, - -// day presentation and interaction related props -renderDay: PropTypes.func, -minimumNights: PropTypes.number, -enableOutsideDays: PropTypes.bool, -isDayBlocked: PropTypes.func, -isOutsideRange: PropTypes.func, -isDayHighlighted: PropTypes.func, - -// internationalization props -displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), -monthFormat: PropTypes.string, -phrases: PropTypes.shape(getPhrasePropTypes(DateRangePickerPhrases)), -``` - -#### SingleDatePicker -The `SingleDatePicker` is a fully controlled component that allows users to select a single date. You can control the selected -date using the `date` and `onDateChange` props as shown below. The `SingleDatePicker` also manages internal -state for partial dates entered by typing (although `onDateChange` will not trigger until a date has been entered -completely in that case). Similarly, you can control whether or not the input is focused (calendar visibility is also -controlled with the same props) with the `focused` and `onFocusChange` props as shown below. - -Here is the minimum *REQUIRED* setup you need to get the `SingleDatePicker` working: -```jsx - this.setState({ date })} // PropTypes.func.isRequired - focused={this.state.focused} // PropTypes.bool - onFocusChange={({ focused }) => this.setState({ focused })} // PropTypes.func.isRequired -/> -``` - -The following is a list of other *OPTIONAL* props you may provide to the `SingleDatePicker` to customize appearance and behavior to your heart's desire. Again, please explore the [storybook](http://airbnb.io/react-dates/?selectedKind=SDP%20-%20Input%20Props&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for more information on what each of these props do. -```js -// input related props -id: PropTypes.string.isRequired, -placeholder: PropTypes.string, -disabled: PropTypes.bool, -required: PropTypes.bool, -screenReaderInputMessage: PropTypes.string, -showClearDate: PropTypes.bool, -customCloseIcon: PropTypes.node, - -// calendar presentation and interaction related props -orientation: OrientationShape, -anchorDirection: anchorDirectionShape, -horizontalMargin: PropTypes.number, -withPortal: PropTypes.bool, -withFullScreenPortal: PropTypes.bool, -initialVisibleMonth: PropTypes.func, -numberOfMonths: PropTypes.number, -keepOpenOnDateSelect: PropTypes.bool, -reopenPickerOnClearDate: PropTypes.bool, -renderCalendarInfo: PropTypes.func, - -// navigation related props -navPrev: PropTypes.node, -navNext: PropTypes.node, -onPrevMonthClick: PropTypes.func, -onNextMonthClick: PropTypes.func, - -// day presentation and interaction related props -renderDay: PropTypes.func, -enableOutsideDays: PropTypes.bool, -isDayBlocked: PropTypes.func, -isOutsideRange: PropTypes.func, -isDayHighlighted: PropTypes.func, - -// internationalization props -displayFormat: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), -monthFormat: PropTypes.string, -phrases: PropTypes.shape(getPhrasePropTypes(SingleDatePickerPhrases)), -``` - -#### DayPickerRangeController -The `DayPickerRangeController` is a calendar-only version of the `DateRangePicker`. There are no inputs (which also means -that currently, it is not keyboard accessible) and the calendar is always visible, but you can select a date range much in the same way you would with the `DateRangePicker`. You can control the selected -dates using the `startDate`, `endDate`, and `onDatesChange` props as shown below. Similarly, you can control which input is focused with the `focusedInput` and `onFocusChange` props as shown below. The user will only be able to select a date if `focusedInput` is provided. - -Here is the minimum *REQUIRED* setup you need to get the `DayPickerRangeController` working: -```jsx - this.setState({ startDate, endDate })} // PropTypes.func.isRequired, - focusedInput={this.state.focusedInput} // PropTypes.oneOf([START_DATE, END_DATE]) or null, - onFocusChange={focusedInput => this.setState({ focusedInput })} // PropTypes.func.isRequired, -/> -``` - -The following is a list of other *OPTIONAL* props you may provide to the `DayPickerRangeController` to customize appearance and behavior to your heart's desire. Again, please explore the [storybook](http://airbnb.io/react-dates/?selectedKind=DayPickerRangeController&selectedStory=default&full=0&down=1&left=1&panelRight=0&downPanel=kadirahq%2Fstorybook-addon-actions%2Factions-panel) for more information on what each of these props do. -```js - // calendar presentation and interaction related props - enableOutsideDays: PropTypes.bool, - numberOfMonths: PropTypes.number, - orientation: ScrollableOrientationShape, - withPortal: PropTypes.bool, - initialVisibleMonth: PropTypes.func, - renderCalendarInfo: PropTypes.func, - onOutsideClick: PropTypes.func, - keepOpenOnDateSelect: PropTypes.bool, - - // navigation related props - navPrev: PropTypes.node, - navNext: PropTypes.node, - onPrevMonthClick: PropTypes.func, - onNextMonthClick: PropTypes.func, - - // day presentation and interaction related props - renderDay: PropTypes.func, - minimumNights: PropTypes.number, - isOutsideRange: PropTypes.func, - isDayBlocked: PropTypes.func, - isDayHighlighted: PropTypes.func, - - // internationalization props - monthFormat: PropTypes.string, - phrases: PropTypes.shape(getPhrasePropTypes(DayPickerPhrases)), -/> -``` - -## Theming - -react-dates comes with a set of SCSS variables that can be overridden to add your own project-specific theming. Override any variables found in `css/variables.scss` with your own and then import `~react-dates/css/styles.scss` (and `~react-dates/css/variables.scss` if you're only overriding a few). If you were using [sass-loader](https://github.com/jtangelder/sass-loader) with webpack, the code below would properly override the selected variables: -```scss -//overriding default sass variables with my project's colors -$react-dates-color-primary: $some-color-specific-to-my-project; -$react-dates-color-primary-dark: $some-other-color-specific-to-my-project; -@import 'http://github.com/~react-dates/css/variables.scss'; -@import 'http://github.com/~react-dates/css/styles.scss'; -``` - -[package-url]: https://npmjs.org/package/react-dates -[npm-version-svg]: http://versionbadg.es/airbnb/react-dates.svg -[travis-svg]: https://travis-ci.org/airbnb/react-dates.svg -[travis-url]: https://travis-ci.org/airbnb/react-dates -[deps-svg]: https://david-dm.org/airbnb/react-dates.svg -[deps-url]: https://david-dm.org/airbnb/react-dates -[dev-deps-svg]: https://david-dm.org/airbnb/react-dates/dev-status.svg -[dev-deps-url]: https://david-dm.org/airbnb/react-dates#info=devDependencies -[npm-badge-png]: https://nodei.co/npm/react-dates.png?downloads=true&stars=true -[license-image]: http://img.shields.io/npm/l/react-dates.svg -[license-url]: LICENSE -[downloads-image]: http://img.shields.io/npm/dm/react-dates.svg -[downloads-url]: http://npm-stat.com/charts.html?package=react-dates diff --git a/constants.js b/constants.js index d93529c07f..c71ffa425f 100644 --- a/constants.js +++ b/constants.js @@ -1,6 +1,17 @@ module.exports = { DISPLAY_FORMAT: 'L', ISO_FORMAT: 'YYYY-MM-DD', + CUSTOM_FORMAT_1: 'DDMMYYYY', + CUSTOM_FORMAT_2: 'YYYYMMDD', + CUSTOM_FORMAT_3: 'DD/MM/YYYY', + CUSTOM_FORMAT_4: 'YYYY/MM/DD', + CUSTOM_FORMAT_5: 'DD-MM-YYYY', + CUSTOM_FORMAT_6: 'DD.MM.YYYY', + CUSTOM_FORMAT_7: 'YYYY.MM.DD', + CUSTOM_FORMAT_8: 'DD_MM_YYYY', + CUSTOM_FORMAT_9: 'YYYY_MM_DD', + CUSTOM_FORMAT_10: 'DD MM YYYY', + CUSTOM_FORMAT_11: 'YYYY MM DD', START_DATE: 'startDate', END_DATE: 'endDate', diff --git a/lib/components/CalendarDay.js b/lib/components/CalendarDay.js new file mode 100644 index 0000000000..7e14e2b0a3 --- /dev/null +++ b/lib/components/CalendarDay.js @@ -0,0 +1,293 @@ +module.exports = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports, __webpack_require__) { + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + 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; + }; + }(); + + exports.getModifiersForDay = getModifiersForDay; + + var _react = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + var _reactAddonsShallowCompare = __webpack_require__(2); + + var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare); + + var _reactMomentProptypes = __webpack_require__(3); + + var _reactMomentProptypes2 = _interopRequireDefault(_reactMomentProptypes); + + var _airbnbPropTypes = __webpack_require__(4); + + var _moment = __webpack_require__(5); + + var _moment2 = _interopRequireDefault(_moment); + + var _classnames = __webpack_require__(6); + + var _classnames2 = _interopRequireDefault(_classnames); + + 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 === "undefined" ? "undefined" : _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 === "undefined" ? "undefined" : _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 propTypes = (0, _airbnbPropTypes.forbidExtraProps)({ + day: _reactMomentProptypes2['default'].momentObj, + isOutsideDay: _react.PropTypes.bool, + modifiers: _react.PropTypes.object, + onDayClick: _react.PropTypes.func, + onDayMouseEnter: _react.PropTypes.func, + onDayMouseLeave: _react.PropTypes.func, + renderDay: _react.PropTypes.func + }); + + var defaultProps = { + day: (0, _moment2['default'])(), + isOutsideDay: false, + modifiers: {}, + onDayClick: function () { + function onDayClick() {} + + return onDayClick; + }(), + onDayMouseEnter: function () { + function onDayMouseEnter() {} + + return onDayMouseEnter; + }(), + onDayMouseLeave: function () { + function onDayMouseLeave() {} + + return onDayMouseLeave; + }(), + + renderDay: null + }; + + function getModifiersForDay(modifiers, day) { + return day ? Object.keys(modifiers).filter(function (key) { + return modifiers[key](day); + }) : []; + } + + var CalendarDay = function (_React$Component) { + _inherits(CalendarDay, _React$Component); + + function CalendarDay() { + _classCallCheck(this, CalendarDay); + + return _possibleConstructorReturn(this, (CalendarDay.__proto__ || Object.getPrototypeOf(CalendarDay)).apply(this, arguments)); + } + + _createClass(CalendarDay, [{ + key: 'shouldComponentUpdate', + value: function () { + function shouldComponentUpdate(nextProps, nextState) { + return (0, _reactAddonsShallowCompare2['default'])(this, nextProps, nextState); + } + + return shouldComponentUpdate; + }() + }, { + key: 'onDayClick', + value: function () { + function onDayClick(day, e) { + var onDayClick = this.props.onDayClick; + + onDayClick(day, e); + } + + return onDayClick; + }() + }, { + key: 'onDayMouseEnter', + value: function () { + function onDayMouseEnter(day, e) { + var onDayMouseEnter = this.props.onDayMouseEnter; + + onDayMouseEnter(day, e); + } + + return onDayMouseEnter; + }() + }, { + key: 'onDayMouseLeave', + value: function () { + function onDayMouseLeave(day, e) { + var onDayMouseLeave = this.props.onDayMouseLeave; + + onDayMouseLeave(day, e); + } + + return onDayMouseLeave; + }() + }, { + key: 'render', + value: function () { + function render() { + var _this2 = this; + + var _props = this.props; + var day = _props.day; + var isOutsideDay = _props.isOutsideDay; + var modifiers = _props.modifiers; + var renderDay = _props.renderDay; + + var className = (0, _classnames2['default'])('CalendarDay', { + 'CalendarDay--outside': !day || isOutsideDay + }, getModifiersForDay(modifiers, day).map(function (mod) { + return 'CalendarDay--' + String(mod); + })); + + return day ? _react2['default'].createElement('td', { + className: className, + onMouseEnter: function () { + function onMouseEnter(e) { + return _this2.onDayMouseEnter(day, e); + } + + return onMouseEnter; + }(), + onMouseLeave: function () { + function onMouseLeave(e) { + return _this2.onDayMouseLeave(day, e); + } + + return onMouseLeave; + }(), + onClick: function () { + function onClick(e) { + return _this2.onDayClick(day, e); + } + + return onClick; + }() + }, renderDay ? renderDay(day) : day.format('D')) : _react2['default'].createElement('td', null); + } + + return render; + }() + }]); + + return CalendarDay; + }(_react2['default'].Component); + + exports['default'] = CalendarDay; + + CalendarDay.propTypes = propTypes; + CalendarDay.defaultProps = defaultProps; + +/***/ }, +/* 1 */ +/***/ function(module, exports) { + + module.exports = require("react"); + +/***/ }, +/* 2 */ +/***/ function(module, exports) { + + module.exports = require("react-addons-shallow-compare"); + +/***/ }, +/* 3 */ +/***/ function(module, exports) { + + module.exports = require("react-moment-proptypes"); + +/***/ }, +/* 4 */ +/***/ function(module, exports) { + + module.exports = require("airbnb-prop-types"); + +/***/ }, +/* 5 */ +/***/ function(module, exports) { + + module.exports = require("moment"); + +/***/ }, +/* 6 */ +/***/ function(module, exports) { + + module.exports = require("classnames"); + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/lib/components/CalendarMonth.js b/lib/components/CalendarMonth.js new file mode 100644 index 0000000000..02698923ef --- /dev/null +++ b/lib/components/CalendarMonth.js @@ -0,0 +1,316 @@ +module.exports = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports, __webpack_require__) { + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + var _reactAddonsShallowCompare = __webpack_require__(2); + + var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare); + + var _reactMomentProptypes = __webpack_require__(3); + + var _reactMomentProptypes2 = _interopRequireDefault(_reactMomentProptypes); + + var _airbnbPropTypes = __webpack_require__(4); + + var _moment = __webpack_require__(5); + + var _moment2 = _interopRequireDefault(_moment); + + var _classnames = __webpack_require__(6); + + var _classnames2 = _interopRequireDefault(_classnames); + + var _CalendarDay = __webpack_require__(7); + + var _CalendarDay2 = _interopRequireDefault(_CalendarDay); + + var _getCalendarMonthWeeks = __webpack_require__(8); + + var _getCalendarMonthWeeks2 = _interopRequireDefault(_getCalendarMonthWeeks); + + var _ScrollableOrientationShape = __webpack_require__(9); + + var _ScrollableOrientationShape2 = _interopRequireDefault(_ScrollableOrientationShape); + + var _constants = __webpack_require__(10); + + 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 === "undefined" ? "undefined" : _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 === "undefined" ? "undefined" : _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 react/no-array-index-key: 0 */ + + var propTypes = (0, _airbnbPropTypes.forbidExtraProps)({ + month: _reactMomentProptypes2['default'].momentObj, + isVisible: _react.PropTypes.bool, + enableOutsideDays: _react.PropTypes.bool, + modifiers: _react.PropTypes.object, + orientation: _ScrollableOrientationShape2['default'], + onDayClick: _react.PropTypes.func, + onDayMouseEnter: _react.PropTypes.func, + onDayMouseLeave: _react.PropTypes.func, + renderDay: _react.PropTypes.func, + + // i18n + monthFormat: _react.PropTypes.string + }); + + var defaultProps = { + month: (0, _moment2['default'])(), + isVisible: true, + enableOutsideDays: false, + modifiers: {}, + orientation: _constants.HORIZONTAL_ORIENTATION, + onDayClick: function () { + function onDayClick() {} + + return onDayClick; + }(), + onDayMouseEnter: function () { + function onDayMouseEnter() {} + + return onDayMouseEnter; + }(), + onDayMouseLeave: function () { + function onDayMouseLeave() {} + + return onDayMouseLeave; + }(), + + renderDay: null, + + // i18n + monthFormat: 'MMMM YYYY' }; + + var CalendarMonth = function (_React$Component) { + _inherits(CalendarMonth, _React$Component); + + function CalendarMonth(props) { + _classCallCheck(this, CalendarMonth); + + var _this = _possibleConstructorReturn(this, (CalendarMonth.__proto__ || Object.getPrototypeOf(CalendarMonth)).call(this, props)); + + _this.state = { + weeks: (0, _getCalendarMonthWeeks2['default'])(props.month, props.enableOutsideDays) + }; + return _this; + } + + _createClass(CalendarMonth, [{ + key: 'componentWillReceiveProps', + value: function () { + function componentWillReceiveProps(nextProps) { + var month = nextProps.month; + var enableOutsideDays = nextProps.enableOutsideDays; + + if (!month.isSame(this.props.month)) { + this.setState({ + weeks: (0, _getCalendarMonthWeeks2['default'])(month, enableOutsideDays) + }); + } + } + + return componentWillReceiveProps; + }() + }, { + key: 'shouldComponentUpdate', + value: function () { + function shouldComponentUpdate(nextProps, nextState) { + return (0, _reactAddonsShallowCompare2['default'])(this, nextProps, nextState); + } + + return shouldComponentUpdate; + }() + }, { + key: 'render', + value: function () { + function render() { + var _props = this.props; + var month = _props.month; + var monthFormat = _props.monthFormat; + var orientation = _props.orientation; + var isVisible = _props.isVisible; + var modifiers = _props.modifiers; + var onDayClick = _props.onDayClick; + var onDayMouseEnter = _props.onDayMouseEnter; + var onDayMouseLeave = _props.onDayMouseLeave; + var renderDay = _props.renderDay; + var weeks = this.state.weeks; + + var monthTitle = month.format(monthFormat); + + var calendarMonthClasses = (0, _classnames2['default'])('CalendarMonth', { + 'CalendarMonth--horizontal': orientation === _constants.HORIZONTAL_ORIENTATION, + 'CalendarMonth--vertical': orientation === _constants.VERTICAL_ORIENTATION, + 'CalendarMonth--vertical-scrollable': orientation === _constants.VERTICAL_SCROLLABLE + }); + + return _react2['default'].createElement('div', { className: calendarMonthClasses, 'data-visible': isVisible }, _react2['default'].createElement('table', null, _react2['default'].createElement('caption', { className: 'CalendarMonth__caption js-CalendarMonth__caption' }, _react2['default'].createElement('strong', null, monthTitle)), _react2['default'].createElement('tbody', { className: 'js-CalendarMonth__grid' }, weeks.map(function (week, i) { + return _react2['default'].createElement('tr', { key: i }, week.map(function (day, dayOfWeek) { + return _react2['default'].createElement(_CalendarDay2['default'], { + day: day, + isOutsideDay: !day || day.month() !== month.month(), + modifiers: modifiers, + key: dayOfWeek, + onDayMouseEnter: onDayMouseEnter, + onDayMouseLeave: onDayMouseLeave, + onDayClick: onDayClick, + renderDay: renderDay + }); + })); + })))); + } + + return render; + }() + }]); + + return CalendarMonth; + }(_react2['default'].Component); + + exports['default'] = CalendarMonth; + + CalendarMonth.propTypes = propTypes; + CalendarMonth.defaultProps = defaultProps; + +/***/ }, +/* 1 */ +/***/ function(module, exports) { + + module.exports = require("react"); + +/***/ }, +/* 2 */ +/***/ function(module, exports) { + + module.exports = require("react-addons-shallow-compare"); + +/***/ }, +/* 3 */ +/***/ function(module, exports) { + + module.exports = require("react-moment-proptypes"); + +/***/ }, +/* 4 */ +/***/ function(module, exports) { + + module.exports = require("airbnb-prop-types"); + +/***/ }, +/* 5 */ +/***/ function(module, exports) { + + module.exports = require("moment"); + +/***/ }, +/* 6 */ +/***/ function(module, exports) { + + module.exports = require("classnames"); + +/***/ }, +/* 7 */ +/***/ function(module, exports) { + + module.exports = require("./CalendarDay"); + +/***/ }, +/* 8 */ +/***/ function(module, exports) { + + module.exports = require("../utils/getCalendarMonthWeeks"); + +/***/ }, +/* 9 */ +/***/ function(module, exports) { + + module.exports = require("../shapes/ScrollableOrientationShape"); + +/***/ }, +/* 10 */ +/***/ function(module, exports) { + + module.exports = require("../../constants"); + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/lib/components/CalendarMonthGrid.js b/lib/components/CalendarMonthGrid.js new file mode 100644 index 0000000000..7714b8a6a5 --- /dev/null +++ b/lib/components/CalendarMonthGrid.js @@ -0,0 +1,443 @@ +module.exports = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports, __webpack_require__) { + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + var _reactAddonsShallowCompare = __webpack_require__(2); + + var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare); + + var _reactMomentProptypes = __webpack_require__(3); + + var _reactMomentProptypes2 = _interopRequireDefault(_reactMomentProptypes); + + var _airbnbPropTypes = __webpack_require__(4); + + var _moment = __webpack_require__(5); + + var _moment2 = _interopRequireDefault(_moment); + + var _classnames = __webpack_require__(6); + + var _classnames2 = _interopRequireDefault(_classnames); + + var _consolidatedEvents = __webpack_require__(11); + + var _CalendarMonth = __webpack_require__(12); + + var _CalendarMonth2 = _interopRequireDefault(_CalendarMonth); + + var _isTransitionEndSupported = __webpack_require__(13); + + var _isTransitionEndSupported2 = _interopRequireDefault(_isTransitionEndSupported); + + var _getTransformStyles = __webpack_require__(14); + + var _getTransformStyles2 = _interopRequireDefault(_getTransformStyles); + + var _ScrollableOrientationShape = __webpack_require__(9); + + var _ScrollableOrientationShape2 = _interopRequireDefault(_ScrollableOrientationShape); + + var _constants = __webpack_require__(10); + + 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 === "undefined" ? "undefined" : _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 === "undefined" ? "undefined" : _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 propTypes = (0, _airbnbPropTypes.forbidExtraProps)({ + enableOutsideDays: _react.PropTypes.bool, + firstVisibleMonthIndex: _react.PropTypes.number, + initialMonth: _reactMomentProptypes2['default'].momentObj, + isAnimating: _react.PropTypes.bool, + numberOfMonths: _react.PropTypes.number, + modifiers: _react.PropTypes.object, + orientation: _ScrollableOrientationShape2['default'], + onDayClick: _react.PropTypes.func, + onDayMouseEnter: _react.PropTypes.func, + onDayMouseLeave: _react.PropTypes.func, + onMonthTransitionEnd: _react.PropTypes.func, + renderDay: _react.PropTypes.func, + transformValue: _react.PropTypes.string, + + // i18n + monthFormat: _react.PropTypes.string + }); + + var defaultProps = { + enableOutsideDays: false, + firstVisibleMonthIndex: 0, + initialMonth: (0, _moment2['default'])(), + isAnimating: false, + numberOfMonths: 1, + modifiers: {}, + orientation: _constants.HORIZONTAL_ORIENTATION, + onDayClick: function () { + function onDayClick() {} + + return onDayClick; + }(), + onDayMouseEnter: function () { + function onDayMouseEnter() {} + + return onDayMouseEnter; + }(), + onDayMouseLeave: function () { + function onDayMouseLeave() {} + + return onDayMouseLeave; + }(), + onMonthTransitionEnd: function () { + function onMonthTransitionEnd() {} + + return onMonthTransitionEnd; + }(), + + renderDay: null, + transformValue: 'none', + + // i18n + monthFormat: 'MMMM YYYY' }; + + function getMonths(initialMonth, numberOfMonths) { + var month = initialMonth.clone().subtract(1, 'month'); + + var months = []; + for (var i = 0; i < numberOfMonths + 2; i += 1) { + months.push(month); + month = month.clone().add(1, 'month'); + } + + return months; + } + + var CalendarMonthGrid = function (_React$Component) { + _inherits(CalendarMonthGrid, _React$Component); + + function CalendarMonthGrid(props) { + _classCallCheck(this, CalendarMonthGrid); + + var _this = _possibleConstructorReturn(this, (CalendarMonthGrid.__proto__ || Object.getPrototypeOf(CalendarMonthGrid)).call(this, props)); + + _this.state = { + months: getMonths(props.initialMonth, props.numberOfMonths) + }; + + _this.isTransitionEndSupported = (0, _isTransitionEndSupported2['default'])(); + _this.onTransitionEnd = _this.onTransitionEnd.bind(_this); + return _this; + } + + _createClass(CalendarMonthGrid, [{ + key: 'componentDidMount', + value: function () { + function componentDidMount() { + this.eventHandle = (0, _consolidatedEvents.addEventListener)(this.container, 'transitionend', this.onTransitionEnd); + } + + return componentDidMount; + }() + }, { + key: 'componentWillReceiveProps', + value: function () { + function componentWillReceiveProps(nextProps) { + var initialMonth = nextProps.initialMonth; + var numberOfMonths = nextProps.numberOfMonths; + var months = this.state.months; + + var hasMonthChanged = !this.props.initialMonth.isSame(initialMonth, 'month'); + var hasNumberOfMonthsChanged = this.props.numberOfMonths !== numberOfMonths; + var newMonths = months; + + if (hasMonthChanged && !hasNumberOfMonthsChanged) { + if (initialMonth.isAfter(this.props.initialMonth)) { + newMonths = months.slice(1); + newMonths.push(months[months.length - 1].clone().add(1, 'month')); + } else { + newMonths = months.slice(0, months.length - 1); + newMonths.unshift(months[0].clone().subtract(1, 'month')); + } + } + + if (hasNumberOfMonthsChanged) { + newMonths = getMonths(initialMonth, numberOfMonths); + } + + this.setState({ + months: newMonths + }); + } + + return componentWillReceiveProps; + }() + }, { + key: 'shouldComponentUpdate', + value: function () { + function shouldComponentUpdate(nextProps, nextState) { + return (0, _reactAddonsShallowCompare2['default'])(this, nextProps, nextState); + } + + return shouldComponentUpdate; + }() + }, { + key: 'componentDidUpdate', + value: function () { + function componentDidUpdate() { + var _props = this.props; + var isAnimating = _props.isAnimating; + var onMonthTransitionEnd = _props.onMonthTransitionEnd; + + // For IE9, immediately call onMonthTransitionEnd instead of + // waiting for the animation to complete + + if (!this.isTransitionEndSupported && isAnimating) { + onMonthTransitionEnd(); + } + } + + return componentDidUpdate; + }() + }, { + key: 'componentWillUnmount', + value: function () { + function componentWillUnmount() { + (0, _consolidatedEvents.removeEventListener)(this.eventHandle); + } + + return componentWillUnmount; + }() + }, { + key: 'onTransitionEnd', + value: function () { + function onTransitionEnd() { + this.props.onMonthTransitionEnd(); + } + + return onTransitionEnd; + }() + }, { + key: 'render', + value: function () { + function render() { + var _this2 = this; + + var _props2 = this.props; + var enableOutsideDays = _props2.enableOutsideDays; + var firstVisibleMonthIndex = _props2.firstVisibleMonthIndex; + var isAnimating = _props2.isAnimating; + var modifiers = _props2.modifiers; + var numberOfMonths = _props2.numberOfMonths; + var monthFormat = _props2.monthFormat; + var orientation = _props2.orientation; + var transformValue = _props2.transformValue; + var onDayMouseEnter = _props2.onDayMouseEnter; + var onDayMouseLeave = _props2.onDayMouseLeave; + var onDayClick = _props2.onDayClick; + var renderDay = _props2.renderDay; + var onMonthTransitionEnd = _props2.onMonthTransitionEnd; + var months = this.state.months; + + var className = (0, _classnames2['default'])('CalendarMonthGrid', { + 'CalendarMonthGrid--horizontal': orientation === _constants.HORIZONTAL_ORIENTATION, + 'CalendarMonthGrid--vertical': orientation === _constants.VERTICAL_ORIENTATION, + 'CalendarMonthGrid--vertical-scrollable': orientation === _constants.VERTICAL_SCROLLABLE, + 'CalendarMonthGrid--animating': isAnimating + }); + + return _react2['default'].createElement('div', { + ref: function () { + function ref(_ref) { + _this2.container = _ref; + } + + return ref; + }(), + className: className, + style: (0, _getTransformStyles2['default'])(transformValue), + onTransitionEnd: onMonthTransitionEnd + }, months.map(function (month, i) { + var isVisible = i >= firstVisibleMonthIndex && i < firstVisibleMonthIndex + numberOfMonths; + return _react2['default'].createElement(_CalendarMonth2['default'], { + key: month.format('YYYY-MM'), + month: month, + isVisible: isVisible, + enableOutsideDays: enableOutsideDays, + modifiers: modifiers, + monthFormat: monthFormat, + orientation: orientation, + onDayMouseEnter: onDayMouseEnter, + onDayMouseLeave: onDayMouseLeave, + onDayClick: onDayClick, + renderDay: renderDay + }); + })); + } + + return render; + }() + }]); + + return CalendarMonthGrid; + }(_react2['default'].Component); + + exports['default'] = CalendarMonthGrid; + + CalendarMonthGrid.propTypes = propTypes; + CalendarMonthGrid.defaultProps = defaultProps; + +/***/ }, +/* 1 */ +/***/ function(module, exports) { + + module.exports = require("react"); + +/***/ }, +/* 2 */ +/***/ function(module, exports) { + + module.exports = require("react-addons-shallow-compare"); + +/***/ }, +/* 3 */ +/***/ function(module, exports) { + + module.exports = require("react-moment-proptypes"); + +/***/ }, +/* 4 */ +/***/ function(module, exports) { + + module.exports = require("airbnb-prop-types"); + +/***/ }, +/* 5 */ +/***/ function(module, exports) { + + module.exports = require("moment"); + +/***/ }, +/* 6 */ +/***/ function(module, exports) { + + module.exports = require("classnames"); + +/***/ }, +/* 7 */, +/* 8 */, +/* 9 */ +/***/ function(module, exports) { + + module.exports = require("../shapes/ScrollableOrientationShape"); + +/***/ }, +/* 10 */ +/***/ function(module, exports) { + + module.exports = require("../../constants"); + +/***/ }, +/* 11 */ +/***/ function(module, exports) { + + module.exports = require("consolidated-events"); + +/***/ }, +/* 12 */ +/***/ function(module, exports) { + + module.exports = require("./CalendarMonth"); + +/***/ }, +/* 13 */ +/***/ function(module, exports) { + + module.exports = require("../utils/isTransitionEndSupported"); + +/***/ }, +/* 14 */ +/***/ function(module, exports) { + + module.exports = require("../utils/getTransformStyles"); + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/lib/components/DateInput.js b/lib/components/DateInput.js new file mode 100644 index 0000000000..c68295f85e --- /dev/null +++ b/lib/components/DateInput.js @@ -0,0 +1,355 @@ +module.exports = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ({ + +/***/ 0: +/***/ function(module, exports, __webpack_require__) { + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + var _airbnbPropTypes = __webpack_require__(4); + + var _classnames = __webpack_require__(6); + + var _classnames2 = _interopRequireDefault(_classnames); + + var _isTouchDevice = __webpack_require__(15); + + var _isTouchDevice2 = _interopRequireDefault(_isTouchDevice); + + 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 === "undefined" ? "undefined" : _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 === "undefined" ? "undefined" : _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 propTypes = (0, _airbnbPropTypes.forbidExtraProps)({ + id: _react.PropTypes.string.isRequired, + placeholder: _react.PropTypes.string, // also used as label + displayValue: _react.PropTypes.string, + inputValue: _react.PropTypes.string, + screenReaderMessage: _react.PropTypes.string, + focused: _react.PropTypes.bool, + disabled: _react.PropTypes.bool, + required: _react.PropTypes.bool, + showCaret: _react.PropTypes.bool, + + onChange: _react.PropTypes.func, + onFocus: _react.PropTypes.func, + onKeyDownShiftTab: _react.PropTypes.func, + onKeyDownTab: _react.PropTypes.func + }); + + var defaultProps = { + placeholder: 'Select Date', + displayValue: '', + inputValue: '', + screenReaderMessage: '', + focused: false, + disabled: false, + required: false, + showCaret: false, + + onChange: function () { + function onChange() {} + + return onChange; + }(), + onFocus: function () { + function onFocus() {} + + return onFocus; + }(), + onKeyDownShiftTab: function () { + function onKeyDownShiftTab() {} + + return onKeyDownShiftTab; + }(), + onKeyDownTab: function () { + function onKeyDownTab() {} + + return onKeyDownTab; + }() + }; + + var DateInput = function (_React$Component) { + _inherits(DateInput, _React$Component); + + function DateInput(props) { + _classCallCheck(this, DateInput); + + var _this = _possibleConstructorReturn(this, (DateInput.__proto__ || Object.getPrototypeOf(DateInput)).call(this, props)); + + _this.state = { + dateString: '', + isTouchDevice: false + }; + + _this.onChange = _this.onChange.bind(_this); + _this.onKeyDown = _this.onKeyDown.bind(_this); + _this.dateFormat = _this.dateFormat.bind(_this); + return _this; + } + + _createClass(DateInput, [{ + key: 'componentDidMount', + value: function () { + function componentDidMount() { + this.setState({ isTouchDevice: (0, _isTouchDevice2['default'])() }); + } + + return componentDidMount; + }() + }, { + key: 'componentWillReceiveProps', + value: function () { + function componentWillReceiveProps(nextProps) { + if (!this.props.displayValue && nextProps.displayValue) { + this.setState({ + dateString: '' + }); + } + } + + return componentWillReceiveProps; + }() + }, { + key: 'componentDidUpdate', + value: function () { + function componentDidUpdate(prevProps) { + var focused = this.props.focused; + + if (prevProps.focused === focused) return; + + if (focused) { + this.inputRef.focus(); + this.inputRef.select(); + } else { + this.inputRef.blur(); + } + } + + return componentDidUpdate; + }() + }, { + key: 'dateFormat', + value: function () { + function dateFormat(el) { + value = el.replace(/^([\d]{4})([\d]{2})([\d]{2})$/, "$3.$2.$1"); + return value; + } + + return dateFormat; + }() + }, { + key: 'onChange', + value: function () { + function onChange(e) { + var dateString = e.target.value; + this.setState({ dateString: dateString }); + this.props.onChange(dateString); + } + + return onChange; + }() + }, { + key: 'onKeyDown', + value: function () { + function onKeyDown(e) { + var _props = this.props; + var onKeyDownShiftTab = _props.onKeyDownShiftTab; + var onKeyDownTab = _props.onKeyDownTab; + + if (e.key === 'Tab') { + // if (this.state.dateString) { + // this.props.onChange(this.state.dateString); + // } + if (e.shiftKey) { + onKeyDownShiftTab(e); + } else { + onKeyDownTab(e); + } + } + } + + return onKeyDown; + }() + }, { + key: 'render', + value: function () { + function render() { + var _this2 = this; + + var _state = this.state; + var dateString = _state.dateString; + var isTouch = _state.isTouchDevice; + var _props2 = this.props; + var id = _props2.id; + var placeholder = _props2.placeholder; + var displayValue = _props2.displayValue; + var inputValue = _props2.inputValue; + var screenReaderMessage = _props2.screenReaderMessage; + var focused = _props2.focused; + var showCaret = _props2.showCaret; + var onFocus = _props2.onFocus; + var disabled = _props2.disabled; + var required = _props2.required; + + var displayText = displayValue || inputValue || dateString || placeholder || ''; + var value = inputValue || displayValue || dateString || ''; + var screenReaderMessageId = 'DateInput__screen-reader-message-' + String(id); + return _react2['default'].createElement('div', { + className: (0, _classnames2['default'])('DateInput', { + 'DateInput--with-caret': showCaret && focused, + 'DateInput--disabled': disabled + }) + }, _react2['default'].createElement('input', { + 'aria-label': placeholder, + className: 'DateInput__input needsclick', + type: 'text', + id: id, + name: id, + ref: function () { + function ref(_ref) { + _this2.inputRef = _ref; + } + + return ref; + }(), + value: value, + onChange: this.onChange, + onKeyDown: this.onKeyDown, + onFocus: onFocus, + placeholder: placeholder, + autoComplete: 'off', + disabled: disabled, + readOnly: isTouch, + required: required, + 'aria-describedby': screenReaderMessage && screenReaderMessageId + }), screenReaderMessage && _react2['default'].createElement('p', { id: screenReaderMessageId, className: 'screen-reader-only' }, screenReaderMessage), _react2['default'].createElement('div', { + className: (0, _classnames2['default'])('DateInput__display-text', { + 'DateInput__display-text--has-input': !!value, + 'DateInput__display-text--focused': focused, + 'DateInput__display-text--disabled': disabled + }) + }, displayText)); + } + + return render; + }() + }]); + + return DateInput; + }(_react2['default'].Component); + + exports['default'] = DateInput; + + DateInput.propTypes = propTypes; + DateInput.defaultProps = defaultProps; + +/***/ }, + +/***/ 1: +/***/ function(module, exports) { + + module.exports = require("react"); + +/***/ }, + +/***/ 4: +/***/ function(module, exports) { + + module.exports = require("airbnb-prop-types"); + +/***/ }, + +/***/ 6: +/***/ function(module, exports) { + + module.exports = require("classnames"); + +/***/ }, + +/***/ 15: +/***/ function(module, exports) { + + module.exports = require("../utils/isTouchDevice"); + +/***/ } + +/******/ }); \ No newline at end of file diff --git a/lib/components/DateRangePicker.js b/lib/components/DateRangePicker.js new file mode 100644 index 0000000000..c1e2e2ae37 --- /dev/null +++ b/lib/components/DateRangePicker.js @@ -0,0 +1,718 @@ +module.exports = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports, __webpack_require__) { + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + var _reactDom = __webpack_require__(16); + + var _reactDom2 = _interopRequireDefault(_reactDom); + + var _reactAddonsShallowCompare = __webpack_require__(2); + + var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare); + + var _moment = __webpack_require__(5); + + var _moment2 = _interopRequireDefault(_moment); + + var _classnames = __webpack_require__(6); + + var _classnames2 = _interopRequireDefault(_classnames); + + var _reactPortal = __webpack_require__(17); + + var _reactPortal2 = _interopRequireDefault(_reactPortal); + + var _airbnbPropTypes = __webpack_require__(4); + + var _consolidatedEvents = __webpack_require__(11); + + var _defaultPhrases = __webpack_require__(18); + + var _OutsideClickHandler = __webpack_require__(19); + + var _OutsideClickHandler2 = _interopRequireDefault(_OutsideClickHandler); + + var _getResponsiveContainerStyles = __webpack_require__(20); + + var _getResponsiveContainerStyles2 = _interopRequireDefault(_getResponsiveContainerStyles); + + var _isInclusivelyAfterDay = __webpack_require__(21); + + var _isInclusivelyAfterDay2 = _interopRequireDefault(_isInclusivelyAfterDay); + + var _DateRangePickerInputController = __webpack_require__(22); + + var _DateRangePickerInputController2 = _interopRequireDefault(_DateRangePickerInputController); + + var _DayPickerRangeController = __webpack_require__(23); + + var _DayPickerRangeController2 = _interopRequireDefault(_DayPickerRangeController); + + var _close = __webpack_require__(24); + + var _close2 = _interopRequireDefault(_close); + + var _DateRangePickerShape = __webpack_require__(25); + + var _DateRangePickerShape2 = _interopRequireDefault(_DateRangePickerShape); + + var _constants = __webpack_require__(10); + + 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 === "undefined" ? "undefined" : _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 === "undefined" ? "undefined" : _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 propTypes = (0, _airbnbPropTypes.forbidExtraProps)(_DateRangePickerShape2['default']); + + var defaultProps = { + // required props for a functional interactive DateRangePicker + startDate: null, + endDate: null, + focusedInput: null, + + // input related props + startDateId: _constants.START_DATE, + startDatePlaceholderText: 'Start Date', + endDateId: _constants.END_DATE, + endDatePlaceholderText: 'End Date', + disabled: false, + required: false, + screenReaderInputMessage: '', + showClearDates: false, + showDefaultInputIcon: false, + customInputIcon: null, + customArrowIcon: null, + customCloseIcon: null, + + // calendar presentation and interaction related props + orientation: _constants.HORIZONTAL_ORIENTATION, + anchorDirection: _constants.ANCHOR_LEFT, + horizontalMargin: 0, + withPortal: false, + withFullScreenPortal: false, + initialVisibleMonth: null, + numberOfMonths: 2, + keepOpenOnDateSelect: false, + reopenPickerOnClearDates: false, + renderCalendarInfo: null, + + // navigation related props + navPrev: null, + navNext: null, + onPrevMonthClick: function () { + function onPrevMonthClick() {} + + return onPrevMonthClick; + }(), + onNextMonthClick: function () { + function onNextMonthClick() {} + + return onNextMonthClick; + }(), + + // day presentation and interaction related props + renderDay: null, + minimumNights: 1, + enableOutsideDays: false, + isDayBlocked: function () { + function isDayBlocked() { + return false; + } + + return isDayBlocked; + }(), + isOutsideRange: function () { + function isOutsideRange(day) { + return !(0, _isInclusivelyAfterDay2['default'])(day, (0, _moment2['default'])()); + } + + return isOutsideRange; + }(), + isDayHighlighted: function () { + function isDayHighlighted() { + return false; + } + + return isDayHighlighted; + }(), + + // internationalization + displayFormat: function () { + function displayFormat() { + return _moment2['default'].localeData().longDateFormat('L'); + } + + return displayFormat; + }(), + monthFormat: 'MMMM YYYY', + phrases: _defaultPhrases.DateRangePickerPhrases + }; + + var DateRangePicker = function (_React$Component) { + _inherits(DateRangePicker, _React$Component); + + function DateRangePicker(props) { + _classCallCheck(this, DateRangePicker); + + var _this = _possibleConstructorReturn(this, (DateRangePicker.__proto__ || Object.getPrototypeOf(DateRangePicker)).call(this, props)); + + _this.state = { + dayPickerContainerStyles: {} + }; + + _this.onOutsideClick = _this.onOutsideClick.bind(_this); + + _this.responsivizePickerPosition = _this.responsivizePickerPosition.bind(_this); + return _this; + } + + _createClass(DateRangePicker, [{ + key: 'componentDidMount', + value: function () { + function componentDidMount() { + this.resizeHandle = (0, _consolidatedEvents.addEventListener)(window, 'resize', this.responsivizePickerPosition, { passive: true }); + this.responsivizePickerPosition(); + } + + return componentDidMount; + }() + }, { + key: 'shouldComponentUpdate', + value: function () { + function shouldComponentUpdate(nextProps, nextState) { + return (0, _reactAddonsShallowCompare2['default'])(this, nextProps, nextState); + } + + return shouldComponentUpdate; + }() + }, { + key: 'componentDidUpdate', + value: function () { + function componentDidUpdate(prevProps) { + if (!prevProps.focusedInput && this.props.focusedInput && this.isOpened()) { + // The date picker just changed from being closed to being open. + this.responsivizePickerPosition(); + } + } + + return componentDidUpdate; + }() + }, { + key: 'componentWillUnmount', + value: function () { + function componentWillUnmount() { + (0, _consolidatedEvents.removeEventListener)(this.resizeHandle); + } + + return componentWillUnmount; + }() + }, { + key: 'onOutsideClick', + value: function () { + function onOutsideClick() { + var onFocusChange = this.props.onFocusChange; + + if (!this.isOpened()) return; + + onFocusChange(null); + } + + return onOutsideClick; + }() + }, { + key: 'getDayPickerContainerClasses', + value: function () { + function getDayPickerContainerClasses() { + var _props = this.props; + var orientation = _props.orientation; + var withPortal = _props.withPortal; + var withFullScreenPortal = _props.withFullScreenPortal; + var anchorDirection = _props.anchorDirection; + + var dayPickerClassName = (0, _classnames2['default'])('DateRangePicker__picker', { + 'DateRangePicker__picker--direction-left': anchorDirection === _constants.ANCHOR_LEFT, + 'DateRangePicker__picker--direction-right': anchorDirection === _constants.ANCHOR_RIGHT, + 'DateRangePicker__picker--horizontal': orientation === _constants.HORIZONTAL_ORIENTATION, + 'DateRangePicker__picker--vertical': orientation === _constants.VERTICAL_ORIENTATION, + 'DateRangePicker__picker--portal': withPortal || withFullScreenPortal, + 'DateRangePicker__picker--full-screen-portal': withFullScreenPortal + }); + + return dayPickerClassName; + } + + return getDayPickerContainerClasses; + }() + }, { + key: 'getDayPickerDOMNode', + value: function () { + function getDayPickerDOMNode() { + return _reactDom2['default'].findDOMNode(this.dayPicker); // eslint-disable-line react/no-find-dom-node + } + + return getDayPickerDOMNode; + }() + }, { + key: 'isOpened', + value: function () { + function isOpened() { + var focusedInput = this.props.focusedInput; + + return focusedInput === _constants.START_DATE || focusedInput === _constants.END_DATE; + } + + return isOpened; + }() + }, { + key: 'responsivizePickerPosition', + value: function () { + function responsivizePickerPosition() { + if (!this.isOpened()) { + return; + } + + var _props2 = this.props; + var anchorDirection = _props2.anchorDirection; + var horizontalMargin = _props2.horizontalMargin; + var withPortal = _props2.withPortal; + var withFullScreenPortal = _props2.withFullScreenPortal; + var dayPickerContainerStyles = this.state.dayPickerContainerStyles; + + var isAnchoredLeft = anchorDirection === _constants.ANCHOR_LEFT; + if (!withPortal && !withFullScreenPortal) { + var containerRect = this.dayPickerContainer.getBoundingClientRect(); + var currentOffset = dayPickerContainerStyles[anchorDirection] || 0; + var containerEdge = isAnchoredLeft ? containerRect[_constants.ANCHOR_RIGHT] : containerRect[_constants.ANCHOR_LEFT]; + + this.setState({ + dayPickerContainerStyles: (0, _getResponsiveContainerStyles2['default'])(anchorDirection, currentOffset, containerEdge, horizontalMargin) + }); + } + } + + return responsivizePickerPosition; + }() + }, { + key: 'maybeRenderDayPickerWithPortal', + value: function () { + function maybeRenderDayPickerWithPortal() { + var _props3 = this.props; + var withPortal = _props3.withPortal; + var withFullScreenPortal = _props3.withFullScreenPortal; + + if (!this.isOpened()) { + return null; + } + + if (withPortal || withFullScreenPortal) { + return _react2['default'].createElement(_reactPortal2['default'], { isOpened: true }, this.renderDayPicker()); + } + + return this.renderDayPicker(); + } + + return maybeRenderDayPickerWithPortal; + }() + }, { + key: 'renderDayPicker', + value: function () { + function renderDayPicker() { + var _this2 = this; + + var _props4 = this.props; + var isDayBlocked = _props4.isDayBlocked; + var isDayHighlighted = _props4.isDayHighlighted; + var isOutsideRange = _props4.isOutsideRange; + var numberOfMonths = _props4.numberOfMonths; + var orientation = _props4.orientation; + var monthFormat = _props4.monthFormat; + var navPrev = _props4.navPrev; + var navNext = _props4.navNext; + var onPrevMonthClick = _props4.onPrevMonthClick; + var onNextMonthClick = _props4.onNextMonthClick; + var onDatesChange = _props4.onDatesChange; + var onFocusChange = _props4.onFocusChange; + var withPortal = _props4.withPortal; + var withFullScreenPortal = _props4.withFullScreenPortal; + var enableOutsideDays = _props4.enableOutsideDays; + var focusedInput = _props4.focusedInput; + var startDate = _props4.startDate; + var endDate = _props4.endDate; + var minimumNights = _props4.minimumNights; + var keepOpenOnDateSelect = _props4.keepOpenOnDateSelect; + var renderDay = _props4.renderDay; + var renderCalendarInfo = _props4.renderCalendarInfo; + var initialVisibleMonth = _props4.initialVisibleMonth; + var customCloseIcon = _props4.customCloseIcon; + var dayPickerContainerStyles = this.state.dayPickerContainerStyles; + + var onOutsideClick = !withFullScreenPortal && withPortal ? this.onOutsideClick : undefined; + var initialVisibleMonthThunk = initialVisibleMonth || function () { + return startDate || endDate || (0, _moment2['default'])(); + }; + + var closeIcon = customCloseIcon || _react2['default'].createElement(_close2['default'], null); + + return _react2['default'].createElement('div', { + ref: function () { + function ref(_ref2) { + _this2.dayPickerContainer = _ref2; + } + + return ref; + }(), + className: this.getDayPickerContainerClasses(), + style: dayPickerContainerStyles + }, _react2['default'].createElement(_DayPickerRangeController2['default'], { + ref: function () { + function ref(_ref) { + _this2.dayPicker = _ref; + } + + return ref; + }(), + orientation: orientation, + enableOutsideDays: enableOutsideDays, + numberOfMonths: numberOfMonths, + onPrevMonthClick: onPrevMonthClick, + onNextMonthClick: onNextMonthClick, + onDatesChange: onDatesChange, + onFocusChange: onFocusChange, + focusedInput: focusedInput, + startDate: startDate, + endDate: endDate, + monthFormat: monthFormat, + withPortal: withPortal || withFullScreenPortal, + initialVisibleMonth: initialVisibleMonthThunk, + onOutsideClick: onOutsideClick, + navPrev: navPrev, + navNext: navNext, + minimumNights: minimumNights, + isOutsideRange: isOutsideRange, + isDayHighlighted: isDayHighlighted, + isDayBlocked: isDayBlocked, + keepOpenOnDateSelect: keepOpenOnDateSelect, + renderDay: renderDay, + renderCalendarInfo: renderCalendarInfo + }), withFullScreenPortal && _react2['default'].createElement('button', { + className: 'DateRangePicker__close', + type: 'button', + onClick: this.onOutsideClick + }, _react2['default'].createElement('span', { className: 'screen-reader-only' }, this.props.phrases.closeDatePicker), _react2['default'].createElement('div', { className: 'DateRangePicker__close' }, closeIcon))); + } + + return renderDayPicker; + }() + }, { + key: 'render', + value: function () { + function render() { + var _props5 = this.props; + var startDate = _props5.startDate; + var startDateId = _props5.startDateId; + var startDatePlaceholderText = _props5.startDatePlaceholderText; + var endDate = _props5.endDate; + var endDateId = _props5.endDateId; + var endDatePlaceholderText = _props5.endDatePlaceholderText; + var focusedInput = _props5.focusedInput; + var screenReaderInputMessage = _props5.screenReaderInputMessage; + var showClearDates = _props5.showClearDates; + var showDefaultInputIcon = _props5.showDefaultInputIcon; + var customInputIcon = _props5.customInputIcon; + var customArrowIcon = _props5.customArrowIcon; + var customCloseIcon = _props5.customCloseIcon; + var disabled = _props5.disabled; + var required = _props5.required; + var phrases = _props5.phrases; + var isOutsideRange = _props5.isOutsideRange; + var withPortal = _props5.withPortal; + var withFullScreenPortal = _props5.withFullScreenPortal; + var displayFormat = _props5.displayFormat; + var reopenPickerOnClearDates = _props5.reopenPickerOnClearDates; + var keepOpenOnDateSelect = _props5.keepOpenOnDateSelect; + var onDatesChange = _props5.onDatesChange; + var onFocusChange = _props5.onFocusChange; + + var onOutsideClick = !withPortal && !withFullScreenPortal ? this.onOutsideClick : undefined; + + return _react2['default'].createElement('div', { className: 'DateRangePicker' }, _react2['default'].createElement(_OutsideClickHandler2['default'], { onOutsideClick: onOutsideClick }, _react2['default'].createElement(_DateRangePickerInputController2['default'], { + startDate: startDate, + startDateId: startDateId, + startDatePlaceholderText: startDatePlaceholderText, + isStartDateFocused: focusedInput === _constants.START_DATE, + endDate: endDate, + endDateId: endDateId, + endDatePlaceholderText: endDatePlaceholderText, + isEndDateFocused: focusedInput === _constants.END_DATE, + displayFormat: displayFormat, + showClearDates: showClearDates, + showCaret: !withPortal && !withFullScreenPortal, + showDefaultInputIcon: showDefaultInputIcon, + customInputIcon: customInputIcon, + customArrowIcon: customArrowIcon, + customCloseIcon: customCloseIcon, + disabled: disabled, + required: required, + reopenPickerOnClearDates: reopenPickerOnClearDates, + keepOpenOnDateSelect: keepOpenOnDateSelect, + isOutsideRange: isOutsideRange, + withFullScreenPortal: withFullScreenPortal, + onDatesChange: onDatesChange, + onFocusChange: onFocusChange, + phrases: phrases, + screenReaderMessage: screenReaderInputMessage + }), this.maybeRenderDayPickerWithPortal())); + } + + return render; + }() + }]); + + return DateRangePicker; + }(_react2['default'].Component); + + exports['default'] = DateRangePicker; + + DateRangePicker.propTypes = propTypes; + DateRangePicker.defaultProps = defaultProps; + +/***/ }, +/* 1 */ +/***/ function(module, exports) { + + module.exports = require("react"); + +/***/ }, +/* 2 */ +/***/ function(module, exports) { + + module.exports = require("react-addons-shallow-compare"); + +/***/ }, +/* 3 */, +/* 4 */ +/***/ function(module, exports) { + + module.exports = require("airbnb-prop-types"); + +/***/ }, +/* 5 */ +/***/ function(module, exports) { + + module.exports = require("moment"); + +/***/ }, +/* 6 */ +/***/ function(module, exports) { + + module.exports = require("classnames"); + +/***/ }, +/* 7 */, +/* 8 */, +/* 9 */, +/* 10 */ +/***/ function(module, exports) { + + module.exports = require("../../constants"); + +/***/ }, +/* 11 */ +/***/ function(module, exports) { + + module.exports = require("consolidated-events"); + +/***/ }, +/* 12 */, +/* 13 */, +/* 14 */, +/* 15 */, +/* 16 */ +/***/ function(module, exports) { + + module.exports = require("react-dom"); + +/***/ }, +/* 17 */ +/***/ function(module, exports) { + + module.exports = require("react-portal"); + +/***/ }, +/* 18 */ +/***/ function(module, exports) { + + module.exports = require("../defaultPhrases"); + +/***/ }, +/* 19 */ +/***/ function(module, exports) { + + module.exports = require("./OutsideClickHandler"); + +/***/ }, +/* 20 */ +/***/ function(module, exports) { + + module.exports = require("../utils/getResponsiveContainerStyles"); + +/***/ }, +/* 21 */ +/***/ function(module, exports) { + + module.exports = require("../utils/isInclusivelyAfterDay"); + +/***/ }, +/* 22 */ +/***/ function(module, exports) { + + module.exports = require("./DateRangePickerInputController"); + +/***/ }, +/* 23 */ +/***/ function(module, exports) { + + module.exports = require("./DayPickerRangeController"); + +/***/ }, +/* 24 */ +/***/ function(module, exports, __webpack_require__) { + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + 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 SVG = function (_React$Component) { + _inherits(SVG, _React$Component); + + function SVG() { + _classCallCheck(this, SVG); + + return _possibleConstructorReturn(this, (SVG.__proto__ || Object.getPrototypeOf(SVG)).apply(this, arguments)); + } + + _createClass(SVG, [{ + key: "render", + value: function () { + function render() { + return _react2["default"].createElement( + "svg", + _extends({ viewBox: "0 0 12 12" }, this.props), + _react2["default"].createElement("path", { fillRule: "evenodd", d: "M11.53.47a.75.75 0 0 0-1.061 0l-4.47 4.47L1.529.47A.75.75 0 1 0 .468 1.531l4.47 4.47-4.47 4.47a.75.75 0 1 0 1.061 1.061l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.061-1.061l-4.47-4.47 4.47-4.47a.75.75 0 0 0 0-1.061z" }) + ); + } + + return render; + }() + }]); + + return SVG; + }(_react2["default"].Component); + + exports["default"] = SVG; + +/***/ }, +/* 25 */ +/***/ function(module, exports) { + + module.exports = require("../shapes/DateRangePickerShape"); + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/lib/components/DateRangePickerInput.js b/lib/components/DateRangePickerInput.js new file mode 100644 index 0000000000..545c3aae11 --- /dev/null +++ b/lib/components/DateRangePickerInput.js @@ -0,0 +1,577 @@ +module.exports = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports, __webpack_require__) { + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + var _airbnbPropTypes = __webpack_require__(4); + + var _classnames = __webpack_require__(6); + + var _classnames2 = _interopRequireDefault(_classnames); + + var _defaultPhrases = __webpack_require__(18); + + var _getPhrasePropTypes = __webpack_require__(26); + + var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes); + + var _DateInput = __webpack_require__(27); + + var _DateInput2 = _interopRequireDefault(_DateInput); + + var _arrowRight = __webpack_require__(28); + + var _arrowRight2 = _interopRequireDefault(_arrowRight); + + var _close = __webpack_require__(24); + + var _close2 = _interopRequireDefault(_close); + + var _calendar = __webpack_require__(29); + + var _calendar2 = _interopRequireDefault(_calendar); + + var _constants = __webpack_require__(10); + + 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 === "undefined" ? "undefined" : _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 === "undefined" ? "undefined" : _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 propTypes = (0, _airbnbPropTypes.forbidExtraProps)({ + startDateId: _react.PropTypes.string, + startDatePlaceholderText: _react.PropTypes.string, + screenReaderMessage: _react.PropTypes.string, + + endDateId: _react.PropTypes.string, + endDatePlaceholderText: _react.PropTypes.string, + + onStartDateFocus: _react.PropTypes.func, + onEndDateFocus: _react.PropTypes.func, + onStartDateChange: _react.PropTypes.func, + onEndDateChange: _react.PropTypes.func, + onStartDateShiftTab: _react.PropTypes.func, + onEndDateTab: _react.PropTypes.func, + onClearDates: _react.PropTypes.func, + + startDate: _react.PropTypes.string, + startDateValue: _react.PropTypes.string, + endDate: _react.PropTypes.string, + endDateValue: _react.PropTypes.string, + + isStartDateFocused: _react.PropTypes.bool, + isEndDateFocused: _react.PropTypes.bool, + showClearDates: _react.PropTypes.bool, + disabled: _react.PropTypes.bool, + required: _react.PropTypes.bool, + showCaret: _react.PropTypes.bool, + showDefaultInputIcon: _react.PropTypes.bool, + customInputIcon: _react.PropTypes.node, + customArrowIcon: _react.PropTypes.node, + customCloseIcon: _react.PropTypes.node, + + // i18n + phrases: _react.PropTypes.shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.DateRangePickerInputPhrases)) + }); + + var defaultProps = { + startDateId: _constants.START_DATE, + endDateId: _constants.END_DATE, + startDatePlaceholderText: 'Start Date', + endDatePlaceholderText: 'End Date', + screenReaderMessage: '', + onStartDateFocus: function () { + function onStartDateFocus() {} + + return onStartDateFocus; + }(), + onEndDateFocus: function () { + function onEndDateFocus() {} + + return onEndDateFocus; + }(), + onStartDateChange: function () { + function onStartDateChange() {} + + return onStartDateChange; + }(), + onEndDateChange: function () { + function onEndDateChange() {} + + return onEndDateChange; + }(), + onStartDateShiftTab: function () { + function onStartDateShiftTab() {} + + return onStartDateShiftTab; + }(), + onEndDateTab: function () { + function onEndDateTab() {} + + return onEndDateTab; + }(), + onClearDates: function () { + function onClearDates() {} + + return onClearDates; + }(), + + startDate: '', + startDateValue: '', + endDate: '', + endDateValue: '', + + isStartDateFocused: false, + isEndDateFocused: false, + showClearDates: false, + disabled: false, + required: false, + showCaret: false, + showDefaultInputIcon: false, + customInputIcon: null, + customArrowIcon: null, + customCloseIcon: null, + + // i18n + phrases: _defaultPhrases.DateRangePickerInputPhrases + }; + + var DateRangePickerInput = function (_React$Component) { + _inherits(DateRangePickerInput, _React$Component); + + function DateRangePickerInput(props) { + _classCallCheck(this, DateRangePickerInput); + + var _this = _possibleConstructorReturn(this, (DateRangePickerInput.__proto__ || Object.getPrototypeOf(DateRangePickerInput)).call(this, props)); + + _this.state = { + isClearDatesHovered: false + }; + + _this.onClearDatesMouseEnter = _this.onClearDatesMouseEnter.bind(_this); + _this.onClearDatesMouseLeave = _this.onClearDatesMouseLeave.bind(_this); + return _this; + } + + _createClass(DateRangePickerInput, [{ + key: 'onClearDatesMouseEnter', + value: function () { + function onClearDatesMouseEnter() { + this.setState({ + isClearDatesHovered: true + }); + } + + return onClearDatesMouseEnter; + }() + }, { + key: 'onClearDatesMouseLeave', + value: function () { + function onClearDatesMouseLeave() { + this.setState({ + isClearDatesHovered: false + }); + } + + return onClearDatesMouseLeave; + }() + }, { + key: 'render', + value: function () { + function render() { + var isClearDatesHovered = this.state.isClearDatesHovered; + var _props = this.props; + var startDate = _props.startDate; + var startDateValue = _props.startDateValue; + var startDateId = _props.startDateId; + var startDatePlaceholderText = _props.startDatePlaceholderText; + var screenReaderMessage = _props.screenReaderMessage; + var isStartDateFocused = _props.isStartDateFocused; + var onStartDateChange = _props.onStartDateChange; + var onStartDateFocus = _props.onStartDateFocus; + var onStartDateShiftTab = _props.onStartDateShiftTab; + var endDate = _props.endDate; + var endDateValue = _props.endDateValue; + var endDateId = _props.endDateId; + var endDatePlaceholderText = _props.endDatePlaceholderText; + var isEndDateFocused = _props.isEndDateFocused; + var onEndDateChange = _props.onEndDateChange; + var onEndDateFocus = _props.onEndDateFocus; + var onEndDateTab = _props.onEndDateTab; + var onClearDates = _props.onClearDates; + var showClearDates = _props.showClearDates; + var disabled = _props.disabled; + var required = _props.required; + var showCaret = _props.showCaret; + var showDefaultInputIcon = _props.showDefaultInputIcon; + var customInputIcon = _props.customInputIcon; + var customArrowIcon = _props.customArrowIcon; + var customCloseIcon = _props.customCloseIcon; + var phrases = _props.phrases; + + var inputIcon = customInputIcon || _react2['default'].createElement(_calendar2['default'], null); + var arrowIcon = customArrowIcon || _react2['default'].createElement(_arrowRight2['default'], null); + var closeIcon = customCloseIcon || _react2['default'].createElement(_close2['default'], null); + + return _react2['default'].createElement('div', { + className: (0, _classnames2['default'])('DateRangePickerInput', { + 'DateRangePickerInput--disabled': disabled + }) + }, (showDefaultInputIcon || customInputIcon !== null) && _react2['default'].createElement('button', { + type: 'button', + 'aria-label': phrases.focusStartDate, + className: 'DateRangePickerInput__calendar-icon', + onClick: onStartDateFocus + }, inputIcon), _react2['default'].createElement(_DateInput2['default'], { + id: startDateId, + placeholder: startDatePlaceholderText, + displayValue: startDate, + inputValue: startDateValue, + screenReaderMessage: screenReaderMessage, + focused: isStartDateFocused, + disabled: disabled, + required: required, + showCaret: showCaret, + + onChange: onStartDateChange, + onFocus: onStartDateFocus, + onKeyDownShiftTab: onStartDateShiftTab + }), _react2['default'].createElement('div', { className: 'DateRangePickerInput__arrow' }, arrowIcon), _react2['default'].createElement(_DateInput2['default'], { + id: endDateId, + placeholder: endDatePlaceholderText, + displayValue: endDate, + inputValue: endDateValue, + screenReaderMessage: screenReaderMessage, + focused: isEndDateFocused, + disabled: disabled, + required: required, + showCaret: showCaret, + + onChange: onEndDateChange, + onFocus: onEndDateFocus, + onKeyDownTab: onEndDateTab + }), showClearDates && _react2['default'].createElement('button', { + type: 'button', + className: (0, _classnames2['default'])('DateRangePickerInput__clear-dates', { + 'DateRangePickerInput__clear-dates--hide': !(startDate || endDate), + 'DateRangePickerInput__clear-dates--hover': isClearDatesHovered + }), + onMouseEnter: this.onClearDatesMouseEnter, + onMouseLeave: this.onClearDatesMouseLeave, + onClick: onClearDates + }, _react2['default'].createElement('span', { className: 'screen-reader-only' }, phrases.clearDates), _react2['default'].createElement('div', { className: 'DateRangePickerInput__close-icon' }, closeIcon))); + } + + return render; + }() + }]); + + return DateRangePickerInput; + }(_react2['default'].Component); + + exports['default'] = DateRangePickerInput; + + DateRangePickerInput.propTypes = propTypes; + DateRangePickerInput.defaultProps = defaultProps; + +/***/ }, +/* 1 */ +/***/ function(module, exports) { + + module.exports = require("react"); + +/***/ }, +/* 2 */, +/* 3 */, +/* 4 */ +/***/ function(module, exports) { + + module.exports = require("airbnb-prop-types"); + +/***/ }, +/* 5 */, +/* 6 */ +/***/ function(module, exports) { + + module.exports = require("classnames"); + +/***/ }, +/* 7 */, +/* 8 */, +/* 9 */, +/* 10 */ +/***/ function(module, exports) { + + module.exports = require("../../constants"); + +/***/ }, +/* 11 */, +/* 12 */, +/* 13 */, +/* 14 */, +/* 15 */, +/* 16 */, +/* 17 */, +/* 18 */ +/***/ function(module, exports) { + + module.exports = require("../defaultPhrases"); + +/***/ }, +/* 19 */, +/* 20 */, +/* 21 */, +/* 22 */, +/* 23 */, +/* 24 */ +/***/ function(module, exports, __webpack_require__) { + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + 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 SVG = function (_React$Component) { + _inherits(SVG, _React$Component); + + function SVG() { + _classCallCheck(this, SVG); + + return _possibleConstructorReturn(this, (SVG.__proto__ || Object.getPrototypeOf(SVG)).apply(this, arguments)); + } + + _createClass(SVG, [{ + key: "render", + value: function () { + function render() { + return _react2["default"].createElement( + "svg", + _extends({ viewBox: "0 0 12 12" }, this.props), + _react2["default"].createElement("path", { fillRule: "evenodd", d: "M11.53.47a.75.75 0 0 0-1.061 0l-4.47 4.47L1.529.47A.75.75 0 1 0 .468 1.531l4.47 4.47-4.47 4.47a.75.75 0 1 0 1.061 1.061l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.061-1.061l-4.47-4.47 4.47-4.47a.75.75 0 0 0 0-1.061z" }) + ); + } + + return render; + }() + }]); + + return SVG; + }(_react2["default"].Component); + + exports["default"] = SVG; + +/***/ }, +/* 25 */, +/* 26 */ +/***/ function(module, exports) { + + module.exports = require("../utils/getPhrasePropTypes"); + +/***/ }, +/* 27 */ +/***/ function(module, exports) { + + module.exports = require("./DateInput"); + +/***/ }, +/* 28 */ +/***/ function(module, exports, __webpack_require__) { + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + 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 SVG = function (_React$Component) { + _inherits(SVG, _React$Component); + + function SVG() { + _classCallCheck(this, SVG); + + return _possibleConstructorReturn(this, (SVG.__proto__ || Object.getPrototypeOf(SVG)).apply(this, arguments)); + } + + _createClass(SVG, [{ + key: "render", + value: function () { + function render() { + return _react2["default"].createElement( + "svg", + _extends({ viewBox: "0 0 1000 1000" }, this.props), + _react2["default"].createElement("path", { d: "M694.4 242.4l249.1 249.1c11 11 11 21 0 32L694.4 772.7c-5 5-10 7-16 7s-11-2-16-7c-11-11-11-21 0-32l210.1-210.1H67.1c-13 0-23-10-23-23s10-23 23-23h805.4L662.4 274.5c-21-21.1 11-53.1 32-32.1z" }) + ); + } + + return render; + }() + }]); + + return SVG; + }(_react2["default"].Component); + + exports["default"] = SVG; + +/***/ }, +/* 29 */ +/***/ function(module, exports, __webpack_require__) { + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + 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 SVG = function (_React$Component) { + _inherits(SVG, _React$Component); + + function SVG() { + _classCallCheck(this, SVG); + + return _possibleConstructorReturn(this, (SVG.__proto__ || Object.getPrototypeOf(SVG)).apply(this, arguments)); + } + + _createClass(SVG, [{ + key: "render", + value: function () { + function render() { + return _react2["default"].createElement( + "svg", + _extends({ xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 1393.1 1500" }, this.props), + _react2["default"].createElement("path", { d: "M107.2 1392.9h241.1v-241.1H107.2v241.1zm294.7 0h267.9v-241.1H401.9v241.1zm-294.7-294.7h241.1V830.4H107.2v267.8zm294.7 0h267.9V830.4H401.9v267.8zM107.2 776.8h241.1V535.7H107.2v241.1zm616.2 616.1h267.9v-241.1H723.4v241.1zM401.9 776.8h267.9V535.7H401.9v241.1zm642.9 616.1H1286v-241.1h-241.1v241.1zm-321.4-294.7h267.9V830.4H723.4v267.8zM428.7 375V133.9c0-7.3-2.7-13.5-8-18.8-5.3-5.3-11.6-8-18.8-8h-53.6c-7.3 0-13.5 2.7-18.8 8-5.3 5.3-8 11.6-8 18.8V375c0 7.3 2.7 13.5 8 18.8 5.3 5.3 11.6 8 18.8 8h53.6c7.3 0 13.5-2.7 18.8-8 5.3-5.3 8-11.5 8-18.8zm616.1 723.2H1286V830.4h-241.1v267.8zM723.4 776.8h267.9V535.7H723.4v241.1zm321.4 0H1286V535.7h-241.1v241.1zm26.8-401.8V133.9c0-7.3-2.7-13.5-8-18.8-5.3-5.3-11.6-8-18.8-8h-53.6c-7.3 0-13.5 2.7-18.8 8-5.3 5.3-8 11.6-8 18.8V375c0 7.3 2.7 13.5 8 18.8 5.3 5.3 11.6 8 18.8 8h53.6c7.3 0 13.5-2.7 18.8-8 5.4-5.3 8-11.5 8-18.8zm321.5-53.6v1071.4c0 29-10.6 54.1-31.8 75.3-21.2 21.2-46.3 31.8-75.3 31.8H107.2c-29 0-54.1-10.6-75.3-31.8C10.6 1447 0 1421.9 0 1392.9V321.4c0-29 10.6-54.1 31.8-75.3s46.3-31.8 75.3-31.8h107.2v-80.4c0-36.8 13.1-68.4 39.3-94.6S311.4 0 348.3 0h53.6c36.8 0 68.4 13.1 94.6 39.3 26.2 26.2 39.3 57.8 39.3 94.6v80.4h321.5v-80.4c0-36.8 13.1-68.4 39.3-94.6C922.9 13.1 954.4 0 991.3 0h53.6c36.8 0 68.4 13.1 94.6 39.3s39.3 57.8 39.3 94.6v80.4H1286c29 0 54.1 10.6 75.3 31.8 21.2 21.2 31.8 46.3 31.8 75.3z" }) + ); + } + + return render; + }() + }]); + + return SVG; + }(_react2["default"].Component); + + exports["default"] = SVG; + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/lib/components/DateRangePickerInputController.js b/lib/components/DateRangePickerInputController.js new file mode 100644 index 0000000000..14776b5a1f --- /dev/null +++ b/lib/components/DateRangePickerInputController.js @@ -0,0 +1,549 @@ +module.exports = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports, __webpack_require__) { + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + var _moment = __webpack_require__(5); + + var _moment2 = _interopRequireDefault(_moment); + + var _reactMomentProptypes = __webpack_require__(3); + + var _reactMomentProptypes2 = _interopRequireDefault(_reactMomentProptypes); + + var _airbnbPropTypes = __webpack_require__(4); + + var _defaultPhrases = __webpack_require__(18); + + var _getPhrasePropTypes = __webpack_require__(26); + + var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes); + + var _DateRangePickerInput = __webpack_require__(30); + + var _DateRangePickerInput2 = _interopRequireDefault(_DateRangePickerInput); + + var _toMomentObject = __webpack_require__(31); + + var _toMomentObject2 = _interopRequireDefault(_toMomentObject); + + var _toLocalizedDateString = __webpack_require__(32); + + var _toLocalizedDateString2 = _interopRequireDefault(_toLocalizedDateString); + + var _toISODateString = __webpack_require__(33); + + var _toISODateString2 = _interopRequireDefault(_toISODateString); + + var _isInclusivelyAfterDay = __webpack_require__(21); + + var _isInclusivelyAfterDay2 = _interopRequireDefault(_isInclusivelyAfterDay); + + var _isInclusivelyBeforeDay = __webpack_require__(34); + + var _isInclusivelyBeforeDay2 = _interopRequireDefault(_isInclusivelyBeforeDay); + + var _constants = __webpack_require__(10); + + 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 === "undefined" ? "undefined" : _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 === "undefined" ? "undefined" : _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 propTypes = (0, _airbnbPropTypes.forbidExtraProps)({ + startDate: _reactMomentProptypes2['default'].momentObj, + startDateId: _react.PropTypes.string, + startDatePlaceholderText: _react.PropTypes.string, + isStartDateFocused: _react.PropTypes.bool, + + endDate: _reactMomentProptypes2['default'].momentObj, + endDateId: _react.PropTypes.string, + endDatePlaceholderText: _react.PropTypes.string, + isEndDateFocused: _react.PropTypes.bool, + + screenReaderMessage: _react.PropTypes.string, + showClearDates: _react.PropTypes.bool, + showCaret: _react.PropTypes.bool, + showDefaultInputIcon: _react.PropTypes.bool, + disabled: _react.PropTypes.bool, + required: _react.PropTypes.bool, + + keepOpenOnDateSelect: _react.PropTypes.bool, + reopenPickerOnClearDates: _react.PropTypes.bool, + withFullScreenPortal: _react.PropTypes.bool, + isOutsideRange: _react.PropTypes.func, + displayFormat: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.func]), + + onFocusChange: _react.PropTypes.func, + onDatesChange: _react.PropTypes.func, + + customInputIcon: _react.PropTypes.node, + customArrowIcon: _react.PropTypes.node, + customCloseIcon: _react.PropTypes.node, + + // i18n + phrases: _react.PropTypes.shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.DateRangePickerInputPhrases)) + }); + + var defaultProps = { + startDate: null, + startDateId: _constants.START_DATE, + startDatePlaceholderText: 'Start Date', + isStartDateFocused: false, + + endDate: null, + endDateId: _constants.END_DATE, + endDatePlaceholderText: 'End Date', + isEndDateFocused: false, + + screenReaderMessage: '', + showClearDates: false, + showCaret: false, + showDefaultInputIcon: false, + disabled: false, + required: false, + + keepOpenOnDateSelect: false, + reopenPickerOnClearDates: false, + withFullScreenPortal: false, + isOutsideRange: function () { + function isOutsideRange(day) { + return !(0, _isInclusivelyAfterDay2['default'])(day, (0, _moment2['default'])()); + } + + return isOutsideRange; + }(), + displayFormat: function () { + function displayFormat() { + return _moment2['default'].localeData().longDateFormat('L'); + } + + return displayFormat; + }(), + + onFocusChange: function () { + function onFocusChange() {} + + return onFocusChange; + }(), + onDatesChange: function () { + function onDatesChange() {} + + return onDatesChange; + }(), + + customInputIcon: null, + customArrowIcon: null, + customCloseIcon: null, + + // i18n + phrases: _defaultPhrases.DateRangePickerInputPhrases + }; + + var DateRangePickerInputWithHandlers = function (_React$Component) { + _inherits(DateRangePickerInputWithHandlers, _React$Component); + + function DateRangePickerInputWithHandlers(props) { + _classCallCheck(this, DateRangePickerInputWithHandlers); + + var _this = _possibleConstructorReturn(this, (DateRangePickerInputWithHandlers.__proto__ || Object.getPrototypeOf(DateRangePickerInputWithHandlers)).call(this, props)); + + _this.onClearFocus = _this.onClearFocus.bind(_this); + _this.onStartDateChange = _this.onStartDateChange.bind(_this); + _this.onStartDateFocus = _this.onStartDateFocus.bind(_this); + _this.onEndDateChange = _this.onEndDateChange.bind(_this); + _this.onEndDateFocus = _this.onEndDateFocus.bind(_this); + _this.clearDates = _this.clearDates.bind(_this); + return _this; + } + + _createClass(DateRangePickerInputWithHandlers, [{ + key: 'onClearFocus', + value: function () { + function onClearFocus() { + this.props.onFocusChange(null); + } + + return onClearFocus; + }() + }, { + key: 'onEndDateChange', + value: function () { + function onEndDateChange(endDateString) { + var _props = this.props; + var startDate = _props.startDate; + var isOutsideRange = _props.isOutsideRange; + var keepOpenOnDateSelect = _props.keepOpenOnDateSelect; + var onDatesChange = _props.onDatesChange; + var onFocusChange = _props.onFocusChange; + + var endDate = (0, _toMomentObject2['default'])(endDateString, this.getDisplayFormat()); + var isEndDateValid = endDate && !isOutsideRange(endDate) && !(0, _isInclusivelyBeforeDay2['default'])(endDate, startDate); + if (isEndDateValid) { + onDatesChange({ startDate: startDate, endDate: endDate }); + if (!keepOpenOnDateSelect) onFocusChange(null); + } else { + onDatesChange({ + startDate: startDate, + endDate: null + }); + } + } + + return onEndDateChange; + }() + }, { + key: 'onEndDateFocus', + value: function () { + function onEndDateFocus() { + var _props2 = this.props; + var startDate = _props2.startDate; + var onFocusChange = _props2.onFocusChange; + var withFullScreenPortal = _props2.withFullScreenPortal; + var disabled = _props2.disabled; + + if (!startDate && withFullScreenPortal && !disabled) { + // When the datepicker is full screen, we never want to focus the end date first + // because there's no indication that that is the case once the datepicker is open and it + // might confuse the user + onFocusChange(_constants.START_DATE); + } else if (!disabled) { + onFocusChange(_constants.END_DATE); + } + } + + return onEndDateFocus; + }() + }, { + key: 'onStartDateChange', + value: function () { + function onStartDateChange(startDateString) { + var startDate = (0, _toMomentObject2['default'])(startDateString, this.getDisplayFormat()); + var endDate = this.props.endDate; + var _props3 = this.props; + var isOutsideRange = _props3.isOutsideRange; + var onDatesChange = _props3.onDatesChange; + var onFocusChange = _props3.onFocusChange; + + var isStartDateValid = startDate && !isOutsideRange(startDate); + if (isStartDateValid) { + if ((0, _isInclusivelyBeforeDay2['default'])(endDate, startDate)) { + endDate = null; + } + + onDatesChange({ startDate: startDate, endDate: endDate }); + onFocusChange(_constants.END_DATE); + } else { + onDatesChange({ + startDate: null, + endDate: endDate + }); + } + } + + return onStartDateChange; + }() + }, { + key: 'onStartDateFocus', + value: function () { + function onStartDateFocus() { + if (!this.props.disabled) { + this.props.onFocusChange(_constants.START_DATE); + } + } + + return onStartDateFocus; + }() + }, { + key: 'getDisplayFormat', + value: function () { + function getDisplayFormat() { + var displayFormat = this.props.displayFormat; + + return typeof displayFormat === 'string' ? displayFormat : displayFormat(); + } + + return getDisplayFormat; + }() + }, { + key: 'getDateString', + value: function () { + function getDateString(date) { + var displayFormat = this.getDisplayFormat(); + if (date && displayFormat) { + return date && date.format(displayFormat); + } + return (0, _toLocalizedDateString2['default'])(date); + } + + return getDateString; + }() + }, { + key: 'clearDates', + value: function () { + function clearDates() { + var _props4 = this.props; + var onDatesChange = _props4.onDatesChange; + var reopenPickerOnClearDates = _props4.reopenPickerOnClearDates; + var onFocusChange = _props4.onFocusChange; + + onDatesChange({ startDate: null, endDate: null }); + if (reopenPickerOnClearDates) { + onFocusChange(_constants.START_DATE); + } + } + + return clearDates; + }() + }, { + key: 'render', + value: function () { + function render() { + var _props5 = this.props; + var startDate = _props5.startDate; + var startDateId = _props5.startDateId; + var startDatePlaceholderText = _props5.startDatePlaceholderText; + var isStartDateFocused = _props5.isStartDateFocused; + var endDate = _props5.endDate; + var endDateId = _props5.endDateId; + var endDatePlaceholderText = _props5.endDatePlaceholderText; + var isEndDateFocused = _props5.isEndDateFocused; + var screenReaderMessage = _props5.screenReaderMessage; + var showClearDates = _props5.showClearDates; + var showCaret = _props5.showCaret; + var showDefaultInputIcon = _props5.showDefaultInputIcon; + var customInputIcon = _props5.customInputIcon; + var customArrowIcon = _props5.customArrowIcon; + var customCloseIcon = _props5.customCloseIcon; + var disabled = _props5.disabled; + var required = _props5.required; + var phrases = _props5.phrases; + + var startDateString = this.getDateString(startDate); + var startDateValue = (0, _toISODateString2['default'])(startDate); + var endDateString = this.getDateString(endDate); + var endDateValue = (0, _toISODateString2['default'])(endDate); + + return _react2['default'].createElement(_DateRangePickerInput2['default'], { + startDate: startDateString, + startDateValue: startDateValue, + startDateId: startDateId, + startDatePlaceholderText: startDatePlaceholderText, + isStartDateFocused: isStartDateFocused, + endDate: endDateString, + endDateValue: endDateValue, + endDateId: endDateId, + endDatePlaceholderText: endDatePlaceholderText, + isEndDateFocused: isEndDateFocused, + disabled: disabled, + required: required, + showCaret: showCaret, + showDefaultInputIcon: showDefaultInputIcon, + customInputIcon: customInputIcon, + customArrowIcon: customArrowIcon, + customCloseIcon: customCloseIcon, + phrases: phrases, + onStartDateChange: this.onStartDateChange, + onStartDateFocus: this.onStartDateFocus, + onStartDateShiftTab: this.onClearFocus, + onEndDateChange: this.onEndDateChange, + onEndDateFocus: this.onEndDateFocus, + onEndDateTab: this.onClearFocus, + showClearDates: showClearDates, + onClearDates: this.clearDates, + screenReaderMessage: screenReaderMessage + }); + } + + return render; + }() + }]); + + return DateRangePickerInputWithHandlers; + }(_react2['default'].Component); + + exports['default'] = DateRangePickerInputWithHandlers; + + DateRangePickerInputWithHandlers.propTypes = propTypes; + DateRangePickerInputWithHandlers.defaultProps = defaultProps; + +/***/ }, +/* 1 */ +/***/ function(module, exports) { + + module.exports = require("react"); + +/***/ }, +/* 2 */, +/* 3 */ +/***/ function(module, exports) { + + module.exports = require("react-moment-proptypes"); + +/***/ }, +/* 4 */ +/***/ function(module, exports) { + + module.exports = require("airbnb-prop-types"); + +/***/ }, +/* 5 */ +/***/ function(module, exports) { + + module.exports = require("moment"); + +/***/ }, +/* 6 */, +/* 7 */, +/* 8 */, +/* 9 */, +/* 10 */ +/***/ function(module, exports) { + + module.exports = require("../../constants"); + +/***/ }, +/* 11 */, +/* 12 */, +/* 13 */, +/* 14 */, +/* 15 */, +/* 16 */, +/* 17 */, +/* 18 */ +/***/ function(module, exports) { + + module.exports = require("../defaultPhrases"); + +/***/ }, +/* 19 */, +/* 20 */, +/* 21 */ +/***/ function(module, exports) { + + module.exports = require("../utils/isInclusivelyAfterDay"); + +/***/ }, +/* 22 */, +/* 23 */, +/* 24 */, +/* 25 */, +/* 26 */ +/***/ function(module, exports) { + + module.exports = require("../utils/getPhrasePropTypes"); + +/***/ }, +/* 27 */, +/* 28 */, +/* 29 */, +/* 30 */ +/***/ function(module, exports) { + + module.exports = require("./DateRangePickerInput"); + +/***/ }, +/* 31 */ +/***/ function(module, exports) { + + module.exports = require("../utils/toMomentObject"); + +/***/ }, +/* 32 */ +/***/ function(module, exports) { + + module.exports = require("../utils/toLocalizedDateString"); + +/***/ }, +/* 33 */ +/***/ function(module, exports) { + + module.exports = require("../utils/toISODateString"); + +/***/ }, +/* 34 */ +/***/ function(module, exports) { + + module.exports = require("../utils/isInclusivelyBeforeDay"); + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/lib/components/DayPicker.js b/lib/components/DayPicker.js new file mode 100644 index 0000000000..4cd0458c98 --- /dev/null +++ b/lib/components/DayPicker.js @@ -0,0 +1,803 @@ +module.exports = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports, __webpack_require__) { + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + 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; + }; + }(); + + exports.calculateDimension = calculateDimension; + + var _react = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + var _reactAddonsShallowCompare = __webpack_require__(2); + + var _reactAddonsShallowCompare2 = _interopRequireDefault(_reactAddonsShallowCompare); + + var _reactDom = __webpack_require__(16); + + var _reactDom2 = _interopRequireDefault(_reactDom); + + var _airbnbPropTypes = __webpack_require__(4); + + var _moment = __webpack_require__(5); + + var _moment2 = _interopRequireDefault(_moment); + + var _classnames = __webpack_require__(6); + + var _classnames2 = _interopRequireDefault(_classnames); + + var _defaultPhrases = __webpack_require__(18); + + var _getPhrasePropTypes = __webpack_require__(26); + + var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes); + + var _OutsideClickHandler = __webpack_require__(19); + + var _OutsideClickHandler2 = _interopRequireDefault(_OutsideClickHandler); + + var _CalendarMonthGrid = __webpack_require__(35); + + var _CalendarMonthGrid2 = _interopRequireDefault(_CalendarMonthGrid); + + var _DayPickerNavigation = __webpack_require__(36); + + var _DayPickerNavigation2 = _interopRequireDefault(_DayPickerNavigation); + + var _getTransformStyles = __webpack_require__(14); + + var _getTransformStyles2 = _interopRequireDefault(_getTransformStyles); + + var _ScrollableOrientationShape = __webpack_require__(9); + + var _ScrollableOrientationShape2 = _interopRequireDefault(_ScrollableOrientationShape); + + var _constants = __webpack_require__(10); + + 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 === "undefined" ? "undefined" : _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 === "undefined" ? "undefined" : _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 CALENDAR_MONTH_WIDTH = 300; + var DAY_PICKER_PADDING = 9; + var MONTH_PADDING = 23; + var PREV_TRANSITION = 'prev'; + var NEXT_TRANSITION = 'next'; + + var propTypes = (0, _airbnbPropTypes.forbidExtraProps)({ + // calendar presentation props + enableOutsideDays: _react.PropTypes.bool, + numberOfMonths: _react.PropTypes.number, + orientation: _ScrollableOrientationShape2['default'], + withPortal: _react.PropTypes.bool, + onOutsideClick: _react.PropTypes.func, + hidden: _react.PropTypes.bool, + initialVisibleMonth: _react.PropTypes.func, + renderCalendarInfo: _react.PropTypes.func, + + // navigation props + navPrev: _react.PropTypes.node, + navNext: _react.PropTypes.node, + onPrevMonthClick: _react.PropTypes.func, + onNextMonthClick: _react.PropTypes.func, + + // day props + modifiers: _react.PropTypes.object, + renderDay: _react.PropTypes.func, + onDayClick: _react.PropTypes.func, + onDayMouseEnter: _react.PropTypes.func, + onDayMouseLeave: _react.PropTypes.func, + + // internationalization + monthFormat: _react.PropTypes.string, + phrases: _react.PropTypes.shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.DayPickerPhrases)) + }); + + var defaultProps = { + // calendar presentation props + enableOutsideDays: false, + numberOfMonths: 2, + orientation: _constants.HORIZONTAL_ORIENTATION, + withPortal: false, + onOutsideClick: function () { + function onOutsideClick() {} + + return onOutsideClick; + }(), + + hidden: false, + initialVisibleMonth: function () { + function initialVisibleMonth() { + return (0, _moment2['default'])(); + } + + return initialVisibleMonth; + }(), + renderCalendarInfo: null, + + // navigation props + navPrev: null, + navNext: null, + onPrevMonthClick: function () { + function onPrevMonthClick() {} + + return onPrevMonthClick; + }(), + onNextMonthClick: function () { + function onNextMonthClick() {} + + return onNextMonthClick; + }(), + + // day props + modifiers: {}, + renderDay: null, + onDayClick: function () { + function onDayClick() {} + + return onDayClick; + }(), + onDayMouseEnter: function () { + function onDayMouseEnter() {} + + return onDayMouseEnter; + }(), + onDayMouseLeave: function () { + function onDayMouseLeave() {} + + return onDayMouseLeave; + }(), + + // internationalization + monthFormat: 'MMMM YYYY', + phrases: _defaultPhrases.DayPickerPhrases + }; + + function applyTransformStyles(el, transform) { + var opacity = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : ''; + + var transformStyles = (0, _getTransformStyles2['default'])(transform); + transformStyles.opacity = opacity; + + Object.keys(transformStyles).forEach(function (styleKey) { + // eslint-disable-next-line no-param-reassign + el.style[styleKey] = transformStyles[styleKey]; + }); + } + + function calculateDimension(el, axis) { + var borderBox = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false; + var withMargin = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false; + + if (!el) { + return 0; + } + + var axisStart = axis === 'width' ? 'Left' : 'Top'; + var axisEnd = axis === 'width' ? 'Right' : 'Bottom'; + + // Only read styles if we need to + var style = !borderBox || withMargin ? window.getComputedStyle(el) : {}; + + // Offset includes border and padding + var size = axis === 'width' ? el.offsetWidth : el.offsetHeight; + + // Get the inner size + if (!borderBox) { + size -= parseFloat(style['padding' + axisStart]) + parseFloat(style['padding' + axisEnd]) + parseFloat(style['border' + axisStart + 'Width']) + parseFloat(style['border' + axisEnd + 'Width']); + } + + // Apply margin + if (withMargin) { + size += parseFloat(style['margin' + axisStart]) + parseFloat(style['margin' + axisEnd]); + } + + return size; + } + + function getMonthHeight(el) { + var caption = el.querySelector('.js-CalendarMonth__caption'); + var grid = el.querySelector('.js-CalendarMonth__grid'); + + // Need to separate out table children for FF + // Add an additional +1 for the border + return calculateDimension(caption, 'height', true, true) + calculateDimension(grid, 'height') + 1; + } + + var DayPicker = function (_React$Component) { + _inherits(DayPicker, _React$Component); + + function DayPicker(props) { + _classCallCheck(this, DayPicker); + + var _this = _possibleConstructorReturn(this, (DayPicker.__proto__ || Object.getPrototypeOf(DayPicker)).call(this, props)); + + _this.hasSetInitialVisibleMonth = !props.hidden; + _this.state = { + currentMonth: props.hidden ? (0, _moment2['default'])() : props.initialVisibleMonth(), + monthTransition: null, + translationValue: 0, + scrollableMonthMultiple: 1 + }; + + _this.onPrevMonthClick = _this.onPrevMonthClick.bind(_this); + _this.onNextMonthClick = _this.onNextMonthClick.bind(_this); + _this.multiplyScrollableMonths = _this.multiplyScrollableMonths.bind(_this); + _this.updateStateAfterMonthTransition = _this.updateStateAfterMonthTransition.bind(_this); + return _this; + } + + _createClass(DayPicker, [{ + key: 'componentDidMount', + value: function () { + function componentDidMount() { + if (this.isHorizontal()) { + this.adjustDayPickerHeight(); + this.initializeDayPickerWidth(); + } + } + + return componentDidMount; + }() + }, { + key: 'componentWillReceiveProps', + value: function () { + function componentWillReceiveProps(nextProps) { + if (!nextProps.hidden) { + if (!this.hasSetInitialVisibleMonth) { + this.hasSetInitialVisibleMonth = true; + this.setState({ + currentMonth: nextProps.initialVisibleMonth() + }); + } + + if (!this.dayPickerWidth && this.isHorizontal()) { + this.initializeDayPickerWidth(); + this.adjustDayPickerHeight(); + } + } + } + + return componentWillReceiveProps; + }() + }, { + key: 'shouldComponentUpdate', + value: function () { + function shouldComponentUpdate(nextProps, nextState) { + return (0, _reactAddonsShallowCompare2['default'])(this, nextProps, nextState); + } + + return shouldComponentUpdate; + }() + }, { + key: 'componentDidUpdate', + value: function () { + function componentDidUpdate(prevProps, prevState) { + if (this.state.monthTransition || !this.state.currentMonth.isSame(prevState.currentMonth)) { + if (this.isHorizontal()) { + this.adjustDayPickerHeight(); + } + } + } + + return componentDidUpdate; + }() + }, { + key: 'onPrevMonthClick', + value: function () { + function onPrevMonthClick(e) { + if (e) e.preventDefault(); + + if (this.props.onPrevMonthClick) { + this.props.onPrevMonthClick(e); + } + + var translationValue = this.isVertical() ? this.getMonthHeightByIndex(0) : this.dayPickerWidth; + + // The first CalendarMonth is always positioned absolute at top: 0 or left: 0 + // so we need to transform it to the appropriate location before the animation. + // This behavior is because we would otherwise need a double-render in order to + // adjust the container position once we had the height the first calendar + // (ie first draw all the calendar, then in a second render, use the first calendar's + // height to position the container). Variable calendar heights, amirite? <3 Maja + this.translateFirstDayPickerForAnimation(translationValue); + + this.setState({ + monthTransition: PREV_TRANSITION, + translationValue: translationValue + }); + } + + return onPrevMonthClick; + }() + }, { + key: 'onNextMonthClick', + value: function () { + function onNextMonthClick(e) { + if (e) e.preventDefault(); + if (this.props.onNextMonthClick) { + this.props.onNextMonthClick(e); + } + + var translationValue = this.isVertical() ? -this.getMonthHeightByIndex(1) : -this.dayPickerWidth; + + this.setState({ + monthTransition: NEXT_TRANSITION, + translationValue: translationValue + }); + } + + return onNextMonthClick; + }() + }, { + key: 'getMonthHeightByIndex', + value: function () { + function getMonthHeightByIndex(i) { + return getMonthHeight(this.transitionContainer.querySelectorAll('.CalendarMonth')[i]); + } + + return getMonthHeightByIndex; + }() + }, { + key: 'multiplyScrollableMonths', + value: function () { + function multiplyScrollableMonths(e) { + if (e) e.preventDefault(); + + this.setState({ + scrollableMonthMultiple: this.state.scrollableMonthMultiple + 1 + }); + } + + return multiplyScrollableMonths; + }() + }, { + key: 'isHorizontal', + value: function () { + function isHorizontal() { + return this.props.orientation === _constants.HORIZONTAL_ORIENTATION; + } + + return isHorizontal; + }() + }, { + key: 'isVertical', + value: function () { + function isVertical() { + return this.props.orientation === _constants.VERTICAL_ORIENTATION || this.props.orientation === _constants.VERTICAL_SCROLLABLE; + } + + return isVertical; + }() + }, { + key: 'initializeDayPickerWidth', + value: function () { + function initializeDayPickerWidth() { + this.dayPickerWidth = calculateDimension( + // eslint-disable-next-line react/no-find-dom-node + _reactDom2['default'].findDOMNode(this.calendarMonthGrid).querySelector('.CalendarMonth'), 'width', true); + } + + return initializeDayPickerWidth; + }() + }, { + key: 'updateStateAfterMonthTransition', + value: function () { + function updateStateAfterMonthTransition() { + var _state = this.state; + var currentMonth = _state.currentMonth; + var monthTransition = _state.monthTransition; + + var newMonth = currentMonth; + if (monthTransition === PREV_TRANSITION) { + newMonth = currentMonth.clone().subtract(1, 'month'); + } else if (monthTransition === NEXT_TRANSITION) { + newMonth = currentMonth.clone().add(1, 'month'); + } + + // clear the previous transforms + applyTransformStyles( + // eslint-disable-next-line react/no-find-dom-node + _reactDom2['default'].findDOMNode(this.calendarMonthGrid).querySelector('.CalendarMonth'), 'none'); + + this.setState({ + currentMonth: newMonth, + monthTransition: null, + translationValue: 0 + }); + } + + return updateStateAfterMonthTransition; + }() + }, { + key: 'adjustDayPickerHeight', + value: function () { + function adjustDayPickerHeight() { + var heights = []; + + Array.prototype.forEach.call(this.transitionContainer.querySelectorAll('.CalendarMonth'), function (el) { + if (el.getAttribute('data-visible') === 'true') { + heights.push(getMonthHeight(el)); + } + }); + + var newMonthHeight = Math.max.apply(Math, heights) + MONTH_PADDING; + + if (newMonthHeight !== calculateDimension(this.transitionContainer, 'height')) { + this.monthHeight = newMonthHeight; + this.transitionContainer.style.height = String(newMonthHeight) + 'px'; + } + } + + return adjustDayPickerHeight; + }() + }, { + key: 'translateFirstDayPickerForAnimation', + value: function () { + function translateFirstDayPickerForAnimation(translationValue) { + var transformType = this.isVertical() ? 'translateY' : 'translateX'; + var transformValue = transformType + '(-' + String(translationValue) + 'px)'; + + applyTransformStyles(this.transitionContainer.querySelector('.CalendarMonth'), transformValue, 1); + } + + return translateFirstDayPickerForAnimation; + }() + }, { + key: 'renderNavigation', + value: function () { + function renderNavigation() { + var _props = this.props; + var navPrev = _props.navPrev; + var navNext = _props.navNext; + var orientation = _props.orientation; + + var onNextMonthClick = void 0; + if (orientation === _constants.VERTICAL_SCROLLABLE) { + onNextMonthClick = this.multiplyScrollableMonths; + } else { + onNextMonthClick = this.onNextMonthClick; + } + + return _react2['default'].createElement(_DayPickerNavigation2['default'], { + onPrevMonthClick: this.onPrevMonthClick, + onNextMonthClick: onNextMonthClick, + navPrev: navPrev, + navNext: navNext, + orientation: orientation + }); + } + + return renderNavigation; + }() + }, { + key: 'renderWeekHeader', + value: function () { + function renderWeekHeader(index) { + var horizontalStyle = { + left: index * CALENDAR_MONTH_WIDTH + }; + + var style = this.isHorizontal() ? horizontalStyle : {}; + + var header = []; + for (var i = 0; i < 7; i += 1) { + header.push(_react2['default'].createElement('li', { key: i }, _react2['default'].createElement('small', null, (0, _moment2['default'])().weekday(i).format('dd')))); + } + + return _react2['default'].createElement('div', { + className: 'DayPicker__week-header', + key: 'week-' + String(index), + style: style + }, _react2['default'].createElement('ul', null, header)); + } + + return renderWeekHeader; + }() + }, { + key: 'render', + value: function () { + function render() { + var _this2 = this; + + var _state2 = this.state; + var currentMonth = _state2.currentMonth; + var monthTransition = _state2.monthTransition; + var translationValue = _state2.translationValue; + var scrollableMonthMultiple = _state2.scrollableMonthMultiple; + var _props2 = this.props; + var enableOutsideDays = _props2.enableOutsideDays; + var numberOfMonths = _props2.numberOfMonths; + var orientation = _props2.orientation; + var modifiers = _props2.modifiers; + var withPortal = _props2.withPortal; + var onDayClick = _props2.onDayClick; + var onDayMouseEnter = _props2.onDayMouseEnter; + var onDayMouseLeave = _props2.onDayMouseLeave; + var renderDay = _props2.renderDay; + var renderCalendarInfo = _props2.renderCalendarInfo; + var onOutsideClick = _props2.onOutsideClick; + var monthFormat = _props2.monthFormat; + + var numOfWeekHeaders = this.isVertical() ? 1 : numberOfMonths; + var weekHeaders = []; + for (var i = 0; i < numOfWeekHeaders; i += 1) { + weekHeaders.push(this.renderWeekHeader(i)); + } + + var firstVisibleMonthIndex = 1; + if (monthTransition === PREV_TRANSITION) { + firstVisibleMonthIndex -= 1; + } else if (monthTransition === NEXT_TRANSITION) { + firstVisibleMonthIndex += 1; + } + + var verticalScrollable = this.props.orientation === _constants.VERTICAL_SCROLLABLE; + + var dayPickerClassNames = (0, _classnames2['default'])('DayPicker', { + 'DayPicker--horizontal': this.isHorizontal(), + 'DayPicker--vertical': this.isVertical(), + 'DayPicker--vertical-scrollable': verticalScrollable, + 'DayPicker--portal': withPortal + }); + + var transitionContainerClasses = (0, _classnames2['default'])('transition-container', { + 'transition-container--horizontal': this.isHorizontal(), + 'transition-container--vertical': this.isVertical() + }); + + var horizontalWidth = CALENDAR_MONTH_WIDTH * numberOfMonths + 2 * DAY_PICKER_PADDING; + + // this is a kind of made-up value that generally looks good. we'll + // probably want to let the user set this explicitly. + var verticalHeight = 1.75 * CALENDAR_MONTH_WIDTH; + + var dayPickerStyle = { + width: this.isHorizontal() && horizontalWidth, + + // These values are to center the datepicker (approximately) on the page + marginLeft: this.isHorizontal() && withPortal && -horizontalWidth / 2, + marginTop: this.isHorizontal() && withPortal && -CALENDAR_MONTH_WIDTH / 2 + }; + + var transitionContainerStyle = { + width: this.isHorizontal() && horizontalWidth, + height: this.isVertical() && !verticalScrollable && !withPortal && verticalHeight + }; + + var isCalendarMonthGridAnimating = monthTransition !== null; + var transformType = this.isVertical() ? 'translateY' : 'translateX'; + var transformValue = transformType + '(' + String(translationValue) + 'px)'; + + return _react2['default'].createElement('div', { className: dayPickerClassNames, style: dayPickerStyle }, _react2['default'].createElement(_OutsideClickHandler2['default'], { onOutsideClick: onOutsideClick }, !verticalScrollable && this.renderNavigation(), _react2['default'].createElement('div', { className: 'DayPicker__week-headers' }, weekHeaders), _react2['default'].createElement('div', { + className: transitionContainerClasses, + ref: function () { + function ref(_ref2) { + _this2.transitionContainer = _ref2; + } + + return ref; + }(), + style: transitionContainerStyle + }, _react2['default'].createElement(_CalendarMonthGrid2['default'], { + ref: function () { + function ref(_ref) { + _this2.calendarMonthGrid = _ref; + } + + return ref; + }(), + transformValue: transformValue, + enableOutsideDays: enableOutsideDays, + firstVisibleMonthIndex: firstVisibleMonthIndex, + initialMonth: currentMonth, + isAnimating: isCalendarMonthGridAnimating, + modifiers: modifiers, + orientation: orientation, + numberOfMonths: numberOfMonths * scrollableMonthMultiple, + onDayClick: onDayClick, + onDayMouseEnter: onDayMouseEnter, + onDayMouseLeave: onDayMouseLeave, + renderDay: renderDay, + onMonthTransitionEnd: this.updateStateAfterMonthTransition, + monthFormat: monthFormat + }), verticalScrollable && this.renderNavigation()), renderCalendarInfo && renderCalendarInfo())); + } + + return render; + }() + }]); + + return DayPicker; + }(_react2['default'].Component); + + exports['default'] = DayPicker; + + DayPicker.propTypes = propTypes; + DayPicker.defaultProps = defaultProps; + +/***/ }, +/* 1 */ +/***/ function(module, exports) { + + module.exports = require("react"); + +/***/ }, +/* 2 */ +/***/ function(module, exports) { + + module.exports = require("react-addons-shallow-compare"); + +/***/ }, +/* 3 */, +/* 4 */ +/***/ function(module, exports) { + + module.exports = require("airbnb-prop-types"); + +/***/ }, +/* 5 */ +/***/ function(module, exports) { + + module.exports = require("moment"); + +/***/ }, +/* 6 */ +/***/ function(module, exports) { + + module.exports = require("classnames"); + +/***/ }, +/* 7 */, +/* 8 */, +/* 9 */ +/***/ function(module, exports) { + + module.exports = require("../shapes/ScrollableOrientationShape"); + +/***/ }, +/* 10 */ +/***/ function(module, exports) { + + module.exports = require("../../constants"); + +/***/ }, +/* 11 */, +/* 12 */, +/* 13 */, +/* 14 */ +/***/ function(module, exports) { + + module.exports = require("../utils/getTransformStyles"); + +/***/ }, +/* 15 */, +/* 16 */ +/***/ function(module, exports) { + + module.exports = require("react-dom"); + +/***/ }, +/* 17 */, +/* 18 */ +/***/ function(module, exports) { + + module.exports = require("../defaultPhrases"); + +/***/ }, +/* 19 */ +/***/ function(module, exports) { + + module.exports = require("./OutsideClickHandler"); + +/***/ }, +/* 20 */, +/* 21 */, +/* 22 */, +/* 23 */, +/* 24 */, +/* 25 */, +/* 26 */ +/***/ function(module, exports) { + + module.exports = require("../utils/getPhrasePropTypes"); + +/***/ }, +/* 27 */, +/* 28 */, +/* 29 */, +/* 30 */, +/* 31 */, +/* 32 */, +/* 33 */, +/* 34 */, +/* 35 */ +/***/ function(module, exports) { + + module.exports = require("./CalendarMonthGrid"); + +/***/ }, +/* 36 */ +/***/ function(module, exports) { + + module.exports = require("./DayPickerNavigation"); + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/lib/components/DayPickerNavigation.js b/lib/components/DayPickerNavigation.js new file mode 100644 index 0000000000..cf37649c19 --- /dev/null +++ b/lib/components/DayPickerNavigation.js @@ -0,0 +1,460 @@ +module.exports = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports, __webpack_require__) { + + Object.defineProperty(exports, "__esModule", { + value: true + }); + exports['default'] = DayPickerNavigation; + + var _react = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + var _airbnbPropTypes = __webpack_require__(4); + + var _classnames = __webpack_require__(6); + + var _classnames2 = _interopRequireDefault(_classnames); + + var _defaultPhrases = __webpack_require__(18); + + var _getPhrasePropTypes = __webpack_require__(26); + + var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes); + + var _arrowLeft = __webpack_require__(37); + + var _arrowLeft2 = _interopRequireDefault(_arrowLeft); + + var _arrowRight = __webpack_require__(28); + + var _arrowRight2 = _interopRequireDefault(_arrowRight); + + var _chevronUp = __webpack_require__(38); + + var _chevronUp2 = _interopRequireDefault(_chevronUp); + + var _chevronDown = __webpack_require__(39); + + var _chevronDown2 = _interopRequireDefault(_chevronDown); + + var _ScrollableOrientationShape = __webpack_require__(9); + + var _ScrollableOrientationShape2 = _interopRequireDefault(_ScrollableOrientationShape); + + var _constants = __webpack_require__(10); + + function _interopRequireDefault(obj) { + return obj && obj.__esModule ? obj : { 'default': obj }; + } + + var propTypes = (0, _airbnbPropTypes.forbidExtraProps)({ + navPrev: _react.PropTypes.node, + navNext: _react.PropTypes.node, + orientation: _ScrollableOrientationShape2['default'], + + onPrevMonthClick: _react.PropTypes.func, + onNextMonthClick: _react.PropTypes.func, + + // internationalization + phrases: _react.PropTypes.shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.DayPickerNavigationPhrases)) + }); + + var defaultProps = { + navPrev: null, + navNext: null, + orientation: _constants.HORIZONTAL_ORIENTATION, + + onPrevMonthClick: function () { + function onPrevMonthClick() {} + + return onPrevMonthClick; + }(), + onNextMonthClick: function () { + function onNextMonthClick() {} + + return onNextMonthClick; + }(), + + // internationalization + phrases: _defaultPhrases.DayPickerNavigationPhrases + }; + + function DayPickerNavigation(props) { + var navPrev = props.navPrev; + var navNext = props.navNext; + var onPrevMonthClick = props.onPrevMonthClick; + var onNextMonthClick = props.onNextMonthClick; + var orientation = props.orientation; + var phrases = props.phrases; + + var isVertical = orientation !== _constants.HORIZONTAL_ORIENTATION; + var isVerticalScrollable = orientation === _constants.VERTICAL_SCROLLABLE; + + var navPrevIcon = navPrev; + var navNextIcon = navNext; + var isDefaultNavPrev = false; + var isDefaultNavNext = false; + if (!navPrevIcon) { + isDefaultNavPrev = true; + navPrevIcon = isVertical ? _react2['default'].createElement(_chevronUp2['default'], null) : _react2['default'].createElement(_arrowLeft2['default'], null); + } + if (!navNextIcon) { + isDefaultNavNext = true; + navNextIcon = isVertical ? _react2['default'].createElement(_chevronDown2['default'], null) : _react2['default'].createElement(_arrowRight2['default'], null); + } + + var navClassNames = (0, _classnames2['default'])('DayPickerNavigation', { + 'DayPickerNavigation--horizontal': !isVertical, + 'DayPickerNavigation--vertical': isVertical, + 'DayPickerNavigation--vertical-scrollable': isVerticalScrollable + }); + var prevClassNames = (0, _classnames2['default'])('DayPickerNavigation__prev', { + 'DayPickerNavigation__prev--default': isDefaultNavPrev + }); + var nextClassNames = (0, _classnames2['default'])('DayPickerNavigation__next', { + 'DayPickerNavigation__next--default': isDefaultNavNext + }); + + return _react2['default'].createElement('div', { className: navClassNames }, !isVerticalScrollable && _react2['default'].createElement('span', { + 'aria-label': phrases.jumpToPrevMonth, + className: prevClassNames, + onClick: onPrevMonthClick + }, navPrevIcon), _react2['default'].createElement('span', { + 'aria-label': phrases.jumpToNextMonth, + className: nextClassNames, + onClick: onNextMonthClick + }, navNextIcon)); + } + + DayPickerNavigation.propTypes = propTypes; + DayPickerNavigation.defaultProps = defaultProps; + +/***/ }, +/* 1 */ +/***/ function(module, exports) { + + module.exports = require("react"); + +/***/ }, +/* 2 */, +/* 3 */, +/* 4 */ +/***/ function(module, exports) { + + module.exports = require("airbnb-prop-types"); + +/***/ }, +/* 5 */, +/* 6 */ +/***/ function(module, exports) { + + module.exports = require("classnames"); + +/***/ }, +/* 7 */, +/* 8 */, +/* 9 */ +/***/ function(module, exports) { + + module.exports = require("../shapes/ScrollableOrientationShape"); + +/***/ }, +/* 10 */ +/***/ function(module, exports) { + + module.exports = require("../../constants"); + +/***/ }, +/* 11 */, +/* 12 */, +/* 13 */, +/* 14 */, +/* 15 */, +/* 16 */, +/* 17 */, +/* 18 */ +/***/ function(module, exports) { + + module.exports = require("../defaultPhrases"); + +/***/ }, +/* 19 */, +/* 20 */, +/* 21 */, +/* 22 */, +/* 23 */, +/* 24 */, +/* 25 */, +/* 26 */ +/***/ function(module, exports) { + + module.exports = require("../utils/getPhrasePropTypes"); + +/***/ }, +/* 27 */, +/* 28 */ +/***/ function(module, exports, __webpack_require__) { + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + 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 SVG = function (_React$Component) { + _inherits(SVG, _React$Component); + + function SVG() { + _classCallCheck(this, SVG); + + return _possibleConstructorReturn(this, (SVG.__proto__ || Object.getPrototypeOf(SVG)).apply(this, arguments)); + } + + _createClass(SVG, [{ + key: "render", + value: function () { + function render() { + return _react2["default"].createElement( + "svg", + _extends({ viewBox: "0 0 1000 1000" }, this.props), + _react2["default"].createElement("path", { d: "M694.4 242.4l249.1 249.1c11 11 11 21 0 32L694.4 772.7c-5 5-10 7-16 7s-11-2-16-7c-11-11-11-21 0-32l210.1-210.1H67.1c-13 0-23-10-23-23s10-23 23-23h805.4L662.4 274.5c-21-21.1 11-53.1 32-32.1z" }) + ); + } + + return render; + }() + }]); + + return SVG; + }(_react2["default"].Component); + + exports["default"] = SVG; + +/***/ }, +/* 29 */, +/* 30 */, +/* 31 */, +/* 32 */, +/* 33 */, +/* 34 */, +/* 35 */, +/* 36 */, +/* 37 */ +/***/ function(module, exports, __webpack_require__) { + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + 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 SVG = function (_React$Component) { + _inherits(SVG, _React$Component); + + function SVG() { + _classCallCheck(this, SVG); + + return _possibleConstructorReturn(this, (SVG.__proto__ || Object.getPrototypeOf(SVG)).apply(this, arguments)); + } + + _createClass(SVG, [{ + key: "render", + value: function () { + function render() { + return _react2["default"].createElement( + "svg", + _extends({ viewBox: "0 0 1000 1000" }, this.props), + _react2["default"].createElement("path", { d: "M336.2 274.5l-210.1 210h805.4c13 0 23 10 23 23s-10 23-23 23H126.1l210.1 210.1c11 11 11 21 0 32-5 5-10 7-16 7s-11-2-16-7l-249.1-249c-11-11-11-21 0-32l249.1-249.1c21-21.1 53 10.9 32 32z" }) + ); + } + + return render; + }() + }]); + + return SVG; + }(_react2["default"].Component); + + exports["default"] = SVG; + +/***/ }, +/* 38 */ +/***/ function(module, exports, __webpack_require__) { + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + 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 SVG = function (_React$Component) { + _inherits(SVG, _React$Component); + + function SVG() { + _classCallCheck(this, SVG); + + return _possibleConstructorReturn(this, (SVG.__proto__ || Object.getPrototypeOf(SVG)).apply(this, arguments)); + } + + _createClass(SVG, [{ + key: "render", + value: function () { + function render() { + return _react2["default"].createElement( + "svg", + _extends({ viewBox: "0 0 1000 1000" }, this.props), + _react2["default"].createElement("path", { d: "M32.1 712.6l453.2-452.2c11-11 21-11 32 0l453.2 452.2c4 5 6 10 6 16 0 13-10 23-22 23-7 0-12-2-16-7L501.3 308.5 64.1 744.7c-4 5-9 7-15 7-7 0-12-2-17-7-9-11-9-21 0-32.1z" }) + ); + } + + return render; + }() + }]); + + return SVG; + }(_react2["default"].Component); + + exports["default"] = SVG; + +/***/ }, +/* 39 */ +/***/ function(module, exports, __webpack_require__) { + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + 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 SVG = function (_React$Component) { + _inherits(SVG, _React$Component); + + function SVG() { + _classCallCheck(this, SVG); + + return _possibleConstructorReturn(this, (SVG.__proto__ || Object.getPrototypeOf(SVG)).apply(this, arguments)); + } + + _createClass(SVG, [{ + key: "render", + value: function () { + function render() { + return _react2["default"].createElement( + "svg", + _extends({ viewBox: "0 0 1000 1000" }, this.props), + _react2["default"].createElement("path", { d: "M967.5 288.5L514.3 740.7c-11 11-21 11-32 0L29.1 288.5c-4-5-6-11-6-16 0-13 10-23 23-23 6 0 11 2 15 7l437.2 436.2 437.2-436.2c4-5 9-7 16-7 6 0 11 2 16 7 9 10.9 9 21 0 32z" }) + ); + } + + return render; + }() + }]); + + return SVG; + }(_react2["default"].Component); + + exports["default"] = SVG; + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/lib/components/DayPickerRangeController.js b/lib/components/DayPickerRangeController.js new file mode 100644 index 0000000000..f8e714c853 --- /dev/null +++ b/lib/components/DayPickerRangeController.js @@ -0,0 +1,758 @@ +module.exports = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports, __webpack_require__) { + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + var _reactMomentProptypes = __webpack_require__(3); + + var _reactMomentProptypes2 = _interopRequireDefault(_reactMomentProptypes); + + var _airbnbPropTypes = __webpack_require__(4); + + var _moment = __webpack_require__(5); + + var _moment2 = _interopRequireDefault(_moment); + + var _defaultPhrases = __webpack_require__(18); + + var _getPhrasePropTypes = __webpack_require__(26); + + var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes); + + var _isTouchDevice = __webpack_require__(15); + + var _isTouchDevice2 = _interopRequireDefault(_isTouchDevice); + + var _isInclusivelyAfterDay = __webpack_require__(21); + + var _isInclusivelyAfterDay2 = _interopRequireDefault(_isInclusivelyAfterDay); + + var _isNextDay = __webpack_require__(40); + + var _isNextDay2 = _interopRequireDefault(_isNextDay); + + var _isSameDay = __webpack_require__(41); + + var _isSameDay2 = _interopRequireDefault(_isSameDay); + + var _FocusedInputShape = __webpack_require__(42); + + var _FocusedInputShape2 = _interopRequireDefault(_FocusedInputShape); + + var _ScrollableOrientationShape = __webpack_require__(9); + + var _ScrollableOrientationShape2 = _interopRequireDefault(_ScrollableOrientationShape); + + var _constants = __webpack_require__(10); + + var _DayPicker = __webpack_require__(43); + + var _DayPicker2 = _interopRequireDefault(_DayPicker); + + 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 === "undefined" ? "undefined" : _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 === "undefined" ? "undefined" : _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 propTypes = (0, _airbnbPropTypes.forbidExtraProps)({ + startDate: _reactMomentProptypes2['default'].momentObj, + endDate: _reactMomentProptypes2['default'].momentObj, + onDatesChange: _react.PropTypes.func, + + focusedInput: _FocusedInputShape2['default'], + onFocusChange: _react.PropTypes.func, + + keepOpenOnDateSelect: _react.PropTypes.bool, + minimumNights: _react.PropTypes.number, + isOutsideRange: _react.PropTypes.func, + isDayBlocked: _react.PropTypes.func, + isDayHighlighted: _react.PropTypes.func, + + // DayPicker props + enableOutsideDays: _react.PropTypes.bool, + numberOfMonths: _react.PropTypes.number, + orientation: _ScrollableOrientationShape2['default'], + withPortal: _react.PropTypes.bool, + initialVisibleMonth: _react.PropTypes.func, + + navPrev: _react.PropTypes.node, + navNext: _react.PropTypes.node, + + onPrevMonthClick: _react.PropTypes.func, + onNextMonthClick: _react.PropTypes.func, + onOutsideClick: _react.PropTypes.func, + renderDay: _react.PropTypes.func, + renderCalendarInfo: _react.PropTypes.func, + + // i18n + monthFormat: _react.PropTypes.string, + phrases: _react.PropTypes.shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.DayPickerPhrases)) + }); + + var defaultProps = { + startDate: undefined, // TODO: use null + endDate: undefined, // TODO: use null + onDatesChange: function () { + function onDatesChange() {} + + return onDatesChange; + }(), + + focusedInput: null, + onFocusChange: function () { + function onFocusChange() {} + + return onFocusChange; + }(), + + keepOpenOnDateSelect: false, + minimumNights: 1, + isOutsideRange: function () { + function isOutsideRange() {} + + return isOutsideRange; + }(), + isDayBlocked: function () { + function isDayBlocked() {} + + return isDayBlocked; + }(), + isDayHighlighted: function () { + function isDayHighlighted() {} + + return isDayHighlighted; + }(), + + // DayPicker props + enableOutsideDays: false, + numberOfMonths: 1, + orientation: _constants.HORIZONTAL_ORIENTATION, + withPortal: false, + + initialVisibleMonth: function () { + function initialVisibleMonth() { + return (0, _moment2['default'])(); + } + + return initialVisibleMonth; + }(), + + navPrev: null, + navNext: null, + + onPrevMonthClick: function () { + function onPrevMonthClick() {} + + return onPrevMonthClick; + }(), + onNextMonthClick: function () { + function onNextMonthClick() {} + + return onNextMonthClick; + }(), + onOutsideClick: function () { + function onOutsideClick() {} + + return onOutsideClick; + }(), + + renderDay: null, + renderCalendarInfo: null, + + // i18n + monthFormat: 'MMMM YYYY', + phrases: _defaultPhrases.DayPickerPhrases + }; + + var DayPickerRangeController = function (_React$Component) { + _inherits(DayPickerRangeController, _React$Component); + + function DayPickerRangeController(props) { + _classCallCheck(this, DayPickerRangeController); + + var _this = _possibleConstructorReturn(this, (DayPickerRangeController.__proto__ || Object.getPrototypeOf(DayPickerRangeController)).call(this, props)); + + _this.state = { + hoverDate: null + }; + + _this.isTouchDevice = (0, _isTouchDevice2['default'])(); + _this.today = (0, _moment2['default'])(); + + _this.onDayClick = _this.onDayClick.bind(_this); + _this.onDayMouseEnter = _this.onDayMouseEnter.bind(_this); + _this.onDayMouseLeave = _this.onDayMouseLeave.bind(_this); + return _this; + } + + _createClass(DayPickerRangeController, [{ + key: 'componentWillUpdate', + value: function () { + function componentWillUpdate() { + this.today = (0, _moment2['default'])(); + } + + return componentWillUpdate; + }() + }, { + key: 'onDayClick', + value: function () { + function onDayClick(day, e) { + var _props = this.props; + var keepOpenOnDateSelect = _props.keepOpenOnDateSelect; + var minimumNights = _props.minimumNights; + + if (e) e.preventDefault(); + if (this.isBlocked(day)) return; + + var focusedInput = this.props.focusedInput; + var _props2 = this.props; + var startDate = _props2.startDate; + var endDate = _props2.endDate; + + if (focusedInput === _constants.START_DATE) { + this.props.onFocusChange(_constants.END_DATE); + + startDate = day; + + if ((0, _isInclusivelyAfterDay2['default'])(day, endDate)) { + endDate = null; + } + } else if (focusedInput === _constants.END_DATE) { + var firstAllowedEndDate = startDate && startDate.clone().add(minimumNights, 'days'); + + if (!startDate) { + endDate = day; + this.props.onFocusChange(_constants.START_DATE); + } else if ((0, _isInclusivelyAfterDay2['default'])(day, firstAllowedEndDate)) { + endDate = day; + if (!keepOpenOnDateSelect) this.props.onFocusChange(null); + } else { + startDate = day; + endDate = null; + } + } + + this.props.onDatesChange({ startDate: startDate, endDate: endDate }); + } + + return onDayClick; + }() + }, { + key: 'onDayMouseEnter', + value: function () { + function onDayMouseEnter(day) { + if (this.isTouchDevice) return; + + this.setState({ + hoverDate: day + }); + } + + return onDayMouseEnter; + }() + }, { + key: 'onDayMouseLeave', + value: function () { + function onDayMouseLeave() { + if (this.isTouchDevice) return; + + this.setState({ + hoverDate: null + }); + } + + return onDayMouseLeave; + }() + }, { + key: 'doesNotMeetMinimumNights', + value: function () { + function doesNotMeetMinimumNights(day) { + var _props3 = this.props; + var startDate = _props3.startDate; + var isOutsideRange = _props3.isOutsideRange; + var focusedInput = _props3.focusedInput; + var minimumNights = _props3.minimumNights; + + if (focusedInput !== _constants.END_DATE) return false; + + if (startDate) { + var dayDiff = day.diff(startDate.clone().startOf('day').hour(12), 'days'); + return dayDiff < minimumNights && dayDiff >= 0; + } + return isOutsideRange((0, _moment2['default'])(day).subtract(minimumNights, 'days')); + } + + return doesNotMeetMinimumNights; + }() + }, { + key: 'isDayAfterHoveredStartDate', + value: function () { + function isDayAfterHoveredStartDate(day) { + var _props4 = this.props; + var startDate = _props4.startDate; + var endDate = _props4.endDate; + var minimumNights = _props4.minimumNights; + var hoverDate = this.state.hoverDate; + + return !!startDate && !endDate && !this.isBlocked(day) && (0, _isNextDay2['default'])(hoverDate, day) && minimumNights > 0 && (0, _isSameDay2['default'])(hoverDate, startDate); + } + + return isDayAfterHoveredStartDate; + }() + }, { + key: 'isEndDate', + value: function () { + function isEndDate(day) { + return (0, _isSameDay2['default'])(day, this.props.endDate); + } + + return isEndDate; + }() + }, { + key: 'isHovered', + value: function () { + function isHovered(day) { + return (0, _isSameDay2['default'])(day, this.state.hoverDate); + } + + return isHovered; + }() + }, { + key: 'isInHoveredSpan', + value: function () { + function isInHoveredSpan(day) { + var _props5 = this.props; + var startDate = _props5.startDate; + var endDate = _props5.endDate; + var hoverDate = this.state.hoverDate; + + var isForwardRange = !!startDate && !endDate && (day.isBetween(startDate, hoverDate) || (0, _isSameDay2['default'])(hoverDate, day)); + var isBackwardRange = !!endDate && !startDate && (day.isBetween(hoverDate, endDate) || (0, _isSameDay2['default'])(hoverDate, day)); + + var isValidDayHovered = hoverDate && !this.isBlocked(hoverDate); + + return (isForwardRange || isBackwardRange) && isValidDayHovered; + } + + return isInHoveredSpan; + }() + }, { + key: 'isInSelectedSpan', + value: function () { + function isInSelectedSpan(day) { + var _props6 = this.props; + var startDate = _props6.startDate; + var endDate = _props6.endDate; + + return day.isBetween(startDate, endDate); + } + + return isInSelectedSpan; + }() + }, { + key: 'isLastInRange', + value: function () { + function isLastInRange(day) { + return this.isInSelectedSpan(day) && (0, _isNextDay2['default'])(day, this.props.endDate); + } + + return isLastInRange; + }() + }, { + key: 'isStartDate', + value: function () { + function isStartDate(day) { + return (0, _isSameDay2['default'])(day, this.props.startDate); + } + + return isStartDate; + }() + }, { + key: 'isBlocked', + value: function () { + function isBlocked(day) { + var _props7 = this.props; + var isDayBlocked = _props7.isDayBlocked; + var isOutsideRange = _props7.isOutsideRange; + + return isDayBlocked(day) || isOutsideRange(day) || this.doesNotMeetMinimumNights(day); + } + + return isBlocked; + }() + }, { + key: 'isToday', + value: function () { + function isToday(day) { + return (0, _isSameDay2['default'])(day, this.today); + } + + return isToday; + }() + }, { + key: 'render', + value: function () { + function render() { + var _this2 = this; + + var _props8 = this.props; + var isDayBlocked = _props8.isDayBlocked; + var isDayHighlighted = _props8.isDayHighlighted; + var isOutsideRange = _props8.isOutsideRange; + var numberOfMonths = _props8.numberOfMonths; + var orientation = _props8.orientation; + var monthFormat = _props8.monthFormat; + var navPrev = _props8.navPrev; + var navNext = _props8.navNext; + var onOutsideClick = _props8.onOutsideClick; + var onPrevMonthClick = _props8.onPrevMonthClick; + var onNextMonthClick = _props8.onNextMonthClick; + var withPortal = _props8.withPortal; + var enableOutsideDays = _props8.enableOutsideDays; + var initialVisibleMonth = _props8.initialVisibleMonth; + var focusedInput = _props8.focusedInput; + var renderDay = _props8.renderDay; + var renderCalendarInfo = _props8.renderCalendarInfo; + + var modifiers = { + today: function () { + function today(day) { + return _this2.isToday(day); + } + + return today; + }(), + blocked: function () { + function blocked(day) { + return _this2.isBlocked(day); + } + + return blocked; + }(), + 'blocked-calendar': function () { + function blockedCalendar(day) { + return isDayBlocked(day); + } + + return blockedCalendar; + }(), + 'blocked-out-of-range': function () { + function blockedOutOfRange(day) { + return isOutsideRange(day); + } + + return blockedOutOfRange; + }(), + 'blocked-minimum-nights': function () { + function blockedMinimumNights(day) { + return _this2.doesNotMeetMinimumNights(day); + } + + return blockedMinimumNights; + }(), + 'highlighted-calendar': function () { + function highlightedCalendar(day) { + return isDayHighlighted(day); + } + + return highlightedCalendar; + }(), + valid: function () { + function valid(day) { + return !_this2.isBlocked(day); + } + + return valid; + }(), + // before anything has been set or after both are set + hovered: function () { + function hovered(day) { + return _this2.isHovered(day); + } + + return hovered; + }(), + + // while start date has been set, but end date has not been + 'hovered-span': function () { + function hoveredSpan(day) { + return _this2.isInHoveredSpan(day); + } + + return hoveredSpan; + }(), + 'after-hovered-start': function () { + function afterHoveredStart(day) { + return _this2.isDayAfterHoveredStartDate(day); + } + + return afterHoveredStart; + }(), + 'last-in-range': function () { + function lastInRange(day) { + return _this2.isLastInRange(day); + } + + return lastInRange; + }(), + + // once a start date and end date have been set + 'selected-start': function () { + function selectedStart(day) { + return _this2.isStartDate(day); + } + + return selectedStart; + }(), + 'selected-end': function () { + function selectedEnd(day) { + return _this2.isEndDate(day); + } + + return selectedEnd; + }(), + 'selected-span': function () { + function selectedSpan(day) { + return _this2.isInSelectedSpan(day); + } + + return selectedSpan; + }() + }; + + return _react2['default'].createElement(_DayPicker2['default'], { + ref: function () { + function ref(_ref) { + _this2.dayPicker = _ref; + } + + return ref; + }(), + orientation: orientation, + enableOutsideDays: enableOutsideDays, + modifiers: modifiers, + numberOfMonths: numberOfMonths, + onDayClick: this.onDayClick, + onDayMouseEnter: this.onDayMouseEnter, + onDayMouseLeave: this.onDayMouseLeave, + onPrevMonthClick: onPrevMonthClick, + onNextMonthClick: onNextMonthClick, + monthFormat: monthFormat, + withPortal: withPortal, + hidden: !focusedInput, + initialVisibleMonth: initialVisibleMonth, + onOutsideClick: onOutsideClick, + navPrev: navPrev, + navNext: navNext, + renderDay: renderDay, + renderCalendarInfo: renderCalendarInfo + }); + } + + return render; + }() + }]); + + return DayPickerRangeController; + }(_react2['default'].Component); + + exports['default'] = DayPickerRangeController; + + DayPickerRangeController.propTypes = propTypes; + DayPickerRangeController.defaultProps = defaultProps; + +/***/ }, +/* 1 */ +/***/ function(module, exports) { + + module.exports = require("react"); + +/***/ }, +/* 2 */, +/* 3 */ +/***/ function(module, exports) { + + module.exports = require("react-moment-proptypes"); + +/***/ }, +/* 4 */ +/***/ function(module, exports) { + + module.exports = require("airbnb-prop-types"); + +/***/ }, +/* 5 */ +/***/ function(module, exports) { + + module.exports = require("moment"); + +/***/ }, +/* 6 */, +/* 7 */, +/* 8 */, +/* 9 */ +/***/ function(module, exports) { + + module.exports = require("../shapes/ScrollableOrientationShape"); + +/***/ }, +/* 10 */ +/***/ function(module, exports) { + + module.exports = require("../../constants"); + +/***/ }, +/* 11 */, +/* 12 */, +/* 13 */, +/* 14 */, +/* 15 */ +/***/ function(module, exports) { + + module.exports = require("../utils/isTouchDevice"); + +/***/ }, +/* 16 */, +/* 17 */, +/* 18 */ +/***/ function(module, exports) { + + module.exports = require("../defaultPhrases"); + +/***/ }, +/* 19 */, +/* 20 */, +/* 21 */ +/***/ function(module, exports) { + + module.exports = require("../utils/isInclusivelyAfterDay"); + +/***/ }, +/* 22 */, +/* 23 */, +/* 24 */, +/* 25 */, +/* 26 */ +/***/ function(module, exports) { + + module.exports = require("../utils/getPhrasePropTypes"); + +/***/ }, +/* 27 */, +/* 28 */, +/* 29 */, +/* 30 */, +/* 31 */, +/* 32 */, +/* 33 */, +/* 34 */, +/* 35 */, +/* 36 */, +/* 37 */, +/* 38 */, +/* 39 */, +/* 40 */ +/***/ function(module, exports) { + + module.exports = require("../utils/isNextDay"); + +/***/ }, +/* 41 */ +/***/ function(module, exports) { + + module.exports = require("../utils/isSameDay"); + +/***/ }, +/* 42 */ +/***/ function(module, exports) { + + module.exports = require("../shapes/FocusedInputShape"); + +/***/ }, +/* 43 */ +/***/ function(module, exports) { + + module.exports = require("./DayPicker"); + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/lib/components/OutsideClickHandler.js b/lib/components/OutsideClickHandler.js new file mode 100644 index 0000000000..afb4fedef5 --- /dev/null +++ b/lib/components/OutsideClickHandler.js @@ -0,0 +1,206 @@ +module.exports = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports, __webpack_require__) { + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + var _airbnbPropTypes = __webpack_require__(4); + + var _consolidatedEvents = __webpack_require__(11); + + 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 === "undefined" ? "undefined" : _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 === "undefined" ? "undefined" : _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 propTypes = { + children: _react.PropTypes.node, + onOutsideClick: _react.PropTypes.func + }; + + var defaultProps = (0, _airbnbPropTypes.forbidExtraProps)({ + children: _react2['default'].createElement('span', null), + onOutsideClick: function () { + function onOutsideClick() {} + + return onOutsideClick; + }() + }); + + var OutsideClickHandler = function (_React$Component) { + _inherits(OutsideClickHandler, _React$Component); + + function OutsideClickHandler(props) { + _classCallCheck(this, OutsideClickHandler); + + var _this = _possibleConstructorReturn(this, (OutsideClickHandler.__proto__ || Object.getPrototypeOf(OutsideClickHandler)).call(this, props)); + + _this.onOutsideClick = _this.onOutsideClick.bind(_this); + return _this; + } + + _createClass(OutsideClickHandler, [{ + key: 'componentDidMount', + value: function () { + function componentDidMount() { + // `capture` flag is set to true so that a `stopPropagation` in the children + // will not prevent all outside click handlers from firing - maja + this.clickHandle = (0, _consolidatedEvents.addEventListener)(document, 'click', this.onOutsideClick, { capture: true }); + } + + return componentDidMount; + }() + }, { + key: 'componentWillUnmount', + value: function () { + function componentWillUnmount() { + (0, _consolidatedEvents.removeEventListener)(this.clickHandle); + } + + return componentWillUnmount; + }() + }, { + key: 'onOutsideClick', + value: function () { + function onOutsideClick(e) { + var isDescendantOfRoot = this.childNode.contains(e.target); + if (!isDescendantOfRoot) { + this.props.onOutsideClick(e); + } + } + + return onOutsideClick; + }() + }, { + key: 'render', + value: function () { + function render() { + var _this2 = this; + + return _react2['default'].createElement('div', { ref: function () { + function ref(_ref) { + _this2.childNode = _ref; + } + + return ref; + }() }, this.props.children); + } + + return render; + }() + }]); + + return OutsideClickHandler; + }(_react2['default'].Component); + + exports['default'] = OutsideClickHandler; + + OutsideClickHandler.propTypes = propTypes; + OutsideClickHandler.defaultProps = defaultProps; + +/***/ }, +/* 1 */ +/***/ function(module, exports) { + + module.exports = require("react"); + +/***/ }, +/* 2 */, +/* 3 */, +/* 4 */ +/***/ function(module, exports) { + + module.exports = require("airbnb-prop-types"); + +/***/ }, +/* 5 */, +/* 6 */, +/* 7 */, +/* 8 */, +/* 9 */, +/* 10 */, +/* 11 */ +/***/ function(module, exports) { + + module.exports = require("consolidated-events"); + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/lib/components/SingleDatePicker.js b/lib/components/SingleDatePicker.js new file mode 100644 index 0000000000..c367d5c9cd --- /dev/null +++ b/lib/components/SingleDatePicker.js @@ -0,0 +1,923 @@ +module.exports = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ([ +/* 0 */ +/***/ function(module, exports, __webpack_require__) { + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + var _moment = __webpack_require__(5); + + var _moment2 = _interopRequireDefault(_moment); + + var _classnames = __webpack_require__(6); + + var _classnames2 = _interopRequireDefault(_classnames); + + var _reactPortal = __webpack_require__(17); + + var _reactPortal2 = _interopRequireDefault(_reactPortal); + + var _airbnbPropTypes = __webpack_require__(4); + + var _consolidatedEvents = __webpack_require__(11); + + var _defaultPhrases = __webpack_require__(18); + + var _OutsideClickHandler = __webpack_require__(19); + + var _OutsideClickHandler2 = _interopRequireDefault(_OutsideClickHandler); + + var _toMomentObject = __webpack_require__(31); + + var _toMomentObject2 = _interopRequireDefault(_toMomentObject); + + var _toLocalizedDateString = __webpack_require__(32); + + var _toLocalizedDateString2 = _interopRequireDefault(_toLocalizedDateString); + + var _toISODateString = __webpack_require__(33); + + var _toISODateString2 = _interopRequireDefault(_toISODateString); + + var _getResponsiveContainerStyles = __webpack_require__(20); + + var _getResponsiveContainerStyles2 = _interopRequireDefault(_getResponsiveContainerStyles); + + var _SingleDatePickerInput = __webpack_require__(44); + + var _SingleDatePickerInput2 = _interopRequireDefault(_SingleDatePickerInput); + + var _DayPicker = __webpack_require__(43); + + var _DayPicker2 = _interopRequireDefault(_DayPicker); + + var _close = __webpack_require__(24); + + var _close2 = _interopRequireDefault(_close); + + var _isInclusivelyAfterDay = __webpack_require__(21); + + var _isInclusivelyAfterDay2 = _interopRequireDefault(_isInclusivelyAfterDay); + + var _isSameDay = __webpack_require__(41); + + var _isSameDay2 = _interopRequireDefault(_isSameDay); + + var _SingleDatePickerShape = __webpack_require__(45); + + var _SingleDatePickerShape2 = _interopRequireDefault(_SingleDatePickerShape); + + var _constants = __webpack_require__(10); + + 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 === "undefined" ? "undefined" : _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 === "undefined" ? "undefined" : _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 propTypes = (0, _airbnbPropTypes.forbidExtraProps)(_SingleDatePickerShape2['default']); + + var defaultProps = { + // required props for a functional interactive SingleDatePicker + date: null, + focused: false, + + // input related props + id: 'date', + placeholder: 'Date', + disabled: false, + required: false, + screenReaderInputMessage: '', + showClearDate: false, + customCloseIcon: null, + + // calendar presentation and interaction related props + orientation: _constants.HORIZONTAL_ORIENTATION, + anchorDirection: _constants.ANCHOR_LEFT, + horizontalMargin: 0, + withPortal: false, + withFullScreenPortal: false, + initialVisibleMonth: null, + numberOfMonths: 2, + keepOpenOnDateSelect: false, + reopenPickerOnClearDate: false, + renderCalendarInfo: null, + + // navigation related props + navPrev: null, + navNext: null, + onPrevMonthClick: function () { + function onPrevMonthClick() {} + + return onPrevMonthClick; + }(), + onNextMonthClick: function () { + function onNextMonthClick() {} + + return onNextMonthClick; + }(), + + // day presentation and interaction related props + renderDay: null, + enableOutsideDays: false, + isDayBlocked: function () { + function isDayBlocked() { + return false; + } + + return isDayBlocked; + }(), + isOutsideRange: function () { + function isOutsideRange(day) { + return !(0, _isInclusivelyAfterDay2['default'])(day, (0, _moment2['default'])()); + } + + return isOutsideRange; + }(), + isDayHighlighted: function () { + function isDayHighlighted() {} + + return isDayHighlighted; + }(), + + // internationalization props + displayFormat: function () { + function displayFormat() { + return _moment2['default'].localeData().longDateFormat('L'); + } + + return displayFormat; + }(), + monthFormat: 'MMMM YYYY', + phrases: _defaultPhrases.SingleDatePickerPhrases + }; + + var SingleDatePicker = function (_React$Component) { + _inherits(SingleDatePicker, _React$Component); + + function SingleDatePicker(props) { + _classCallCheck(this, SingleDatePicker); + + var _this = _possibleConstructorReturn(this, (SingleDatePicker.__proto__ || Object.getPrototypeOf(SingleDatePicker)).call(this, props)); + + _this.state = { + dayPickerContainerStyles: {}, + hoverDate: null + }; + + _this.today = (0, _moment2['default'])(); + + _this.onDayMouseEnter = _this.onDayMouseEnter.bind(_this); + _this.onDayMouseLeave = _this.onDayMouseLeave.bind(_this); + _this.onDayClick = _this.onDayClick.bind(_this); + + _this.onChange = _this.onChange.bind(_this); + _this.onFocus = _this.onFocus.bind(_this); + _this.onClearFocus = _this.onClearFocus.bind(_this); + _this.clearDate = _this.clearDate.bind(_this); + + _this.responsivizePickerPosition = _this.responsivizePickerPosition.bind(_this); + return _this; + } + + /* istanbul ignore next */ + + _createClass(SingleDatePicker, [{ + key: 'componentDidMount', + value: function () { + function componentDidMount() { + this.resizeHandle = (0, _consolidatedEvents.addEventListener)(window, 'resize', this.responsivizePickerPosition, { passive: true }); + this.responsivizePickerPosition(); + } + + return componentDidMount; + }() + }, { + key: 'componentWillUpdate', + value: function () { + function componentWillUpdate() { + this.today = (0, _moment2['default'])(); + } + + return componentWillUpdate; + }() + }, { + key: 'componentDidUpdate', + value: function () { + function componentDidUpdate(prevProps) { + if (!prevProps.focused && this.props.focused) { + this.responsivizePickerPosition(); + } + } + + return componentDidUpdate; + }() + + /* istanbul ignore next */ + + }, { + key: 'componentWillUnmount', + value: function () { + function componentWillUnmount() { + (0, _consolidatedEvents.removeEventListener)(this.resizeHandle); + } + + return componentWillUnmount; + }() + }, { + key: 'onChange', + value: function () { + function onChange(dateString) { + var _props = this.props; + var isOutsideRange = _props.isOutsideRange; + var keepOpenOnDateSelect = _props.keepOpenOnDateSelect; + var onDateChange = _props.onDateChange; + var onFocusChange = _props.onFocusChange; + + var date = (0, _toMomentObject2['default'])(dateString, this.getDisplayFormat()); + + var isValid = date && !isOutsideRange(date); + if (isValid) { + onDateChange(date); + if (!keepOpenOnDateSelect) onFocusChange({ focused: false }); + } else { + onDateChange(null); + } + } + + return onChange; + }() + }, { + key: 'onDayClick', + value: function () { + function onDayClick(day, e) { + if (e) e.preventDefault(); + if (this.isBlocked(day)) return; + + this.props.onDateChange(day); + if (!this.props.keepOpenOnDateSelect) this.props.onFocusChange({ focused: null }); + } + + return onDayClick; + }() + }, { + key: 'onDayMouseEnter', + value: function () { + function onDayMouseEnter(day) { + this.setState({ + hoverDate: day + }); + } + + return onDayMouseEnter; + }() + }, { + key: 'onDayMouseLeave', + value: function () { + function onDayMouseLeave() { + this.setState({ + hoverDate: null + }); + } + + return onDayMouseLeave; + }() + }, { + key: 'onFocus', + value: function () { + function onFocus() { + if (!this.props.disabled) { + this.props.onFocusChange({ focused: true }); + } + } + + return onFocus; + }() + }, { + key: 'onClearFocus', + value: function () { + function onClearFocus() { + var _props2 = this.props; + var focused = _props2.focused; + var onFocusChange = _props2.onFocusChange; + + if (!focused) return; + + onFocusChange({ focused: false }); + } + + return onClearFocus; + }() + }, { + key: 'getDateString', + value: function () { + function getDateString(date) { + var displayFormat = this.getDisplayFormat(); + if (date && displayFormat) { + return date && date.format(displayFormat); + } + return (0, _toLocalizedDateString2['default'])(date); + } + + return getDateString; + }() + }, { + key: 'getDayPickerContainerClasses', + value: function () { + function getDayPickerContainerClasses() { + var _props3 = this.props; + var orientation = _props3.orientation; + var withPortal = _props3.withPortal; + var withFullScreenPortal = _props3.withFullScreenPortal; + var anchorDirection = _props3.anchorDirection; + var hoverDate = this.state.hoverDate; + + var dayPickerClassName = (0, _classnames2['default'])('SingleDatePicker__picker', { + 'SingleDatePicker__picker--direction-left': anchorDirection === _constants.ANCHOR_LEFT, + 'SingleDatePicker__picker--direction-right': anchorDirection === _constants.ANCHOR_RIGHT, + 'SingleDatePicker__picker--horizontal': orientation === _constants.HORIZONTAL_ORIENTATION, + 'SingleDatePicker__picker--vertical': orientation === _constants.VERTICAL_ORIENTATION, + 'SingleDatePicker__picker--portal': withPortal || withFullScreenPortal, + 'SingleDatePicker__picker--full-screen-portal': withFullScreenPortal, + 'SingleDatePicker__picker--valid-date-hovered': hoverDate && !this.isBlocked(hoverDate) + }); + + return dayPickerClassName; + } + + return getDayPickerContainerClasses; + }() + }, { + key: 'getDisplayFormat', + value: function () { + function getDisplayFormat() { + var displayFormat = this.props.displayFormat; + + return typeof displayFormat === 'string' ? displayFormat : displayFormat(); + } + + return getDisplayFormat; + }() + }, { + key: 'clearDate', + value: function () { + function clearDate() { + var _props4 = this.props; + var onDateChange = _props4.onDateChange; + var reopenPickerOnClearDate = _props4.reopenPickerOnClearDate; + var onFocusChange = _props4.onFocusChange; + + onDateChange(null); + if (reopenPickerOnClearDate) { + onFocusChange({ focused: true }); + } + } + + return clearDate; + }() + + /* istanbul ignore next */ + + }, { + key: 'responsivizePickerPosition', + value: function () { + function responsivizePickerPosition() { + var _props5 = this.props; + var anchorDirection = _props5.anchorDirection; + var horizontalMargin = _props5.horizontalMargin; + var withPortal = _props5.withPortal; + var withFullScreenPortal = _props5.withFullScreenPortal; + var focused = _props5.focused; + var dayPickerContainerStyles = this.state.dayPickerContainerStyles; + + if (!focused) { + return; + } + + var isAnchoredLeft = anchorDirection === _constants.ANCHOR_LEFT; + + if (!withPortal && !withFullScreenPortal) { + var containerRect = this.dayPickerContainer.getBoundingClientRect(); + var currentOffset = dayPickerContainerStyles[anchorDirection] || 0; + var containerEdge = isAnchoredLeft ? containerRect[_constants.ANCHOR_RIGHT] : containerRect[_constants.ANCHOR_LEFT]; + + this.setState({ + dayPickerContainerStyles: (0, _getResponsiveContainerStyles2['default'])(anchorDirection, currentOffset, containerEdge, horizontalMargin) + }); + } + } + + return responsivizePickerPosition; + }() + }, { + key: 'isBlocked', + value: function () { + function isBlocked(day) { + var _props6 = this.props; + var isDayBlocked = _props6.isDayBlocked; + var isOutsideRange = _props6.isOutsideRange; + + return isDayBlocked(day) || isOutsideRange(day); + } + + return isBlocked; + }() + }, { + key: 'isHovered', + value: function () { + function isHovered(day) { + return (0, _isSameDay2['default'])(day, this.state.hoverDate); + } + + return isHovered; + }() + }, { + key: 'isSelected', + value: function () { + function isSelected(day) { + return (0, _isSameDay2['default'])(day, this.props.date); + } + + return isSelected; + }() + }, { + key: 'isToday', + value: function () { + function isToday(day) { + return (0, _isSameDay2['default'])(day, this.today); + } + + return isToday; + }() + }, { + key: 'maybeRenderDayPickerWithPortal', + value: function () { + function maybeRenderDayPickerWithPortal() { + var _props7 = this.props; + var focused = _props7.focused; + var withPortal = _props7.withPortal; + var withFullScreenPortal = _props7.withFullScreenPortal; + + if (!focused) { + return null; + } + + if (withPortal || withFullScreenPortal) { + return _react2['default'].createElement(_reactPortal2['default'], { isOpened: true }, this.renderDayPicker()); + } + + return this.renderDayPicker(); + } + + return maybeRenderDayPickerWithPortal; + }() + }, { + key: 'renderDayPicker', + value: function () { + function renderDayPicker() { + var _this2 = this; + + var _props8 = this.props; + var isDayBlocked = _props8.isDayBlocked; + var isDayHighlighted = _props8.isDayHighlighted; + var isOutsideRange = _props8.isOutsideRange; + var enableOutsideDays = _props8.enableOutsideDays; + var numberOfMonths = _props8.numberOfMonths; + var orientation = _props8.orientation; + var monthFormat = _props8.monthFormat; + var navPrev = _props8.navPrev; + var navNext = _props8.navNext; + var onPrevMonthClick = _props8.onPrevMonthClick; + var onNextMonthClick = _props8.onNextMonthClick; + var withPortal = _props8.withPortal; + var withFullScreenPortal = _props8.withFullScreenPortal; + var focused = _props8.focused; + var renderDay = _props8.renderDay; + var renderCalendarInfo = _props8.renderCalendarInfo; + var date = _props8.date; + var initialVisibleMonth = _props8.initialVisibleMonth; + var customCloseIcon = _props8.customCloseIcon; + var dayPickerContainerStyles = this.state.dayPickerContainerStyles; + + var modifiers = { + today: function () { + function today(day) { + return _this2.isToday(day); + } + + return today; + }(), + blocked: function () { + function blocked(day) { + return _this2.isBlocked(day); + } + + return blocked; + }(), + 'blocked-calendar': function () { + function blockedCalendar(day) { + return isDayBlocked(day); + } + + return blockedCalendar; + }(), + 'blocked-out-of-range': function () { + function blockedOutOfRange(day) { + return isOutsideRange(day); + } + + return blockedOutOfRange; + }(), + 'highlighted-calendar': function () { + function highlightedCalendar(day) { + return isDayHighlighted(day); + } + + return highlightedCalendar; + }(), + valid: function () { + function valid(day) { + return !_this2.isBlocked(day); + } + + return valid; + }(), + hovered: function () { + function hovered(day) { + return _this2.isHovered(day); + } + + return hovered; + }(), + selected: function () { + function selected(day) { + return _this2.isSelected(day); + } + + return selected; + }() + }; + + var onOutsideClick = !withFullScreenPortal && withPortal ? this.onClearFocus : undefined; + var initialVisibleMonthThunk = initialVisibleMonth || function () { + return date || (0, _moment2['default'])(); + }; + var closeIcon = customCloseIcon || _react2['default'].createElement(_close2['default'], null); + + return _react2['default'].createElement('div', { + ref: function () { + function ref(_ref) { + _this2.dayPickerContainer = _ref; + } + + return ref; + }(), + className: this.getDayPickerContainerClasses(), + style: dayPickerContainerStyles + }, _react2['default'].createElement(_DayPicker2['default'], { + orientation: orientation, + enableOutsideDays: enableOutsideDays, + modifiers: modifiers, + numberOfMonths: numberOfMonths, + onDayClick: this.onDayClick, + onDayMouseEnter: this.onDayMouseEnter, + onDayMouseLeave: this.onDayMouseLeave, + onPrevMonthClick: onPrevMonthClick, + onNextMonthClick: onNextMonthClick, + monthFormat: monthFormat, + withPortal: withPortal || withFullScreenPortal, + hidden: !focused, + initialVisibleMonth: initialVisibleMonthThunk, + onOutsideClick: onOutsideClick, + navPrev: navPrev, + navNext: navNext, + renderDay: renderDay, + renderCalendarInfo: renderCalendarInfo + }), withFullScreenPortal && _react2['default'].createElement('button', { + className: 'SingleDatePicker__close', + type: 'button', + onClick: this.onClearFocus + }, _react2['default'].createElement('span', { className: 'screen-reader-only' }, this.props.phrases.closeDatePicker), _react2['default'].createElement('div', { className: 'SingleDatePicker__close-icon' }, closeIcon))); + } + + return renderDayPicker; + }() + }, { + key: 'render', + value: function () { + function render() { + var _props9 = this.props; + var id = _props9.id; + var placeholder = _props9.placeholder; + var focused = _props9.focused; + var disabled = _props9.disabled; + var required = _props9.required; + var showClearDate = _props9.showClearDate; + var date = _props9.date; + var phrases = _props9.phrases; + var withPortal = _props9.withPortal; + var withFullScreenPortal = _props9.withFullScreenPortal; + var screenReaderInputMessage = _props9.screenReaderInputMessage; + + var displayValue = this.getDateString(date); + var inputValue = (0, _toISODateString2['default'])(date); + + var onOutsideClick = !withPortal && !withFullScreenPortal ? this.onClearFocus : undefined; + + return _react2['default'].createElement('div', { className: 'SingleDatePicker' }, _react2['default'].createElement(_OutsideClickHandler2['default'], { onOutsideClick: onOutsideClick }, _react2['default'].createElement(_SingleDatePickerInput2['default'], { + id: id, + placeholder: placeholder, + focused: focused, + disabled: disabled, + required: required, + showCaret: !withPortal && !withFullScreenPortal, + phrases: phrases, + onClearDate: this.clearDate, + showClearDate: showClearDate, + displayValue: displayValue, + inputValue: inputValue, + onChange: this.onChange, + onFocus: this.onFocus, + onKeyDownShiftTab: this.onClearFocus, + onKeyDownTab: this.onClearFocus, + screenReaderMessage: screenReaderInputMessage + }), this.maybeRenderDayPickerWithPortal())); + } + + return render; + }() + }]); + + return SingleDatePicker; + }(_react2['default'].Component); + + exports['default'] = SingleDatePicker; + + SingleDatePicker.propTypes = propTypes; + SingleDatePicker.defaultProps = defaultProps; + +/***/ }, +/* 1 */ +/***/ function(module, exports) { + + module.exports = require("react"); + +/***/ }, +/* 2 */, +/* 3 */, +/* 4 */ +/***/ function(module, exports) { + + module.exports = require("airbnb-prop-types"); + +/***/ }, +/* 5 */ +/***/ function(module, exports) { + + module.exports = require("moment"); + +/***/ }, +/* 6 */ +/***/ function(module, exports) { + + module.exports = require("classnames"); + +/***/ }, +/* 7 */, +/* 8 */, +/* 9 */, +/* 10 */ +/***/ function(module, exports) { + + module.exports = require("../../constants"); + +/***/ }, +/* 11 */ +/***/ function(module, exports) { + + module.exports = require("consolidated-events"); + +/***/ }, +/* 12 */, +/* 13 */, +/* 14 */, +/* 15 */, +/* 16 */, +/* 17 */ +/***/ function(module, exports) { + + module.exports = require("react-portal"); + +/***/ }, +/* 18 */ +/***/ function(module, exports) { + + module.exports = require("../defaultPhrases"); + +/***/ }, +/* 19 */ +/***/ function(module, exports) { + + module.exports = require("./OutsideClickHandler"); + +/***/ }, +/* 20 */ +/***/ function(module, exports) { + + module.exports = require("../utils/getResponsiveContainerStyles"); + +/***/ }, +/* 21 */ +/***/ function(module, exports) { + + module.exports = require("../utils/isInclusivelyAfterDay"); + +/***/ }, +/* 22 */, +/* 23 */, +/* 24 */ +/***/ function(module, exports, __webpack_require__) { + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + 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 SVG = function (_React$Component) { + _inherits(SVG, _React$Component); + + function SVG() { + _classCallCheck(this, SVG); + + return _possibleConstructorReturn(this, (SVG.__proto__ || Object.getPrototypeOf(SVG)).apply(this, arguments)); + } + + _createClass(SVG, [{ + key: "render", + value: function () { + function render() { + return _react2["default"].createElement( + "svg", + _extends({ viewBox: "0 0 12 12" }, this.props), + _react2["default"].createElement("path", { fillRule: "evenodd", d: "M11.53.47a.75.75 0 0 0-1.061 0l-4.47 4.47L1.529.47A.75.75 0 1 0 .468 1.531l4.47 4.47-4.47 4.47a.75.75 0 1 0 1.061 1.061l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.061-1.061l-4.47-4.47 4.47-4.47a.75.75 0 0 0 0-1.061z" }) + ); + } + + return render; + }() + }]); + + return SVG; + }(_react2["default"].Component); + + exports["default"] = SVG; + +/***/ }, +/* 25 */, +/* 26 */, +/* 27 */, +/* 28 */, +/* 29 */, +/* 30 */, +/* 31 */ +/***/ function(module, exports) { + + module.exports = require("../utils/toMomentObject"); + +/***/ }, +/* 32 */ +/***/ function(module, exports) { + + module.exports = require("../utils/toLocalizedDateString"); + +/***/ }, +/* 33 */ +/***/ function(module, exports) { + + module.exports = require("../utils/toISODateString"); + +/***/ }, +/* 34 */, +/* 35 */, +/* 36 */, +/* 37 */, +/* 38 */, +/* 39 */, +/* 40 */, +/* 41 */ +/***/ function(module, exports) { + + module.exports = require("../utils/isSameDay"); + +/***/ }, +/* 42 */, +/* 43 */ +/***/ function(module, exports) { + + module.exports = require("./DayPicker"); + +/***/ }, +/* 44 */ +/***/ function(module, exports) { + + module.exports = require("./SingleDatePickerInput"); + +/***/ }, +/* 45 */ +/***/ function(module, exports) { + + module.exports = require("../shapes/SingleDatePickerShape"); + +/***/ } +/******/ ]); \ No newline at end of file diff --git a/lib/components/SingleDatePickerInput.js b/lib/components/SingleDatePickerInput.js new file mode 100644 index 0000000000..022313ea38 --- /dev/null +++ b/lib/components/SingleDatePickerInput.js @@ -0,0 +1,379 @@ +module.exports = +/******/ (function(modules) { // webpackBootstrap +/******/ // The module cache +/******/ var installedModules = {}; + +/******/ // The require function +/******/ function __webpack_require__(moduleId) { + +/******/ // Check if module is in cache +/******/ if(installedModules[moduleId]) +/******/ return installedModules[moduleId].exports; + +/******/ // Create a new module (and put it into the cache) +/******/ var module = installedModules[moduleId] = { +/******/ exports: {}, +/******/ id: moduleId, +/******/ loaded: false +/******/ }; + +/******/ // Execute the module function +/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); + +/******/ // Flag the module as loaded +/******/ module.loaded = true; + +/******/ // Return the exports of the module +/******/ return module.exports; +/******/ } + + +/******/ // expose the modules object (__webpack_modules__) +/******/ __webpack_require__.m = modules; + +/******/ // expose the module cache +/******/ __webpack_require__.c = installedModules; + +/******/ // __webpack_public_path__ +/******/ __webpack_require__.p = ""; + +/******/ // Load entry module and return exports +/******/ return __webpack_require__(0); +/******/ }) +/************************************************************************/ +/******/ ({ + +/***/ 0: +/***/ function(module, exports, __webpack_require__) { + + var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; + + Object.defineProperty(exports, "__esModule", { + value: true + }); + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + var _airbnbPropTypes = __webpack_require__(4); + + var _classnames = __webpack_require__(6); + + var _classnames2 = _interopRequireDefault(_classnames); + + var _defaultPhrases = __webpack_require__(18); + + var _getPhrasePropTypes = __webpack_require__(26); + + var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes); + + var _DateInput = __webpack_require__(27); + + var _DateInput2 = _interopRequireDefault(_DateInput); + + var _close = __webpack_require__(24); + + var _close2 = _interopRequireDefault(_close); + + 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 === "undefined" ? "undefined" : _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 === "undefined" ? "undefined" : _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 propTypes = (0, _airbnbPropTypes.forbidExtraProps)({ + id: _react.PropTypes.string.isRequired, + placeholder: _react.PropTypes.string, // also used as label + displayValue: _react.PropTypes.string, + inputValue: _react.PropTypes.string, + screenReaderMessage: _react.PropTypes.string, + focused: _react.PropTypes.bool, + disabled: _react.PropTypes.bool, + required: _react.PropTypes.bool, + showCaret: _react.PropTypes.bool, + showClearDate: _react.PropTypes.bool, + customCloseIcon: _react.PropTypes.node, + + onChange: _react.PropTypes.func, + onClearDate: _react.PropTypes.func, + onFocus: _react.PropTypes.func, + onKeyDownShiftTab: _react.PropTypes.func, + onKeyDownTab: _react.PropTypes.func, + + // i18n + phrases: _react.PropTypes.shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.SingleDatePickerInputPhrases)) + }); + + var defaultProps = { + placeholder: 'Select Date', + displayValue: '', + inputValue: '', + screenReaderMessage: '', + focused: false, + disabled: false, + required: false, + showCaret: false, + showClearDate: false, + customCloseIcon: null, + + onChange: function () { + function onChange() {} + + return onChange; + }(), + onClearDate: function () { + function onClearDate() {} + + return onClearDate; + }(), + onFocus: function () { + function onFocus() {} + + return onFocus; + }(), + onKeyDownShiftTab: function () { + function onKeyDownShiftTab() {} + + return onKeyDownShiftTab; + }(), + onKeyDownTab: function () { + function onKeyDownTab() {} + + return onKeyDownTab; + }(), + + // i18n + phrases: _defaultPhrases.SingleDatePickerInputPhrases + }; + + var SingleDatePickerInput = function (_React$Component) { + _inherits(SingleDatePickerInput, _React$Component); + + function SingleDatePickerInput(props) { + _classCallCheck(this, SingleDatePickerInput); + + var _this = _possibleConstructorReturn(this, (SingleDatePickerInput.__proto__ || Object.getPrototypeOf(SingleDatePickerInput)).call(this, props)); + + _this.state = { + isClearDateHovered: false + }; + + _this.onClearDateMouseEnter = _this.onClearDateMouseEnter.bind(_this); + _this.onClearDateMouseLeave = _this.onClearDateMouseLeave.bind(_this); + return _this; + } + + _createClass(SingleDatePickerInput, [{ + key: 'onClearDateMouseEnter', + value: function () { + function onClearDateMouseEnter() { + this.setState({ + isClearDateHovered: true + }); + } + + return onClearDateMouseEnter; + }() + }, { + key: 'onClearDateMouseLeave', + value: function () { + function onClearDateMouseLeave() { + this.setState({ + isClearDateHovered: false + }); + } + + return onClearDateMouseLeave; + }() + }, { + key: 'render', + value: function () { + function render() { + var isClearDateHovered = this.state.isClearDateHovered; + var _props = this.props; + var id = _props.id; + var placeholder = _props.placeholder; + var displayValue = _props.displayValue; + var inputValue = _props.inputValue; + var focused = _props.focused; + var disabled = _props.disabled; + var required = _props.required; + var showCaret = _props.showCaret; + var showClearDate = _props.showClearDate; + var phrases = _props.phrases; + var onClearDate = _props.onClearDate; + var onChange = _props.onChange; + var onFocus = _props.onFocus; + var onKeyDownShiftTab = _props.onKeyDownShiftTab; + var onKeyDownTab = _props.onKeyDownTab; + var screenReaderMessage = _props.screenReaderMessage; + var customCloseIcon = _props.customCloseIcon; + + var closeIcon = customCloseIcon || _react2['default'].createElement(_close2['default'], null); + + return _react2['default'].createElement('div', { className: 'SingleDatePickerInput' }, _react2['default'].createElement(_DateInput2['default'], { + id: id, + placeholder: placeholder // also used as label + , displayValue: displayValue, + inputValue: inputValue, + screenReaderMessage: screenReaderMessage, + focused: focused, + disabled: disabled, + required: required, + showCaret: showCaret, + + onChange: onChange, + onFocus: onFocus, + onKeyDownShiftTab: onKeyDownShiftTab, + onKeyDownTab: onKeyDownTab + }), showClearDate && _react2['default'].createElement('button', { + type: 'button', + className: (0, _classnames2['default'])('SingleDatePickerInput__clear-date', { + 'SingleDatePickerInput__clear-date--hide': !displayValue, + 'SingleDatePickerInput__clear-date--hover': isClearDateHovered + }), + 'aria-label': phrases.clearDate, + onMouseEnter: this.onClearDateMouseEnter, + onMouseLeave: this.onClearDateMouseLeave, + onClick: onClearDate + }, _react2['default'].createElement('div', { className: 'DateRangePickerInput__close' }, closeIcon))); + } + + return render; + }() + }]); + + return SingleDatePickerInput; + }(_react2['default'].Component); + + exports['default'] = SingleDatePickerInput; + + SingleDatePickerInput.propTypes = propTypes; + SingleDatePickerInput.defaultProps = defaultProps; + +/***/ }, + +/***/ 1: +/***/ function(module, exports) { + + module.exports = require("react"); + +/***/ }, + +/***/ 4: +/***/ function(module, exports) { + + module.exports = require("airbnb-prop-types"); + +/***/ }, + +/***/ 6: +/***/ function(module, exports) { + + module.exports = require("classnames"); + +/***/ }, + +/***/ 18: +/***/ function(module, exports) { + + module.exports = require("../defaultPhrases"); + +/***/ }, + +/***/ 24: +/***/ function(module, exports, __webpack_require__) { + + 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 = __webpack_require__(1); + + var _react2 = _interopRequireDefault(_react); + + 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 SVG = function (_React$Component) { + _inherits(SVG, _React$Component); + + function SVG() { + _classCallCheck(this, SVG); + + return _possibleConstructorReturn(this, (SVG.__proto__ || Object.getPrototypeOf(SVG)).apply(this, arguments)); + } + + _createClass(SVG, [{ + key: "render", + value: function () { + function render() { + return _react2["default"].createElement( + "svg", + _extends({ viewBox: "0 0 12 12" }, this.props), + _react2["default"].createElement("path", { fillRule: "evenodd", d: "M11.53.47a.75.75 0 0 0-1.061 0l-4.47 4.47L1.529.47A.75.75 0 1 0 .468 1.531l4.47 4.47-4.47 4.47a.75.75 0 1 0 1.061 1.061l4.47-4.47 4.47 4.47a.75.75 0 1 0 1.061-1.061l-4.47-4.47 4.47-4.47a.75.75 0 0 0 0-1.061z" }) + ); + } + + return render; + }() + }]); + + return SVG; + }(_react2["default"].Component); + + exports["default"] = SVG; + +/***/ }, + +/***/ 26: +/***/ function(module, exports) { + + module.exports = require("../utils/getPhrasePropTypes"); + +/***/ }, + +/***/ 27: +/***/ function(module, exports) { + + module.exports = require("./DateInput"); + +/***/ } + +/******/ }); \ No newline at end of file diff --git a/lib/css/_datepicker.css b/lib/css/_datepicker.css new file mode 100644 index 0000000000..c9658c400a --- /dev/null +++ b/lib/css/_datepicker.css @@ -0,0 +1,566 @@ +.CalendarDay { + border: 1px solid #e4e7e7; + padding: 0; + box-sizing: border-box; + color: #565a5c; + cursor: pointer; + width: 39px; + height: 38px; } + .CalendarDay:active { + background: #f2f2f2; } + +.CalendarDay--highlighted-calendar { + background: #ffe8bc; + color: #565a5c; + cursor: default; } + .CalendarDay--highlighted-calendar:active { + background: #007a87; } + +.CalendarDay--outside { + border: 0; + cursor: default; } + .CalendarDay--outside:active { + background: #fff; } + +.CalendarDay--hovered { + background: #e4e7e7; + border: 1px double #d4d9d9; + color: inherit; } + +.CalendarDay--blocked-minimum-nights { + color: #cacccd; + background: #fff; + border: 1px solid #e4e7e7; + cursor: default; } + .CalendarDay--blocked-minimum-nights:active { + background: #fff; } + +.CalendarDay--selected-span { + background: #66e2da; + border: 1px double #33dacd; + color: #fff; } + .CalendarDay--selected-span.CalendarDay--hovered, .CalendarDay--selected-span:active { + background: #33dacd; + border: 1px double #00a699; } + .CalendarDay--selected-span.CalendarDay--last-in-range { + border-right: #00a699; } + +.CalendarDay--hovered-span, +.CalendarDay--after-hovered-start { + background: #b2f1ec; + border: 1px double #80e8e0; + color: #007a87; } + +.CalendarDay--selected-start, +.CalendarDay--selected-end, +.CalendarDay--selected { + background: #00a699; + border: 1px double #00a699; + color: #fff; } + .CalendarDay--selected-start:active, + .CalendarDay--selected-end:active, + .CalendarDay--selected:active { + background: #00a699; } + +.CalendarDay--blocked-calendar { + background: #cacccd; + color: #82888a; + cursor: default; } + .CalendarDay--blocked-calendar:active { + background: #cacccd; } + +.CalendarDay--blocked-out-of-range { + color: #cacccd; + background: #fff; + border: 1px solid #e4e7e7; + cursor: default; } + .CalendarDay--blocked-out-of-range:active { + background: #fff; } + +.CalendarMonth { + text-align: center; + padding: 0 13px; + vertical-align: top; + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; } + .CalendarMonth:first-of-type { + position: absolute; + z-index: -1; + opacity: 0; + pointer-events: none; } + .CalendarMonth table { + border-collapse: collapse; + border-spacing: 0; + caption-caption-side: initial; } + +.CalendarMonth--horizontal { + display: inline-block; + min-height: 100%; } + +.CalendarMonth--vertical { + display: block; } + +.CalendarMonth__caption { + color: #3c3f40; + margin-top: 7px; + font-size: 18px; + text-align: center; + margin-bottom: 2px; + caption-side: initial; } + +.CalendarMonth--horizontal .CalendarMonth__caption, +.CalendarMonth--vertical .CalendarMonth__caption { + padding: 15px 0 35px; } + +.CalendarMonth--vertical-scrollable .CalendarMonth__caption { + padding: 5px 0; } + +.CalendarMonthGrid { + background: #fff; + z-index: 0; + text-align: left; } + +.CalendarMonthGrid--animating { + -webkit-transition: -webkit-transform 0.2s ease-in-out; + -moz-transition: -moz-transform 0.2s ease-in-out; + transition: transform 0.2s ease-in-out; + z-index: 1; } + +.CalendarMonthGrid--horizontal { + position: absolute; + left: 9px; + width: 1200px; } + +.CalendarMonthGrid--vertical { + width: 300px; + margin: 0 auto; } + +.CalendarMonthGrid--vertical-scrollable { + width: 300px; + margin: 0 auto; + overflow-y: scroll; } + +.DayPicker { + background: #fff; + position: relative; + text-align: left; } + +.DayPicker--horizontal { + background: #fff; + box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.07); + border-radius: 3px; } + .DayPicker--horizontal.DayPicker--portal { + box-shadow: none; + position: absolute; + left: 50%; + top: 50%; } + +.DayPicker--vertical.DayPicker--portal { + position: initial; } + +.DayPicker__week-headers { + position: relative; } + +.DayPicker--horizontal .DayPicker__week-headers { + margin-left: 9px; } + +.DayPicker__week-header { + color: #757575; + position: absolute; + width: 300px; + top: 62px; + z-index: 2; + padding: 0 13px; + text-align: left; } + .DayPicker__week-header ul { + list-style: none; + margin: 1px 0; + padding-left: 0; } + .DayPicker__week-header li { + display: inline-block; + width: 39px; + text-align: center; } + +.DayPicker--vertical .DayPicker__week-header { + margin-left: -150px; + left: 50%; } + +.DayPicker--vertical-scrollable { + height: 100%; } + .DayPicker--vertical-scrollable .DayPicker__week-header { + top: 0; + display: table-row; + border-bottom: 1px solid #dbdbdb; + background: white; } + .DayPicker--vertical-scrollable .transition-container--vertical { + padding-top: 20px; + height: 100%; + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; + overflow-y: scroll; } + .DayPicker--vertical-scrollable .DayPicker__week-header { + margin-left: 0; + left: 0; + width: 100%; + text-align: center; } + +.transition-container { + position: relative; + overflow: hidden; + border-radius: 3px; } + +.transition-container--horizontal { + transition: height 0.2s ease-in-out; } + +.transition-container--vertical { + width: 100%; } + +.DayPickerNavigation__prev, +.DayPickerNavigation__next { + cursor: pointer; + line-height: 0.78; + -webkit-user-select: none; + /* Chrome/Safari */ + -moz-user-select: none; + /* Firefox */ + -ms-user-select: none; + /* IE10+ */ + user-select: none; } + +.DayPickerNavigation__prev--default, +.DayPickerNavigation__next--default { + border: 1px solid #dce0e0; + background-color: #fff; + color: #757575; } + .DayPickerNavigation__prev--default:focus, .DayPickerNavigation__prev--default:hover, + .DayPickerNavigation__next--default:focus, + .DayPickerNavigation__next--default:hover { + border: 1px solid #c4c4c4; } + .DayPickerNavigation__prev--default:active, + .DayPickerNavigation__next--default:active { + background: #f2f2f2; } + +.DayPickerNavigation--horizontal { + position: relative; } + .DayPickerNavigation--horizontal .DayPickerNavigation__prev, + .DayPickerNavigation--horizontal .DayPickerNavigation__next { + border-radius: 3px; + padding: 6px 9px; + top: 18px; + z-index: 2; + position: absolute; } + .DayPickerNavigation--horizontal .DayPickerNavigation__prev { + left: 22px; } + .DayPickerNavigation--horizontal .DayPickerNavigation__next { + right: 22px; } + .DayPickerNavigation--horizontal .DayPickerNavigation__prev--default svg, + .DayPickerNavigation--horizontal .DayPickerNavigation__next--default svg { + height: 19px; + width: 19px; + fill: #82888a; } + +.DayPickerNavigation--vertical { + background: #fff; + box-shadow: 0 0 5px 2px rgba(0, 0, 0, 0.1); + position: absolute; + bottom: 0; + left: 0; + height: 52px; + width: 100%; + z-index: 2; } + .DayPickerNavigation--vertical .DayPickerNavigation__prev, + .DayPickerNavigation--vertical .DayPickerNavigation__next { + display: inline-block; + position: relative; + height: 100%; + width: 50%; } + .DayPickerNavigation--vertical .DayPickerNavigation__next--default { + border-left: 0; } + .DayPickerNavigation--vertical .DayPickerNavigation__prev--default, + .DayPickerNavigation--vertical .DayPickerNavigation__next--default { + text-align: center; + font-size: 2.5em; + padding: 5px; } + .DayPickerNavigation--vertical .DayPickerNavigation__prev--default svg, + .DayPickerNavigation--vertical .DayPickerNavigation__next--default svg { + height: 42px; + width: 42px; + fill: #484848; } + +.DayPickerNavigation--vertical-scrollable { + position: relative; } + .DayPickerNavigation--vertical-scrollable .DayPickerNavigation__next { + width: 100%; } + +.DateInput { + font-weight: 200; + font-size: 18px; + line-height: 24px; + color: #757575; + margin: 0; + padding: 8px; + background: #fff; + position: relative; + display: inline-block; + width: 130px; + vertical-align: middle; } + +.DateInput--with-caret::before, +.DateInput--with-caret::after { + content: ""; + display: inline-block; + position: absolute; + bottom: auto; + border: 10px solid transparent; + border-top: 0; + left: 22px; + z-index: 2; } + +.DateInput--with-caret::before { + top: 62px; + border-bottom-color: rgba(0, 0, 0, 0.1); } + +.DateInput--with-caret::after { + top: 63px; + border-bottom-color: #fff; } + +.DateInput--disabled { + background: #cacccd; } + +.DateInput__input { + opacity: 0; + position: absolute; + top: 0; + left: 0; + border: 0; + height: 100%; + width: 100%; } + .DateInput__input[readonly] { + -moz-user-select: none; + -webkit-user-select: none; + -ms-user-select: none; + user-select: none; } + +.DateInput__display-text { + padding: 4px 8px; + white-space: nowrap; + overflow: hidden; } + +.DateInput__display-text--has-input { + color: #484848; } + +.DateInput__display-text--focused { + background: #99ede6; + border-color: #99ede6; + border-radius: 3px; + color: #007a87; } + +.DateInput__display-text--disabled { + font-style: italic; } + +.screen-reader-only { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; } + +.DateRangePicker { + position: relative; + display: inline-block; } + +.DateRangePicker__picker { + z-index: 1; + background-color: #fff; + position: absolute; + top: 72px; } + +.DateRangePicker__picker--direction-left { + left: 0; } + +.DateRangePicker__picker--direction-right { + right: 0; } + +.DateRangePicker__picker--portal { + background-color: rgba(0, 0, 0, 0.3); + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; } + +.DateRangePicker__picker--full-screen-portal { + background-color: #fff; } + +.DateRangePicker__close { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + cursor: pointer; + position: absolute; + top: 0; + right: 0; + padding: 15px; + z-index: 2; } + .DateRangePicker__close svg { + height: 15px; + width: 15px; + fill: #cacccd; } + .DateRangePicker__close:hover, .DateRangePicker__close:focus { + color: #b0b3b4; + text-decoration: none; } + +.DateRangePickerInput { + background-color: #fff; + border: 1px solid #cacccd; + display: inline-block; } + +.DateRangePickerInput--disabled { + background: #cacccd; } + +.DateRangePickerInput__arrow { + display: inline-block; + vertical-align: middle; } + +.DateRangePickerInput__arrow svg { + vertical-align: middle; + fill: #484848; + height: 24px; + width: 24px; } + +.DateRangePickerInput__clear-dates { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + cursor: pointer; + display: inline-block; + vertical-align: middle; + padding: 10px; + margin: 0 10px 0 5px; } + +.DateRangePickerInput__clear-dates svg { + fill: #82888a; + height: 12px; + width: 15px; + vertical-align: middle; } + +.DateRangePickerInput__clear-dates--hide { + visibility: hidden; } + +.DateRangePickerInput__clear-dates:focus, +.DateRangePickerInput__clear-dates--hover { + background: #dbdbdb; + border-radius: 50%; } + +.DateRangePickerInput__calendar-icon { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + cursor: pointer; + display: inline-block; + vertical-align: middle; + padding: 10px; + margin: 0 5px 0 10px; } + .DateRangePickerInput__calendar-icon svg { + fill: #82888a; + height: 15px; + width: 14px; + vertical-align: middle; } + +.SingleDatePicker { + position: relative; + display: inline-block; } + +.SingleDatePicker__picker { + z-index: 1; + background-color: #fff; + position: absolute; + top: 72px; } + +.SingleDatePicker__picker--direction-left { + left: 0; } + +.SingleDatePicker__picker--direction-right { + right: 0; } + +.SingleDatePicker__picker--portal { + background-color: rgba(0, 0, 0, 0.3); + position: fixed; + top: 0; + left: 0; + height: 100%; + width: 100%; } + +.SingleDatePicker__picker--full-screen-portal { + background-color: #fff; } + +.SingleDatePicker__close { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + padding: 0; + cursor: pointer; + position: absolute; + top: 0; + right: 0; + padding: 15px; + z-index: 2; } + .SingleDatePicker__close svg { + height: 15px; + width: 15px; + fill: #cacccd; } + .SingleDatePicker__close:hover, .SingleDatePicker__close:focus { + color: #b0b3b4; + text-decoration: none; } + +.SingleDatePickerInput { + background-color: #fff; + border: 1px solid #dbdbdb; } + +.SingleDatePickerInput__clear-date { + background: none; + border: 0; + color: inherit; + font: inherit; + line-height: normal; + overflow: visible; + cursor: pointer; + display: inline-block; + vertical-align: middle; + padding: 10px; + margin: 0 10px 0 5px; } + +.SingleDatePickerInput__clear-date svg { + fill: #82888a; + height: 12px; + width: 15px; + vertical-align: middle; } + +.SingleDatePickerInput__clear-date--hide { + visibility: hidden; } + +.SingleDatePickerInput__clear-date:focus, +.SingleDatePickerInput__clear-date--hover { + background: #dbdbdb; + border-radius: 50%; } diff --git a/lib/defaultPhrases.js b/lib/defaultPhrases.js new file mode 100644 index 0000000000..216cbb6876 --- /dev/null +++ b/lib/defaultPhrases.js @@ -0,0 +1,51 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); +var closeDatePicker = 'Close'; +var focusStartDate = 'Focus on start date'; +var clearDate = 'Clear Date'; +var clearDates = 'Clear Dates'; +var jumpToPrevMonth = 'Jump to previous month'; +var jumpToNextMonth = 'Jump to next month'; + +exports['default'] = { + closeDatePicker: closeDatePicker, + focusStartDate: focusStartDate, + clearDate: clearDate, + clearDates: clearDates, + jumpToPrevMonth: jumpToPrevMonth, + jumpToNextMonth: jumpToNextMonth +}; +var DateRangePickerPhrases = exports.DateRangePickerPhrases = { + closeDatePicker: closeDatePicker, + clearDates: clearDates, + focusStartDate: focusStartDate, + jumpToPrevMonth: jumpToPrevMonth, + jumpToNextMonth: jumpToNextMonth +}; + +var DateRangePickerInputPhrases = exports.DateRangePickerInputPhrases = { + focusStartDate: focusStartDate, + clearDates: clearDates +}; + +var SingleDatePickerPhrases = exports.SingleDatePickerPhrases = { + closeDatePicker: closeDatePicker, + clearDate: clearDate, + jumpToPrevMonth: jumpToPrevMonth, + jumpToNextMonth: jumpToNextMonth +}; + +var SingleDatePickerInputPhrases = exports.SingleDatePickerInputPhrases = { + clearDate: clearDate +}; + +var DayPickerPhrases = exports.DayPickerPhrases = { + jumpToPrevMonth: jumpToPrevMonth, + jumpToNextMonth: jumpToNextMonth +}; + +var DayPickerNavigationPhrases = exports.DayPickerNavigationPhrases = { + jumpToPrevMonth: jumpToPrevMonth, + jumpToNextMonth: jumpToNextMonth +}; \ No newline at end of file diff --git a/lib/shapes/AnchorDirectionShape.js b/lib/shapes/AnchorDirectionShape.js new file mode 100644 index 0000000000..7d31911508 --- /dev/null +++ b/lib/shapes/AnchorDirectionShape.js @@ -0,0 +1,9 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require('react'); + +var _constants = require('../../constants'); + +exports['default'] = _react.PropTypes.oneOf([_constants.ANCHOR_LEFT, _constants.ANCHOR_RIGHT]); \ No newline at end of file diff --git a/lib/shapes/DateRangePickerShape.js b/lib/shapes/DateRangePickerShape.js new file mode 100644 index 0000000000..2747328df2 --- /dev/null +++ b/lib/shapes/DateRangePickerShape.js @@ -0,0 +1,84 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require('react'); + +var _reactMomentProptypes = require('react-moment-proptypes'); + +var _reactMomentProptypes2 = _interopRequireDefault(_reactMomentProptypes); + +var _defaultPhrases = require('../defaultPhrases'); + +var _getPhrasePropTypes = require('../utils/getPhrasePropTypes'); + +var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes); + +var _FocusedInputShape = require('../shapes/FocusedInputShape'); + +var _FocusedInputShape2 = _interopRequireDefault(_FocusedInputShape); + +var _OrientationShape = require('../shapes/OrientationShape'); + +var _OrientationShape2 = _interopRequireDefault(_OrientationShape); + +var _AnchorDirectionShape = require('../shapes/AnchorDirectionShape'); + +var _AnchorDirectionShape2 = _interopRequireDefault(_AnchorDirectionShape); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +exports['default'] = { + // required props for a functional interactive DateRangePicker + startDate: _reactMomentProptypes2['default'].momentObj, + endDate: _reactMomentProptypes2['default'].momentObj, + onDatesChange: _react.PropTypes.func.isRequired, + + focusedInput: _FocusedInputShape2['default'], + onFocusChange: _react.PropTypes.func.isRequired, + + // input related props + startDateId: _react.PropTypes.string.isRequired, + startDatePlaceholderText: _react.PropTypes.string, + endDateId: _react.PropTypes.string.isRequired, + endDatePlaceholderText: _react.PropTypes.string, + disabled: _react.PropTypes.bool, + required: _react.PropTypes.bool, + screenReaderInputMessage: _react.PropTypes.string, + showClearDates: _react.PropTypes.bool, + showDefaultInputIcon: _react.PropTypes.bool, + customInputIcon: _react.PropTypes.node, + customArrowIcon: _react.PropTypes.node, + customCloseIcon: _react.PropTypes.node, + + // calendar presentation and interaction related props + orientation: _OrientationShape2['default'], + anchorDirection: _AnchorDirectionShape2['default'], + horizontalMargin: _react.PropTypes.number, + withPortal: _react.PropTypes.bool, + withFullScreenPortal: _react.PropTypes.bool, + initialVisibleMonth: _react.PropTypes.func, + numberOfMonths: _react.PropTypes.number, + keepOpenOnDateSelect: _react.PropTypes.bool, + reopenPickerOnClearDates: _react.PropTypes.bool, + renderCalendarInfo: _react.PropTypes.func, + + // navigation related props + navPrev: _react.PropTypes.node, + navNext: _react.PropTypes.node, + onPrevMonthClick: _react.PropTypes.func, + onNextMonthClick: _react.PropTypes.func, + + // day presentation and interaction related props + renderDay: _react.PropTypes.func, + minimumNights: _react.PropTypes.number, + enableOutsideDays: _react.PropTypes.bool, + isDayBlocked: _react.PropTypes.func, + isOutsideRange: _react.PropTypes.func, + isDayHighlighted: _react.PropTypes.func, + + // internationalization props + displayFormat: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.func]), + monthFormat: _react.PropTypes.string, + phrases: _react.PropTypes.shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.DateRangePickerPhrases)) +}; \ No newline at end of file diff --git a/lib/shapes/FocusedInputShape.js b/lib/shapes/FocusedInputShape.js new file mode 100644 index 0000000000..0588b332c8 --- /dev/null +++ b/lib/shapes/FocusedInputShape.js @@ -0,0 +1,9 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require('react'); + +var _constants = require('../../constants'); + +exports['default'] = _react.PropTypes.oneOf([_constants.START_DATE, _constants.END_DATE]); \ No newline at end of file diff --git a/lib/shapes/OrientationShape.js b/lib/shapes/OrientationShape.js new file mode 100644 index 0000000000..48ec695025 --- /dev/null +++ b/lib/shapes/OrientationShape.js @@ -0,0 +1,9 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require('react'); + +var _constants = require('../../constants'); + +exports['default'] = _react.PropTypes.oneOf([_constants.HORIZONTAL_ORIENTATION, _constants.VERTICAL_ORIENTATION]); \ No newline at end of file diff --git a/lib/shapes/ScrollableOrientationShape.js b/lib/shapes/ScrollableOrientationShape.js new file mode 100644 index 0000000000..55290fe49e --- /dev/null +++ b/lib/shapes/ScrollableOrientationShape.js @@ -0,0 +1,9 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require('react'); + +var _constants = require('../../constants'); + +exports['default'] = _react.PropTypes.oneOf([_constants.HORIZONTAL_ORIENTATION, _constants.VERTICAL_ORIENTATION, _constants.VERTICAL_SCROLLABLE]); \ No newline at end of file diff --git a/lib/shapes/SingleDatePickerShape.js b/lib/shapes/SingleDatePickerShape.js new file mode 100644 index 0000000000..1cc2fa8d93 --- /dev/null +++ b/lib/shapes/SingleDatePickerShape.js @@ -0,0 +1,73 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); + +var _react = require('react'); + +var _reactMomentProptypes = require('react-moment-proptypes'); + +var _reactMomentProptypes2 = _interopRequireDefault(_reactMomentProptypes); + +var _defaultPhrases = require('../defaultPhrases'); + +var _getPhrasePropTypes = require('../utils/getPhrasePropTypes'); + +var _getPhrasePropTypes2 = _interopRequireDefault(_getPhrasePropTypes); + +var _OrientationShape = require('../shapes/OrientationShape'); + +var _OrientationShape2 = _interopRequireDefault(_OrientationShape); + +var _AnchorDirectionShape = require('../shapes/AnchorDirectionShape'); + +var _AnchorDirectionShape2 = _interopRequireDefault(_AnchorDirectionShape); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +exports['default'] = { + // required props for a functional interactive SingleDatePicker + date: _reactMomentProptypes2['default'].momentObj, + onDateChange: _react.PropTypes.func.isRequired, + + focused: _react.PropTypes.bool, + onFocusChange: _react.PropTypes.func.isRequired, + + // input related props + id: _react.PropTypes.string.isRequired, + placeholder: _react.PropTypes.string, + disabled: _react.PropTypes.bool, + required: _react.PropTypes.bool, + screenReaderInputMessage: _react.PropTypes.string, + showClearDate: _react.PropTypes.bool, + customCloseIcon: _react.PropTypes.node, + + // calendar presentation and interaction related props + orientation: _OrientationShape2['default'], + anchorDirection: _AnchorDirectionShape2['default'], + horizontalMargin: _react.PropTypes.number, + withPortal: _react.PropTypes.bool, + withFullScreenPortal: _react.PropTypes.bool, + initialVisibleMonth: _react.PropTypes.func, + numberOfMonths: _react.PropTypes.number, + keepOpenOnDateSelect: _react.PropTypes.bool, + reopenPickerOnClearDate: _react.PropTypes.bool, + renderCalendarInfo: _react.PropTypes.func, + + // navigation related props + navPrev: _react.PropTypes.node, + navNext: _react.PropTypes.node, + onPrevMonthClick: _react.PropTypes.func, + onNextMonthClick: _react.PropTypes.func, + + // day presentation and interaction related props + renderDay: _react.PropTypes.func, + enableOutsideDays: _react.PropTypes.bool, + isDayBlocked: _react.PropTypes.func, + isOutsideRange: _react.PropTypes.func, + isDayHighlighted: _react.PropTypes.func, + + // internationalization props + displayFormat: _react.PropTypes.oneOfType([_react.PropTypes.string, _react.PropTypes.func]), + monthFormat: _react.PropTypes.string, + phrases: _react.PropTypes.shape((0, _getPhrasePropTypes2['default'])(_defaultPhrases.SingleDatePickerPhrases)) +}; \ No newline at end of file diff --git a/lib/utils/getCalendarMonthWeeks.js b/lib/utils/getCalendarMonthWeeks.js new file mode 100644 index 0000000000..283eeb26ca --- /dev/null +++ b/lib/utils/getCalendarMonthWeeks.js @@ -0,0 +1,44 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports['default'] = getCalendarMonthWeeks; +function getCalendarMonthWeeks(month, enableOutsideDays) { + // set utc offset to get correct dates in future (when timezone changes) + var baseDate = month.clone(); + var firstOfMonth = baseDate.clone().startOf('month').hour(12); + var lastOfMonth = baseDate.clone().endOf('month').hour(12); + + var currentDay = firstOfMonth.clone(); + var currentWeek = []; + var weeksInMonth = []; + + // days belonging to the previous month + for (var i = 0; i < currentDay.weekday(); i += 1) { + var prevDay = enableOutsideDays ? currentDay.clone().subtract(i + 1, 'day') : null; + currentWeek.unshift(prevDay); + } + + while (currentDay < lastOfMonth) { + currentWeek.push(currentDay.clone()); + currentDay.add(1, 'd'); + + if (currentDay.weekday() === 0) { + weeksInMonth.push(currentWeek); + currentWeek = []; + } + } + + // weekday() returns the index of the day of the week according to the locale + // this means if the week starts on Monday, weekday() will return 0 for a Monday date, not 1 + if (currentDay.weekday() !== 0) { + // days belonging to the next month + for (var k = currentDay.weekday(), count = 0; k < 7; k += 1, count += 1) { + var nextDay = enableOutsideDays ? currentDay.clone().add(count, 'day') : null; + currentWeek.push(nextDay); + } + + weeksInMonth.push(currentWeek); + } + + return weeksInMonth; +} \ No newline at end of file diff --git a/lib/utils/getPhrasePropTypes.js b/lib/utils/getPhrasePropTypes.js new file mode 100644 index 0000000000..a7054e5ccc --- /dev/null +++ b/lib/utils/getPhrasePropTypes.js @@ -0,0 +1,14 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports['default'] = getPhrasePropTypes; + +var _react = require('react'); + +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 getPhrasePropTypes(defaultPhrases) { + return Object.keys(defaultPhrases).reduce(function (phrases, key) { + return Object.assign({}, phrases, _defineProperty({}, key, _react.PropTypes.node)); + }, {}); +} \ No newline at end of file diff --git a/lib/utils/getResponsiveContainerStyles.js b/lib/utils/getResponsiveContainerStyles.js new file mode 100644 index 0000000000..3e8e3c4b40 --- /dev/null +++ b/lib/utils/getResponsiveContainerStyles.js @@ -0,0 +1,16 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports['default'] = getResponsiveContainerStyles; + +var _constants = require('../../constants'); + +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 getResponsiveContainerStyles(anchorDirection, currentOffset, containerEdge, margin) { + var windowWidth = typeof window !== 'undefined' && window.innerWidth; + var calculatedOffset = anchorDirection === _constants.ANCHOR_LEFT ? windowWidth - containerEdge : containerEdge; + var calculatedMargin = margin || 0; + + return _defineProperty({}, anchorDirection, Math.min(currentOffset + calculatedOffset - calculatedMargin, 0)); +} \ No newline at end of file diff --git a/lib/utils/getTransformStyles.js b/lib/utils/getTransformStyles.js new file mode 100644 index 0000000000..d1bb44688f --- /dev/null +++ b/lib/utils/getTransformStyles.js @@ -0,0 +1,12 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports["default"] = getTransformStyles; +function getTransformStyles(transformValue) { + return { + transform: transformValue, + msTransform: transformValue, + MozTransform: transformValue, + WebkitTransform: transformValue + }; +} \ No newline at end of file diff --git a/lib/utils/isInclusivelyAfterDay.js b/lib/utils/isInclusivelyAfterDay.js new file mode 100644 index 0000000000..4102069bc5 --- /dev/null +++ b/lib/utils/isInclusivelyAfterDay.js @@ -0,0 +1,19 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports['default'] = isInclusivelyAfterDay; + +var _moment = require('moment'); + +var _moment2 = _interopRequireDefault(_moment); + +var _isSameDay = require('./isSameDay'); + +var _isSameDay2 = _interopRequireDefault(_isSameDay); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +function isInclusivelyAfterDay(a, b) { + if (!_moment2['default'].isMoment(a) || !_moment2['default'].isMoment(b)) return false; + return a.isAfter(b) || (0, _isSameDay2['default'])(a, b); +} \ No newline at end of file diff --git a/lib/utils/isInclusivelyBeforeDay.js b/lib/utils/isInclusivelyBeforeDay.js new file mode 100644 index 0000000000..595fe8c9dc --- /dev/null +++ b/lib/utils/isInclusivelyBeforeDay.js @@ -0,0 +1,19 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports['default'] = isInclusivelyBeforeDay; + +var _moment = require('moment'); + +var _moment2 = _interopRequireDefault(_moment); + +var _isSameDay = require('./isSameDay'); + +var _isSameDay2 = _interopRequireDefault(_isSameDay); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +function isInclusivelyBeforeDay(a, b) { + if (!_moment2['default'].isMoment(a) || !_moment2['default'].isMoment(b)) return false; + return a.isBefore(b) || (0, _isSameDay2['default'])(a, b); +} \ No newline at end of file diff --git a/lib/utils/isNextDay.js b/lib/utils/isNextDay.js new file mode 100644 index 0000000000..4d0da3a1fc --- /dev/null +++ b/lib/utils/isNextDay.js @@ -0,0 +1,20 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports['default'] = isNextDay; + +var _moment = require('moment'); + +var _moment2 = _interopRequireDefault(_moment); + +var _isSameDay = require('./isSameDay'); + +var _isSameDay2 = _interopRequireDefault(_isSameDay); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +function isNextDay(a, b) { + if (!_moment2['default'].isMoment(a) || !_moment2['default'].isMoment(b)) return false; + var nextDay = (0, _moment2['default'])(a).add(1, 'day'); + return (0, _isSameDay2['default'])(nextDay, b); +} \ No newline at end of file diff --git a/lib/utils/isSameDay.js b/lib/utils/isSameDay.js new file mode 100644 index 0000000000..9fc0f7eca6 --- /dev/null +++ b/lib/utils/isSameDay.js @@ -0,0 +1,15 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports['default'] = isSameDay; + +var _moment = require('moment'); + +var _moment2 = _interopRequireDefault(_moment); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +function isSameDay(a, b) { + if (!_moment2['default'].isMoment(a) || !_moment2['default'].isMoment(b)) return false; + return a.isSame(b, 'day'); +} \ No newline at end of file diff --git a/lib/utils/isTouchDevice.js b/lib/utils/isTouchDevice.js new file mode 100644 index 0000000000..f089de7a3e --- /dev/null +++ b/lib/utils/isTouchDevice.js @@ -0,0 +1,7 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports['default'] = isTouchDevice; +function isTouchDevice() { + return !!(typeof window !== 'undefined' && 'ontouchstart' in window) || !!(typeof navigator !== 'undefined' && navigator.maxTouchPoints); +} \ No newline at end of file diff --git a/lib/utils/isTransitionEndSupported.js b/lib/utils/isTransitionEndSupported.js new file mode 100644 index 0000000000..cb957b177a --- /dev/null +++ b/lib/utils/isTransitionEndSupported.js @@ -0,0 +1,7 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports['default'] = isTransitionEndSupported; +function isTransitionEndSupported() { + return !!(typeof window !== 'undefined' && 'TransitionEvent' in window); +} \ No newline at end of file diff --git a/lib/utils/toISODateString.js b/lib/utils/toISODateString.js new file mode 100644 index 0000000000..eaa7e3aea5 --- /dev/null +++ b/lib/utils/toISODateString.js @@ -0,0 +1,23 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports['default'] = toISODateString; + +var _moment = require('moment'); + +var _moment2 = _interopRequireDefault(_moment); + +var _toMomentObject = require('./toMomentObject'); + +var _toMomentObject2 = _interopRequireDefault(_toMomentObject); + +var _constants = require('../../constants'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +function toISODateString(date, currentFormat) { + var dateObj = _moment2['default'].isMoment(date) ? date : (0, _toMomentObject2['default'])(date, currentFormat); + if (!dateObj) return null; + + return dateObj.format(_constants.ISO_FORMAT); +} \ No newline at end of file diff --git a/lib/utils/toLocalizedDateString.js b/lib/utils/toLocalizedDateString.js new file mode 100644 index 0000000000..730dd97589 --- /dev/null +++ b/lib/utils/toLocalizedDateString.js @@ -0,0 +1,23 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports['default'] = toLocalizedDateString; + +var _moment = require('moment'); + +var _moment2 = _interopRequireDefault(_moment); + +var _toMomentObject = require('./toMomentObject'); + +var _toMomentObject2 = _interopRequireDefault(_toMomentObject); + +var _constants = require('../../constants'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +function toLocalizedDateString(date, currentFormat) { + var dateObj = _moment2['default'].isMoment(date) ? date : (0, _toMomentObject2['default'])(date, currentFormat); + if (!dateObj) return null; + + return dateObj.format(_constants.DISPLAY_FORMAT); +} \ No newline at end of file diff --git a/lib/utils/toMomentObject.js b/lib/utils/toMomentObject.js new file mode 100644 index 0000000000..d9e2825bbd --- /dev/null +++ b/lib/utils/toMomentObject.js @@ -0,0 +1,20 @@ +Object.defineProperty(exports, "__esModule", { + value: true +}); +exports['default'] = toMomentObject; + +var _moment = require('moment'); + +var _moment2 = _interopRequireDefault(_moment); + +var _constants = require('../../constants'); + +function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; } + +var customFormatsArr = [_constants.CUSTOM_FORMAT_1, _constants.CUSTOM_FORMAT_2, _constants.CUSTOM_FORMAT_3, _constants.CUSTOM_FORMAT_4, _constants.CUSTOM_FORMAT_5, _constants.CUSTOM_FORMAT_6, _constants.CUSTOM_FORMAT_7, _constants.CUSTOM_FORMAT_8, _constants.CUSTOM_FORMAT_9, _constants.CUSTOM_FORMAT_10, _constants.CUSTOM_FORMAT_11]; + +function toMomentObject(dateString, customFormat) { + var dateFormats = customFormat ? [customFormat, _constants.DISPLAY_FORMAT, _constants.ISO_FORMAT] : [_constants.DISPLAY_FORMAT, _constants.ISO_FORMAT]; + var date = (0, _moment2['default'])(dateString, dateFormats.concat(customFormatsArr), true); + return date.isValid() ? date.hour(12) : null; +} \ No newline at end of file diff --git a/package.json b/package.json index 7278b4f155..7f06d5cb97 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "react-dates", - "version": "8.2.1", + "name": "react-dates-everystay", + "version": "0.0.1", "description": "A responsive and accessible date range picker component built with React", "main": "index.js", "scripts": { diff --git a/src/components/DateInput.jsx b/src/components/DateInput.jsx index d4a76d5389..719baa3633 100644 --- a/src/components/DateInput.jsx +++ b/src/components/DateInput.jsx @@ -47,6 +47,7 @@ export default class DateInput extends React.Component { this.onChange = this.onChange.bind(this); this.onKeyDown = this.onKeyDown.bind(this); + this.dateFormat = this.dateFormat.bind(this); } componentDidMount() { @@ -73,9 +74,13 @@ export default class DateInput extends React.Component { } } + dateFormat(el) { + value = el.replace(/^([\d]{4})([\d]{2})([\d]{2})$/,"$3.$2.$1"); + return value; + } + onChange(e) { const dateString = e.target.value; - this.setState({ dateString }); this.props.onChange(dateString); } @@ -83,6 +88,9 @@ export default class DateInput extends React.Component { onKeyDown(e) { const { onKeyDownShiftTab, onKeyDownTab } = this.props; if (e.key === 'Tab') { + // if (this.state.dateString) { + // this.props.onChange(this.state.dateString); + // } if (e.shiftKey) { onKeyDownShiftTab(e); } else { @@ -112,7 +120,6 @@ export default class DateInput extends React.Component { const displayText = displayValue || inputValue || dateString || placeholder || ''; const value = inputValue || displayValue || dateString || ''; const screenReaderMessageId = `DateInput__screen-reader-message-${id}`; - return (
( - + )) .addWithInfo('hidden with display: none', () => (