@rpcbase/client 0.197.0 → 0.198.0

package/{ui/FileUpload → form/FileInput}/FileUploadContext.tsx

@@ -1,7 +1,7 @@
 import Promise from "bluebird"
-import { ReactNode } from "react"
+import {ReactNode} from "react"
 import debug from "debug"
-import { createContext, useContext, useState, useRef, useEffect } from "react"
+import {createContext, useContext, useState, useRef, useEffect} from "react"
 
 import {EVENTS, UPLOAD_MAX_CONCURRENCY} from "./constants"
 
@@ -63,9 +63,9 @@ export const FileUploadContextProvider = ({
       new URL("./upload-worker/index.js", import.meta.url),
     )
 
-    const onMessage = async({ data }) => {
+    const onMessage = async({data}) => {
       log("worker message:", data)
-      const { type, payload } = data
+      const {type, payload} = data
 
       if (type === EVENTS.UPLOAD_COMPLETE) {
         const {filename, hash} = payload
@@ -118,7 +118,10 @@ export const FileUploadContextProvider = ({
       }
     })
 
-    await Promise.map(getUploadFiles(), startUploadAndWait, {concurrency: UPLOAD_MAX_CONCURRENCY})
+    await Promise.map(
+      getUploadFiles(), startUploadAndWait,
+      {concurrency: UPLOAD_MAX_CONCURRENCY}
+    )
 
     if (typeof onUploadComplete === "function") {
       await onUploadComplete(getUploadFiles())

package/{ui/FileUpload → form/FileInput}/FileUploadForm/index.tsx

@@ -17,7 +17,9 @@ const STATUS_MESSAGES = {
 }
 
 const FileUploadForm = () => {
-  const {workerRef, selectedFiles, setSelectedFiles, processedFiles, updateProcessedFile} = useFileUploadContext()
+  const {workerRef,
+    selectedFiles,
+    setSelectedFiles, processedFiles, updateProcessedFile} = useFileUploadContext()
 
   usePreventUnload()
 
@@ -119,8 +121,8 @@ const FileUploadForm = () => {
                     role="progressbar"
                     style={{width: `${progress}%`}}
                     aria-valuenow={progress}
-                    aria-valuemin="0"
-                    aria-valuemax="100"
+                    aria-valuemin={0}
+                    aria-valuemax={100}
                   />
                 </div>
                 <div className="ms-2 text-secondary">{progress}&nbsp;%</div>

package/{ui/FileUpload → form/FileInput}/index.tsx

@@ -1,11 +1,11 @@
-import { FileUploadContextProvider } from "./FileUploadContext"
+import {FileUploadContextProvider} from "./FileUploadContext"
 import FileUploadForm from "./FileUploadForm"
 import {UploadButton} from "./UploadButton"
 
-import "./file-upload.scss"
+import "./file-input.scss"
 
 
-export const FileUpload = ({
+export const FileInput = ({
   onUploadComplete,
 }: {
   onUploadComplete?: (files: any) => void | Promise<void>

package/{ui/FileUpload → form/FileInput}/upload-worker/index.js

@@ -4,6 +4,7 @@ import get_file_hash from "./get_file_hash"
 
 import {EVENTS} from "../constants"
 
+
 self.onmessage = ({data: {file, type, hash}}) => {
   if (type === EVENTS.BEGIN_HASH) {
     get_file_hash(file)

package/{ui/FileUpload → form/FileInput}/upload-worker/upload_file.js

@@ -94,7 +94,9 @@ const upload_file = async(file, hash) => {
 
       current_chunks_count++
 
-      log(`upload chunks ${current_chunks_count} chunk // ${total_bytes_read} total_bytes_read...`)
+      log(
+        `upload chunks ${current_chunks_count} chunk // ${total_bytes_read} total_bytes_read...`
+      )
 
       // there are more bytes to be read
       if (total_bytes_read < size) {

package/form/Form.tsx

@@ -0,0 +1,23 @@
+import {FormProvider, SubmitHandler, UseFormReturn} from "react-hook-form"
+
+
+type FormProps = {
+  ref?: React.Ref<HTMLFormElement>;
+  children: React.ReactNode;
+  onSubmit: SubmitHandler<any>;
+  className?: string;
+  form: UseFormReturn<any>;
+}
+
+export const Form = ({ref, children, onSubmit, className = "", ...form}: FormProps) => {
+
+  // const/*"needs-validation"*/
+
+  return (
+    <FormProvider {...form}>
+      <form ref={ref} onSubmit={onSubmit} className={cx(className)} noValidate>
+        {children}
+      </form>
+    </FormProvider>
+  )
+}

package/form/Input.tsx

@@ -0,0 +1,61 @@
+import React from "react"
+// import {NestedKeyOf} from "@rpcbase/client/types"
+import _get from "lodash/get"
+import {useFormContext} from "./hook-form"
+
+
+type NestedKeys<T> = {
+  [K in keyof T & (string | number)]: T[K] extends object
+    ? `${K}` | `${K}.${NestedKeys<T[K]>}`
+    : `${K}`;
+}[keyof T & (string | number)];
+
+
+export type InputProps<T> = {
+  field: NestedKeys<T>;
+  label?: string;
+  hint?: string;
+  placeholder?: string;
+  id?: string;
+  disabled?: boolean;
+  className?: string;
+}
+
+export const Input = <T,>({
+  field,
+  label,
+  hint,
+  placeholder,
+  id: idProp,
+  className,
+  disabled: isDisabled,
+  ...props
+}: InputProps<T> & React.InputHTMLAttributes<HTMLInputElement>) => {
+  const form = useFormContext()
+
+  const id = idProp || `input-${field}`
+
+  const error = _get(form.formState.errors, field)
+
+  const {isSubmitting} = form.formState
+
+  const disabled = isDisabled || isSubmitting
+
+  return (
+    <div className={className}>
+      {label && <label htmlFor={id}>{label}</label>}
+      <input
+        id={id}
+        className={cx("form-control form-control-sm", {
+          "is-invalid": !!error,
+        })}
+        type="text"
+        placeholder={placeholder}
+        disabled={disabled}
+        {...form.register(field)}
+      />
+      {!error && hint && <div className="form-text">{hint}</div>}
+      {error && <div className="invalid-feedback">{error.message}</div>}
+    </div>
+  )
+}

package/{ui → form}/SubmitButton/index.tsx

@@ -1,7 +1,7 @@
 import {ReactNode} from "react"
 import {useFormContext} from "react-hook-form"
 
-import ActivityIndicator from "../ActivityIndicator"
+import ActivityIndicator from "../../ui/ActivityIndicator"
 
 
 interface Props {

package/form/hook-form.tsx

@@ -0,0 +1,7 @@
+
+
+import {useForm, useFormContext} from "react-hook-form"
+import type {Resolver} from "react-hook-form"
+
+
+export {useForm, useFormContext, Resolver}

package/form/index.tsx

@@ -0,0 +1,5 @@
+export * from "./hook-form"
+export * from "./Form"
+export * from "./Input"
+export * from "./FileInput"
+export * from "./SubmitButton"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpcbase/client",
-  "version": "0.197.0",
+  "version": "0.198.0",
   "scripts": {
     "build": "../../node_modules/.bin/wireit",
     "test": "../../node_modules/.bin/wireit"

package/ui/FileUpload/FileUploadModal.tsx

@@ -1,51 +0,0 @@
-import ActivityIndicator from "../ActivityIndicator"
-import Modal from "../Modal"
-
-import {FileUploadContextProvider} from "./FileUploadContext"
-import FileUploadForm from "./FileUploadForm"
-import UploadButton from "./UploadButton"
-
-import "./file-upload.scss"
-
-
-export const FileUploadModal = ({onHide}) => {
-  const isLoading = false
-
-  const onHideFn = () => null
-
-  return (
-    <FileUploadContextProvider>
-      <Modal className="file-upload-modal" show scrollable={true} onHide={onHideFn}>
-        <Modal.Header className="close-top" closeButton>
-          <img
-            width={22}
-            height={22}
-            className="me-2 align-self-start mt-1"
-            src={`/static/icons/drive/file-upload-s.svg`}
-          />
-          <div>
-            <div>File Upload</div>
-            <small className="text-secondary fw-normal">Upload any type of file, any size.</small>
-          </div>
-        </Modal.Header>
-        <Modal.Body className="py-2">
-          {isLoading && (
-            <div className="d-flex flex-row align-items-center">
-              <ActivityIndicator size={24} />
-              <div className="ms-2">Loading text...</div>
-            </div>
-          )}
-
-          <FileUploadForm />
-        </Modal.Body>
-        <Modal.Footer className="d-flex justify-content-between">
-          <div>
-            <a href="/docs/drives">/docs/drives</a>
-          </div>
-
-          <UploadButton />
-        </Modal.Footer>
-      </Modal>
-    </FileUploadContextProvider>
-  )
-}