From e094322eda8a05324d6c29cb68ac93f5fb79db6f Mon Sep 17 00:00:00 2001
From: Francisco javier Marquez Lopez <javi@JaviBook.local>
Date: Mon, 27 Feb 2017 10:41:21 +0100
Subject: [PATCH] Updates react-onclickoutside dependency and creates the Calendar container component
---
/dev/null | 103 ----------------------------------
package.json | 2
src/CalendarContainer.js | 27 +++++++++
DateTime.js | 19 +-----
4 files changed, 31 insertions(+), 120 deletions(-)
diff --git a/DateTime.js b/DateTime.js
index 3bf19c7..87728db 100644
--- a/DateTime.js
+++ b/DateTime.js
@@ -3,23 +3,11 @@
var assign = require('object-assign'),
moment = require('moment'),
React = require('react'),
- DaysView = require('./src/DaysView'),
- MonthsView = require('./src/MonthsView'),
- YearsView = require('./src/YearsView'),
- TimeView = require('./src/TimeView')
+ CalendarContainer = require('./src/CalendarContainer')
;
var TYPES = React.PropTypes;
var Datetime = React.createClass({
- mixins: [
- require('./src/onClickOutside')
- ],
- viewComponents: {
- days: DaysView,
- months: MonthsView,
- years: YearsView,
- time: TimeView
- },
propTypes: {
// value: TYPES.object | TYPES.string,
// defaultValue: TYPES.object | TYPES.string,
@@ -411,8 +399,7 @@
},
render: function() {
- var Component = this.viewComponents[ this.state.currentView ],
- DOM = React.DOM,
+ var DOM = React.DOM,
className = 'rdt' + (this.props.className ?
( Array.isArray( this.props.className ) ?
' ' + this.props.className.join( ' ' ) : ' ' + this.props.className) : ''),
@@ -439,7 +426,7 @@
return DOM.div({className: className}, children.concat(
DOM.div(
{ key: 'dt', className: 'rdtPicker' },
- React.createElement( Component, this.getComponentProps())
+ React.createElement( CalendarContainer, {view: this.state.currentView, viewProps: this.getComponentProps(), onClickOutside: this.handleClickOutside })
)
));
}
diff --git a/package.json b/package.json
index afcea33..27c0431 100644
--- a/package.json
+++ b/package.json
@@ -77,7 +77,7 @@
},
"dependencies": {
"object-assign": "^3.0.0",
- "react-onclickoutside": "^4.1.0"
+ "react-onclickoutside": "^5.9.0"
},
"pre-commit": [
"lint",
diff --git a/src/CalendarContainer.js b/src/CalendarContainer.js
new file mode 100644
index 0000000..b3c49f7
--- /dev/null
+++ b/src/CalendarContainer.js
@@ -0,0 +1,27 @@
+var React = require('react'),
+ DaysView = require('./DaysView'),
+ MonthsView = require('./MonthsView'),
+ YearsView = require('./YearsView'),
+ TimeView = require('./TimeView'),
+ onClickOutside = require('react-onclickoutside')
+;
+
+var CalendarContainer = onClickOutside( React.createClass({
+ viewComponents: {
+ days: DaysView,
+ months: MonthsView,
+ years: YearsView,
+ time: TimeView
+ },
+
+ render: function(){
+ return React.createElement( this.viewComponents[ this.props.view ], this.props.viewProps );
+ },
+
+ handleClickOutside: function(){
+ this.props.onClickOutside();
+ }
+}));
+
+
+module.exports = CalendarContainer;
diff --git a/src/onClickOutside.js b/src/onClickOutside.js
deleted file mode 100644
index 86ebce1..0000000
--- a/src/onClickOutside.js
+++ /dev/null
@@ -1,103 +0,0 @@
-'use strict';
-
-// This is extracted from https://github.com/Pomax/react-onclickoutside
-// And modified to support react 0.13 and react 0.14
-
-var React = require('react'),
- version = React.version && React.version.split('.')
-;
-
-if ( version && ( version[0] > 0 || version[1] > 13 ) )
- React = require('react-dom');
-
-// Use a parallel array because we can't use
-// objects as keys, they get toString-coerced
-var registeredComponents = [];
-var handlers = [];
-
-var IGNORE_CLASS = 'ignore-react-onclickoutside';
-
-var isSourceFound = function(source, localNode) {
- if (source === localNode) {
- return true;
- }
- // SVG <use/> elements do not technically reside in the rendered DOM, so
- // they do not have classList directly, but they offer a link to their
- // corresponding element, which can have classList. This extra check is for
- // that case.
- // See: http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGUseElement
- // Discussion: https://github.com/Pomax/react-onclickoutside/pull/17
- if (source.correspondingElement) {
- return source.correspondingElement.classList.contains(IGNORE_CLASS);
- }
- return source.classList.contains(IGNORE_CLASS);
-};
-
-module.exports = {
- componentDidMount: function() {
- if (typeof this.handleClickOutside !== 'function')
- throw new Error('Component lacks a handleClickOutside(event) function for processing outside click events.');
-
- var fn = this.__outsideClickHandler = (function(localNode, eventHandler) {
- return function(evt) {
- evt.stopPropagation();
- var source = evt.target;
- var found = false;
- // If source=local then this event came from "somewhere"
- // inside and should be ignored. We could handle this with
- // a layered approach, too, but that requires going back to
- // thinking in terms of Dom node nesting, running counter
- // to React's "you shouldn't care about the DOM" philosophy.
- while (source.parentNode) {
- found = isSourceFound(source, localNode);
- if (found) return;
- source = source.parentNode;
- }
- eventHandler(evt);
- };
- }(React.findDOMNode(this), this.handleClickOutside));
-
- var pos = registeredComponents.length;
- registeredComponents.push(this);
- handlers[pos] = fn;
-
- // If there is a truthy disableOnClickOutside property for this
- // component, don't immediately start listening for outside events.
- if (!this.props.disableOnClickOutside) {
- this.enableOnClickOutside();
- }
- },
-
- componentWillUnmount: function() {
- this.disableOnClickOutside();
- this.__outsideClickHandler = false;
- var pos = registeredComponents.indexOf(this);
- if ( pos>-1) {
- if (handlers[pos]) {
- // clean up so we don't leak memory
- handlers.splice(pos, 1);
- registeredComponents.splice(pos, 1);
- }
- }
- },
-
- /**
- * Can be called to explicitly enable event listening
- * for clicks and touches outside of this element.
- */
- enableOnClickOutside: function() {
- var fn = this.__outsideClickHandler;
- document.addEventListener('mousedown', fn);
- document.addEventListener('touchstart', fn);
- },
-
- /**
- * Can be called to explicitly disable event listening
- * for clicks and touches outside of this element.
- */
- disableOnClickOutside: function() {
- var fn = this.__outsideClickHandler;
- document.removeEventListener('mousedown', fn);
- document.removeEventListener('touchstart', fn);
- }
-};
--
Gitblit v1.9.3