Merge pull request #51 from easeq/master

easeq · web-flow · commit baadf6ccb620 · 2019-07-11T17:49:51.000+05:30
Issue fixes and improvements
diff --git a/demo/src/schema/basic.js b/demo/src/schema/basic.js
@@ -23,7 +23,7 @@ export default {
     },
     layout: [
         ['Editable'],
-        ['MassActions', 'SimpleButton', 'ResetFilters', 'Spacer', 'Print', 'Columns'],
+        ['MassActions', 'SimpleButton', 'ExternalCustomButton', 'ResetFilters', 'Spacer', 'Print', 'Columns'],
         ['Limiter', 'Spacer', 'ResultCount', 'Spacer', 'Pages'],
         [{ id: 'Table', layout: [
             ['Header'],
@@ -60,6 +60,12 @@ export default {
         //         last: { backgroundColor: 'purple' },
         //     }
         // },
+        ExternalCustomButton: {
+            renderer: (props) => {
+                console.log(props);
+                return <button>nothing</button>
+            }
+        },
         Editable: {
             type: 'editable',
             labels: {
diff --git a/demo/src/schema/normalized.js b/demo/src/schema/normalized.js
@@ -56,7 +56,7 @@ export default {
     },
     layout: [
         ['Editable'],
-        ['MassActions', 'SimpleButton', 'ResetFilters', 'Spacer', 'Print', 'Columns'],
+        ['MassActions', 'SimpleButton', 'ExternalCustomButton', 'ResetFilters', 'Spacer', 'Print', 'Columns'],
         ['Limiter', 'Spacer', 'ResultCount', 'Spacer', 'Pages'],
         [{ id: 'Table', layout: [
             ['Header'],
@@ -84,6 +84,12 @@ export default {
                 justifyContent: 'center'
             }
         },
+        ExternalCustomButton: {
+            renderer: (props) => {
+                console.log(props);
+                return <button>nothing</button>
+            }
+        },
         // Pages: {
         //     styles: {
         //         first: { backgroundColor: 'red' },
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.8",
+    "version": "0.7.9",
     "description": "React-Redux data table",
     "main": "lib/index.js",
     "module": "es/index.js",
@@ -33,6 +33,7 @@
         "redux-thunk": "^2.3.0"
     },
     "dependencies": {
+        "element-resize-event": "^3.0.3",
         "normalizr": "^3.3.0",
         "object-assign-deep": "^0.4.0",
         "query-string": "^6.1.0",
diff --git a/src/components/Body.js b/src/components/Body.js
@@ -3,12 +3,15 @@ import React, { useContext, useEffect } from 'react';
 import { useSelector } from 'react-redux';
 import { Tbody, Tr, Td, Div } from '../styled-components';
 import { Body as Renderers } from './Renderer';
-import { getStyles, getRenderer } from '../utils';
-import { MODIFY_DATA, SET_BODY_INNER_WIDTH } from '../actions';
+import { getStyles, getRenderer, getInitialVisibleColumns } from '../utils';
+import { MODIFY_DATA, SET_BODY_INNER_WIDTH, SET_TABLE_WIDTH, SET_VISIBLE_COLUMN_IDS, SET_COLUMN_WIDTHS } from '../actions';
 import { withScrollSpy } from '../hoc';
 import ConfigContext from '../context';
 import { createSelector } from 'reselect';
 
+const addElementResizeEventListener = require('element-resize-event');
+const removeElementResizeEventListener = require('element-resize-event').unbind;
+
 const renderCol = (rowIndex, primaryKey, schema, styles, column, index) => {
     const { textAlign, name, type } = column;
     const ColRenderer = getRenderer(column, Renderers);
@@ -70,16 +73,27 @@ const Body = React.forwardRef(({ top: startTop = 0 }, ref) => {
 
     const updateTableDimensions = () => {
         action(SET_BODY_INNER_WIDTH)({
-            clientWidth: ref.current ? ref.current.clientWidth : minWidth,
-        });
+            clientWidth: ref.current ? ref.current.parentElement.clientWidth : minWidth,
+        })
     };
 
     useEffect(() => {
-        window.addEventListener('resize', updateTableDimensions);
-        return () => window.removeEventListener('resize', updateTableDimensions);
-    }, [ updateTableDimensions ]);
+        action(SET_VISIBLE_COLUMN_IDS)({ ids: getInitialVisibleColumns(columns) });
+        action(SET_TABLE_WIDTH)({ width: minWidth, widthAdjustment: 1 });
+        action(SET_COLUMN_WIDTHS)(columns.reduce((acc, column) => {
+            if (column.visible !== false) {
+                acc.push(column.width);
+            }
+            return acc;
+        }, []));
+    }, []);
+
+    useEffect(() => {
+        addElementResizeEventListener(ref.current, updateTableDimensions);
+        return () => removeElementResizeEventListener(ref.current)
+    }, []);
 
-    useEffect(() => updateTableDimensions(), [ ref.current ]);
+    useEffect(() => updateTableDimensions(), [ ref.current.clientWidth ]);
 
     const totalHeight = rowHeight * itemCount;
     const visibleHeight = minHeight || totalHeight;
diff --git a/src/components/Columns.js b/src/components/Columns.js
@@ -1,3 +1,4 @@
+import _ from 'lodash';
 import React, { useContext } from 'react';
 import { useSelector } from 'react-redux';
 import { withDropdown } from '../hoc';
@@ -30,16 +31,19 @@ const Columns = ({
                         className="rdt-toolbar-item"
                         padding="0.25rem 0.75rem"
                         styles={ styles.dropdownItem }
+                        htmlFor={ `rdt-columns-${name}-${index}` }
                     >
-                        <input name={ name }
+                        <input
+                            id={ `rdt-columns-${name}-${index}` }
+                            name={ name }
                             type="checkbox"
                             style={{ margin: 5 }}
                             checked={ -1 !== visibleColumnIds.indexOf(index) }
                             onChange={(event) => (
                                 action(SET_VISIBLE_COLUMN_IDS)({ index, checked: event.target.checked, width })
                             )}
                         />
-                        <label htmlFor={ name }>{ label }</label>
+                        <label>{ label }</label>
                     </Dropdown.Item>
                 ))}
             </Dropdown.Menu>
diff --git a/src/createTable.js b/src/createTable.js
@@ -12,18 +12,14 @@ import {
     createActionCreator,
     isObject,
     calculateWidth,
-    getInitialVisibleColumns,
     toPascalCase,
     prepareActionPayload
 } from './utils';
 import {
     SET_PAGE,
     SET_SORT,
     SET_LIMIT,
-    SET_IS_EDITING,
-    SET_VISIBLE_COLUMN_IDS,
-    SET_TABLE_WIDTH,
-    SET_COLUMN_WIDTHS
+    SET_IS_EDITING
 } from './actions';
 
 const getVisibleColumns = (columns) => _.memoize((visibleColumnIds) => (
@@ -57,14 +53,6 @@ const ReduxDatatable = ( props ) => {
         action(SET_LIMIT)({ limit: Limiter.default || 10 });
         action(SET_SORT)({ dir: 'desc' });
         action(SET_IS_EDITING)({ value: config.editing });
-        action(SET_VISIBLE_COLUMN_IDS)({ ids: getInitialVisibleColumns(columns) });
-        action(SET_TABLE_WIDTH)({ width: minWidth, widthAdjustment: 1 });
-        action(SET_COLUMN_WIDTHS)(columns.reduce((acc, column) => {
-            if (column.visible !== false) {
-                acc.push(column.width);
-            }
-            return acc;
-        }, []));
     }, [ dispatch ]);
 
     const tableConfig = {
@@ -96,7 +84,10 @@ const ReduxDatatable = ( props ) => {
 
         const componentConfig = _.get(components, id, false);
         if (componentConfig !== false && !!componentConfig.renderer === true) {
-            return componentConfig.renderer({ componentConfig });
+            return {
+                Component: componentConfig.renderer,
+                componentConfig
+            };
         }
 
         const type = toPascalCase(componentConfig.type || id);
diff --git a/src/hoc/withScrollSpy.js b/src/hoc/withScrollSpy.js
@@ -9,7 +9,7 @@ export let scrollerMap = {};
 const withScrollSpy = WrappedComponent => (props) => {
     const { name } = props;
     const id = _.uniqueId(name);
-    const ref = useRef(null);
+    const ref = useRef({});
     const [ scrollData, setScrollData ] = useState({ top: 0, pointerEvents: 'none' });
     const { getData, minWidth, config: { name: tableName, height } } = useContext(ConfigContext);
 
diff --git a/src/reducer.js b/src/reducer.js
@@ -36,7 +36,7 @@ let initialTableState = {
 const calculateTableWidth = (columnWidths, clientWidth) => {
     const totalColWidth = columnWidths.reduce((a, b) => a + b, 0);
     const innerWidth = totalColWidth > clientWidth ? totalColWidth : clientWidth;
-    const widthAdjustment = innerWidth / totalColWidth;
+    const widthAdjustment = innerWidth / (totalColWidth || innerWidth);
     return {
         width: totalColWidth * widthAdjustment,
         widthAdjustment
diff --git a/src/styled-components/Dropdown.js b/src/styled-components/Dropdown.js
@@ -37,7 +37,8 @@ export const Menu = styled.div `
     `};
 `;
 
-export const Item = styled.div `
+export const Item = styled.label `
+    display: block;
     clear: both;
     text-align: inherit;
     white-space: nowrap;
