Merge pull request #606 from lumapps/fix/tab-state

fix(tab): fix tab state update
lumapps · Jan 21, 2021 · 1bf146e · 1bf146e
2 parents e25841a + 0e4e1fa
commit 1bf146e
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 6 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 -   Fixed `Thumbnail` focus state style.
 -   Fixed `Thumbnail` fallback placement.
 -   Fixed `Thumbnail` fill height style.
+-   Fixed `TabProvider` and `ProgressTrackerProvider` state on unmout/remount.
 
 ## [1.0.2][] - 2021-01-18
 

diff --git a/packages/lumx-react/src/components/progress-tracker/ProgressTrackerProvider.tsx b/packages/lumx-react/src/components/progress-tracker/ProgressTrackerProvider.tsx
@@ -32,7 +32,7 @@ const DEFAULT_PROPS: Partial<ProgressTrackerProviderProps> = {
  * @return React element.
  */
 export const ProgressTrackerProvider: React.FC<ProgressTrackerProviderProps> = (props) => {
-    const { children, onChange, activeStepIndex, ...propState } = props;
+    const { children, onChange, ...propState } = props;
     const [state, dispatch] = useReducer(reducer, INIT_STATE);
 
     // On prop state change => dispatch update.
@@ -42,18 +42,18 @@ export const ProgressTrackerProvider: React.FC<ProgressTrackerProviderProps> = (
                 type: 'update',
                 payload: {
                     ...propState,
-                    activeTabIndex: activeStepIndex,
+                    activeTabIndex: propState.activeStepIndex,
                 },
             });
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [dispatch, ...Object.values(propState), activeStepIndex],
+        [dispatch, ...Object.values(propState)],
     );
 
     // On active tab index state change => send update to the onChange.
     useEffect(
         () => {
-            if (state === INIT_STATE || !onChange || activeStepIndex === state.activeTabIndex) {
+            if (state === INIT_STATE || !onChange || propState.activeStepIndex === state.activeTabIndex) {
                 return;
             }
             onChange(state.activeTabIndex);

diff --git a/packages/lumx-react/src/components/tabs/TabProvider.tsx b/packages/lumx-react/src/components/tabs/TabProvider.tsx
@@ -52,7 +52,7 @@ export const TabProvider: React.FC<TabProviderProps> = (props) => {
             onChange(state.activeTabIndex);
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
-        [onChange, propState.activeTabIndex],
+        [onChange, state.activeTabIndex],
     );
 
     return <TabProviderContext.Provider value={[state, dispatch]}>{children}</TabProviderContext.Provider>;

diff --git a/packages/lumx-react/src/components/tabs/state.ts b/packages/lumx-react/src/components/tabs/state.ts
@@ -18,7 +18,8 @@ export const INIT_STATE: State = {
 export type Action =
     | { type: 'update'; payload: Partial<State> }
     | { type: 'setActiveTabIndex'; payload: number }
-    | { type: 'register'; payload: { type: TabType; id: string } };
+    | { type: 'register'; payload: { type: TabType; id: string } }
+    | { type: 'unregister'; payload: { type: TabType; id: string } };
 
 export const reducer = (state: State, action: Action): State => {
     switch (action.type) {
@@ -36,6 +37,20 @@ export const reducer = (state: State, action: Action): State => {
             // Append tab/tabPanel id in state.
             return { ...state, ids: { ...state.ids, [type]: [...state.ids[type], id] } };
         }
+        case 'unregister': {
+            const { type, id } = action.payload;
+            const index = state.ids[type].indexOf(id);
+            if (index === -1) return state;
+            // Remove tab & tab panel at index.
+            const tabIds = [...state.ids.tab];
+            tabIds.splice(index, 1);
+            const tabPanelIds = [...state.ids.tabPanel];
+            tabPanelIds.splice(index, 1);
+            return {
+                ...state,
+                ids: { tab: tabIds, tabPanel: tabPanelIds },
+            };
+        }
         default:
             return state;
     }
@@ -68,6 +83,10 @@ export const useTabProviderContext = (type: TabType, originalId?: string): undef
         () => {
             // On mount: register tab or tab panel id.
             dispatch({ type: 'register', payload: { type, id } });
+            return () => {
+                // On unmount: unregister tab or tab panel id.
+                dispatch({ type: 'unregister', payload: { type, id } });
+            };
         },
         // eslint-disable-next-line react-hooks/exhaustive-deps
         [],