Skip to content

Commit

Permalink
Add order option in README and merge master
Browse files Browse the repository at this point in the history
  • Loading branch information
@romainbou
romainbou committed Aug 8, 2019
1 parent 3192bcc commit 9c97ccc
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 36 deletions.
3 changes: 3 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
}}
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,11 @@
},
"author": "Satyendra Singh <[email protected]>",
"peerDependencies": {
"prop-types": "^15.6.1",
"react": "^16.3.1"
},
"dependencies": {
"prop-types": "^15.6.1",
"react": "^16.3.1"
},
"scripts": {
Expand Down
103 changes: 69 additions & 34 deletions src/date.js
View file
Original file line number Diff line number Diff line change
@@ -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';


Expand All @@ -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() {
Expand Down Expand Up @@ -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']
}
8 changes: 7 additions & 1 deletion webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'
}
}
};

0 comments on commit 9c97ccc

Please sign in to comment.