<Fade />作ってみた #179
<Fade />作ってみた #179
Conversation
|
アンマウント時にもアニメーションがつけられないか考える |
|
今の実装だと単一のコンポーネントだけアニメーションを変えたい。みたいな要望に対応できないので、責務を分散させる。 |
youchann
force-pushed
the
add-backdrop
branch
from
6eaee3c
to
931816d
Compare
|
多分これでいい感じなはず |
| fadeProps?: FadeProps; | ||
| }; | ||
|
|
||
| const Backdrop = React.forwardRef<HTMLDivElement, BackdropProps>( |
There was a problem hiding this comment.
<Backdrop />はただのposition: fixed;な背景。
フェードイン・アウトもできる。
| <Modal isOpen={isOpen} enableTransition={true}> | ||
| <Fade in={isOpen}> |
There was a problem hiding this comment.
変更量多く見えるけど、上記2つのコンポーネントが変わっただけ。
There was a problem hiding this comment.
変更後は利用側でネストが浅くなる
{isOpen & (
<ConfirmModal />
)}
// ↓こう書けば良くなる
<ConfirmModal isOpen={isOpen} />| onClick={onHandleToggleContent(false)} | ||
| onClickAway={onHandleToggleContent(false)} |
There was a problem hiding this comment.
破壊的変更
onClickとonClickAwayでハンドリングするのではなくonCloseだけでハンドリングできるようになった。
|
|
||
| return ( | ||
| <Portal> | ||
| <Styled.Container isHidden={!isOpen && exited}> |
There was a problem hiding this comment.
isOpenがralseになる→<Backdrop />のアニメーションが終わる→exitedがtrueになる→<Modal />がvisibility: hidden;になる。
| isOpen={isOpen} | ||
| backdropProps={{ invisible: true }} | ||
| onClose={onClose} | ||
| > |
There was a problem hiding this comment.
ここの1行下に<Fade />とかを入れられるようにして、Popoverにもtransitionを入れられるようにする予定
| children: React.ReactNode; | ||
| onClose?: ( | ||
| event: React.MouseEvent<HTMLDivElement, MouseEvent>, | ||
| reason: ModalCloseReason | FloatingTipCloseReason, |
There was a problem hiding this comment.
このreasonってどんな理由で設定されているものなんですか？
There was a problem hiding this comment.
例えば<FloatingTip />でいうと、「ポップアップで出てくる要素外のクリックでは閉じないけど、✖️アイコンのクリックでは閉じたい」みたいなユースケースに対応するためですね！
There was a problem hiding this comment.
なるほど、onClose に渡すメソッドが reason の内容によって振る舞いを変えることができるようになるわけですね
| @@ -83,8 +83,7 @@ export const Overview: React.FunctionComponent = () => { | |||
| baseElement={buttonElement} | |||
| contents={contents} | |||
| positionPriority={[position]} | |||
| onClick={onHandleToggleMenu(false)} | |||
| onClickAway={onHandleToggleMenu(false)} | |||
| onClose={onHandleToggleMenu(false)} | |||
There was a problem hiding this comment.
そうか、reason があるから onClick と onClickAway を onClose にまとめられるのですね
イメージはこれ
https://material-ui.com/components/transitions/#fade
やったこと
<Fade />,<Backdrop />の追加<Modal />の改造(onClose()propsを入れられるように)