-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Sidebar): add lifecycle handlers (#2845)
* feat(Sidebar): add `closable` prop * refactor(eventStack): make eventStack immutable * refactor(eventStack): make eventStack immutable * Merge branch 'refactor/event-stack' of https://github.com/Semantic-Org/Semantic-UI-React into feat/sidebar-closable-property # Conflicts: # src/lib/eventStack/EventPool.js # src/lib/eventStack/EventSet.js # src/lib/eventStack/EventStack.js # src/lib/eventStack/EventTarget.js # test/specs/lib/eventStack/EventPool-test.js # test/specs/lib/eventStack/EventStack-test.js * docs(Sidebar): update examples * test(Sidebar): cover component with tests * rename Signed-off-by: Oleksandr Fediashov <[email protected]> * restore delete Signed-off-by: Oleksandr Fediashov <[email protected]> * restore delete Signed-off-by: Oleksandr Fediashov <[email protected]> * restore delete Signed-off-by: Oleksandr Fediashov <[email protected]> * restore delete Signed-off-by: Oleksandr Fediashov <[email protected]> * restore delete Signed-off-by: Oleksandr Fediashov <[email protected]> * restore delete Signed-off-by: Oleksandr Fediashov <[email protected]> * restore delete Signed-off-by: Oleksandr Fediashov <[email protected]> * restore chmod Signed-off-by: Oleksandr Fediashov <[email protected]> * restore Signed-off-by: Oleksandr Fediashov <[email protected]> * restore chmod * restore Signed-off-by: Oleksandr Fediashov <[email protected]> * restore Signed-off-by: Oleksandr Fediashov <[email protected]> * restore chmod * restore Signed-off-by: Oleksandr Fediashov <[email protected]> * restore Signed-off-by: Oleksandr Fediashov <[email protected]> * restore Signed-off-by: Oleksandr Fediashov <[email protected]> * restore Signed-off-by: Oleksandr Fediashov <[email protected]> * restore Signed-off-by: Oleksandr Fediashov <[email protected]> * restore Signed-off-by: Oleksandr Fediashov <[email protected]> * fix(Sidebar): fix duplicate onHide call Signed-off-by: Oleksandr Fediashov <[email protected]> * docs(Sidebar): fix examples, add example with callbacks Signed-off-by: Oleksandr Fediashov <[email protected]>
- Loading branch information
1 parent
3a594ba
commit 0d00166
Showing
43 changed files
with
904 additions
and
1,028 deletions.
There are no files selected for viewing
71 changes: 71 additions & 0 deletions
71
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 |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| import React, { Component } from 'react' | ||
| import { Button, Header, Icon, Image, Menu, Segment, Sidebar } from 'semantic-ui-react' | ||
|
|
||
| export default class SidebarExampleMultiple extends Component { | ||
| state = { visible: false } | ||
|
|
||
| handleButtonClick = () => this.setState({ visible: !this.state.visible }) | ||
|
|
||
| handleSidebarHide = () => this.setState({ visible: false }) | ||
|
|
||
| render() { | ||
| const { visible } = this.state | ||
|
|
||
| return ( | ||
| <div> | ||
| <Button onClick={this.handleButtonClick}>Toggle visibility</Button> | ||
|
|
||
| <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='/assets/images/wireframe/paragraph.png' /> | ||
| </Segment> | ||
| </Sidebar.Pusher> | ||
| </Sidebar.Pushable> | ||
| </div> | ||
| ) | ||
| } | ||
| } |
149 changes: 149 additions & 0 deletions
149
docs/src/examples/modules/Sidebar/Examples/SidebarExampleTransitions.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 |
|---|---|---|
| @@ -0,0 +1,149 @@ | ||
| import PropTypes from 'prop-types' | ||
| import React, { Component } from 'react' | ||
| import { | ||
| Button, | ||
| Checkbox, | ||
| Grid, | ||
| Header, | ||
| Icon, | ||
| Image, | ||
| Menu, | ||
| Segment, | ||
| Sidebar, | ||
| } from 'semantic-ui-react' | ||
|
|
||
| const HorizontalSidebar = ({ animation, direction, visible }) => ( | ||
| <Sidebar as={Segment} animation={animation} direction={direction} visible={visible}> | ||
| <Grid textAlign='center'> | ||
| <Grid.Row columns={1}> | ||
| <Grid.Column> | ||
| <Header as='h3'>New Content Awaits</Header> | ||
| </Grid.Column> | ||
| </Grid.Row> | ||
| <Grid columns={3} divided> | ||
| <Grid.Column> | ||
| <Image src='/assets/images/wireframe/media-paragraph.png' /> | ||
| </Grid.Column> | ||
| <Grid.Column> | ||
| <Image src='/assets/images/wireframe/media-paragraph.png' /> | ||
| </Grid.Column> | ||
| <Grid.Column> | ||
| <Image src='/assets/images/wireframe/media-paragraph.png' /> | ||
| </Grid.Column> | ||
| </Grid> | ||
| </Grid> | ||
| </Sidebar> | ||
| ) | ||
|
|
||
| HorizontalSidebar.propTypes = { | ||
| animation: PropTypes.string, | ||
| direction: PropTypes.string, | ||
| visible: PropTypes.bool, | ||
| } | ||
|
|
||
| const VerticalSidebar = ({ animation, direction, visible }) => ( | ||
| <Sidebar | ||
| as={Menu} | ||
| animation={animation} | ||
| direction={direction} | ||
| icon='labeled' | ||
| inverted | ||
| 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> | ||
| ) | ||
|
|
||
| VerticalSidebar.propTypes = { | ||
| animation: PropTypes.string, | ||
| direction: PropTypes.string, | ||
| visible: PropTypes.bool, | ||
| } | ||
|
|
||
| export default class SidebarExampleTransitions extends Component { | ||
| state = { | ||
| animation: 'overlay', | ||
| direction: 'left', | ||
| dimmed: false, | ||
| visible: false, | ||
| } | ||
|
|
||
| handleAnimationChange = animation => () => | ||
| this.setState({ animation, visible: !this.state.visible }) | ||
|
|
||
| handleDimmedChange = (e, { checked }) => this.setState({ dimmed: checked }) | ||
|
|
||
| handleDirectionChange = direction => () => this.setState({ direction, visible: false }) | ||
|
|
||
| render() { | ||
| const { animation, dimmed, direction, visible } = this.state | ||
| const vertical = direction === 'bottom' || direction === 'top' | ||
|
|
||
| return ( | ||
| <div> | ||
| <Checkbox checked={dimmed} label='Dim Page' onChange={this.handleDimmedChange} toggle /> | ||
|
|
||
| <Header as='h5'>Direction</Header> | ||
| <Button.Group> | ||
| <Button active={direction === 'left'} onClick={this.handleDirectionChange('left')}> | ||
| Left | ||
| </Button> | ||
| <Button active={direction === 'right'} onClick={this.handleDirectionChange('right')}> | ||
| Right | ||
| </Button> | ||
| <Button active={direction === 'top'} onClick={this.handleDirectionChange('top')}> | ||
| Top | ||
| </Button> | ||
| <Button active={direction === 'bottom'} onClick={this.handleDirectionChange('bottom')}> | ||
| Bottom | ||
| </Button> | ||
| </Button.Group> | ||
|
|
||
| <Header as='h5'>All Direction Animations</Header> | ||
| <Button onClick={this.handleAnimationChange('overlay')}>Overlay</Button> | ||
| <Button onClick={this.handleAnimationChange('push')}>Push</Button> | ||
| <Button onClick={this.handleAnimationChange('scale down')}>Scale Down</Button> | ||
|
|
||
| <Header as='h5'>Vertical-Only Animations</Header> | ||
| <Button disabled={vertical} onClick={this.handleAnimationChange('uncover')}> | ||
| Uncover | ||
| </Button> | ||
| <Button disabled={vertical} onClick={this.handleAnimationChange('slide along')}> | ||
| Slide Along | ||
| </Button> | ||
| <Button disabled={vertical} onClick={this.handleAnimationChange('slide out')}> | ||
| Slide Out | ||
| </Button> | ||
|
|
||
| <Sidebar.Pushable as={Segment}> | ||
| {vertical ? ( | ||
| <HorizontalSidebar animation={animation} direction={direction} visible={visible} /> | ||
| ) : null} | ||
| {vertical ? null : ( | ||
| <VerticalSidebar animation={animation} direction={direction} visible={visible} /> | ||
| )} | ||
|
|
||
| <Sidebar.Pusher dimmed={dimmed && visible}> | ||
| <Segment basic> | ||
| <Header as='h3'>Application Content</Header> | ||
| <Image src='/assets/images/wireframe/paragraph.png' /> | ||
| </Segment> | ||
| </Sidebar.Pusher> | ||
| </Sidebar.Pushable> | ||
| </div> | ||
| ) | ||
| } | ||
| } |
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 |
|---|---|---|
| @@ -0,0 +1,116 @@ | ||
| import React from 'react' | ||
| import { Icon, Table } from 'semantic-ui-react' | ||
|
|
||
| import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample' | ||
| import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection' | ||
|
|
||
| const SidebarExamplesExamples = () => ( | ||
| <ExampleSection title='Examples'> | ||
| <ComponentExample | ||
| title='Transitions' | ||
| description={[ | ||
| 'Not all sidebar Transitions are available for every sidebar direction, or when multiple sidebars are', | ||
| 'visible at a time.', | ||
| ].join(' ')} | ||
| examplePath='modules/Sidebar/Examples/SidebarExampleTransitions' | ||
| > | ||
| <Table celled definition> | ||
| <Table.Header> | ||
| <Table.Row> | ||
| <Table.HeaderCell /> | ||
| <Table.HeaderCell>Multiple Visible</Table.HeaderCell> | ||
| <Table.HeaderCell>Supports Vertical Sidebars</Table.HeaderCell> | ||
| <Table.HeaderCell>Supports Horizontal Sidebars</Table.HeaderCell> | ||
| </Table.Row> | ||
| </Table.Header> | ||
| <Table.Body> | ||
| <Table.Row> | ||
| <Table.Cell>Overlay</Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='green' name='check' /> | ||
| </Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='green' name='check' /> | ||
| </Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='green' name='check' /> | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| <Table.Row> | ||
| <Table.Cell>Push</Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='green' name='check' /> | ||
| </Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='green' name='check' /> | ||
| </Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='green' name='check' /> | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| <Table.Row> | ||
| <Table.Cell>Scale Down</Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='green' name='check' /> | ||
| </Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='green' name='check' /> | ||
| </Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='red' name='cancel' /> | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| <Table.Row> | ||
| <Table.Cell>Uncover</Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='red' name='cancel' /> | ||
| </Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='green' name='check' /> | ||
| </Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='red' name='cancel' /> | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| <Table.Row> | ||
| <Table.Cell>Slide Along</Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='red' name='cancel' /> | ||
| </Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='green' name='check' /> | ||
| </Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='red' name='cancel' /> | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| <Table.Row> | ||
| <Table.Cell>Slide Out</Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='red' name='cancel' /> | ||
| </Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='green' name='check' /> | ||
| </Table.Cell> | ||
| <Table.Cell> | ||
| <Icon color='red' name='cancel' /> | ||
| </Table.Cell> | ||
| </Table.Row> | ||
| </Table.Body> | ||
| </Table> | ||
| </ComponentExample> | ||
| <ComponentExample | ||
| title='Displaying Multiple' | ||
| description={ | ||
| <span> | ||
| Multiple sidebars can be displayed at the same time only when using a supported animation | ||
| like | ||
| <code>push</code> or <code>overlay</code>. | ||
| </span> | ||
| } | ||
| examplePath='modules/Sidebar/Examples/SidebarExampleMultiple' | ||
| /> | ||
| </ExampleSection> | ||
| ) | ||
|
|
||
| export default SidebarExamplesExamples |
41 changes: 0 additions & 41 deletions
41
docs/src/examples/modules/Sidebar/Overlay/SidebarExampleBottomOverlay.js
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.