init

.babelrc

@@ -0,0 +1,17 @@
+{
+  "presets": ["es2015", "react", "stage-0"],
+  "plugins": [],
+  "env": {
+    "development": {
+      "plugins": [
+        ["react-transform", {
+          "transforms": [{
+            "transform": "react-transform-hmr",
+            "imports": ["react"],
+            "locals": ["module"]
+          }]
+        }]
+      ]
+    }
+  }
+}

.gitignore

@@ -0,0 +1,2 @@
+example/bundle.js
+node_modules

History.md

@@ -0,0 +1,11 @@
+v1.1.1 / 2017-05-02
+===================
+
+  * use `prop-types` module
+
+
+v1.1.0 / 2016-02-24
+===================
+
+  * add PropTypes
+  * add example

LICENSE

@@ -0,0 +1,23 @@
+(The MIT License)
+
+Copyright (c) 2016 TJ Holowaychuk [email protected]
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+'Software'), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT.
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+

Makefile

@@ -0,0 +1,2 @@
+
+include node_modules/react-fatigue-dev/Makefile

Readme.md

@@ -0,0 +1,24 @@
+
+# ClickOutside
+
+React click outside component.
+
+
+## Example
+
+```js
+<ClickOutside onClickOutside={::this.close}>
+  <p>Im a menu or something that you want to hide when clicking outside.</p>
+</ClickOutside>
+```
+
+## Badges
+
+![](https://img.shields.io/badge/license-MIT-blue.svg)
+![](https://img.shields.io/badge/status-stable-green.svg)
+
+---
+
+> [tjholowaychuk.com](http://tjholowaychuk.com) &nbsp;&middot;&nbsp;
+> GitHub [@tj](https://github.com/tj) &nbsp;&middot;&nbsp;
+> Twitter [@tjholowaychuk](https://twitter.com/tjholowaychuk)

build/index.js

@@ -0,0 +1,90 @@
+'use strict';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+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; }; }();
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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; }
+
+var ClickOutside = function (_Component) {
+  _inherits(ClickOutside, _Component);
+
+  function ClickOutside(props) {
+    _classCallCheck(this, ClickOutside);
+
+    var _this = _possibleConstructorReturn(this, (ClickOutside.__proto__ || Object.getPrototypeOf(ClickOutside)).call(this, props));
+
+    _this.handle = function (e) {
+      if (e.type === 'touchend') _this.isTouch = true;
+      if (e.type === 'click' && _this.isTouch) return;
+      var onClickOutside = _this.props.onClickOutside;
+
+      var el = _this.container;
+      if (el && !el.contains(e.target)) onClickOutside(e);
+    };
+
+    _this.getContainer = _this.getContainer.bind(_this);
+    _this.isTouch = false;
+    return _this;
+  }
+
+  _createClass(ClickOutside, [{
+    key: 'getContainer',
+    value: function getContainer(ref) {
+      this.container = ref;
+    }
+  }, {
+    key: 'render',
+    value: function render() {
+      var _props = this.props,
+          children = _props.children,
+          onClickOutside = _props.onClickOutside,
+          props = _objectWithoutProperties(_props, ['children', 'onClickOutside']);
+
+      return _react2.default.createElement(
+        'div',
+        _extends({}, props, { ref: this.getContainer }),
+        children
+      );
+    }
+  }, {
+    key: 'componentDidMount',
+    value: function componentDidMount() {
+      document.addEventListener('touchend', this.handle, true);
+      document.addEventListener('click', this.handle, true);
+    }
+  }, {
+    key: 'componentWillUnmount',
+    value: function componentWillUnmount() {
+      document.removeEventListener('touchend', this.handle, true);
+      document.removeEventListener('click', this.handle, true);
+    }
+  }]);
+
+  return ClickOutside;
+}(_react.Component);
+
+ClickOutside.propTypes = {
+  onClickOutside: _propTypes2.default.func.isRequired
+};
+exports.default = ClickOutside;

example/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Example</title>
+    <link rel="stylesheet" href="style.css">
+  </head>
+  <body>
+    <div id="content"></div>
+    <script src="bundle.js"></script>
+  </body>
+</html>

example/index.js

@@ -0,0 +1,40 @@
+
+import React, { Component } from 'react'
+import ReactDOM from 'react-dom'
+import ClickOutside from '../index'
+
+class Menu extends Component {
+  state = {
+    open: false
+  };
+
+  render() {
+    const { open } = this.state
+
+    const items = <ul>
+      <li>One</li>
+      <li>Two</li>
+      <li>Three</li>
+      <li>Four</li>
+      <li>Five</li>
+    </ul>
+
+    return <div className="Menu">
+      <ClickOutside onClickOutside={::this.hide}>
+        <a href="#" onClick={::this.toggle}>Menu</a>
+        {open ? items : null}
+      </ClickOutside>
+    </div>
+  }
+
+  toggle() {
+    const { open } = this.state
+    this.setState({ open: !open })
+  }
+
+  hide() {
+    this.setState({ open: false })
+  }
+}
+
+ReactDOM.render(<Menu />, document.querySelector('#content'))

example/style.css

@@ -0,0 +1,9 @@
+
+body {
+  padding: 50px;
+  font: 15px/1.6 Helvetica, Arial, sans-serif;
+}
+
+.Menu ul {
+  border: 1px solid #eee;
+}

index.js

@@ -0,0 +1,41 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+
+export default class ClickOutside extends Component {
+  static propTypes = {
+    onClickOutside: PropTypes.func.isRequired
+  }
+
+  constructor(props) {
+    super(props)
+    this.getContainer = this.getContainer.bind(this)
+    this.isTouch = false
+  }
+
+  getContainer(ref) {
+    this.container = ref
+  }
+
+  render() {
+    const { children, onClickOutside, ...props } = this.props
+    return <div {...props} ref={this.getContainer}>{children}</div>
+  }
+
+  componentDidMount() {
+    document.addEventListener('touchend', this.handle, true)
+    document.addEventListener('click', this.handle, true)
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('touchend', this.handle, true)
+    document.removeEventListener('click', this.handle, true)
+  }
+
+  handle = e => {
+    if (e.type === 'touchend') this.isTouch = true
+    if (e.type === 'click' && this.isTouch) return
+    const { onClickOutside } = this.props
+    const el = this.container
+    if (el && !el.contains(e.target)) onClickOutside(e)
+  }
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "rechat-react-click-outside",
+  "version": "1.1.1",
+  "description": "ClickOutside component for React",
+  "keywords": [
+    "react",
+    "click",
+    "outside",
+    "component"
+  ],
+  "main": "build/index.js",
+  "author": "TJ Holowaychuk <[email protected]>",
+  "license": "MIT",
+  "browserify": {
+    "transform": [
+      "babelify"
+    ]
+  },
+  "devDependencies": {
+    "prop-types": "^15.5.8",
+    "react-fatigue-dev": "github:tj/react-fatigue-dev#704f778"
+  }
+}