Skip to content

Commit f39a746

Browse files
layershifterlayershifter
committed
wip
1 parent af032c3 commit f39a746

File tree

10 files changed

+171
-10
lines changed

10 files changed

+171
-10
lines changed

‎docs/app/Examples/collections/Menu/Content/Buttons.js

+20
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React from 'react'
2+
import { Button, Menu } from 'stardust'
3+
4+
// TODO: Update <Button> usage after its update to v1 API
5+
6+
const Buttons = () => {
7+
return (
8+
<Menu>
9+
<Menu.Item>
10+
<Button className='primary'>Sign up</Button>
11+
</Menu.Item>
12+
13+
<Menu.Item>
14+
<Button>Log-in</Button>
15+
</Menu.Item>
16+
</Menu>
17+
)
18+
}
19+
20+
export default Buttons

‎docs/app/Examples/collections/Menu/Content/LinkItem.js

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import React from 'react'
2+
import { Button, Menu } from 'stardust'
3+
4+
const handleClick = () => console.log(1)
5+
6+
const LinkItem = () => {
7+
return (
8+
<Menu>
9+
<Menu.Item href="http://www.google.com">Visit Google</Menu.Item>
10+
<Menu.Item link>Link via prop</Menu.Item>
11+
<Menu.Item onClick={handleClick}>Javascript Link</Menu.Item>
12+
</Menu>
13+
)
14+
}
15+
16+
export default LinkItem

‎docs/app/Examples/collections/Menu/Content/Menus.js

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import React from 'react'
2+
import { Button, Menu } from 'stardust'
3+
4+
const Menus = () => {
5+
return (
6+
<Menu>
7+
<Menu.Item href="http://www.google.com">Visit Google</Menu.Item>
8+
<Menu.Item link>Link via prop</Menu.Item>
9+
<Menu.Item onClick={}>Javascript Link</Menu.Item>
10+
</Menu>
11+
)
12+
}
13+
14+
export default Menus

‎docs/app/Examples/collections/Menu/Content/SubMenu.js

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React from 'react'
2+
import { Button, Icon, Input, Menu } from 'stardust'
3+
4+
const {Item} = Menu
5+
6+
const SubMenu = () => {
7+
return (
8+
<Menu vertical>
9+
<Item>
10+
<Input placeholder="Search..." />
11+
</Item>
12+
13+
<Item>
14+
Home
15+
16+
<Menu>
17+
<Item active>Search</Item>
18+
<Item>Add</Item>
19+
<Item>Remove</Item>
20+
</Menu>
21+
</Item>
22+
23+
<Item>
24+
<Icon name="grid layout" /> Browse
25+
</Item>
26+
<Item icon='grid layout'>Browse</Item>
27+
<Item>Messages</Item>
28+
29+
<div className="ui dropdown item">
30+
More
31+
32+
<i className="dropdown icon"></i>
33+
<div className="menu">
34+
<a className="item"><i className="edit icon"></i> Edit Profile</a>
35+
<a className="item"><i className="globe icon"></i> Choose Language</a>
36+
<a className="item"><i className="settings icon"></i> Account Settings</a>
37+
</div>
38+
</div>
39+
</Menu>
40+
)
41+
}
42+
43+
export default SubMenu

‎docs/app/Examples/collections/Menu/Content/index.js

+52
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,11 @@
11
import React from 'react'
2+
23
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
34
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
45

6+
// TODO: Add example with <Popup> after it will be added
7+
// TODO: Add example with <Search> after it will be added
8+
59
const Content = () => {
610
return (
711
<ExampleSection title='Content'>
@@ -17,6 +21,54 @@ const Content = () => {
1721
description='A vertical menu item can include any type of text content'
1822
examplePath='collections/Menu/Content/Text'
1923
/>
24+
25+
{/*<ComponentExample*/}
26+
{/*title='Input'*/}
27+
{/*description='A menu item can contain an input inside of it'*/}
28+
{/*examplePath='collections/Menu/Content/Input'*/}
29+
{/*/>*/}
30+
31+
{/*<ComponentExample*/}
32+
{/*title='Button'*/}
33+
{/*description='A menu item can contain a button inside of it'*/}
34+
{/*examplePath='collections/Menu/Content/Buttons'*/}
35+
{/*/>*/}
36+
37+
{/*<ComponentExample*/}
38+
{/*title='Link Item'*/}
39+
{/*description='A menu may contain a link item, or an item formatted as if it is a link'*/}
40+
{/*examplePath='collections/Menu/Content/LinkItem'*/}
41+
{/*/>*/}
42+
43+
{/*<ComponentExample*/}
44+
{/*title='Dropdown Item'*/}
45+
{/*description='An item may contain a nested menu in a dropdown'*/}
46+
{/*examplePath='collections/Menu/Content/LinkItem'*/}
47+
{/*/>*/}
48+
49+
{/*<ComponentExample*/}
50+
{/*title='Popup Menu'*/}
51+
{/*description='A menu item may show a large menu, or additional content using a popup'*/}
52+
{/*examplePath='collections/Menu/Content/Popups'*/}
53+
{/*/>*/}
54+
55+
{/*<ComponentExample*/}
56+
{/*title='Search'*/}
57+
{/*description='A menu can contain a search input'*/}
58+
{/*examplePath='collections/Menu/Content/Search'*/}
59+
{/*/>*/}
60+
61+
{/*<ComponentExample*/}
62+
{/*title='Menu'*/}
63+
{/*description='A menu may contain another menu group in the same level as menu items'*/}
64+
{/*examplePath='collections/Menu/Content/Menus'*/}
65+
{/*/>*/}
66+
67+
<ComponentExample
68+
title='Sub Menu'
69+
description='A menu item may contain another menu nested inside that acts as a grouped sub-menu'
70+
examplePath='collections/Menu/Content/SubMenu'
71+
/>
2072
</ExampleSection>
2173
)
2274
}

‎docs/app/Examples/collections/Menu/Types/Width.js

+6-6
Original file line numberDiff line numberDiff line change
@@ -5,15 +5,15 @@ const Width = () => {
55
return (
66
<div>
77
<Menu widths={3}>
8-
<Menu.Item active>Editorials</Menu.Item>
9-
<Menu.Item>Reviews</Menu.Item>
10-
<Menu.Item>Upcoming Events</Menu.Item>
8+
<Menu.Item active link>Editorials</Menu.Item>
9+
<Menu.Item link>Reviews</Menu.Item>
10+
<Menu.Item link>Upcoming Events</Menu.Item>
1111
</Menu>
1212

1313
<Menu widths='three'>
14-
<Menu.Item>Editorials</Menu.Item>
15-
<Menu.Item active>Reviews</Menu.Item>
16-
<Menu.Item>Upcoming Events</Menu.Item>
14+
<Menu.Item link>Editorials</Menu.Item>
15+
<Menu.Item active link>Reviews</Menu.Item>
16+
<Menu.Item link>Upcoming Events</Menu.Item>
1717
</Menu>
1818
</div>
1919
)

‎docs/app/Examples/collections/Menu/Types/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
import React from 'react'
2+
23
import ExampleSection from 'docs/app/Components/ComponentDoc/ExampleSection'
34
import ComponentExample from 'docs/app/Components/ComponentDoc/ComponentExample'
45

‎docs/app/Examples/collections/Menu/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ const MenuExamples = () => {
77
return (
88
<div>
99
<Types />
10-
<Content/>
10+
<Content />
1111
</div>
1212
)
1313
}

‎src/collections/Menu/Menu.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -81,10 +81,11 @@ export default class Menu extends Component {
8181

8282
return Children.map(children, (child, i) => {
8383
const isItem = child.type === MenuItem
84+
const isLink = _.has(child, 'props.href') || _.has(child, 'props.link') || _.has(child, 'props.onClick')
8485

8586
if (isItem) {
8687
const onClick = (e) => {
87-
this.handleItemClick(e, i)
88+
if (isLink) this.handleItemClick(e, i)
8889
if (child.props.onClick) child.props.onClick(e, i)
8990
}
9091

‎src/collections/Menu/MenuItem.js

+16-2
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,21 @@ import {
88
} from '../../lib'
99

1010
function MenuItem(props) {
11-
const { active, children, className, header } = props
11+
const { active, children, className, header, href, link, onClick } = props
1212
const classes = cx(
1313
className,
1414
useKeyOnly(active, 'active'),
1515
useKeyOnly(header, 'header'),
16+
useKeyOnly(link, 'link'),
1617
'item',
1718
)
19+
const handleClick = (e) => {
20+
if (onClick) onClick(e)
21+
}
1822
const rest = getUnhandledProps(MenuItem, props)
23+
const ItemComponent = href || onClick ? 'a' : 'div'
1924

20-
return <a {...rest} className={classes}>{children}</a>
25+
return <ItemComponent {...rest} className={classes} onClick={handleClick}>{children}</ItemComponent>
2126
}
2227

2328
MenuItem._meta = {
@@ -36,8 +41,17 @@ MenuItem.propTypes = {
3641
/** Classes that will be added to the MenuItem className. */
3742
className: PropTypes.string,
3843

44+
/** A menu item can be link. */
45+
link: PropTypes.bool,
46+
3947
/** A menu item may include a header or may itself be a header. */
4048
header: PropTypes.bool,
49+
50+
/** Render as an `a` tag instead of a `div` and adds the href attribute. */
51+
href: PropTypes.string,
52+
53+
/** Render as an `a` tag instead of a `div` and called with event on MenuItem click. */
54+
onClick: PropTypes.func,
4155
}
4256

4357
export default MenuItem

0 commit comments

Comments
 (0)