Menu component refactoring

This commit is contained in:
tmshv committed 2019-10-14 18:24:00 +03:00
1 parent 3f4ffdb93a
commit 36ed564231
1 file changed
+14 -32
+14 -32
View File
@@ -1,9 +1,7 @@
import React from 'react'
const getPathWithNoTrailingSlas = require('../lib/url').getPathWithNoTrailingSlash
import {getPathWithNoTrailingSlash} from '../lib/url'
const hasSubmenu = item => !!item.items
const doDrawSubmenu = item => false //item.active && hasSubmenu(item)
const itemUrl = url => getPathWithNoTrailingSlas(url)
const itemUrl = url => getPathWithNoTrailingSlash(url)
const selectedClassName = flag => flag
? 'selected'
@@ -13,10 +11,12 @@ const hmenuCurClassName = flag => flag
? 'HMenu__item--cur'
: ''
const MenuItem = ({ active, text, url }) => (active
? <span>{text}</span>
: <a href={itemUrl(url)}>{text}</a>
)
const MenuItem = ({ active, text, url }) => active
? (
<span>{text}</span>
) : (
<a href={itemUrl(url)}>{text}</a>
)
const MenuToggle = () => (
<div className="HMenu__toggle">
@@ -24,32 +24,14 @@ const MenuToggle = () => (
</div>
)
export const Menu = ({ items }) => {
const content = items.map((item, index) => (
<li key={index}
className={`HMenu__item ${hmenuCurClassName(item.highlighted)} ${item.color} ${selectedClassName(item.highlighted)}`}
>
<MenuItem {...item} />
export const Menu = ({ items }) => (
<menu className="main-menu HMenu" data-toggle-width="1024">
<MenuToggle />
{!doDrawSubmenu(item) ? null : (
<Submenu key={index} items={item.items} />
)}
</li>
))
return (
<menu className="main-menu HMenu" data-toggle-width="1024">
<MenuToggle />
{content}
</menu>
)
}
const Submenu = ({ items }) => (
<menu className="main-menu__submenu">
{items.map((item, index) => (
<li key={index} className={`${item.color} ${selectedClassName(item.active)}`}>
<li key={index}
className={`HMenu__item ${hmenuCurClassName(item.highlighted)} ${item.color} ${selectedClassName(item.highlighted)}`}
>
<MenuItem {...item} />
</li>
))}