-
Notifications
You must be signed in to change notification settings - Fork 4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(Sidebar): handle clicks properly (#3772)
* fix(Sidebar): handle clicks properly * fix lock
- Loading branch information
1 parent
62d2fed
commit 02b7b79
Showing
11 changed files
with
282 additions
and
387 deletions.
There are no files selected for viewing
138 changes: 57 additions & 81 deletions
138
docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,86 +1,62 @@ | ||
| import React, { Component } from 'react' | ||
| import { | ||
| Button, | ||
| Header, | ||
| Icon, | ||
| Image, | ||
| Menu, | ||
| Segment, | ||
| Sidebar, | ||
| } from 'semantic-ui-react' | ||
| import { useBooleanKnob } from '@stardust-ui/docs-components' | ||
| import React from 'react' | ||
| import { Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react' | ||
|
|
||
| export default class SidebarExampleMultiple extends Component { | ||
| state = { visible: false } | ||
| const SidebarExampleMultiple = () => { | ||
| const [visible, setVisible] = useBooleanKnob({ name: 'visible' }) | ||
|
|
||
| handleHideClick = () => this.setState({ visible: false }) | ||
| handleShowClick = () => this.setState({ visible: true }) | ||
| handleSidebarHide = () => this.setState({ visible: false }) | ||
| return ( | ||
| <Sidebar.Pushable as={Segment}> | ||
| <Sidebar | ||
| as={Menu} | ||
| animation='overlay' | ||
| direction='left' | ||
| icon='labeled' | ||
| inverted | ||
| onHide={() => setVisible(false)} | ||
| vertical | ||
| visible={visible} | ||
| width='thin' | ||
| > | ||
| <Menu.Item as='a'> | ||
| <Icon name='home' /> | ||
| Home | ||
| </Menu.Item> | ||
| <Menu.Item as='a'> | ||
| <Icon name='gamepad' /> | ||
| Games | ||
| </Menu.Item> | ||
| <Menu.Item as='a'> | ||
| <Icon name='camera' /> | ||
| Channels | ||
| </Menu.Item> | ||
| </Sidebar> | ||
|
|
||
| render() { | ||
| const { visible } = this.state | ||
| <Sidebar | ||
| as={Menu} | ||
| animation='overlay' | ||
| direction='right' | ||
| inverted | ||
| vertical | ||
| visible={visible} | ||
| > | ||
| <Menu.Item as='a' header> | ||
| File Permissions | ||
| </Menu.Item> | ||
| <Menu.Item as='a'>Share on Social</Menu.Item> | ||
| <Menu.Item as='a'>Share by E-mail</Menu.Item> | ||
| <Menu.Item as='a'>Edit Permissions</Menu.Item> | ||
| <Menu.Item as='a'>Delete Permanently</Menu.Item> | ||
| </Sidebar> | ||
|
|
||
| return ( | ||
| <div> | ||
| <Button.Group> | ||
| <Button disabled={visible} onClick={this.handleShowClick}> | ||
| Show sidebars | ||
| </Button> | ||
| <Button disabled={!visible} onClick={this.handleHideClick}> | ||
| Hide sidebars | ||
| </Button> | ||
| </Button.Group> | ||
|
|
||
| <Sidebar.Pushable as={Segment}> | ||
| <Sidebar | ||
| as={Menu} | ||
| animation='overlay' | ||
| direction='left' | ||
| icon='labeled' | ||
| inverted | ||
| onHide={this.handleSidebarHide} | ||
| vertical | ||
| visible={visible} | ||
| width='thin' | ||
| > | ||
| <Menu.Item as='a'> | ||
| <Icon name='home' /> | ||
| Home | ||
| </Menu.Item> | ||
| <Menu.Item as='a'> | ||
| <Icon name='gamepad' /> | ||
| Games | ||
| </Menu.Item> | ||
| <Menu.Item as='a'> | ||
| <Icon name='camera' /> | ||
| Channels | ||
| </Menu.Item> | ||
| </Sidebar> | ||
|
|
||
| <Sidebar | ||
| as={Menu} | ||
| animation='overlay' | ||
| direction='right' | ||
| inverted | ||
| vertical | ||
| visible={visible} | ||
| > | ||
| <Menu.Item as='a' header> | ||
| File Permissions | ||
| </Menu.Item> | ||
| <Menu.Item as='a'>Share on Social</Menu.Item> | ||
| <Menu.Item as='a'>Share by E-mail</Menu.Item> | ||
| <Menu.Item as='a'>Edit Permissions</Menu.Item> | ||
| <Menu.Item as='a'>Delete Permanently</Menu.Item> | ||
| </Sidebar> | ||
|
|
||
| <Sidebar.Pusher> | ||
| <Segment basic> | ||
| <Header as='h3'>Application Content</Header> | ||
| <Image src='/images/wireframe/paragraph.png' /> | ||
| </Segment> | ||
| </Sidebar.Pusher> | ||
| </Sidebar.Pushable> | ||
| </div> | ||
| ) | ||
| } | ||
| <Sidebar.Pusher> | ||
| <Segment basic> | ||
| <Header as='h3'>Application Content</Header> | ||
| <Image src='/images/wireframe/paragraph.png' /> | ||
| </Segment> | ||
| </Sidebar.Pusher> | ||
| </Sidebar.Pushable> | ||
| ) | ||
| } | ||
|
|
||
| export default SidebarExampleMultiple |
104 changes: 40 additions & 64 deletions
104
docs/src/examples/modules/Sidebar/States/SidebarExampleDimmed.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,44 @@ | ||
| import React, { Component } from 'react' | ||
| import { | ||
| Button, | ||
| Header, | ||
| Icon, | ||
| Image, | ||
| Menu, | ||
| Segment, | ||
| Sidebar, | ||
| } from 'semantic-ui-react' | ||
| import { useBooleanKnob } from '@stardust-ui/docs-components' | ||
| import React from 'react' | ||
| import { Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react' | ||
|
|
||
| export default class SidebarExampleDimmed extends Component { | ||
| state = { visible: false } | ||
| const SidebarExampleDimmed = () => { | ||
| const [visible, setVisible] = useBooleanKnob({ name: 'visible' }) | ||
|
|
||
| handleHideClick = () => this.setState({ visible: false }) | ||
| handleShowClick = () => this.setState({ visible: true }) | ||
| handleSidebarHide = () => this.setState({ visible: false }) | ||
| return ( | ||
| <Sidebar.Pushable as={Segment}> | ||
| <Sidebar | ||
| as={Menu} | ||
| animation='overlay' | ||
| icon='labeled' | ||
| inverted | ||
| onHide={() => setVisible(false)} | ||
| vertical | ||
| visible={visible} | ||
| width='thin' | ||
| > | ||
| <Menu.Item as='a'> | ||
| <Icon name='home' /> | ||
| Home | ||
| </Menu.Item> | ||
| <Menu.Item as='a'> | ||
| <Icon name='gamepad' /> | ||
| Games | ||
| </Menu.Item> | ||
| <Menu.Item as='a'> | ||
| <Icon name='camera' /> | ||
| Channels | ||
| </Menu.Item> | ||
| </Sidebar> | ||
|
|
||
| render() { | ||
| const { visible } = this.state | ||
|
|
||
| return ( | ||
| <div> | ||
| <Button.Group> | ||
| <Button disabled={visible} onClick={this.handleShowClick}> | ||
| Show sidebar | ||
| </Button> | ||
| <Button disabled={!visible} onClick={this.handleHideClick}> | ||
| Hide sidebar | ||
| </Button> | ||
| </Button.Group> | ||
|
|
||
| <Sidebar.Pushable as={Segment}> | ||
| <Sidebar | ||
| as={Menu} | ||
| animation='overlay' | ||
| icon='labeled' | ||
| inverted | ||
| onHide={this.handleSidebarHide} | ||
| vertical | ||
| visible={visible} | ||
| width='thin' | ||
| > | ||
| <Menu.Item as='a'> | ||
| <Icon name='home' /> | ||
| Home | ||
| </Menu.Item> | ||
| <Menu.Item as='a'> | ||
| <Icon name='gamepad' /> | ||
| Games | ||
| </Menu.Item> | ||
| <Menu.Item as='a'> | ||
| <Icon name='camera' /> | ||
| Channels | ||
| </Menu.Item> | ||
| </Sidebar> | ||
|
|
||
| <Sidebar.Pusher dimmed={visible}> | ||
| <Segment basic> | ||
| <Header as='h3'>Application Content</Header> | ||
| <Image src='/images/wireframe/paragraph.png' /> | ||
| </Segment> | ||
| </Sidebar.Pusher> | ||
| </Sidebar.Pushable> | ||
| </div> | ||
| ) | ||
| } | ||
| <Sidebar.Pusher dimmed={visible}> | ||
| <Segment basic> | ||
| <Header as='h3'>Application Content</Header> | ||
| <Image src='/images/wireframe/paragraph.png' /> | ||
| </Segment> | ||
| </Sidebar.Pusher> | ||
| </Sidebar.Pushable> | ||
| ) | ||
| } | ||
|
|
||
| export default SidebarExampleDimmed |
104 changes: 40 additions & 64 deletions
104
docs/src/examples/modules/Sidebar/Types/SidebarExampleSidebar.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,68 +1,44 @@ | ||
| import React, { Component } from 'react' | ||
| import { | ||
| Button, | ||
| Header, | ||
| Icon, | ||
| Image, | ||
| Menu, | ||
| Segment, | ||
| Sidebar, | ||
| } from 'semantic-ui-react' | ||
| import { useBooleanKnob } from '@stardust-ui/docs-components' | ||
| import React from 'react' | ||
| import { Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react' | ||
|
|
||
| export default class SidebarExampleSidebar extends Component { | ||
| state = { visible: false } | ||
| const SidebarExampleSidebar = () => { | ||
| const [visible, setVisible] = useBooleanKnob({ name: 'visible' }) | ||
|
|
||
| handleHideClick = () => this.setState({ visible: false }) | ||
| handleShowClick = () => this.setState({ visible: true }) | ||
| handleSidebarHide = () => this.setState({ visible: false }) | ||
| return ( | ||
| <Sidebar.Pushable as={Segment}> | ||
| <Sidebar | ||
| as={Menu} | ||
| animation='overlay' | ||
| icon='labeled' | ||
| inverted | ||
| onHide={() => setVisible(false)} | ||
| vertical | ||
| visible={visible} | ||
| width='thin' | ||
| > | ||
| <Menu.Item as='a'> | ||
| <Icon name='home' /> | ||
| Home | ||
| </Menu.Item> | ||
| <Menu.Item as='a'> | ||
| <Icon name='gamepad' /> | ||
| Games | ||
| </Menu.Item> | ||
| <Menu.Item as='a'> | ||
| <Icon name='camera' /> | ||
| Channels | ||
| </Menu.Item> | ||
| </Sidebar> | ||
|
|
||
| render() { | ||
| const { visible } = this.state | ||
|
|
||
| return ( | ||
| <div> | ||
| <Button.Group> | ||
| <Button disabled={visible} onClick={this.handleShowClick}> | ||
| Show sidebar | ||
| </Button> | ||
| <Button disabled={!visible} onClick={this.handleHideClick}> | ||
| Hide sidebar | ||
| </Button> | ||
| </Button.Group> | ||
|
|
||
| <Sidebar.Pushable as={Segment}> | ||
| <Sidebar | ||
| as={Menu} | ||
| animation='overlay' | ||
| icon='labeled' | ||
| inverted | ||
| onHide={this.handleSidebarHide} | ||
| vertical | ||
| visible={visible} | ||
| width='thin' | ||
| > | ||
| <Menu.Item as='a'> | ||
| <Icon name='home' /> | ||
| Home | ||
| </Menu.Item> | ||
| <Menu.Item as='a'> | ||
| <Icon name='gamepad' /> | ||
| Games | ||
| </Menu.Item> | ||
| <Menu.Item as='a'> | ||
| <Icon name='camera' /> | ||
| Channels | ||
| </Menu.Item> | ||
| </Sidebar> | ||
|
|
||
| <Sidebar.Pusher> | ||
| <Segment basic> | ||
| <Header as='h3'>Application Content</Header> | ||
| <Image src='/images/wireframe/paragraph.png' /> | ||
| </Segment> | ||
| </Sidebar.Pusher> | ||
| </Sidebar.Pushable> | ||
| </div> | ||
| ) | ||
| } | ||
| <Sidebar.Pusher> | ||
| <Segment basic> | ||
| <Header as='h3'>Application Content</Header> | ||
| <Image src='/images/wireframe/paragraph.png' /> | ||
| </Segment> | ||
| </Sidebar.Pusher> | ||
| </Sidebar.Pushable> | ||
| ) | ||
| } | ||
|
|
||
| export default SidebarExampleSidebar |
Oops, something went wrong.