Sheet.res
1@module("react-modal-sheet") @jsx.component
2external make: (
3 ~children: Jsx.element,
4 ~isOpen: bool,
5 ~onClose: unit => unit,
6 ~ref: PreactDOM.Ref.t=?,
7 ~avoidKeyboard: bool=?,
8 ~disableDrag: bool=?,
9 ~disableDismiss: bool=?,
10 ~disableScrollLocking: bool=?,
11 ~detent: [#default | #content | #full]=?,
12 ~onOpenStart: unit => unit=?,
13 ~onOpenEnd: unit => unit=?,
14 ~onCloseStart: unit => unit=?,
15 ~onCloseEnd: unit => unit=?,
16 ~onSnap: (~index: int) => unit=?, // index of the point in snapPoints
17 ~snapPoints: array<float>=?, // required when using onSnap, initialSnap
18 ~initialSnap: int=?, // index of initial snappoint from snapPoints
19 ~modalEffectRootId: string=?, // id of the app mount point for iOS modal effect
20 ~modelEffectThreshold: float=?, // percent 0-1 where modal effect should start
21 ~tweenConfig: {"ease": string, "duration": float}=?, // default: easeOut, 0.2
22 ~mountPoint: nullable<Dom.element>=?,
23 ~prefersReducedMotion: bool=?,
24 ~dragVelocityThreshold: int=?,
25 ~dragCloseThreshold: float=?,
26 ~unstyled: bool=?,
27) => // true to remove all styles to customize appearance
28Jsx.element = "Sheet"
29
30module Container = {
31 @module("react-modal-sheet") @scope("Sheet") @jsx.component
32 external make: (~children: Jsx.element=?) => Jsx.element = "Container"
33}
34
35module Header = {
36 @module("react-modal-sheet") @scope("Sheet") @jsx.component
37 external make: (~children: Jsx.element=?, ~disableDrag: bool=?) => Jsx.element = "Header"
38}
39
40module DragIndicator = {
41 @module("react-modal-sheet") @scope("Sheet") @jsx.component
42 external make: unit => Jsx.element = "DragIndicator"
43}
44
45module Content = {
46 @module("react-modal-sheet") @scope("Sheet") @jsx.component
47 external make: (
48 ~children: Jsx.element=?,
49 ~disableDrag: bool=?,
50 ~disableScroll: bool=?,
51 ~scrollRef: ref<'value>=?,
52 ) => Jsx.element = "Content"
53}
54
55module Backdrop = {
56 @module("react-modal-sheet") @scope("Sheet") @jsx.component
57 external make: unit => Jsx.element = "Backdrop"
58}
59
60/////////////////////////////////////////
61// Imperative methods on the dom element
62/////////////////////////////////////////
63
64@send external _snapIt: (Dom.element, int) => unit = "snapTo"
65
66/** Imperatively snap to a particular snap point index */
67let snapTo = (ref: PreactDOM.Ref.currentDomRef, pt: int): unit => {
68 switch Nullable.toOption(ref.current) {
69 | Some(sheet) => _snapIt(sheet, pt)
70 | None => ()
71 }
72}
73
74@get external _getSnap: Dom.element => int = "currentSnap"
75@get external _getY: Dom.element => int = "y"
76
77/** Get the current snap point index from a ref */
78let currentSnap = (ref: PreactDOM.Ref.currentDomRef): int => {
79 switch Nullable.toOption(ref.current) {
80 | Some(sheet) => _getSnap(sheet)
81 | None => 0
82 }
83}
84
85let y = (ref: PreactDOM.Ref.currentDomRef): int => {
86 switch Nullable.toOption(ref.current) {
87 | Some(sheet) => _getY(sheet)
88 | None => -1
89 }
90}
