사용처에서 index에 관한 full control을 제공하게 변경하고, onClick handler에 name param 추가 (#169)

Author: quino0627

src/components/List/ListMenuGroup/ListMenuGroup.stories.tsx

@@ -1,5 +1,5 @@
 /* External dependencies */
-import React from 'react'
+import React, { useCallback, useState } from 'react'
 import base from 'paths.macro'
 import { v4 as uuid } from 'uuid'
 import { range } from 'lodash-es'
@@ -24,30 +24,65 @@ export default {
 
 const SIDEBAR_WIDTH = 240
 
-const Template = ({ ...otherListMenuGroupProps }) => (
-  <Navigation
-    withScroll
-    disableResize
-    title="사이드바"
-    minWidth={SIDEBAR_WIDTH}
-  >
-    <ListMenuGroup
-      {...otherListMenuGroupProps}
+const Template = ({ ...otherListMenuGroupProps }) => {
+  const [open, setOpen] = useState(false)
+  const [idx, setIdx] = useState(null)
+
+  const handleToggle = useCallback(() => {
+    setOpen(v => !v)
+    //  if you want to automatically activate specific elemenmt
+    // setIdx(0)
+  }, [])
+
+  const handleClickGroup = useCallback((name: string) => {
+    // eslint-disable-next-line no-console
+    console.log(name)
+    handleToggle()
+  }, [handleToggle])
+
+  const handleClickItem = useCallback((name, key, index) => {
+    // eslint-disable-next-line no-console
+    console.log(name, key, index)
+    setIdx(index)
+  }, [])
+
+  return (
+    <Navigation
+      withScroll
+      disableResize
+      title="사이드바"
+      minWidth={SIDEBAR_WIDTH}
     >
-      { range(0, 4).map(n => (
+      <ListMenuGroup
+        open={open}
+        selectedMenuItemIndex={idx}
+        onClick={handleClickGroup}
+        onClickArrow={handleToggle}
+        onChangeOption={handleClickItem}
+        {...otherListMenuGroupProps}
+      >
+        { range(0, 4).map(n => (
+          <ListItem
+            key={uuid()}
+            optionKey={`menu-item-${n}`}
+            content={`아이템 ${n}`}
+          />
+        )) }
         <ListItem
           key={uuid()}
-          optionKey={`menu-item-${n}`}
-          content={`아이템 ${n}`}
+          optionKey="item-with-a"
+          href="https://naver.com"
+          content="네이버 가기"
         />
-      )) }
-    </ListMenuGroup>
-  </Navigation>
-)
+      </ListMenuGroup>
+    </Navigation>
+  )
+}
 
 export const Primary = Template.bind({})
 
 Primary.args = {
+  name: 'sample group',
   content: '전체 상태',
   leftIcon: 'sent',
   selectedOptionIndex: null,

src/components/List/ListMenuGroup/ListMenuGroup.test.tsx

@@ -1,6 +1,6 @@
 /* External dependencies */
 import React from 'react'
-import { fireEvent, render, screen } from '@testing-library/react'
+import { render } from '@testing-library/react'
 import { v4 as uuid } from 'uuid'
 import { range } from 'lodash-es'
 
@@ -49,13 +49,4 @@ describe('ListMenuGroup', () => {
 
       expect(rendered).toHaveAttribute('data-active-index', '2')
     })
-
-  it('should change "data-active-index"', () => {
-    const { getByTestId } = renderComponent({ selectedMenuItemIndex: 1 })
-    const rendered = getByTestId(SIDEBAR_MENU_GROUP_TEST_ID)
-
-    expect(rendered).toHaveAttribute('data-active-index', '1')
-    fireEvent.click(screen.getByText('item 3'))
-    expect(rendered).toHaveAttribute('data-active-index', '3')
-  })
 })

src/components/List/ListMenuGroup/ListMenuGroup.tsx

@@ -35,7 +35,21 @@ forwardedRef: React.Ref<HTMLElement>,
   const [currentMenuItemIndex, setCurrentMenuItemIndex] = useState<number | null>(selectedMenuItemIndex)
 
   useEffect(() => {
-    setCurrentMenuItemIndex(selectedMenuItemIndex)
+    const childs = React.Children.toArray(children)
+    if (isNil(selectedMenuItemIndex)
+      || (selectedMenuItemIndex < childs.length && selectedMenuItemIndex < 0)) {
+      setCurrentMenuItemIndex(null)
+      return
+    }
+
+    const element = childs[selectedMenuItemIndex]
+
+    if (isListItem(element)) {
+      if (element.props.href) { return }
+
+      setCurrentMenuItemIndex(selectedMenuItemIndex)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [selectedMenuItemIndex])
 
   useEffect(() => {
@@ -45,11 +59,16 @@ forwardedRef: React.Ref<HTMLElement>,
   // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open])
 
+  const handleClickGroup = useCallback(() => {
+    if (onClick) {
+      onClick(name)
+    }
+  }, [name, onClick])
+
   const handleClickItem = useCallback((
     itemIndex: number,
     optionKey: string,
   ) => {
-    setCurrentMenuItemIndex(itemIndex)
     onChangeOption(name, optionKey, itemIndex)
   }, [name, onChangeOption])
 
@@ -121,7 +140,7 @@ forwardedRef: React.Ref<HTMLElement>,
         name={name}
         className={className}
         currentMenuItemIndex={currentMenuItemIndex}
-        onClick={onClick}
+        onClick={handleClickGroup}
         data-testid={testId}
         data-active-index={currentMenuItemIndex}
         {...otherProps}