UNPKG

react-datepicker2

Version:

react datepicker component. (include persian jalaali calendar)

1,096 lines (906 loc) 117 kB
(function (global, factory) { typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('moment-jalaali'), require('react'), require('prop-types'), require('react-tether'), require('classnames'), require('react-onclickoutside'), require('lodash.range'), require('rc-trigger'), require('react-dom')) : typeof define === 'function' && define.amd ? define(['exports', 'moment-jalaali', 'react', 'prop-types', 'react-tether', 'classnames', 'react-onclickoutside', 'lodash.range', 'rc-trigger', 'react-dom'], factory) : (global = global || self, factory(global.DatePicker = {}, global.momentJalaali, global.React, global.PropTypes, global.TetherComponent, global.classnames, global.onClickOutside, global.range, global.Trigger, global.ReactDom)); }(this, (function (exports, momentJalaali, React, PropTypes, TetherComponent, classnames, onClickOutside, range, Trigger, ReactDom) { 'use strict'; momentJalaali = momentJalaali && Object.prototype.hasOwnProperty.call(momentJalaali, 'default') ? momentJalaali['default'] : momentJalaali; var React__default = 'default' in React ? React['default'] : React; PropTypes = PropTypes && Object.prototype.hasOwnProperty.call(PropTypes, 'default') ? PropTypes['default'] : PropTypes; TetherComponent = TetherComponent && Object.prototype.hasOwnProperty.call(TetherComponent, 'default') ? TetherComponent['default'] : TetherComponent; classnames = classnames && Object.prototype.hasOwnProperty.call(classnames, 'default') ? classnames['default'] : classnames; onClickOutside = onClickOutside && Object.prototype.hasOwnProperty.call(onClickOutside, 'default') ? onClickOutside['default'] : onClickOutside; range = range && Object.prototype.hasOwnProperty.call(range, 'default') ? range['default'] : range; Trigger = Trigger && Object.prototype.hasOwnProperty.call(Trigger, 'default') ? Trigger['default'] : Trigger; ReactDom = ReactDom && Object.prototype.hasOwnProperty.call(ReactDom, 'default') ? ReactDom['default'] : ReactDom; function styleInject(css, ref) { if ( ref === void 0 ) ref = {}; var insertAt = ref.insertAt; if (!css || typeof document === 'undefined') { return; } var head = document.head || document.getElementsByTagName('head')[0]; var style = document.createElement('style'); style.type = 'text/css'; if (insertAt === 'top') { if (head.firstChild) { head.insertBefore(style, head.firstChild); } else { head.appendChild(style); } } else { head.appendChild(style); } if (style.styleSheet) { style.styleSheet.cssText = css; } else { style.appendChild(document.createTextNode(css)); } } var css_248z = ".calendarContainer{position:relative;border-radius:4px;-webkit-box-shadow:0 3px 15px rgba(0,0,0,.2);box-shadow:0 3px 15px rgba(0,0,0,.2);width:320px;margin:auto;text-align:center;padding:15px;background-color:#fff}.calendarContainer *{-webkit-box-sizing:border-box;box-sizing:border-box}.calendarContainer .dayPickerContainer:after,.calendarContainer .daysOfWeek:after,.calendarContainer .monthsList:after{content:'';display:block;clear:both}.datepicker-input{-webkit-box-sizing:border-box;box-sizing:border-box}.calendarContainer .heading{height:auto;font-weight:700;margin-bottom:10px}.calendarContainer .heading>button{background:0 0;margin:5px 0;border:none;text-align:center;line-height:30px;width:36px;height:32px;cursor:pointer}.calendarContainer .heading>button:hover{background-color:#f2f2f2}.calendarContainer .heading svg{width:10px;fill:#777}.calendarContainer .heading .next,.calendarContainer .heading .prev{width:42px;height:42px;border-radius:50%;margin:0}.calendarContainer .heading .prev{float:right}.calendarContainer .heading .next{float:left}.calendarContainer .heading .title{height:auto;border-radius:4px;width:auto;margin:0 5px;border:1px solid #f7f7f7;text-align:center;display:inline-block;font-weight:400;padding:4px 15px 5px 15px;line-height:1.5;font-size:1.2em;max-height:none}.jalaali.calendarContainer .heading .title{padding:4px 15px 7px 15px}.calendarContainer .dayWrapper{float:left;width:14.28571429%;margin-top:5px;position:relative}.calendarContainer .dayWrapper button{border:none;background:0 0;outline:0;width:100%;cursor:pointer;width:40px;height:40px;border-radius:50%;font-size:1.1em;padding:0;line-height:1.5;padding:0 0 1px 0}.jalaali.calendarContainer .dayWrapper button{padding:0 0 1px 0}.calendarContainer .dayWrapper:not(.selected) button:hover{background-color:#d6f1ff}.calendarContainer .dayWrapper button[disabled]{color:#aaa;cursor:not-allowed;background-color:#ebebeb}.calendarContainer .dayWrapper button.selected{background-color:#337ab7;color:#fff}.calendarContainer .dayWrapper:not(.currentMonth) button{opacity:.5}.calendarContainer .daysOfWeek{margin-bottom:5px;padding-bottom:5px;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;color:#919191}.calendarContainer .daysOfWeek>div{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:42px}.calendarContainer .monthsList{clear:both;width:100%}.calendarContainer .monthsList button{width:33.33333332%;height:25%;float:right;border:1px solid #f9f9f9;outline:0;font-size:1em;background:#fff;padding:10px 0;cursor:pointer}.calendarContainer .monthsList button:hover{background:#eee;cursor:pointer}.calendarContainer .yearsList{clear:both;width:100%;max-height:200px;overflow-y:scroll}.calendarContainer .yearsList button{width:20%;height:25%;float:right;border:1px solid #f9f9f9;outline:0;font-size:1em;background:#fff;padding:10px 0;cursor:pointer}.calendarContainer .yearsList button:hover{background:#eee;cursor:pointer}.calendarContainer .selected button,.calendarContainer .selected button:active,.calendarContainer .selected button:focus,.calendarContainer .selected button:hover :not([disabled]){background-color:#4285f4;color:#fff}.calendarContainer.jalaali{direction:rtl}.calendarContainer.jalaali .dayWrapper{float:right}.time-picker-container{margin-bottom:10}.time-picker-container>.time-label{float:left;line-height:30px;width:50%;text-align:center}.time-picker-container>.time-picker-panel{float:right;width:50%}.time-picker-container.jalaali>.time-label{float:right}.time-picker-container.jalaali>.time-picker-panel{float:left}.rc-time-picker{border-radius:4px;display:inline-block;-webkit-box-sizing:border-box;box-sizing:border-box;width:110px;border:1px solid #f7f7f7;font-size:1.2em}.rc-time-picker *{-webkit-box-sizing:border-box;box-sizing:border-box}.rc-time-picker-input{margin:4px 0;padding:0 15px 1px 15px;direction:ltr;text-align:center;width:100%;position:relative;display:inline-block;cursor:pointer;font-size:1em;line-height:1.5;border:none;background-image:none;background-color:transparent;-webkit-box-shadow:none;box-shadow:none}.jalaali.calendarContainer .rc-time-picker-input{padding:0 15px 3px 15px}.rc-time-picker-input:focus{-webkit-box-shadow:none;box-shadow:none;border:none;background-color:#f2f2f2}.rc-time-picker:hover{background-color:#f2f2f2}.rc-time-picker-panel{z-index:2001;width:170px;position:absolute;-webkit-box-sizing:border-box;box-sizing:border-box}.rc-time-picker-panel *{-webkit-box-sizing:border-box;box-sizing:border-box}.rc-time-picker-panel-inner{display:inline-block;position:relative;outline:0;list-style:none;font-size:12px;text-align:left;background-color:#fff;border-radius:3px;-webkit-box-shadow:0 1px 5px #ccc;box-shadow:0 1px 5px #ccc;background-clip:padding-box;border:1px solid #ccc;line-height:1.5}.rc-time-picker-panel-input{margin:0;padding:0;width:100%;cursor:default;line-height:1.5;outline:0;border:1px solid transparent;padding:4px 0;font-size:1.4em;text-align:center;font-family:inherit}.rc-time-picker-panel-input,.rc-time-picker-panel-input:hover{-webkit-box-shadow:none;box-shadow:none;border:none}.rc-time-picker-panel-input-wrap{-webkit-box-sizing:border-box;box-sizing:border-box;position:relative;padding:6px;border-bottom:1px solid #e9e9e9}.rc-time-picker-panel-input-invalid{border-color:red}.rc-time-picker-panel-clear-btn{position:absolute;right:6px;cursor:pointer;overflow:hidden;width:20px;height:20px;text-align:center;line-height:20px;top:6px;margin:0}.rc-time-picker-panel-clear-btn:after{content:'x';font-size:12px;color:#aaa;display:inline-block;line-height:1;width:20px;-webkit-transition:color .3s ease;transition:color .3s ease}.rc-time-picker-panel-clear-btn:hover:after{color:#666}.rc-time-picker-panel-select{float:left;font-size:12px;border:1px solid #e9e9e9;border-width:0 1px;margin-left:-1px;-webkit-box-sizing:border-box;box-sizing:border-box;width:56px;overflow:hidden;position:relative}.rc-time-picker-panel-select-active{overflow-y:auto}.rc-time-picker-panel-select:first-child{border-left:0;margin-left:0}.rc-time-picker-panel-select:last-child{border-right:0}.rc-time-picker-panel-select ul{list-style:none;-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;width:100%;max-height:144px;overflow-x:hidden;overflow-y:scroll}.rc-time-picker-panel-select li{list-style:none;-webkit-box-sizing:content-box;box-sizing:content-box;margin:0;padding:0 0 0 16px;width:100%;height:24px;line-height:24px;text-align:left;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.rc-time-picker-panel-select li:hover{background:#edfaff}li.rc-time-picker-panel-select-option-selected{background:#edfaff;color:#2db7f5}li.rc-time-picker-panel-select-option-disabled{color:#bfbfbf}li.rc-time-picker-panel-select-option-disabled:hover{background:0 0;cursor:not-allowed}.tether-element.tether-element-attached-top.tether-element-attached-center.tether-target-attached-bottom.tether-target-attached-center.tether-enabled{z-index:2000}.calendarContainer *,.datepicker-input{font-family:inherit}.today button{border:3px solid #4285f4!important}.jalaali.calendarContainer .selectToday{padding:4px 0 6px 0}.calendarButton{display:block;width:100%;background:#4285f4;color:#fff;outline:0;border-radius:5px;border:0;cursor:pointer;padding:5px 0 7px 0;-webkit-transition:.2s all ease-in-out;transition:.2s all ease-in-out;-webkit-transition-property:background;transition-property:background}.calendarButton:hover{background:#1266f1}.toggleButton{margin-bottom:1rem}.selectToday{margin-top:1rem}.highLightDot-container{text-align:center;bottom:0;width:100%;position:absolute;cursor:pointer;direction:ltr}.highLightDot-container .highLightDot{border:1px solid #fff;display:inline-block;width:7px;height:7px;border-radius:50%}.highLightDot-container .highLightDot:not(:first-child){margin-left:2px}.disabled{cursor:not-allowed}button[disabled],button[disabled]:hover{color:#aaa;cursor:not-allowed;background-color:#ebebeb}"; styleInject(css_248z); function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } var classCallCheck = _classCallCheck; function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; } var createClass = _createClass; function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; } var assertThisInitialized = _assertThisInitialized; function createCommonjsModule(fn, module) { return module = { exports: {} }, fn(module, module.exports), module.exports; } var setPrototypeOf = createCommonjsModule(function (module) { function _setPrototypeOf(o, p) { module.exports = _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); } module.exports = _setPrototypeOf; }); function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) setPrototypeOf(subClass, superClass); } var inherits = _inherits; var _typeof_1 = createCommonjsModule(function (module) { function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { module.exports = _typeof = function _typeof(obj) { return typeof obj; }; } else { module.exports = _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); } module.exports = _typeof; }); function _possibleConstructorReturn(self, call) { if (call && (_typeof_1(call) === "object" || typeof call === "function")) { return call; } return assertThisInitialized(self); } var possibleConstructorReturn = _possibleConstructorReturn; var getPrototypeOf = createCommonjsModule(function (module) { function _getPrototypeOf(o) { module.exports = _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); } module.exports = _getPrototypeOf; }); function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; } var defineProperty = _defineProperty; var latinToPersianMap = ['۱', '۲', '۳', '۴', '۵', '۶', '۷', '۸', '۹', '۰']; var latinNumbers = [/1/g, /2/g, /3/g, /4/g, /5/g, /6/g, /7/g, /8/g, /9/g, /0/g]; function prepareNumber(input) { var string; if (typeof input === 'number') { string = input.toString(); } else if (typeof input === 'undefined') { string = ''; } else { string = input; } return string; } function latinToPersian(string) { var result = string; for (var index = 0; index < 10; index++) { result = result.replace(latinNumbers[index], latinToPersianMap[index]); } return result; } function persianNumber(input) { return latinToPersian(prepareNumber(input)); } var leftArrow = { __html: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 314.5 314.5" style="enable-background:new 0 0 314.5 314.5;" xml:space="preserve"><g><path class="arrow-icon" d="M125,157.5l116-116c10-10,10-24,0-34s-25-10-35,0l-133,133c-5,5-7,10-7,17s2,12,7,17l133,133c5,5,11,7,17,7s13-2,18-7c10-10,10-24,0-34L125,157.5z"/></g></svg>' }; var rightArrow = { __html: '<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 315.5 315.5" style="enable-background:new 0 0 315.5 315.5;" xml:space="preserve"><g><path class="arrow-icon" d="M242,141L109,8c-5-5-12-8-18-8S79,3,74,8c-10,10-10,24,0,34l116,116L74,274c-10,10-10,24,0,34s25,10,35,0l133-133c5-5,7-11,7-17C249,151,247,146,242,141z"/></g></svg>' }; function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function () { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } var Heading = /*#__PURE__*/function (_Component) { inherits(Heading, _Component); var _super = _createSuper(Heading); function Heading() { classCallCheck(this, Heading); return _super.apply(this, arguments); } createClass(Heading, [{ key: "handleMonthClick", value: function handleMonthClick(event) { var setCalendarMode = this.context.setCalendarMode; event.preventDefault(); setCalendarMode('monthSelector'); } }, { key: "render", value: function render() { var _this$context = this.context, nextMonth = _this$context.nextMonth, prevMonth = _this$context.prevMonth; var _this$props = this.props, month = _this$props.month, styles = _this$props.styles; return /*#__PURE__*/React__default.createElement("div", { className: styles.heading }, /*#__PURE__*/React__default.createElement("button", { className: styles.title, onClick: this.handleMonthClick.bind(this) }, this.props.isGregorian ? month.locale('en').format('MMMM YYYY') : persianNumber(month.locale('fa').format('jMMMM jYYYY'))), this.props.timePicker, !this.props.isGregorian && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", { type: "button", title: "\u0645\u0627\u0647 \u0642\u0628\u0644", className: styles.prev, onClick: prevMonth, dangerouslySetInnerHTML: rightArrow }), /*#__PURE__*/React__default.createElement("button", { type: "button", title: "\u0645\u0627\u0647 \u0628\u0639\u062F", className: styles.next, onClick: nextMonth, dangerouslySetInnerHTML: leftArrow })), this.props.isGregorian && /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("button", { type: "button", title: "previous month", className: styles.next, onClick: prevMonth, dangerouslySetInnerHTML: leftArrow }), /*#__PURE__*/React__default.createElement("button", { type: "button", title: "next month", className: styles.prev, onClick: nextMonth, dangerouslySetInnerHTML: rightArrow }))); } }]); return Heading; }(React.Component); defineProperty(Heading, "propTypes", { month: PropTypes.object.isRequired, isGregorian: PropTypes.bool }); defineProperty(Heading, "contextTypes", { styles: PropTypes.object, nextMonth: PropTypes.func.isRequired, prevMonth: PropTypes.func.isRequired, setCalendarMode: PropTypes.func.isRequired }); function _createSuper$1(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$1(); return function () { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$1() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } var dayOfWeekNamesJalaali = ['ش', 'ی', 'د', 'س', 'چ', 'پ', 'ج']; var dayOfWeekNamesGregorian = ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']; var DaysOfWeek = /*#__PURE__*/function (_Component) { inherits(DaysOfWeek, _Component); var _super = _createSuper$1(DaysOfWeek); function DaysOfWeek() { classCallCheck(this, DaysOfWeek); return _super.apply(this, arguments); } createClass(DaysOfWeek, [{ key: "render", value: function render() { var _this$props = this.props, styles = _this$props.styles, isGregorian = _this$props.isGregorian; var dayOfWeekNames = isGregorian ? dayOfWeekNamesGregorian : dayOfWeekNamesJalaali; return /*#__PURE__*/React__default.createElement("div", { className: styles.daysOfWeek }, dayOfWeekNames.map(function (name, key) { return /*#__PURE__*/React__default.createElement("div", { key: key }, name); })); } }]); return DaysOfWeek; }(React.Component); defineProperty(DaysOfWeek, "propTypes", { styles: PropTypes.object, isGregorian: PropTypes.bool }); function _createSuper$2(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$2(); return function () { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$2() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } var MonthsViewHeading = /*#__PURE__*/function (_Component) { inherits(MonthsViewHeading, _Component); var _super = _createSuper$2(MonthsViewHeading); function MonthsViewHeading() { classCallCheck(this, MonthsViewHeading); return _super.apply(this, arguments); } createClass(MonthsViewHeading, [{ key: "handleYearClick", value: function handleYearClick(event) { var setCalendarMode = this.context.setCalendarMode; event.preventDefault(); setCalendarMode('yearSelector'); } }, { key: "render", value: function render() { var _this$props = this.props, year = _this$props.year, styles = _this$props.styles, type = _this$props.type, isGregorian = _this$props.isGregorian, disableYearSelector = _this$props.disableYearSelector; var yearFormat = isGregorian ? 'YYYY' : 'jYYYY'; return /*#__PURE__*/React__default.createElement("div", { className: styles.heading }, /*#__PURE__*/React__default.createElement("button", { disabled: disableYearSelector, className: styles.title, onClick: this.handleYearClick.bind(this) }, isGregorian ? year.format(yearFormat) : persianNumber(year.format(yearFormat))), /*#__PURE__*/React__default.createElement("button", { type: "button", title: isGregorian ? 'next year' : 'سال قبل', style: styles.navButton, className: styles.prev, onClick: isGregorian ? this.props.onNextYear : this.props.onPrevYear, dangerouslySetInnerHTML: rightArrow }), /*#__PURE__*/React__default.createElement("button", { type: "button", title: isGregorian ? 'previous year' : 'سال بعد', style: styles.navButton, className: styles.next, onClick: isGregorian ? this.props.onPrevYear : this.props.onNextYear, dangerouslySetInnerHTML: leftArrow })); } }]); return MonthsViewHeading; }(React.Component); defineProperty(MonthsViewHeading, "propTypes", { year: PropTypes.object.isRequired, onNextYear: PropTypes.func.isRequired, onPrevYear: PropTypes.func.isRequired, isGregorian: PropTypes.bool, disableYearSelector: PropTypes.bool }); defineProperty(MonthsViewHeading, "contextTypes", { styles: PropTypes.object, type: PropTypes.number, setCalendarMode: PropTypes.func.isRequired }); function _createSuper$3(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$3(); return function () { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$3() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } var monthsJalaali = ['فروردین', 'اردیبهشت', 'خرداد', 'تیر', 'مرداد', 'شهریور', 'مهر', 'آبان', 'آذر', 'دی', 'بهمن', 'اسفند']; var monthsGregorian = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; var MonthSelector = /*#__PURE__*/function (_Component) { inherits(MonthSelector, _Component); var _super = _createSuper$3(MonthSelector); function MonthSelector() { var _this; classCallCheck(this, MonthSelector); for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } _this = _super.call.apply(_super, [this].concat(args)); defineProperty(assertThisInitialized(_this), "state", { year: _this.props.selectedMonth }); return _this; } createClass(MonthSelector, [{ key: "nextYear", value: function nextYear() { this.setState({ year: this.state.year.clone().add(1, 'year') }); } }, { key: "prevYear", value: function prevYear() { this.setState({ year: this.state.year.clone().subtract(1, 'year') }); } }, { key: "handleClick", value: function handleClick(key) { var _this$context = this.context, setMonth = _this$context.setMonth, setCalendarMode = _this$context.setCalendarMode; var isGregorian = this.props.isGregorian; var monthYearFormat = isGregorian ? 'M-YYYY' : 'jM-jYYYY'; setMonth(momentJalaali(key, monthYearFormat)); setCalendarMode('days'); } }, { key: "render", value: function render() { var _this2 = this; var year = this.state.year; var _this$props = this.props, selectedMonth = _this$props.selectedMonth, styles = _this$props.styles, isGregorian = _this$props.isGregorian, disableYearSelector = _this$props.disableYearSelector; var yearFormat = isGregorian ? 'YYYY' : 'jYYYY'; var monthYearFormat = isGregorian ? 'M-YYYY' : 'jM-jYYYY'; var months = isGregorian ? monthsGregorian : monthsJalaali; return /*#__PURE__*/React__default.createElement("div", { className: "month-selector" }, /*#__PURE__*/React__default.createElement(MonthsViewHeading, { isGregorian: isGregorian, styles: styles, year: year, onNextYear: this.nextYear.bind(this), onPrevYear: this.prevYear.bind(this), disableYearSelector: disableYearSelector }), /*#__PURE__*/React__default.createElement("div", { className: styles.monthsList }, months.map(function (name, key) { var buttonFingerprint = "".concat(key + 1, "-").concat(year.format(yearFormat)); var selectedMonthFingerprint = selectedMonth.format(monthYearFormat); var isCurrent = selectedMonthFingerprint === buttonFingerprint; var className = classnames(styles.monthWrapper, defineProperty({}, styles.selected, isCurrent)); return /*#__PURE__*/React__default.createElement("div", { key: key, className: className }, /*#__PURE__*/React__default.createElement("button", { onClick: _this2.handleClick.bind(_this2, buttonFingerprint) }, name)); }))); } }]); return MonthSelector; }(React.Component); defineProperty(MonthSelector, "propTypes", { styles: PropTypes.object, selectedMonth: PropTypes.object.isRequired, isGregorian: PropTypes.bool, disableYearSelector: PropTypes.bool }); defineProperty(MonthSelector, "contextTypes", { setCalendarMode: PropTypes.func.isRequired, setMonth: PropTypes.func.isRequired }); function _createSuper$4(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$4(); return function () { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$4() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } var yearsJalaali = range(momentJalaali(new Date()).jYear() + 100, 1300); var yearsGregorian = range(momentJalaali(new Date()).year() + 100, 1920); var YearSelector = /*#__PURE__*/function (_Component) { inherits(YearSelector, _Component); var _super = _createSuper$4(YearSelector); function YearSelector(props) { var _this; classCallCheck(this, YearSelector); _this = _super.call(this, props); defineProperty(assertThisInitialized(_this), "state", { year: _this.props.selectedYear, month: _this.props.selectedMonth }); defineProperty(assertThisInitialized(_this), "getOffsetTop", function (element) { var offsetTop = 0; while (element) { console.log(element.scrollTop); offsetTop += element.offsetTop; element = element.offsetParent; } return offsetTop; }); defineProperty(assertThisInitialized(_this), "scrollToCurrentYearPositionRef", function () { var marginTop = 160; _this.yearsContainerRef.current.scrollTo({ top: _this.getOffsetTop(_this.currentYearPositionRef.current) - marginTop, behavior: 'smooth' // optional }); }); _this.currentYearPositionRef = React__default.createRef(); _this.yearsContainerRef = React__default.createRef(); return _this; } createClass(YearSelector, [{ key: "componentDidMount", value: function componentDidMount() { this.scrollToCurrentYearPositionRef(); } }, { key: "nextYear", value: function nextYear() { this.setState({ year: this.state.year.clone().add(1, 'year') }); } }, { key: "prevYear", value: function prevYear() { this.setState({ year: this.state.year.clone().subtract(1, 'year') }); } }, { key: "handleClick", value: function handleClick(key) { var _this$context = this.context, setMonth = _this$context.setMonth, setCalendarMode = _this$context.setCalendarMode; var isGregorian = this.props.isGregorian; var monthYearFormat = isGregorian ? 'M-YYYY' : 'jM-jYYYY'; setMonth(momentJalaali(key, monthYearFormat)); setCalendarMode('days'); } }, { key: "render", value: function render() { var _this2 = this; var _this$state = this.state, year = _this$state.year, month = _this$state.month; var _this$props = this.props, styles = _this$props.styles, isGregorian = _this$props.isGregorian; var yearFormat = isGregorian ? 'YYYY' : 'jYYYY'; var monthFormat = isGregorian ? 'M' : 'jM'; var years = isGregorian ? yearsGregorian : yearsJalaali; return /*#__PURE__*/React__default.createElement("div", { className: "month-selector" }, /*#__PURE__*/React__default.createElement(MonthsViewHeading, { isGregorian: isGregorian, styles: styles, year: year, onNextYear: this.nextYear.bind(this), onPrevYear: this.prevYear.bind(this) }), /*#__PURE__*/React__default.createElement("div", { ref: this.yearsContainerRef, className: styles.yearsList }, years.map(function (yearItem, key) { var buttonFingerprint = "".concat(month.format(monthFormat), "-").concat(years[key]); var isCurrent = Number(year.format(yearFormat)) === years[key]; var isCurrentYearPosition = Number(year.format(yearFormat)) === years[key]; var currentYearClass = classnames(styles.yearWrapper, defineProperty({}, styles.selected, isCurrent)); return /*#__PURE__*/React__default.createElement("div", { key: key, className: currentYearClass }, /*#__PURE__*/React__default.createElement("button", { ref: isCurrentYearPosition && _this2.currentYearPositionRef, onClick: _this2.handleClick.bind(_this2, buttonFingerprint) }, yearItem)); }))); } }]); return YearSelector; }(React.Component); defineProperty(YearSelector, "propTypes", { styles: PropTypes.object, selectedYear: PropTypes.object.isRequired, selectedMonth: PropTypes.object.isRequired, isGregorian: PropTypes.bool }); defineProperty(YearSelector, "contextTypes", { setCalendarMode: PropTypes.func.isRequired, setMonth: PropTypes.func.isRequired }); var _extends_1 = createCommonjsModule(function (module) { function _extends() { module.exports = _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } module.exports = _extends; }); function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; } var objectWithoutPropertiesLoose = _objectWithoutPropertiesLoose; function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; } var objectWithoutProperties = _objectWithoutProperties; function _createSuper$5(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$5(); return function () { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$5() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } var Day = /*#__PURE__*/function (_Component) { inherits(Day, _Component); var _super = _createSuper$5(Day); function Day() { classCallCheck(this, Day); return _super.apply(this, arguments); } createClass(Day, [{ key: "shouldComponentUpdate", value: function shouldComponentUpdate(nextProps) { return nextProps.selected !== this.props.selected || nextProps.disabled !== this.props.disabled || nextProps.isCurrentMonth !== this.props.isCurrentMonth; } }, { key: "handleClick", value: function handleClick(event) { event.preventDefault(); event.stopPropagation(); event.nativeEvent.stopImmediatePropagation(); var _this$props = this.props, disabled = _this$props.disabled, onClick = _this$props.onClick, day = _this$props.day; if (disabled) return; if (onClick) { onClick(day); } } }, { key: "render", value: function render() { var _classnames; var _this$props2 = this.props, day = _this$props2.day, disabled = _this$props2.disabled, selected = _this$props2.selected, isCurrentMonth = _this$props2.isCurrentMonth, onClick = _this$props2.onClick, styles = _this$props2.styles, isGregorian = _this$props2.isGregorian, isToday = _this$props2.isToday, colors = _this$props2.colors, rest = objectWithoutProperties(_this$props2, ["day", "disabled", "selected", "isCurrentMonth", "onClick", "styles", "isGregorian", "isToday", "colors"]); var className = classnames(styles.dayWrapper, (_classnames = {}, defineProperty(_classnames, styles.selected, selected), defineProperty(_classnames, styles.currentMonth, isCurrentMonth), defineProperty(_classnames, styles.today, isToday), defineProperty(_classnames, styles.disabled, disabled), _classnames)); var highlightDotContainer = classnames("highLightDot-container", defineProperty({}, styles.disabled, disabled)); return /*#__PURE__*/React__default.createElement("div", { className: className }, /*#__PURE__*/React__default.createElement("button", _extends_1({ type: "button", onClick: this.handleClick.bind(this), disabled: disabled }, rest), isGregorian ? day.format('D') : persianNumber(day.format('jD'))), /*#__PURE__*/React__default.createElement("div", { className: highlightDotContainer, onClick: this.handleClick.bind(this) }, colors.map(function (x, i) { return /*#__PURE__*/React__default.createElement("span", { key: i, className: "highLightDot", style: { backgroundColor: x } }); }))); } }]); return Day; }(React.Component); defineProperty(Day, "propTypes", { day: PropTypes.object.isRequired, isCurrentMonth: PropTypes.bool, disabled: PropTypes.bool, selected: PropTypes.bool, onClick: PropTypes.func, isGregorian: PropTypes.bool }); /** * Get days of a month that should be shown on a month page * * @param month A moment object * @returns {Array} */ function getDaysOfMonth(month, isGregorian) { var days = []; var monthFormat = isGregorian ? 'Month' : 'jMonth'; var dayOffset = isGregorian ? 0 : 1; var current = month.clone().startOf(monthFormat); var end = month.clone().endOf(monthFormat); // Set start to the first day of week in the last month current.subtract((current.day() + dayOffset) % 7, 'days'); // Set end to the last day of week in the next month end.add(6 - (end.day() + dayOffset) % 7, 'days'); while (current.isBefore(end)) { days.push(current.clone()); current.add(1, 'days'); } return days; } function addZero(val) { val = Number(val); if (val < 10) return "0".concat(val); return val; } function checkToday(compare) { var today = new Date(); var todayString = String(today.getFullYear()) + addZero(String(today.getMonth() + 1)) + addZero(String(today.getDate())); return compare === todayString; } var defaultStyles = { calendarContainer: 'calendarContainer', heading: 'heading', prev: 'prev', next: 'next', title: 'title', dayWrapper: 'dayWrapper', currentMonth: 'currentMonth', daysOfWeek: 'daysOfWeek', yearsList: 'yearsList', monthsList: 'monthsList', selected: 'selected', today: 'today', dayPickerContainer: 'dayPickerContainer', disabled: 'disabled' }; var MomentRange = require('moment-range'); var extendedMoment = MomentRange.extendMoment(momentJalaali); var RangesList = /*#__PURE__*/function () { function RangesList(ranges) { var _this = this; classCallCheck(this, RangesList); this.ranges = []; if (ranges) { ranges.forEach(function (item) { _this.validateRangeObject(item); var range = extendedMoment.range(item.start, item.end); // include start var start = range.start.add(-1, 'days'); _this.ranges.push({ color: item.color, range: range, disabled: !!item.disabled }); }); } } createClass(RangesList, [{ key: "getDayState", value: function getDayState(day) { var disabled = this.ranges.some(function (x) { return x.disabled && x.range.contains(day); }); var colors = this.ranges.filter(function (x) { return x.color && x.range.contains(day); }).map(function (x) { return x.color; }); return { disabled: disabled, colors: colors }; } }, { key: "validateRangeObject", value: function validateRangeObject(range) { if (!('start' in range)) throw "'start' property is a required property of 'range' object.\n range object: ".concat(JSON.stringify(range)); if (!('end' in range)) throw "'end' property is a required property of 'range' object.\n range object: ".concat(JSON.stringify(range)); } }]); return RangesList; }(); function _createSuper$6(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct$6(); return function () { var Super = getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return possibleConstructorReturn(this, result); }; } function _isNativeReflectConstruct$6() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } } var Calendar = /*#__PURE__*/function (_Component) { inherits(Calendar, _Component); var _super = _createSuper$6(Calendar); function Calendar() { var _this; classCallCheck(this, Calendar); for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) { args[_key] = arguments[_key]; } _this = _super.call.apply(_super, [this].concat(args)); defineProperty(assertThisInitialized(_this), "state", { year: _this.props.defaultYear || _this.props.selectedDay || momentJalaali(_this.props.min), month: _this.props.defaultMonth || _this.props.selectedDay || momentJalaali(_this.props.min), selectedDay: _this.props.selectedDay || _this.props.value || momentJalaali(), mode: 'days', isGregorian: _this.props.isGregorian, ranges: new RangesList(_this.props.ranges) }); defineProperty(assertThisInitialized(_this), "setMode", function (mode) { _this.setState({ mode: mode }); }); defineProperty(assertThisInitialized(_this), "setYear", function (year) { var onYearChange = _this.props.onYearChange; _this.setState({ year: year }); if (onYearChange) { onYearChange(year); } }); defineProperty(assertThisInitialized(_this), "setMonth", function (month) { var onMonthChange = _this.props.onMonthChange; _this.setState({ month: month }); if (onMonthChange) { onMonthChange(month); } }); defineProperty(assertThisInitialized(_this), "setType", function (type) { _this.setState({ type: type }); }); defineProperty(assertThisInitialized(_this), "nextMonth", function () { var isGregorian = _this.state.isGregorian; var monthFormat = isGregorian ? 'Month' : 'jMonth'; _this.setState({ month: _this.state.month.clone().add(1, monthFormat) }, function () { return _this.props.onMonthChange && _this.props.onMonthChange(_this.state.month); }); }); defineProperty(assertThisInitialized(_this), "prevMonth", function () { var isGregorian = _this.state.isGregorian; var monthFormat = isGregorian ? 'Month' : 'jMonth'; _this.setState({ month: _this.state.month.clone().subtract(1, monthFormat) }, function () { return _this.props.onMonthChange && _this.props.onMonthChange(_this.state.month); }); }); defineProperty(assertThisInitialized(_this), "selectDay", function (selectedDay) { var _this$state = _this.state, month = _this$state.month, isGregorian = _this$state.isGregorian; var yearMonthFormat = isGregorian ? 'YYYYMM' : 'jYYYYjMM'; if (!selectedDay) { _this.setState({ year: _this.props.defaultYear || _this.props.selectedDay || momentJalaali(_this.props.min), month: _this.props.defaultMonth || _this.props.selectedDay || momentJalaali(_this.props.min), selectedDay: null }); return; } // Because there's no `m1.isSame(m2, 'jMonth')` if (selectedDay.format(yearMonthFormat) !== month.format(yearMonthFormat)) { _this.setState({ month: selectedDay }); } _this.setState({ selectedDay: selectedDay }); }); defineProperty(assertThisInitialized(_this), "handleClickOnDay", function (selectedDay) { var _this$props = _this.props, onSelect = _this$props.onSelect, onChange = _this$props.onChange; _this.selectDay(selectedDay); if (onSelect) { onSelect(selectedDay); } if (onChange) onChange(selectedDay); }); defineProperty(assertThisInitialized(_this), "handleClickOutside", function (event) { if (_this.props.onClickOutside) { _this.props.onClickOutside(event); } }); defineProperty(assertThisInitialized(_this), "days", null); defineProperty(assertThisInitialized(_this), "lastRenderedMonth", null); defineProperty(assertThisInitialized(_this), "renderMonthSelector", function () { var _this$state2 = _this.state, month = _this$state2.month, isGregorian = _this$state2.isGregorian; var _this$props2 = _this.props, styles = _this$props2.styles, disableYearSelector = _this$props2.disableYearSelector; return /*#__PURE__*/React__default.createElement(MonthSelector, { disableYearSelector: disableYearSelector, styles: styles, isGregorian: isGregorian, selectedMonth: month }); }); defineProperty(assertThisInitialized(_this), "renderYearSelector", function () { var _this$state3 = _this.state, year = _this$state3.year, month = _this$state3.month, isGregorian = _this$state3.isGregorian; var styles = _this.props.styles; return /*#__PURE__*/React__default.createElement(YearSelector, { styles: styles, isGregorian: isGregorian, selectedYear: year, selectedMonth: month }); }); defineProperty(assertThisInitialized(_this), "renderDays", function () { var _this$state4 = _this.state, month = _this$state4.month, selectedDay = _this$state4.selectedDay, isGregorian = _this$state4.isGregorian; var _this$props3 = _this.props, children = _this$props3.children, min = _this$props3.min, max = _this$props3.max, styles = _this$props3.styles, outsideClickIgnoreClass = _this$props3.outsideClickIgnoreClass; var days; if (_this.lastRenderedMonth === month) { days = _this.days; } else { days = getDaysOfMonth(month, isGregorian); _this.days = days; _this.lastR