rtw

Panel.res.mjs

  1// Generated by ReScript, PLEASE EDIT WITH CARE
  2
  3import * as Log from "../utils/Log.res.mjs";
  4import * as Sheet from "../ffi/Sheet.res.mjs";
  5import * as Preact from "../ffi/Preact.res.mjs";
  6import * as Window from "../ffi/Window.res.mjs";
  7import * as Hooks from "preact/hooks";
  8import * as LucidePreact from "lucide-preact";
  9import * as Signals from "@preact/signals";
 10import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
 11import * as ReactModalSheet from "react-modal-sheet";
 12import * as JsxRuntime from "preact/jsx-runtime";
 13
 14let snapPoints = Signals.computed(() => {
 15  if (Window.isMobile.value) {
 16    return [
 17      0,
 18      0.06,
 19      0.5,
 20      1.0
 21    ];
 22  } else {
 23    return [
 24      0,
 25      0.06,
 26      1.0
 27    ];
 28  }
 29});
 30
 31let isMinimized = Signals.signal(false);
 32
 33function onResize(ref) {
 34  return () => {
 35    Log.debug("resize", {
 36      mobile: Window.isMobile.value,
 37      snap: Sheet.currentSnap(ref)
 38    });
 39    if (!Window.isMobile.value && Sheet.currentSnap(ref) === 2) {
 40      Sheet.snapTo(ref, 3);
 41    }
 42    if (Window.isMobile.value && isMinimized.value) {
 43      return Sheet.snapTo(ref, 1);
 44    }
 45  };
 46}
 47
 48function Panel(props) {
 49  let onOpen = props.onOpen;
 50  let onMinimize = props.onMinimize;
 51  let sheetRef = Hooks.useRef(null);
 52  Signals.effect(onResize(sheetRef));
 53  return JsxRuntime.jsx(ReactModalSheet.Sheet, {
 54    children: JsxRuntime.jsxs(ReactModalSheet.Sheet.Container, {
 55      children: [
 56        Window.isMobile.value ? JsxRuntime.jsx(ReactModalSheet.Sheet.Header, {}) : JsxRuntime.jsx(ReactModalSheet.Sheet.Header, {
 57            children: JsxRuntime.jsx("div", {
 58              children: JsxRuntime.jsx("div", {
 59                children: JsxRuntime.jsx(LucidePreact.ChevronDown, {
 60                  className: Preact.cls("text-ui-2", {
 61                    "rotate-180": isMinimized.value
 62                  })
 63                }),
 64                className: "hover:bg-bg-2 p-2 rounded-sm",
 65                onClick: _evt => {
 66                  if (isMinimized.value) {
 67                    return Sheet.snapTo(sheetRef, 2);
 68                  } else {
 69                    return Sheet.snapTo(sheetRef, 1);
 70                  }
 71                }
 72              }),
 73              className: "flex flex-row justify-end w-full px-4"
 74            })
 75          }),
 76        JsxRuntime.jsx(ReactModalSheet.Sheet.Content, {
 77          children: props.children
 78        })
 79      ]
 80    }),
 81    isOpen: true,
 82    onClose: () => {
 83      console.debug("closed");
 84    },
 85    ref: Primitive_option.some(sheetRef),
 86    disableDismiss: true,
 87    detent: "full",
 88    onSnap: index => {
 89      if (index === 1) {
 90        isMinimized.value = true;
 91        if (onMinimize !== undefined) {
 92          onMinimize();
 93        }
 94      } else {
 95        isMinimized.value = false;
 96        if (onOpen !== undefined) {
 97          onOpen();
 98        }
 99      }
100      Log.debug("sheet position", {
101        from: Sheet.currentSnap(sheetRef),
102        to: index
103      });
104    },
105    snapPoints: snapPoints.value,
106    initialSnap: 2
107  });
108}
109
110let make = Panel;
111
112export {
113  snapPoints,
114  isMinimized,
115  onResize,
116  make,
117}
118/* snapPoints Not a pure module */