Merge pull request #2 from viralganatra/feature/version2

feature/version2
viralganatra · Oct 2, 2017 · d592b4a · d592b4a
2 parents cb06aaa + 5a889fd
commit d592b4a
Show file tree

Hide file tree

Showing 36 changed files with 5,269 additions and 1,067 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,10 +1,39 @@
 {
-  "presets": [
-    "react",
-    "es2015",
-    "stage-0"
-  ],
-  "plugins": [
-    "transform-runtime"
-  ]
-}
+    "env": {
+        "development": {
+            "presets": [
+                "react",
+                ["es2015", {
+                    "modules": false
+                }],
+                "stage-0"
+            ]
+        },
+        "test": {
+            "presets": [
+                "react",
+                "es2015",
+                "stage-0"
+            ],
+            "plugins": [
+                "transform-runtime",
+                "transform-react-remove-prop-types",
+                "transform-react-constant-elements"
+            ]
+        },
+        "production": {
+            "presets": [
+                "react",
+                ["es2015", {
+                    "modules": false
+                }],
+                "stage-0"
+            ],
+            "plugins": [
+                "transform-runtime",
+                "transform-react-remove-prop-types",
+                "transform-react-constant-elements"
+            ]
+        }
+    }
+}
diff --git a/.eslintrc b/.eslintrc
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,52 @@
+module.exports = {
+    'parser': 'babel-eslint',
+    'extends': 'airbnb',
+    'env': {
+        'browser': true,
+        'node': true,
+        'jest/globals': true,
+    },
+    'globals': {
+        'shallow': true,
+        'mount': true,
+        'render': true,
+    },
+    'rules': {
+        'array-bracket-spacing': ['off'],
+        'arrow-parens': ['error', 'always'],
+        'class-methods-use-this': ['off'],
+        'indent': ['error', 4],
+        'no-unused-expressions': ['error', { 'allowShortCircuit': true }],
+        'no-unused-vars': ['error', { 'ignoreRestSiblings': true }],
+        'quotes': ['error', 'single', { 'allowTemplateLiterals': true }],
+
+        'import/no-extraneous-dependencies': ['error', { 'devDependencies': true }],
+
+        'react/no-unused-prop-types': ['error', { 'skipShapeProps': true }],
+        'react/require-default-props': ['warn'],
+        'react/no-array-index-key': ['warn'],
+
+        'react/jsx-filename-extension': ['error', { 'extensions': ['.js', '.jsx'] }],
+        'react/jsx-indent': ['error', 4],
+        'react/jsx-indent-props': ['error', 4],
+        'react/jsx-boolean-value': ['error', 'always'],
+        'react/jsx-no-bind': ['error'],
+
+        'react/sort-comp': ['error', {
+            'order': [
+                'static-methods',
+                'lifecycle',
+                '/^on.+$/',
+                'everything-else',
+                '/^(get|set)(?!(InitialState$|DefaultProps$|ChildContext$)).+$/',
+                '/^render.+$/',
+                'render',
+            ],
+        }],
+    },
+    'plugins': [
+        'babel',
+        'react',
+        'jest',
+    ],
+};
diff --git a/.gitignore b/.gitignore
@@ -1,3 +1,6 @@
 node_modules
 yarn-error.log
-lib
+npm-debug.log
+lib
+.DS_Store
+dist
diff --git a/.npmignore b/.npmignore
@@ -1,4 +1,7 @@
 src
 .babelrc
 .eslintrc
-.travis.yml
+.travis.yml
+example
+rollup-config.js
+tests
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,16 @@
+## 2.0.0 (02 Oct, 2017)
+
+### New Features
+
+* Rewritten to introduce new way of using this library. In addition to the existing higher order component, this library now exports a new class, built using the 'function as child component' pattern
+* The higher order component now accepts a params object as a function, meaning any params can be added to the container div
+* The build is now done via Rollup. In addition, two packages are distributed; one for Common JS and one for ESM Modules
+
+### Breaking Changes
+
+* The higher order component no longer accepts the clickOutsideClassName property. Instead pass any options to the container div as a params object
+* The container div no longer adds the style display: inline-block
+
 ## 1.0.4 (15 Apr, 2017)
 * Upgrade dependencies and ensure compatibility with React 15.5+
 

diff --git a/README.md b/README.md
@@ -7,6 +7,10 @@ This is a higher order component for detecting when a click event has occured ou
 
 It supports both class based components and stateless functional components.
 
+## Demo
+
+https://viralganatra.github.io/demos/react-clickoutside/
+
 
 ## Installation
 
@@ -22,33 +26,58 @@ or `NPM`
 npm install --save react-clickoutside
 ````
 
+## New in Version 2
+
+In addition to the existing higher order component, this library now exports a new component, built using the 'function as child component' pattern.
+
+See: https://medium.com/merrickchristensen/function-as-child-components-5f3920a9ace9
+
+The higher order component now accepts a params object, meaning any properties can be added to the container div.
+
+Introduced Rollup to export two packages; one for Common JS and one for ESM Modules.
+
 ## How to use
 
 ### Basic functionality
 
+#### Using the Function as Child Component approach
+
 ````js
 import React from 'react';
-
-const MyComponent = () => {
-    return <div>My Component</div>;
-}
+import { ClickOutside } from 'react-clickoutside';
+
+const MyComponent = () => (
+    <div>
+        <p>My Component</p>
+        <ClickOutside>
+            {({ hasClickedOutside }) => (
+                <div>
+                    <p>Click Outside</p>
+                    {hasClickedOutside && <div>Has Clicked Outside</div>}
+                </div>
+            )}
+        </ClickOutside>
+    </div>
+);
 
 export default MyComponent;
 ````
 
+#### Using the Higher Order Component
+
 ````js
 import React, { Component } from 'react';
-import ClickOutside from 'react-clickoutside';
+import { withClickOutside } from 'react-clickoutside';
 import MyComponent from './my-component';
 
-export default class MyComposedClass extends Component {
-    onClickOutside() {
+const ComposedComponent = withClickOutside()(MyComponent);
+
+export default class Demo extends Component {
+    onClickOutside = () => {
         // Do something...
     }
 
     render() {
-        const ComposedComponent = ClickOutside(MyComponent);
-
         return (
             <ComposedComponent
                 onClickOutside={this.onClickOutside}
@@ -62,26 +91,38 @@ The composed component must have the attribute onClickOutside which should be a
 
 ### Customising
 
-This higher order function will add a wrapping `div` element to your component. By default it will add a style with `display: inline-block`. If you wish to use a class name you can use the clickOutsideClassName attribute.
+The Component will add a wrapping `div` element to your component. You can add any attributes to this:
+
+#### Using the Function as Child Component component
 
 ````js
-export default class MyComposedClass extends Component {
-    render() {
-        const ComposedComponent = ClickOutside(MyComponent);
+const MyComponent = () => (
+    <div>
+        <p>My Component</p>
+        <ClickOutside className="my-class">
+            {({ hasClickedOutside }) => (
+
+            )}
+        </ClickOutside>
+    </div>
+);
+````
 
-        return (
-            <ComposedComponent
-                onClickOutside={this.onClickOutside}
-                clickOutsideClassName="my-class-name"
-            />
-        );
-    }
-}
+#### Using the Higher Order Component
+
+````js
+import React, { Component } from 'react';
+import { withClickOutside } from 'react-clickoutside';
+import MyComponent from './my-component';
+
+const ComposedComponent = withClickOutside({
+    className: 'my-class',
+})(MyComponent);
 ````
 
 ## Notes
 
-This higher order function will add a wrapping `div` element to your component. This is because internally we need to obtain a reference to the container DOM node and use that to calculate if the clicked target node is a child of the container. The problem is that while we can obtain a reference to the node using the ref attribute when the decorated component exposes a regular HTML element, when the ref attribute is used on a custom component the ref callback receives the mounted instance of the component.
+Both components will add a wrapping `div` element to your component. This is because internally we need to obtain a reference to the container DOM node and use that to calculate if the clicked target node is a child of the container. The problem is that while we can obtain a reference to the node using the ref attribute when the decorated component exposes a regular HTML element, when the ref attribute is used on a custom component the ref callback receives the mounted instance of the component.
 
 <https://facebook.github.io/react/docs/refs-and-the-dom.html>
 
@@ -91,7 +132,7 @@ In addition using findDOMNode is now discouraged and the React team has plans to
 
 ## Compatibility
 
-React v15 is a peer dependency.
+React v15 or v16 is a peer dependency.
 
 ## License
 

diff --git a/config/jest.js b/config/jest.js
@@ -0,0 +1,13 @@
+// Make Enzyme functions available in all test files without importing
+import Enzyme from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
+
+Enzyme.configure({ adapter: new Adapter() });
+
+global.shallow = Enzyme.shallow;
+global.render = Enzyme.render;
+global.mount = Enzyme.mount;
+
+console.error = (error) => {
+    throw new Error(error);
+};
diff --git a/config/rollup.js b/config/rollup.js
@@ -0,0 +1,20 @@
+import babel from 'rollup-plugin-babel';
+import pkg from '../package.json';
+
+export default [
+    {
+        input: 'src/index.js',
+        output: [
+            { file: pkg.main, format: 'cjs' },
+            { file: pkg.module, format: 'es' },
+        ],
+        external: ['react', 'prop-types', 'invariant'],
+        sourcemap: true,
+        plugins: [
+            babel({
+                exclude: ['node_modules/**'],
+                runtimeHelpers: true,
+            }),
+        ],
+    },
+];
diff --git a/example/.babelrc b/example/.babelrc
@@ -0,0 +1,12 @@
+{
+    "presets": [
+        "react",
+        ["es2015", {
+            "modules": false
+        }],
+        "stage-0"
+    ],
+    "plugins": [
+        "react-hot-loader/babel"
+    ]
+}
diff --git a/example/README.md b/example/README.md
@@ -0,0 +1,16 @@
+# React Click Outside Demo
+
+
+## Using
+
+To build this example, clone this repo and navigate to the example directory and run:
+
+````
+npm run start
+````
+
+And visit:
+
+http://localhost:3000
+
+In your browser