Skip to content

Commit 02b7b79

Browse files
layershifterlayershifter
authored
fix(Sidebar): handle clicks properly (#3772)
* fix(Sidebar): handle clicks properly * fix lock
1 parent 62d2fed commit 02b7b79

11 files changed

Lines changed: 282 additions & 387 deletions

File tree

‎docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js‎

Lines changed: 57 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,86 +1,62 @@
1-
import React, { Component } from 'react'
2-
import {
3-
Button,
4-
Header,
5-
Icon,
6-
Image,
7-
Menu,
8-
Segment,
9-
Sidebar,
10-
} from 'semantic-ui-react'
1+
import { useBooleanKnob } from '@stardust-ui/docs-components'
2+
import React from 'react'
3+
import { Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react'
114

12-
export default class SidebarExampleMultiple extends Component {
13-
state = { visible: false }
5+
const SidebarExampleMultiple = () => {
6+
const [visible, setVisible] = useBooleanKnob({ name: 'visible' })
147

15-
handleHideClick = () => this.setState({ visible: false })
16-
handleShowClick = () => this.setState({ visible: true })
17-
handleSidebarHide = () => this.setState({ visible: false })
8+
return (
9+
<Sidebar.Pushable as={Segment}>
10+
<Sidebar
11+
as={Menu}
12+
animation='overlay'
13+
direction='left'
14+
icon='labeled'
15+
inverted
16+
onHide={() => setVisible(false)}
17+
vertical
18+
visible={visible}
19+
width='thin'
20+
>
21+
<Menu.Item as='a'>
22+
<Icon name='home' />
23+
Home
24+
</Menu.Item>
25+
<Menu.Item as='a'>
26+
<Icon name='gamepad' />
27+
Games
28+
</Menu.Item>
29+
<Menu.Item as='a'>
30+
<Icon name='camera' />
31+
Channels
32+
</Menu.Item>
33+
</Sidebar>
1834

19-
render() {
20-
const { visible } = this.state
35+
<Sidebar
36+
as={Menu}
37+
animation='overlay'
38+
direction='right'
39+
inverted
40+
vertical
41+
visible={visible}
42+
>
43+
<Menu.Item as='a' header>
44+
File Permissions
45+
</Menu.Item>
46+
<Menu.Item as='a'>Share on Social</Menu.Item>
47+
<Menu.Item as='a'>Share by E-mail</Menu.Item>
48+
<Menu.Item as='a'>Edit Permissions</Menu.Item>
49+
<Menu.Item as='a'>Delete Permanently</Menu.Item>
50+
</Sidebar>
2151

22-
return (
23-
<div>
24-
<Button.Group>
25-
<Button disabled={visible} onClick={this.handleShowClick}>
26-
Show sidebars
27-
</Button>
28-
<Button disabled={!visible} onClick={this.handleHideClick}>
29-
Hide sidebars
30-
</Button>
31-
</Button.Group>
32-
33-
<Sidebar.Pushable as={Segment}>
34-
<Sidebar
35-
as={Menu}
36-
animation='overlay'
37-
direction='left'
38-
icon='labeled'
39-
inverted
40-
onHide={this.handleSidebarHide}
41-
vertical
42-
visible={visible}
43-
width='thin'
44-
>
45-
<Menu.Item as='a'>
46-
<Icon name='home' />
47-
Home
48-
</Menu.Item>
49-
<Menu.Item as='a'>
50-
<Icon name='gamepad' />
51-
Games
52-
</Menu.Item>
53-
<Menu.Item as='a'>
54-
<Icon name='camera' />
55-
Channels
56-
</Menu.Item>
57-
</Sidebar>
58-
59-
<Sidebar
60-
as={Menu}
61-
animation='overlay'
62-
direction='right'
63-
inverted
64-
vertical
65-
visible={visible}
66-
>
67-
<Menu.Item as='a' header>
68-
File Permissions
69-
</Menu.Item>
70-
<Menu.Item as='a'>Share on Social</Menu.Item>
71-
<Menu.Item as='a'>Share by E-mail</Menu.Item>
72-
<Menu.Item as='a'>Edit Permissions</Menu.Item>
73-
<Menu.Item as='a'>Delete Permanently</Menu.Item>
74-
</Sidebar>
75-
76-
<Sidebar.Pusher>
77-
<Segment basic>
78-
<Header as='h3'>Application Content</Header>
79-
<Image src='/images/wireframe/paragraph.png' />
80-
</Segment>
81-
</Sidebar.Pusher>
82-
</Sidebar.Pushable>
83-
</div>
84-
)
85-
}
52+
<Sidebar.Pusher>
53+
<Segment basic>
54+
<Header as='h3'>Application Content</Header>
55+
<Image src='/images/wireframe/paragraph.png' />
56+
</Segment>
57+
</Sidebar.Pusher>
58+
</Sidebar.Pushable>
59+
)
8660
}
61+
62+
export default SidebarExampleMultiple

‎docs/src/examples/modules/Sidebar/States/SidebarExampleDimmed.js‎

Lines changed: 40 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,44 @@
1-
import React, { Component } from 'react'
2-
import {
3-
Button,
4-
Header,
5-
Icon,
6-
Image,
7-
Menu,
8-
Segment,
9-
Sidebar,
10-
} from 'semantic-ui-react'
1+
import { useBooleanKnob } from '@stardust-ui/docs-components'
2+
import React from 'react'
3+
import { Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react'
114

12-
export default class SidebarExampleDimmed extends Component {
13-
state = { visible: false }
5+
const SidebarExampleDimmed = () => {
6+
const [visible, setVisible] = useBooleanKnob({ name: 'visible' })
147

15-
handleHideClick = () => this.setState({ visible: false })
16-
handleShowClick = () => this.setState({ visible: true })
17-
handleSidebarHide = () => this.setState({ visible: false })
8+
return (
9+
<Sidebar.Pushable as={Segment}>
10+
<Sidebar
11+
as={Menu}
12+
animation='overlay'
13+
icon='labeled'
14+
inverted
15+
onHide={() => setVisible(false)}
16+
vertical
17+
visible={visible}
18+
width='thin'
19+
>
20+
<Menu.Item as='a'>
21+
<Icon name='home' />
22+
Home
23+
</Menu.Item>
24+
<Menu.Item as='a'>
25+
<Icon name='gamepad' />
26+
Games
27+
</Menu.Item>
28+
<Menu.Item as='a'>
29+
<Icon name='camera' />
30+
Channels
31+
</Menu.Item>
32+
</Sidebar>
1833

19-
render() {
20-
const { visible } = this.state
21-
22-
return (
23-
<div>
24-
<Button.Group>
25-
<Button disabled={visible} onClick={this.handleShowClick}>
26-
Show sidebar
27-
</Button>
28-
<Button disabled={!visible} onClick={this.handleHideClick}>
29-
Hide sidebar
30-
</Button>
31-
</Button.Group>
32-
33-
<Sidebar.Pushable as={Segment}>
34-
<Sidebar
35-
as={Menu}
36-
animation='overlay'
37-
icon='labeled'
38-
inverted
39-
onHide={this.handleSidebarHide}
40-
vertical
41-
visible={visible}
42-
width='thin'
43-
>
44-
<Menu.Item as='a'>
45-
<Icon name='home' />
46-
Home
47-
</Menu.Item>
48-
<Menu.Item as='a'>
49-
<Icon name='gamepad' />
50-
Games
51-
</Menu.Item>
52-
<Menu.Item as='a'>
53-
<Icon name='camera' />
54-
Channels
55-
</Menu.Item>
56-
</Sidebar>
57-
58-
<Sidebar.Pusher dimmed={visible}>
59-
<Segment basic>
60-
<Header as='h3'>Application Content</Header>
61-
<Image src='/images/wireframe/paragraph.png' />
62-
</Segment>
63-
</Sidebar.Pusher>
64-
</Sidebar.Pushable>
65-
</div>
66-
)
67-
}
34+
<Sidebar.Pusher dimmed={visible}>
35+
<Segment basic>
36+
<Header as='h3'>Application Content</Header>
37+
<Image src='/images/wireframe/paragraph.png' />
38+
</Segment>
39+
</Sidebar.Pusher>
40+
</Sidebar.Pushable>
41+
)
6842
}
43+
44+
export default SidebarExampleDimmed

‎docs/src/examples/modules/Sidebar/Types/SidebarExampleSidebar.js‎

Lines changed: 40 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,44 @@
1-
import React, { Component } from 'react'
2-
import {
3-
Button,
4-
Header,
5-
Icon,
6-
Image,
7-
Menu,
8-
Segment,
9-
Sidebar,
10-
} from 'semantic-ui-react'
1+
import { useBooleanKnob } from '@stardust-ui/docs-components'
2+
import React from 'react'
3+
import { Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react'
114

12-
export default class SidebarExampleSidebar extends Component {
13-
state = { visible: false }
5+
const SidebarExampleSidebar = () => {
6+
const [visible, setVisible] = useBooleanKnob({ name: 'visible' })
147

15-
handleHideClick = () => this.setState({ visible: false })
16-
handleShowClick = () => this.setState({ visible: true })
17-
handleSidebarHide = () => this.setState({ visible: false })
8+
return (
9+
<Sidebar.Pushable as={Segment}>
10+
<Sidebar
11+
as={Menu}
12+
animation='overlay'
13+
icon='labeled'
14+
inverted
15+
onHide={() => setVisible(false)}
16+
vertical
17+
visible={visible}
18+
width='thin'
19+
>
20+
<Menu.Item as='a'>
21+
<Icon name='home' />
22+
Home
23+
</Menu.Item>
24+
<Menu.Item as='a'>
25+
<Icon name='gamepad' />
26+
Games
27+
</Menu.Item>
28+
<Menu.Item as='a'>
29+
<Icon name='camera' />
30+
Channels
31+
</Menu.Item>
32+
</Sidebar>
1833

19-
render() {
20-
const { visible } = this.state
21-
22-
return (
23-
<div>
24-
<Button.Group>
25-
<Button disabled={visible} onClick={this.handleShowClick}>
26-
Show sidebar
27-
</Button>
28-
<Button disabled={!visible} onClick={this.handleHideClick}>
29-
Hide sidebar
30-
</Button>
31-
</Button.Group>
32-
33-
<Sidebar.Pushable as={Segment}>
34-
<Sidebar
35-
as={Menu}
36-
animation='overlay'
37-
icon='labeled'
38-
inverted
39-
onHide={this.handleSidebarHide}
40-
vertical
41-
visible={visible}
42-
width='thin'
43-
>
44-
<Menu.Item as='a'>
45-
<Icon name='home' />
46-
Home
47-
</Menu.Item>
48-
<Menu.Item as='a'>
49-
<Icon name='gamepad' />
50-
Games
51-
</Menu.Item>
52-
<Menu.Item as='a'>
53-
<Icon name='camera' />
54-
Channels
55-
</Menu.Item>
56-
</Sidebar>
57-
58-
<Sidebar.Pusher>
59-
<Segment basic>
60-
<Header as='h3'>Application Content</Header>
61-
<Image src='/images/wireframe/paragraph.png' />
62-
</Segment>
63-
</Sidebar.Pusher>
64-
</Sidebar.Pushable>
65-
</div>
66-
)
67-
}
34+
<Sidebar.Pusher>
35+
<Segment basic>
36+
<Header as='h3'>Application Content</Header>
37+
<Image src='/images/wireframe/paragraph.png' />
38+
</Segment>
39+
</Sidebar.Pusher>
40+
</Sidebar.Pushable>
41+
)
6842
}
43+
44+
export default SidebarExampleSidebar

0 commit comments

Comments
 (0)