Merge pull request #28 from AllenWooooo/cleaning-code

Cleaning code
AllenWooooo · Mar 20, 2017 · 3d4468e · 3d4468e
2 parents 80ba360 + c73f107
commit 3d4468e
Show file tree

Hide file tree

Showing 10 changed files with 92 additions and 89 deletions.
diff --git 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
+  }
 }
diff --git a/src/Picker.jsx b/src/Picker.jsx
@@ -46,10 +46,10 @@ class Picker extends Component {
 
         {splitPanel
           ? <div className="panel-nav">
-              <button type="button" onClick={() => this.changePanel('calendar')} className={isCalendarPanel ? 'active' : ''}>
+              <button type="button" onClick={this.changePanel.bind(this, 'calendar')} className={isCalendarPanel ? 'active' : ''}>
                 <i className="fa fa-calendar-o"></i>Date
               </button>
-              <button type="button" onClick={() => this.changePanel('time')} className={isTimePanel ? 'active' : ''}>
+              <button type="button" onClick={this.changePanel.bind(this, 'time')} className={isTimePanel ? 'active' : ''}>
                 <i className="fa fa-clock-o"></i>Time
               </button>
             </div>

diff --git a/src/Trigger.jsx b/src/Trigger.jsx
@@ -115,7 +115,7 @@ class Trigger extends Component {
 
     return (
       <div className={`datetime-trigger ${className}`}>
-        <div onClick={() => this.togglePicker(!isOpen)} ref="trigger">{children}</div>
+        <div onClick={this.togglePicker.bind(this, !isOpen)} ref="trigger">{children}</div>
         {appendToBody ? this._renderPortal() : this._renderPicker(isOpen)}
       </div>
     );

diff --git a/src/panels/Buttons.jsx b/src/panels/Buttons.jsx
@@ -11,7 +11,7 @@ class Buttons extends Component {
   _renderButton = (key, value) => {
     return (
       <button className="btn" key={key} type="button" onClick={this.handleClick.bind(this, value)}>{key}</button>
-    )
+    );
   }
 
   _renderButtons = () => {

diff --git 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 (
-      <td key={day} className={className} onClick={() => this.select(day, isSelected, isDisabled, isPrevMonth, isNextMonth)}>{day}</td>
+      <td key={day} className={className} onClick={this.select.bind(this, day, isSelected, isDisabled, isPrevMonth, isNextMonth)}>{day}</td>
     );
   }
 
@@ -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 (
-      <div className="calendar-days" style={this.props.style}>
+      <div className="calendar-days" style={style}>
         <div className="calendar-nav">
-          <button type="button" className="prev-month" onClick={() => this.changeMonth('prev')}>
+          <button type="button" className="prev-month" onClick={this.changeMonth.bind(this, 'prev')}>
             <i className="fa fa-angle-left"/>
           </button>
-          <span className="current-date" onClick={() => this.props.changePanel('month', _moment)}>{_moment.format(dayFormat)}</span>
-          <button type="button" className="next-month" onClick={() => this.changeMonth('next')}>
+          <span className="current-date" onClick={changePanel.bind(this, 'month', _moment)}>{_moment.format(dayFormat)}</span>
+          <button type="button" className="next-month" onClick={this.changeMonth.bind(this, 'next')}>
             <i className="fa fa-angle-right"/>
           </button>
         </div>
@@ -111,9 +113,7 @@ class Day extends Component {
             {chunk(days, 7).map((week, idx) => {
               return (
                 <tr key={idx}>
-                  {week.map((day) => {
-                    return this._renderDay(day, idx);
-                  })}
+                  {week.map(this._renderDay.bind(this, idx))}
                 </tr>
               );
             })}

diff --git 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 (
-      <td key={month} className={className} onClick={() => this.select(month, isDisabled)}>{months ? months[idx + row * 3] : month}</td>
+      <td key={month} className={className} onClick={this.select.bind(this, month, isDisabled)}>{months ? months[idx + row * 3] : month}</td>
     );
   }
 
   render() {
     const _moment = this.state.moment;
     const months = MONTHS;
+    const {changePanel} = this.props;
 
     return (
       <div className="calendar-months" style={this.props.style}>
         <div className="calendar-nav">
-          <button type="button" className="prev-month" onClick={() => this.changeYear('prev')}>
+          <button type="button" className="prev-month" onClick={this.changeYear.bind(this, 'prev')}>
             <i className="fa fa-angle-left"/>
           </button>
-          <span className="current-date" onClick={() => this.props.changePanel('year', _moment)}>{_moment.format('YYYY')}</span>
-          <button type="button" className="next-month" onClick={() => this.changeYear('next')}>
+          <span className="current-date" onClick={changePanel.bind(this, 'year', _moment)}>{_moment.format('YYYY')}</span>
+          <button type="button" className="next-month" onClick={this.changeYear.bind(this, 'next')}>
             <i className="fa fa-angle-right"/>
           </button>
         </div>
@@ -81,9 +84,7 @@ class Month extends Component {
             {chunk(months, 3).map((_months, idx) => {
               return (
                 <tr key={idx}>
-                  {_months.map((month, _idx) => {
-                    return this._renderMonth(month, _idx, idx);
-                  })}
+                  {_months.map(this._renderMonth.bind(this, idx))}
                 </tr>
               );
             })}

diff --git 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 (
       <div style={this.props.style}>
@@ -42,9 +42,9 @@ class Time extends Component {
           </div>
           <div className="sliders">
             <span className="slider-text">Hours:</span>
-            <ReactSlider min={0} max={23} value={_moment.hour()} onChange={(value) => this.handleChange(value, 'hours')} withBars />
+            <ReactSlider min={0} max={23} value={_moment.hour()} onChange={this.handleChange.bind(this, 'hours')} withBars />
             <span className="slider-text">Minutes:</span>
-            <ReactSlider min={0} max={59} value={_moment.minute()} onChange={(value) => this.handleChange(value, 'minutes')} withBars />
+            <ReactSlider min={0} max={59} value={_moment.minute()} onChange={this.handleChange.bind(this, 'minutes')} withBars />
           </div>
         </div>
       </div>

diff --git 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 (
-      <td key={year} className={className} onClick={() => this.select(year, isDisabled)}>{year}</td>
+      <td key={year} className={className} onClick={this.select.bind(this, year, isDisabled)}>{year}</td>
     );
   }
 
   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 (
-      <div className="calendar-years" style={this.props.style}>
+      <div className="calendar-years" style={style}>
         <div className="calendar-nav">
-          <button type="button" className="prev-month" onClick={() => this.changePeriod('prev')}>
+          <button type="button" className="prev-month" onClick={this.changePeriod.bind(this, 'prev')}>
             <i className="fa fa-angle-left"/>
           </button>
           <span className="current-date disabled">{firstYear} - {firstYear + 9}</span>
-          <button type="button" className="next-month" onClick={() => this.changePeriod('next')}>
+          <button type="button" className="next-month" onClick={this.changePeriod.bind(this, 'next')}>
             <i className="fa fa-angle-right"/>
           </button>
         </div>
@@ -84,9 +87,7 @@ class Year extends Component {
             {chunk(years, 4).map((_years, idx) => {
               return (
                 <tr key={idx}>
-                  {_years.map((year) => {
-                    return this._renderYear(year);
-                  })}
+                  {_years.map(this._renderYear)}
                 </tr>
               );
             })}

diff --git 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));