@rpcbase/client 0.227.0 → 0.231.0

package/ui/ExpandableFloatView/useBackdrop.js

@@ -1,45 +0,0 @@
-/* @flow */
-import {useRef, useEffect} from "react"
-
-
-const useBackdrop = (isOpenRef, onToggle) => {
-  const elRef = useRef(document.createElement("div"))
-
-  useEffect(() => {
-    const onTransitionEnd = (ev) => {
-      // hide backdrop when css opacity transition has ended
-      if (!isOpenRef.current) {
-        requestAnimationFrame(() => {
-          elRef.current.style.visibility = "hidden"
-        })
-      }
-    }
-
-    elRef.current.id = "exp-float-view-backdrop"
-    elRef.current.style.opacity = 0
-    elRef.current.style.visibility = "hidden"
-
-    elRef.current.addEventListener("transitionend", onTransitionEnd)
-
-    elRef.current.onclick = () => {
-      elRef.current.style.opacity = 0
-      onToggle()
-    }
-
-    document.body.appendChild(elRef.current)
-
-    return () => {
-      elRef.current.remove()
-    }
-  }, [])
-
-  const showBackdrop = () => {
-    // console.lgo
-    elRef.current.style.visibility = "visible"
-    elRef.current.style.opacity = 0.3
-  }
-
-  return {showBackdrop}
-}
-
-export default useBackdrop

package/ui/LottiePlayer/LottiePlayer.js

@@ -1,4 +0,0 @@
-/* @flow */
-import {Player} from "@rpcbase/lottie"
-
-export default Player

package/ui/LottiePlayer/index.js

@@ -1,8 +0,0 @@
-/* @flow */
-import {withSuspense} from "../helpers/withSuspense"
-
-
-export default withSuspense(
-  () => import(/* webpackChunkName: "lottie-player" */ "./LottiePlayer"),
-  {hideLoader: true},
-)

package/ui/Modal/HashStateModal.js

@@ -1,30 +0,0 @@
-/* @flow */
-import assert from "assert"
-
-import {useHashState} from "@rpcbase/client/hashState"
-
-
-const HashStateModal = ({hashPropName, children}) => {
-  const {hashState, serializeHashState} = useHashState()
-
-  if (children) {
-    assert(typeof children === "function", "HashStateModal children must be a function")
-  }
-
-  const show = !!hashState[hashPropName]
-
-  if (!show) return null
-
-  const onHide = () => {
-    serializeHashState({
-      [hashPropName]: null,
-    })
-  }
-
-  const hashProps = {}
-  hashProps[hashPropName] = hashState[hashPropName]
-
-  return children({onHide, ...hashProps})
-}
-
-export default HashStateModal

package/ui/Modal/Modal.js

@@ -1,93 +0,0 @@
-/* @flow */
-import {useEffect, useRef} from "react"
-import _debounce from "lodash/debounce"
-import BSModal from "react-bootstrap/Modal"
-
-import "./modal.scss"
-
-
-const MAX_RETRIES = 256
-const DELAY_MS = 20
-
-const Modal = ({
-  ref: _ref,
-  show = true,
-  dark = false,
-  scrollable = true,
-  animation = true,
-  className = "",
-  children,
-  ...props
-}) => {
-  const internalRef = useRef(null)
-  const ref = _ref || internalRef
-
-  useEffect(() => {
-    if (!show) return
-
-    let attemptsCount = 0
-    let ro
-
-    const setup = () => {
-      const bodyEl = ref.current?.dialog?.querySelector(".modal-body")
-      if (!bodyEl) {
-        attemptsCount++
-        if (attemptsCount > MAX_RETRIES) {
-          throw new Error("unable to initialize after max attempts")
-        }
-        setTimeout(setup, DELAY_MS)
-        return
-      }
-
-      const checkApplyScroller = _debounce(() => {
-        const contentEl = ref.current?.dialog?.querySelector(".modal-content")
-        // TODO: this shouldn't happen, but it only happens with modalforms... investigate
-        // additionally we're eventually going to ditch the react-bootstrap modals and use our own so don't waste so much time on this
-        if (!contentEl) return
-
-        if (bodyEl.scrollHeight > bodyEl.clientHeight) {
-          if (!contentEl.classList.contains("has-scroller")) {
-            contentEl.classList.add("has-scroller")
-          }
-        } else {
-          if (contentEl.classList.contains("has-scroller")) {
-            contentEl.classList.remove("has-scroller")
-          }
-        }
-      }, DELAY_MS)
-
-      ro = new ResizeObserver((entries) => {
-        checkApplyScroller()
-      })
-
-      ro.observe(bodyEl)
-    }
-
-    setup()
-
-    return () => {
-      ro?.disconnect()
-    }
-  }, [show])
-
-  return (
-    <BSModal
-      className={cx({"is-dark": dark}, className)}
-      centered={true}
-      scrollable={scrollable}
-      animation={animation}
-      ref={ref}
-      show={show}
-      {...props}
-    >
-      {children}
-    </BSModal>
-  )
-}
-
-Modal.Dialog = BSModal.Dialog
-Modal.Header = BSModal.Header
-Modal.Body = BSModal.Body
-Modal.Footer = BSModal.Footer
-
-export default Modal

package/ui/Modal/ModalForm/AlertBanner.js

@@ -1,82 +0,0 @@
-import {useImperativeHandle, useState, useEffect} from "react"
-import {useFormContext} from "react-hook-form"
-import Alert from "react-bootstrap/Alert"
-
-
-const AlertBanner = ({ref, modalRef, ...props}) => {
-  const {formState} = useFormContext()
-
-  const [alertContent, setAlertContent] = useState(null)
-
-  // remove alert if we are done submitting and there are no dirty fields
-  useEffect(() => {
-    const hasDirtyFields = Object.keys(formState.dirtyFields).length > 0
-    if (alertContent && !formState.isSubmitting && !hasDirtyFields) {
-      setAlertContent(null)
-    }
-  }, [alertContent, formState.isSubmitting, formState.dirtyFields])
-
-  const onClickDiscardAndClose = () => {
-    modalRef.current.forceClose()
-  }
-
-  const bounce = () => {
-    requestAnimationFrame(() => {
-      const el = document.querySelector(".bouncy-alert")
-
-      el.classList.add("bounce")
-
-      setTimeout(() => {
-        requestAnimationFrame(() => {
-          el.classList.remove("bounce")
-        })
-        // WARNING: timeout must match value in css
-      }, 220)
-    })
-  }
-
-  useImperativeHandle(ref, () => ({
-    onRequestHide: () => {
-      const {isSubmitting, dirtyFields} = formState
-
-      // do not close when form submitting
-      if (isSubmitting) {
-        setAlertContent(
-          <Alert variant={"danger"} className="bouncy-alert d-flex">
-            <div>Cannot close while submitting, please do not close this page.</div>
-          </Alert>,
-        )
-
-        bounce()
-        return false
-      }
-      // when form is dirty do not close
-      else if (Object.keys(dirtyFields).length > 0) {
-        setAlertContent(
-          <Alert variant={"light"} className="bouncy-alert d-flex">
-            <div>Are you sure you want to close without saving?</div>
-            <div role="button" onClick={onClickDiscardAndClose} className="link-primary ms-2">
-              Discard and Close
-            </div>
-          </Alert>,
-        )
-
-        bounce()
-        return false
-      }
-
-      setAlertContent(null)
-      return true
-    },
-  }))
-
-  return (
-    <div className="modal-form-alerts w-100" style={{top: -70}}>
-      {alertContent}
-    </div>
-  )
-}
-
-AlertBanner.displayName = "AlertBanner"
-
-export default AlertBanner

package/ui/Modal/ModalForm/index.js

@@ -1,188 +0,0 @@
-/* @flow */
-import debug from "debug"
-import {useImperativeHandle, useEffect, useState, useRef} from "react"
-import {FormProvider} from "react-hook-form"
-
-import ActivityIndicator from "../../ActivityIndicator"
-import {SubmitButton} from "../../../form/SubmitButton"
-
-import Modal from "../Modal"
-
-import AlertBanner from "./AlertBanner"
-
-import "./modal-form.scss"
-
-
-const log = debug("form")
-
-const ExtLink = ({to}) => {
-  return (
-    <a target="_blank" rel="noopener noreferrer" href={to}>
-      {to}
-    </a>
-  )
-}
-
-const SHOW_LOADER_DELAY = 120 // ms
-
-// Bootstrap Modal integrated with hook form
-const ModalForm = ({
-  ref: _ref,
-  title,
-  icon,
-  footerLink,
-  submitTitle,
-  submittingTitle,
-  show,
-  onHide,
-  isLiveSubmit = false,
-  form,
-  onSubmit,
-  children,
-  ...props
-}) => {
-  const {formState, watch, handleSubmit} = form
-
-  const internalRef = useRef(null)
-  const ref = _ref || internalRef
-
-  const alertBannerRef = useRef(null)
-
-  // timeoutRef: only start displaying isBusy after a short delay
-  // to avoid screen flashing when the data loads fast enough
-  const timeoutRef = useRef(null)
-  const [isBusy, setIsBusy] = useState(false)
-
-  useImperativeHandle(ref, () => ({
-    ...ref.current,
-    forceClose: () => {
-      onHide()
-    },
-  }))
-
-  useEffect(() => {
-    // busy when either submitting or loading (async getDefaultValues)
-    if (formState.isSubmitting || formState.isLoading) {
-      timeoutRef.current = setTimeout(() => {
-        setIsBusy(true)
-      }, SHOW_LOADER_DELAY)
-    } else {
-      if (timeoutRef.current) {
-        window.clearTimeout(timeoutRef.current)
-      }
-      setIsBusy(false)
-    }
-  }, [formState.isSubmitting, formState.isLoading, setIsBusy])
-
-  useEffect(() => {
-    if (isLiveSubmit) {
-      const subscription = watch(handleSubmit(onSubmit))
-      return () => subscription.unsubscribe()
-    }
-  }, [isLiveSubmit, handleSubmit, watch])
-
-  const onHideHandler = () => {
-    log("onHideHandler")
-    if (!isLiveSubmit) {
-      onHide()
-      return
-    }
-
-    if (alertBannerRef.current.onRequestHide()) {
-      onHide()
-    }
-  }
-
-  const onClickSubmit = async() => {
-    log("onClickSubmit")
-    await handleSubmit(onSubmit)()
-  }
-
-  return (
-    <Modal
-      className="modal-form"
-      show={show}
-      onHide={onHideHandler}
-      ref={ref}
-      backdrop={isBusy ? "static" : true}
-      {...props}
-    >
-      <FormProvider {...form}>
-        <AlertBanner ref={alertBannerRef} modalRef={ref} />
-        <Modal.Header closeButton>
-          <div>
-            {icon && (
-              <img
-                width={20}
-                height={20}
-                style={{marginTop: 0}}
-                className="me-2"
-                src={`/static/icons/${icon}.svg`}
-              />
-            )}
-            {title}
-          </div>
-        </Modal.Header>
-        <Modal.Body className="pb-3" style={{position: "relative"}}>
-          <div className={cx("modal-form-body", {"is-busy": isBusy})}>
-            <fieldset disabled={isBusy}>{children}</fieldset>
-          </div>
-
-          {isBusy && (
-            <div className="loading-overlay">
-              {isLiveSubmit && (
-                <>
-                  <ActivityIndicator />
-                  <div className="mt-2 fw-normal">
-                    {formState.isLoading && <>Loading...</>}
-                    {formState.isSubmitting && (
-                      <>{submittingTitle || "Submitting..."}</>
-                    )}
-                  </div>
-                </>
-              )}
-            </div>
-          )}
-        </Modal.Body>
-
-        {footerLink && isLiveSubmit && (
-          <Modal.Footer className="justify-content-start bg-light">
-            For more information, check out&nbsp;
-            <ExtLink to={footerLink} />
-          </Modal.Footer>
-        )}
-
-        {footerLink && !isLiveSubmit && (
-          <Modal.Footer className="p-0 justify-content-start align-items-start flex-column">
-            <div className="d-flex flex-row-reverse justify-content-start w-100 py-2">
-              <SubmitButton
-                className="me-3"
-                disabled={formState.isSubmitting || formState.isLoading}
-                isLoading={formState.isSubmitting}
-                onClick={onClickSubmit}
-              >
-                {formState.isSubmitting
-                  ? submittingTitle || submitTitle
-                  : submitTitle}
-              </SubmitButton>
-
-              <button
-                className="btn btn-link btn-cancel"
-                disabled={formState.isSubmitting}
-                onClick={onHideHandler}
-              >
-                Cancel
-              </button>
-            </div>
-            <div className="w-100 bg-light border-top mx-0 my-0 p-3">
-              For more information, check out&nbsp;
-              <ExtLink to={footerLink} />
-            </div>
-          </Modal.Footer>
-        )}
-      </FormProvider>
-    </Modal>
-  )
-}
-
-export default ModalForm

package/ui/Modal/ModalForm/modal-form.scss

@@ -1,63 +0,0 @@
-@import "helpers";
-
-@keyframes bounce {
-  0% {
-    transform: scale(1);
-  }
-
-  50% {
-    transform: scale(1.02);
-  }
-
-  100% {
-    transform: scale(1);
-  }
-}
-
-$bounce-duration: 220ms;
-
-.modal-form {
-  .modal-content {
-    overflow: visible;
-  }
-
-  .modal-footer {
-    border-bottom-left-radius: var(--bs-modal-border-radius);
-    border-bottom-right-radius: var(--bs-modal-border-radius);
-    overflow: hidden;
-  }
-
-  .modal-form-body {
-    &.is-busy {
-      // doesn't look that good, does it
-      // filter: blur(0.5px);
-      opacity: 0.8;
-    }
-  }
-
-  .modal-form-alerts {
-    position: absolute;
-    top: -40px;
-  }
-
-  .alert {
-    border-radius: var(--bs-modal-border-radius);
-    box-shadow: var(--bs-modal-box-shadow);
-  }
-
-  .alert.alert-light {
-    // background: var(--bs-modal-bg) !important;
-    background: var(--bs-gray-200) !important;
-    border-color: $gray-700;
-    opacity: 1;
-  }
-
-  .bouncy-alert {
-    transform: scale(1);
-    transition: transform $bounce-duration ease-out;
-
-    &.bounce {
-      animation: bounce $bounce-duration;
-    }
-  }
-}

package/ui/Modal/index.js

@@ -1,10 +0,0 @@
-/* @flow */
-import Modal from "./Modal"
-import ModalForm from "./ModalForm"
-import withHashStateModal from "./withHashStateModal"
-import HashStateModal from "./HashStateModal"
-
-
-export {ModalForm, HashStateModal, withHashStateModal}
-
-export default Modal

package/ui/Modal/modal.scss

@@ -1,101 +0,0 @@
-@import "helpers";
-
-$navbar-height: 45px !default;
-
-.modal.is-dark {
-  $border-color: $gray-800;
-  $bg-darker: darken($gray-900, 4%);
-
-  .modal-content {
-    background-color: $gray-900;
-    color: $gray-100;
-    border-color: $black;
-  }
-
-  .modal-header {
-    color: $gray-400;
-    background-color: $bg-darker;
-    border-color: $black;
-  }
-
-  .modal-footer {
-    background-color: $bg-darker;
-    border-color: $black;
-  }
-
-  .btn-close {
-    background-color: $gray-700;
-  }
-
-  .text-secondary {
-    color: $gray-600 !important;
-  }
-
-  hr {
-    border-color: $gray-600;
-  }
-}
-
-.modal-header {
-  font-size: 1rem;
-  font-weight: 600;
-
-  &.close-top {
-    .btn-close {
-      align-self: flex-start;
-    }
-  }
-}
-
-.fullsize-modal {
-  .modal-header {
-    font-size: 15px;
-
-    // padding-top: 10px;
-    // padding-bottom: 9px;
-    padding-top: 0;
-    padding-bottom: 0;
-
-    height: $navbar-height;
-  }
-
-  .modal-content {
-    overflow: hidden;
-    border-top: none;
-    border-bottom: none;
-  }
-
-  .modal-dialog {
-    margin-top: 0;
-    margin-bottom: 0;
-    width: 100%;
-    max-width: calc(100vw - 82px);
-    height: 100%;
-  }
-
-  .modal-header,
-  .modal-content {
-    border-radius: 0;
-  }
-
-  // @include media-breakpoint-up(lg) {
-  @media (min-width: 992px) {
-    .modal-dialog {
-      max-width: calc(100vw - 182px) !important;
-    }
-  }
-}
-
-@media (height < 600px) {
-  .modal-content.has-scroller {
-    border-color: $white !important;
-    border-radius: 0 !important;
-  }
-
-  .modal-dialog-centered {
-    height: 100% !important;
-    min-height: 100% !important;
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-}

package/ui/Modal/withHashStateModal.js

@@ -1,24 +0,0 @@
-/* @flow */
-import {useHashState} from "@rpcbase/client/hashState"
-
-
-const withHashStateModal = (Component, hashPropName) => () => {
-  const {hashState, serializeHashState} = useHashState()
-
-  const show = !!hashState[hashPropName]
-
-  if (!show) return null
-
-  const onHide = () => {
-    serializeHashState({
-      [hashPropName]: null,
-    })
-  }
-
-  const hashProps = {}
-  hashProps[hashPropName] = hashState[hashPropName]
-
-  return <Component onHide={onHide} {...hashProps} />
-}
-
-export default withHashStateModal

package/ui/RedboxError/index.js

@@ -1,3 +0,0 @@
-import {RedBoxError} from "@rpcbase/redbox-react"
-
-export {RedBoxError}

package/ui/Search/SearchHistory/index.js

@@ -1,45 +0,0 @@
-import {formatDistance} from "date-fns/formatDistance"
-
-import {useSearchHistory} from "./useSearchHistory"
-
-import "./search-history.scss"
-
-// TODO: refactor out of rbt to be able to control the input
-// TODO: search history must support keyboard navigation
-
-// we pass the searchHistory prop from the top component
-// because we are unmounted when results aren't shown,
-// but we want history to be loaded anyway
-export const SearchHistory = ({setSearchInput}) => {
-  const searchHistory = useSearchHistory()
-
-  const getClickHandler = (item) => (e) => {
-    e.preventDefault()
-    setSearchInput(item.query)
-  }
-
-  if (!searchHistory.length > 0) {
-    return null
-  }
-
-  return (
-    <>
-      <div className="search-history-header ps-3 pb-2 mt-2 fw-bold border-bottom">
-        Previous Queries
-      </div>
-      {searchHistory.map((item, i) => (
-        <div
-          role="button"
-          key={`search-history-${i}`}
-          className="list-group-item list-group-item-action"
-          onClick={getClickHandler(item)}
-        >
-          <span>{item.query}</span>
-          <small className="text-secondary ms-2">
-            {formatDistance(item.timestamp, new Date(), {addSuffix: true})}
-          </small>
-        </div>
-      ))}
-    </>
-  )
-}