Fix for warnings in React 15.2 (fix #190)

examples/package.json

@@ -39,9 +39,9 @@
     "file-loader": "^0.8.4",
     "history": "3.0.0",
     "raw-loader": "^0.5.1",
-    "react": "15.1.0",
+    "react": "15.2.0",
     "react-day-picker": "../",
-    "react-dom": "15.1.0",
+    "react-dom": "15.2.0",
     "style-loader": "0.13.1",
     "url-loader": "^0.5.6",
     "webpack": "1.13.1"

package.json

@@ -77,9 +77,9 @@
     "mocha": "2.5.3",
     "moment": "2.13.0",
     "postcss-cli": "2.5.2",
-    "react": "15.1.0",
-    "react-addons-test-utils": "15.1.0",
-    "react-dom": "15.1.0",
+    "react": "15.2.0",
+    "react-addons-test-utils": "15.2.0",
+    "react-dom": "15.2.0",
     "react-hot-loader": "1.3.0",
     "rimraf": "2.5.2",
     "sinon": "1.17.4",

src/DayPicker.js

@@ -53,6 +53,7 @@ export default class DayPicker extends Component {
     captionElement: PropTypes.element,
 
     dir: PropTypes.string,
+    className: PropTypes.string,
     tabIndex: PropTypes.number,
 
   };
@@ -446,27 +447,23 @@ export default class DayPicker extends Component {
   }
 
   render() {
-    const {
-      locale,
-      canChangeMonth,
-      onDayClick,
-    ...attributes } = this.props;
-    let className = `DayPicker DayPicker--${locale}`;
+    const customProps = Helpers.getCustomProps(this.props, DayPicker.propTypes);
+    let className = `DayPicker DayPicker--${this.props.locale}`;
 
-    if (!onDayClick) {
+    if (!this.props.onDayClick) {
       className = `${className} DayPicker--interactionDisabled`;
     }
-    if (attributes.className) {
-      className = `${className} ${attributes.className}`;
+    if (this.props.className) {
+      className = `${className} ${this.props.className}`;
     }
 
     return (
       <div
-        {...attributes}
+        {...customProps}
         className={className}
         ref="dayPicker"
         role="application"
-        tabIndex={canChangeMonth && attributes.tabIndex}
+        tabIndex={this.props.canChangeMonth && this.props.tabIndex}
         onKeyDown={this.handleKeyDown}
       >
         {this.renderNavbar()}

src/Helpers.js

@@ -7,6 +7,16 @@ export function cancelEvent(e) {
   e.stopPropagation();
 }
 
+export function getCustomProps(props, propTypes) {
+  const customProps = {};
+  Object.keys(props)
+      .filter(propName => !propTypes.hasOwnProperty(propName))
+      .forEach(propName => {
+        customProps[propName] = props[propName];
+      });
+  return customProps;
+}
+
 export function getFirstDayOfMonth(d) {
   return new Date(d.getFullYear(), d.getMonth(), 1, 12);
 }

test/DayPicker.js

@@ -102,9 +102,9 @@ describe('<DayPicker />', () => {
       expect(wrapper.find('.DayPicker-Month')).to.have.length(3);
     });
     it('should render a custom caption element', () => {
-      const caption = <p>boo</p>;
-      const wrapper = mount(<DayPicker captionElement={caption} />);
-      expect(wrapper.containsMatchingElement(caption)).to.be.true;
+      const Caption = () => <p>boo</p>;
+      const wrapper = mount(<DayPicker captionElement={<Caption />} />);
+      expect(wrapper.containsMatchingElement(<Caption />)).to.be.true;
     });
     it('should render a custom navbar element', () => {
       const CustomNavbar = ({ className }) => <div className={className}>Navbar</div>;

test/Helpers.js

@@ -3,6 +3,19 @@ import { expect } from 'chai';
 import * as Helpers from '../src/Helpers';
 
 describe('Helpers', () => {
+  describe('getCustomProps', () => {
+    it('should filter props existing in the given propTypes', () => {
+      const props = {
+        foo: 1,
+        bar: 2,
+      };
+      const propTypes = {
+        bar: 'thing',
+      };
+      expect(Helpers.getCustomProps(props, propTypes)).to.eql({ foo: 1 });
+    });
+  });
+
   describe('getDaysInMonth', () => {
     it('get the correct number of days', () => {
       const date = new Date(2015, 1, 10);