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 (
@@ -61,7 +60,7 @@ var MyComponent = React.createClass({
);
}
-});
+}
```
## 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 (
);
}
-});
+}
+
+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 (
- );
+ )
}
- });
+ }
var component = render();
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 (
-
+
);
}
- });
+ }
var component = render();
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 (
);
}
- });
+ }
var component = render();
@@ -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 (
-
+
);
}
- });
+ }
var component = render();
@@ -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 (
-
+
);
}
- });
+ }
var component = render();
@@ -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 (
result = _picker._o.minDate } initialOptions={{ minDate }}/>
);
}
- });
+ }
TU.renderIntoDocument();