feat(Sidebar): add lifecycle handlers #2845

layershifter · 2018-05-26T12:42:06Z

Requires #2837.
Replaces #2433, #1473.

This PR:

adds onHide, onHidden, onShow and onVisible callbacks to allow the deep control of visible prop
reworks Sidebar docs, examples are much better and clear now 👍
improves code coverage

Especially thanks to @cjsheets and @mchirkin for their work in previous PRs!

…g/Semantic-UI-React into feat/sidebar-closable-property

…React into feat/sidebar-closable-property

…g/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

levithomason · 2018-06-01T18:09:16Z

#2387 merged, unblocked this PR.

levithomason · 2018-06-01T21:09:59Z

Heads up, I've reworked the directories in /docs. This PR needs updated. There is a detailed upgrade guide in the PR, #2863.

Signed-off-by: Oleksandr Fediashov <[email protected]>

…React into feat/sidebar-closable-property Signed-off-by: Oleksandr Fediashov <[email protected]> # Conflicts: # docs/app/Examples/modules/Sidebar/Overlay/SidebarExampleRightOverlay.js # docs/app/Examples/modules/Sidebar/Push/SidebarExampleRightPush.js # docs/app/Examples/modules/Sidebar/ScaleDown/SidebarExampleRightScaleDown.js # docs/src/components/ComponentDoc/ComponentControls/ComponentControlsMaximize.js # docs/src/components/ComponentDoc/ComponentDocHeader.js # docs/src/components/ComponentDoc/ComponentDocLinks.js # docs/src/components/ComponentDoc/ComponentDocSee.js # docs/src/components/ComponentDoc/ComponentExample/ComponentExampleTitle.js # docs/src/components/ComponentDoc/ComponentProp/ComponentPropDefaultValue.js # docs/src/components/ComponentDoc/ComponentProp/ComponentPropDescription.js # docs/src/components/ComponentDoc/ComponentProp/ComponentPropName.js # docs/src/components/ComponentDoc/ComponentProps/ComponentProps.js # docs/src/components/ComponentDoc/ComponentProps/ComponentPropsComponent.js # docs/src/components/ComponentDoc/ComponentProps/ComponentPropsComponents.js # docs/src/components/ComponentDoc/ComponentProps/ComponentPropsDescription.js # docs/src/components/ComponentDoc/ComponentProps/ComponentPropsHeader.js # docs/src/components/ComponentDoc/ComponentSidebar/ComponentSidebarItem.js # docs/src/components/DocsRoot.js # docs/src/components/IconSearch/IconSearch.js # docs/src/examples/addons/Responsive/Usage/ResponsiveExampleBreakpoints.js # docs/src/examples/collections/Form/Shorthand/FormExampleFieldControlId.js # docs/src/examples/collections/Form/Shorthand/FormExampleSubcomponentId.js # docs/src/examples/collections/Menu/Types/MenuExampleText.js # docs/src/examples/collections/Menu/Types/MenuExampleVerticalText.js # docs/src/examples/collections/Menu/Variations/MenuExampleAttachedTabular.js # docs/src/examples/elements/Button/Groups/ButtonExampleGroupIconShorthand.js # docs/src/examples/elements/Button/Types/ButtonExampleBasic.js # docs/src/examples/elements/Button/Types/ButtonExampleInverted.js # docs/src/examples/elements/Button/Variations/ButtonExampleSize.js # docs/src/examples/elements/Container/Types/ContainerExampleContainer.js # docs/src/examples/elements/Container/Types/ContainerExampleText.js # docs/src/examples/elements/Container/Variations/ContainerExampleAlignment.js # docs/src/examples/elements/Container/Variations/ContainerExampleFluid.js # docs/src/examples/elements/Header/Variations/HeaderExampleColored.js # docs/src/examples/elements/Header/Variations/HeaderExampleInverted.js # docs/src/examples/elements/Image/Variations/ImageExampleCentered.js # docs/src/examples/elements/Image/Variations/ImageExampleFloated.js # docs/src/examples/elements/Image/Variations/ImageExampleSpaced.js # docs/src/examples/elements/Label/Types/LabelExampleTag.js # docs/src/examples/elements/Label/Variations/LabelExampleCircular.js # docs/src/examples/elements/Label/Variations/LabelExampleCircularEmpty.js # docs/src/examples/elements/List/Types/ListExampleOrderedValue.js # docs/src/examples/elements/Segment/Variations/SegmentExampleAttached.js # docs/src/examples/elements/Segment/Variations/SegmentExampleColoredInverted.js # docs/src/examples/elements/Segment/Variations/SegmentExampleFloated.js # docs/src/examples/elements/Segment/Variations/SegmentExampleTextAlignment.js # docs/src/examples/elements/Step/Groups/StepExampleGroupShorthand.js # docs/src/examples/modules/Dropdown/States/DropdownExampleActive.js # docs/src/examples/modules/Dropdown/States/DropdownExampleDisabled.js # docs/src/examples/modules/Dropdown/States/DropdownExampleError.js # docs/src/examples/modules/Dropdown/States/DropdownExampleLoading.js # docs/src/examples/modules/Dropdown/Usage/DropdownExampleCloseOnChange.js # docs/src/examples/modules/Popup/Variations/PopupExampleWide.js # docs/src/examples/modules/Sidebar/Examples/SidebarExampleMultiple.js # docs/src/examples/modules/Sidebar/Overlay/SidebarExampleBottomOverlay.js # docs/src/examples/modules/Sidebar/Overlay/SidebarExampleRightOverlay.js # docs/src/examples/modules/Sidebar/Overlay/SidebarExampleTopOverlay.js # docs/src/examples/modules/Sidebar/Overlay/index.js # docs/src/examples/modules/Sidebar/Push/SidebarExampleBottomPush.js # docs/src/examples/modules/Sidebar/Push/SidebarExampleRightPush.js # docs/src/examples/modules/Sidebar/Push/SidebarExampleTopPush.js # docs/src/examples/modules/Sidebar/Push/index.js # docs/src/examples/modules/Sidebar/ScaleDown/SidebarExampleBottomScaleDown.js # docs/src/examples/modules/Sidebar/ScaleDown/SidebarExampleRightScaleDown.js # docs/src/examples/modules/Sidebar/ScaleDown/SidebarExampleTopScaleDown.js # docs/src/examples/modules/Sidebar/ScaleDown/index.js # docs/src/examples/modules/Sidebar/SlideAlong/SidebarExampleRightSlideAlong.js # docs/src/examples/modules/Sidebar/SlideAlong/index.js # docs/src/examples/modules/Sidebar/SlideOut/SidebarExampleRightSlideOut.js # docs/src/examples/modules/Sidebar/SlideOut/index.js # docs/src/examples/modules/Sidebar/States/SidebarExampleDimmed.js # docs/src/examples/modules/Sidebar/Types/SidebarExampleSidebar.js # docs/src/examples/modules/Sidebar/Uncover/SidebarExampleRightUncover.js # docs/src/examples/modules/Sidebar/Uncover/index.js # docs/src/examples/modules/Sidebar/index.js # docs/src/examples/views/Feed/Types/FeedExampleEventsProp.js # docs/src/examples/views/Statistic/Variations/StatisticExampleFloated.js # docs/src/hoc/neverUpdate.js # docs/src/hoc/pure.js # docs/src/hoc/updateForKeys.js # docs/src/hoc/withDocInfo.js # docs/src/utils/getComponentGroup.js # docs/src/utils/getNewHash.js # docs/src/utils/getSeeItems.js # docs/src/utils/isOldHash.js # docs/src/utils/parentComponents.js # src/modules/Sidebar/Sidebar.js # test/specs/commonTests/implementsClassNameProps.js # test/specs/commonTests/isConformant.js

Signed-off-by: Oleksandr Fediashov <[email protected]>

…React into feat/sidebar-closable-property

codecov-io · 2018-06-05T07:10:52Z

Codecov Report

❗ No coverage uploaded for pull request base (master@43793ae). Click here to learn what that means.
The diff coverage is 93.54%.

@@            Coverage Diff            @@
##             master    #2845   +/-   ##
=========================================
  Coverage          ?   99.78%           
=========================================
  Files             ?      161           
  Lines             ?     2760           
  Branches          ?        0           
=========================================
  Hits              ?     2754           
  Misses            ?        6           
  Partials          ?        0

Impacted Files	Coverage Δ
src/modules/Sidebar/Sidebar.js	`94.59% <93.54%> (ø)`

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 43793ae...86cf279. Read the comment docs.

layershifter · 2018-06-05T07:14:17Z

@levithomason marked as ready for review 👍

levithomason · 2018-06-19T13:40:13Z

In http://localhost:8080/modules/sidebar#types-sidebar, clicking outside does not close the Sidebar. It seems onHide is called twice, resulting in a double toggle.

If I create a handleHide method that sets visible to false only and assign that to onHide, then it works. However, we should ensure the onHide is not called twice.

layershifter · 2018-06-19T13:42:13Z

Will check, sounds stange 🤔

…React into feat/sidebar-closable-property

Signed-off-by: Oleksandr Fediashov <[email protected]>

layershifter · 2018-06-19T14:46:22Z

I made some updates, now it works as expected.

levithomason · 2018-06-26T01:37:50Z

Released in [email protected].

mchirkin and others added 10 commits May 13, 2018 16:52

feat(Sidebar): add closable prop

1e4d481

refactor(eventStack): make eventStack immutable

cdfd796

Merge branch 'refactor/event-stack' of https://github.com/Semantic-Or…

d2172bc

…g/Semantic-UI-React into feat/sidebar-closable-property

refactor(eventStack): make eventStack immutable

adafa0b

Merge branch 'master' into refactor/event-stack

1dc2812

Merge branch 'master' of https://github.com/Semantic-Org/Semantic-UI-…

17ee911

…React into feat/sidebar-closable-property

docs(Sidebar): update examples

77c844e

test(Sidebar): cover component with tests

671cd1e

layershifter added enhancement blocked labels May 26, 2018

This was referenced May 26, 2018

feat(Sidebar): closing sidebar on blur #2433

Closed

feat(Sidebar): closing sidebar by clicking outside #1473

Closed

levithomason removed the blocked label Jun 1, 2018

Oleksandr Fediashov added 3 commits June 4, 2018 10:46

rename

ac83e8d

Signed-off-by: Oleksandr Fediashov <[email protected]>

restore delete

7c3541b

Signed-off-by: Oleksandr Fediashov <[email protected]>

layershifter force-pushed the feat/sidebar-closable-property branch from 62e0ada to 7c3541b Compare June 4, 2018 08:34

Oleksandr Fediashov added 9 commits June 4, 2018 11:35

restore delete

f9443cb

Signed-off-by: Oleksandr Fediashov <[email protected]>

restore delete

023533b

Signed-off-by: Oleksandr Fediashov <[email protected]>

restore delete

cc4a1e4

Signed-off-by: Oleksandr Fediashov <[email protected]>

restore delete

664725c

Signed-off-by: Oleksandr Fediashov <[email protected]>

restore delete

4bb06f0

Signed-off-by: Oleksandr Fediashov <[email protected]>

restore delete

ceb19f6

Signed-off-by: Oleksandr Fediashov <[email protected]>

restore chmod

f10d690

Signed-off-by: Oleksandr Fediashov <[email protected]>

restore

efe426e

Signed-off-by: Oleksandr Fediashov <[email protected]>

restore chmod

ed6c041

Oleksandr Fediashov added 8 commits June 4, 2018 12:03

restore chmod

a94e738

restore

38f1018

Signed-off-by: Oleksandr Fediashov <[email protected]>

restore

37f222c

Signed-off-by: Oleksandr Fediashov <[email protected]>

restore

e686ac8

Signed-off-by: Oleksandr Fediashov <[email protected]>

restore

503b340

Signed-off-by: Oleksandr Fediashov <[email protected]>

restore

22a46a9

Signed-off-by: Oleksandr Fediashov <[email protected]>

restore

64ba5d7

Signed-off-by: Oleksandr Fediashov <[email protected]>

Merge branch 'master' of https://github.com/Semantic-Org/Semantic-UI-…

072f845

…React into feat/sidebar-closable-property

layershifter added the ready for review label Jun 5, 2018

layershifter mentioned this pull request Jun 8, 2018

Rethinking about the Sidebar implement #2893

Closed

levithomason added needs author feedback and removed ready for review labels Jun 19, 2018

Oleksandr Fediashov added 3 commits June 19, 2018 17:00

Merge branch 'master' of https://github.com/Semantic-Org/Semantic-UI-…

4c02e38

…React into feat/sidebar-closable-property

fix(Sidebar): fix duplicate onHide call

b28078a

Signed-off-by: Oleksandr Fediashov <[email protected]>

docs(Sidebar): fix examples, add example with callbacks

86cf279

Signed-off-by: Oleksandr Fediashov <[email protected]>

layershifter added ready for review and removed needs author feedback labels Jun 19, 2018

levithomason merged commit 0d00166 into master Jun 21, 2018

levithomason deleted the feat/sidebar-closable-property branch June 21, 2018 04:32

layershifter mentioned this pull request Sep 17, 2018

Closing sidebar by clicking on the page #1158

Closed

layershifter mentioned this pull request Jun 28, 2019

Sidebar: doesn't animate close #3578

Closed

layershifter mentioned this pull request Jul 7, 2019

fix(Sidebar): fix hide animation #3684

Merged

snyk-bot mentioned this pull request Jan 13, 2022

[Snyk] Fix for 3 vulnerabilities sonyrsa/Semantic-UI-React#1

Open

snyk-bot mentioned this pull request Feb 22, 2022

[Snyk] Fix for 1 vulnerabilities sonyrsa/Semantic-UI-React#8

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(Sidebar): add lifecycle handlers #2845

feat(Sidebar): add lifecycle handlers #2845

layershifter commented May 26, 2018

levithomason commented Jun 1, 2018

levithomason commented Jun 1, 2018

codecov-io commented Jun 5, 2018 •

edited

Loading

layershifter commented Jun 5, 2018

levithomason commented Jun 19, 2018

layershifter commented Jun 19, 2018

layershifter commented Jun 19, 2018

levithomason commented Jun 26, 2018

feat(Sidebar): add lifecycle handlers #2845

feat(Sidebar): add lifecycle handlers #2845

Conversation

layershifter commented May 26, 2018

levithomason commented Jun 1, 2018

levithomason commented Jun 1, 2018

codecov-io commented Jun 5, 2018 • edited Loading

Codecov Report

layershifter commented Jun 5, 2018

levithomason commented Jun 19, 2018

layershifter commented Jun 19, 2018

layershifter commented Jun 19, 2018

levithomason commented Jun 26, 2018

codecov-io commented Jun 5, 2018 •

edited

Loading