gah-datepicker - npm Package Compare versions

Comparing version 1.0.1 to 1.1.0

functions.js

@@ -194,3 +194,3 @@ import React from 'react';
 var GetToday = {
-  J:()=>{
+  J:(type)=>{
     var date = new Date().toLocaleDateString('fa-IR').split('/');
@@ -203,11 +203,16 @@ var dic = {'۰':0,'۱':1,'۲':2,'۳':3,'۴':4,'۵':5,'۶':6,'۷':7,'۸':8,'۹':9};
     }   
+    if(type === 'month'){date[2] = 1;}
+    else if(type === 'year'){date[1] = 1; date[2] = 1;}
     return date;
   },
-  G:()=>{
+  G:(type)=>{
     var date = new Date();
-    return [date.getFullYear(),date.getMonth() + 1,date.getDate()]
+    var result = [date.getFullYear(),date.getMonth() + 1,date.getDate()]
+    if(type === 'month'){result[2] = 1;}
+    else if(type === 'year'){result[1] = 1; result[2] = 1;}
+    return result;
   }
 }
-export function getToday(type){
-  return GetToday[type]()
+export function getToday(mode,type = 'day'){
+  return GetToday[mode](type)
 }
@@ -214,0 +219,0 @@

index.js

@@ -78,3 +78,3 @@ "use strict";
     };
-    _this.type = _this.props.jalali ? 'J' : 'G';
+    _this.mode = _this.props.jalali ? 'J' : 'G';
 
@@ -94,3 +94,3 @@ _this.init();
           range = _this$props.range;
-      var today = (0, _functions.getToday)(this.type);
+      var today = (0, _functions.getToday)(this.mode);
       this.startYear = today[0] - prevYears;
@@ -114,3 +114,5 @@ this.endYear = today[0] + nextYears;
       var Value,
-          splitter = this.props.splitter;
+          _this$props2 = this.props,
+          splitter = _this$props2.splitter,
+          type = _this$props2.type;
 
@@ -159,13 +161,17 @@ if (Array.isArray(value)) {
 
-      if (isNaN(day)) {
-        day = 1;
-      }
+      if (type === 'day') {
+        if (isNaN(day)) {
+          day = 1;
+        }
 
-      var daysLength = (0, _functions.getMonthDaysLength)(year, month, this.type);
+        var daysLength = (0, _functions.getMonthDaysLength)(year, month, this.mode);
 
-      if (day > daysLength) {
-        day = daysLength;
-      }
+        if (day > daysLength) {
+          day = daysLength;
+        }
 
-      if (day < 1) {
+        if (day < 1) {
+          day = 1;
+        }
+      } else {
         day = 1;
@@ -237,5 +243,5 @@ }
 
-      var _this$props2 = this.props,
-          onChange = _this$props2.onChange,
-          range = _this$props2.range;
+      var _this$props3 = this.props,
+          onChange = _this$props3.onChange,
+          range = _this$props3.range;
       this.setState(obj, sendChanges && onChange ? function () {
@@ -271,17 +277,18 @@ return onChange(range ? _this2.rangeDetails : _this2.details);
     value: function getDetailsSingle(year, month, day) {
-      var _this$props3 = this.props,
-          _this$props3$splitter = _this$props3.splitter,
-          splitter = _this$props3$splitter === void 0 ? '/' : _this$props3$splitter,
-          jalali = _this$props3.jalali;
+      var _this$props4 = this.props,
+          _this$props4$splitter = _this$props4.splitter,
+          splitter = _this$props4$splitter === void 0 ? '/' : _this$props4$splitter,
+          jalali = _this$props4.jalali,
+          type = _this$props4.type;
 
-      var _getWeekDay = (0, _functions.getWeekDay)([year, month, day], this.type),
+      var _getWeekDay = (0, _functions.getWeekDay)([year, month, day], this.mode),
           weekDay = _getWeekDay.weekDay,
           weekDayIndex = _getWeekDay.index;
 
-      var _getWeekDay2 = (0, _functions.getWeekDay)([year, month, 1], this.type),
+      var _getWeekDay2 = (0, _functions.getWeekDay)([year, month, 1], this.mode),
           monthFirstDayWeekDay = _getWeekDay2.weekDay;
 
-      var today = (0, _functions.getToday)(this.type);
+      var today = (0, _functions.getToday)(this.mode, type);
       var extra = {};
-      var months = (0, _functions.getMonths)(this.type);
+      var months = (0, _functions.getMonths)(this.mode);
 
@@ -292,6 +299,8 @@ if (jalali) {
         var weekDayGeorgian = (0, _functions.getWeekDay)(georgian, 'G').weekDay;
+        var monthStringGeorgian = (0, _functions.getMonths)('G')[month - 1];
         extra = {
           georgian: georgian,
           todayGeorgian: todayGeorgian,
-          weekDayGeorgian: weekDayGeorgian
+          weekDayGeorgian: weekDayGeorgian,
+          monthStringGeorgian: monthStringGeorgian
         };
@@ -328,3 +337,3 @@ }
         var dateArray = [dateObj.year, dateObj.month, dateObj.day];
-        var newDate = (0, _functions.getNextDay)(dateArray, this.type);
+        var newDate = (0, _functions.getNextDay)(dateArray, this.mode);
         var newDateObj = {
@@ -342,3 +351,3 @@ year: newDate[0],
 
-        var _newDate = (0, _functions.getNextDay)([year, month, day], this.type);
+        var _newDate = (0, _functions.getNextDay)([year, month, day], this.mode);
 
@@ -362,3 +371,3 @@ var _newDateObj = {
         var dateArray = [dateObj.year, dateObj.month, dateObj.day];
-        var newDate = (0, _functions.getPrevDay)(dateArray, this.type);
+        var newDate = (0, _functions.getPrevDay)(dateArray, this.mode);
         var newDateObj = {
@@ -376,3 +385,3 @@ year: newDate[0],
 
-        var _newDate2 = (0, _functions.getPrevDay)([year, month, day], this.type);
+        var _newDate2 = (0, _functions.getPrevDay)([year, month, day], this.mode);
 
@@ -390,5 +399,6 @@ var _newDateObj2 = {
     value: function getValue() {
-      var _this$props4 = this.props,
-          range = _this$props4.range,
-          splitter = _this$props4.splitter;
+      var _this$props5 = this.props,
+          range = _this$props5.range,
+          splitter = _this$props5.splitter,
+          type = _this$props5.type;
 
@@ -399,3 +409,15 @@ if (range) {
             end = _this$state5.end;
-        return start.year + splitter + start.month + splitter + start.day + ' - ' + end.year + splitter + end.month + splitter + end.day;
+
+        if (type === 'day') {
+          return start.year + splitter + start.month + splitter + start.day + ' - ' + end.year + splitter + end.month + splitter + end.day;
+        }
+
+        if (type === 'month') {
+          var months = (0, _functions.getMonths)(this.mode);
+          return months[start.month - 1] + ' ' + start.year + ' - ' + months[end.month - 1] + ' ' + end.year;
+        }
+
+        if (type === 'year') {
+          return start.year + ' - ' + end.year;
+        }
       } else {
@@ -406,3 +428,16 @@ var _this$state6 = this.state,
             day = _this$state6.day;
-        return year + splitter + month + splitter + day;
+
+        if (type === 'day') {
+          return year + splitter + month + splitter + day;
+        }
+
+        if (type === 'month') {
+          var _months = (0, _functions.getMonths)(this.mode);
+
+          return _months[month - 1] + ' ' + year;
+        }
+
+        if (type === 'year') {
+          return year;
+        }
       }
@@ -415,5 +450,5 @@ }
 
-      var _this$props5 = this.props,
-          jalali = _this$props5.jalali,
-          range = _this$props5.range;
+      var _this$props6 = this.props,
+          jalali = _this$props6.jalali,
+          range = _this$props6.range;
       this.getDateDetails();
@@ -431,2 +466,3 @@ var Value = this.getValue();
         animate: true,
+        open: true,
         className: "gah-datepicker-button",
@@ -447,3 +483,3 @@ text: Value,
             years: _this3.years,
-            type: _this3.type,
+            mode: _this3.mode,
             setActiveRange: _this3.setActiveRange.bind(_this3)
@@ -473,3 +509,3 @@ }));
 GAH.defaultProps = {
-  size: 150,
+  size: 180,
   jalali: true,
@@ -479,3 +515,4 @@ disabled: false,
   prevYears: 10,
-  nextYears: 20
+  nextYears: 20,
+  type: 'day'
 };
@@ -498,10 +535,11 @@ var rdpContext = /*#__PURE__*/(0, _react.createContext)();
     value: function isDisabled(date) {
-      var _this$props6 = this.props,
-          limits = _this$props6.limits,
-          splitter = _this$props6.splitter,
-          range = _this$props6.range,
-          start = _this$props6.start,
-          end = _this$props6.end,
-          activeRange = _this$props6.activeRange,
-          type = _this$props6.type;
+      var _this$props7 = this.props,
+          limits = _this$props7.limits,
+          splitter = _this$props7.splitter,
+          range = _this$props7.range,
+          start = _this$props7.start,
+          end = _this$props7.end,
+          activeRange = _this$props7.activeRange,
+          mode = _this$props7.mode,
+          type = _this$props7.type;
 
@@ -525,3 +563,3 @@ if (range) {
 
-        if (limit.type === 'weekDay') {
+        if (type === 'day' && limit.type === 'weekDay') {
           var thisMonth = true;
@@ -536,3 +574,3 @@
           if (thisMonth) {
-            var weekDay = (0, _functions.getWeekDay)(date, type).index + 1;
+            var weekDay = (0, _functions.getWeekDay)(date, mode).index + 1;
 
@@ -563,2 +601,12 @@ if (weekDay === limit.weekDay) {
 
+          if (type === 'month') {
+            dateArray1[2] = 1;
+            dateArray2[2] = 1;
+          } else if (type === 'year') {
+            dateArray1[1] = 1;
+            dateArray1[2] = 1;
+            dateArray2[1] = 1;
+            dateArray2[2] = 1;
+          }
+
           dateArray1 = [parseInt(dateArray1[0]), parseInt(dateArray1[1]), parseInt(dateArray1[2])];
@@ -592,2 +640,9 @@ dateArray2 = [parseInt(dateArray2[0]), parseInt(dateArray2[1]), parseInt(dateArray2[2])];
 
+          if (type === 'month') {
+            dateArray[2] = 1;
+          } else if (type === 'year') {
+            dateArray[1] = 1;
+            dateArray[2] = 1;
+          }
+
           if ((0, _functions.compaireDate)(date, [parseInt(dateArray[0]), parseInt(dateArray[1]), parseInt(dateArray[2])]) === limit.type) {
@@ -604,5 +659,7 @@ return true;
     value: function getHeader() {
-      var _this$props7 = this.props,
-          range = _this$props7.range,
-          size = _this$props7.size;
+      var _this$props8 = this.props,
+          range = _this$props8.range,
+          size = _this$props8.size,
+          type = _this$props8.type,
+          mode = _this$props8.mode;
       var style = {
@@ -617,6 +674,6 @@ height: size / 8 + 6,
       } else {
-        var _this$props8 = this.props,
-            activeRange = _this$props8.activeRange,
-            setActiveRange = _this$props8.setActiveRange,
-            rangeDetails = _this$props8.rangeDetails;
+        var _this$props9 = this.props,
+            activeRange = _this$props9.activeRange,
+            setActiveRange = _this$props9.setActiveRange,
+            rangeDetails = _this$props9.rangeDetails;
         var _rangeDetails$start = rangeDetails.start,
@@ -633,2 +690,13 @@ year1 = _rangeDetails$start.year,
         };
+        var value1, value2;
+
+        if (type === 'month') {
+          var months = (0, _functions.getMonths)(mode);
+          value1 = year1 + ' ' + months[month1 - 1];
+          value2 = year2 + ' ' + months[month2 - 1];
+        } else {
+          value1 = year1 + ' / ' + month1 + ' / ' + day1;
+          value2 = year2 + ' / ' + month2 + ' / ' + day2;
+        }
+
         return /*#__PURE__*/_react.default.createElement("div", {
@@ -643,3 +711,3 @@ className: "rdp-header",
           style: rangeStyle
-        }, year1 + ' / ' + month1 + ' / ' + day1), /*#__PURE__*/_react.default.createElement("span", {
+        }, value1), /*#__PURE__*/_react.default.createElement("span", {
           className: 'rdp-range-value rdp-range-end' + (activeRange === 'end' ? ' active' : ''),
@@ -650,3 +718,3 @@ onClick: function onClick() {
           style: rangeStyle
-        }, year2 + ' / ' + month2 + ' / ' + day2));
+        }, value2));
       }
@@ -657,7 +725,16 @@ }
     value: function getBody() {
-      return this.props.listView ? /*#__PURE__*/_react.default.createElement(RDatePickerList, {
-        details: this.props.details
-      }) : /*#__PURE__*/_react.default.createElement(RDatePickerGrid, {
-        key: this.props.activeRange,
-        details: this.props.details
+      var _this$props10 = this.props,
+          listView = _this$props10.listView,
+          details = _this$props10.details,
+          activeRange = _this$props10.activeRange;
+
+      if (listView) {
+        return /*#__PURE__*/_react.default.createElement(GAHDatePickerList, {
+          details: details
+        });
+      }
+
+      return /*#__PURE__*/_react.default.createElement(GAHDatePickerGrid, {
+        key: activeRange,
+        details: details
       });
@@ -670,8 +747,8 @@ }
 
-      var _this$props9 = this.props,
-          onSubmit = _this$props9.onSubmit,
-          onClose = _this$props9.onClose,
-          type = _this$props9.type,
-          disabled = _this$props9.disabled,
-          size = _this$props9.size;
+      var _this$props11 = this.props,
+          onSubmit = _this$props11.onSubmit,
+          onClose = _this$props11.onClose,
+          mode = _this$props11.mode,
+          disabled = _this$props11.disabled,
+          size = _this$props11.size;
       var buttonStyle = {
@@ -683,7 +760,7 @@ padding: "".concat(size / 24, "px ").concat(size / 12, "px")
         J: 'بستن'
-      }[type];
+      }[mode];
       var submitText = {
         G: 'OK',
         J: 'تایید'
-      }[type];
+      }[mode];
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -718,12 +795,14 @@ className: "rdp-footer",
     value: function render() {
-      var _this$props10 = this.props,
-          _this$props10$theme = _this$props10.theme,
-          theme = _this$props10$theme === void 0 ? 'theme1' : _this$props10$theme,
-          className = _this$props10.className,
-          id = _this$props10.id,
-          style = _this$props10.style,
-          _this$props10$default = _this$props10.defaultProps,
-          defaultProps = _this$props10$default === void 0 ? {} : _this$props10$default;
+      var _this$props12 = this.props,
+          _this$props12$theme = _this$props12.theme,
+          theme = _this$props12$theme === void 0 ? 'theme1' : _this$props12$theme,
+          className = _this$props12.className,
+          id = _this$props12.id,
+          style = _this$props12.style,
+          _this$props12$default = _this$props12.defaultProps,
+          defaultProps = _this$props12$default === void 0 ? {} : _this$props12$default,
+          years = _this$props12.years;
       var context = { ...this.props,
-        isDisabled: this.isDisabled.bind(this)
+        isDisabled: this.isDisabled.bind(this),
+        years: years
       };
@@ -747,9 +826,9 @@ var className = "rdp rdp-".concat(theme).concat(className ? ' ' + className : '');
 
-var RDatePickerList = /*#__PURE__*/function (_Component3) {
-  _inherits(RDatePickerList, _Component3);
+var GAHDatePickerList = /*#__PURE__*/function (_Component3) {
+  _inherits(GAHDatePickerList, _Component3);
 
-  var _super3 = _createSuper(RDatePickerList);
+  var _super3 = _createSuper(GAHDatePickerList);
 
-  function RDatePickerList() {
-    _classCallCheck(this, RDatePickerList);
+  function GAHDatePickerList() {
+    _classCallCheck(this, GAHDatePickerList);
 
@@ -759,3 +838,3 @@ return _super3.apply(this, arguments);
 
-  _createClass(RDatePickerList, [{
+  _createClass(GAHDatePickerList, [{
     key: "change",
@@ -768,2 +847,3 @@ value: function change(year, month, day) {
           activeRange = _this$context.activeRange,
+          mode = _this$context.mode,
           type = _this$context.type;
@@ -790,3 +870,3 @@ var details = this.props.details;
 
-      var daysLength = (0, _functions.getMonthDaysLength)(year, month, type);
+      var daysLength = (0, _functions.getMonthDaysLength)(year, month, mode);
 
@@ -823,7 +903,7 @@ if (day > daysLength) {
       var details = this.props.details;
-      var type = this.context.type;
+      var mode = this.context.mode;
       var year = details.year,
           month = details.month,
           days = [];
-      var length = (0, _functions.getMonthDaysLength)(year, month, type);
+      var length = (0, _functions.getMonthDaysLength)(year, month, mode);
 
@@ -875,5 +955,6 @@ for (var i = 1; i <= length; i++) {
           size = _this$context3.size,
+          mode = _this$context3.mode,
           type = _this$context3.type;
       var details = this.props.details;
-      var months = (0, _functions.getMonths)(type);
+      var months = (0, _functions.getMonths)(mode);
       var year = details.year,
@@ -885,3 +966,3 @@ month = details.month,
       var selectStyle = {
-        direction: type === 'J' ? 'rtl' : 'ltr'
+        direction: mode === 'J' ? 'rtl' : 'ltr'
       };
@@ -891,7 +972,7 @@ var sign = {
         G: 1
-      }[type];
+      }[mode];
       var todayText = {
         J: 'امروز',
         G: 'Today'
-      }[type];
+      }[mode];
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
@@ -902,3 +983,3 @@ className: "rdp-list-header",
         }
-      }, type === 'J' && /*#__PURE__*/_react.default.createElement("span", null, "".concat(g[0], "/").concat(g[1], "/").concat(g[2], " ").concat(details.weekDayGeorgian.slice(0, 3))), /*#__PURE__*/_react.default.createElement("div", {
+      }, mode === 'J' && type === 'day' && /*#__PURE__*/_react.default.createElement("span", null, "".concat(g[0], "/").concat(g[1], "/").concat(g[2], " ").concat(details.weekDayGeorgian.slice(0, 3))), mode === 'J' && type === 'month' && /*#__PURE__*/_react.default.createElement("span", null, "".concat(g[0], " ").concat(details.monthStringGeorgian)), /*#__PURE__*/_react.default.createElement("div", {
         onClick: function onClick() {
@@ -953,3 +1034,5 @@ return SetState({
         style: selectStyle
-      }, months.map(function (m, i) {
+      }, months.filter(function (m, i) {
+        return !isDisabled([year, i + 1, 1]);
+      }).map(function (m, i) {
         return /*#__PURE__*/_react.default.createElement("option", {
@@ -964,3 +1047,3 @@ key: i,
         }
-      }, icons.plus)), /*#__PURE__*/_react.default.createElement("div", {
+      }, icons.plus)), type === 'day' && /*#__PURE__*/_react.default.createElement("div", {
         className: "rdp-list-item"
@@ -994,16 +1077,16 @@ }, /*#__PURE__*/_react.default.createElement("div", {
 
-  return RDatePickerList;
+  return GAHDatePickerList;
 }(_react.Component);
 
-_defineProperty(RDatePickerList, "contextType", rdpContext);
+_defineProperty(GAHDatePickerList, "contextType", rdpContext);
 
-var RDatePickerGrid = /*#__PURE__*/function (_Component4) {
-  _inherits(RDatePickerGrid, _Component4);
+var GAHDatePickerGrid = /*#__PURE__*/function (_Component4) {
+  _inherits(GAHDatePickerGrid, _Component4);
 
-  var _super4 = _createSuper(RDatePickerGrid);
+  var _super4 = _createSuper(GAHDatePickerGrid);
 
-  function RDatePickerGrid(props) {
+  function GAHDatePickerGrid(props) {
     var _this6;
 
-    _classCallCheck(this, RDatePickerGrid);
+    _classCallCheck(this, GAHDatePickerGrid);
 
@@ -1019,7 +1102,7 @@ _this6 = _super4.call(this, props);
 
-  _createClass(RDatePickerGrid, [{
+  _createClass(GAHDatePickerGrid, [{
     key: "getWeekDays",
     value: function getWeekDays() {
-      var type = this.context.type;
-      var weekDays = type === 'J' ? ['شنبه', 'یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه'] : ['SUNDAY', 'MONDAY', 'THUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
+      var mode = this.context.mode;
+      var weekDays = mode === 'J' ? ['شنبه', 'یکشنبه', 'دوشنبه', 'سه شنبه', 'چهارشنبه', 'پنجشنبه', 'جمعه'] : ['SUNDAY', 'MONDAY', 'THUESDAY', 'WEDNESDAY', 'THURSDAY', 'FRIDAY', 'SATURDAY'];
       return weekDays.map(function (w, i) {
@@ -1029,3 +1112,3 @@ return /*#__PURE__*/_react.default.createElement("div", {
           className: "rdp-weekday rdp-cell"
-        }, /*#__PURE__*/_react.default.createElement("span", null, w.slice(0, type === 'J' ? 1 : 2)));
+        }, /*#__PURE__*/_react.default.createElement("span", null, w.slice(0, mode === 'J' ? 1 : 2)));
       });
@@ -1036,7 +1119,7 @@ }
     value: function getSpaces() {
-      var type = this.context.type;
+      var mode = this.context.mode;
       var _this$state7 = this.state,
           activeYear = _this$state7.activeYear,
           activeMonth = _this$state7.activeMonth;
-      var firstDayWeekDayIndex = (0, _functions.getWeekDay)([activeYear, activeMonth, 1], type).index;
+      var firstDayWeekDayIndex = (0, _functions.getWeekDay)([activeYear, activeMonth, 1], mode).index;
       var Spaces = [];
@@ -1077,12 +1160,9 @@
     key: "getCellClassName",
-    value: function getCellClassName(day, disabled) {
+    value: function getCellClassName(year, month, day, disabled) {
       var _this$context5 = this.context,
           range = _this$context5.range,
-          type = _this$context5.type,
+          mode = _this$context5.mode,
           end = _this$context5.end,
           start = _this$context5.start;
       var details = this.props.details;
-      var _this$state8 = this.state,
-          activeYear = _this$state8.activeYear,
-          activeMonth = _this$state8.activeMonth;
       var str = 'rdp-cell rdp-cell-first';
@@ -1094,11 +1174,11 @@
 
-      if (details.year === activeYear && details.month === activeMonth && details.day === day) {
+      if (details.year === year && details.month === month && details.day === day) {
         str += ' active';
       }
 
-      if (details.today[0] === activeYear && details.today[1] === activeMonth && details.today[2] === day) {
+      if (details.today[0] === year && details.today[1] === month && details.today[2] === day) {
         str += ' today';
       }
 
-      if (type === 'J') {
+      if (mode === 'J') {
         str += ' is-jalali';
@@ -1108,4 +1188,4 @@ }
       if (range) {
-        var a = (0, _functions.compaireDate)([activeYear, activeMonth, day], [end.year, end.month, end.day]);
-        var b = (0, _functions.compaireDate)([activeYear, activeMonth, day], [start.year, start.month, start.day]);
+        var a = (0, _functions.compaireDate)([year, month, day], [end.year, end.month, end.day]);
+        var b = (0, _functions.compaireDate)([year, month, day], [start.year, start.month, start.day]);
 
@@ -1128,37 +1208,106 @@ if (a === 'less' && b === 'greater') {
   }, {
-    key: "getDayCells",
-    value: function getDayCells() {
+    key: "getCells",
+    value: function getCells() {
+      var type = this.context.type;
+      return this['getCellsBy' + type]();
+    }
+  }, {
+    key: "getCellsByday",
+    value: function getCellsByday() {
       var _this7 = this;
 
-      var _this$state9 = this.state,
-          activeYear = _this$state9.activeYear,
-          activeMonth = _this$state9.activeMonth;
+      var _this$state8 = this.state,
+          activeYear = _this$state8.activeYear,
+          activeMonth = _this$state8.activeMonth;
       var _this$context6 = this.context,
           isDisabled = _this$context6.isDisabled,
-          type = _this$context6.type;
-      var daysLength = (0, _functions.getMonthDaysLength)(activeYear, activeMonth, type);
-      var days = [];
+          mode = _this$context6.mode;
+      var daysLength = (0, _functions.getMonthDaysLength)(activeYear, activeMonth, mode);
+      var Days = [];
 
-      var _loop = function _loop(i) {
-        var disabled = isDisabled([activeYear, activeMonth, i]);
+      var _loop = function _loop(day) {
+        var disabled = isDisabled([activeYear, activeMonth, day]);
 
-        var className = _this7.getCellClassName(i, disabled);
+        var className = _this7.getCellClassName(activeYear, activeMonth, day, disabled);
 
         var onClick = disabled || _this7.context.disabled ? undefined : function () {
-          return _this7.change(activeYear, activeMonth, i);
+          return _this7.change(activeYear, activeMonth, day);
         };
-        days.push( /*#__PURE__*/_react.default.createElement("div", {
+        Days.push( /*#__PURE__*/_react.default.createElement("div", {
           onClick: onClick,
-          key: 'day' + i,
+          key: 'day' + day,
           className: className
-        }, i));
+        }, day));
       };
 
-      for (var i = 1; i <= daysLength; i++) {
-        _loop(i);
+      for (var day = 1; day <= daysLength; day++) {
+        _loop(day);
       }
 
-      return days;
+      return Days;
     }
   }, {
+    key: "getCellsBymonth",
+    value: function getCellsBymonth() {
+      var _this8 = this;
+
+      var _this$context7 = this.context,
+          mode = _this$context7.mode,
+          isDisabled = _this$context7.isDisabled;
+      var activeYear = this.state.activeYear;
+      var months = (0, _functions.getMonths)(mode);
+      var Months = [];
+
+      var _loop2 = function _loop2(month) {
+        var disabled = isDisabled([activeYear, month + 1, 1]);
+        Months.push( /*#__PURE__*/_react.default.createElement("div", {
+          key: month,
+          style: {
+            borderRadius: 0
+          },
+          className: _this8.getCellClassName(activeYear, month + 1, 1, disabled),
+          onClick: disabled || _this8.context.disabled ? undefined : function () {
+            return _this8.change(activeYear, month + 1, 1);
+          }
+        }, months[month]));
+      };
+
+      for (var month = 0; month < months.length; month++) {
+        _loop2(month);
+      }
+
+      return Months;
+    }
+  }, {
+    key: "getCellsByyear",
+    value: function getCellsByyear() {
+      var _this9 = this;
+
+      var _this$context8 = this.context,
+          isDisabled = _this$context8.isDisabled,
+          years = _this$context8.years;
+      var Years = [];
+
+      var _loop3 = function _loop3(year) {
+        var disabled = isDisabled([years[year], 1, 1]);
+        Years.push( /*#__PURE__*/_react.default.createElement("div", {
+          key: year,
+          style: {
+            borderRadius: 0,
+            minHeight: '24px'
+          },
+          className: _this9.getCellClassName(years[year], 1, 1, disabled),
+          onClick: disabled || _this9.context.disabled ? undefined : function () {
+            return _this9.change(years[year], 1, 1);
+          }
+        }, years[year]));
+      };
+
+      for (var year = 0; year < years.length; year++) {
+        _loop3(year);
+      }
+
+      return Years;
+    }
+  }, {
     key: "getEndSpaces",
@@ -1178,10 +1327,40 @@ value: function getEndSpaces(length) {
   }, {
-    key: "changeActiveMonth",
-    value: function changeActiveMonth(value) {
+    key: "changeActivePage",
+    value: function changeActivePage(value) {
+      var type = this.context.type;
+      this['changeActivePageType' + type](value);
+    }
+  }, {
+    key: "changeActivePageTypemonth",
+    value: function changeActivePageTypemonth(value) {
       var details = this.props.details;
-      var _this$state10 = this.state,
-          activeYear = _this$state10.activeYear,
-          activeMonth = _this$state10.activeMonth;
+      var activeYear = this.state.activeYear;
 
       if (value === 1) {
+        if (activeYear === details.endYear) {
+          return;
+        }
+
+        activeYear++;
+      } else {
+        if (activeYear === details.startYear) {
+          return;
+        }
+
+        activeYear--;
+      }
+
+      this.setState({
+        activeYear: activeYear
+      });
+    }
+  }, {
+    key: "changeActivePageTypeday",
+    value: function changeActivePageTypeday(value) {
+      var details = this.props.details;
+      var _this$state9 = this.state,
+          activeYear = _this$state9.activeYear,
+          activeMonth = _this$state9.activeMonth;
+
+      if (value === 1) {
         if (activeMonth === 12) {
@@ -1218,20 +1397,31 @@ if (activeYear === details.endYear) {
     value: function getHeader() {
-      var _this8 = this;
+      var _this10 = this;
 
-      var _this$context7 = this.context,
-          icons = _this$context7.icons,
-          SetState = _this$context7.SetState,
-          listView = _this$context7.listView,
-          disabled = _this$context7.disabled,
-          size = _this$context7.size,
-          type = _this$context7.type;
-      var months = (0, _functions.getMonths)(type);
-      var _this$state11 = this.state,
-          activeYear = _this$state11.activeYear,
-          activeMonth = _this$state11.activeMonth;
-      var monthString = months[activeMonth - 1];
+      var _this$context9 = this.context,
+          icons = _this$context9.icons,
+          SetState = _this$context9.SetState,
+          listView = _this$context9.listView,
+          disabled = _this$context9.disabled,
+          size = _this$context9.size,
+          mode = _this$context9.mode,
+          type = _this$context9.type;
+      var _this$state10 = this.state,
+          activeYear = _this$state10.activeYear,
+          activeMonth = _this$state10.activeMonth;
       var sign = {
         J: -1,
         G: 1
-      }[type];
+      }[mode];
+      var value;
+
+      if (type === 'year') {
+        return null;
+      } else if (type === 'day') {
+        var months = (0, _functions.getMonths)(mode);
+        var monthString = months[activeMonth - 1];
+        value = (mode === 'J' ? monthString : monthString.slice(0, 3)) + ' ' + activeYear;
+      } else {
+        value = activeYear;
+      }
+
       return /*#__PURE__*/_react.default.createElement("div", {
@@ -1245,3 +1435,3 @@ className: "rdp-grid-header",
         onClick: function onClick() {
-          return _this8.changeActiveMonth(-sign);
+          return _this10.changeActivePage(-sign);
         }
@@ -1261,5 +1451,5 @@ }, icons.minus), /*#__PURE__*/_react.default.createElement("div", {
         }
-      }, (type === 'J' ? monthString : monthString.slice(0, 3)) + ' ' + activeYear), !listView && !disabled && /*#__PURE__*/_react.default.createElement("div", {
+      }, value), !listView && !disabled && /*#__PURE__*/_react.default.createElement("div", {
         onClick: function onClick() {
-          return _this8.changeActiveMonth(sign);
+          return _this10.changeActivePage(sign);
         }
@@ -1271,12 +1461,39 @@ }, icons.plus));
     value: function getStyle() {
-      var _this$context8 = this.context,
-          size = _this$context8.size,
-          type = _this$context8.type;
+      var _this$context10 = this.context,
+          size = _this$context10.size,
+          mode = _this$context10.mode,
+          type = _this$context10.type;
+      var columnCount = {
+        day: 7,
+        month: 3,
+        year: 4
+      }[type];
+      var rowCount = {
+        day: 7,
+        month: 4,
+        year: 0
+      }[type];
       var padding = size / 24,
           fontSize = size / 18,
-          a = (size - padding * 2) / 7;
+          a = (size - padding * 2) / columnCount;
+      var rowHeight = {
+        day: a,
+        month: size / 5.5,
+        year: size / 5.5
+      }[type];
+      var gridTemplateColumns = '',
+          gridTemplateRows = '';
+
+      for (var i = 1; i <= columnCount; i++) {
+        gridTemplateColumns += a + 'px' + (i !== columnCount ? ' ' : '');
+      }
+
+      for (var _i2 = 1; _i2 <= rowCount; _i2++) {
+        gridTemplateRows += rowHeight + 'px' + (_i2 !== rowCount ? ' ' : '');
+      }
+
       return {
-        gridTemplateColumns: "".concat(a, "px ").concat(a, "px ").concat(a, "px ").concat(a, "px ").concat(a, "px ").concat(a, "px ").concat(a, "px"),
-        gridTemplateRows: "".concat(a, "px ").concat(a, "px ").concat(a, "px ").concat(a, "px ").concat(a, "px ").concat(a, "px ").concat(a, "px"),
-        direction: type === 'J' ? 'rtl' : 'ltr',
+        gridTemplateColumns: gridTemplateColumns,
+        gridTemplateRows: gridTemplateRows,
+        direction: mode === 'J' ? 'rtl' : 'ltr',
         padding: padding,
@@ -1287,18 +1504,34 @@ fontSize: fontSize
   }, {
-    key: "render",
-    value: function render() {
+    key: "getContentday",
+    value: function getContentday() {
       var Spaces = this.getSpaces(),
           WeekDays = this.getWeekDays(),
-          Days = this.getDayCells();
+          Days = this.getCells();
       var EndSpaces = this.getEndSpaces(42 - (Spaces.length + Days.length));
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, WeekDays, Spaces, Days, EndSpaces);
+    }
+  }, {
+    key: "getContentmonth",
+    value: function getContentmonth() {
+      return this.getCells();
+    }
+  }, {
+    key: "getContentyear",
+    value: function getContentyear() {
+      return this.getCells();
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var type = this.context.type;
       return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, this.getHeader(), /*#__PURE__*/_react.default.createElement("div", {
         className: "rdp-grid",
         style: this.getStyle()
-      }, WeekDays, Spaces, Days, EndSpaces));
+      }, this['getContent' + type]()));
     }
   }]);
 
-  return RDatePickerGrid;
+  return GAHDatePickerGrid;
 }(_react.Component);
 
-_defineProperty(RDatePickerGrid, "contextType", rdpContext);
+_defineProperty(GAHDatePickerGrid, "contextType", rdpContext);

package.json

 {
   "name": "gah-datepicker",
-  "version": "1.0.1",
+  "version": "1.1.0",
   "description": "",
@@ -5,0 +5,0 @@ "main": "index.js",

No alert changes

Improved metrics

Total package byte prevSize

65824

increased by11.93%

Lines of code

1825

increased by13.92%

No dependency changes