diff --git a/.babelrc b/.babelrc index 274617b..31bc063 100644 --- a/.babelrc +++ b/.babelrc @@ -1,4 +1,14 @@ { - "presets": ["env", "react"], - "plugins": ["transform-object-rest-spread"] + "presets": [ + [ + "env", + { + "modules": false + } + ], + "react" + ], + "plugins": [ + "transform-object-rest-spread" + ] } diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..01b6482 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "javascript.validate.enable": false +} diff --git a/dist/index.cjs.js b/dist/index.cjs.js new file mode 100644 index 0000000..01d2629 --- /dev/null +++ b/dist/index.cjs.js @@ -0,0 +1,87 @@ +'use strict'; + +function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; } + +var hoistNonReactStatics = _interopDefault(require('hoist-non-react-statics')); +var react = _interopDefault(require('react')); +var reactDom = _interopDefault(require('react-dom')); + +var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + +var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + +function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + +function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + +function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + +function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + + + + + +function enhanceWithClickOutside(Component) { + var componentName = Component.displayName || Component.name; + + var EnhancedComponent = function (_React$Component) { + _inherits(EnhancedComponent, _React$Component); + + function EnhancedComponent(props) { + _classCallCheck(this, EnhancedComponent); + + var _this = _possibleConstructorReturn(this, (EnhancedComponent.__proto__ || Object.getPrototypeOf(EnhancedComponent)).call(this, props)); + + _this.handleClickOutside = _this.handleClickOutside.bind(_this); + return _this; + } + + _createClass(EnhancedComponent, [{ + key: 'componentDidMount', + value: function componentDidMount() { + document.addEventListener('click', this.handleClickOutside, true); + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + document.removeEventListener('click', this.handleClickOutside, true); + } + }, { + key: 'handleClickOutside', + value: function handleClickOutside(e) { + var domNode = this.__domNode; + if ((!domNode || !domNode.contains(e.target)) && this.__wrappedInstance && typeof this.__wrappedInstance.handleClickOutside === 'function') { + this.__wrappedInstance.handleClickOutside(e); + } + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var _props = this.props, + wrappedRef = _props.wrappedRef, + rest = _objectWithoutProperties(_props, ['wrappedRef']); + + return react.createElement(Component, _extends({}, rest, { + ref: function ref(c) { + _this2.__wrappedInstance = c; + _this2.__domNode = reactDom.findDOMNode(c); + wrappedRef && wrappedRef(c); + } + })); + } + }]); + + return EnhancedComponent; + }(react.Component); + + EnhancedComponent.displayName = 'clickOutside(' + componentName + ')'; + + return hoistNonReactStatics(EnhancedComponent, Component); +} + +var reactClickOutside = enhanceWithClickOutside; + +module.exports = reactClickOutside; diff --git a/dist/index.js b/dist/index.es.js similarity index 90% rename from dist/index.js rename to dist/index.es.js index 6e3b789..d5a6e17 100644 --- a/dist/index.js +++ b/dist/index.es.js @@ -1,4 +1,6 @@ -'use strict'; +import hoistNonReactStatics from 'hoist-non-react-statics'; +import react from 'react'; +import reactDom from 'react-dom'; var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; @@ -12,9 +14,9 @@ function _possibleConstructorReturn(self, call) { if (!self) { throw new Referen function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } -var hoistNonReactStatic = require('hoist-non-react-statics'); -var React = require('react'); -var ReactDOM = require('react-dom'); + + + function enhanceWithClickOutside(Component) { var componentName = Component.displayName || Component.name; @@ -58,10 +60,10 @@ function enhanceWithClickOutside(Component) { wrappedRef = _props.wrappedRef, rest = _objectWithoutProperties(_props, ['wrappedRef']); - return React.createElement(Component, _extends({}, rest, { + return react.createElement(Component, _extends({}, rest, { ref: function ref(c) { _this2.__wrappedInstance = c; - _this2.__domNode = ReactDOM.findDOMNode(c); + _this2.__domNode = reactDom.findDOMNode(c); wrappedRef && wrappedRef(c); } })); @@ -69,11 +71,13 @@ function enhanceWithClickOutside(Component) { }]); return EnhancedComponent; - }(React.Component); + }(react.Component); EnhancedComponent.displayName = 'clickOutside(' + componentName + ')'; - return hoistNonReactStatic(EnhancedComponent, Component); + return hoistNonReactStatics(EnhancedComponent, Component); } -module.exports = enhanceWithClickOutside; \ No newline at end of file +var reactClickOutside = enhanceWithClickOutside; + +export default reactClickOutside; diff --git a/dist/index.umd.js b/dist/index.umd.js new file mode 100644 index 0000000..e603e05 --- /dev/null +++ b/dist/index.umd.js @@ -0,0 +1,157 @@ +(function (global, factory) { + typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react'), require('react-dom')) : + typeof define === 'function' && define.amd ? define(['react', 'react-dom'], factory) : + (global.ReactClickOutside = factory(global.React,global.ReactDOM)); +}(this, (function (react,reactDom) { 'use strict'; + + react = react && react.hasOwnProperty('default') ? react['default'] : react; + reactDom = reactDom && reactDom.hasOwnProperty('default') ? reactDom['default'] : reactDom; + + /** + * Copyright 2015, Yahoo! Inc. + * Copyrights licensed under the New BSD License. See the accompanying LICENSE file for terms. + */ + + var REACT_STATICS = { + childContextTypes: true, + contextTypes: true, + defaultProps: true, + displayName: true, + getDefaultProps: true, + mixins: true, + propTypes: true, + type: true + }; + + var KNOWN_STATICS = { + name: true, + length: true, + prototype: true, + caller: true, + callee: true, + arguments: true, + arity: true + }; + + var defineProperty = Object.defineProperty; + var getOwnPropertyNames = Object.getOwnPropertyNames; + var getOwnPropertySymbols = Object.getOwnPropertySymbols; + var getOwnPropertyDescriptor = Object.getOwnPropertyDescriptor; + var getPrototypeOf = Object.getPrototypeOf; + var objectPrototype = getPrototypeOf && getPrototypeOf(Object); + + var hoistNonReactStatics = function hoistNonReactStatics(targetComponent, sourceComponent, blacklist) { + if (typeof sourceComponent !== 'string') { + // don't hoist over string (html) components + + if (objectPrototype) { + var inheritedComponent = getPrototypeOf(sourceComponent); + if (inheritedComponent && inheritedComponent !== objectPrototype) { + hoistNonReactStatics(targetComponent, inheritedComponent, blacklist); + } + } + + var keys = getOwnPropertyNames(sourceComponent); + + if (getOwnPropertySymbols) { + keys = keys.concat(getOwnPropertySymbols(sourceComponent)); + } + + for (var i = 0; i < keys.length; ++i) { + var key = keys[i]; + if (!REACT_STATICS[key] && !KNOWN_STATICS[key] && (!blacklist || !blacklist[key])) { + var descriptor = getOwnPropertyDescriptor(sourceComponent, key); + try { + // Avoid failures from read-only properties + defineProperty(targetComponent, key, descriptor); + } catch (e) {} + } + } + + return targetComponent; + } + + return targetComponent; + }; + + var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; + + var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }(); + + function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } + + function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } } + + function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; } + + function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; } + + + + + + function enhanceWithClickOutside(Component) { + var componentName = Component.displayName || Component.name; + + var EnhancedComponent = function (_React$Component) { + _inherits(EnhancedComponent, _React$Component); + + function EnhancedComponent(props) { + _classCallCheck(this, EnhancedComponent); + + var _this = _possibleConstructorReturn(this, (EnhancedComponent.__proto__ || Object.getPrototypeOf(EnhancedComponent)).call(this, props)); + + _this.handleClickOutside = _this.handleClickOutside.bind(_this); + return _this; + } + + _createClass(EnhancedComponent, [{ + key: 'componentDidMount', + value: function componentDidMount() { + document.addEventListener('click', this.handleClickOutside, true); + } + }, { + key: 'componentWillUnmount', + value: function componentWillUnmount() { + document.removeEventListener('click', this.handleClickOutside, true); + } + }, { + key: 'handleClickOutside', + value: function handleClickOutside(e) { + var domNode = this.__domNode; + if ((!domNode || !domNode.contains(e.target)) && this.__wrappedInstance && typeof this.__wrappedInstance.handleClickOutside === 'function') { + this.__wrappedInstance.handleClickOutside(e); + } + } + }, { + key: 'render', + value: function render() { + var _this2 = this; + + var _props = this.props, + wrappedRef = _props.wrappedRef, + rest = _objectWithoutProperties(_props, ['wrappedRef']); + + return react.createElement(Component, _extends({}, rest, { + ref: function ref(c) { + _this2.__wrappedInstance = c; + _this2.__domNode = reactDom.findDOMNode(c); + wrappedRef && wrappedRef(c); + } + })); + } + }]); + + return EnhancedComponent; + }(react.Component); + + EnhancedComponent.displayName = 'clickOutside(' + componentName + ')'; + + return hoistNonReactStatics(EnhancedComponent, Component); + } + + var reactClickOutside = enhanceWithClickOutside; + + return reactClickOutside; + +}))); diff --git a/dist/index.umd.min.js b/dist/index.umd.min.js new file mode 100644 index 0000000..7e34b31 --- /dev/null +++ b/dist/index.umd.min.js @@ -0,0 +1 @@ +!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["react","react-dom"],t):e.ReactClickOutside=t(e.React,e.ReactDOM)}(this,function(i,a){"use strict";i=i&&i.hasOwnProperty("default")?i.default:i,a=a&&a.hasOwnProperty("default")?a.default:a;var p={childContextTypes:!0,contextTypes:!0,defaultProps:!0,displayName:!0,getDefaultProps:!0,mixins:!0,propTypes:!0,type:!0},l={name:!0,length:!0,prototype:!0,caller:!0,callee:!0,arguments:!0,arity:!0},f=Object.defineProperty,s=Object.getOwnPropertyNames,d=Object.getOwnPropertySymbols,y=Object.getOwnPropertyDescriptor,O=Object.getPrototypeOf,h=O&&O(Object),c=Object.assign||function(e){for(var t=1;t=0.0.4" +source-map@~0.6.1: + version "0.6.1" + resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263" + spdx-correct@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/spdx-correct/-/spdx-correct-1.0.2.tgz#4b3073d933ff51f3912f03ac5519498a4150db40" @@ -5215,6 +5324,13 @@ uglify-js@^2.6: optionalDependencies: uglify-to-browserify "~1.0.0" +uglify-js@^3.3.25: + version "3.4.4" + resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.4.tgz#92e79532a3aeffd4b6c65755bdba8d5bad98d607" + dependencies: + commander "~2.16.0" + source-map "~0.6.1" + uglify-to-browserify@~1.0.0: version "1.0.2" resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7" @@ -5287,6 +5403,10 @@ verror@1.3.6: dependencies: extsprintf "1.0.2" +vlq@^0.2.2: + version "0.2.3" + resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26" + vm-browserify@~0.0.1: version "0.0.4" resolved "https://registry.yarnpkg.com/vm-browserify/-/vm-browserify-0.0.4.tgz#5d7ea45bbef9e4a6ff65f95438e0a87c357d5a73"