Merge pull request #33 from easeq/master

Pass action as a config item to thunk

Author: easeq

demo/src/schema/basic.js

@@ -154,7 +154,7 @@ export default {
                     // Get current table state.
                     const tableState = getState()[payload.reducerName][payload.name];
                     confirm('Are your sure you want to delete the selected items?')
-                        ? console.log('delete items', payload, getState(), tableState)
+                        ? console.log('delete items', config, getState(), tableState)
                         : console.log(false);
 
                     // Filter your selected item ids here for deletion
@@ -174,7 +174,7 @@ export default {
             visible: true,
             state: false,
             thunk: ( config ) => ( dispatch, getState ) => {
-                console.log('toolbar button click', payload);
+                console.log('toolbar button click', config);
             }
         }, {
             type: 'resetFilters',
@@ -203,9 +203,9 @@ export default {
             save: ( config ) => ( dispatch, getState ) => {
                 const tableState = getState()[config.reducerName][config.name];
                 console.log('toolbar save click with modified data', config, tableState.modified);
-                config.payload.action(MODIFY_DATA)({ clear: true });
+                config.action(MODIFY_DATA)({ clear: true });
                 // Dispatch MODIFY_DATA action with clear: true, to reset the modified data
-                // Dispatch REQUEST_DATA action "config.payload.action(REQUEST_DATA)" to refresh data.
+                // Dispatch REQUEST_DATA action "config.action(REQUEST_DATA)" to refresh data.
             }
         }],
     ],
@@ -281,7 +281,7 @@ export default {
                 id: '@id',
             },
             thunk: ( config ) => ( dispatch, getState ) => {
-                console.log('edit', payload, getState());
+                console.log('edit', config, getState());
             }
         }, {
             type: 'action',

package-lock.json

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

package.json

@@ -8,7 +8,7 @@ const defaultLabels = {
     save: 'Save'
 };
 
-const EditableButtons = ({ itemConfig, action, isModified, isEditable, isEditing, internalStateUpdater, thunk }) => {
+const EditableButtons = ({ itemConfig, isModified, isEditable, isEditing, internalStateUpdater, thunk }) => {
     const { save } = itemConfig;
     const labels = _.merge(defaultLabels, itemConfig.labels);
     const toggleEditable = () => internalStateUpdater({ type: TOGGLE_EDITABLE });
@@ -21,7 +21,7 @@ const EditableButtons = ({ itemConfig, action, isModified, isEditable, isEditing
                 </Button>
             )}
             { isModified && (
-                <Button className="rdt-toolbar-button reset-filters" onClick={ save && thunk.bind(this, save, { itemConfig, action }) }>
+                <Button className="rdt-toolbar-button reset-filters" onClick={ save && thunk.bind(this, save, { itemConfig }) }>
                     { labels.save }
                 </Button>
             )}

src/Renderer/Toolbar/EditableButtons.js

@@ -379,8 +379,8 @@ const ReduxDatatable = ( props ) => {
     );
 };
 
-const prepareActionPayload = ({ reducerName, config: { name, routes, entity }}) => (
-    ( payload = {} ) => ({ name, reducerName, routes, entity, payload })
+const prepareActionPayload = ({ reducerName, config: { name, routes, entity }}, action) => (
+    ( payload = {} ) => ({ name, reducerName, routes, entity, payload, action })
 );
 
 const mapStateToProps = ( state, { reducerName, config: { name, entity } } ) => ({
@@ -389,14 +389,15 @@ const mapStateToProps = ( state, { reducerName, config: { name, entity } } ) =>
 });
 
 const mapDispatchToProps = ( dispatch, ownProps ) => {
-    let preparePayload = prepareActionPayload(ownProps);
+    const action = ( type ) => ( payload ) => dispatch(createActionCreator(type)(preparePayload(payload)));
+    const preparePayload = prepareActionPayload(ownProps, action);
     return {
+        action,
         loadData: ( ) => {
             dispatch(setPage(preparePayload({ page: 1 })));
             dispatch(setLimit(preparePayload({ limit: ownProps.config.pagination.items.limiter.default || 10 })));
             dispatch(setSort(preparePayload({ dir: 'desc' })));
         },
-        action: ( type ) => ( payload ) => dispatch(createActionCreator(type)(preparePayload(payload))),
         thunk: ( thunk, payload ) => dispatch(thunk(preparePayload(payload)))
     };
 };