react-day-picker - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

dist/DayPicker.js

@@ -35,11 +35,4 @@ "use strict";
 
-  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
-    if (!this.state.monthDidChange) this.setState({ month: nextProps.initialMonth });
-  },
-
   getInitialState: function getInitialState() {
-    return {
-      month: this.props.initialMonth.clone(),
-      monthDidChange: false
-    };
+    return { month: this.props.initialMonth.clone() };
   },
@@ -69,3 +62,3 @@
     var nextMonth = month.clone().add(1, "month");
-    this.setState({ month: nextMonth, monthDidChange: true }, function () {
+    this.setState({ month: nextMonth }, function () {
       _this.props.onNextMonthClick && _this.props.onNextMonthClick(_this.state.month);
@@ -81,3 +74,3 @@ });
     var prevMonth = month.clone().subtract(1, "month");
-    this.setState({ month: prevMonth, monthDidChange: true }, function () {
+    this.setState({ month: prevMonth }, function () {
       _this.props.onPrevMonthClick && _this.props.onPrevMonthClick(_this.state.month);
@@ -98,2 +91,6 @@ });
 
+  showMonth: function showMonth(month) {
+    this.setState({ month: month });
+  },
+
   render: function render() {
@@ -100,0 +97,0 @@ var month = this.state.month;

example/src/jsx/Page.jsx

@@ -1,2 +0,2 @@
-import React from 'react/addons';
+import React from 'react';
 import DayPicker from '../../../src/DayPicker.js';
@@ -19,4 +19,2 @@ import moment from 'moment';
 const Page = React.createClass({
-
-  mixins: [React.addons.LinkedStateMixin],
   
@@ -28,6 +26,10 @@ getInitialState() {
   handleInputFocus(e) {
-    // bring back the calendar to the current input value
-    this.setState({ value: e.target.value });
+    this.showMonthForCurrentValue();
   },
 
+  handleInputChange(e) {
+    const value = e.target.value;
+    this.setState({value: value}, this.showMonthForCurrentValue);
+  },
+
   handleDayTouchTap(day, modifiers, e) {
@@ -38,2 +40,9 @@ if (modifiers.indexOf('disabled') === -1)
 
+  showMonthForCurrentValue() {
+    const day = valueToDate(this.state.value);
+    if (!day) return;
+    // if the current state is a valid day, show its month on the calendar
+    this.refs.daypicker.showMonth(day.startOf('month'));
+  },
+
   getModifiers() {
@@ -61,3 +70,3 @@ var modifiers = {
   render() {
-
+    const { value } = this.state;
     return (
@@ -72,10 +81,13 @@ <div>
 
-        <input type="text" ref="input"
+        <input 
+          type="text"
+          value={value}
           placeholder="YYYY-MM-DD" 
-          valueLink={this.linkState('value')}
+          onChange={this.handleInputChange}
           onFocus={this.handleInputFocus} />
        
         <DayPicker 
+          ref="daypicker"
           enableOutsideDays={true}
-          initialMonth={ valueToDate(this.state.value) || moment() } 
+          initialMonth={ valueToDate(value) || moment() } 
           modifiers={ this.getModifiers() } 
@@ -82,0 +94,0 @@ onDayTouchTap={this.handleDayTouchTap} />

package.json

 {
   "name": "react-day-picker",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "Minimalistic date picker component for React and momentjs.",
@@ -5,0 +5,0 @@ "main": "./dist/DayPicker.js",

README.md

@@ -7,3 +7,3 @@ # react-day-picker
 
-Minimalistic date picker built for [React](facebook.github.io/react/) and [moment.js](http://www.momentjs.com). See a [demo](http://www.gpbl.org/react-day-picker/).
+Simple date picker built for [React](facebook.github.io/react/) and [moment.js](http://www.momentjs.com). See a [demo](http://www.gpbl.org/react-day-picker/).
 
@@ -83,2 +83,19 @@
 
+
+### Props 
+
+```js
+<DayPicker 
+  initialMonth={Object}
+  enableOutsideDays={Boolean}
+  modifiers={Object}
+  onDayClick={Function}
+  onDayTouchTap={Function}
+  onMouseEnter={Function}
+  onDayMouseLeave={Function}
+  onPrevMonthClick={Function}
+  onNextMonthClick={Function}
+/>
+```
+
 #### initialMonth `moment object`
@@ -110,4 +127,2 @@
 
-### Events handlers 
-
 #### onDayClick `function(day, modifiers, event)`
@@ -133,1 +148,8 @@ #### onDayTouchTap `function(day, modifiers, event)`
 Use this attribute to add an handler when the user switch to the previous/next month.
+
+
+### Methods
+
+#### `showMonth(month)`
+
+Show `month` (Moment object).

src/DayPicker.js

@@ -28,12 +28,4 @@ import React from 'react';
 
-  componentWillReceiveProps(nextProps) {
-    if (!this.state.monthDidChange)
-      this.setState({ month: nextProps.initialMonth });
-  },
-  
   getInitialState() {
-    return {
-      month: this.props.initialMonth.clone(),
-      monthDidChange: false
-    };
+    return { month: this.props.initialMonth.clone() };
   },
@@ -60,3 +52,3 @@
     const nextMonth = month.clone().add(1, 'month');
-    this.setState({ month: nextMonth, monthDidChange: true }, () => {
+    this.setState({ month: nextMonth }, () => {
       this.props.onNextMonthClick 
@@ -70,3 +62,3 @@ && this.props.onNextMonthClick(this.state.month);
     const prevMonth = month.clone().subtract(1, 'month');
-    this.setState({ month: prevMonth, monthDidChange: true }, () => {
+    this.setState({ month: prevMonth }, () => {
       this.props.onPrevMonthClick 
@@ -88,2 +80,6 @@ && this.props.onPrevMonthClick(this.state.month);
 
+  showMonth(month) {
+    this.setState({month: month});
+  },
+
   render() {
@@ -90,0 +86,0 @@ const { month } = this.state;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

410450

increased by0.08%

Lines of code

1772

increased by0.28%

Number of lines in readme file

151

increased by16.15%

No dependency changes