@tech_ett/react-infinite-calendar - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

es/Calendar/index.js

@@ -51,6 +51,3 @@ import _defaultProps from "recompose/defaultProps";
     "betweenRange": "Cal__Day__betweenRange",
-    "tripInfo": "Cal__Day__tripInfo",
-    "tripInfoCenter": "Cal__Day__tripInfoCenter",
-    "tripInfoRight": "Cal__Day__tripInfoRight",
-    "tripInfoLeft": "Cal__Day__tripInfoLeft"
+    "tripInfo": "Cal__Day__tripInfo"
   }
@@ -57,0 +54,0 @@ };

es/Calendar/withRange.js

@@ -33,6 +33,3 @@ import _withState from "recompose/withState";
   "betweenRange": "Cal__Day__betweenRange",
-  "tripInfo": "Cal__Day__tripInfo",
-  "tripInfoCenter": "Cal__Day__tripInfoCenter",
-  "tripInfoRight": "Cal__Day__tripInfoRight",
-  "tripInfoLeft": "Cal__Day__tripInfoLeft"
+  "tripInfo": "Cal__Day__tripInfo"
 };
@@ -39,0 +36,0 @@ var isTouchDevice = false;

es/Day/index.js

@@ -29,6 +29,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   "betweenRange": "Cal__Day__betweenRange",
-  "tripInfo": "Cal__Day__tripInfo",
-  "tripInfoCenter": "Cal__Day__tripInfoCenter",
-  "tripInfoRight": "Cal__Day__tripInfoRight",
-  "tripInfoLeft": "Cal__Day__tripInfoLeft"
+  "tripInfo": "Cal__Day__tripInfo"
 };
@@ -49,2 +46,4 @@ import { differenceInCalendarDays } from 'date-fns';
 
+    _defineProperty(_assertThisInitialized(_this), "dayOfTheWeek", new Date(_this.props.date).getDay());
+
     _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
@@ -67,4 +66,2 @@ var _this$props = _this.props,
   _proto.renderSelection = function renderSelection(selectionColor) {
-    var _classNames;
-
     var _this$props2 = this.props,
@@ -80,2 +77,13 @@ day = _this$props2.day,
         className = _this$props2.className;
+
+    var updatedSelectionStyle = _extends({}, selectionStyle);
+
+    if (selected.end && selected.end === date || selected.start && selected.start === date) {
+      if (this.dayOfTheWeek === 0) updatedSelectionStyle.marginLeft = '-16px';else if (this.dayOfTheWeek === 6) updatedSelectionStyle.marginLeft = '-29px';
+    } else if (this.dayOfTheWeek === 0) {
+      updatedSelectionStyle.paddingLeft = '12px';
+    } else if (this.dayOfTheWeek === 6) {
+      updatedSelectionStyle.paddingRight = '12px';
+    }
+
     return /*#__PURE__*/React.createElement("div", {
@@ -87,3 +95,3 @@ className: styles.selection,
         color: textColor.active
-      }, selectionStyle)
+      }, updatedSelectionStyle)
     }, /*#__PURE__*/React.createElement("span", {
@@ -94,5 +102,5 @@ className: styles.month
     }, day), selected.start && selected.end && className === 'Cal__Day__range Cal__Day__end' && /*#__PURE__*/React.createElement("span", {
-      className: classNames(styles.tripInfo, (_classNames = {}, _classNames[styles.tripInfoLeft] = new Date(selected.end).getDay() === 0, _classNames[styles.tripInfoRight] = new Date(selected.end).getDay() === 6, _classNames)),
+      className: styles.tripInfo,
       style: {
-        left: new Date(selected.end).getDay() % 6 !== 0 ? "-" + differenceInCalendarDays(new Date(selected.end), new Date(selected.start)).toString().length * 5 + "px" : ''
+        left: this.dayOfTheWeek === 0 ? '-16px' : ''
       }
@@ -103,3 +111,3 @@ }, differenceInCalendarDays(new Date(selected.end), new Date(selected.start)), "-Day Trip"));
   _proto.render = function render() {
-    var _classNames2;
+    var _classNames;
 
@@ -120,15 +128,21 @@ var _this$props3 = this.props,
         year = _this$props3.year;
-    var color;
+    var listItemStyle = {};
 
     if (isSelected) {
-      color = this.selectionColor = typeof selectionColor === 'function' ? selectionColor(date) : selectionColor;
+      listItemStyle.color = this.selectionColor = typeof selectionColor === 'function' ? selectionColor(date) : selectionColor;
     } else if (isToday) {
-      color = todayColor;
+      listItemStyle.color = todayColor;
     }
 
+    if (this.dayOfTheWeek === 0) {
+      listItemStyle.width = '18.125%';
+      if (!isSelected) listItemStyle.paddingLeft = '12px';
+    } else if (this.dayOfTheWeek === 6) {
+      listItemStyle.width = '18.125%';
+      if (!isSelected) listItemStyle.paddingRight = '12px';
+    }
+
     return /*#__PURE__*/React.createElement("li", _extends({
-      style: color ? {
-        color: color
-      } : null,
-      className: classNames(styles.root, (_classNames2 = {}, _classNames2[styles.today] = isToday, _classNames2[styles.highlighted] = isHighlighted, _classNames2[styles.selected] = isSelected, _classNames2[styles.disabled] = isDisabled, _classNames2[styles.enabled] = !isDisabled, _classNames2), className),
+      style: _extends({}, listItemStyle),
+      className: classNames(styles.root, (_classNames = {}, _classNames[styles.today] = isToday, _classNames[styles.highlighted] = isHighlighted, _classNames[styles.selected] = isSelected, _classNames[styles.disabled] = isDisabled, _classNames[styles.enabled] = !isDisabled, _classNames), className),
       onClick: this.handleClick,
@@ -135,0 +149,0 @@ "data-date": date

lib/Calendar/index.js

@@ -78,6 +78,3 @@ "use strict";
     "betweenRange": "Cal__Day__betweenRange",
-    "tripInfo": "Cal__Day__tripInfo",
-    "tripInfoCenter": "Cal__Day__tripInfoCenter",
-    "tripInfoRight": "Cal__Day__tripInfoRight",
-    "tripInfoLeft": "Cal__Day__tripInfoLeft"
+    "tripInfo": "Cal__Day__tripInfo"
   }
@@ -84,0 +81,0 @@ };

lib/Calendar/withRange.js

@@ -51,6 +51,3 @@ "use strict";
   "betweenRange": "Cal__Day__betweenRange",
-  "tripInfo": "Cal__Day__tripInfo",
-  "tripInfoCenter": "Cal__Day__tripInfoCenter",
-  "tripInfoRight": "Cal__Day__tripInfoRight",
-  "tripInfoLeft": "Cal__Day__tripInfoLeft"
+  "tripInfo": "Cal__Day__tripInfo"
 };
@@ -57,0 +54,0 @@ var isTouchDevice = false;

lib/Day/index.js

@@ -45,6 +45,3 @@ "use strict";
   "betweenRange": "Cal__Day__betweenRange",
-  "tripInfo": "Cal__Day__tripInfo",
-  "tripInfoCenter": "Cal__Day__tripInfoCenter",
-  "tripInfoRight": "Cal__Day__tripInfoRight",
-  "tripInfoLeft": "Cal__Day__tripInfoLeft"
+  "tripInfo": "Cal__Day__tripInfo"
 };
@@ -64,2 +61,4 @@
 
+    _defineProperty(_assertThisInitialized(_this), "dayOfTheWeek", new Date(_this.props.date).getDay());
+
     _defineProperty(_assertThisInitialized(_this), "handleClick", function () {
@@ -82,4 +81,2 @@ var _this$props = _this.props,
   _proto.renderSelection = function renderSelection(selectionColor) {
-    var _classNames;
-
     var _this$props2 = this.props,
@@ -95,2 +92,13 @@ day = _this$props2.day,
         className = _this$props2.className;
+
+    var updatedSelectionStyle = _extends({}, selectionStyle);
+
+    if (selected.end && selected.end === date || selected.start && selected.start === date) {
+      if (this.dayOfTheWeek === 0) updatedSelectionStyle.marginLeft = '-16px';else if (this.dayOfTheWeek === 6) updatedSelectionStyle.marginLeft = '-29px';
+    } else if (this.dayOfTheWeek === 0) {
+      updatedSelectionStyle.paddingLeft = '12px';
+    } else if (this.dayOfTheWeek === 6) {
+      updatedSelectionStyle.paddingRight = '12px';
+    }
+
     return /*#__PURE__*/_react["default"].createElement("div", {
@@ -102,3 +110,3 @@ className: styles.selection,
         color: textColor.active
-      }, selectionStyle)
+      }, updatedSelectionStyle)
     }, /*#__PURE__*/_react["default"].createElement("span", {
@@ -109,5 +117,5 @@ className: styles.month
     }, day), selected.start && selected.end && className === 'Cal__Day__range Cal__Day__end' && /*#__PURE__*/_react["default"].createElement("span", {
-      className: (0, _classnames["default"])(styles.tripInfo, (_classNames = {}, _classNames[styles.tripInfoLeft] = new Date(selected.end).getDay() === 0, _classNames[styles.tripInfoRight] = new Date(selected.end).getDay() === 6, _classNames)),
+      className: styles.tripInfo,
       style: {
-        left: new Date(selected.end).getDay() % 6 !== 0 ? "-" + (0, _dateFns.differenceInCalendarDays)(new Date(selected.end), new Date(selected.start)).toString().length * 5 + "px" : ''
+        left: this.dayOfTheWeek === 0 ? '-16px' : ''
       }
@@ -118,3 +126,3 @@ }, (0, _dateFns.differenceInCalendarDays)(new Date(selected.end), new Date(selected.start)), "-Day Trip"));
   _proto.render = function render() {
-    var _classNames2;
+    var _classNames;
 
@@ -135,15 +143,21 @@ var _this$props3 = this.props,
         year = _this$props3.year;
-    var color;
+    var listItemStyle = {};
 
     if (isSelected) {
-      color = this.selectionColor = typeof selectionColor === 'function' ? selectionColor(date) : selectionColor;
+      listItemStyle.color = this.selectionColor = typeof selectionColor === 'function' ? selectionColor(date) : selectionColor;
     } else if (isToday) {
-      color = todayColor;
+      listItemStyle.color = todayColor;
     }
 
+    if (this.dayOfTheWeek === 0) {
+      listItemStyle.width = '18.125%';
+      if (!isSelected) listItemStyle.paddingLeft = '12px';
+    } else if (this.dayOfTheWeek === 6) {
+      listItemStyle.width = '18.125%';
+      if (!isSelected) listItemStyle.paddingRight = '12px';
+    }
+
     return /*#__PURE__*/_react["default"].createElement("li", _extends({
-      style: color ? {
-        color: color
-      } : null,
-      className: (0, _classnames["default"])(styles.root, (_classNames2 = {}, _classNames2[styles.today] = isToday, _classNames2[styles.highlighted] = isHighlighted, _classNames2[styles.selected] = isSelected, _classNames2[styles.disabled] = isDisabled, _classNames2[styles.enabled] = !isDisabled, _classNames2), className),
+      style: _extends({}, listItemStyle),
+      className: (0, _classnames["default"])(styles.root, (_classNames = {}, _classNames[styles.today] = isToday, _classNames[styles.highlighted] = isHighlighted, _classNames[styles.selected] = isSelected, _classNames[styles.disabled] = isDisabled, _classNames[styles.enabled] = !isDisabled, _classNames), className),
       onClick: this.handleClick,
@@ -150,0 +164,0 @@ "data-date": date

package.json

 {
   "name": "@tech_ett/react-infinite-calendar",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Infinite scrolling date-picker built with React, with localization, themes, keyboard support, and more.",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

No alert changes

Improved metrics

Total package byte prevSize

1217984

increased by0.12%

Lines of code

16223

increased by0.09%

No dependency changes