Merge pull request #46 from easeq/master

Minor changes and fixes

Author: easeq

demo/src/schema/basic.js

@@ -125,13 +125,13 @@ export default {
         SimpleButton: {
             type: 'button',
             label: 'Simple Button',
-            thunk: ( config ) => ( dispatch, getState ) => {
+            thunk: ( config, action ) => ( dispatch, getState ) => {
                 const tableState = getState()[config.reducerName][config.name];
                 console.log('toolbar button click', config, tableState);
-                config.action(REQUEST_DATA)();
-                config.action(SET_IS_LOADING)({ value: true });
+                action(REQUEST_DATA)();
+                action(SET_IS_LOADING)({ value: true });
                 setTimeout(function() {
-                    config.action(SET_IS_LOADING)({ value: false });
+                    action(SET_IS_LOADING)({ value: false });
                 }, 1000);
             },
             // styles: {

demo/src/schema/normalized.js

@@ -159,13 +159,13 @@ export default {
             type: 'button',
             label: 'Simple Button',
             state: false,
-            thunk: ( config ) => ( dispatch, getState ) => {
+            thunk: ( config, action ) => ( dispatch, getState ) => {
                 const tableState = getState()[config.reducerName][config.name];
                 console.log('toolbar button click', config, tableState);
-                config.action(REQUEST_DATA)();
-                config.action(SET_IS_LOADING)({ value: true });
+                action(REQUEST_DATA)();
+                action(SET_IS_LOADING)({ value: true });
                 setTimeout(function() {
-                    config.action(SET_IS_LOADING)({ value: false });
+                    action(SET_IS_LOADING)({ value: false });
                 }, 1000);
             },
             // styles: {
@@ -258,12 +258,13 @@ export default {
                 type: 'selection',
                 width: 50
             },  {
-                label: 'ID',
+                label: 'ID 1',
                 type: 'number',
                 name: 'pageId',
                 width: 150,
                 filterable: true,
                 sortable: true,
+                visible: false,
                 // editable: true
             }, {
                 label: 'ID',

package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "@flipbyte/redux-datatable",
-    "version": "0.7.3",
+    "version": "0.7.4",
     "description": "React-Redux data table",
     "main": "lib/index.js",
     "module": "es/index.js",

package.json

@@ -43,12 +43,15 @@ const ReduxDatatable = ( props ) => {
 
     const minWidth = calculateWidth(columns);
     const dispatch = useDispatch();
-    const preparePayload = prepareActionPayload(props, action);
+    const preparePayload = prepareActionPayload(props);
     const action = useCallback(
         ( type ) => ( payload ) => dispatch(createActionCreator(type)(preparePayload(payload))),
         [ dispatch ]
     );
-    const thunk = useCallback(( thunk, payload ) => dispatch(thunk(preparePayload(payload))), [ dispatch ]);
+    const thunk = useCallback(( thunk, payload ) => (
+        dispatch(thunk(preparePayload({ ...payload }), action)),
+        [ dispatch ]
+    ));
     const loadData = useCallback(() => {
         action(SET_PAGE)({ page: 1 });
         action(SET_LIMIT)({ limit: Limiter.default || 10 });
@@ -57,7 +60,9 @@ const ReduxDatatable = ( props ) => {
         action(SET_VISIBLE_COLUMN_IDS)({ ids: getInitialVisibleColumns(columns) });
         action(SET_TABLE_WIDTH)({ width: minWidth, widthAdjustment: 1 });
         action(SET_COLUMN_WIDTHS)(columns.reduce((acc, column) => {
-            acc.push(column.width);
+            if (column.visible !== false) {
+                acc.push(column.width);
+            }
             return acc;
         }, []));
     }, [ dispatch ]);

src/createTable.js

@@ -2,6 +2,7 @@ import _ from 'lodash';
 import React, { Component, useRef, useState, useEffect, useContext } from 'react';
 import { useSelector } from 'react-redux';
 import ConfigContext from '../context';
+import { isUndefined } from '../utils';
 
 export let scrollerMap = {};
 
@@ -10,10 +11,14 @@ const withScrollSpy = WrappedComponent => (props) => {
     const id = _.uniqueId(name);
     const ref = useRef(null);
     const [ scrollData, setScrollData ] = useState({ top: 0, pointerEvents: 'none' });
-    const { getData, minWidth, config: { height } } = useContext(ConfigContext);
+    const { getData, minWidth, config: { name: tableName, height } } = useContext(ConfigContext);
 
     const handleScroll = (event) => {
-        _.map(scrollerMap, (ref, key, index) => (
+        if (isUndefined(scrollerMap[tableName])) {
+            return;
+        }
+
+        _.map(scrollerMap[tableName], (ref, key, index) => (
             ref.current.scrollLeft = event.target.scrollLeft
         ));
 
@@ -27,14 +32,18 @@ const withScrollSpy = WrappedComponent => (props) => {
             ref.current.removeEventListener('scroll', handleScroll, true);
             ref.current.addEventListener('scroll', handleScroll, true);
         } else {
-            scrollerMap[id] = ref;
+            if (isUndefined(scrollerMap[tableName])) {
+                scrollerMap[tableName] = {};
+            }
+
+            scrollerMap[tableName][id] = ref;
         }
 
         return () => {
             if (name === 'Body') {
                 ref.current.removeEventListener('scroll', handleScroll, true);
             } else {
-                delete scrollerMap[id];
+                delete scrollerMap[tableName][id];
             }
         };
     }, [ handleScroll ]);

src/hoc/withScrollSpy.js

@@ -33,7 +33,7 @@ let initialTableState = {
     }
 };
 
-const calculateTableWidth = (columnWidths, clientWidth ) => {
+const calculateTableWidth = (columnWidths, clientWidth) => {
     const totalColWidth = columnWidths.reduce((a, b) => a + b, 0);
     const innerWidth = totalColWidth > clientWidth ? totalColWidth : clientWidth;
     const widthAdjustment = innerWidth / totalColWidth;

src/reducer.js

@@ -111,6 +111,6 @@ export const getRenderer = ( config, Renderers ) => {
 export const prepareActionPayload = ({
     reducerName,
     config: { name, routes, entity, primaryKey }
-}, action) => (
-    ( payload = {} ) => ({ name, reducerName, routes, entity, payload, action, primaryKey })
+}) => (
+    ( payload = {} ) => ({ name, reducerName, routes, entity, payload, primaryKey })
 );