react-calendar - npm Package Compare versions

Comparing version 0.1.0 to 0.2.0

package.json

 {
   "name": "react-calendar",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "author": "Mikhail <[e-mail]> Novikov",
@@ -18,10 +18,12 @@ "description": "Calendar component for ReactJS",
   "dependencies": {
-    "lodash": "^2.4.1",
-    "moment": "^2.8.3",
-    "react": "^0.11.2"
+    "lodash": "^2.4.1"
   },
+  "peerDependencies": {
+    "react": "^0.11.2",
+    "moment": "^2.8.3"
+  },
   "devDependencies": {
     "bootstrap": "^3.2.0",
     "css-loader": "^0.9.0",
-     "file-loader": "^0.7.2",
+    "file-loader": "^0.7.2",
     "jsx-loader": "^0.11.0",
@@ -33,11 +35,15 @@ "less": "^1.7.5",
     "webpack": "^1.4.3",
-    "webpack-dev-server": "^1.6.5"
+    "webpack-dev-server": "^1.6.5",
+    "webpack-traceur-loader": "^0.3.0"
   },
   "main": "./dist/react-calendar.js",
   "scripts": {
+    "clean": "rm -r build && rm -r dist",
     "prepublish": "webpack",
     "umd": "webpack --config webpack.config.umd.js",
     "umd-min": "webpack --config webpack.config.min.js",
-    "start": "webpack-dev-server -d --entry ./index.js --progress --colors --inline --config webpack.config.umd.js"
+    "demo": "webpack --config webpack.config.umd.js --entry ./demo.js",
+    "start": "webpack-dev-server -d --entry ./demo.js --progress --colors --inline --config webpack.config.umd.js",
+    "gh-pages": "./scripts/gh-pages.sh"
   }
 }

README.md

@@ -19,3 +19,3 @@ react-calendar
 
-One year calendar:
+One year calendar ([Demo](http://freiksenet.github.io/react-calendar/)):
 
@@ -41,2 +41,21 @@ ```html
 
+If component is passed without date it modifies *all* components of this type in
+the tree. Useful, for example, for passing callbacks.
+
+```html
+<Calendar firstMonth={1}
+          date={moment("2014-01-01")}
+          weekNumbers={true}
+          size={12}>
+  <Day onClick={handleClick} />
+</Calendar>
+```
+
+Events
+------
+
+All mouse and touch events are supported on all components with react style
+onCamelCase props (eg. onClick). Event handlers recieves three arguments -
+name of the component, date in moment.js format and the original react event.
+
 Styling
@@ -47,1 +66,14 @@ -------
 in less/bootstrap-theme.less.
+
+TODO
+----
+
+* Merging of modifiers and classe
+* Docs
+* Calendar should be able to page
+* A component for Year - Calendar is supposed to be a 'controller' component for
+  pageable stuff
+* A component that is on lower level that Day - for events.
+* Utils to create range of components for modifying multiple components easier
+* An example datepicker component using react-calendar
+* Tests

src/Calendar.js

@@ -106,8 +106,11 @@ /** @jsx React.DOM */
       );
-      return (
-        <div className={classes()}>
-          {this.makeHeader(classes)}
-          {months}
-        </div>
-      );
+
+      var props = _.assign({
+        className: classes()
+      }, this.getEventHandlers());
+
+      return React.DOM.div(props, [
+        this.makeHeader(classes),
+        months
+      ]);
     });
@@ -114,0 +117,0 @@ }

src/CalendarBaseMixin.js

@@ -28,3 +28,6 @@ "use strict";
 
-    var result = {};
+    var result = {
+      thisGlobals: [],
+      nextGlobals: []
+    };
     var dateString = dateToComponentMap[comp.displayName];
@@ -39,3 +42,7 @@ children.forEach((child) => {
         if (child instanceof comp) {
-          existing.thisLevel.push(child);
+          if (child.props.date === 'all') {
+
+          } else {
+            existing.thisLevel.push(child);
+          }
         } else {
@@ -45,2 +52,6 @@ existing.nextLevels.push(child);
         result[childDate] = existing;
+      } else if (child instanceof comp){
+        result.thisGlobals.push(child);
+      } else {
+        result.nextGlobals.push(child);
       }
@@ -53,26 +64,24 @@ });
   makeDirectChild: function (childrenMap, comp, date) {
+    var key = date.format(dateToComponentMap[comp.displayName]);
     var props = {
-      key: date.format(),
+      key: key,
       date: date
     };
-    var children = [];
 
-    var thisChildren = childrenMap[
-      date.format(dateToComponentMap[comp.displayName])
-    ];
+    var thisChildren = childrenMap[key] || {};
+    var thisLevel = childrenMap.thisGlobals.concat(
+      thisChildren.thisLevel || []
+    );
+    var children = childrenMap.nextGlobals.concat(
+      thisChildren.nextLevels || []
+    );
 
-    if (thisChildren) {
-      children = thisChildren.nextLevels.slice();
-      if (thisChildren.thisLevel) {
-        thisChildren.thisLevel.forEach((child) => {
-          React.Children.forEach(child.props.children, (childChild) => {
-            children.push(childChild);
-          });
-          props = _.assign({}, child.props, props);
-        });
-      }
-    }
+    thisLevel.forEach((child) => {
+      React.Children.forEach(child.props.children, (childChild) => {
+        children.push(childChild);
+      });
+      props = _.assign({}, child.props, props);
+    });
 
     return comp(props, children);
-
   }
@@ -79,0 +88,0 @@ };

src/Day.js

 /** @jsx React.DOM */
 "use strict";
 
+var _ = require('lodash');
 var React = require('react');
@@ -28,3 +29,4 @@
     return (
-      <span className={classes()}>
+      <span key="body"
+            className={classes()}>
         {this.props.date.format(this.getPropOrCtx('dayFormat'))}
@@ -38,3 +40,4 @@ </span>
       return (
-        <div className={classes()}>
+        <div key="agenda"
+             className={classes()}>
         </div>
@@ -54,9 +57,11 @@ );
 
-      return (
-        <div className={classes()}>
-          {this.makeHeader(classes.descendant('header'))}
-          {this.makeBody(classes.descendant('body'))}
-          {this.makeAgenda(classes.descendant('agenda'))}
-        </div>
-      );
+      var props = _.assign({
+        className: classes()
+      }, this.getEventHandlers());
+
+      return React.DOM.div(props, [
+        this.makeHeader(classes.descendant('header')),
+        this.makeBody(classes.descendant('body')),
+        this.makeAgenda(classes.descendant('agenda'))
+      ]);
     });
@@ -63,0 +68,0 @@ }

src/Month.js

@@ -83,9 +83,11 @@ /** @jsx React.DOM */
 
-      return (
-        <div className={classes()}>
-          {this.makeHeader(classes.descendant('header'))}
-          {this.makeWeekHeader(classes.descendant('weekdays'))}
-          {weeks}
-        </div>
-      );
+      var props = _.assign({
+        className: classes()
+      }, this.getEventHandlers());
+
+      return React.DOM.div(props, [
+        this.makeHeader(classes.descendant('header')),
+        this.makeWeekHeader(classes.descendant('weekdays')),
+        weeks
+      ]);
     });
@@ -92,0 +94,0 @@ }

src/propTypes.js

@@ -123,2 +123,16 @@ "use strict";
 
+var eventList = [
+  'onClick', 'onDoubleClick', 'onDrag', 'onDragEnd', 'onDragEnter',
+  'onDragExit', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop',
+  'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut',
+  'onMouseOver', 'onMouseUp', 'onTouchCancel', 'onTouchEnd', 'onTouchMove',
+  'onTouchStart'
+];
+
+['Day', 'Week', 'Month', 'Year'].forEach(function (item) {
+  eventList.forEach(function (event) {
+    module.exports.types[item][event] = React.PropTypes.func;
+  });
+});
+
 module.exports.Mixin = function (addContext, ...types) {
@@ -155,3 +169,16 @@ types.unshift('Generic');
   };
+
+  result.getEventHandlers = function () {
+    return _.mapValues(_.pick(this.props, (value, key) => {
+      return _.contains(eventList, key);
+    }), (cb) => {
+      return cb.bind(
+        this,
+        this.constructor.displayName,
+        this.props.date.clone()
+      );
+    });
+  };
+
   return result;
 };

src/Week.js

 /** @jsx React.DOM */
 "use strict";
 
+var _ = require('lodash');
 var React = require('react');
@@ -47,10 +48,12 @@
 
-      return (
-        <div className={classes()}>
-          {this.makeWeekNumber(classes)}
-          <div className={classes.descendant('days')}>
-            {days}
-          </div>
+      var props = _.assign({
+        className: classes()
+      }, this.getEventHandlers());
+
+      return React.DOM.div(props, [
+        this.makeWeekNumber(classes),
+        <div key="days" className={classes.descendant('days')}>
+          {days}
         </div>
-      );
+      ]);
     });
@@ -57,0 +60,0 @@ }

webpack.config.js

@@ -7,3 +7,3 @@ module.exports = {
      library: 'ReactCalendar',
-     libraryTarget: 'commonjs2'
+     libraryTarget: 'umd'
   },
@@ -14,3 +14,3 @@ module: {
       // For sample theme
-      { test: /\.less$/, loader: 'style-loader!css-loader!less-loader'},
+      { test: /\.less$/, loader: 'file-loader?name=[name].css!less-loader'},
       { test: /\.woff$/,   loader: "url-loader?limit=10000&minetype=application/font-woff" },
@@ -23,5 +23,12 @@ { test: /\.ttf$/,    loader: "file-loader" },
   externals: {
-    "react": "react"
+    react: {
+      root: "React",
+      commonjs: "react",
+      commonjs2: "react",
+      amd: "react"
+    },
+    lodash: "lodash",
+    moment: "moment"
   },
   plugins: []
 };

webpack.config.umd.js

@@ -7,4 +7,10 @@ var webpack = require("webpack");
 exports.output.path = 'build';
-exports.output.libraryTarget = 'umd';
-exports.externals = Object.create(exports.externals);
-exports.externals['react'] = 'React';
+exports.externals = {
+  react: {
+    root: "React",
+    commonjs: "react",
+    commonjs2: "react",
+    amd: "react"
+  },
+  moment: "moment"
+};

New alerts

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

Fixed alerts

Uses eval

Supply chain risk

Package uses eval() which is a dangerous function. This prevents the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Number of package files

21

increased by5%

Number of lines in readme file

77

increased by71.11%

Number of medium supply chain risk alerts

1

decreased by-50%

Worsened metrics

Total package byte prevSize

52814

decreased by-92.43%

Dev dependency count

11

increased by10%

Lines of code

1572

decreased by-91.15%

Dependency changes

• - Removedmoment@^2.8.3

• - Removedreact@^0.11.2