feat: Implement Accordion component with storybook #16 #17
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
ebokyung
reviewed
May 10, 2024
| >(({ className, children, ...restProps }: AccordionContentProps, ref?) => { | ||
| const { toggle, handleToggle } = useAccordionContext(); | ||
| const contentRef = useRef<HTMLDivElement>(null); | ||
| useBeforeMatch<HTMLDivElement>(contentRef, handleToggle); |
Comment on lines
+26
to
+35
| const contentHeight = useExpandableHeight<HTMLDivElement>(contentRef, toggle); | ||
|
|
||
| return ( | ||
| <Box | ||
| ref={contentRef || ref} | ||
| style={assignInlineVars({ | ||
| [S.contentHeightVar]: `${contentHeight + 1}px`, | ||
| })} | ||
| className={S.content} | ||
| HIDDEN={toggle ? undefined : 'until-found'} |
There was a problem hiding this comment.
display none이 아닌 숨김으로써 UX를 고려한 부분들 너무 좋습니다 👍🏻
Comment on lines
+38
to
+42
| {Children.map(children, (child, index) => ( | ||
| <div key={index} className={S.contentChild}> | ||
| {child} | ||
| </div> | ||
| ))} |
There was a problem hiding this comment.
아 children으로 내부 내용을 유연하게 받는 것도 좋은 것 같아요!
Comment on lines
+16
to
+27
| const { toggle, setToggle, handleToggle } = useToggle(); | ||
|
|
||
| const value = useMemo( | ||
| () => ({ toggle, setToggle, handleToggle }), | ||
| [handleToggle, setToggle, toggle], | ||
| ); | ||
| return ( | ||
| <AccoridonContext.Provider value={value}> | ||
| <Box ref={ref} className={S.item} {...restProps}> | ||
| {children} | ||
| </Box> | ||
| </AccoridonContext.Provider> |
Comment on lines
+15
to
+19
| maxHeight: contentHeightVar, | ||
| transitionProperty: 'max-height', | ||
| transitionDuration: '200ms', | ||
| transitionDelay: '100ms', | ||
| transitionTimingFunction: 'cubic-bezier(0.37, 0, 0.63, 1)', |
There was a problem hiding this comment.
높이로 컨텐츠를 가린 부분 아이디어가 좋고 고민 많이 하신게 느껴지네요
cubic-vezier도 배워갑니다 !!
넵 싱글 토글 기능이나 애니메이션 부분 개선을 위해 더 고려해봐야겠네요 감사합니다! |
dgd03146
commented
May 10, 2024
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Motivation 🤔
Key Changes 🔑
To Reviewers 🙏🏻
@ebokyung