react-datetime - npm Package Compare versions

Comparing version 1.3.0 to 2.0.0

CHANGELOG.md

 Changelog
 =========
+## 2.0.0
+* DOM classes are now prefixed with `rdt`.
+* A modified version of OnClickOutside is now included in the code to handle react 0.13 and 0.14 versions.
+* Updated dependencies.
 
@@ -4,0 +8,0 @@ ## 1.3.0

DateTime.js

@@ -15,3 +15,3 @@ 'use strict';
 	mixins: [
-		require('react-onclickoutside')
+		require('./src/onClickOutside')
 	],
@@ -229,5 +229,5 @@ viewComponents: {
 
-		if(target.className.indexOf("new") != -1)
+		if(target.className.indexOf("rdtNew") != -1)
 			modifier = 1;
-		else if(target.className.indexOf("old") != -1)
+		else if(target.className.indexOf("rdtOld") != -1)
 			modifier = -1;
@@ -234,0 +234,0 @@

gulpfile.js

@@ -0,0 +0,0 @@ var gulp = require('gulp'),

package.json

 {
   "name": "react-datetime",
-  "version": "1.3.0",
+  "version": "2.0.0",
   "description": "A lightweight but complete datetime picker React.js component.",
@@ -26,3 +26,4 @@ "homepage": "https://github.com/arqex/react-datetime",
   "peerDependencies": {
-    "react": ">=0.12",
+    "react": ">=0.13",
+    "react-dom": ">=0.13",
     "moment": ">=2.8.1"
@@ -35,6 +36,6 @@ },
     "gulp-webpack": "^1.5.0",
-    "jsdom": "^3.1.2",
+    "jsdom": "^7.0.2",
     "mocha": "^2.2.5",
-    "react": ">=0.12",
-    "react-tools": "^0.12.2",
+    "react": ">=0.13",
+    "react-tools": "^0.13.2",
     "webpack": "^1.5.1",
@@ -45,4 +46,4 @@ "webpack-dev-server": "^1.7.0"
     "object-assign": "^3.0.0",
-    "react-onclickoutside": "^0.3.4"
+    "react-onclickoutside": "^4.1.0"
   }
 }

README.md

@@ -32,4 +32,6 @@ react-datetime
 ```
-[See this example working](http://codepen.io/arqex/pen/BNRNBw).
+[See this example working](http://codepen.io/arqex/pen/BoqgaG).
 
+Don't forget to add the [CSS stylesheet](https://github.com/arqex/react-datetime/blob/master/css/react-datetime.css) to make it work out of the box.
+
 API
@@ -36,0 +38,0 @@ ===============================

src/DaysView.js

@@ -18,5 +18,5 @@ var React = require('react'),
 				DOM.tr({ key: 'h'},[
-					DOM.th({ key: 'p', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(1, 'months'), type: 'button' }, '‹')),
-					DOM.th({ key: 's', className: 'switch', onClick: this.props.showView('months'), colSpan: 5, 'data-value': this.props.viewDate.month() }, locale.months( date ) + ' ' + date.year() ),
-					DOM.th({ key: 'n', className: 'next' }, DOM.button({onClick: this.props.addTime(1, 'months'), type: 'button' }, '›'))
+					DOM.th({ key: 'p', className: 'rdtPrev' }, DOM.button({onClick: this.props.subtractTime(1, 'months'), type: 'button' }, '‹')),
+					DOM.th({ key: 's', className: 'rdtSwitch', onClick: this.props.showView('months'), colSpan: 5, 'data-value': this.props.viewDate.month() }, locale.months( date ) + ' ' + date.year() ),
+					DOM.th({ key: 'n', className: 'rdtNext' }, DOM.button({onClick: this.props.addTime(1, 'months'), type: 'button' }, '›'))
 				]),
@@ -73,19 +73,19 @@ DOM.tr({ key: 'd'}, this.getDaysOfWeek( locale ).map( function( day ){ return DOM.th({ key: day, className: 'dow'}, day ); }) )
 		while( prevMonth.isBefore( lastDay ) ){
-			classes = 'day';
+			classes = 'rdtDay';
 			currentDate = prevMonth.clone();
 
 			if( prevMonth.year() < currentYear || prevMonth.month() < currentMonth )
-				classes += ' old';
+				classes += ' rdtOld';
 			else if( prevMonth.year() > currentYear || prevMonth.month() > currentMonth )
-				classes += ' new';
+				classes += ' rdtNew';
 
 			if( selected && prevMonth.isSame( {y: selected.year(), M: selected.month(), d: selected.date()} ) )
-				classes += ' active';
+				classes += ' rdtActive';
 
 			if (prevMonth.isSame(moment(), 'day') )
-				classes += ' today';
+				classes += ' rdtToday';
 
 			disabled = !isValid( currentDate, selected );
 			if( disabled )
-				classes += ' disabled';
+				classes += ' rdtDisabled';
 
@@ -124,3 +124,3 @@ dayProps = {
 			DOM.tr({},
-				DOM.td({ onClick: this.props.showView('time'), colSpan: 7, className: 'timeToggle'}, date.format( this.props.timeFormat ))
+				DOM.td({ onClick: this.props.showView('time'), colSpan: 7, className: 'rdtTimeToggle'}, date.format( this.props.timeFormat ))
 			)
@@ -127,0 +127,0 @@ );

src/MonthsView.js

@@ -12,5 +12,5 @@ 'use strict';
 			DOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({},[
-				DOM.th({ key: 'prev', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(1, 'years'), type: 'button' }, '‹')),
-				DOM.th({ key: 'year', className: 'switch', onClick: this.props.showView('years'), colSpan: 2, 'data-value': this.props.viewDate.year()}, this.props.viewDate.year() ),
-				DOM.th({ key: 'next', className: 'next' }, DOM.button({onClick: this.props.addTime(1, 'years'), type: 'button' }, '›'))
+				DOM.th({ key: 'prev', className: 'rdtPrev' }, DOM.button({onClick: this.props.subtractTime(1, 'years'), type: 'button' }, '‹')),
+				DOM.th({ key: 'year', className: 'rdtSwitch', onClick: this.props.showView('years'), colSpan: 2, 'data-value': this.props.viewDate.year()}, this.props.viewDate.year() ),
+				DOM.th({ key: 'next', className: 'rdtNext' }, DOM.button({onClick: this.props.addTime(1, 'years'), type: 'button' }, '›'))
 			]))),
@@ -33,5 +33,5 @@ DOM.table({ key: 'months'}, DOM.tbody({ key: 'b'}, this.renderMonths()))
 		while (i < 12) {
-			classes = "month";
+			classes = "rdtMonth";
 			if( date && i === month && year === date.year() )
-				classes += " active";
+				classes += " rdtActive";
 
@@ -38,0 +38,0 @@ props = {

src/TimeView.js

@@ -36,5 +36,5 @@ 'use strict';
 		return DOM.div({ key: type, className: 'rdtCounter'}, [
-			DOM.button({ key:'up', className: 'btn', onMouseDown: this.onStartClicking( 'increase', type ), type: 'button' }, '▲' ),
+			DOM.button({ key:'up', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'increase', type ), type: 'button' }, '▲' ),
 			DOM.div({ key:'c', className: 'rdtCount' }, this.state[ type ] ),
-			DOM.button({ key:'do', className: 'btn', onMouseDown: this.onStartClicking( 'decrease', type ), type: 'button' }, '▼' )
+			DOM.button({ key:'do', className: 'rdtBtn', onMouseDown: this.onStartClicking( 'decrease', type ), type: 'button' }, '▼' )
 		]);
@@ -87,3 +87,3 @@ },
 		return DOM.thead({ key: 'h'}, DOM.tr({},
-			DOM.th( {className: 'switch', colSpan: 4, onClick: this.props.showView('days')}, date.format( this.props.dateFormat ) )
+			DOM.th( {className: 'rdtSwitch', colSpan: 4, onClick: this.props.showView('days')}, date.format( this.props.dateFormat ) )
 		));
@@ -90,0 +90,0 @@ },

src/YearsView.js

@@ -12,5 +12,5 @@ 'use strict';
 			DOM.table({ key: 'a'}, DOM.thead({}, DOM.tr({},[
-				DOM.th({ key: 'prev', className: 'prev' }, DOM.button({onClick: this.props.subtractTime(10, 'years'), type: 'button' }, '‹')),
-				DOM.th({ key: 'year', className: 'switch', onClick: this.props.showView('years'), colSpan: 2 }, year + '-' + (year + 9) ),
-				DOM.th({ key: 'next', className: 'next'}, DOM.button({onClick: this.props.addTime(10, 'years'), type: 'button' }, '›'))
+				DOM.th({ key: 'prev', className: 'rdtPrev' }, DOM.button({onClick: this.props.subtractTime(10, 'years'), type: 'button' }, '‹')),
+				DOM.th({ key: 'year', className: 'rdtSwitch', onClick: this.props.showView('years'), colSpan: 2 }, year + '-' + (year + 9) ),
+				DOM.th({ key: 'next', className: 'rdtNext'}, DOM.button({onClick: this.props.addTime(10, 'years'), type: 'button' }, '›'))
 				]))),
@@ -32,7 +32,7 @@ DOM.table({ key: 'years'}, DOM.tbody({}, this.renderYears( year )))
 		while (i < 11) {
-			classes = 'year';
+			classes = 'rdtYear';
 			if( i === -1 | i === 10 )
-				classes += ' old';
+				classes += ' rdtOld';
 			if( selectedDate && selectedDate.year() === year )
-				classes += ' active';
+				classes += ' rdtActive';
 
@@ -39,0 +39,0 @@ props = {

tests/datetime-spec.js

@@ -8,2 +8,3 @@ // Create the dom before requiring react
 React = require('react/addons');
+ReactDOM = require('react-dom');
 
@@ -18,10 +19,10 @@ var ReactAddons = require('react/addons'),
 var createDatetime = function( props ){
-	document.body.innerHTML = '';
+	document.body.innerHTML = '<div id="root"></div>';
 
-	React.render(
+	ReactDOM.render(
 		React.createElement( Datetime, props ),
-		document.body
+		document.getElementById('root')
 	);
 
-	return document.body.children[0];
+	return document.getElementById('root').children[0];
 };
@@ -38,3 +39,3 @@
 	dt: function(){
-		return document.body.children[0];
+		return document.getElementById('root').children[0];
 	},
@@ -48,23 +49,23 @@ view: function(){
 	switcher: function(){
-		return document.querySelector('.switch');
+		return document.querySelector('.rdtSwitch');
 	},
 	timeSwitcher: function(){
-		return document.querySelector('.timeToggle');
+		return document.querySelector('.rdtTimeToggle');
 	},
 	year: function( n ){
-		var years = document.querySelectorAll('.year');
+		var years = document.querySelectorAll('.rdtYear');
 		return years[ n || 0 ];
 	},
 	month: function( n ){
-		var months = document.querySelectorAll('.month');
+		var months = document.querySelectorAll('.rdtMonth');
 		return months[ n || 0 ];
 	},
 	day: function( n ){
-		return document.querySelector('.day[data-value="' + n + '"]');
+		return document.querySelector('.rdtDay[data-value="' + n + '"]');
 	},
 	next: function(){
-		return document.querySelector('.next button');
+		return document.querySelector('.rdtNext button');
 	},
 	prev: function(){
-		return document.querySelector('.prev button');
+		return document.querySelector('.rdtPrev button');
 	},
@@ -254,3 +255,3 @@ timeUp: function( n ){
 		// The cell text should be 'day'
-		assert.equal( view.querySelector('.day').innerHTML, 'day' );
+		assert.equal( view.querySelector('.rdtDay').innerHTML, 'day' );
 	});
@@ -282,3 +283,3 @@
 		// The cell text should be 'day'
-		assert.equal( view.querySelector('.month').innerHTML, 'month' );
+		assert.equal( view.querySelector('.rdtMonth').innerHTML, 'month' );
 	});
@@ -307,3 +308,3 @@
 		// The cell text should be 'day'
-		assert.equal( view.querySelector('.year').innerHTML, 'year' );
+		assert.equal( view.querySelector('.rdtYear').innerHTML, 'year' );
 	});
@@ -310,0 +311,0 @@

tests/testdom.js

@@ -5,3 +5,3 @@ module.exports = function(markup) {
    global.document    = jsdom(markup || '<!doctype html><html><body></body></html>');
-   global.window		 = document.parentWindow;
+   global.window		 = document.defaultView;
 
@@ -8,0 +8,0 @@ global.navigator = global.window.navigator = {};

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

URL strings

Supply chain risk

Package contains fragments of external URLs or IP addresses, which the package may be accessing at runtime.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

959594

839.25%

Number of package files

18

5.88%

Lines of code

5035

228.01%

Number of lines in readme file

134

1.52%

Worsened metrics

Dependency count

5

25%

Number of low supply chain risk alerts

139

826.67%

Number of medium supply chain risk alerts

156

1633.33%

Dependency changes

• + Added

  object-assign@4.1.1
  (transitive)

• + Added

  react-dom@19.1.0
  (transitive)

• + Added

  react-onclickoutside@4.9.0
  (transitive)

• + Added

  scheduler@0.26.0
  (transitive)

• - Removed

  react-onclickoutside@0.3.4
  (transitive)

• Updated

  react-onclickoutside@^4.1.0