@rpcbase/client 0.209.0 → 0.211.0

package/ui/View/index.web.js

@@ -1,41 +1,44 @@
-/* @flow */
-import {forwardRef} from "react"
 import {OverlayTrigger, Tooltip} from "react-bootstrap"
 
 
-export const View = forwardRef(
-  ({children, tooltip, tooltipProps = {style: {}}, className = "", ...props}, ref) => {
-    const comp = (
-      <div ref={ref} className={cx("d-flex", className)} {...props}>
-        {children}
-      </div>
-    )
+export const View = ({
+  ref,
+  children,
+  tooltip,
+  tooltipProps = {style: {}},
+  className = "",
+  ...props
+}) => {
+  const comp = (
+    <div ref={ref} className={cx("d-flex", className)} {...props}>
+      {children}
+    </div>
+  )
 
-    if (tooltip) {
-      const renderTooltip = ({style, ...overlayTooltipProps}) => {
-        return (
-          <Tooltip
-            {...overlayTooltipProps}
-            {...tooltipProps}
-            placement="left-start"
-            style={{...style, ...tooltipProps.style}}
-          >
-            {tooltip}
-          </Tooltip>
-        )
-      }
+  if (tooltip) {
+    const renderTooltip = ({style, ...overlayTooltipProps}) => {
       return (
-        <OverlayTrigger
-          placement="top"
-          transition={false}
-          delay={{show: 0, hide: 100}}
-          overlay={renderTooltip}
+        <Tooltip
+          {...overlayTooltipProps}
+          {...tooltipProps}
+          placement="left-start"
+          style={{...style, ...tooltipProps.style}}
         >
-          {comp}
-        </OverlayTrigger>
+          {tooltip}
+        </Tooltip>
       )
     }
+    return (
+      <OverlayTrigger
+        placement="top"
+        transition={false}
+        delay={{show: 0, hide: 100}}
+        overlay={renderTooltip}
+      >
+        {comp}
+      </OverlayTrigger>
+    )
+  }
 
-    return comp
-  },
-)
+  return comp
+}

package/ui/helpers/withSuspense/index.js

@@ -1,5 +1,4 @@
-/* @flow */
-import React, {Suspense, useEffect, useState} from "react"
+import {Suspense, useEffect, useState, lazy} from "react"
 
 import ActivityIndicator from "../../ActivityIndicator"
 
@@ -7,7 +6,7 @@ import ActivityIndicator from "../../ActivityIndicator"
 const DELAY_BEFORE_LOADER = 200
 
 export const withSuspense = (loadFn, opts = {hideLoader: false}) => {
-  const Component = React.lazy(loadFn)
+  const Component = lazy(loadFn)
 
   const Loader = () => {
     const [showLoader, setShowLoader] = useState(false)
@@ -28,11 +27,11 @@ export const withSuspense = (loadFn, opts = {hideLoader: false}) => {
     )
   }
 
-  const Wrapper = React.forwardRef((props, ref) => (
+  const Wrapper = ({ref, ...props}) => (
     <Suspense fallback={<Loader />}>
       <Component ref={ref} {...props} />
     </Suspense>
-  ))
+  )
 
   return Wrapper
 }

package/ui/nav/{Header → HeaderContainer}/header.scss

@@ -7,7 +7,7 @@ $account-max-width: 160px;
 $img-size: 32px;
 $img-border-radius: 3px;
 
-#main-header-nav {
+#header-container {
   border-bottom: 1px solid $black;
   background-color: $black !important;
   height: 45px;

package/ui/nav/HeaderContainer/index.tsx

@@ -0,0 +1,151 @@
+import {ReactNode} from "react"
+
+// import apiClient from "../../../apiClient"
+
+// import SearchAnything from "components/search/SearchAnything"
+
+// import LogoNav from "./components/LogoNav"
+
+// Env Selector
+// import useFilteredEnvs from "./components/EnvSelector/useFilteredEnvs"
+// import EnvSelectorToggle from "./components/EnvSelector/Toggle"
+// import EnvSelectorDropdown from "./components/EnvSelector/Dropdown"
+// Group Selector
+// import useFilteredGroups from "./components/GroupSelector/useFilteredGroups"
+// import GroupSelectorToggle from "./components/GroupSelector/Toggle"
+// import GroupSelectorDropdown from "./components/GroupSelector/Dropdown"
+
+// import MorphingDropdown from "./components/MorphingDropdown"
+
+// import AccountsToggle from "./components/AccountsToggle"
+// import NotificationsToggle from "./components/NotificationsToggle"
+// import EnvSettingsToggle from "./components/EnvSettingsToggle"
+// import PublishControl from "./components/PublishControl"
+
+// import AccountsDropdown from "./components/AccountsDropdown"
+// import NotificationsDropdown from "./components/NotificationsDropdown"
+// import PhoneDropdown from "components/phone/PhoneDropdown"
+// import EnvSettingsDropdown from "./components/EnvSettingsDropdown"
+
+import "./header.scss"
+
+
+// const DefaultHeader = () => {
+//   return (
+//     <>
+//       <LogoNav isSignedIn={false} />
+
+//       <div className="nav-default d-flex flex-row justify-content-between w-100">
+//         <div className="d-flex flex-row"></div>
+
+//         <div className="d-flex flex-row">
+//           <a className="nav-link px-2 me-2 fw-bold" href="/signin">
+//             Sign In
+//           </a>
+//         </div>
+//       </div>
+//     </>
+//   )
+// }
+
+// const SignedInHeader = () => {
+//   const loc = window.location.pathname
+
+//   const [accounts, setAccounts] = useState([])
+
+//   const {envs, activeEnv, setFilter: setEnvsFilter} = useFilteredEnvs()
+//   const {groups, activeGroup, setFilter: setGroupsFilter} = useFilteredGroups()
+
+//   useEffect(() => {
+//     // TODO: useapi hook with cache
+//     const load = async() => {
+//       const res = await apiClient.post("/api/v1/auth/get_accounts")
+//       assert(res.data.status === "ok")
+//       setAccounts(res.data.accounts)
+//       // console.log("accounts", res.data.accounts)
+//     }
+
+//     load()
+//   }, [])
+
+//   return (
+//     <>
+//       <MorphingDropdown.Provider side="left">
+//         <LogoNav isSignedIn={true} />
+
+//         <EnvSelectorToggle activeEnv={activeEnv} />
+//         <GroupSelectorToggle activeGroup={activeGroup} />
+
+//         <MorphingDropdown.Portal>
+//           <EnvSelectorDropdown
+//             id="env-selector"
+//             envs={envs}
+//             activeEnv={activeEnv}
+//             setFilter={setEnvsFilter}
+//           />
+
+//           <GroupSelectorDropdown
+//             id="group-selector"
+//             groups={groups}
+//             activeGroup={activeGroup}
+//             setFilter={setGroupsFilter}
+//           />
+//         </MorphingDropdown.Portal>
+//       </MorphingDropdown.Provider>
+
+//       {/* Search anything */}
+//       <SearchAnything />
+
+//       <div className="ms-auto d-none d-md-flex flex-row text-truncate">
+//         <a className="nav-link mx-2 px-1" href="/docs">
+//           Docs
+//         </a>
+//         <a
+//           className={cx("nav-link px-1", {active: loc.startsWith("/marketplace")})}
+//           href="/marketplace"
+//         >
+//           Marketplace
+//         </a>
+//       </div>
+
+//       <PublishControl />
+
+//       {/* Phone */}
+//       <PhoneDropdown />
+
+//       <MorphingDropdown.Provider side="right">
+//         {/* WARNING: update the anchor-${ids} on the toggle to match the menus if adding or removing */}
+//         <NotificationsToggle />
+
+//         <EnvSettingsToggle />
+
+//         <AccountsToggle />
+
+//         <MorphingDropdown.Portal>
+//           {/* Notifications */}
+//           <NotificationsDropdown id="notifications" />
+
+//           {/* Env Settings */}
+//           <EnvSettingsDropdown id="env-setup" />
+
+//           {/* Accounts + Org */}
+//           <AccountsDropdown id="accounts" accounts={accounts} />
+//         </MorphingDropdown.Portal>
+//       </MorphingDropdown.Provider>
+//     </>
+//   )
+// }
+
+export const HeaderContainer = ({children}: {children: ReactNode}) => {
+
+  if (!children) return null
+
+  return (
+    <nav
+      id="header-container"
+      className={"d-flex align-items-center fixed-top bg-dark flex-md-nowrap shadow p-0 text-light"}
+    >
+      {children}
+    </nav>
+  )
+}

package/ui/nav/MorphingDropdown/MorphingDropdownContext.tsx

@@ -0,0 +1,151 @@
+import assert from "assert"
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useId,
+  useRef,
+  useState,
+  useEffect,
+  useCallback,
+} from "react"
+
+
+const TOGGLE_OFF_DELAY = 180
+
+export const MorphingDropdownContext = createContext(undefined!)
+
+export const useMorphingDropdown = () => useContext(MorphingDropdownContext)
+
+export const MorphingDropdownProvider = ({
+  children,
+  side,
+}: {
+  children: ReactNode;
+  side: "left" | "right";
+}) => {
+  const portalId = useId()
+
+  const setNextMountedRectRef = useRef(() => null)
+  const onResetStateRef = useRef(() => null)
+  const mousePosRef = useRef({x: 0, y: 0})
+  const isMouseOverToggleRef = useRef(false)
+
+  const [activeId, _setActiveId] = useState()
+
+  useEffect(() => {
+    assert(["left", "right"].includes(side))
+  }, [])
+
+  useEffect(() => {
+    const listener = (e) => {
+      mousePosRef.current = {
+        x: e.pageX,
+        y: e.pageY,
+      }
+    }
+
+    document.addEventListener("mousemove", listener)
+
+    return () => {
+      document.removeEventListener("mousemove", listener)
+    }
+  }, [])
+
+  const setActiveId = useCallback((nextId) => {
+    let shouldReset = false
+    _setActiveId((currentId) => {
+      if (nextId === currentId || nextId === null) {
+        shouldReset = true
+
+        return null
+      } else return nextId
+    })
+
+    if (shouldReset) {
+      const fn = onResetStateRef.current
+      if (typeof fn === "function") {
+        fn()
+      }
+    }
+  }, [])
+
+  const close = useCallback(() => {
+    setActiveId(null)
+  }, [setActiveId])
+
+  const hideAfterMouseLeave = useCallback(() => {
+    // hovering a toggle, skip
+    if (isMouseOverToggleRef.current) return
+
+    // check if we are hovering the menu's portal
+    const portalEl = document.getElementById(portalId)
+
+    if (!portalEl) {
+      setActiveId(null)
+      return
+    }
+
+    // portal exists, check if cursor is hovering it
+    const rect = portalEl.getBoundingClientRect()
+    const {x: mouseX, y: mouseY} = mousePosRef.current
+
+    const isHovering =
+      mouseX >= rect.left &&
+      mouseX <= rect.right &&
+      mouseY >= rect.top &&
+      mouseY <= rect.bottom
+
+    if (!isHovering) {
+      setActiveId(null)
+      return
+    }
+  }, [])
+
+  const registerSetNextMountedHandler = (fn) => {
+    setNextMountedRectRef.current = fn
+  }
+
+  const registerOnResetState = (fn) => {
+    onResetStateRef.current = fn
+  }
+
+  // when a toggle is hovered
+  const applyMouseEnterToggle = (id) => {
+    isMouseOverToggleRef.current = true
+    _setActiveId(id)
+  }
+
+  const applyMouseLeaveToggle = () => {
+    isMouseOverToggleRef.current = false
+    setTimeout(() => {
+      hideAfterMouseLeave()
+    }, TOGGLE_OFF_DELAY)
+  }
+
+  const applyMouseLeaveMenu = () => {
+    setTimeout(() => {
+      hideAfterMouseLeave()
+    }, TOGGLE_OFF_DELAY)
+  }
+
+  return (
+    <MorphingDropdownContext.Provider
+      value={{
+        registerSetNextMountedHandler,
+        setNextMountedRect: setNextMountedRectRef.current,
+        registerOnResetState,
+        applyMouseEnterToggle,
+        applyMouseLeaveToggle,
+        applyMouseLeaveMenu,
+        activeId,
+        setActiveId,
+        close,
+        side,
+        portalId,
+      }}
+    >
+      {children}
+    </MorphingDropdownContext.Provider>
+  )
+}

package/ui/nav/MorphingDropdown/MorphingDropdownMenu.tsx

@@ -0,0 +1,38 @@
+import assert from "assert"
+import {useRef, useLayoutEffect} from "react"
+
+import {useMorphingDropdown} from "./MorphingDropdownContext"
+
+
+export const MorphingDropdownMenu = ({
+  ref: parentRef,
+  id,
+  style = {},
+  children,
+  className = "",
+  ...props
+}) => {
+  assert(id, "missing dropdown menu id")
+
+  const selfRef = useRef(null)
+
+  const dropdownContext = useMorphingDropdown()
+
+  const ref = parentRef || selfRef
+
+  useLayoutEffect(() => {
+    const rect = ref.current.getBoundingClientRect()
+    dropdownContext.setNextMountedRect(id, rect)
+  }, [])
+
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={cx("text-light", className)}
+      style={{...style}}
+    >
+      {children}
+    </div>
+  )
+}

package/ui/nav/MorphingDropdown/MorphingDropdownPortal.tsx

@@ -0,0 +1,166 @@
+import assert from "assert"
+import {useState, useEffect, useRef, ReactNode} from "react"
+import {createPortal} from "react-dom"
+import {CSSTransition, TransitionGroup} from "react-transition-group"
+
+import {motion} from "framer-motion"
+
+import {SPRING_DEFAULT} from "../../springs"
+
+import {useMorphingDropdown} from "./MorphingDropdownContext"
+
+
+const RIGHT_OFFSET = 0
+
+const getElementId = (id) => `header-dd-transition-${id}`
+
+export const MorphingDropdownPortal = ({children}: {children: ReactNode}) => {
+  const portalElRef = useRef(document.createElement("div"))
+  const previousMountedIdRef = useRef(null)
+  const transitionNodeRef = useRef(null)
+
+  const dropdownContext = useMorphingDropdown()
+  const {portalId} = dropdownContext
+
+  const [animatedVals, setAnimatedVals] = useState({})
+  const [shouldAnimate, setShouldAnimate] = useState(false)
+
+  useEffect(() => {
+    document.body.appendChild(portalElRef.current)
+
+    return () => {
+      document.body.removeChild(portalElRef.current)
+    }
+  }, [])
+
+  // on click outside dismiss
+  useEffect(() => {
+    // do nothing if menu isn't open
+    if (!dropdownContext.activeId) {
+      return
+    }
+
+    const onClick = (e) => {
+      const wrapperEl = document.getElementById(portalId)
+
+      // click is inside the menu itself, so don't do anything
+      if (wrapperEl.contains(e.target)) {
+        return
+      }
+
+      // clicked outside, but we must ensure we didn't click on an anchor
+      let isInsideAnchor = false
+      const anchorElements = Array.from(document.querySelectorAll(".morphing-dropdown-anchor"))
+      anchorElements.forEach((anchorEl) => {
+        if (anchorEl.contains(e.target)) {
+          isInsideAnchor = true
+        }
+      })
+
+      // we have clicked, not in the menu and not on a menu anchor, dismiss
+      if (!isInsideAnchor) {
+        dropdownContext.setActiveId(null)
+      }
+    }
+
+    document.body.addEventListener("click", onClick)
+
+    return () => {
+      document.body.removeEventListener("click", onClick)
+    }
+  }, [dropdownContext.activeId])
+
+  //
+  dropdownContext.registerSetNextMountedHandler((id, rect) => {
+    const {height: nextHeight, width: nextWidth} = rect
+
+    const anchorElement = document.getElementById(`anchor-${id}`)
+    assert(anchorElement, "anchor element not found")
+    const anchorRect = anchorElement.getBoundingClientRect()
+    const centerX = anchorRect.x + anchorRect.width / 2
+
+    const viewportWidth = window.innerWidth
+
+    const nextAnimatedVals = {opacity: 1, height: nextHeight, width: nextWidth}
+
+    // LEFT
+    if (dropdownContext.side === "left") {
+      const nextLeft = centerX - nextWidth / 2
+      let left = 0 + nextLeft
+
+      if (left < 0) {
+        left = 0
+        // handles the right corner radius + border
+        document.getElementById(portalId).classList.add("docked-left")
+      } else {
+        document.getElementById(portalId).classList.remove("docked-left")
+      }
+
+      nextAnimatedVals.left = left
+    }
+    // RIGHT
+    else if (dropdownContext.side === "right") {
+      const nextRight = centerX + nextWidth / 2
+      let right = viewportWidth - nextRight
+
+      if (right < 0) {
+        right = 0
+        // handles the right corner radius + border
+        document.getElementById(portalId).classList.add("docked-right")
+      } else {
+        document.getElementById(portalId).classList.remove("docked-right")
+      }
+
+      nextAnimatedVals.right = right
+    }
+
+    // do not animate on first mount / render
+    const isNewMount = !previousMountedIdRef.current
+    previousMountedIdRef.current = id
+
+    if (isNewMount) {
+      setShouldAnimate(false)
+    } else {
+      setShouldAnimate(true)
+    }
+
+    setAnimatedVals(nextAnimatedVals)
+  })
+
+  dropdownContext.registerOnResetState(() => {
+    setShouldAnimate(false)
+    previousMountedIdRef.current = null
+    setAnimatedVals({opacity: 0})
+  })
+
+  const activeComp = children.find((c) => c.props.id === dropdownContext.activeId)
+
+  if (!activeComp) return null
+
+  return createPortal(
+    <motion.div
+      id={portalId}
+      className="morphing-dropdown-wrapper"
+      style={{position: "fixed", top: 45, right: RIGHT_OFFSET, overflow: "hidden"}}
+      transition={shouldAnimate ? SPRING_DEFAULT : {duration: 0}}
+      animate={animatedVals}
+      onMouseLeave={dropdownContext.applyMouseLeaveMenu}
+    >
+      <TransitionGroup>
+        <CSSTransition
+          id={getElementId(dropdownContext.activeId)}
+          key={dropdownContext.activeId}
+          nodeRef={transitionNodeRef}
+          timeout={60}
+          className="header-dropdown"
+          classNames="header-dropdown-fade"
+          unmountOnExit
+          in={true}
+        >
+          <div ref={transitionNodeRef} style={{position: "absolute", overflow: "hidden", minWidth: 100}}>{activeComp}</div>
+        </CSSTransition>
+      </TransitionGroup>
+    </motion.div>,
+    portalElRef.current,
+  )
+}

package/ui/nav/MorphingDropdown/MorphingDropdownToggle.tsx

@@ -0,0 +1,34 @@
+import {CSSProperties, ReactNode} from "react"
+import {useMorphingDropdown} from "./MorphingDropdownContext"
+
+
+export const MorphingDropdownToggle = ({
+  id,
+  className = "",
+  style = {},
+  children,
+}: {
+  id: string;
+  className?: string;
+  style?: CSSProperties;
+  children: ReactNode;
+}) => {
+  const morphingDropdown = useMorphingDropdown()
+
+  const onMouseEnter = () => {
+    morphingDropdown.applyMouseEnterToggle(id)
+  }
+
+  return (
+    <div
+      id={`anchor-${id}`}
+      className={cx("morphing-dropdown-anchor", className)}
+      onClick={() => morphingDropdown.setActiveId(id)}
+      onMouseEnter={onMouseEnter}
+      onMouseLeave={morphingDropdown.applyMouseLeaveToggle}
+      style={{cursor: "pointer", ...style}}
+    >
+      {children}
+    </div>
+  )
+}

package/ui/nav/MorphingDropdown/index.tsx

@@ -0,0 +1,16 @@
+import "./morphing-dropdown.scss"
+
+import {MorphingDropdownPortal} from "./MorphingDropdownPortal"
+import {useMorphingDropdown, MorphingDropdownProvider} from "./MorphingDropdownContext"
+import {MorphingDropdownMenu} from "./MorphingDropdownMenu"
+import {MorphingDropdownToggle} from "./MorphingDropdownToggle"
+
+
+export {
+  MorphingDropdownPortal as Portal,
+  MorphingDropdownProvider as Provider,
+  MorphingDropdownMenu as Menu,
+  MorphingDropdownToggle as Toggle,
+}
+
+export {useMorphingDropdown}