react-dropdown-date - npm Package Compare versions

Comparing version 0.0.10 to 0.0.11

build/index.js

@@ -67,3 +67,3 @@ module.exports =
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 2);
+/******/ 	return __webpack_require__(__webpack_require__.s = 3);
 /******/ })
@@ -148,3 +148,3 @@ /************************************************************************/
 });
-exports.DayPicker = exports.MonthPicker = exports.YearPicker = undefined;
+exports.DropdownDate = undefined;
 
@@ -167,3 +167,3 @@ 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 DropdownDate = function (_React$Component) {
+var DropdownDate = exports.DropdownDate = function (_React$Component) {
     _inherits(DropdownDate, _React$Component);
@@ -551,14 +551,44 @@
 
-exports.default = DropdownDate;
+/***/ }),
+/* 3 */
+/***/ (function(module, exports, __webpack_require__) {
 
-var YearPicker = exports.YearPicker = function (_React$Component2) {
-    _inherits(YearPicker, _React$Component2);
+"use strict";
 
+
+Object.defineProperty(exports, "__esModule", {
+    value: true
+});
+exports.DayPicker = exports.MonthPicker = exports.YearPicker = undefined;
+
+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 _react = __webpack_require__(1);
+
+var _react2 = _interopRequireDefault(_react);
+
+var _helper = __webpack_require__(0);
+
+var _date = __webpack_require__(2);
+
+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 _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+
+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; }
+
+exports.default = _date.DropdownDate;
+
+var YearPicker = exports.YearPicker = function (_React$Component) {
+    _inherits(YearPicker, _React$Component);
+
     function YearPicker(props) {
         _classCallCheck(this, YearPicker);
 
-        var _this4 = _possibleConstructorReturn(this, (YearPicker.__proto__ || Object.getPrototypeOf(YearPicker)).call(this, props));
+        var _this = _possibleConstructorReturn(this, (YearPicker.__proto__ || Object.getPrototypeOf(YearPicker)).call(this, props));
 
-        _this4.renderYearOptions = _this4.renderYearOptions.bind(_this4);
-        return _this4;
+        _this.renderYearOptions = _this.renderYearOptions.bind(_this);
+        return _this;
     }
@@ -569,3 +599,3 @@
         value: function renderYearOptions() {
-            var _this5 = this;
+            var _this2 = this;
 
@@ -580,4 +610,4 @@ var startYear = this.props.start || 1900;
             } else {
-                for (var _i9 = endYear; _i9 >= startYear; --_i9) {
-                    years.push(_i9);
+                for (var _i = endYear; _i >= startYear; --_i) {
+                    years.push(_i);
                 }
@@ -591,4 +621,3 @@ }
                 'option',
-                { value: this.props.defaultValue ? this.props.defaultValue : '', key: -1,
-                    className: this.props.optionClasses ? this.props.optionClasses : null },
+                { value: '', key: -1, className: this.props.optionClasses ? this.props.optionClasses : null },
                 this.props.defaultValue ? this.props.defaultValue : ''
@@ -599,3 +628,3 @@ ));
                     'option',
-                    { value: year, key: index, className: _this5.props.optionClasses ? _this5.props.optionClasses : null },
+                    { value: year, key: index, className: _this2.props.optionClasses ? _this2.props.optionClasses : null },
                     year
@@ -609,3 +638,3 @@ ));
         value: function render() {
-            var _this6 = this;
+            var _this3 = this;
 
@@ -619,4 +648,5 @@ return _react2.default.createElement(
                     onChange: function onChange(e) {
-                        return _this6.props.onChange(e.target.value);
-                    }
+                        return _this3.props.onChange(e.target.value);
+                    },
+                    value: this.props.value
                 },
@@ -631,4 +661,4 @@ this.renderYearOptions()
 
-var MonthPicker = exports.MonthPicker = function (_React$Component3) {
-    _inherits(MonthPicker, _React$Component3);
+var MonthPicker = exports.MonthPicker = function (_React$Component2) {
+    _inherits(MonthPicker, _React$Component2);
 
@@ -638,6 +668,6 @@ function MonthPicker(props) {
 
-        var _this7 = _possibleConstructorReturn(this, (MonthPicker.__proto__ || Object.getPrototypeOf(MonthPicker)).call(this, props));
+        var _this4 = _possibleConstructorReturn(this, (MonthPicker.__proto__ || Object.getPrototypeOf(MonthPicker)).call(this, props));
 
-        _this7.renderMonthOptions = _this7.renderMonthOptions.bind(_this7);
-        return _this7;
+        _this4.renderMonthOptions = _this4.renderMonthOptions.bind(_this4);
+        return _this4;
     }
@@ -648,3 +678,3 @@
         value: function renderMonthOptions() {
-            var _this8 = this;
+            var _this5 = this;
 
@@ -677,3 +707,3 @@ var today = new Date();
                 'option',
-                { value: this.props.defaultValue ? this.props.defaultValue : '', key: -1,
+                { value: '', key: -1,
                     className: this.props.optionClasses ? this.props.optionClasses : null },
@@ -686,3 +716,3 @@ this.props.defaultValue ? this.props.defaultValue : ''
                     { value: index, key: index,
-                        className: _this8.props.optionClasses ? _this8.props.optionClasses : null },
+                        className: _this5.props.optionClasses ? _this5.props.optionClasses : null },
                     month
@@ -696,3 +726,3 @@ ));
         value: function render() {
-            var _this9 = this;
+            var _this6 = this;
 
@@ -706,4 +736,5 @@ return _react2.default.createElement(
                     onChange: function onChange(e) {
-                        return _this9.props.onChange(e.target.value);
-                    }
+                        return _this6.props.onChange(e.target.value);
+                    },
+                    value: this.props.value
                 },
@@ -718,4 +749,4 @@ this.renderMonthOptions()
 
-var DayPicker = exports.DayPicker = function (_React$Component4) {
-    _inherits(DayPicker, _React$Component4);
+var DayPicker = exports.DayPicker = function (_React$Component3) {
+    _inherits(DayPicker, _React$Component3);
 
@@ -725,6 +756,6 @@ function DayPicker(props) {
 
-        var _this10 = _possibleConstructorReturn(this, (DayPicker.__proto__ || Object.getPrototypeOf(DayPicker)).call(this, props));
+        var _this7 = _possibleConstructorReturn(this, (DayPicker.__proto__ || Object.getPrototypeOf(DayPicker)).call(this, props));
 
-        _this10.renderDayOptions = _this10.renderDayOptions.bind(_this10);
-        return _this10;
+        _this7.renderDayOptions = _this7.renderDayOptions.bind(_this7);
+        return _this7;
     }
@@ -749,3 +780,3 @@
             if (!this.props.endYearGiven) {
-                if (this.props.year && this.props.year === today.getFullYear() && this.props.month && this.props.month === today.getMonth()) {
+                if (year === today.getFullYear() && month === today.getMonth()) {
                     days = today.getDate();
@@ -757,3 +788,3 @@ }
                 'option',
-                { value: this.props.defaultValue ? this.props.defaultValue : '', key: -1,
+                { value: '', key: -1,
                     className: this.props.optionClasses ? this.props.optionClasses : null },
@@ -775,3 +806,3 @@ this.props.defaultValue ? this.props.defaultValue : ''
         value: function render() {
-            var _this11 = this;
+            var _this8 = this;
 
@@ -785,4 +816,5 @@ return _react2.default.createElement(
                     onChange: function onChange(e) {
-                        return _this11.props.onChange(e.target.value);
-                    }
+                        return _this8.props.onChange(e.target.value);
+                    },
+                    value: this.props.value
                 },
@@ -789,0 +821,0 @@ this.renderDayOptions()

package.json

 {
     "name": "react-dropdown-date",
-    "version": "0.0.10",
+    "version": "0.0.11",
     "description": "Highly customizable react based date picker. Select date from Day, Month and Year dropdown",
@@ -5,0 +5,0 @@ "keywords": [

README.md

@@ -129,2 +129,4 @@ # react-dropdown-date
 					// mandatory
+          value={this.state.year}
+          // mandatory
 					onChange={(year) => {
@@ -150,2 +152,4 @@ this.setState({ year });
 					// mandatory
+          value={this.state.month}
+          // mandatory
 					onChange={(month) => {
@@ -169,2 +173,4 @@ this.setState({ month });
 					// mandatory
+          value={this.state.day}
+          // mandatory
 					onChange={(day) => {
@@ -171,0 +177,0 @@ this.setState({ day });

src/index.js

 import React, { PropTypes } from 'react';
 import { monthByNumber, numberByMonth, daysInMonth, unit } from './helper';
 
-
-class DropdownDate extends React.Component {
-    constructor(props) {
-        super(props);
-        this.state = {
-            startYear: null,
-            startMonth: null,
-            startDay: null,
-            endYear: null,
-            endMonth: null,
-            endDay: null,
-            selectedYear: -1,
-            selectedMonth: -1,
-            selectedDay: -1
-        };
-        this.generateYearOptions = this.generateYearOptions.bind(this);
-        this.generateMonthOptions = this.generateMonthOptions.bind(this);
-        this.generateDayOptions = this.generateDayOptions.bind(this);
-        this.handleYearChange = this.handleYearChange.bind(this);
-        this.handleMonthChange = this.handleMonthChange.bind(this);
-        this.handleDayChange = this.handleDayChange.bind(this);
-        this.handleDateChange = this.handleDateChange.bind(this);
-    }
-
-    componentWillMount() {
-        let startYear, startMonth, startDay, endYear, endMonth, endDay;
-        if (this.props.startDate) {
-            const date = new Date(this.props.startDate);
-            startYear = date.getFullYear();
-            startMonth = date.getMonth();
-            startDay = date.getDate();
-        } else {
-            startYear = 1900;
-            startMonth = 0;
-            startDay = 1;
-        }
-        if (this.props.endDate) {
-            const date = new Date(this.props.endDate);
-            endYear = date.getFullYear();
-            endMonth = date.getMonth();
-            endDay = date.getDate();
-        } else {
-            const date = new Date();
-            endYear = date.getFullYear();
-            endMonth = date.getMonth();
-            endDay = date.getDate();
-        }
-        this.setState({ startYear, startMonth, startDay, endYear, endMonth, endDay });
-    }
-
-    generateYearOptions() {
-        const { startYear, endYear } = this.state;
-        const yearOptions = [];
-        yearOptions.push(
-            <option key={-1} value=""
-                className={(this.props.classes && this.props.classes.yearOptions) ? this.props.classes.yearOptions : null}
-            >
-                {(this.props.defaultValues && this.props.defaultValues.year) ? this.props.defaultValues.year : ''}
-            </option>
-        );
-        if (this.props.options && this.props.options.yearReverse) {
-            for (let i = endYear; i >= startYear; i--) {
-                yearOptions.push(
-                    <option key={i} value={i}
-                        className={(this.props.classes && this.props.classes.yearOptions) ? this.props.classes.yearOptions : null}
-                    >{i}</option>
-                );
-            }
-        } else {
-            for (let i = startYear; i <= endYear; i++) {
-                yearOptions.push(
-                    <option key={i} value={i}
-                        className={(this.props.classes && this.props.classes.yearOptions) ? this.props.classes.yearOptions : null}
-                    >{i}</option>
-                );
-            }
-        }
-        return yearOptions;
-    }
-
-    generateMonthOptions() {
-        const { startMonth, endMonth, startYear, endYear, selectedYear } = this.state;
-        let months = [];
-        if (selectedYear === startYear) {
-            for (let i = startMonth; i <= 11; i++) {
-                months.push({
-                    value: i,
-                    month: monthByNumber[i]
-                });
-            }
-        } else if (selectedYear === endYear) {
-            for (let i = 0; i <= endMonth; i++) {
-                months.push({
-                    value: i,
-                    month: monthByNumber[i]
-                });
-            }
-        } else {
-            for (let i = 0; i <= 11; i++) {
-                months.push({
-                    value: i,
-                    month: monthByNumber[i]
-                });
-            }
-        }
-
-        if (this.props.options && this.props.options.monthShort) {
-            months = months.map((elem) => {
-                return {
-                    value: elem.value,
-                    month: elem.month.substring(0, 3)
-                };
-            });
-        }
-
-        if (this.props.options && this.props.options.monthCaps) {
-            months = months.map((elem) => {
-                return {
-                    value: elem.value,
-                    month: elem.month.toUpperCase()
-                };
-            });
-        }
-
-        const monthOptions = [];
-        monthOptions.push(
-            <option key={-1} value=""
-                className={(this.props.classes && this.props.classes.monthOptions) ? this.props.classes.monthOptions : null}
-            >{(this.props.defaultValues && this.props.defaultValues.month) ? this.props.defaultValues.month : ''}
-            </option>
-        );
-        months.forEach((elem) => {
-            monthOptions.push(
-                <option key={elem.value} value={elem.value}
-                    className={(this.props.classes && this.props.classes.monthOptions) ? this.props.classes.monthOptions : null}
-                >{elem.month}</option>
-            );
-        });
-
-        return monthOptions;
-    }
-
-    generateDayOptions() {
-        const { startYear, startMonth, startDay, endYear, endMonth, endDay, selectedYear, selectedMonth } = this.state;
-        const dayOptions = [];
-        dayOptions.push(
-            <option key={-1} value=""
-                className={(this.props.classes && this.props.classes.dayOptions) ? this.props.classes.dayOptions : null}
-            >
-                {(this.props.defaultValues && this.props.defaultValues.day) ? this.props.defaultValues.day : ''}
-            </option>
-        );
-
-        let monthDays;
-        if (selectedYear === startYear) {
-            if (selectedMonth === startMonth) {
-                monthDays = (selectedYear % 4 === 0 && selectedMonth === 1) ? daysInMonth[selectedMonth] + 1 : daysInMonth[selectedMonth];
-                for (let i = startDay; i <= monthDays; i++) {
-                    dayOptions.push(
-                        <option key={i} value={i}
-                            className={(this.props.classes && this.props.classes.dayOptions) ? this.props.classes.dayOptions : null}
-                        >{i}</option>
-                    );
-                }
-            } else {
-                monthDays = (selectedYear % 4 === 0 && selectedMonth === 1) ? daysInMonth[selectedMonth] + 1 : daysInMonth[selectedMonth];
-                for (let i = 1; i <= monthDays; i++) {
-                    dayOptions.push(
-                        <option key={i} value={i}
-                            className={(this.props.classes && this.props.classes.dayOptions) ? this.props.classes.dayOptions : null}
-                        >{i}</option>
-                    );
-                }
-            }
-        } else if (selectedYear === endYear) {
-            if (selectedMonth === endMonth) {
-                for (let i = 1; i <= endDay; i++) {
-                    dayOptions.push(
-                        <option key={i} value={i}
-                            className={(this.props.classes && this.props.classes.dayOptions) ? this.props.classes.dayOptions : null}
-                        >{i}</option>
-                    );
-                }
-            } else {
-                monthDays = (selectedYear % 4 === 0 && selectedMonth === 1) ? daysInMonth[selectedMonth] + 1 : daysInMonth[selectedMonth];
-                for (let i = 1; i <= monthDays; i++) {
-                    dayOptions.push(
-                        <option key={i} value={i}
-                            className={(this.props.classes && this.props.classes.dayOptions) ? this.props.classes.dayOptions : null}
-                        >{i}</option>
-                    );
-                }
-            }
-        } else {
-            if (selectedMonth) {
-                monthDays = (selectedYear % 4 === 0 && selectedMonth === 1) ? daysInMonth[selectedMonth] + 1 : daysInMonth[selectedMonth];
-                for (let i = 1; i <= monthDays; i++) {
-                    dayOptions.push(
-                        <option key={i} value={i}
-                            className={(this.props.classes && this.props.classes.dayOptions) ? this.props.classes.dayOptions : null}
-                        >{i}</option>
-                    );
-                }
-            } else {
-                for (let i = 1; i <= 31; i++) {
-                    dayOptions.push(
-                        <option key={i} value={i}
-                            className={(this.props.classes && this.props.classes.dayOptions) ? this.props.classes.dayOptions : null}
-                        >{i}</option>
-                    );
-                }
-            }
-        }
-        return dayOptions;
-    }
-
-    handleYearChange(year) {
-        year = Number.parseInt(year);
-        this.setState({ selectedYear: year });
-        if (this.props.onYearChange) { this.props.onYearChange(year); }
-        this.handleDateChange(unit.year, year);
-    }
-
-    handleMonthChange(month) {
-        month = Number.parseInt(month);
-        this.setState({ selectedMonth: month });
-        if (this.props.onMonthChange) { this.props.onMonthChange(monthByNumber[month]); }
-        this.handleDateChange(unit.month, month);
-    }
-
-    handleDayChange(day) {
-        day = Number.parseInt(day);
-        this.setState({ selectedDay: day });
-        if (this.props.onDayChange) { this.props.onDayChange(day); }
-        this.handleDateChange(unit.day, day);
-    }
-
-    handleDateChange(type, value) {
-        if (this.props.onDateChange) {
-            let { selectedYear, selectedMonth, selectedDay } = this.state;
-            if (type === unit.year) {
-                selectedYear = value;
-            } else if (type === unit.month) {
-                selectedMonth = value;
-            } else if (type === unit.day) {
-                selectedDay = value;
-            }
-            if (selectedYear !== -1 && selectedMonth !== -1 && selectedDay !== -1) {
-                this.props.onDateChange(new Date(selectedYear, selectedMonth, selectedDay));
-            }
-        }
-    }
-
-    render() {
-        return (
-            <div id="dropdown-date" className={(this.props.classes && this.props.classes.dateContainer) ? this.props.classes.dateContainer : null}>
-                <div id="dropdown-year" className={(this.props.classes && this.props.classes.yearContainer) ? this.props.classes.yearContainer : null}>
-                    <select
-                        id={(this.props.ids && this.props.ids.year) ? this.props.ids.year : null}
-                        name={(this.props.names && this.props.names.year) ? this.props.names.year : null}
-                        className={(this.props.classes && this.props.classes.year) ? this.props.classes.year : null}
-                        onChange={(e) => this.handleYearChange(e.target.value)}
-                    >
-                        {this.generateYearOptions()}
-                    </select>
-                </div>
-                <div id="dropdown-month" className={(this.props.classes && this.props.classes.monthContainer) ? this.props.classes.monthContainer : null}>
-                    <select
-                        id={(this.props.ids && this.props.ids.month) ? this.props.ids.month : null}
-                        name={(this.props.names && this.props.names.month) ? this.props.names.month : null}
-                        className={(this.props.classes && this.props.classes.month) ? this.props.classes.month : null}
-                        onChange={(e) => this.handleMonthChange(e.target.value)}
-                    >
-                        {this.generateMonthOptions()}
-                    </select>
-                </div>
-                <div id="dropdown-day" className={(this.props.classes && this.props.classes.dayContainer) ? this.props.classes.dayContainer : null}>
-                    <select
-                        id={(this.props.ids && this.props.ids.day) ? this.props.ids.day : null}
-                        name={(this.props.names && this.props.names.day) ? this.props.names.day : null}
-                        className={(this.props.classes && this.props.classes.day) ? this.props.classes.day : null}
-                        onChange={(e) => this.handleDayChange(e.target.value)}
-                    >
-                        {this.generateDayOptions()}
-                    </select>
-                </div>
-            </div>
-        );
-    }
-}
-
+import { DropdownDate } from './date';
 export default DropdownDate;
 
-
 export class YearPicker extends React.Component {
@@ -318,5 +27,5 @@ constructor(props) {
         yearOptions.push(
-            <option value={this.props.defaultValue ? this.props.defaultValue : ''} key={-1}
-                className={this.props.optionClasses ? this.props.optionClasses : null}>
-                {this.props.defaultValue ? this.props.defaultValue : ''}</option>
+            <option value="" key={-1} className={this.props.optionClasses ? this.props.optionClasses : null}>
+                {this.props.defaultValue ? this.props.defaultValue : ''}
+            </option>
         );
@@ -326,3 +35,4 @@ years.forEach((year, index) => {
                 <option value={year} key={index} className={this.props.optionClasses ? this.props.optionClasses : null}>
-                    {year}</option>
+                    {year}
+                </option>
             );
@@ -340,2 +50,3 @@ });
                 onChange={(e) => this.props.onChange(e.target.value)}
+                value={this.props.value}
             >{this.renderYearOptions()}
@@ -373,5 +84,6 @@ </select>
         monthOptions.push(
-            <option value={this.props.defaultValue ? this.props.defaultValue : ''} key={-1}
+            <option value="" key={-1}
                 className={this.props.optionClasses ? this.props.optionClasses : null}>
-                {this.props.defaultValue ? this.props.defaultValue : ''}</option>
+                {this.props.defaultValue ? this.props.defaultValue : ''}
+            </option>
         );
@@ -382,3 +94,4 @@ months.forEach((month, index) => {
                     className={this.props.optionClasses ? this.props.optionClasses : null}>
-                    {month}</option>
+                    {month}
+                </option>
             );
@@ -396,2 +109,3 @@ });
                 onChange={(e) => this.props.onChange(e.target.value)}
+                value={this.props.value}
             >{this.renderMonthOptions()}
@@ -424,4 +138,3 @@ </select>
         if (!this.props.endYearGiven) {
-            if (this.props.year && this.props.year === today.getFullYear() &&
-                this.props.month && this.props.month === today.getMonth()) {
+            if (year === today.getFullYear() && month === today.getMonth()) {
                 days = today.getDate();
@@ -432,5 +145,6 @@ }
         dayOptions.push(
-            <option value={this.props.defaultValue ? this.props.defaultValue : ''} key={-1}
+            <option value="" key={-1}
                 className={this.props.optionClasses ? this.props.optionClasses : null}>
-                {this.props.defaultValue ? this.props.defaultValue : ''}</option>
+                {this.props.defaultValue ? this.props.defaultValue : ''}
+            </option>
         );
@@ -441,3 +155,4 @@ for (let i = 1; i <= days; ++i) {
                     className={this.props.optionClasses ? this.props.optionClasses : null}>
-                    {i}</option>
+                    {i}
+                </option>
             );
@@ -455,2 +170,3 @@ };
                 onChange={(e) => this.props.onChange(e.target.value)}
+                value={this.props.value}
             >{this.renderDayOptions()}
@@ -457,0 +173,0 @@ </select>

No alert changes

Improved metrics

Total package byte prevSize

59034

increased by3.74%

Number of package files

9

increased by12.5%

Lines of code

1238

increased by2.57%

Number of lines in readme file

188

increased by3.3%

No dependency changes