♻️ Accordion 内部のコンテンツの高さが動的に変わる場合に対応 #1605
Conversation
deatiger
requested review from
Ryu955,
NAKKA-K,
trailstem and
shungenie
as code owners
🦋 Changeset detectedLatest commit: d5a4db4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for ingred-ui ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| const height = useMemo(() => { | ||
| if (expandedState && accordionContentContainerRef.current) { | ||
| return accordionContentContainerRef.current.scrollHeight; | ||
| } | ||
| return 0; | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, [expandedState, accordionContentContainerRef.current]); | ||
|
|
There was a problem hiding this comment.
今までは useMemo で計算していたが、後述する onTransitionEnd で height を変更したかったので state で管理するようにした。
| if (expanded) { | ||
| setHeight(`${accordionContentContainerRef.current?.scrollHeight ?? 0}px`); |
There was a problem hiding this comment.
Accordion を開く時には、height の値が 0 → コンテンツの高さ になることで開く際のアニメーションを実現している。
| } else { | ||
| setHeight(`${accordionContentContainerRef.current?.scrollHeight ?? 0}px`); | ||
| setOverflow("hidden"); | ||
| setTimeout(() => setHeight("0px"), 100); | ||
| } |
There was a problem hiding this comment.
以下のような height の変更を行うことで閉じるアニメーションを実現している（ auto → 0px ではアニメーションしないため）
- auto → コンテンツの高さに変更
- state が更新されるのを待つために少し wait を入れてから、0px に変更
There was a problem hiding this comment.
なるほど！
閉じてる時は0で開いてる時はautoの2値じゃダメなのかなーと思ったんですが、アニメーションを行うために > 0px の高さを持てるようにしてるんですね。
There was a problem hiding this comment.
ですです！（cssめんどくせえと思ってしまった）
| const handleTransitionEnd = () => { | ||
| if (expandedState) { | ||
| setHeight("auto"); | ||
| setOverflow("visible"); | ||
| } | ||
| }; |
There was a problem hiding this comment.
アコーディオンが開き終わったら height を auto にすることで、その後アコーディオン内のコンテンツが増減した場合に動的にアコーディオンの高さも変わる。
| height={height} | ||
| overflow={overflow} | ||
| onTransitionEnd={handleTransitionEnd} |
There was a problem hiding this comment.
CSSトランジション（アニメーション）が終わる際に発火されるイベント
https://developer.mozilla.org/ja/docs/Web/API/Element/transitionend_event
There was a problem hiding this comment.
[memo]アニメーションが終わったら高さをautoにして、visibleにする。
|
コード的にはOKです！ |
|
@deatiger LGTM！ |
Preview URL
https://deploy-preview-1605--ingred-ui.netlify.app/?path=/docs/components-navigation-accordion--docs
Check List (If️ you added new component in this PR)
src/components/index.ts.storybook/documents/Information/Samples/Samples.stories.tsx