v0.1.5

Author: jwoo0122

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@channel.io/design-system",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Design System by Channel",
   "repository": {
     "type": "git",

package.json

@@ -2,6 +2,7 @@
 import React, { useRef, useCallback } from 'react'
 import { addDecorator } from '@storybook/react'
 import { withKnobs, select, number, text, boolean } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions'
 
 /* Internal dependencies */
 import { GNB } from '../GNB'
@@ -23,7 +24,14 @@ addDecorator(decorator)
 
 export const Default = () => (
   <ThemeProvider theme={LightTheme}>
-    <Navigation />
+    <Navigation
+      title={text('title', 'Title')}
+      fixedTitle={boolean('fixed title', false)}
+      width={number('width', 240)}
+      minWidth={number('minWidth', 240)}
+      maxWidth={number('maxWidth', 540)}
+      onChangeWidth={action('onChangeWidth')}
+    />
   </ThemeProvider>
 )
 
@@ -48,7 +56,7 @@ export const WithRef = () => {
           height: '100%',
         }}
       >
-        <Navigation ref={navigationRef}>
+        <Navigation ref={navigationRef} width={number('width', 300)}>
           Guess my width!
         </Navigation>
         <button type="button" onClick={handleClick}>click me</button>

src/layout/Navigation/Navigation.stories.tsx

@@ -29,6 +29,7 @@ function Navigation(
     className,
     title,
     fixedTitle = false,
+    width = 240,
     minWidth = 240,
     maxWidth = 540,
     disableResize = false,
@@ -39,13 +40,13 @@ function Navigation(
 ) {
   const navigationRef = useRef<HTMLDivElement | null>(null)
   const mergedRef = useMergeRefs<HTMLDivElement>(navigationRef, forwardedRef)
-  const [width, setWidth] = useState<number>(minWidth)
+  const [currentWidth, setCurrentWidth] = useState<number>(_.clamp(width, minWidth, maxWidth))
   const [isDragging, setIsDragging] = useState(false)
 
   const handleMouseMove = useCallback((e: MouseEvent) => {
     if (disableResize) { return }
 
-    window.requestAnimationFrame(() => setWidth(
+    window.requestAnimationFrame(() => setCurrentWidth(
       _.clamp(
         e.pageX - navigationRef.current?.offsetLeft,
         minWidth,
@@ -68,8 +69,12 @@ function Navigation(
   }, [])
 
   useEffect(() => {
-    onChangeWidth(width)
-  }, [width, onChangeWidth])
+    onChangeWidth(currentWidth)
+  }, [currentWidth, onChangeWidth])
+
+  useEffect(() => {
+    setCurrentWidth(_.clamp(width, minWidth, maxWidth))
+  }, [width, minWidth, maxWidth])
 
   useEffect(() => {
     if (isDragging) {
@@ -86,7 +91,7 @@ function Navigation(
       ref={mergedRef}
       style={style}
       className={className}
-      width={width}
+      width={currentWidth}
       data-testid={testId}
       isDragging={isDragging}
     >

src/layout/Navigation/Navigation.tsx

@@ -4,6 +4,7 @@ import { ChildrenComponentProps } from '../../types/ComponentProps'
 export default interface NavigationProps extends Omit<ChildrenComponentProps, 'as'> {
   title?: string
   fixedTitle?: boolean
+  width?: number
   minWidth?: number
   maxWidth?: number
   disableResize?: boolean