data-calendar - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

example/example.jsx

 var React = require('react');
 
-var Month = require('../src/addons').Month;
+var FullCal = React.createFactory(require('./calendars/full-calendar.jsx'));
+var MiniCal = React.createFactory(require('./calendars/mini-calendar.jsx'));
 
-var View = React.createClass({
 
-  _data: {
-    20150304: [{
-      title: 'Do 1',
-      startDate: new Date('Wed Mar 04 2015 20:50:43 GMT+0800 (SGT)'),
-      endDate: new Date('Wed Mar 04 2015 21:50:43 GMT+0800 (SGT)'),
-      description: 'Long Long Description'
-      }, {
-      title: 'Do 1.2',
-      startDate: new Date('Wed Mar 04 2015 22:50:43 GMT+0800 (SGT)'),
-      endDate: new Date('Wed Mar 04 2015 23:50:43 GMT+0800 (SGT)'),
-      description: 'Long Long Description'
-    }],
 
-    20150303: [{
-      title: 'Do 2',
-      startDate: new Date('Tue Mar 03 2015 20:50:43 GMT+0800 (SGT)'),
-      endDate: new Date('Tue Mar 03 2015 21:50:43 GMT+0800 (SGT)'),
-      description: 'Short Short Description'
-    }],
 
-    20150203: [{
-      title: 'Do 3',
-      startDate: new Date('Mon Feb 03 2014 20:50:43 GMT+0800 (SGT)'),
-      endDate: new Date('Mon Feb 03 2014 21:50:43 GMT+0800 (SGT)'),
-      description: '3rd Description'
-    }]
-  },
-
-  _entriesGetter: function(date){
-    return this._data[date];
-  },
-
-  _entryDataGetter: function(entryData){
-    return entryData.title || 'Event';
-  },
-
-  _entryRenderer: function(entryData){
-    return entryData.title || 'Event';
-  },
-
-  render: function() {
-
-    return (
-      <Month
-        year={2015}
-        month={3}
-        entryDataGetter={this._entryDataGetter}
-        entryRenderer={this._entryRenderer}
-        entriesGetter={this._entriesGetter}
-      />
-    );
-  }
-});
-
-
-var ViewHandler = React.createFactory(View);
-
-React.render(
-  new ViewHandler(),
-  document.getElementById('calendar')
-);
+React.render(new FullCal(), document.getElementById('example-full-calendar'));
+React.render(new MiniCal(), document.getElementById('example-mini-calendar'));

package.json

 {
   "name": "data-calendar",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "description": "A React calendar component designed to be flexible in presenting events",
@@ -5,0 +5,0 @@ "main": "src/index.js",

README.md

@@ -20,2 +20,4 @@ # Data Calendar
 
-![month calendar](https://github.com/yeojz/data-calendar/raw/master/example/screenshot/calendar-month.png)
+![mini calendar](https://github.com/yeojz/data-calendar/raw/master/example/screenshot/mini-calendar.png)
+
+![full calendar](https://github.com/yeojz/data-calendar/raw/master/example/screenshot/full-calendar.png)

src/addons/MonthWithControls.jsx

 var React = require('react'),
     moment = require('moment');
 
-var cx = require('../helpers/cx');
+var classNames = require('../helpers/classNames'),
+    mergePropTypes = require('../helpers/mergePropTypes'),
+    objectFilter = require('../helpers/objectFilter');
 
+var monthProps = require('../propTypes/monthProps'),
+    moduleProps = require('../propTypes/monthWithControlsProps');
+
 var Month = require('../core/Month.jsx'),
-    DayNames = require('../core/DayNames.jsx');
+    DaysOfWeek = require('../core/DaysOfWeek.jsx');
 
 var MonthWithControls = React.createClass({
+
   statics: {
@@ -14,37 +20,16 @@ __DataCalendarMonthAddons__: true
 
-  propTypes: {
-    className: React.PropTypes.string,
-    
-    entryDataGetter: React.PropTypes.func,
-    entryRenderer: React.PropTypes.func,
-    entriesGetter: React.PropTypes.func.isRequired,
+  _propTypeKeys: Object.keys(moduleProps),
 
-    year: React.PropTypes.number.isRequired,
-    month: React.PropTypes.number.isRequired,
+  propTypes: mergePropTypes(monthProps, moduleProps),
 
-    showControls: React.PropTypes.bool,
-    showMonthTitle: React.PropTypes.bool,
-
-    dayNameFormat: React.PropTypes.string,
-    monthTitleFormat: React.PropTypes.string,
-
-    btnPrev: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.element
-    ]),
-
-    btnNext: React.PropTypes.oneOfType([
-      React.PropTypes.string,
-      React.PropTypes.element
-    ])
-  },
-
   getDefaultProps: function() {
     return {
-      showControls: true,
-      showMonthTitle: true,
+      controls: true,
+      monthTitle: true,
+
       dayNameFormat: 'short',
-      monthTitleFormat: 'MMMM YYYY',
+
       btnNext: (<button>Next</button>),
-      btnPrev: (<button>Prev</button>)
+      btnPrev: (<button>Prev</button>),
+      btnToday: (<button>Today</button>)
     };
@@ -84,2 +69,3 @@ },
 
+
   /*
@@ -97,23 +83,36 @@ * Render Helpers
 
+  _currMonth: function(){
+    var today = moment();
 
+    this.setState({
+      year: parseInt(today.format('YYYY')),
+      month: parseInt(today.format('MM'))
+    });
+  },
 
 
   /*
-   * Render
-   * *************************************************** */
+   * Gets the title to display
+   */
+  _getMonthTitle: function(){
 
-  render: function() {
+    var contents = '';
 
-    var classes = cx({
-      'data-calendar-addons': true,
-      'data-calendar-addons--month': true
-    }) + ' ' + this.props.className;
+    switch (typeof this.props.monthTitle){
+      case 'boolean':
+        contents = (this.props.monthTitle) ? this.__getDate().format('MMMM YYYY') : '';
+        break;
+      case 'string':
+        contents = this.__getDate().format(this.props.monthTitle);
+        break;
+      case 'function':
+        contents = this.props.monthTitle(this.__getDate());
+        break;
+      // no default
+    }
 
-    var monthTitle = '';
-    var controls = '';
-
-    if (this.props.showMonthTitle){
-      monthTitle = (
+    if (contents !== ''){
+      return (
         <div className='data-calendar-title'>
-          {this.__getDate().format(this.props.monthTitleFormat)}
+          {contents}
         </div>
@@ -123,11 +122,58 @@ );
 
-    if (this.props.showControls){
-      controls = (
+    return '';
+  },
+
+
+  /*
+   * Checks for a renderer and returns the calendar controls
+   */
+  _getControls: function(){
+
+    var controls = this.props.controls;
+
+    if (typeof controls === 'function'){
+      return controls(this._prevMonth, this._nextMonth, this._currMonth);
+    }
+
+    if (typeof controls === 'boolean' && controls){
+      return (
         <div className='data-calendar-controls'>
-          <div className='data-calendar-controls-prev' onClick={this._prevMonth}>{this.props.btnPrev}</div>
-          <div className='data-calendar-controls-next' onClick={this._nextMonth}>{this.props.btnNext}</div>
+          <div className='data-calendar-controls-prev'
+                onClick={this._prevMonth}>
+            {this.props.btnPrev}
+          </div>
+          <div className='data-calendar-controls-today'
+                onClick={this._currMonth}>
+            {this.props.btnToday}
+          </div>
+          <div className='data-calendar-controls-next'
+                onClick={this._nextMonth}>
+            {this.props.btnNext}
+          </div>
         </div>
       );
     }
+  },
 
+
+
+
+  /*
+   * Render
+   * *************************************************** */
+
+  render: function() {
+
+    var monthTitle = this._getMonthTitle();
+    var controls = this._getControls();
+
+    var classes = classNames({
+      'data-calendar-addons': true,
+      'data-calendar-addons--month': true
+    }, this.props.className);
+
+    // Removes all extra props for this module
+    // Remainder will be for <Month />
+    var props = objectFilter(this.props, this._propTypeKeys);
+
     return (
@@ -139,8 +185,6 @@ <div className={classes}>
 
-        <DayNames type={this.props.dayNameFormat} />
+        <DaysOfWeek type={this.props.dayNameFormat} />
+
         <Month
-          entryDataGetter={this.props.entryDataGetter}
-          entryRenderer={this.props.entryRenderer}
-          entriesGetter={this.props.entriesGetter}
-
+          {...props}
           year={this.state.year}
@@ -147,0 +191,0 @@ month={this.state.month}

src/core/Day.jsx

 var React = require('react'),
     moment = require('moment');
 
-var cx = require('../helpers/cx'),
-    invariant = require('../helpers/invariant');
+var children = require('../helpers/children'),
+    classNames = require('../helpers/classNames');
 
-var ReactChildren = React.Children;
+var moduleProps = require('../propTypes/dayProps');
 
 var Day = React.createClass({
+
   statics: {
@@ -14,11 +15,8 @@ __DataCalendarDay__: true
 
-  propTypes: {
-    date: React.PropTypes.string,
-    dateShow: React.PropTypes.bool,
-    dateFormat: React.PropTypes.string
-  },
+  propTypes: moduleProps,
 
   getDefaultProps: function() {
     return {
-      dateShow: false,
+      today: moment().format('YYYYMMDD'),
+      showDate: false,
       dateFormat: 'D'
@@ -43,19 +41,22 @@ };
 
-    var children = [];
+    return children(this.props.children,
+                    '__DataCalendarEntry__',
+                    '<Entry />');
+  },
 
-    ReactChildren.forEach(this.props.children, function(child) {
 
-      if (child == null) {
-        return;
-      }
+  // Checks if date is out of the current stated range
+  _isOutOfMonth: function(){
 
-      invariant(
-        child.type.__DataCalendarEntry__,
-        'child type should be an <Entry />'
-      );
+    // if range not defined
+    if (!this.props.rangeStart || !this.props.rangeEnd){
+      return false;
+    }
 
-      children.push(child);
-    });
+    // Check range
+    if (this.props.date < this.props.rangeStart || this.props.date > this.props.rangeEnd){
+      return true;
+    }
 
-    return children;
+    return false;
   },
@@ -75,5 +76,5 @@
 
-    if (this.props.dateShow) {
+    if (this.props.showDate) {
       header = (
-        <div className='date-calendar-day-header'>
+        <div className='data-calendar-day-header'>
           {this.state.date.format(this.props.dateFormat)}
@@ -84,14 +85,9 @@ </div>
 
-    var outOfMonth = false;
+    var today = (this.state.date.format('YYYYMMDD') === this.props.today);
 
-    if (this.props.rangeStart && this.props.rangeEnd){
-      if (this.props.date < this.props.rangeStart || this.props.date > this.props.rangeEnd){
-        outOfMonth = true;
-      }
-    }
-
-    var classes = cx({
+    var classes = classNames({
       'data-calendar-day': true,
-      'data-calendar-day--outOfMonth': outOfMonth
-    });
+      'data-calendar-day--today': today,
+      'data-calendar-day--outOfMonth': this._isOutOfMonth()
+    }, this.props.className);
 
@@ -98,0 +94,0 @@ return (

src/core/Entry.jsx

 var React = require('react');
 
-var cx = require('../helpers/cx');
+var classNames = require('../helpers/classNames');
 
+var moduleProps = require('../propTypes/entryProps');
+
 var Entry = React.createClass({
+
   statics: {
@@ -10,7 +13,3 @@ __DataCalendarEntry__: true
 
-  propTypes: {
-    data: React.PropTypes.object.isRequired,
-    entryDataGetter: React.PropTypes.func.isRequired,
-    entryRenderer: React.PropTypes.func
-  },
+  propTypes: moduleProps,
 
@@ -58,5 +57,5 @@
 
-    var classes = cx({
+    var classes = classNames({
       'data-calendar-entry': true
-    });
+    }, this.props.className);
 
@@ -63,0 +62,0 @@ var entry = this._getEntryDetails();

src/core/Month.jsx

 var React = require('react'),
     moment = require('moment');
 
-var cx = require('../helpers/cx'),
+var classNames = require('../helpers/classNames'),
     weeksInMonth = require('../helpers/weeksInMonth');
 
+var moduleProps = require('../propTypes/monthProps');
+
 var Day = require('./Day.jsx'),
@@ -17,17 +19,23 @@ Entry = require('./Entry.jsx'),
 
-  propTypes: {
-    className: React.PropTypes.string,
+  propTypes: moduleProps,
 
-    entryDataGetter: React.PropTypes.func,
-    entryRenderer: React.PropTypes.func,
-    entriesGetter: React.PropTypes.func.isRequired,
 
-    year: React.PropTypes.number.isRequired,
-    month: React.PropTypes.number.isRequired
+  getDefaultProps: function() {
+    return {
+      disable: [] 
+    };
   },
 
+  componentWillMount: function() {
+    this.__setStateFromProps(this.props);
+  },
 
 
+  componentWillReceiveProps: function(nextProps) {
+    this.__setStateFromProps(nextProps);
+  },
 
 
+
+
   /*
@@ -37,10 +45,23 @@ * Private Use Only
 
-  __getDate: function(){
-    var date = this.props.year + '' + this.props.month;
+  __setStateFromProps: function(props){
+    var date = this.__getDate(props);
+    var month = this.__getMonthRange(date);
+
+
+    this.setState({
+      mDate: date,
+      numberOfWeeks: weeksInMonth(date),
+      rangeStart: month.start,
+      rangeEnd: month.end
+    });
+  },
+
+
+  __getDate: function(props){
+    var date = props.year + '' + props.month;
     return moment(date, 'YYYYMM');
   },
 
-  __getMonthRange: function(){
-    var date = this.__getDate();
 
+  __getMonthRange: function(date){
     return {
@@ -52,34 +73,53 @@ start: date.format('YYYYMMDD'),
 
+
   __getEntries: function(date){
+
     var entries = [],
-        entryList = this.props.entriesGetter(date);
+        entryList;
 
+    // Check for disable flag
+    if (this.props.disable.indexOf('entry') >= 0){
+      return entries;
+    }
 
-    if (typeof entryList !== 'undefined'){
-      entries = entryList.map(function(entry, i){
-        return (
-          <Entry
-              data={entry}
-              entryDataGetter={this.props.entryDataGetter}
-              entryRenderer={this.props.entryRenderer}
-              key={i} />
-        );
-      }.bind(this));
+    // Check if its a valid function
+    if (typeof this.props.entriesGetter !== 'function'){
+      return entries;
     }
 
+    // Get List of entries
+    entryList = this.props.entriesGetter(date);
+
+    // If not an Array, Exit.
+    if (!(Array.isArray(entryList))){
+      return entries;
+    }
+
+    // Map each entry to the Entry Object
+    entries = entryList.map(function(entry, i){
+      return (
+        <Entry
+            data={entry}
+            entryDataGetter={this.props.entryDataGetter}
+            entryRenderer={this.props.entryRenderer}
+            key={i} />
+      );
+    }.bind(this));
+  
+
     return entries;
   },
 
+
   __getDay: function(date){
 
     var entries = this.__getEntries(date);
-    var month = this.__getMonthRange();
 
     return (
       <Day
+        date={date}
         key={date}
-        date={date}
-        rangeStart={month.start}
-        rangeEnd={month.end}
-        dateShow={true}>
+        rangeStart={this.state.rangeStart}
+        rangeEnd={this.state.rangeEnd}
+        showDate={true}>
 
@@ -92,2 +132,3 @@ {entries}
 
+
   __getWeek: function(startDate, idx){
@@ -100,2 +141,3 @@
 
+    // Loop through 1 Week
     for (var i = 0; i < 7; i++){
@@ -121,10 +163,8 @@ var date = startDate.add(1, 'day').format('YYYYMMDD');
   _getWeeks: function(){
-    var date = this.__getDate();
     var weeks = [];
-    var numberOfWeeks = weeksInMonth(date);
 
-    for (var i = 0; i < numberOfWeeks; i++){
+    for (var i = 0; i < this.state.numberOfWeeks; i++){
 
       // Create New Instances
-      var m = this.__getDate(),
+      var m = this.__getDate(this.props),
           start = i * 7;
@@ -152,6 +192,6 @@
 
-    var classes = cx({
+    var classes = classNames({
       'data-calendar': true,
       'data-calendar--month': true
-    }) + ' ' + this.props.className;
+    }, this.props.className);
 
@@ -158,0 +198,0 @@ return (

src/core/Week.jsx

 var React = require('react');
 
-var cx = require('../helpers/cx'),
-    invariant = require('../helpers/invariant');
+var children = require('../helpers/children'),
+    classNames = require('../helpers/classNames');
 
-var ReactChildren = React.Children;
-
 var Week = React.createClass({
@@ -12,3 +10,2 @@
 
-
   /*
@@ -20,19 +17,5 @@ * Render Helpers
 
-    var children = [];
-
-    ReactChildren.forEach(this.props.children, function(child) {
-
-      if (child == null) {
-        return;
-      }
-
-      invariant(
-        child.type.__DataCalendarDay__,
-        'child type should be <Day />'
-      );
-
-      children.push(child);
-    });
-
-    return children;
+    return children(this.props.children,
+                    '__DataCalendarDay__',
+                    '<Day />');
   },
@@ -51,5 +34,5 @@
 
-    var classes = cx({
+    var classes = classNames({
       'data-calendar-week': true
-    });
+    }, this.props.className);
 
@@ -56,0 +39,0 @@ return (

src/helpers/weeksInMonth.js

@@ -1,17 +0,18 @@
-
 /*
- *  Calculates the Number of Weeks in a Month
+ * Calculates the Number of Weeks in a Month
  *
- *  @mdate Moment Date Object
+ * @param object    moment.js Date object
+ * @return integer  number of weeks in the month
  */
-module.exports = function(mdate){
+
+module.exports = function(mDate){
   var numDaysInWeek = 7;
 
   // First Integer Day (Sun/Mon/...) of the Month
-  var offset = parseInt(mdate.weekday());
+  var offset = parseInt(mDate.weekday());
 
   // Get the last day of the month
-  var lastDay = parseInt(mdate.endOf('month').format('D'));
+  var lastDay = parseInt(mDate.endOf('month').format('D'));
 
-  return Math.ceil( (lastDay + offset) / numDaysInWeek);
+  return Math.ceil((lastDay + offset) / numDaysInWeek);
 };

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

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

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

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 2 instances in 1 package

Improved metrics

Number of package files

41

increased by46.43%

Number of lines in readme file

22

increased by10%

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

95165

decreased by-87.05%

Lines of code

863

decreased by-95.68%

No dependency changes