From 9c97ccc6ee465417eb1e98c44d1ca98d7f1fab7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Romain=20Bouy=C3=A9?= <romain@bouye.fr>
Date: Thu, 8 Aug 2019 13:18:25 +0100
Subject: [PATCH] Add order option in README and merge master

---
 README.md         |   3 ++
 package-lock.json |   2 +-
 package.json      |   2 +
 src/date.js       | 103 +++++++++++++++++++++++++++++++---------------
 webpack.config.js |   8 +++-
 5 files changed, 82 insertions(+), 36 deletions(-)

diff --git a/README.md b/README.md
index 20a7ded..e713657 100644
--- a/README.md
+++ b/README.md
@@ -44,6 +44,9 @@ class App extends Component {
                     selectedDate={                      // optional
                         this.state.selectedDate         // 'yyyy-mm-dd' format only
                     }
+                    order={                             // optional
+                        ['year', 'month', 'day']        // Order of the dropdowns
+                    }
                     onMonthChange={(month) => {         // optional
                         console.log(month);
                     }}
diff --git a/package-lock.json b/package-lock.json
index dcc73e1..f418ba5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
     "name": "react-dropdown-date",
-    "version": "0.0.17",
+    "version": "0.0.18",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {
diff --git a/package.json b/package.json
index ab872c7..275f152 100644
--- a/package.json
+++ b/package.json
@@ -19,9 +19,11 @@
     },
     "author": "Satyendra Singh <satyendra1529singh@gmail.com>",
     "peerDependencies": {
+        "prop-types": "^15.6.1",
         "react": "^16.3.1"
     },
     "dependencies": {
+        "prop-types": "^15.6.1",
         "react": "^16.3.1"
     },
     "scripts": {
diff --git a/src/date.js b/src/date.js
index 3ddc515..c22278e 100644
--- a/src/date.js
+++ b/src/date.js
@@ -1,4 +1,5 @@
-import React, { PropTypes } from 'react';
+import React from 'react';
+import PropTypes from 'prop-types';
 import { monthByNumber, numberByMonth, daysInMonth, unit } from './helper';
 
 
@@ -23,6 +24,14 @@ export class DropdownDate extends React.Component {
         this.handleMonthChange = this.handleMonthChange.bind(this);
         this.handleDayChange = this.handleDayChange.bind(this);
         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,
+        }
     }
 
     componentWillMount() {
@@ -274,43 +283,69 @@ export class DropdownDate extends React.Component {
         }
     }
 
+    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>
         );
     }
 }
+
+DropdownDate.propTypes = {
+    order: PropTypes.array
+}
+
+DropdownDate.defaultProps = {
+    order: ['year', 'month', 'day']
+}
\ No newline at end of file
diff --git a/webpack.config.js b/webpack.config.js
index 517112b..aaf4bd0 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -23,6 +23,12 @@ module.exports = {
         ]
     },
     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'
+        }
     }
 };