sidebar

Author: Sasha Kondrashov

src/modules/Sidebar/Sidebar.d.ts

@@ -31,33 +31,34 @@ export interface StrictSidebarProps {
    * Called before a sidebar begins to animate out.
    *
    * @param {SyntheticEvent} event - React's original SyntheticEvent.
-   * @param {object} data - All props.
+   * @param {object} props - All props.
+   * @param {boolean} visible - Whether the sidebar is visible.
    */
-  onHide?: (event: React.MouseEvent<HTMLElement>, data: SidebarProps) => void
+  onHide?: (event: React.MouseEvent<HTMLElement>, props: SidebarProps, visible: boolean) => void
 
   /**
    * Called after a sidebar has finished animating out.
    *
    * @param {null}
-   * @param {object} data - All props.
+   * @param {object} props - All props.
    */
-  onHidden?: (event: React.MouseEvent<HTMLElement>, data: SidebarProps) => void
+  onHidden?: (event: React.MouseEvent<HTMLElement>, props: SidebarProps) => void
 
   /**
    * Called when a sidebar has finished animating in.
    *
    * @param {null}
-   * @param {object} data - All props.
+   * @param {object} props - All props.
    */
-  onShow?: (event: React.MouseEvent<HTMLElement>, data: SidebarProps) => void
+  onShow?: (event: React.MouseEvent<HTMLElement>, props: SidebarProps) => void
 
   /**
    * Called when a sidebar begins animating in.
    *
    * @param {null}
-   * @param {object} data - All props.
+   * @param {object} props - All props.
    */
-  onVisible?: (event: React.MouseEvent<HTMLElement>, data: SidebarProps) => void
+  onVisible?: (event: React.MouseEvent<HTMLElement>, props: SidebarProps) => void
 
   /** A sidebar can handle clicks on the passed element. */
   target?: Document | Window | HTMLElement | React.RefObject<HTMLElement>

src/modules/Sidebar/Sidebar.js

@@ -71,7 +71,7 @@ const Sidebar = React.forwardRef((props, ref) => {
     const callback = visible ? 'onShow' : 'onHidden'
 
     resetAnimationTick()
-    _.invoke(props, callback, null, props)
+    _.invoke(props, callback, null, props, visible)
   })
 
   const handleAnimationStart = useEventCallback(() => {
@@ -85,13 +85,13 @@ const Sidebar = React.forwardRef((props, ref) => {
       return
     }
 
-    _.invoke(props, callback, null, props)
+    _.invoke(props, callback, null, props, visible)
   })
 
   const handleDocumentClick = (e) => {
     if (!doesNodeContainClick(elementRef.current, e)) {
       skipNextCallback.current = true
-      _.invoke(props, 'onHide', e, { ...props, visible: false })
+      _.invoke(props, 'onHide', e, props, false)
     }
   }
 

test/specs/modules/Sidebar/Sidebar-test.js

@@ -48,7 +48,7 @@ describe('Sidebar', () => {
 
       wrapper.setProps({ visible: false })
       onHide.should.have.been.calledOnce()
-      onHide.should.have.been.calledWithMatch(null, { visible: false })
+      onHide.should.have.been.calledWithMatch(null, {}, false)
     })
 
     it('is called when a click on the document was done', () => {
@@ -58,7 +58,7 @@ describe('Sidebar', () => {
 
       domEvent.click(document)
       onHide.should.have.been.calledOnce()
-      onHide.should.have.been.calledWithMatch({}, { visible: false })
+      onHide.should.have.been.calledWithMatch({}, {}, false)
     })
 
     it('is called when a click on the document was done only once', () => {
@@ -68,6 +68,7 @@ describe('Sidebar', () => {
       domEvent.click(document)
       wrapper.setProps({ visible: false })
       onHide.should.have.been.calledOnce()
+      onHide.should.have.been.calledWithMatch({}, {}, false)
     })
 
     it('is not called when a click was done inside the component', () => {
@@ -101,7 +102,7 @@ describe('Sidebar', () => {
 
       setTimeout(() => {
         onHidden.should.have.been.calledOnce()
-        onHidden.should.have.been.calledWithMatch(null, { visible: false })
+        onHidden.should.have.been.calledWithMatch(null, {}, false)
 
         done()
       }, 0)
@@ -134,7 +135,7 @@ describe('Sidebar', () => {
 
       wrapper.setProps({ visible: true })
       onVisible.should.have.been.calledOnce()
-      onVisible.should.have.been.calledWithMatch(null, { visible: true })
+      onVisible.should.have.been.calledWithMatch(null, {}, true)
     })
   })