feat(ui): setActiveTab only works with tab names

This commit is contained in:
psychedelicious 2023-07-26 14:14:30 +10:00
parent c5389b3298
commit 1c01a31ee8
2 changed files with 14 additions and 5 deletions

View File

@ -16,7 +16,7 @@ import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale'; import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent'; import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent';
import { configSelector } from 'features/system/store/configSelectors'; import { configSelector } from 'features/system/store/configSelectors';
import { InvokeTabName } from 'features/ui/store/tabMap'; import { InvokeTabName, tabMap } from 'features/ui/store/tabMap';
import { setActiveTab, togglePanels } from 'features/ui/store/uiSlice'; import { setActiveTab, togglePanels } from 'features/ui/store/uiSlice';
import { ResourceKey } from 'i18next'; import { ResourceKey } from 'i18next';
import { isEqual } from 'lodash-es'; import { isEqual } from 'lodash-es';
@ -172,13 +172,22 @@ const InvokeTabs = () => {
const { ref: galleryPanelRef, minSizePct: galleryMinSizePct } = const { ref: galleryPanelRef, minSizePct: galleryMinSizePct } =
useMinimumPanelSize(MIN_GALLERY_WIDTH, DEFAULT_GALLERY_PCT, 'app'); useMinimumPanelSize(MIN_GALLERY_WIDTH, DEFAULT_GALLERY_PCT, 'app');
const handleTabChange = useCallback(
(index: number) => {
const activeTabName = tabMap[index];
if (!activeTabName) {
return;
}
dispatch(setActiveTab(activeTabName));
},
[dispatch]
);
return ( return (
<Tabs <Tabs
defaultIndex={activeTab} defaultIndex={activeTab}
index={activeTab} index={activeTab}
onChange={(index: number) => { onChange={handleTabChange}
dispatch(setActiveTab(index));
}}
sx={{ sx={{
flexGrow: 1, flexGrow: 1,
gap: 4, gap: 4,

View File

@ -26,7 +26,7 @@ export const uiSlice = createSlice({
name: 'ui', name: 'ui',
initialState: initialUIState, initialState: initialUIState,
reducers: { reducers: {
setActiveTab: (state, action: PayloadAction<number | InvokeTabName>) => { setActiveTab: (state, action: PayloadAction<InvokeTabName>) => {
setActiveTabReducer(state, action.payload); setActiveTabReducer(state, action.payload);
}, },
setShouldPinParametersPanel: (state, action: PayloadAction<boolean>) => { setShouldPinParametersPanel: (state, action: PayloadAction<boolean>) => {