Add proptypes, default visibility option, and onchange function to si…

…debar component
meilisearch · Apr 29, 2021 · 58b17fd · 58b17fd
1 parent 69fe327
commit 58b17fd
Show file tree

Hide file tree

Showing 2 changed files with 65 additions and 8 deletions.
diff --git a/src/components/Sidebar.js b/src/components/Sidebar.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import Color from 'color'
 import styled from 'styled-components'
+import PropTypes from 'prop-types'
 import { ArrowDown } from 'components/icons'
 import {
   useDisclosureState,
@@ -78,8 +79,15 @@ const DisclosureContent = styled(ReakitDisclosureContent)`
   }
 `
 
-const Sidebar = ({ sidebarIcon, children, ...props }) => {
-  const disclosure = useDisclosureState({ animated: true, visible: true })
+const Sidebar = ({
+  sidebarIcon,
+  visible = true,
+  onChange = () => {},
+  children,
+  ...props
+}) => {
+  const disclosure = useDisclosureState({ animated: true, visible })
+  const [toggled, setToggled] = React.useState(false)
 
   const openingIcon = sidebarIcon || (
     <Arrow style={{ transform: 'rotate(270deg)' }} />
@@ -88,23 +96,36 @@ const Sidebar = ({ sidebarIcon, children, ...props }) => {
   const closeIconRef = React.useRef(null)
 
   React.useEffect(() => {
-    if (!disclosure.visible) {
-      openIconRef?.current?.focus()
-    } else {
-      closeIconRef?.current?.focus()
+    if (toggled) {
+      if (!disclosure.visible) {
+        openIconRef?.current?.focus()
+      } else {
+        closeIconRef?.current?.focus()
+      }
+      onChange(disclosure.visible)
     }
   }, [openIconRef, disclosure.visible])
 
   return (
     <SidebarWrapper aria-expanded={disclosure.visible} {...props}>
       {!disclosure.visible && (
-        <Disclosure ref={openIconRef} {...disclosure}>
+        <Disclosure
+          ref={openIconRef}
+          onClick={() => setToggled(true)}
+          {...disclosure}
+        >
           <OpeningIcon>{openingIcon}</OpeningIcon>
         </Disclosure>
       )}
       <DisclosureContent {...disclosure}>
         {disclosure.visible && (
-          <Disclosure ref={closeIconRef} onClick={() => disclosure.hide()}>
+          <Disclosure
+            ref={closeIconRef}
+            onClick={() => {
+              disclosure.hide()
+              setToggled(true)
+            }}
+          >
             <Arrow style={{ transform: 'rotate(90deg)' }} />
           </Disclosure>
         )}
@@ -114,4 +135,30 @@ const Sidebar = ({ sidebarIcon, children, ...props }) => {
   )
 }
 
+Sidebar.propTypes = {
+  /**
+   * The icon you want to display to open the sidebar. Arrow by default
+   */
+  sidebarIcon: PropTypes.node,
+  /**
+   * The initial state of the sidebar (open or closed)
+   */
+  visible: PropTypes.bool,
+  /**
+   * Action to trigger on toggle change
+   */
+  onChange: PropTypes.func,
+  /**
+   * Content of the sidebar
+   */
+  children: PropTypes.node,
+}
+
+Sidebar.defaultProps = {
+  sidebarIcon: <Arrow style={{ transform: 'rotate(270deg)' }} />,
+  visible: true,
+  onChange: null,
+  children: null,
+}
+
 export default Sidebar
diff --git a/src/stories/Sidebar.stories.js b/src/stories/Sidebar.stories.js
@@ -36,3 +36,13 @@ WithIcon.args = {
     </Box>
   ),
 }
+
+export const DefaultClosed = Template.bind({})
+DefaultClosed.args = {
+  visible: false,
+  children: (
+    <Box py={32} px={24}>
+      I’m a sidebar
+    </Box>
+  ),
+}