Merge pull request #57 from easeq/master

easeq · web-flow · commit 276e7e092ca5 · 2019-07-13T17:38:39.000+05:30
Dropdown improvements
diff --git a/README.md b/README.md
@@ -158,6 +158,7 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
             btnClassName: 'your custom class names',
             menuClassName: 'your custom class names',
             menuItemClassName: 'your custom class names',
+            activeClassName: 'your custom class names',
             styles: {
                 button: { ... },
                 dropdownMenu: { ... },
@@ -215,6 +216,7 @@ import { reducer, epics } from '@flipbyte/redux-datatable';
             btnClassName: 'your custom class names',
             menuClassName: 'your custom class names',
             menuItemClassName: 'your custom class names',
+            activeClassName: 'your custom class names',
             styles: {
                 button: { ... },
                 dropdownMenu: { ... },
@@ -492,6 +494,7 @@ Toggles the table between editable and non-editable and shows a save button when
 | btnClassName      | string | false    | rdt-toolbar-button | html class names                      |
 | menuClassName     | string | false    | rdt-toolbar-menu   | html class names                      |
 | menuItemClassName | string | false    | rdt-toolbar-item   | html class names                      |
+| activeClassName   | string | false    | show               | html class names                      |
 
 **_Actions object properties_**
 
@@ -500,6 +503,7 @@ Toggles the table between editable and non-editable and shows a save button when
 | type  | string   | true     | -       | action                                          |
 | name  | string   | true     | -       | Unique name                                     |
 | label | string   | true     | -       | Label for the action item                       |
+| role  | string   | false    | -       | Add role 'menu-item' to hide dropdown on click  |
 | thunk | function | true     | -       | ( config ) => ( dispatch, getState ) => { ... } |
 
 **_Styles object properties_**
@@ -548,6 +552,7 @@ Shows the columns toggling dropdown.
 | btnClassName      | string | false    | rdt-toolbar-button | html class names                      |
 | menuClassName     | string | false    | rdt-toolbar-menu   | html class names                      |
 | menuItemClassName | string | false    | rdt-toolbar-item   | html class names                      |
+| activeClassName   | string | false    | show               | html class names                      |
 
 **_Styles object properties_**
 
diff --git a/demo/src/schema/normalized.js b/demo/src/schema/normalized.js
@@ -148,6 +148,7 @@ export default {
                 styles: {
                     backgroundColor: 'red',
                 },
+                role: 'menu-item',
                 thunk: ( config ) => ( dispatch, getState ) => {
                     // Get current table state.
                     const tableState = getState()[config.reducerName][config.name];
@@ -165,6 +166,7 @@ export default {
                 type: 'action',
                 name: 'edit',
                 label: 'Edit this field',
+                role: 'menu-item',
             }]
         },
         SimpleButton: {
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@flipbyte/redux-datatable",
-    "version": "0.7.13",
+    "version": "0.7.14",
     "description": "React-Redux data table",
     "main": "lib/index.js",
     "module": "es/index.js",
diff --git a/src/components/Columns.js b/src/components/Columns.js
@@ -1,12 +1,11 @@
-import _ from 'lodash';
 import React, { useContext } from 'react';
 import { useSelector } from 'react-redux';
 import { withDropdown } from '../hoc';
 import { Button, Dropdown } from '../styled-components';
 import ConfigContext from '../context';
 import { SET_VISIBLE_COLUMN_IDS } from '../actions';
 
-const Columns = ({
+const Columns = React.forwardRef(({
     open,
     toggle,
     config: {
@@ -15,20 +14,21 @@ const Columns = ({
         btnClassName = 'rdt-toolbar-button',
         menuClassName = 'rdt-toolbar-menu',
         menuItemClassName = 'rdt-toolbar-item',
+        activeClassName = 'show'
     }
-}) => {
-    const {
-        columns,
-        action,
-        getData
-    } = useContext(ConfigContext);
+}, ref) => {
+    const { columns, action, getData } = useContext(ConfigContext);
     const visibleColumnIds = useSelector(getData(({ visibleColumnIds  }) => visibleColumnIds)) || [];
     return (
-        <Dropdown.Container className={ className }>
+        <Dropdown.Container ref={ ref } className={ className }>
             <Button  className={ btnClassName } dropdownToggle onClick={ toggle } styles={ styles.button }>
                 Columns
             </Button>
-            <Dropdown.Menu className={ menuClassName } hidden={ !open }  styles={ styles.dropdownMenu }>
+            <Dropdown.Menu
+                className={ `${menuClassName} ${open ? activeClassName : ''}` }
+                hidden={ !open }
+                styles={ styles.dropdownMenu }
+            >
                 { columns.map(({ name, label, width }, index) => (
                     <Dropdown.Item
                         key={ index }
@@ -55,6 +55,6 @@ const Columns = ({
             </Dropdown.Menu>
         </Dropdown.Container>
     );
-};
+});
 
 export default withDropdown(Columns);
diff --git a/src/components/MassActions.js b/src/components/MassActions.js
@@ -3,7 +3,7 @@ import { withDropdown } from '../hoc';
 import { Button, Dropdown } from '../styled-components';
 import ConfigContext from '../context';
 
-const MassActions = ({
+const MassActions = React.forwardRef(({
     toggle,
     open,
     config: {
@@ -15,28 +15,34 @@ const MassActions = ({
         btnClassName = 'rdt-toolbar-button',
         menuClassName = 'rdt-toolbar-menu',
         menuItemClassName = 'rdt-toolbar-item',
+        activeClassName = 'show'
     },
-}) => {
+}, ref) => {
     const { thunk } = useContext(ConfigContext);
     return (
-        <Dropdown.Container className={ className }>
+        <Dropdown.Container ref={ ref } className={ className }>
             <Button className={ btnClassName } dropdownToggle onClick={ toggle } styles={ styles.button }>
                 { label }
             </Button>
-            <Dropdown.Menu className={ menuClassName } hidden={ !open } styles={ styles.dropdownMenu }>
-                { options.map(({ thunk: cb, ...option, styles: itemStyles }, index) =>
+            <Dropdown.Menu
+                className={ `${menuClassName} ${open ? activeClassName : ''}` }
+                hidden={ !open }
+                styles={ styles.dropdownMenu }
+            >
+                { options.map(({ role = '', thunk: cb, ...option, styles: itemStyles }, index) =>
                     <Dropdown.Item
                         className={ menuItemClassName }
                         key={ index }
                         onClick={ cb && thunk.bind(this, cb, { option }) }
                         styles={ itemStyles || styles.dropdownItem }
+                        role={ role }
                     >
                         { option.label }
                     </Dropdown.Item>
                 )}
             </Dropdown.Menu>
         </Dropdown.Container>
     );
-};
+});
 
 export default withDropdown(MassActions);
diff --git a/src/constants.js b/src/constants.js
@@ -12,3 +12,5 @@ export const SET_IS_PRINTING = 'SET_IS_PRINTING';
 export const TOGGLE_EDITABLE = 'TOGGLE_EDITABLE';
 
 export const SELECT_ALL = 'all';
+
+export const ROLE_MENU_ITEM = 'menu-item';
diff --git a/src/hoc/withDropdown.js b/src/hoc/withDropdown.js
@@ -1,60 +1,54 @@
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-
-const withDropdown = WrappedComponent => (
-    class extends Component {
-        constructor(props) {
-            super(props);
-            this.state = { open: false };
-            this.toggle = this.toggle.bind(this);
-            this.manageEvents = this.manageEvents.bind(this);
-            this.handleDocumentClick = this.handleDocumentClick.bind(this);
-        }
+import React, { useState, useEffect, useRef } from 'react';
+import { ROLE_MENU_ITEM } from '../constants';
 
-        componentWillUnmount() {
-            this.manageEvents(true);
-        }
+const events = ['click', 'touchstart', 'keyup'];
+const getMenuItems = (element) => [].slice.call(element.querySelectorAll(`[role="${ROLE_MENU_ITEM}"]`));
 
-        componentDidMount() {
-            this.manageEvents();
-        }
+const withDropdown = WrappedComponent => (props) => {
+    const ref = useRef(null);
+    const [ open, toggle ] = useState(false);
 
-        toggle( e ) {
-            const { open } = this.state;
-            this.setState({ open: !open });
+    const handleDocumentClick = (e) => {
+        if (e && (e.which === 3 || (e.type === 'keyup' && e.which !== 9))) {
+            return;
         }
 
-        manageEvents(remove = false) {
-            var eventUpdater = remove ? document.removeEventListener : document.addEventListener;
+        const container = ref.current;
+        if (container.contains(e.target)) {
+            if (e.target.getAttribute('role') === ROLE_MENU_ITEM) {
+                toggle(open => open ? !open : open);
+            } else {
+                const menuItems = getMenuItems(container);
+                menuItems.map((menuItem) => {
+                    if (menuItem.contains(e.target)) {
+                        toggle(open => open ? !open : open);
+                    }
+                });
+            }
+        }
 
-            ['click', 'touchstart', 'keyup'].forEach( event =>
-                eventUpdater(event, this.handleDocumentClick, true)
-            );
+        if (container.contains(e.target) && container !== e.target
+            && (e.type !== 'keyup' || e.which === 9)
+        ) {
+            return;
         }
 
-        handleDocumentClick(e) {
-            if (e && (e.which === 3 || (e.type === 'keyup' && e.which !== 9))) {
-                return;
-            }
+        toggle(open => open ? !open : open);
+    };
 
-            const container = ReactDOM.findDOMNode(this);
-            if (container.contains(e.target) && container !== e.target
-                && (e.type !== 'keyup' || e.which === 9)
-            ) {
-                return;
-            }
+    const manageEvents = (remove = false) => {
+        var eventUpdater = remove ? document.removeEventListener : document.addEventListener;
+        events.forEach((event) => eventUpdater(event, handleDocumentClick, true));
+    };
 
-            if (this.state.open) {
-                this.toggle(e);
-            }
-        }
+    useEffect(() => {
+        manageEvents();
+        return () => manageEvents(true);
+    }, []);
 
-        render() {
-            return (
-                <WrappedComponent ref={ this.ref } toggle={ this.toggle } open={ this.state.open } { ...this.props } />
-            );
-        }
-    }
-);
+    return (
+        <WrappedComponent ref={ ref } toggle={ toggle } open={ open } { ...props } />
+    );
+};
 
 export default withDropdown;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@flipbyte/redux-datatable",`
`3`		`- "version": "0.7.13",`
	`3`	`+ "version": "0.7.14",`
`4`	`4`	`"description": "React-Redux data table",`
`5`	`5`	`"main": "lib/index.js",`
`6`	`6`	`"module": "es/index.js",`