react-dropdown-date - npm Package Compare versions

Comparing version 0.0.17 to 0.0.18

build/index.js

@@ -155,2 +155,6 @@ module.exports =
 
+var _propTypes = __webpack_require__(4);
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
 var _helper = __webpack_require__(0);
@@ -192,2 +196,10 @@
         _this.handleDateChange = _this.handleDateChange.bind(_this);
+        _this.renderYear = _this.renderYear.bind(_this);
+        _this.renderMonth = _this.renderMonth.bind(_this);
+        _this.renderDay = _this.renderDay.bind(_this);
+        _this.renderParts = {
+            year: _this.renderYear,
+            month: _this.renderMonth,
+            day: _this.renderDay
+        };
         return _this;
@@ -512,4 +524,4 @@ }
     }, {
-        key: 'render',
-        value: function render() {
+        key: 'renderYear',
+        value: function renderYear() {
             var _this3 = this;
@@ -519,56 +531,77 @@
                 'div',
-                { id: 'dropdown-date', className: this.props.classes && this.props.classes.dateContainer ? this.props.classes.dateContainer : null },
+                { key: 'year', id: 'dropdown-year', className: this.props.classes && this.props.classes.yearContainer ? this.props.classes.yearContainer : null },
                 _react2.default.createElement(
-                    'div',
-                    { id: 'dropdown-year', className: this.props.classes && this.props.classes.yearContainer ? this.props.classes.yearContainer : null },
-                    _react2.default.createElement(
-                        '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: function onChange(e) {
-                                return _this3.handleYearChange(e.target.value);
-                            },
-                            value: this.state.selectedYear
+                    '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: function onChange(e) {
+                            return _this3.handleYearChange(e.target.value);
                         },
-                        this.generateYearOptions()
-                    )
-                ),
+                        value: this.state.selectedYear
+                    },
+                    this.generateYearOptions()
+                )
+            );
+        }
+    }, {
+        key: 'renderMonth',
+        value: function renderMonth() {
+            var _this4 = this;
+
+            return _react2.default.createElement(
+                'div',
+                { key: 'month', id: 'dropdown-month', className: this.props.classes && this.props.classes.monthContainer ? this.props.classes.monthContainer : null },
                 _react2.default.createElement(
-                    'div',
-                    { id: 'dropdown-month', className: this.props.classes && this.props.classes.monthContainer ? this.props.classes.monthContainer : null },
-                    _react2.default.createElement(
-                        '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: function onChange(e) {
-                                return _this3.handleMonthChange(e.target.value);
-                            },
-                            value: this.state.selectedMonth
+                    '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: function onChange(e) {
+                            return _this4.handleMonthChange(e.target.value);
                         },
-                        this.generateMonthOptions()
-                    )
-                ),
+                        value: this.state.selectedMonth
+                    },
+                    this.generateMonthOptions()
+                )
+            );
+        }
+    }, {
+        key: 'renderDay',
+        value: function renderDay() {
+            var _this5 = this;
+
+            return _react2.default.createElement(
+                'div',
+                { key: 'day', id: 'dropdown-day', className: this.props.classes && this.props.classes.dayContainer ? this.props.classes.dayContainer : null },
                 _react2.default.createElement(
-                    'div',
-                    { id: 'dropdown-day', className: this.props.classes && this.props.classes.dayContainer ? this.props.classes.dayContainer : null },
-                    _react2.default.createElement(
-                        '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: function onChange(e) {
-                                return _this3.handleDayChange(e.target.value);
-                            },
-                            value: this.state.selectedDay
+                    '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: function onChange(e) {
+                            return _this5.handleDayChange(e.target.value);
                         },
-                        this.generateDayOptions()
-                    )
+                        value: this.state.selectedDay
+                    },
+                    this.generateDayOptions()
                 )
             );
         }
+    }, {
+        key: 'render',
+        value: function render() {
+            var _this6 = this;
+
+            return _react2.default.createElement(
+                'div',
+                { id: 'dropdown-date', className: this.props.classes && this.props.classes.dateContainer ? this.props.classes.dateContainer : null },
+                this.props.order.map(function (part) {
+                    return _this6.renderParts[part]();
+                })
+            );
+        }
     }]);
@@ -579,2 +612,10 @@
 
+DropdownDate.propTypes = {
+    order: _propTypes2.default.array
+};
+
+DropdownDate.defaultProps = {
+    order: ['year', 'month', 'day']
+};
+
 /***/ }),
@@ -848,3 +889,9 @@ /* 3 */
 
+/***/ }),
+/* 4 */
+/***/ (function(module, exports) {
+
+module.exports = require("prop-types");
+
 /***/ })
 /******/ ]);

package.json

 {
     "name": "react-dropdown-date",
-    "version": "0.0.17",
+    "version": "0.0.18",
     "description": "Highly customizable react based date picker. Select date from Day, Month and Year dropdown",
@@ -22,5 +22,7 @@ "license": "MIT",
     "peerDependencies": {
+        "prop-types": "^15.6.1",
         "react": "^16.3.1"
     },
     "dependencies": {
+        "prop-types": "^15.6.1",
         "react": "^16.3.1"
@@ -27,0 +29,0 @@ },

README.md

@@ -47,2 +47,5 @@ # react-dropdown-date
                     }
+                    order={                             // optional
+                        ['year', 'month', 'day']        // Order of the dropdowns
+                    }
                     onMonthChange={(month) => {         // optional
@@ -49,0 +52,0 @@ console.log(month);

src/date.js

@@ -1,2 +0,3 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { monthByNumber, numberByMonth, daysInMonth, unit } from './helper';
@@ -26,2 +27,10 @@
         this.handleDateChange = this.handleDateChange.bind(this);
+        this.renderYear = this.renderYear.bind(this);
+        this.renderMonth = this.renderMonth.bind(this);
+        this.renderDay = this.renderDay.bind(this);
+        this.renderParts = {
+            year: this.renderYear,
+            month: this.renderMonth,
+            day: this.renderDay,
+        }
     }
@@ -278,38 +287,56 @@
 
+    renderYear() {
+        return (
+            <div key="year" 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)}
+                    value={this.state.selectedYear}
+                >
+                    {this.generateYearOptions()}
+                </select>
+            </div>
+        )
+    }
+
+    renderMonth() {
+        return (
+            <div key="month" 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)}
+                    value={this.state.selectedMonth}
+                >
+                    {this.generateMonthOptions()}
+                </select>
+            </div>
+        )
+    }
+
+    renderDay() {
+        return (
+            <div key="day" 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)}
+                    value={this.state.selectedDay}
+                >
+                    {this.generateDayOptions()}
+                </select>
+            </div>
+        )
+    }
+
     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)}
-                        value={this.state.selectedYear}
-                    >
-                        {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)}
-                        value={this.state.selectedMonth}
-                    >
-                        {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)}
-                        value={this.state.selectedDay}
-                    >
-                        {this.generateDayOptions()}
-                    </select>
-                </div>
+                {this.props.order.map(part => {
+                    return this.renderParts[part]()
+                })}
             </div>
@@ -319,1 +346,9 @@ );
 }
+
+DropdownDate.propTypes = {
+    order: PropTypes.array
+}
+
+DropdownDate.defaultProps = {
+    order: ['year', 'month', 'day']
+}

webpack.config.js

@@ -26,4 +26,10 @@ var path = require('path');
     externals: {
-        'react': 'commonjs react' // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
+        'react': 'commonjs react', // this line is just to use the React dependency of our parent-testing-project instead of using our own React.
+        'prop-types': {
+            root: 'PropTypes',
+            commonjs2: 'prop-types',
+            commonjs: 'prop-types',
+            amd: 'prop-types'
+        }
     }
 };

No alert changes

Improved metrics

Total package byte prevSize

68232

increased by3.13%

Lines of code

1382

increased by5.58%

Number of lines in readme file

247

increased by1.23%

Worsened metrics

Dependency count

4

increased by100%

Dependency changes

• + Addedprop-types@^15.6.1