react-day-picker - npm Package Compare versions

Comparing version 0.3.4 to 0.4.0

dist/DayPicker.js

@@ -30,57 +30,59 @@ "use strict";
 
-    onNextMonthTouchTap: React.PropTypes.func,
-    onPrevMonthTouchTap: React.PropTypes.func
+    onNextMonthClick: React.PropTypes.func,
+    onPrevMonthClick: React.PropTypes.func
 
   },
 
-  getDefaultProps: function () {
+  getDefaultProps: function getDefaultProps() {
     return { initialMonth: moment(), enableOutsideDays: false };
   },
 
-  componentWillReceiveProps: function (nextProps) {
+  componentWillReceiveProps: function componentWillReceiveProps(nextProps) {
     this.setState({ month: nextProps.initialMonth });
   },
 
-  getInitialState: function () {
+  getInitialState: function getInitialState() {
     return { month: this.props.initialMonth.clone() };
   },
 
-  handleDayTouchTap: function (day, modifiers, e) {
+  handleDayTouchTap: function handleDayTouchTap(day, modifiers, e) {
     this.props.onDayTouchTap && this.props.onDayTouchTap(day, modifiers, e);
   },
 
-  handleDayClick: function (day, modifiers, e) {
+  handleDayClick: function handleDayClick(day, modifiers, e) {
     this.props.onDayClick && this.props.onDayClick(day, modifiers, e);
   },
 
-  handleDayMouseEnter: function (day, modifiers, e) {
+  handleDayMouseEnter: function handleDayMouseEnter(day, modifiers, e) {
     this.props.onDayMouseEnter && this.props.onDayMouseEnter(day, modifiers, e);
   },
 
-  handleDayMouseLeave: function (day, modifiers, e) {
+  handleDayMouseLeave: function handleDayMouseLeave(day, modifiers, e) {
     this.props.onDayMouseLeave && this.props.onDayMouseLeave(day, modifiers, e);
   },
 
-  handleNextTouchTap: function (e) {
+  handleNextMonthClick: function handleNextMonthClick(e) {
     var _this = this;
-    this.setState({ month: this.state.month.clone().add(1, "month") }, function () {
-      _this.props.onNextMonthTouchTap && _this.props.onNextMonthTouchTap(_this.state.month);
+    var month = this.state.month;
+    var nextMonth = month.clone().add(1, "month");
+    this.setState({ month: nextMonth }, function () {
+      _this.props.onNextMonthClick && _this.props.onNextMonthClick(_this.state.month);
     });
   },
 
-  handlePrevTouchTap: function (e) {
+  handlePrevMonthClick: function handlePrevMonthClick(e) {
     var _this2 = this;
-    this.setState({ month: this.state.month.clone().subtract(1, "month") }, function () {
-      _this2.props.onPrevMonthTouchTap && _this2.props.onPrevMonthTouchTap(_this2.state.month);
+    var month = this.state.month;
+    var prevMonth = month.clone().subtract(1, "month");
+    this.setState({ month: prevMonth }, function () {
+      _this2.props.onPrevMonthClick && _this2.props.onPrevMonthClick(_this2.state.month);
     });
   },
 
-  getModifiersForDay: function (day) {
+  getModifiersForDay: function getModifiersForDay(day) {
+    var modifiers = this.props.modifiers;
     var dayModifiers = [];
-    if (this.props.modifiers) {
-      var modifiers = this.props.modifiers;
-      for (var modifier in modifiers) {
-        var func = modifiers[modifier];
-        if (func(day)) dayModifiers.push(modifier);
-      }
+    if (modifiers) for (var modifier in modifiers) {
+      var func = modifiers[modifier];
+      if (func(day)) dayModifiers.push(modifier);
     }
@@ -90,39 +92,54 @@ return dayModifiers;
 
-  render: function () {
-    return React.createElement("table", {
-      className: "daypicker"
-    }, React.createElement("caption", {
-      className: "daypicker__caption"
-    }, this.renderNavButton("left"), this.state.month.format("MMMM YYYY"), this.renderNavButton("right")), React.createElement("thead", null, this.renderWeekHeader()), React.createElement("tbody", null, this.renderWeeks()));
+  render: function render() {
+    var month = this.state.month;
+    return React.createElement(
+      "table",
+      { className: "daypicker" },
+      React.createElement(
+        "caption",
+        { className: "daypicker__caption" },
+        this.renderNavButton("left"),
+        month.format("MMMM YYYY"),
+        this.renderNavButton("right")
+      ),
+      React.createElement(
+        "thead",
+        null,
+        this.renderWeekHeader()
+      ),
+      React.createElement(
+        "tbody",
+        null,
+        this.renderWeeks()
+      )
+    );
   },
 
-  renderNavButton: function (position) {
+  renderNavButton: function renderNavButton(position) {
     var className = "daypicker__nav daypicker__nav--" + position;
-    var handler = position === "left" ? this.handlePrevTouchTap : this.handleNextTouchTap;
+    var handler = position === "left" ? this.handlePrevMonthClick : this.handleNextMonthClick;
 
-    return React.createElement("span", {
-      ref: "btn-" + position,
-      className: className,
-      style: { float: position },
-      onTouchTap: handler
-    });
+    return React.createElement("span", { ref: "btn-" + position, className: className,
+      style: { float: position }, onClick: handler });
   },
 
-  renderWeeks: function () {
+  renderWeeks: function renderWeeks() {
     var _this3 = this;
     return weeks(this.state.month).map(function (week, i) {
-      return React.createElement("tr", {
-        key: "w" + i,
-        className: "daypicker__week"
-      }, _this3.renderDays(week));
+      return React.createElement(
+        "tr",
+        { key: i, className: "daypicker__week" },
+        _this3.renderDays(week)
+      );
     });
   },
 
-  renderWeekHeader: function () {
+  renderWeekHeader: function renderWeekHeader() {
     var header = [];
     for (var i = 0; i < 7; i++) {
-      header.push(React.createElement("th", {
-        key: "wh_" + i,
-        className: "daypicker__weekday"
-      }, moment().weekday(i).format("dd")));
+      header.push(React.createElement(
+        "th",
+        { key: i, className: "daypicker__weekday" },
+        moment().weekday(i).format("dd")
+      ));
     }
@@ -132,3 +149,3 @@ return header;
 
-  renderDays: function (week) {
+  renderDays: function renderDays(week) {
     var _this4 = this;
@@ -149,3 +166,4 @@ var firstDay = week[0];
     // days belonging to the next month
-    for (var j = lastDay.weekday() + 1, count = 1; j < 7; j++, count++) {
+    for (var j = lastDay.weekday() + 1,
+        count = 1; j < 7; j++, count++) {
       var nextDay = lastDay.clone().add(count, "day");
@@ -158,13 +176,10 @@ days.push(this.renderDay(nextDay, true));
 
-  renderDay: function (day, outside) {
-    var doy = day.dayOfYear();
-    var key = "d" + doy;
+  renderDay: function renderDay(day, outside) {
+    var key = "" + day.dayOfYear();
     var className = "daypicker__day";
     if (outside) className += " daypicker__day--outside";
 
-    if (outside && !this.props.enableOutsideDays) return React.createElement("td", {
-      className: className,
-      ref: key,
-      key: key
-    });else {
+    if (outside && !this.props.enableOutsideDays) {
+      return React.createElement("td", { className: className, ref: key, key: key });
+    } else {
       var modifiers = this.getModifiersForDay(day);
@@ -174,11 +189,12 @@ className += modifiers.map(function (mod) {
       }).join("");
-      return React.createElement("td", {
-        ref: key,
-        key: key,
-        className: className,
-        onMouseEnter: this.handleDayMouseEnter.bind(this, day, modifiers),
-        onMouseLeave: this.handleDayMouseLeave.bind(this, day, modifiers),
-        onTouchTap: this.handleDayTouchTap.bind(this, day, modifiers),
-        onClick: this.handleDayClick.bind(this, day, modifiers)
-      }, day.format("D"));
+      return React.createElement(
+        "td",
+        { ref: key, key: key,
+          className: className,
+          onMouseEnter: this.handleDayMouseEnter.bind(this, day, modifiers),
+          onMouseLeave: this.handleDayMouseLeave.bind(this, day, modifiers),
+          onTouchTap: this.handleDayTouchTap.bind(this, day, modifiers),
+          onClick: this.handleDayClick.bind(this, day, modifiers) },
+        day.format("D")
+      );
     }
@@ -185,0 +201,0 @@ }

example/src/jsx/Page.jsx

@@ -1,2 +0,2 @@
-import React from 'react';
+import React from 'react/addons';
 import DayPicker from '../../../src/DayPicker.js';
@@ -20,2 +20,4 @@ import moment from 'moment';
 
+  mixins: [React.addons.LinkedStateMixin],
+  
   getInitialState() {
@@ -25,6 +27,2 @@ return { value: dateToValue(moment()) };
 
-  handleInputChange(e) {
-    this.setState({ value: e.target.value });
-  },
-
   handleInputFocus(e) {
@@ -74,4 +72,3 @@ // bring back the calendar to the current input value
           placeholder="YYYY-MM-DD" 
-          value={this.state.value} 
-          onChange={this.handleInputChange} 
+          valueLink={this.linkState('value')}
           onFocus={this.handleInputFocus} />
@@ -78,0 +75,0 @@

package.json

 {
   "name": "react-day-picker",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "description": "Minimalistic date picker component for React and momentjs.",
   "main": "./dist/DayPicker.js",
   "scripts": {
-    "test": "jest",
+    "start": "cd example && webpack-dev-server --colors --progress --display-error-details",
     "build": "cd example && webpack --hot=false --devtool=false --optimize-minimize",
-    "prepublish": "6to5 ./src -d ./dist",
-    "example": "cd example && webpack-dev-server --colors --progress --display-error-details"
+    "prepublish": "6to5 ./src -d ./dist"
   },
@@ -35,11 +34,11 @@ "repository": {
   "devDependencies": {
-    "6to5": "^2.1.0",
+    "6to5": "^2.12.6",
     "6to5-jest": "^1.0.0",
-    "6to5-loader": "^1.0.0",
+    "6to5-loader": "^2.0.0",
     "autoprefixer-loader": "^1.0.0",
-    "css-loader": "^0.9.0",
+    "css-loader": "^0.9.1",
     "jest-cli": "^0.2.1",
     "react-tap-event-plugin": "^0.1.3",
     "sass-loader": "^0.3.1",
-    "style-loader": "^0.8.2",
+    "style-loader": "^0.8.3",
     "url-loader": "^0.5.5",
@@ -59,5 +58,5 @@ "webpack": "^1.4.15",
   "dependencies": {
-    "moment": "^2.8.4",
+    "moment": "^2.9.0",
     "react": "^0.12.2"
   }
 }

README.md

 # react-day-picker
 
-Minimalistic date picker built for [React](facebook.github.io/react/) and [moment.js](http://www.momentjs.com). 
+<p align="center">
+<a href="http://www.gpbl.org/react-day-picker/"><img src="https://cloud.githubusercontent.com/assets/120693/5693331/3aba1d2e-9918-11e4-933e-bf296484017a.png" width="254" /></a>
+</p>
 
+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/).
 
@@ -10,26 +13,17 @@ ```bash
 
-See a [live version](http://www.gpbl.org/react-day-picker/) of the [example app](example), where the the component works together with an `<input>` field. There, the past days are shown as "disabled" and cannot be selected.
+### Use of modifiers
 
-## Modifiers instead of selected days
+This date picker works with modifiers, as in [BEM-like syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/). You set the modifiers as functions returning `true` or `false`. 
 
-This date picker does not have the concept of a *selected date*: instead, you specify custom *day modifiers*. A modifier is a string that classify the aspect (and eventually the behaviour) for each day appearing in the calendar. 
+Modifiers give you a lot of freedom: for example, a `selected` modifier could highlight *a range* of selected days, or a `weekend` modifiers could format the weekend days.
 
-By evaluating a `function(day)` you provide, a modifier is appended for each day to the `daypicker__day` class, using a [BEM-like syntax](http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/). 
+### Styling
 
-For example, a `disabled` modifier (`daypicker__day--disabled`) may make it appearing as grayed-out, or a `selected` (`daypicker__day--selected`) modifier could highlight a range of selected days. 
-
-### Selecting a day 
-
-You are expected to use the `state` of your component: set its state listening to the `onTouchTap/onClick` DayPicker events (see API and example below).
-
-## Styling
-
 You need to setup your own CSS. You can start from [this css](example/src/scss/daypicker.scss) as example.
 
-## Usage example
+## Usage examples
 
 The following component implements the DayPicker and saves the selected day in its own `state`. 
+It also adds the `daypicker__day--today` CSS modifier for today, and a `daypicker__day--selected` CSS modifier to the cell corresponding to the clicked/touched day.
 
-It also adds the `daypicker__day--today` CSS modifier for today, and a `daypicker__day--selected` CSS modifier to the cell corresponding to the selected day.
-
 ```js
@@ -79,3 +73,3 @@
 npm install
-npm run example
+npm start
 ```
@@ -89,8 +83,4 @@
 
-A `moment()` date object with the month to display in the calendar.
+A `moment()` object with the month to display in the calendar.
 
-#### enableOutsideDays `bool`
-
-Show the days outside the shown month.
-
 #### modifiers `Object`
@@ -114,2 +104,8 @@
 
+#### enableOutsideDays `bool`
+
+Show the days outside the shown month.
+
+### Events handlers 
+
 #### onDayClick `function(day, modifiers, event)`
@@ -131,5 +127,5 @@ #### onDayTouchTap `function(day, modifiers, event)`
 
-#### onPrevMonthTouchTap `function(month)`
-#### onNextMonthTouchTap `function(month)`
+#### onPrevMonthClick `function(month)`
+#### onNextMonthClick `function(month)`
 
-Use this attribute to add an handler when the user switch to the previous/next month.
+Use this attribute to add an handler when the user switch to the previous/next month.

src/DayPicker.js

@@ -19,4 +19,4 @@ import React from 'react';
 
-    onNextMonthTouchTap: React.PropTypes.func, 
-    onPrevMonthTouchTap: React.PropTypes.func
+    onNextMonthClick: React.PropTypes.func, 
+    onPrevMonthClick: React.PropTypes.func
   
@@ -53,13 +53,17 @@ },
 
-  handleNextTouchTap(e) {
-    this.setState({ month: this.state.month.clone().add(1, 'month') }, () => {
-      this.props.onNextMonthTouchTap 
-      && this.props.onNextMonthTouchTap(this.state.month);
+  handleNextMonthClick(e) {
+    const { month } = this.state;
+    const nextMonth = month.clone().add(1, 'month');
+    this.setState({ month: nextMonth }, () => {
+      this.props.onNextMonthClick 
+      && this.props.onNextMonthClick(this.state.month);
     });
   },
 
-  handlePrevTouchTap(e) {
-    this.setState({ month: this.state.month.clone().subtract(1, 'month') }, () => {
-      this.props.onPrevMonthTouchTap 
-      && this.props.onPrevMonthTouchTap(this.state.month);
+  handlePrevMonthClick(e) {
+    const { month } = this.state;
+    const prevMonth = month.clone().subtract(1, 'month');
+    this.setState({ month: prevMonth }, () => {
+      this.props.onPrevMonthClick 
+      && this.props.onPrevMonthClick(this.state.month);
     });
@@ -69,10 +73,9 @@ },
   getModifiersForDay(day) {
+    const { modifiers } = this.props;
     var dayModifiers = [];
-    if (this.props.modifiers) {
-      const modifiers = this.props.modifiers;
+    if (modifiers)
       for (let modifier in modifiers) {
-        var func = modifiers[modifier];
+        let func = modifiers[modifier];
         if (func(day)) dayModifiers.push(modifier);
       }
-    }
     return dayModifiers;
@@ -82,2 +85,3 @@ },
   render() {
+    const { month } = this.state;
     return (
@@ -87,3 +91,3 @@ <table className="daypicker">
           { this.renderNavButton('left') }
-          { this.state.month.format('MMMM YYYY') }
+          { month.format('MMMM YYYY') }
           { this.renderNavButton('right') }
@@ -104,7 +108,7 @@ </caption>
     const handler = position === 'left' 
-      ?  this.handlePrevTouchTap 
-      :  this.handleNextTouchTap;
+      ?  this.handlePrevMonthClick 
+      :  this.handleNextMonthClick;
 
     return <span ref={"btn-"+position} className={className} 
-      style={{float: position}} onTouchTap={handler} />;
+      style={{float: position}} onClick={handler} />;
   },
@@ -115,3 +119,3 @@
       return (
-        <tr key={"w" + i} className="daypicker__week">
+        <tr key={i} className="daypicker__week">
           { this.renderDays(week) }
@@ -127,3 +131,3 @@ </tr>
       header.push(
-        <th key={"wh_" + i} className="daypicker__weekday">
+        <th key={i} className="daypicker__weekday">
           { moment().weekday(i).format('dd') }
@@ -158,9 +162,9 @@ </th>
   renderDay(day, outside) {
-    const doy = day.dayOfYear();
-    const key = `d${doy}`;
+    const key = `${day.dayOfYear()}`;
     var className = 'daypicker__day';
     if (outside) className += ' daypicker__day--outside';
 
-    if (outside && !this.props.enableOutsideDays)
+    if (outside && !this.props.enableOutsideDays) {
       return <td className={className} ref={key} key={key} />;
+    }
     else {
@@ -167,0 +171,0 @@ const modifiers = this.getModifiersForDay(day);

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

408279

increased by0.03%

Lines of code

1760

increased by0.98%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Number of lines in readme file

127

decreased by-2.31%

Dependency changes

• Updatedmoment@^2.9.0