Back to simple declarative routing. (#28)
Fix routing. Boy-scout: alphabetic ordering in the tags window Reviewed-on: #28pull/34/head
parent
a689613a45
commit
87af6e18a4
13 changed files with 243 additions and 436 deletions
@ -1,40 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
import { WindowType } from '../windows/Windows'; |
|
||||||
import { Menu, MenuItem } from '@material-ui/core'; |
|
||||||
|
|
||||||
export interface NewTabProps { |
|
||||||
windowType: WindowType, |
|
||||||
} |
|
||||||
|
|
||||||
export interface IProps { |
|
||||||
anchorEl: null | HTMLElement, |
|
||||||
onClose: () => void, |
|
||||||
onCreateTab: (q: NewTabProps) => void, |
|
||||||
} |
|
||||||
|
|
||||||
export default function AddTabMenu(props: IProps) { |
|
||||||
return <Menu |
|
||||||
anchorEl={props.anchorEl} |
|
||||||
keepMounted |
|
||||||
open={Boolean(props.anchorEl)} |
|
||||||
onClose={props.onClose} |
|
||||||
> |
|
||||||
<MenuItem disabled={true}>New Tab</MenuItem> |
|
||||||
<MenuItem |
|
||||||
onClick={() => { |
|
||||||
props.onClose(); |
|
||||||
props.onCreateTab({ |
|
||||||
windowType: WindowType.Query, |
|
||||||
}) |
|
||||||
}} |
|
||||||
>{WindowType.Query}</MenuItem> |
|
||||||
<MenuItem |
|
||||||
onClick={() => { |
|
||||||
props.onClose(); |
|
||||||
props.onCreateTab({ |
|
||||||
windowType: WindowType.ManageTags, |
|
||||||
}) |
|
||||||
}} |
|
||||||
>Manage Tags</MenuItem> |
|
||||||
</Menu> |
|
||||||
} |
|
||||||
@ -1,85 +1,52 @@ |
|||||||
import React from 'react'; |
import React from 'react'; |
||||||
import { AppBar as MuiAppBar, Box, Tab as MuiTab, Tabs, IconButton } from '@material-ui/core'; |
import { AppBar as MuiAppBar, Box, Tab as MuiTab, Tabs, IconButton, Typography } from '@material-ui/core'; |
||||||
import CloseIcon from '@material-ui/icons/Close'; |
import CloseIcon from '@material-ui/icons/Close'; |
||||||
import AddIcon from '@material-ui/icons/Add'; |
import SearchIcon from '@material-ui/icons/Search'; |
||||||
import AddTabMenu, { NewTabProps } from './AddTabMenu'; |
import LocalOfferIcon from '@material-ui/icons/LocalOffer'; |
||||||
|
import { Link, useHistory } from 'react-router-dom'; |
||||||
export interface IProps { |
import { WindowType } from '../windows/Windows'; |
||||||
tabLabels: string[], |
|
||||||
selectedTab: number, |
export enum AppBarTab { |
||||||
setSelectedTab: (n: number) => void, |
Query = 0, |
||||||
onCloseTab: (idx: number) => void, |
Tags, |
||||||
onAddTab: (w: NewTabProps) => void, |
|
||||||
} |
|
||||||
|
|
||||||
export interface TabProps { |
|
||||||
onClose: () => void, |
|
||||||
} |
} |
||||||
|
|
||||||
export function Tab(props: any) { |
export const appBarTabProps: Record<any, any> = { |
||||||
const { onClose, label, ...restProps } = props; |
[AppBarTab.Query]: { |
||||||
|
label: <Box display="flex"><SearchIcon/><Typography variant="button">Query</Typography></Box>, |
||||||
const labelElem = <Box |
path: "/query", |
||||||
display="flex" |
}, |
||||||
alignItems="center" |
[AppBarTab.Tags]: { |
||||||
justifyContent="center" |
label: <Box display="flex"><LocalOfferIcon/><Typography variant="button">Tags</Typography></Box>, |
||||||
> |
path: "/tags", |
||||||
{label} |
}, |
||||||
<Box ml={1}> |
|
||||||
<IconButton |
|
||||||
size="small" |
|
||||||
color="inherit" |
|
||||||
onClick={onClose} |
|
||||||
> |
|
||||||
<CloseIcon /> |
|
||||||
</IconButton> |
|
||||||
</Box> |
|
||||||
</Box>; |
|
||||||
|
|
||||||
return <MuiTab |
|
||||||
label={labelElem} |
|
||||||
{...restProps} |
|
||||||
/> |
|
||||||
} |
} |
||||||
|
|
||||||
export default function AppBar(props: IProps) { |
export default function AppBar(props: { |
||||||
const [addMenuAnchorEl, setAddMenuAnchorEl] = React.useState<null | HTMLElement>(null); |
selectedTab: AppBarTab | null |
||||||
|
}) { |
||||||
const onOpenAddMenu = (event: any) => { |
const history = useHistory(); |
||||||
setAddMenuAnchorEl(event.currentTarget); |
|
||||||
}; |
|
||||||
const onCloseAddMenu = () => { |
|
||||||
setAddMenuAnchorEl(null); |
|
||||||
}; |
|
||||||
const onAddTab = (w: NewTabProps) => { |
|
||||||
props.onAddTab(w); |
|
||||||
}; |
|
||||||
|
|
||||||
return <> |
return <> |
||||||
<MuiAppBar position="static" style={{ background: 'grey' }}> |
<MuiAppBar position="static" style={{ background: 'grey' }}> |
||||||
<Box display="flex" alignItems="center"> |
<Box display="flex" alignItems="center"> |
||||||
<Box m={0.5} display="flex" alignItems="center"> |
<Link to="/"> |
||||||
<img height="30px" src={process.env.PUBLIC_URL + "/logo.svg"} alt="error"></img> |
<Box m={0.5} display="flex" alignItems="center"> |
||||||
</Box> |
<img height="30px" src={process.env.PUBLIC_URL + "/logo.svg"} alt="error"></img> |
||||||
|
</Box> |
||||||
|
</Link> |
||||||
<Tabs |
<Tabs |
||||||
value={props.selectedTab} |
value={props.selectedTab} |
||||||
onChange={(e: any, v: number) => props.setSelectedTab(v)} |
onChange={(e: any, val: AppBarTab) => history.push(appBarTabProps[val].path)} |
||||||
variant="scrollable" |
variant="scrollable" |
||||||
scrollButtons="auto" |
scrollButtons="auto" |
||||||
> |
> |
||||||
{props.tabLabels.map((l: string, idx: number) => <Tab |
{Object.keys(appBarTabProps).map((tab: any, idx: number) => <MuiTab |
||||||
label={l} |
label={appBarTabProps[tab].label} |
||||||
value={idx} |
value={idx} |
||||||
onClose={() => props.onCloseTab(idx)} |
|
||||||
/>)} |
/>)} |
||||||
</Tabs> |
</Tabs> |
||||||
<IconButton color="inherit" onClick={onOpenAddMenu}><AddIcon /></IconButton> |
|
||||||
</Box> |
</Box> |
||||||
</MuiAppBar> |
</MuiAppBar> |
||||||
<AddTabMenu |
|
||||||
anchorEl={addMenuAnchorEl} |
|
||||||
onClose={onCloseAddMenu} |
|
||||||
onCreateTab={onAddTab} |
|
||||||
/> |
|
||||||
</> |
</> |
||||||
} |
} |
||||||
Loading…
Reference in new issue