@rpcbase/ui 0.12.0 → 0.13.0

package/Modal/HashStateModal.js

@@ -0,0 +1,32 @@
+/* @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]
+
+  console.log("WOWOOW", show)
+
+  if (!show) return null
+
+  const onHide = () => {
+    serializeHashState({
+      [hashPropName]: null,
+    })
+  }
+
+  const hashProps = {}
+  hashProps[hashPropName] = hashState[hashPropName]
+
+  return children({onHide, ...hashProps})
+}
+
+export default HashStateModal

package/Modal/Modal.js

@@ -0,0 +1,97 @@
+/* @flow */
+import {forwardRef, 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 = forwardRef(
+  (
+    {
+      show = true,
+      dark = false,
+      scrollable = true,
+      animation = true,
+      className = "",
+      children,
+      ...props
+    },
+    _ref,
+  ) => {
+    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/Modal/ModalForm/AlertBanner.js

@@ -0,0 +1,83 @@
+/* @flow */
+import {forwardRef, useImperativeHandle, useState, useEffect} from "react"
+import {useFormContext} from "react-hook-form"
+import Alert from "react-bootstrap/Alert"
+
+
+const AlertBanner = forwardRef(({modalRef, ...props}, ref) => {
+  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/Modal/ModalForm/index.js

@@ -0,0 +1,193 @@
+/* @flow */
+import debug from "debug"
+import {forwardRef, useImperativeHandle, useEffect, useState, useRef} from "react"
+import {FormProvider} from "react-hook-form"
+
+import ActivityIndicator from "../../ActivityIndicator"
+import SubmitButton from "../../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 = forwardRef(
+  (
+    {
+      title,
+      icon,
+      footerLink,
+      submitTitle,
+      submittingTitle,
+      show,
+      onHide,
+      isLiveSubmit = false,
+      form,
+      onSubmit,
+      children,
+      ...props
+    },
+    _ref,
+  ) => {
+    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>
+    )
+  },
+)
+
+ModalForm.displayName = "ModalForm"
+
+export default ModalForm

package/Modal/index.js

@@ -0,0 +1,10 @@
+/* @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/Modal/withHashStateModal.js

@@ -0,0 +1,24 @@
+/* @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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/ui",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "license": "SSPL-1.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"