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

Comparing version 2.4.1 to 2.5.0

lib/Caption.js

@@ -30,3 +30,3 @@ 'use strict';
     'div',
-    _extends({}, styling('caption', date, locale), { onClick: onClick, role: 'heading' }),
+    _extends({}, styling('dayPickerCaption', date, locale), { onClick: onClick, role: 'heading' }),
     localeUtils.formatMonthTitle(date, locale)
@@ -33,0 +33,0 @@ );

lib/createStylingFromTheme.js

@@ -30,11 +30,11 @@ 'use strict';
 
-    navBar: 'DayPicker-NavBar',
+    dayPickerNavBar: 'DayPicker-NavBar',
 
-    month: 'DayPicker-Month',
+    dayPickerMonth: 'DayPicker-Month',
 
-    wrapper: 'DayPicker-Body',
+    dayPickerMonthWrapper: 'DayPicker-Body',
 
-    week: 'DayPicker-Week',
+    dayPickerWeek: 'DayPicker-Week',
 
-    navButton: function navButton(_ref2, type) {
+    dayPickerNavButton: function dayPickerNavButton(_ref2, type) {
       var style = _ref2.style;
@@ -48,11 +48,11 @@ var className = _ref2.className;
 
-    weekday: 'DayPicker-Weekday',
+    dayPickerWeekday: 'DayPicker-Weekday',
 
-    weekdays: 'DayPicker-Weekdays',
+    dayPickerWeekdays: 'DayPicker-Weekdays',
 
-    weekdaysRow: 'DayPicker-WeekdaysRow',
+    dayPickerWeekdaysRow: 'DayPicker-WeekdaysRow',
 
-    caption: 'DayPicker-Caption',
+    dayPickerCaption: 'DayPicker-Caption',
 
-    day: function day(_ref3, _day, modifiers) {
+    dayPickerDay: function dayPickerDay(_ref3, day, modifiers) {
       var style = _ref3.style;
@@ -64,3 +64,3 @@ var className = _ref3.className;
           return 'DayPicker-Day--' + modifier;
-        }), className)
+        }).join(' '), className)
       };
@@ -67,0 +67,0 @@ }

lib/Day.js

@@ -47,9 +47,10 @@ 'use strict';
   var styling = _ref.styling;
+  var isHovered = _ref.isHovered;
 
   if (empty) {
-    return _react2.default.createElement('div', _extends({ role: 'gridcell', 'aria-disabled': true }, styling('day', day, modifiers)));
+    return _react2.default.createElement('div', _extends({ role: 'gridcell', 'aria-disabled': true }, styling('dayPickerDay', day, modifiers, isHovered)));
   }
   return _react2.default.createElement(
     'div',
-    _extends({}, styling('day', day, modifiers), {
+    _extends({}, styling('dayPickerDay', day, modifiers, isHovered), {
       tabIndex: tabIndex,
@@ -89,3 +90,4 @@ role: 'gridcell',
   onFocus: _react.PropTypes.func,
-  tabIndex: _react.PropTypes.number
+  tabIndex: _react.PropTypes.number,
+  isHovered: _react.PropTypes.bool
 };
@@ -92,0 +94,0 @@

lib/DayPicker.js

@@ -410,3 +410,3 @@ 'use strict';
       if (navbarElement) {
-        return _react2.default.cloneElement(navbarElement, props);
+        return _react2.default.cloneElement(navbarElement, _extends({}, props, styling('dayPickerNavBar', attributes.dir)));
       }
@@ -452,4 +452,4 @@ return _react2.default.createElement(navbarComponent, props);
 
-          onMouseEnter: this.props.onDayMouseEnter,
-          onMouseLeave: this.props.onDayMouseLeave,
+          onMouseEnter: this.handleDayMouseEnter,
+          onMouseLeave: this.handleDayMouseLeave,
           onKeyDown: this.handleDayKeyDown,
@@ -459,3 +459,4 @@ onTouchStart: this.props.onDayTouchStart,
           onFocus: this.props.onDayFocus,
-          onClick: this.props.onDayClick ? this.handleDayClick : undefined
+          onClick: this.props.onDayClick ? this.handleDayClick : undefined,
+          isHovered: DateUtils.isSameDay(day, this.state.hoveredDay)
         },
@@ -588,2 +589,4 @@ this.props.renderDay(day)
 var _initialiseProps = function _initialiseProps() {
+  var _this7 = this;
+
   this.getStateFromProps = function (props) {
@@ -599,2 +602,18 @@ var initialMonth = Helpers.startOfMonth(props.initialMonth);
   };
+
+  this.handleDayMouseEnter = function (e, day, dayState) {
+    _this7.setState({ hoveredDay: day });
+
+    if (_this7.props.onDayMouseEnter) {
+      _this7.props.onDayMouseEnter(e, day, dayState);
+    }
+  };
+
+  this.handleDayMouseLeave = function (e, day, dayState) {
+    _this7.setState({ hoveredDay: null });
+
+    if (_this7.props.onDayMouseLeave) {
+      _this7.props.onDayMouseLeave(e, day, dayState);
+    }
+  };
 };
@@ -601,0 +620,0 @@

lib/Month.js

@@ -40,3 +40,3 @@ 'use strict';
 
-  var captionProps = {
+  var captionProps = _extends({
     styling: styling,
@@ -49,7 +49,7 @@ date: month,
     } : undefined
-  };
+  }, styling('dayPickerCaption', month, locale));
   var weeks = (0, _Helpers.getWeekArray)(month, firstDayOfWeek, fixedWeeks);
   return _react2.default.createElement(
     'div',
-    styling('month', locale),
+    styling('dayPickerMonth', locale),
     _react2.default.cloneElement(captionElement, captionProps),
@@ -65,7 +65,7 @@ _react2.default.createElement(_Weekdays2.default, {
       'div',
-      _extends({}, styling('wrapper'), { role: 'grid' }),
+      _extends({}, styling('dayPickerMonthWrapper'), { role: 'grid' }),
       weeks.map(function (week, j) {
         return _react2.default.createElement(
           'div',
-          _extends({ key: j }, styling('week', j, locale), { role: 'gridcell' }),
+          _extends({ key: j }, styling('dayPickerWeek', j, locale), { role: 'gridcell' }),
           week.map(function (day) {
@@ -72,0 +72,0 @@ return children(day, month, styling);

lib/Navbar.js

@@ -20,2 +20,6 @@ 'use strict';
 
+var _createStylingFromTheme = require('./createStylingFromTheme');
+
+var _createStylingFromTheme2 = _interopRequireDefault(_createStylingFromTheme);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -30,2 +34,4 @@
   var dir = _ref.dir;
+  var theme = _ref.theme;
+  var invertTheme = _ref.invertTheme;
 
@@ -35,6 +41,8 @@ var previousClickHandler = dir === 'rtl' ? onNextClick : onPreviousClick;
 
+  var navBarStyling = styling || (0, _createStylingFromTheme2.default)(theme, invertTheme);
+
   var previousButton = showPreviousButton && _react2.default.createElement('span', _extends({
     role: 'button',
     key: 'previous'
-  }, styling('navButton', 'prev'), {
+  }, navBarStyling('dayPickerNavButton', 'prev'), {
     onClick: function onClick() {
@@ -48,3 +56,3 @@ return previousClickHandler();
     key: 'right'
-  }, styling('navButton', 'next'), {
+  }, navBarStyling('dayPickerNavButton', 'next'), {
     onClick: function onClick() {
@@ -57,3 +65,3 @@ return nextClickHandler();
     'div',
-    styling('navBar', dir),
+    navBarStyling('dayPickerNavBar', dir),
     dir === 'rtl' ? [nextButton, previousButton] : [previousButton, nextButton]
@@ -65,2 +73,4 @@ );
   styling: _react.PropTypes.func,
+  theme: _react.PropTypes.any,
+  invertTheme: _react.PropTypes.bool,
   nextMonth: _react.PropTypes.instanceOf(Date),
@@ -67,0 +77,0 @@ previousMonth: _react.PropTypes.instanceOf(Date),

lib/Weekday.js

@@ -27,3 +27,3 @@ 'use strict';
     'div',
-    styling('weekday', weekday, locale),
+    styling('dayPickerWeekday', weekday, locale),
     _react2.default.createElement(
@@ -30,0 +30,0 @@ 'abbr',

lib/Weekdays.js

@@ -37,3 +37,3 @@ 'use strict';
     };
-    var element = weekdayElement ? _react2.default.cloneElement(weekdayElement, elementProps) : _react2.default.createElement(weekdayComponent, elementProps);
+    var element = weekdayElement ? _react2.default.cloneElement(weekdayElement, _extends({}, elementProps, styling('dayPickerWeekday', i, locale))) : _react2.default.createElement(weekdayComponent, elementProps);
     days.push(element);
@@ -44,6 +44,6 @@ }
     'div',
-    _extends({}, styling('weekdays', locale), { role: 'rowgroup' }),
+    _extends({}, styling('dayPickerWeekdays', locale), { role: 'rowgroup' }),
     _react2.default.createElement(
       'div',
-      _extends({}, styling('weekdaysRow', locale), { role: 'columnheader' }),
+      _extends({}, styling('dayPickerWeekdaysRow', locale), { role: 'columnheader' }),
       days
@@ -50,0 +50,0 @@ )

package.json

 {
   "name": "react-day-picker-themeable",
-  "version": "2.4.1",
+  "version": "2.5.0",
   "description": "Flexible date picker component for React",
@@ -5,0 +5,0 @@ "main": "DayPicker.js",

No alert changes

Improved metrics

Total package byte prevSize

287356

increased by1.21%

Lines of code

1532

increased by1.52%

No dependency changes