From d2dd40c204100e3849a4707dc052ed64f8c3f7e9 Mon Sep 17 00:00:00 2001
From: Juho Jokela <juho.jokela@atalent.fi>
Date: Thu, 26 Oct 2017 11:23:37 +0300
Subject: [PATCH] Update syntax to ES6

Notes: Tests ran without errors, chai version updated.
---
 README.md                  |  27 ++++---
 karma.conf.js              |   2 +-
 package.json               |   2 +-
 src/Pikaday.js             |  59 ++++++++--------
 src/__tests__/main.spec.js | 141 +++++++++++++++++++++++--------------
 5 files changed, 133 insertions(+), 98 deletions(-)

diff --git a/README.md b/README.md
index 4792392..65886e3 100644
--- a/README.md
+++ b/README.md
@@ -36,22 +36,21 @@ See the example app in this repo and the `webpack.config.js` for an example of h
 import React from 'react';
 import Pikaday from 'react-pikaday';
 
-var MyComponent = React.createClass({
-  getInitialState: function() {
-    return {
-      date: null
+class MyComponent extends React.Component {
+  constructor() {
+    super();
+    this.state = {
+      date: null,
     };
-  },
-
-  handleChange: function(date) {
-    this.setState({
-      date: date
-    });
-  },
+    this.handleChange = this.handleChange.bind(this);
+  }
 
-  render: function() {
-    var date = this.state.date;
+  handleChange(date) {
+    this.setState({ date });
+  }
 
+  render() {
+    const date = this.state.date;
     return (
       <div>
         <p>
@@ -61,7 +60,7 @@ var MyComponent = React.createClass({
       </div>
     );
   }
-});
+}
 ```
 
 ## Properties
diff --git a/karma.conf.js b/karma.conf.js
index 678e4d2..5dadc87 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -7,7 +7,7 @@ var webpackConfig = {
     loaders: [
       {
         test: /\.js$/,
-        exclude: /(node_modules\/)/,
+        exclude: /node_modules/,
         loader: 'babel-loader'
       },
     ],
diff --git a/package.json b/package.json
index ad12543..c787315 100644
--- a/package.json
+++ b/package.json
@@ -28,7 +28,7 @@
     "babel-preset-es2015": "^6.6.0",
     "babel-preset-react": "^6.5.0",
     "babel-preset-stage-2": "^6.11.0",
-    "chai": "^1.9.1",
+    "chai": "^1.10.0",
     "css-loader": "^0.23.1",
     "eslint": "^3.2.2",
     "eslint-plugin-react": "^6.0.0",
diff --git a/src/Pikaday.js b/src/Pikaday.js
index 3fc710b..55b014f 100644
--- a/src/Pikaday.js
+++ b/src/Pikaday.js
@@ -1,33 +1,15 @@
 import React from 'react';
 import Pikaday from 'pikaday';
 
-var ReactPikaday = React.createClass({
-
-  propTypes: {
-    value: React.PropTypes.instanceOf(Date),
-    onChange: React.PropTypes.func,
-    initialOptions: React.PropTypes.object,
-
-    valueLink: React.PropTypes.shape({
-      value: React.PropTypes.instanceOf(Date),
-      requestChange: React.PropTypes.func.isRequired
-    })
-  },
-
-  getDefaultProps: function() {
-    return {
-      initialOptions: {}
-    };
-  },
-
-  getValueLink: function(props) {
+class ReactPikaday extends React.Component {
+  getValueLink(props) {
     return props.valueLink || {
       value: props.value,
       requestChange: props.onChange
     };
-  },
+  }
 
-  setDateIfChanged: function(newDate, prevDate) {
+  setDateIfChanged(newDate, prevDate) {
     var newTime = newDate ? newDate.getTime() : null;
     var prevTime = prevDate ? prevDate.getTime() : null;
 
@@ -38,10 +20,10 @@ var ReactPikaday = React.createClass({
       }
       this._picker.setDate(newDate, true);  // 2nd param = don't call onSelect
     }
-  },
+  }
 
   // user props to pass down to the underlying DOM node
-  getDomProps: function() {
+  getDomProps() {
     var restProps = {};
     for (var propKey in this.props) {
       if (this.props.hasOwnProperty(propKey) && !ReactPikaday.propTypes[propKey]) {
@@ -49,9 +31,9 @@ var ReactPikaday = React.createClass({
       }
     }
     return restProps
-  },
+  }
 
-  componentDidMount: function() {
+  componentDidMount() {
     var el = this.refs.pikaday;
 
     this._picker = new Pikaday({
@@ -61,20 +43,35 @@ var ReactPikaday = React.createClass({
     });
 
     this.setDateIfChanged(this.getValueLink(this.props).value);
-  },
+  }
 
-  componentWillReceiveProps: function(nextProps) {
+  componentWillReceiveProps(nextProps) {
     var newDate = this.getValueLink(nextProps).value;
     var lastDate = this.getValueLink(this.props).value;
 
     this.setDateIfChanged(newDate, lastDate);
-  },
+  }
 
-  render: function() {
+  render() {
     return (
       <input type="text" ref="pikaday" {...this.getDomProps()} />
     );
   }
-});
+}
+
+ReactPikaday.defaultProps = {
+  initialOptions: {},
+};
+
+ReactPikaday.propTypes = {
+  value: React.PropTypes.instanceOf(Date),
+  onChange: React.PropTypes.func,
+  initialOptions: React.PropTypes.object,
+
+  valueLink: React.PropTypes.shape({
+    value: React.PropTypes.instanceOf(Date),
+    requestChange: React.PropTypes.func.isRequired
+  }),
+};
 
 export default ReactPikaday;
diff --git a/src/__tests__/main.spec.js b/src/__tests__/main.spec.js
index 4373432..72ba2aa 100644
--- a/src/__tests__/main.spec.js
+++ b/src/__tests__/main.spec.js
@@ -1,7 +1,8 @@
+'use strict';
+
 import React from 'react';
 import ReactDOM from 'react-dom';
-import LinkedStateMixin from 'react-addons-linked-state-mixin';
-import {expect} from 'chai';
+import { expect } from 'chai';
 import TU from 'react-addons-test-utils';
 
 import Pikaday from '../Pikaday';
@@ -17,21 +18,25 @@ describe('Pikaday', () => {
   describe('updating the date in Pikaday calls handleChange', () => {
 
     it('works manually', function() {
-      var Form = React.createClass({
-        getInitialState: function() {
-          return { date: null };
-        },
+      class Form extends React.Component {
+        constructor() {
+          super();
+          this.state = {
+            date: null,
+          };
+          this.handleChange = this.handleChange.bind(this);
+        }
 
-        handleChange: function(date) {
-          this.setState({ date: date });
-        },
+        handleChange(date) {
+          this.setState({ date });
+        }
 
-        render: function() {
+        render() {
           return (
             <Pikaday ref="pikaday" value={this.state.date} onChange={this.handleChange} />
-          );
+          )
         }
-      });
+      }
 
       var component = render(<Form />);
       var pikaday = component.refs.pikaday._picker;
@@ -40,20 +45,30 @@ describe('Pikaday', () => {
       expect(component.state.date).to.be.eql(new Date(2014, 0, 1));
     });
 
-    it('works with LinkedStateMixin', function() {
-      var Form = React.createClass({
-        mixins: [ LinkedStateMixin ],
+    it('works with two-way binding', function() {
+      class Form extends React.Component {
+        constructor() {
+          super();
+          this.state = {
+            date: null,
+          };
+          this.handleChange = this.handleChange.bind(this);
+        }
 
-        getInitialState: function() {
-          return { date: null };
-        },
+        handleChange(date) {
+          this.setState({ date });
+        }
 
-        render: function() {
+        render() {
+          const valueLink = {
+            value: this.state.date,
+            requestChange: this.handleChange,
+          };
           return (
-            <Pikaday ref="pikaday" valueLink={this.linkState('date')} />
+            <Pikaday ref="pikaday" valueLink={valueLink} />
           );
         }
-      });
+      }
 
       var component = render(<Form />);
       var pikaday = component.refs.pikaday._picker;
@@ -67,21 +82,25 @@ describe('Pikaday', () => {
   describe('setting the passed-in value sets the rendered date', () => {
 
     it('works manually', () => {
-      var Form = React.createClass({
-        getInitialState: function() {
-          return { date: new Date(2014, 0, 1) };
-        },
+      class Form extends React.Component {
+        constructor() {
+          super();
+          this.state = {
+            date: new Date(2014, 0, 1),
+          };
+          this.handleChange = this.handleChange.bind(this);
+        }
 
-        handleChange: function(date) {
-          this.setState({ date: date });
-        },
+        handleChange(date) {
+          this.setState({ date });
+        }
 
-        render: function() {
+        render() {
           return (
             <Pikaday ref="pikaday" value={this.state.date} onChange={this.handleChange} />
           );
         }
-      });
+      }
 
       var component = render(<Form />);
 
@@ -89,20 +108,30 @@ describe('Pikaday', () => {
       expect(input.value).to.be.eql('2014-01-01');
     });
 
-    it('works with LinkedStateMixin', function() {
-      var Form = React.createClass({
-        mixins: [ LinkedStateMixin ],
+    it('works with two-way binding', function() {
+      class Form extends React.Component {
+        constructor() {
+          super();
+          this.state = {
+            date: new Date(2014, 0, 1),
+          };
+          this.handleChange = this.handleChange.bind(this);
+        }
 
-        getInitialState: function() {
-          return { date: new Date(2014, 0, 1) };
-        },
+        handleChange(date) {
+          this.setState({ date });
+        }
 
-        render: function() {
+        render() {
+          const valueLink = {
+            value: this.state.date,
+            requestChange: this.handleChange,
+          };
           return (
-            <Pikaday ref="pikaday" valueLink={this.linkState('date')} />
+            <Pikaday ref="pikaday" valueLink={valueLink} />
           );
         }
-      });
+      }
 
       var component = render(<Form />);
 
@@ -113,18 +142,28 @@ describe('Pikaday', () => {
   });
 
   describe('clearing the value', () => {
-    it('works with LinkedStateMixin', function () {
-      var Form = React.createClass({
-        mixins: [ LinkedStateMixin ],
+    it('works with two-way binding', function () {
+      class Form extends React.Component {
+        constructor() {
+          super();
+          this.state = {
+            date: new Date(2014, 0, 1),
+          };
+          this.handleChange = this.handleChange.bind(this);
+        }
 
-        getInitialState: function() {
-          return { date: new Date(2014, 0, 1) };
-        },
+        handleChange(date) {
+          this.setState({ date });
+        }
 
-        render: function() {
+        render() {
+          const valueLink = {
+            value: this.state.date,
+            requestChange: this.handleChange,
+          };
           return (
             <div>
-              <Pikaday ref="pikaday" valueLink={this.linkState('date')} />
+              <Pikaday ref="pikaday" valueLink={valueLink} />
               <button ref="clearBtn"
                 onClick={() => this.setState({ date: null })}>
                 Clear
@@ -132,7 +171,7 @@ describe('Pikaday', () => {
             </div>
           );
         }
-      });
+      }
 
       var component = render(<Form />);
 
@@ -149,13 +188,13 @@ describe('Pikaday', () => {
     it('passes options to pikaday plugin', function() {
       var minDate = new Date(2014, 0, 1);
       let result;
-      var Form = React.createClass({
-        render: function() {
+      class Form extends React.Component {
+        render() {
           return (
             <Pikaday ref={({ _picker }) => result = _picker._o.minDate } initialOptions={{ minDate }}/>
           );
         }
-      });
+      }
 
       TU.renderIntoDocument(<Form />);