@colisweb/rescript-toolkit 2.50.3 → 2.51.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@colisweb/rescript-toolkit",
-  "version": "2.50.3",
+  "version": "2.51.0",
   "scripts": {
     "clean": "rescript clean",
     "build": "rescript build -with-deps",

package/src/ui/Toolkit__Ui.res

@@ -25,6 +25,7 @@ module Reference = Toolkit__Ui_Reference
 module RichText = Toolkit__Ui_RichText
 module ProgressBar = Toolkit__Ui_ProgressBar
 module Dropdown = Toolkit__Ui_Dropdown
+module PortalDropdown = Toolkit__Ui_PortalDropdown
 module DropdownList = Toolkit__Ui_DropdownList
 module Layout = Toolkit__Ui_Layout
 module SpinnerFullScreen = Toolkit__Ui_SpinnerFullScreen

package/src/ui/Toolkit__Ui_PortalDropdown.res

@@ -0,0 +1,102 @@
+type position = [
+  | #bottom
+  | #right
+  | #top
+  | #left
+]
+
+@react.component
+let make = (
+  ~label: React.element,
+  ~children,
+  ~dropdownClassName="",
+  ~buttonClassName="",
+  ~containerClassName="",
+  ~defaultIsOpen=false,
+  ~buttonColor: Toolkit__Ui_Button.color=#white,
+  ~buttonSize: Toolkit__Ui_Button.size=#md,
+  ~buttonVariant: Toolkit__Ui_Button.variant=#default,
+) => {
+  let dropDownRef = React.useRef(Js.Nullable.null)
+  let buttonRef = React.useRef(Js.Nullable.null)
+  let {isOpen, hide, toggle} = Toolkit__Hooks.useDisclosure(~defaultIsOpen, ())
+
+  Toolkit__Hooks.useOnClickOutside(dropDownRef, _ => {
+    hide()
+  })
+
+  let (adjustmentStyle, setAdjustmentStyle) = React.useState(() => None)
+
+  React.useEffect1(() => {
+    if isOpen {
+      ()
+    } else {
+      setAdjustmentStyle(_ => None)
+    }
+    None
+  }, [isOpen])
+
+  <div className={cx(["relative", containerClassName])}>
+    <Toolkit__Ui_Button
+      variant=buttonVariant
+      size=buttonSize
+      type_="button"
+      color=buttonColor
+      buttonRef={ReactDOM.Ref.domRef(buttonRef)}
+      onClick={event => {
+        isOpen ? hide() : toggle()
+      }}
+      className={cx([buttonClassName, "dropdown-button"])}>
+      label
+    </Toolkit__Ui_Button>
+    {isOpen
+      ? <ReachUi.Portal>
+          <div
+            ref={ReactDOM.Ref.callbackDomRef(ref => {
+              dropDownRef.current = ref
+
+              if adjustmentStyle->Option.isNone {
+                let ref = ref->Js.Nullable.toOption
+                let buttonRef = buttonRef.current->Js.Nullable.toOption
+
+                switch (ref, buttonRef) {
+                | (Some(ref), Some(buttonRef)) => {
+                    let {left, top, width, height} =
+                      buttonRef->Browser.DomElement.getBoundingClientRect
+                    let dropdown = ref->Browser.DomElement.getBoundingClientRect
+
+                    let left = left +. width /. 2. -. dropdown.width /. 2.
+
+                    let left = switch left {
+                    | left if left < 0. => "0px"
+                    | left if left +. dropdown.width > Browser.innerWidth->Int.toFloat =>
+                      `${(Browser.innerWidth->Int.toFloat -. dropdown.width)->Js.Float.toString}px`
+                    | left => `${left->Js.Float.toString}px`
+                    }
+
+                    setAdjustmentStyle(_ => Some(
+                      ReactDOM.Style.make(
+                        ~left,
+                        ~top=`${(top +. height)->Js.Float.toString}px`,
+                        ~opacity="1",
+                        (),
+                      ),
+                    ))
+                  }
+
+                | _ => ()
+                }
+              }
+            })}
+            className={cx([
+              "dropdown",
+              "absolute z-20 bg-white p-2 transform shadow rounded text-base font-normal text-neutral-700 opacity-0",
+              dropdownClassName,
+            ])}
+            style={adjustmentStyle->Option.getWithDefault(ReactDOM.Style.make())}>
+            children
+          </div>
+        </ReachUi.Portal>
+      : React.null}
+  </div>
+}