create _onFlushEffects event

Author: dev-javascript

src/useDynamicTabs/useDynamicTabs.js

@@ -1,14 +1,15 @@
 
-import React, { useReducer, useLayoutEffect, useRef } from "react";
+import React, { useState, useReducer, useLayoutEffect, useRef } from "react";
 function useDynamicTabs(getDeps, options = {}) {
     const { reducer, getApiInstance, PanelList, TabList, ApiContext, StateContext, ForceUpdateContext } = getDeps();
     const ref = useRef(null);
     if (ref.current === null)
         ref.current = { api: getApiInstance(options), TabListComponent: null, PanelListComponent: null };
     const { current: { api } } = ref
         , _ref = ref.current
-        , [state, dispatch] = useReducer(reducer, api.getInitialState());
-    api.updateStateRef(state).updateDispatchRef(dispatch);
+        , [state, dispatch] = useReducer(reducer, api.getInitialState())
+        , [flushState, setFlushState] = useState({});
+    api.updateStateRef(state, dispatch).updateFlushState(setFlushState);
     useLayoutEffect(() => {
         api.trigger('onLoad', api.userProxy);
         return () => { api.trigger('onDestroy', api.userProxy); };
@@ -19,6 +20,9 @@ function useDynamicTabs(getDeps, options = {}) {
     useLayoutEffect(() => {
         api.trigger('onInit', api.userProxy);
     });
+    useLayoutEffect(() => {
+        api.trigger('_onFlushEffects', api.userProxy, { currentData: api.getCopyData() });
+    }, [flushState]);
     useLayoutEffect(() => {
         const oldState = api.getCopyPerviousData()
             , [openedTabsId, closedTabsId] = api.helper.getArraysDiff(state.openTabIDs, oldState.openTabIDs)

src/utils/api/api.factory.js

@@ -26,9 +26,10 @@ const _apiProps = {
     _subscribeCallbacksOptions: function () {
         const op = this.optionsManager.options;
         Object.keys(this._publishers).map(eventName => {
-            this.on(eventName, function () {
-                op[eventName].apply(this, arguments);
-            });
+            if (eventName[0] !== '_')
+                this.on(eventName, function () {
+                    op[eventName].apply(this, arguments);
+                });
         });
         return this;
     },
@@ -46,7 +47,7 @@ const _apiProps = {
     isSelected: function (id = missingParamEr('isSelected')) { return this.stateRef.selectedTabID == id; },
     isOpen: function (id = missingParamEr('isOpen')) { return this.stateRef.openTabIDs.indexOf(id) >= 0; },
     _getOnChangePromise: function () {
-        return new (Promise)(resolve => { this.one('onChange', () => { resolve.call(this.userProxy); }); });
+        return new (Promise)(resolve => { this.one('_onFlushEffects', function () { resolve.apply(this, arguments); }); });
     },
     select: function (id = missingParamEr('select')) {
         const result = this._getOnChangePromise();

src/utils/api/baseApi.js

@@ -6,25 +6,30 @@ function BaseApi(helper) {
     this._initialState = null;
     this._perviousState = null;// it is a pervious value of this._state
     this._dispatch = null;
+    this._setFlushState = null;
     helper.setNoneEnumProps(this, {
         forceUpdateState: {},
         stateRef: {}// have a same reference with state . It will be updated in each execution of useDynamicTabs.js
     });
 }
-BaseApi.prototype._select = function (tabId) { this._dispatch({ type: actions.active, tabId }); };
-BaseApi.prototype._close = function (tabId) { this._dispatch({ type: actions.close, tabId }); };
-BaseApi.prototype._open = function (tabId) { this._dispatch({ type: actions.open, tabId }); };
+BaseApi.prototype._select = function (tabId) { this._dispatch({ type: actions.active, tabId }); this.__flushEffects(); };
+BaseApi.prototype._close = function (tabId) { this._dispatch({ type: actions.close, tabId }); this.__flushEffects(); };
+BaseApi.prototype._open = function (tabId) { this._dispatch({ type: actions.open, tabId }); this.__flushEffects(); };
 BaseApi.prototype._refresh = function () {
     this.forceUpdateState = {};
     this._dispatch({ type: actions.refresh });
+    this.__flushEffects();
+};
+BaseApi.prototype.__flushEffects = function () {
+    this._setFlushState({});
 };
 Helper.setNoneEnumProps(BaseApi.prototype, {
-    updateStateRef: function (state) { this.stateRef = state; return this; },
-    updateDispatchRef: function (dispatch) { this._dispatch = dispatch; return this; },
+    updateStateRef: function (state, dispatch) { this.stateRef = state; this._dispatch = dispatch; return this; },
     updateState: function (state) {
         this._perviousState = this._helper.getCopyState(this._state || state);
         this._state = this._helper.getCopyState(state);
         return this;
-    }
+    },
+    updateFlushState: function (setFlushState) { this._setFlushState = setFlushState; return this; }
 });
 export default BaseApi;

src/utils/api/pub_sub.js

@@ -8,6 +8,7 @@ const Pub_Sub = function () {
         , onClose: []
         , onSelect: []
         , onInit: []
+        , _onFlushEffects: []
         , onFirstSelect: []
     };
 };