react-simple-datepicker - npm Package Compare versions

Comparing version 0.1.1 to 0.1.3

lib/Calendar.js

@@ -27,2 +27,6 @@ 'use strict';
 
+var _moment = require('moment');
+
+var _moment2 = _interopRequireDefault(_moment);
+
 var Calendar = (function (_Component) {
@@ -88,3 +92,7 @@ _inherits(Calendar, _Component);
           dayNextMonth: dayNextMonth,
-          active: _this2.props.date });
+          active: _this2.props.date,
+          dayClassName: _this2.props.dayClassName,
+          dayActiveClassName: _this2.props.dayActiveClassName,
+          dayDisabledClassName: _this2.props.dayDisabledClassName,
+          dayFromOtherMonthClassName: _this2.props.dayFromOtherMonthClassName });
       });
@@ -108,5 +116,11 @@ }
     value: function render() {
+      var _props2 = this.props;
+      var calendarClassName = _props2.calendarClassName;
+      var monthClassName = _props2.monthClassName;
+      var prevMonthClassName = _props2.prevMonthClassName;
+      var nextMonthClassName = _props2.nextMonthClassName;
+
       return _react2['default'].createElement(
         'table',
-        { className: 'calendar' },
+        { className: calendarClassName },
         _react2['default'].createElement(
@@ -117,11 +131,11 @@ 'thead',
             'tr',
-            { className: 'displayedMonth' },
-            _react2['default'].createElement('td', { className: 'nav prev',
+            null,
+            _react2['default'].createElement('td', { className: prevMonthClassName,
               onClick: this.moveDisplayedMonth.bind(this, -1) }),
             _react2['default'].createElement(
               'td',
-              { className: 'monthName', colSpan: '5' },
+              { className: monthClassName, colSpan: '5' },
               this.state.displayedMonth.format('MMMM YYYY')
             ),
-            _react2['default'].createElement('td', { className: 'nav next',
+            _react2['default'].createElement('td', { className: nextMonthClassName,
               onClick: this.moveDisplayedMonth.bind(this, 1) })
@@ -143,2 +157,24 @@ )
 exports['default'] = Calendar;
+
+Calendar.propTypes = {
+  date: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(_moment2['default']), _react.PropTypes.instanceOf(Date)]),
+  minDate: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(_moment2['default']), _react.PropTypes.instanceOf(Date)]),
+  maxDate: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(_moment2['default']), _react.PropTypes.instanceOf(Date)]),
+  calendarClassName: _react.PropTypes.string,
+  selectDay: _react.PropTypes.func,
+  monthClassName: _react.PropTypes.string,
+  prevMonthClassName: _react.PropTypes.string,
+  nextMonthClassName: _react.PropTypes.string,
+  dayClassName: _react.PropTypes.string,
+  dayActiveClassName: _react.PropTypes.string,
+  dayDisabledClassName: _react.PropTypes.string,
+  dayFromOtherMonthClassName: _react.PropTypes.string
+};
+
+Calendar.defaultProps = {
+  calendarClassName: 'calendar',
+  prevMonthClassName: 'calendar__prevMonth',
+  nextMonthClassName: 'calendar__nextMonth',
+  monthClassName: 'calendar__month'
+};
 module.exports = exports['default'];

lib/DateInput.js

@@ -21,2 +21,6 @@ 'use strict';
 
+var _moment = require('moment');
+
+var _moment2 = _interopRequireDefault(_moment);
+
 var DateInput = (function (_Component) {
@@ -37,13 +41,10 @@ _inherits(DateInput, _Component);
       var inputOnClick = _props.inputOnClick;
+      var inputClassName = _props.inputClassName;
 
-      return _react2['default'].createElement(
-        'div',
-        null,
-        _react2['default'].createElement('input', { type: 'text',
-          ref: 'dateInput',
-          className: 'dateInput',
-          value: inputValue.format('YYYY-MM-DD'),
-          onClick: inputOnClick,
-          readOnly: true })
-      );
+      return _react2['default'].createElement('input', { type: 'text',
+        ref: 'dateInput',
+        className: inputClassName,
+        value: inputValue.format('YYYY-MM-DD'),
+        onClick: inputOnClick,
+        readOnly: true });
     }
@@ -56,2 +57,12 @@ }]);
 exports['default'] = DateInput;
+
+DateInput.propTypes = {
+  inputValue: _react.PropTypes.instanceOf(_moment2['default']),
+  inputOnClick: _react.PropTypes.func,
+  inputClassName: _react.PropTypes.string
+};
+
+DateInput.defaultProps = {
+  inputClassName: 'datepicker__input'
+};
 module.exports = exports['default'];

lib/Datepicker.js

@@ -87,2 +87,14 @@ 'use strict';
     value: function renderCalendar() {
+      var _props = this.props;
+      var minDate = _props.minDate;
+      var maxDate = _props.maxDate;
+      var calendarClassName = _props.calendarClassName;
+      var dayClassName = _props.dayClassName;
+      var dayActiveClassName = _props.dayActiveClassName;
+      var dayDisabledClassName = _props.dayDisabledClassName;
+      var dayFromOtherMonthClassName = _props.dayFromOtherMonthClassName;
+      var monthClassName = _props.monthClassName;
+      var prevMonthClassName = _props.prevMonthClassName;
+      var nextMonthClassName = _props.nextMonthClassName;
+
       if (!this.state.isCalendarOpen) {
@@ -94,5 +106,13 @@ return null;
         date: this.state.date,
-        minDate: this.props.minDate,
-        maxDate: this.props.maxDate,
-        selectDay: this.selectDay.bind(this) });
+        minDate: minDate,
+        maxDate: maxDate,
+        selectDay: this.selectDay.bind(this),
+        calendarClassName: calendarClassName,
+        dayClassName: dayClassName,
+        dayActiveClassName: dayActiveClassName,
+        dayDisabledClassName: dayDisabledClassName,
+        dayFromOtherMonthClassName: dayFromOtherMonthClassName,
+        monthClassName: monthClassName,
+        prevMonthClassName: prevMonthClassName,
+        nextMonthClassName: nextMonthClassName });
     }
@@ -102,7 +122,11 @@ }, {
     value: function selectDay(date) {
-      if (this.props.changeDate) {
+      var _props2 = this.props;
+      var clickOnDate = _props2.clickOnDate;
+      var name = _props2.name;
+
+      if (clickOnDate) {
         this.setState({
           isCalendarOpen: false
         });
-        return this.props.changeDate(date, this.props.name);
+        return clickOnDate(date, name);
       }
@@ -118,8 +142,13 @@
     value: function render() {
+      var _props3 = this.props;
+      var datepickerClassName = _props3.datepickerClassName;
+      var inputClassName = _props3.inputClassName;
+
       return _react2['default'].createElement(
         'div',
-        { className: 'datepicker' },
+        { className: datepickerClassName },
         _react2['default'].createElement(_DateInput2['default'], { ref: 'dateInput',
           inputValue: this.state.date,
-          inputOnClick: this.toggleCalendar.bind(this) }),
+          inputOnClick: this.toggleCalendar.bind(this),
+          inputClassName: inputClassName }),
         this.renderCalendar()
@@ -135,5 +164,24 @@ );
 
+DatePicker.propTypes = {
+  date: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(_moment2['default']), _react.PropTypes.instanceOf(Date)]),
+  minDate: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(_moment2['default']), _react.PropTypes.instanceOf(Date)]),
+  maxDate: _react.PropTypes.oneOfType([_react.PropTypes.instanceOf(_moment2['default']), _react.PropTypes.instanceOf(Date)]),
+  clickOnDate: _react.PropTypes.func,
+  name: _react.PropTypes.string,
+  datepickerClassName: _react.PropTypes.string,
+  inputClassName: _react.PropTypes.string,
+  calendarClassName: _react.PropTypes.string,
+  monthClassName: _react.PropTypes.string,
+  prevMonthClassName: _react.PropTypes.string,
+  nextMonthClassName: _react.PropTypes.string,
+  dayClassName: _react.PropTypes.string,
+  dayActiveClassName: _react.PropTypes.string,
+  dayDisabledClassName: _react.PropTypes.string,
+  dayFromOtherMonthClassName: _react.PropTypes.string
+};
+
 DatePicker.defaultProps = {
-  date: new Date()
+  date: new Date(),
+  datepickerClassName: 'datepicker'
 };
 module.exports = exports['default'];

lib/Day.js

@@ -7,12 +7,4 @@ 'use strict';
 
-var _createClass = (function () { 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); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
-
-var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; desc = parent = undefined; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var _react = require('react');
@@ -26,60 +18,61 @@
 
-var Day = (function (_Component) {
-  _inherits(Day, _Component);
+var Day = function Day(_ref) {
+  var day = _ref.day;
+  var active = _ref.active;
+  var disabled = _ref.disabled;
+  var dayNextMonth = _ref.dayNextMonth;
+  var dayPrevMonth = _ref.dayPrevMonth;
+  var selectDay = _ref.selectDay;
+  var dayClassName = _ref.dayClassName;
+  var dayActiveClassName = _ref.dayActiveClassName;
+  var dayDisabledClassName = _ref.dayDisabledClassName;
+  var dayFromOtherMonthClassName = _ref.dayFromOtherMonthClassName;
 
-  function Day() {
-    _classCallCheck(this, Day);
+  var handleOnClick = function handleOnClick(e) {
+    if (disabled) return;
+    selectDay(e);
+  };
 
-    _get(Object.getPrototypeOf(Day.prototype), 'constructor', this).apply(this, arguments);
+  var classes = [dayClassName];
+
+  if (day.isSame(active, 'day')) {
+    classes.push(dayActiveClassName);
   }
 
-  _createClass(Day, [{
-    key: 'handleOnClick',
-    value: function handleOnClick(e) {
-      if (this.props.disabled) return;
+  if (disabled) {
+    classes.push(dayDisabledClassName);
+  }
 
-      this.props.selectDay(e);
-    }
-  }, {
-    key: 'render',
-    value: function render() {
-      var _props = this.props;
-      var day = _props.day;
-      var disabled = _props.disabled;
-      var dayNextMonth = _props.dayNextMonth;
-      var dayPrevMonth = _props.dayPrevMonth;
-      var active = _props.active;
+  if (dayPrevMonth || dayNextMonth) {
+    classes.push(dayFromOtherMonthClassName);
+  }
 
-      var classes = ['day'];
+  return _react2['default'].createElement(
+    'td',
+    { className: classes.join(' '), onClick: handleOnClick },
+    day.date()
+  );
+};
 
-      if (day.isSame(active, 'day')) {
-        classes.push('activeDate');
-      }
+Day.propTypes = {
+  disabled: _react.PropTypes.bool,
+  dayNextMonth: _react.PropTypes.bool,
+  dayPrevMonth: _react.PropTypes.bool,
+  selectDay: _react.PropTypes.func,
+  day: _react.PropTypes.instanceOf(_moment2['default']),
+  active: _react.PropTypes.instanceOf(_moment2['default']),
+  dayClassName: _react.PropTypes.string,
+  dayActiveClassName: _react.PropTypes.string,
+  dayDisabledClassName: _react.PropTypes.string,
+  dayFromOtherMonthClassName: _react.PropTypes.string
+};
 
-      if (disabled) {
-        classes.push('dayDisabled');
-      }
+Day.defaultProps = {
+  dayClassName: 'calendar__day',
+  dayActiveClassName: 'calendar__activeDay',
+  dayDisabledClassName: 'calendar__disabledDay',
+  dayFromOtherMonthClassName: 'calendar__dayFromOtherMonth'
+};
 
-      if (dayPrevMonth || dayNextMonth) {
-        classes.push('dayFromOtherMonth');
-      }
-
-      return _react2['default'].createElement(
-        'td',
-        { className: classes.join(' '), onClick: this.handleOnClick.bind(this) },
-        day.date()
-      );
-    }
-  }]);
-
-  return Day;
-})(_react.Component);
-
 exports['default'] = Day;
-
-Day.propTypes = {
-  disabled: _react2['default'].PropTypes.bool,
-  dayNextMonth: _react2['default'].PropTypes.bool,
-  dayPrevMonth: _react2['default'].PropTypes.bool
-};
 module.exports = exports['default'];

package.json

 {
   "name": "react-simple-datepicker",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "React datepicker component",
@@ -12,3 +12,4 @@ "main": "lib/Datepicker.js",
     "build:min": "./node_modules/.bin/webpack --config webpack.config.production.js",
-    "prepublish": "npm run build"
+    "prepublish": "npm run build",
+    "deploy:demo": "node ./build-gh-pages.js"
   },
@@ -24,2 +25,3 @@ "devDependencies": {
     "expect": "^1.13.4",
+    "gh-pages": "^0.11.0",
     "jsdom": "^7.2.0",
@@ -26,0 +28,0 @@ "mocha": "^2.3.3",

README.md

@@ -8,3 +8,3 @@ # React Simple Date Picker
 
-`npm install -save react-simple-datepicker`
+`npm install --save react-simple-datepicker`
 
@@ -14,7 +14,6 @@
 
-Simple example on how to use Datepicker.
+Simple example on how to use Datepicker. Just import DatePicker module and styles for it.
 
 ```js
 import React from 'react';
-import ReactDOM from 'react-dom';
 import DatePicker from 'react-simple-datepicker';
@@ -44,7 +43,23 @@ import 'react-simple-datepicker/dist/index.css';
 * `maxDate`: (*Date*) — specifies the maximal date
-* `changeDate`: (*Function*) — called when the user selects a date
+* `clickOnDate`: (*Function*) — called when the user selects a date
 
 
+## ClassName Props
+
+To specify datepicker styles you can use these props:
+
+* `datepickerClassName`
+* `inputClassName`
+* `calendarClassName`
+* `monthClassName`
+* `prevMonthClassName`
+* `nextMonthClassName`
+* `dayClassName`
+* `dayActiveClassName`
+* `dayDisabledClassName`
+* `dayFromOtherMonthClassName`
+
+
 ## License
 
 MIT

src/Calendar.js

@@ -1,2 +0,2 @@
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
 import Day from './Day';
@@ -9,2 +9,3 @@ import {
 } from './utils/';
+import moment from 'moment';
 
@@ -59,3 +60,7 @@ export default class Calendar extends Component {
              dayNextMonth={dayNextMonth}
-             active={this.props.date} />
+             active={this.props.date}
+             dayClassName={this.props.dayClassName}
+             dayActiveClassName={this.props.dayActiveClassName}
+             dayDisabledClassName={this.props.dayDisabledClassName}
+             dayFromOtherMonthClassName={this.props.dayFromOtherMonthClassName} />
       );
@@ -77,13 +82,15 @@ });
   render () {
+    const { calendarClassName, monthClassName, prevMonthClassName, nextMonthClassName } = this.props;
+
     return (
-      <table className='calendar'>
+      <table className={calendarClassName}>
         <thead>
-          <tr className='displayedMonth'>
-            <td className='nav prev'
+          <tr>
+            <td className={prevMonthClassName}
                 onClick={this.moveDisplayedMonth.bind(this, -1)}>
             </td>
-            <td className='monthName' colSpan='5'>
+            <td className={monthClassName} colSpan='5'>
               {this.state.displayedMonth.format('MMMM YYYY')}
             </td>
-            <td className='nav next'
+            <td className={nextMonthClassName}
                 onClick={this.moveDisplayedMonth.bind(this, 1)}>
@@ -100,1 +107,32 @@ </td>
 }
+
+Calendar.propTypes = {
+  date: PropTypes.oneOfType([
+    PropTypes.instanceOf(moment),
+    PropTypes.instanceOf(Date)
+  ]),
+  minDate: PropTypes.oneOfType([
+    PropTypes.instanceOf(moment),
+    PropTypes.instanceOf(Date)
+  ]),
+  maxDate: PropTypes.oneOfType([
+    PropTypes.instanceOf(moment),
+    PropTypes.instanceOf(Date)
+  ]),
+  calendarClassName: PropTypes.string,
+  selectDay: PropTypes.func,
+  monthClassName: PropTypes.string,
+  prevMonthClassName: PropTypes.string,
+  nextMonthClassName: PropTypes.string,
+  dayClassName: PropTypes.string,
+  dayActiveClassName: PropTypes.string,
+  dayDisabledClassName: PropTypes.string,
+  dayFromOtherMonthClassName: PropTypes.string,
+};
+
+Calendar.defaultProps = {
+  calendarClassName: 'calendar',
+  prevMonthClassName: 'calendar__prevMonth',
+  nextMonthClassName: 'calendar__nextMonth',
+  monthClassName: 'calendar__month'
+};

src/DateInput.js

@@ -1,18 +0,25 @@
-import React, { Component } from 'react';
+import React, { Component, PropTypes } from 'react';
+import moment from 'moment';
 
 export default class DateInput extends Component {
   render () {
-    const { inputValue, inputOnClick } = this.props;
+    const { inputValue, inputOnClick, inputClassName } = this.props;
 
-    return (
-      <div>
-        <input type='text'
-               ref='dateInput'
-               className='dateInput'
-               value={inputValue.format('YYYY-MM-DD')}
-               onClick={inputOnClick}
-               readOnly />
-      </div>
-    );
+    return <input type='text'
+                  ref='dateInput'
+                  className={inputClassName}
+                  value={inputValue.format('YYYY-MM-DD')}
+                  onClick={inputOnClick}
+                  readOnly />;
   }
 }
+
+DateInput.propTypes = {
+  inputValue: PropTypes.instanceOf(moment),
+  inputOnClick: PropTypes.func,
+  inputClassName: PropTypes.string
+};
+
+DateInput.defaultProps = {
+  inputClassName: 'datepicker__input'
+};

src/Datepicker.js

@@ -47,2 +47,15 @@ import React, { Component, PropTypes } from 'react';
   renderCalendar () {
+    const {
+      minDate,
+      maxDate,
+      calendarClassName,
+      dayClassName,
+      dayActiveClassName,
+      dayDisabledClassName,
+      dayFromOtherMonthClassName,
+      monthClassName,
+      prevMonthClassName,
+      nextMonthClassName
+    } = this.props;
+
     if (!this.state.isCalendarOpen) {
@@ -54,13 +67,22 @@ return null;
                      date={this.state.date}
-                     minDate={this.props.minDate}
-                     maxDate={this.props.maxDate}
-                     selectDay={this.selectDay.bind(this)} />;
+                     minDate={minDate}
+                     maxDate={maxDate}
+                     selectDay={this.selectDay.bind(this)}
+                     calendarClassName={calendarClassName}
+                     dayClassName={dayClassName}
+                     dayActiveClassName={dayActiveClassName}
+                     dayDisabledClassName={dayDisabledClassName}
+                     dayFromOtherMonthClassName={dayFromOtherMonthClassName}
+                     monthClassName={monthClassName}
+                     prevMonthClassName={prevMonthClassName}
+                     nextMonthClassName={nextMonthClassName} />;
   }
 
   selectDay (date) {
-    if (this.props.changeDate) {
+    const { clickOnDate, name } = this.props;
+    if (clickOnDate) {
       this.setState({
         isCalendarOpen: false
       });
-      return this.props.changeDate(date, this.props.name);
+      return clickOnDate(date, name);
     }
@@ -75,7 +97,10 @@
   render () {
+    const { datepickerClassName, inputClassName } = this.props;
+
     return (
-      <div className='datepicker'>
+      <div className={datepickerClassName}>
         <DateInput ref='dateInput'
                    inputValue={this.state.date}
-                   inputOnClick={this.toggleCalendar.bind(this)} />
+                   inputOnClick={this.toggleCalendar.bind(this)}
+                   inputClassName={inputClassName} />
 
@@ -88,4 +113,32 @@ {this.renderCalendar()}
 
+DatePicker.propTypes = {
+  date: PropTypes.oneOfType([
+    PropTypes.instanceOf(moment),
+    PropTypes.instanceOf(Date)
+  ]),
+  minDate: PropTypes.oneOfType([
+    PropTypes.instanceOf(moment),
+    PropTypes.instanceOf(Date)
+  ]),
+  maxDate: PropTypes.oneOfType([
+    PropTypes.instanceOf(moment),
+    PropTypes.instanceOf(Date)
+  ]),
+  clickOnDate: PropTypes.func,
+  name: PropTypes.string,
+  datepickerClassName: PropTypes.string,
+  inputClassName: PropTypes.string,
+  calendarClassName: PropTypes.string,
+  monthClassName: PropTypes.string,
+  prevMonthClassName: PropTypes.string,
+  nextMonthClassName: PropTypes.string,
+  dayClassName: PropTypes.string,
+  dayActiveClassName: PropTypes.string,
+  dayDisabledClassName: PropTypes.string,
+  dayFromOtherMonthClassName: PropTypes.string,
+};
+
 DatePicker.defaultProps = {
-  date: new Date()
+  date: new Date(),
+  datepickerClassName: 'datepicker'
 };

src/Day.js

 import React, { Component, PropTypes } from 'react';
 import moment from 'moment';
 
-export default class Day extends Component {
-  handleOnClick (e) {
-    if (this.props.disabled) return;
+const Day = ({
+  day,
+  active,
+  disabled,
+  dayNextMonth,
+  dayPrevMonth,
+  selectDay,
+  dayClassName,
+  dayActiveClassName,
+  dayDisabledClassName,
+  dayFromOtherMonthClassName
+}) => {
 
-    this.props.selectDay(e);
-  }
+  const handleOnClick = (e) => {
+    if (disabled) return;
+    selectDay(e);
+  };
 
-  render () {
-    const { day, disabled, dayNextMonth, dayPrevMonth, active } = this.props;
+  let classes = [dayClassName];
 
-    let classes = ['day'];
+  if (day.isSame(active, 'day')) {
+    classes.push(dayActiveClassName);
+  }
 
-    if (day.isSame(active, 'day')) {
-      classes.push('activeDate');
-    }
+  if (disabled) {
+    classes.push(dayDisabledClassName);
+  }
 
-    if (disabled) {
-      classes.push('dayDisabled');
-    }
+  if (dayPrevMonth || dayNextMonth) {
+    classes.push(dayFromOtherMonthClassName);
+  }
 
-    if (dayPrevMonth || dayNextMonth) {
-      classes.push('dayFromOtherMonth');
-    }
+  return <td className={classes.join(' ')} onClick={handleOnClick}>{ day.date() }</td>;
+};
 
-    return (
-      <td className={classes.join(' ')} onClick={this.handleOnClick.bind(this)}>{ day.date() }</td>
-    );
-  }
-}
-
 Day.propTypes = {
-  disabled: React.PropTypes.bool,
-  dayNextMonth: React.PropTypes.bool,
-  dayPrevMonth: React.PropTypes.bool
+  disabled: PropTypes.bool,
+  dayNextMonth: PropTypes.bool,
+  dayPrevMonth: PropTypes.bool,
+  selectDay: PropTypes.func,
+  day: PropTypes.instanceOf(moment),
+  active: PropTypes.instanceOf(moment),  
+  dayClassName: PropTypes.string,
+  dayActiveClassName: PropTypes.string,
+  dayDisabledClassName: PropTypes.string,
+  dayFromOtherMonthClassName: PropTypes.string,
 };
+
+Day.defaultProps = {
+  dayClassName: 'calendar__day',
+  dayActiveClassName: 'calendar__activeDay',
+  dayDisabledClassName: 'calendar__disabledDay',
+  dayFromOtherMonthClassName: 'calendar__dayFromOtherMonth'
+};
+
+export default Day;

New alerts

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

6251130

increased by103.82%

Number of package files

28

increased by55.56%

Lines of code

4695

increased by131.39%

Number of lines in readme file

63

increased by31.25%

Worsened metrics

Dev dependency count

16

increased by6.67%

Number of low license alerts

1

increased byInfinity%

No dependency changes