Skip to content

Commit

Permalink
Handle GroupMenu better
Browse files Browse the repository at this point in the history
  • Loading branch information
@karniv00l
karniv00l committed Nov 1, 2022
1 parent 3fb11d5 commit b2b1a83
Show file tree
Hide file tree
Showing 4 changed files with 74 additions and 23 deletions.
21 changes: 16 additions & 5 deletions src/components/CommandPalette.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,8 @@ import {
NavigationState,
} from '../types/state';
import {
buildUrl,
buildDialogUrl,
buildGroupMenuDialogUrl,
SKIP_MENUS,
SKIP_SUB_MENUS,
} from './Tune/SideBar';
Expand Down Expand Up @@ -261,7 +262,12 @@ const ActionsProvider = (props: CommandPaletteProps) => {
},
];

const mapSubMenuItems = (rootMenuName: string, rootMenu: MenuType, subMenus: { [name: string]: SubMenuType | GroupMenuType | GroupChildMenuType }) => {
const mapSubMenuItems = (
rootMenuName: string,
rootMenu: MenuType,
subMenus: { [name: string]: SubMenuType | GroupMenuType | GroupChildMenuType },
groupMenuName: string | null = null,
) => {
Object
.keys(subMenus)
.forEach((subMenuName: string) => {
Expand All @@ -276,17 +282,22 @@ const ActionsProvider = (props: CommandPaletteProps) => {
const subMenu = subMenus[subMenuName];

if ((subMenu as GroupMenuType).type === 'groupMenu') {
mapSubMenuItems(rootMenuName, rootMenu, (subMenu as GroupMenuType).groupChildMenus);
// recurrence
mapSubMenuItems(rootMenuName, rootMenu, (subMenu as GroupMenuType).groupChildMenus, (subMenu as GroupMenuType).title);

return;
}

const url = groupMenuName ?
buildGroupMenuDialogUrl(navigation.tuneId!, rootMenuName, groupMenuName, subMenuName) :
buildDialogUrl(navigation.tuneId!, rootMenuName, subMenuName);

newActions.push({
id: buildUrl(navigation.tuneId!, rootMenuName, subMenuName),
id: url,
section: rootMenu.title,
name: subMenu.title,
icon: <Icon name={subMenuName} />,
perform: () => navigate(buildUrl(navigation.tuneId!, rootMenuName, subMenuName)),
perform: () => navigate(url),
});
});
};
Expand Down
59 changes: 48 additions & 11 deletions src/components/Tune/SideBar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,17 @@ export const SKIP_SUB_MENUS = [
'tuning/std_realtime',
];

export const buildUrl = (tuneId: string, main: string, sub: string) => generatePath(Routes.TUNE_DIALOG, {
export const buildDialogUrl = (tuneId: string, main: string, dialog: string) => generatePath(Routes.TUNE_DIALOG, {
tuneId,
category: main,
dialog: sub,
dialog: dialog.replaceAll(' ', '-'),
});

export const buildGroupMenuDialogUrl = (tuneId: string, main: string, groupMenu: string, dialog: string) => generatePath(Routes.TUNE_GROUP_MENU_DIALOG, {
tuneId,
category: main,
groupMenu: groupMenu.replaceAll(' ', '-'),
dialog,
});

const mapStateToProps = (state: AppState) => ({
Expand All @@ -66,13 +73,14 @@ interface SideBarProps {
tune: TuneType | null;
ui: UIState;
navigation: NavigationState;
matchedPath: PathMatch<'dialog' | 'tuneId' | 'category'>;
matchedPath: PathMatch<'dialog' | 'tuneId' | 'category'> | null;
matchedGroupMenuDialogPath: PathMatch<'dialog' | 'groupMenu' | 'tuneId' | 'category'> | null;
};

export const sidebarWidth = 250;
export const collapsedSidebarWidth = 50;

const SideBar = ({ config, tune, ui, navigation, matchedPath }: SideBarProps) => {
const SideBar = ({ config, tune, ui, navigation, matchedPath, matchedGroupMenuDialogPath }: SideBarProps) => {
const siderProps = {
width: sidebarWidth,
collapsedWidth: collapsedSidebarWidth,
Expand All @@ -84,7 +92,11 @@ const SideBar = ({ config, tune, ui, navigation, matchedPath }: SideBarProps) =>
const [menus, setMenus] = useState<ItemType[]>([]);
const navigate = useNavigate();

const mapSubMenuItems = useCallback((rootMenuName: string, subMenus: { [name: string]: SubMenuType | GroupMenuType | GroupChildMenuType }): ItemType[] => {
const mapSubMenuItems = useCallback((
rootMenuName: string,
subMenus: { [name: string]: SubMenuType | GroupMenuType | GroupChildMenuType },
groupMenuName: string | null = null,
): ItemType[] => {
const items: ItemType[] = [];

Object
Expand All @@ -105,16 +117,26 @@ const SideBar = ({ config, tune, ui, navigation, matchedPath }: SideBarProps) =>
const subMenu = subMenus[subMenuName];

if ((subMenu as GroupMenuType).type === 'groupMenu') {
items.push(...mapSubMenuItems(rootMenuName, (subMenu as GroupMenuType).groupChildMenus));
// recurrence
items.push({
key: buildDialogUrl(navigation.tuneId!, rootMenuName, (subMenu as GroupMenuType).title),
icon: <Icon name={subMenuName} />,
label: (subMenu as GroupMenuType).title,
children: mapSubMenuItems(rootMenuName, (subMenu as GroupMenuType).groupChildMenus, (subMenu as GroupMenuType).title),
});

return;
}

const url = groupMenuName ?
buildGroupMenuDialogUrl(navigation.tuneId!, rootMenuName, groupMenuName, subMenuName) :
buildDialogUrl(navigation.tuneId!, rootMenuName, subMenuName);

items.push({
key: buildUrl(navigation.tuneId!, rootMenuName, subMenuName),
key: url,
icon: <Icon name={subMenuName} />,
label: subMenu.title,
onClick: () => navigate(buildUrl(navigation.tuneId!, rootMenuName, subMenuName)),
onClick: () => navigate(url),
});
});

Expand Down Expand Up @@ -144,15 +166,30 @@ const SideBar = ({ config, tune, ui, navigation, matchedPath }: SideBarProps) =>
}
}, [config, config?.menus, menusList, tune, tune?.constants]);

const defaultOpenSubmenus = () => {
if (matchedGroupMenuDialogPath) {
return [
`/${matchedGroupMenuDialogPath.params.category}`,
buildDialogUrl(
navigation.tuneId!,
matchedGroupMenuDialogPath.params.category!,
matchedGroupMenuDialogPath.params.groupMenu!,
),
];
}

return [`/${matchedPath!.params.category}`];
};

return (
<Sider {...siderProps} className="app-sidebar">
<PerfectScrollbar options={{ suppressScrollX: true }}>
<Menu
defaultSelectedKeys={[matchedPath.pathname]}
defaultOpenKeys={ui.sidebarCollapsed ? [] : [`/${matchedPath.params.category}`]}
defaultSelectedKeys={[matchedGroupMenuDialogPath ? matchedGroupMenuDialogPath.pathname : matchedPath!.pathname]}
defaultOpenKeys={ui.sidebarCollapsed ? [] : defaultOpenSubmenus()}
mode="inline"
style={{ height: '100%' }}
key={matchedPath.pathname}
key={matchedGroupMenuDialogPath ? matchedGroupMenuDialogPath.pathname : matchedPath!.pathname}
items={menus}
/>
</PerfectScrollbar>
Expand Down
16 changes: 9 additions & 7 deletions src/pages/Tune.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,7 @@ const mapStateToProps = (state: AppState) => ({
const Tune = ({ config, tune }: { config: ConfigType | null, tune: TuneState }) => {
const dialogMatch = useMatch(Routes.TUNE_DIALOG);
const tuneRootMatch = useMatch(Routes.TUNE_TUNE);
// const { storageGetSync } = useBrowserStorage();
// const lastDialogPath = storageGetSync('lastDialog');
const groupMenuDialogMatch = useMatch(Routes.TUNE_GROUP_MENU_DIALOG);
const { isConfigReady } = useConfig(config);
const navigate = useNavigate();

Expand All @@ -47,18 +46,21 @@ const Tune = ({ config, tune }: { config: ConfigType | null, tune: TuneState })

navigate(firstDialogPath, { replace: true });
}
}, [navigate, tuneRootMatch, isConfigReady, config?.menus, tuneId, config, tune, dialogMatch]);
}, [navigate, tuneRootMatch, isConfigReady, config?.menus, tuneId, config, tune, dialogMatch, groupMenuDialogMatch]);

if (!tune || !config || !dialogMatch) {
if (!tune || !config || (!dialogMatch && !groupMenuDialogMatch)) {
return <Loader />;
}

return (
<>
<SideBar matchedPath={dialogMatch!} />
<SideBar
matchedPath={dialogMatch!}
matchedGroupMenuDialogPath={groupMenuDialogMatch}
/>
<Dialog
name={dialogMatch?.params.dialog!}
url={dialogMatch?.pathname || ''}
name={groupMenuDialogMatch ? groupMenuDialogMatch.params.dialog! : dialogMatch?.params.dialog!}
url={groupMenuDialogMatch ? groupMenuDialogMatch.pathname : dialogMatch?.pathname || ''}
/>
</>
);
Expand Down
1 change: 1 addition & 0 deletions src/routes.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export enum Routes {
TUNE_TAB = '/t/:tuneId/:tab',
TUNE_TUNE = '/t/:tuneId/tune',
TUNE_DIALOG = '/t/:tuneId/tune/:category/:dialog',
TUNE_GROUP_MENU_DIALOG = '/t/:tuneId/tune/:category/:groupMenu/:dialog',
TUNE_LOGS = '/t/:tuneId/logs',
TUNE_LOGS_FILE = '/t/:tuneId/logs/:fileName',
TUNE_DIAGNOSE = '/t/:tuneId/diagnose',
Expand Down

0 comments on commit b2b1a83

Please sign in to comment.