add animation on open/close

Author: aspeddro

src/bindings/Webapi.res

@@ -6,6 +6,7 @@ module Document = {
 module ClassList = {
   type t
   @send external toggle: (t, string) => unit = "toggle"
+  @send external remove: (t, string) => unit = "remove"
 }
 
 module Element = {
@@ -14,6 +15,7 @@ module Element = {
   @set external setClassName: (Dom.element, string) => unit = "className"
   @get external classList: Dom.element => ClassList.t = "classList"
   @send external getBoundingClientRect: Dom.element => {..} = "getBoundingClientRect"
+  @send external addEventListener: (Dom.element, string, unit => unit) => unit = "addEventListener"
 
   module Style = {
     @scope("style") @set external width: (Dom.element, string) => unit = "width"

src/components/DocSearch.res

@@ -103,7 +103,23 @@ let transformItems = (items: DocSearch.transformItems) => {
 let make = () => {
   let (state, setState) = React.useState(_ => Inactive)
 
-  React.useEffect1(() => {
+  let handleCloseModal = () => {
+    let () = switch ReactDOM.querySelector(".DocSearch-Modal") {
+    | Some(modal) =>
+      switch ReactDOM.querySelector("body") {
+      | Some(body) =>
+        open Webapi
+        body->Element.classList->ClassList.remove("DocSearch--active")
+        modal->Element.addEventListener("transitionend", () => {
+          setState(_ => Inactive)
+        })
+      | None => setState(_ => Inactive)
+      }
+    | None => ()
+    }
+  }
+
+  React.useEffect(() => {
     let isEditableTag = el =>
       switch el->tagName {
       | "TEXTAREA" | "SELECT" | "INPUT" => true
@@ -123,18 +139,22 @@ let make = () => {
       switch e.key {
       | "/" => focusSearch(e)
       | "k" if e.ctrlKey || e.metaKey => focusSearch(e)
-      | "Escape" => setState(_ => Inactive)
+      | "Escape" => handleCloseModal()
+      // setState(_ => Inactive)
       | _ => ()
       }
     }
     addKeyboardEventListener("keydown", handleGlobalKeyDown)
     Some(() => removeKeyboardEventListener("keydown", handleGlobalKeyDown))
   }, [setState])
 
-  let onClick = _ => setState(_ => Active)
+  let onClick = _ => {
+    setState(_ => Active)
+  }
 
-  let onClose = React.useCallback1(() => {
-    setState(_ => Inactive)
+  let onClose = React.useCallback(() => {
+    // setState(_ => Inactive)
+    handleCloseModal()
   }, [setState])
 
   <>

src/components/Search.res

@@ -42,11 +42,18 @@
   z-index: 200;
   padding: 10vh;
   background-color: rgba(0, 0, 0, 0.2);
-  backdrop-filter: blur(3px);
+  backdrop-filter: blur(0px);
   cursor: inherit !important;
+  transition: all .05s ease;
   @apply fixed top-0 left-0 flex flex-col;
 }
 
+.DocSearch--active {
+  .DocSearch-Container {
+    backdrop-filter: blur(3px);
+  }
+}
+
 .DocSearch-Container a {
   text-decoration: none;
 }
@@ -58,6 +65,16 @@
 
 .DocSearch-Modal {
   @apply relative min-h-0 mx-auto bg-white w-full flex flex-col shadow-lg max-w-screen-md rounded-lg;
+  transform: scale(0.95);
+  opacity: 0;
+  transition: all .2s ease;
+}
+
+.DocSearch--active {
+  .DocSearch-Modal {
+    transform: scale(1);
+    opacity: 1;
+  }
 }
 
 /* Modal Searchbox */