diff --git a/.eslintrc.json b/.eslintrc.json index 4d950d8..811165a 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,36 +1,39 @@ { - "env": { - "browser": true, - "commonjs": true, - "es6": true + "env": { + "browser": true, + "commonjs": true, + "es6": true + }, + "extends": "eslint:recommended", + "parserOptions": { + "ecmaFeatures": { + "experimentalObjectRestSpread": true, + "jsx": true }, - "extends": "eslint:recommended", - "parserOptions": { - "ecmaFeatures": { - "experimentalObjectRestSpread": true, - "jsx": true - }, - "sourceType": "module" - }, - "plugins": [ - "react" + "sourceType": "module" + }, + "plugins": [ + "react" + ], + "rules": { + "indent": [ + "error", + 2 + ], + "linebreak-style": [ + "error", + "unix" + ], + "quotes": [ + "error", + "single" + ], + "semi": [ + "error", + "always" ], - "rules": { - "indent": [ - "error", - 2 - ], - "linebreak-style": [ - "error", - "unix" - ], - "quotes": [ - "error", - "single" - ], - "semi": [ - "error", - "always" - ] - } + "no-class-assign": 2, + "react/jsx-uses-react": 1, + "react/jsx-uses-vars": 1 + } } \ No newline at end of file diff --git a/src/Picker.jsx b/src/Picker.jsx index e78ac06..b825f3f 100644 --- a/src/Picker.jsx +++ b/src/Picker.jsx @@ -46,10 +46,10 @@ class Picker extends Component { {splitPanel ?
- -
diff --git a/src/Trigger.jsx b/src/Trigger.jsx index 1d17a65..3d99568 100644 --- a/src/Trigger.jsx +++ b/src/Trigger.jsx @@ -115,7 +115,7 @@ class Trigger extends Component { return (
-
this.togglePicker(!isOpen)} ref="trigger">{children}
+
{children}
{appendToBody ? this._renderPortal() : this._renderPicker(isOpen)}
); diff --git a/src/panels/Buttons.jsx b/src/panels/Buttons.jsx index e638200..9c852b8 100644 --- a/src/panels/Buttons.jsx +++ b/src/panels/Buttons.jsx @@ -11,7 +11,7 @@ class Buttons extends Component { _renderButton = (key, value) => { return ( - ) + ); } _renderButtons = () => { diff --git a/src/panels/Day.jsx b/src/panels/Day.jsx index 106b045..0fe9071 100644 --- a/src/panels/Day.jsx +++ b/src/panels/Day.jsx @@ -10,21 +10,23 @@ class Day extends Component { constructor(props) { super(props); this.state = { - moment: props.moment ? props.moment.clone() : moment(), - selected: props.moment ? props.moment.clone() : null + moment: props.moment || moment(), + selected: props.moment }; } componentWillReceiveProps(props) { this.setState({ - moment: props.moment ? props.moment.clone() : moment(), - selected: props.moment ? props.moment.clone() : null + moment: props.moment || moment(), + selected: props.moment }); } changeMonth = (dir) => { + const _moment = this.state.moment.clone(); + this.setState({ - moment: this.state.moment[dir === 'prev' ? 'subtract' : 'add'](1, 'month') + moment: _moment[dir === 'prev' ? 'subtract' : 'add'](1, 'month') }); } @@ -51,7 +53,7 @@ class Day extends Component { ); } - _renderDay = (day, week) => { + _renderDay = (week, day) => { const now = moment(); const _moment = this.state.moment; const {maxDate, minDate} = this.props; @@ -76,7 +78,7 @@ class Day extends Component { }); return ( - this.select(day, isSelected, isDisabled, isPrevMonth, isNextMonth)}>{day} + {day} ); } @@ -90,16 +92,16 @@ class Day extends Component { range(1, endOfThisMonth + 1), range(1, 42 - endOfThisMonth - firstDay + 1) ); - const {weeks = WEEKS, dayFormat = DAY_FORMAT} = this.props; + const {weeks = WEEKS, dayFormat = DAY_FORMAT, style, changePanel} = this.props; return ( -
+
- - this.props.changePanel('month', _moment)}>{_moment.format(dayFormat)} -
@@ -111,9 +113,7 @@ class Day extends Component { {chunk(days, 7).map((week, idx) => { return ( - {week.map((day) => { - return this._renderDay(day, idx); - })} + {week.map(this._renderDay.bind(this, idx))} ); })} diff --git a/src/panels/Month.jsx b/src/panels/Month.jsx index 5f581d8..18fee1a 100644 --- a/src/panels/Month.jsx +++ b/src/panels/Month.jsx @@ -10,21 +10,23 @@ class Month extends Component { constructor(props) { super(props); this.state = { - moment: props.moment ? props.moment.clone() : moment(), - selected: props.moment ? props.moment.clone() : null + moment: props.moment || moment(), + selected: props.moment }; } componentWillReceiveProps(props) { this.setState({ - moment: props.moment ? props.moment.clone() : moment(), - selected: props.moment ? props.moment.clone() : null + moment: props.moment || moment(), + selected: props.moment }); } changeYear = (dir) => { + const _moment = this.state.moment.clone(); + this.setState({ - moment: this.state.moment[dir === 'prev' ? 'subtract' : 'add'](1, 'year') + moment: _moment[dir === 'prev' ? 'subtract' : 'add'](1, 'year') }); } @@ -41,7 +43,7 @@ class Month extends Component { this.props.onSelect(_moment); } - _renderMonth = (month, idx, row) => { + _renderMonth = (row, month, idx) => { const now = moment(); const _moment = this.state.moment; const {maxDate, minDate, months} = this.props; @@ -57,22 +59,23 @@ class Month extends Component { }); return ( - this.select(month, isDisabled)}>{months ? months[idx + row * 3] : month} + {months ? months[idx + row * 3] : month} ); } render() { const _moment = this.state.moment; const months = MONTHS; + const {changePanel} = this.props; return (
- - this.props.changePanel('year', _moment)}>{_moment.format('YYYY')} -
@@ -81,9 +84,7 @@ class Month extends Component { {chunk(months, 3).map((_months, idx) => { return ( - {_months.map((month, _idx) => { - return this._renderMonth(month, _idx, idx); - })} + {_months.map(this._renderMonth.bind(this, idx))} ); })} diff --git a/src/panels/Time.jsx b/src/panels/Time.jsx index 613da65..bbe61d8 100644 --- a/src/panels/Time.jsx +++ b/src/panels/Time.jsx @@ -7,17 +7,17 @@ class Time extends Component { constructor(props) { super(props); this.state = { - moment: props.moment ? props.moment.clone() : moment().hours(0).minutes(0) + moment: props.moment || moment().hours(0).minutes(0) }; } componentWillReceiveProps(props) { this.setState({ - moment: props.moment ? props.moment.clone() : moment().hours(0).minutes(0) + moment: props.moment || moment().hours(0).minutes(0) }); } - handleChange = (value, type) => { + handleChange = (type, value) => { const {onChange} = this.props; const _moment = this.state.moment.clone(); @@ -30,7 +30,7 @@ class Time extends Component { } render() { - const _moment = this.state.moment.clone(); + const _moment = this.state.moment; return (
@@ -42,9 +42,9 @@ class Time extends Component {
Hours: - this.handleChange(value, 'hours')} withBars /> + Minutes: - this.handleChange(value, 'minutes')} withBars /> +
diff --git a/src/panels/Year.jsx b/src/panels/Year.jsx index 3b54518..1fc4e6e 100644 --- a/src/panels/Year.jsx +++ b/src/panels/Year.jsx @@ -9,21 +9,23 @@ class Year extends Component { constructor(props) { super(props); this.state = { - moment: props.moment ? props.moment.clone() : moment(), - selected: props.moment ? props.moment.clone() : null + moment: props.moment || moment(), + selected: props.moment }; } componentWillReceiveProps(props) { this.setState({ - moment: props.moment ? props.moment.clone() : moment(), - selected: props.moment ? props.moment.clone() : null + moment: props.moment || moment(), + selected: props.moment }); } changePeriod = (dir) => { + const _moment = this.state.moment.clone(); + this.setState({ - moment: this.state.moment[dir === 'prev' ? 'subtract' : 'add'](10, 'year') + moment: _moment[dir === 'prev' ? 'subtract' : 'add'](10, 'year') }); } @@ -59,23 +61,24 @@ class Year extends Component { }); return ( - this.select(year, isDisabled)}>{year} + {year} ); } render() { const _moment = this.state.moment; + const {style} = this.props; const firstYear = Math.floor(_moment.year() / 10) * 10; const years = range(firstYear - 1, firstYear + 11); return ( -
+
- {firstYear} - {firstYear + 9} -
@@ -84,9 +87,7 @@ class Year extends Component { {chunk(years, 4).map((_years, idx) => { return ( - {_years.map((year) => { - return this._renderYear(year); - })} + {_years.map(this._renderYear)} ); })} diff --git a/src/utils.js b/src/utils.js index b830214..2765767 100644 --- a/src/utils.js +++ b/src/utils.js @@ -1,6 +1,6 @@ export const range = (start, end) => { let length = Math.max(end - start, 0); - let result = []; + const result = []; while (length--) { result[length] = start + length; @@ -10,10 +10,10 @@ export const range = (start, end) => { }; export const chunk = (array, size) => { - let length = array.length; + const length = array.length; let index = 0; let resIndex = -1; - let result = []; + const result = []; while (index < length) { result[++resIndex] = array.slice(index, (index += size)); diff --git a/webpack.config.babel.js b/webpack.config.babel.js index 7dbe7cc..4ee806b 100644 --- a/webpack.config.babel.js +++ b/webpack.config.babel.js @@ -1,11 +1,9 @@ -import webpack from 'webpack'; import path from 'path'; import minimist from 'minimist'; -let env = minimist(process.argv.slice(2)).ENV; - -let config = { +const env = minimist(process.argv.slice(2)).ENV; +const config = { devtool: 'eval', entry: { app: ['./docs/app.jsx']