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 { 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 AddIcon from '@material-ui/icons/Add'; |
||||
import AddTabMenu, { NewTabProps } from './AddTabMenu'; |
||||
|
||||
export interface IProps { |
||||
tabLabels: string[], |
||||
selectedTab: number, |
||||
setSelectedTab: (n: number) => void, |
||||
onCloseTab: (idx: number) => void, |
||||
onAddTab: (w: NewTabProps) => void, |
||||
} |
||||
|
||||
export interface TabProps { |
||||
onClose: () => void, |
||||
import SearchIcon from '@material-ui/icons/Search'; |
||||
import LocalOfferIcon from '@material-ui/icons/LocalOffer'; |
||||
import { Link, useHistory } from 'react-router-dom'; |
||||
import { WindowType } from '../windows/Windows'; |
||||
|
||||
export enum AppBarTab { |
||||
Query = 0, |
||||
Tags, |
||||
} |
||||
|
||||
export function Tab(props: any) { |
||||
const { onClose, label, ...restProps } = props; |
||||
|
||||
const labelElem = <Box |
||||
display="flex" |
||||
alignItems="center" |
||||
justifyContent="center" |
||||
> |
||||
{label} |
||||
<Box ml={1}> |
||||
<IconButton |
||||
size="small" |
||||
color="inherit" |
||||
onClick={onClose} |
||||
> |
||||
<CloseIcon /> |
||||
</IconButton> |
||||
</Box> |
||||
</Box>; |
||||
|
||||
return <MuiTab |
||||
label={labelElem} |
||||
{...restProps} |
||||
/> |
||||
export const appBarTabProps: Record<any, any> = { |
||||
[AppBarTab.Query]: { |
||||
label: <Box display="flex"><SearchIcon/><Typography variant="button">Query</Typography></Box>, |
||||
path: "/query", |
||||
}, |
||||
[AppBarTab.Tags]: { |
||||
label: <Box display="flex"><LocalOfferIcon/><Typography variant="button">Tags</Typography></Box>, |
||||
path: "/tags", |
||||
}, |
||||
} |
||||
|
||||
export default function AppBar(props: IProps) { |
||||
const [addMenuAnchorEl, setAddMenuAnchorEl] = React.useState<null | HTMLElement>(null); |
||||
|
||||
const onOpenAddMenu = (event: any) => { |
||||
setAddMenuAnchorEl(event.currentTarget); |
||||
}; |
||||
const onCloseAddMenu = () => { |
||||
setAddMenuAnchorEl(null); |
||||
}; |
||||
const onAddTab = (w: NewTabProps) => { |
||||
props.onAddTab(w); |
||||
}; |
||||
export default function AppBar(props: { |
||||
selectedTab: AppBarTab | null |
||||
}) { |
||||
const history = useHistory(); |
||||
|
||||
return <> |
||||
<MuiAppBar position="static" style={{ background: 'grey' }}> |
||||
<Box display="flex" alignItems="center"> |
||||
<Box m={0.5} display="flex" alignItems="center"> |
||||
<img height="30px" src={process.env.PUBLIC_URL + "/logo.svg"} alt="error"></img> |
||||
</Box> |
||||
<Link to="/"> |
||||
<Box m={0.5} display="flex" alignItems="center"> |
||||
<img height="30px" src={process.env.PUBLIC_URL + "/logo.svg"} alt="error"></img> |
||||
</Box> |
||||
</Link> |
||||
<Tabs |
||||
value={props.selectedTab} |
||||
onChange={(e: any, v: number) => props.setSelectedTab(v)} |
||||
onChange={(e: any, val: AppBarTab) => history.push(appBarTabProps[val].path)} |
||||
variant="scrollable" |
||||
scrollButtons="auto" |
||||
> |
||||
{props.tabLabels.map((l: string, idx: number) => <Tab |
||||
label={l} |
||||
{Object.keys(appBarTabProps).map((tab: any, idx: number) => <MuiTab |
||||
label={appBarTabProps[tab].label} |
||||
value={idx} |
||||
onClose={() => props.onCloseTab(idx)} |
||||
/>)} |
||||
</Tabs> |
||||
<IconButton color="inherit" onClick={onOpenAddMenu}><AddIcon /></IconButton> |
||||
</Box> |
||||
</MuiAppBar> |
||||
<AddTabMenu |
||||
anchorEl={addMenuAnchorEl} |
||||
onClose={onCloseAddMenu} |
||||
onCreateTab={onAddTab} |
||||
/> |
||||
</> |
||||
} |
||||
Loading…
Reference in new issue