Commit 43cd1f8d authored by Lauri Himanen's avatar Lauri Himanen
Browse files

Got rid of FilterContext: it is now encapsulated within FilterMenu.

parent 8b500cb1
Pipeline #108151 passed with stages
in 30 minutes and 28 seconds
......@@ -69,11 +69,11 @@ const MainMenu = React.memo(() => {
</MenuBarMenu>
<MenuBarMenu name="explore" route="/search" icon={<SearchIcon/>}>
<MenuBarItem
label="Search entries" name="searchentries" route="/search/entries"
label="Search Entries" name="searchentries" route="/search/entries"
tooltip="Search individual entries"
/>
<MenuBarItem
label="Search materials" name="searchmaterials" route="/search/materials"
label="Search Materials" name="searchmaterials" route="/search/materials"
tooltip="Search materials"
/>
</MenuBarMenu>
......@@ -99,7 +99,7 @@ const MainMenu = React.memo(() => {
</MenuBarMenu>
<MenuBarMenu name="about" route="/" icon={<AboutIcon/>}>
<MenuBarItem
label="Information" name="about" route="/"
label="Information" name="info" route="/"
tooltip="Overview of the NOMAD Repository and Archive"
/>
<MenuBarItem
......
......@@ -189,7 +189,7 @@ const routeSpecs = [
exact: true,
path: '/',
title: 'About, Documentation, Getting Help',
navPath: 'about/about',
navPath: 'about/info',
component: About
}
]
......
......@@ -48,7 +48,6 @@ const useStyles = makeStyles(theme => {
maxWidth: '4rem'
},
center: {
// position: 'relative',
flex: `1 1 100%`,
display: 'flex',
flexDirection: 'column',
......
......@@ -18,7 +18,6 @@
import React from 'react'
import PropTypes from 'prop-types'
import {
FilterMenuContext,
FilterMenu,
FilterMenuItem,
FilterMenuItems,
......@@ -63,7 +62,7 @@ const FilterMainMenu = React.memo(({
}) => {
const [value, setValue] = React.useState()
return <FilterMenuContext
return <FilterMenu
selected={value}
onSelectedChange={setValue}
open={open}
......@@ -71,34 +70,32 @@ const FilterMainMenu = React.memo(({
collapsed={collapsed}
onCollapsedChange={onCollapsedChange}
>
<FilterMenu>
<FilterMenuItems>
<FilterMenuItem value={labelMaterial} depth={0}/>
<FilterMenuItem value={labelElements} depth={1}/>
<FilterMenuItem value={labelSymmetry} depth={1}/>
<FilterMenuItem value={labelMethod} depth={0}/>
<FilterMenuItem value={labelDFT} depth={1}/>
<FilterMenuItem value={labelProperties} depth={0} disableButton/>
<FilterMenuItem value={labelElectronic} depth={1}/>
<FilterMenuItem value={labelAuthor} depth={0}/>
<FilterMenuItem value={labelDataset} depth={0}/>
<FilterMenuItem value={labelAccess} depth={0}/>
<FilterMenuItem value={labelIDs} depth={0}/>
</FilterMenuItems>
<FilterSubMenus>
<FilterSubMenuMaterial value={labelMaterial}/>
<FilterSubMenuElements value={labelElements} size="large"/>
<FilterSubMenuSymmetry value={labelSymmetry}/>
<FilterSubMenuMethod value={labelMethod}/>
<FilterSubMenuDFT value={labelDFT}/>
<FilterSubMenuElectronic value={labelElectronic}/>
<FilterSubMenuAuthor value={labelAuthor}/>
<FilterSubMenuDataset value={labelDataset}/>
<FilterSubMenuAccess value={labelAccess}/>
<FilterSubMenuIDs value={labelIDs}/>
</FilterSubMenus>
</FilterMenu>
</FilterMenuContext>
<FilterMenuItems>
<FilterMenuItem value={labelMaterial} depth={0}/>
<FilterMenuItem value={labelElements} depth={1}/>
<FilterMenuItem value={labelSymmetry} depth={1}/>
<FilterMenuItem value={labelMethod} depth={0}/>
<FilterMenuItem value={labelDFT} depth={1}/>
<FilterMenuItem value={labelProperties} depth={0} disableButton/>
<FilterMenuItem value={labelElectronic} depth={1}/>
<FilterMenuItem value={labelAuthor} depth={0}/>
<FilterMenuItem value={labelDataset} depth={0}/>
<FilterMenuItem value={labelAccess} depth={0}/>
<FilterMenuItem value={labelIDs} depth={0}/>
</FilterMenuItems>
<FilterSubMenus>
<FilterSubMenuMaterial value={labelMaterial}/>
<FilterSubMenuElements value={labelElements} size="large"/>
<FilterSubMenuSymmetry value={labelSymmetry}/>
<FilterSubMenuMethod value={labelMethod}/>
<FilterSubMenuDFT value={labelDFT}/>
<FilterSubMenuElectronic value={labelElectronic}/>
<FilterSubMenuAuthor value={labelAuthor}/>
<FilterSubMenuDataset value={labelDataset}/>
<FilterSubMenuAccess value={labelAccess}/>
<FilterSubMenuIDs value={labelIDs}/>
</FilterSubMenus>
</FilterMenu>
})
FilterMainMenu.propTypes = {
open: PropTypes.bool,
......
......@@ -49,6 +49,8 @@ import { quantityGroups, useResetFilters } from '../FilterContext'
// sizes of the components dynamically, but this seems to be quite a bit less
// responsive compared to hardcoding the values.
export const filterMenuContext = React.createContext()
const useFilterMenuStyles = makeStyles(theme => {
const width = 22
return {
......@@ -70,18 +72,51 @@ const useFilterMenuStyles = makeStyles(theme => {
}
}
})
export const FilterMenu = React.memo(({
selected,
onSelectedChange,
open,
onOpenChange,
collapsed,
onCollapsedChange,
className,
children
}) => {
const styles = useFilterMenuStyles()
const { collapsed } = useContext(filterMenuContext)
const [size, setSize] = useState('medium')
const handleChange = useCallback((newValue) => {
if (newValue !== selected) {
onOpenChange(true)
} else {
onOpenChange(old => !old)
}
onSelectedChange && onSelectedChange(newValue)
}, [selected, onSelectedChange, onOpenChange])
return <div className={clsx(className, styles.root, collapsed && styles.collapsed)}>
{children}
<filterMenuContext.Provider value={{
selected: selected,
onChange: handleChange,
open: open,
onOpenChange: onOpenChange,
size: size,
onSizeChange: setSize,
collapsed: collapsed,
onCollapsedChange: onCollapsedChange
}}>
{children}
</filterMenuContext.Provider>
</div>
})
FilterMenu.propTypes = {
selected: PropTypes.string,
onSelectedChange: PropTypes.func,
open: PropTypes.bool,
onOpenChange: PropTypes.func,
collapsed: PropTypes.bool,
onCollapsedChange: PropTypes.func,
className: PropTypes.string,
children: PropTypes.node
}
......@@ -293,51 +328,6 @@ FilterMenuItem.defaultProps = {
depth: 0
}
export const filterMenuContext = React.createContext()
export const FilterMenuContext = React.memo(({
selected,
onSelectedChange,
open,
onOpenChange,
collapsed,
onCollapsedChange,
children
}) => {
const [size, setSize] = useState('medium')
const handleChange = useCallback((newValue) => {
if (newValue !== selected) {
onOpenChange(true)
} else {
onOpenChange(old => !old)
}
onSelectedChange && onSelectedChange(newValue)
}, [selected, onSelectedChange, onOpenChange])
return <filterMenuContext.Provider value={{
selected: selected,
onChange: handleChange,
open: open,
onOpenChange: onOpenChange,
size: size,
onSizeChange: setSize,
collapsed: collapsed,
onCollapsedChange: onCollapsedChange
}}>
{children}
</filterMenuContext.Provider>
})
FilterMenuContext.propTypes = {
selected: PropTypes.string,
onSelectedChange: PropTypes.func,
open: PropTypes.bool,
onOpenChange: PropTypes.func,
collapsed: PropTypes.bool,
onCollapsedChange: PropTypes.func,
children: PropTypes.node
}
const useFilterSubMenuStyles = makeStyles(theme => ({
root: {
width: '100%'
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment