反応するボトムパネルを反応させる

TL;DR: Source for BottomPanel.jsx and BottomPanel.module.scss is at
https://gist.github.com/josiahbryan/c220708256f7c8d79760aff37f64948f.

Live Demo: https://josiahbryan.com/#/bottompanel-demo

私は最近、いくつかの異なるプロジェクトに取り組んできましたfringe.us , そして、他のプロジェクトは、贅沢な運転サービスのためのアプリケーションです.
これらのプロジェクトの両方が部分的に露出することができますし、ドラッグ/ドラッグのコンテンツを明らかにすることができるボトムパネルを呼び出します.
私はハイとローを検索し、反応のちょうどそのようなUIコンポーネントの任意の許容可能な実装を見つけることができませんでした-それはかなり衝撃的だった、私は確かに誰かが反応のためにすでにこの一般的なUIパラダイムを解決していたと思った!
私は、非ウェブ反応形式でパラダイムの多くの実装を見つけました.

ネイティブに反応するhttps://github.com/enesozturk/rn-swipeable-panel

フラッターhttps://github.com/enesozturk/rn-swipeable-panel

それらのパッケージの両方とも美しく見えます、そして、私は彼らを利用するのが好きです!しかし、私が取り組んでいるプロジェクトはブラウザで反応するので、それらのパッケージはオプションではありません.
私はほとんど解決策を見つけることをあきらめたが、昨日私はそれを1つの最後のトライを与えることにした.私は確かに自分自身を実装することができます!私は最初に抽出SwipeableDrawer @材料UIのソースからのコンポーネントが、それは信じられないほど痛みを証明し、その作業を得たことがない.
それから私は自分自身の引き出しの簡単な実装を試してみましたreact-swipeable 'sものすごいフック.それはうまくいきました、しかし、FPS(特にモバイルで)は恐ろしいです.私は10〜12 fpsをドラッグして話している.認められない.
そして、ほとんどプロビデンスのように、私はこのセクションにつまずいたreact-swipeable 'Shttps://github.com/FormidableLabs/react-swipeable#how-to-use-touch-action-to-prevent-scrolling - それは私がまだ見ていなかったパッケージについて言及しました. use-gesture . この点によって、私は医者を読むことから疲れ果てて、私がちょうどそのパッケージを見ていると思いましたが、何も役に立つと思いませんでした.少年、私は間違っていた.
私は博士を読みましたuse-gesture そして、微妙に感動しました.それからtheir examples page , これは、私を「アクションシート」の例に導きました.https://codesandbox.io/embed/zuwji?file=/src/index.js&codemirror=1 - 言うまでもなく、私は信じられないほど感動しました!
私は、非常に最小限の調整でコードを移植することを再利用に設定しましたBottomDrawer 私が欲しかった様々な余分の部分を持っていたコンポーネント

上部ハンドルハンドル

カスタマイズ可能なオープンサイズ/クローズドサイズ

シート内のスクロール可能なコンテンツ領域

キーボードに対して私の頭を叩くの良い2時間後、私は最終的に私が必要としたすべてのものを解決し、次の美しいコンポーネント(スクリーンショットは、このポストの上部にある)を作成しました.私はそれを呼び出す<BottomPanel> - 私は知っているので、オリジナル-私の言い訳は私がキスするのが好きです.
このコンポーネントのライブワーキングの例を見るには、私のウェブサイトに向かいます.

https://josiahbryan.com/#/bottompanel-demo

例<BottomPanel> クローズド

例<BottomPanel> オープン

以下のように使用できます:

<BottomPanel
    maxOpenHeight={window.innerHeight * 0.8} // px
    closedPanelSize={200} // px
>
    <LoremIpsum />
</BottomPanel>

あなたのための完全なソースを見つけることができますBottomPanel.jsx と必要なスタイルBottomPanel.module.scss ) 次の要点では
https://gist.github.com/josiahbryan/c220708256f7c8d79760aff37f64948f .
乾杯!
ヨシヤブライアン