From 5d286eeb417e93f8ce0270a53c60c2b0d842f9a1 Mon Sep 17 00:00:00 2001 From: Alireza Esfahani Date: Tue, 13 Jul 2021 20:02:45 +0430 Subject: [PATCH] init --- .babelrc | 17 +++++++++ .gitignore | 2 ++ History.md | 11 ++++++ LICENSE | 23 ++++++++++++ Makefile | 2 ++ Readme.md | 24 +++++++++++++ build/index.js | 90 ++++++++++++++++++++++++++++++++++++++++++++++ example/index.html | 12 +++++++ example/index.js | 40 +++++++++++++++++++++ example/style.css | 9 +++++ index.js | 41 +++++++++++++++++++++ package.json | 23 ++++++++++++ 12 files changed, 294 insertions(+) create mode 100644 .babelrc create mode 100644 .gitignore create mode 100644 History.md create mode 100644 LICENSE create mode 100644 Makefile create mode 100644 Readme.md create mode 100644 build/index.js create mode 100644 example/index.html create mode 100644 example/index.js create mode 100644 example/style.css create mode 100644 index.js create mode 100644 package.json diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..49ccd29 --- /dev/null +++ b/.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"] + }] + }] + ] + } + } +} diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..ecd652c --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +example/bundle.js +node_modules diff --git a/History.md b/History.md new file mode 100644 index 0000000..6b3a193 --- /dev/null +++ b/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 diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..a7bfc10 --- /dev/null +++ b/LICENSE @@ -0,0 +1,23 @@ +(The MIT License) + +Copyright (c) 2016 TJ Holowaychuk tj@tjholowaychuk.com + +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. + diff --git a/Makefile b/Makefile new file mode 100644 index 0000000..1b7d56d --- /dev/null +++ b/Makefile @@ -0,0 +1,2 @@ + +include node_modules/react-fatigue-dev/Makefile diff --git a/Readme.md b/Readme.md new file mode 100644 index 0000000..fe8825a --- /dev/null +++ b/Readme.md @@ -0,0 +1,24 @@ + +# ClickOutside + +React click outside component. + + +## Example + +```js + +

Im a menu or something that you want to hide when clicking outside.

+ +``` + +## Badges + +![](https://img.shields.io/badge/license-MIT-blue.svg) +![](https://img.shields.io/badge/status-stable-green.svg) + +--- + +> [tjholowaychuk.com](http://tjholowaychuk.com)  ·  +> GitHub [@tj](https://github.com/tj)  ·  +> Twitter [@tjholowaychuk](https://twitter.com/tjholowaychuk) diff --git a/build/index.js b/build/index.js new file mode 100644 index 0000000..d8d2e39 --- /dev/null +++ b/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; \ No newline at end of file diff --git a/example/index.html b/example/index.html new file mode 100644 index 0000000..1eb7144 --- /dev/null +++ b/example/index.html @@ -0,0 +1,12 @@ + + + + + Example + + + +
+ + + diff --git a/example/index.js b/example/index.js new file mode 100644 index 0000000..69834e9 --- /dev/null +++ b/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 = + + return
+ + Menu + {open ? items : null} + +
+ } + + toggle() { + const { open } = this.state + this.setState({ open: !open }) + } + + hide() { + this.setState({ open: false }) + } +} + +ReactDOM.render(, document.querySelector('#content')) diff --git a/example/style.css b/example/style.css new file mode 100644 index 0000000..ea169ba --- /dev/null +++ b/example/style.css @@ -0,0 +1,9 @@ + +body { + padding: 50px; + font: 15px/1.6 Helvetica, Arial, sans-serif; +} + +.Menu ul { + border: 1px solid #eee; +} diff --git a/index.js b/index.js new file mode 100644 index 0000000..012e065 --- /dev/null +++ b/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
{children}
+ } + + 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) + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..3ae86ab --- /dev/null +++ b/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 ", + "license": "MIT", + "browserify": { + "transform": [ + "babelify" + ] + }, + "devDependencies": { + "prop-types": "^15.5.8", + "react-fatigue-dev": "github:tj/react-fatigue-dev#704f778" + } +} \ No newline at end of file