react-day-picker-themeable - npm Package Compare versions

Comparing version 2.5.1 to 2.5.2

lib/createStylingFromTheme.js

@@ -7,4 +7,12 @@ 'use strict';
 
+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 _reactBase16Styling = require('react-base16-styling');
 
+var _default = require('./themes/default');
+
+var _default2 = _interopRequireDefault(_default);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
 var cn = function cn() {
@@ -20,46 +28,154 @@ for (var _len = arguments.length, classNames = Array(_len), _key = 0; _key < _len; _key++) {
 
-function getStylingFromBase16() {
+var COLORS = {
+  BACKGROUND: 'base00',
+  NAVBAR_BACKGROUND: 'base01',
+  HOVER_BACKGROUND: 'base02',
+  WEEKDAY_TEXT: 'base03',
+  TEXT: 'base07',
+  DISABLED_TEXT: 'base03',
+  DISABLED_BACKGROUND: 'base01',
+  OUTSIDE_TEXT: 'base02',
+  OUTSIDE_BACKGROUND: 'base00',
+  TODAY_BACKGROUND: 'base00',
+  TODAY_TEXT: 'base08',
+  SELECTED_BACKGROUND: 'base0C',
+  SELECTED_TEXT: 'base00'
+};
+
+function dayColors(base16Theme, modifiers) {
+  if (modifiers.indexOf('outside') !== -1) {
+    return {
+      color: base16Theme[COLORS.OUTSIDE_TEXT],
+      backgroundColor: base16Theme[COLORS.OUTSIDE_BACKGROUND]
+    };
+  } else if (modifiers.indexOf('disabled') !== -1) {
+    return {
+      color: base16Theme[COLORS.DISABLED_TEXT],
+      backgroundColor: base16Theme[COLORS.DISABLED_BACKGROUND]
+    };
+  } else if (modifiers.indexOf('selected') !== -1) {
+    return {
+      color: base16Theme[COLORS.SELECTED_TEXT],
+      backgroundColor: base16Theme[COLORS.SELECTED_BACKGROUND]
+    };
+  } else if (modifiers.indexOf('today') !== -1) {
+    return {
+      color: base16Theme[COLORS.TODAY_TEXT],
+      backgroundColor: base16Theme[COLORS.TODAY_BACKGROUND]
+    };
+  }
+
   return {
-    dayPicker: function dayPicker(_ref, locale, interactionDisabled, customClassName) {
+    color: base16Theme[COLORS.TEXT],
+    backgroundColor: base16Theme[COLORS.BACKGROUND]
+  };
+}
+
+function getStylingFromBase16(base16Theme) {
+  return {
+    dayPicker: function dayPicker(_ref, locale, interactionDisabled) {
       var style = _ref.style;
       var className = _ref.className;
       return {
-        style: style,
-        className: cn('DayPicker', locale && 'DayPicker--' + locale, interactionDisabled && 'DayPicker--interactionDisabled', customClassName, className)
+        className: cn('DayPicker', locale && 'DayPicker--' + locale, interactionDisabled && 'DayPicker--interactionDisabled', className),
+        style: _extends({}, style, {
+          color: base16Theme[COLORS.TEXT],
+          backgroundColor: base16Theme[COLORS.BACKGROUND]
+        })
       };
     },
 
-    dayPickerNavBar: 'DayPicker-NavBar',
+    dayPickerNavBar: function dayPickerNavBar(_ref2) {
+      var style = _ref2.style;
+      var className = _ref2.className;
+      return {
+        className: cn('DayPicker-NavBar', className),
+        style: _extends({}, style, {
+          backgroundColor: base16Theme[COLORS.NAVBAR_BACKGROUND]
+        })
+      };
+    },
 
-    dayPickerMonth: 'DayPicker-Month',
+    dayPickerMonth: function dayPickerMonth(_ref3) {
+      var style = _ref3.style;
+      var className = _ref3.className;
+      return {
+        className: cn('DayPicker-Month', className),
+        style: style
+      };
+    },
 
-    dayPickerMonthWrapper: 'DayPicker-Body',
+    dayPickerMonthWrapper: function dayPickerMonthWrapper(_ref4) {
+      var style = _ref4.style;
+      var className = _ref4.className;
+      return {
+        className: cn('DayPicker-Body', className),
+        style: style
+      };
+    },
 
-    dayPickerWeek: 'DayPicker-Week',
+    dayPickerWeek: function dayPickerWeek(_ref5) {
+      var style = _ref5.style;
+      var className = _ref5.className;
+      return {
+        className: cn('DayPicker-Week', className),
+        style: style
+      };
+    },
 
-    dayPickerNavButton: function dayPickerNavButton(_ref2, type) {
-      var style = _ref2.style;
-      var className = _ref2.className;
+    dayPickerNavButton: function dayPickerNavButton(_ref6, type) {
+      var style = _ref6.style;
+      var className = _ref6.className;
       return {
-        style: style,
-        className: cn('DayPicker-NavButton', type && 'DayPicker-NavButton--' + type, className)
+        className: cn('DayPicker-NavButton', type && 'DayPicker-NavButton--' + type, className),
+        style: style
       };
     },
 
-    dayPickerWeekday: 'DayPicker-Weekday',
+    dayPickerWeekday: function dayPickerWeekday(_ref7) {
+      var style = _ref7.style;
+      var className = _ref7.className;
+      return {
+        className: cn('DayPicker-Weekday', className),
+        style: _extends({}, style, {
+          color: base16Theme[COLORS.WEEKDAY_TEXT]
+        })
+      };
+    },
 
-    dayPickerWeekdays: 'DayPicker-Weekdays',
+    dayPickerWeekdays: function dayPickerWeekdays(_ref8) {
+      var style = _ref8.style;
+      var className = _ref8.className;
+      return {
+        className: cn('DayPicker-Weekdays', className),
+        style: style
+      };
+    },
 
-    dayPickerWeekdaysRow: 'DayPicker-WeekdaysRow',
+    dayPickerWeekdaysRow: function dayPickerWeekdaysRow(_ref9) {
+      var style = _ref9.style;
+      var className = _ref9.className;
+      return {
+        className: cn('DayPicker-WeekdaysRow', className),
+        style: style
+      };
+    },
 
-    dayPickerCaption: 'DayPicker-Caption',
+    dayPickerCaption: function dayPickerCaption(_ref10) {
+      var style = _ref10.style;
+      var className = _ref10.className;
+      return {
+        className: cn('DayPicker-Caption', className),
+        style: style
+      };
+    },
 
-    dayPickerDay: function dayPickerDay(_ref3, day, modifiers) {
-      var style = _ref3.style;
-      var className = _ref3.className;
+    dayPickerDay: function dayPickerDay(_ref11, day, modifiers) {
+      var style = _ref11.style;
+      var className = _ref11.className;
       return {
-        style: style,
         className: cn('DayPicker-Day', modifiers.map(function (modifier) {
           return 'DayPicker-Day--' + modifier;
-        }).join(' '), className)
+        }).join(' '), className),
+        style: _extends({}, style, dayColors(base16Theme, modifiers))
       };
@@ -70,3 +186,5 @@ }
 
-exports.default = (0, _reactBase16Styling.createStyling)(getStylingFromBase16, {});
+exports.default = (0, _reactBase16Styling.createStyling)(getStylingFromBase16, {
+  defaultBase16: _default2.default
+});
 //# sourceMappingURL=createStylingFromTheme.js.map

lib/Day.js

@@ -48,5 +48,9 @@ 'use strict';
   var isHovered = _ref.isHovered;
+  var isOutside = _ref.isOutside;
 
   if (empty) {
-    return _react2.default.createElement('div', _extends({ role: 'gridcell', 'aria-disabled': true }, styling('dayPickerDay', day, modifiers, isHovered)));
+    return _react2.default.createElement('div', _extends({
+      role: 'gridcell',
+      'aria-disabled': true
+    }, styling('dayPickerDay', day, modifiers, isHovered)));
   }
@@ -67,3 +71,4 @@ return _react2.default.createElement(
       onTouchStart: handleEvent(onTouchStart, day, modifiers),
-      onFocus: handleEvent(onFocus, day, modifiers)
+      onFocus: handleEvent(onFocus, day, modifiers),
+      'data-day-type': isOutside ? 'outside' : 'inside'
     }),
@@ -92,3 +97,4 @@ children
   tabIndex: _react.PropTypes.number,
-  isHovered: _react.PropTypes.bool
+  isHovered: _react.PropTypes.bool,
+  isOutside: _react.PropTypes.bool
 };
@@ -95,0 +101,0 @@

lib/DayPicker.js

@@ -119,3 +119,3 @@ 'use strict';
     value: function getDayNodes() {
-      return this.refs.dayPicker.querySelectorAll('.DayPicker-Day:not(.DayPicker-Day--outside)');
+      return this.refs.dayPicker.querySelectorAll('[data-day-type=inside]');
     }
@@ -459,3 +459,4 @@ }, {
           onClick: this.props.onDayClick ? this.handleDayClick : undefined,
-          isHovered: DateUtils.isSameDay(day, this.state.hoveredDay)
+          isHovered: DateUtils.isSameDay(day, this.state.hoveredDay),
+          isOutside: isOutside
         },
@@ -462,0 +463,0 @@ this.props.renderDay(day)

package.json

 {
   "name": "react-day-picker-themeable",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "description": "Flexible date picker component for React",
@@ -89,5 +89,5 @@ "main": "DayPicker.js",
   "dependencies": {
-    "react-base16-styling": "^0.4.3",
+    "react-base16-styling": "^0.4.7",
     "react-is-deprecated": "0.1.2"
   }
 }

No alert changes

Improved metrics

Total package byte prevSize

727534

increased by0.96%

Number of package files

50

increased by4.17%

Lines of code

1866

increased by7.86%

Dependency changes

• Updatedreact-base16-styling@^0.4.7