@bosonprotocol/react-kit 0.33.0-alpha.14 → 0.33.0-alpha.15

package/src/components/form/Upload/Upload.tsx

@@ -1,360 +1,8 @@
-import * as Sentry from "@sentry/browser";
-import { useField } from "formik";
-import { Image, Trash, VideoCamera } from "phosphor-react";
-import React, { useCallback, useEffect, useRef, useState } from "react";
-import { loadAndSetMedia } from "../../../lib/base64/base64";
-import bytesToSize from "../../../lib/bytes/bytesToSize";
-import { theme } from "../../../theme";
-
-import Loading from "../../ui/loading/LoadingWrapper";
-import ThemedButton from "../../ui/ThemedButton";
-import { Typography } from "../../ui/Typography";
-import Error from "../Error";
-import {
-  FieldFileUploadWrapper,
-  FieldInput,
-  FileUploadWrapper,
-  ImagePreview,
-  VideoPreview
-} from "../Field.styles";
-import type { UploadFileType, UploadProps, FileProps } from "../types";
-import UploadedFiles from "./UploadedFiles";
-import { WithUploadToIpfs, WithUploadToIpfsProps } from "./WithUploadToIpfs";
-import { useModal } from "../../modal/useModal";
-import { ImageEditorModal } from "./ImageEditorModal/ImageEditorModal";
-const colors = theme.colors.light;
-
-function Upload({
-  name,
-  accept = "image/*",
-  disabled,
-  maxSize,
-  multiple = false,
-  trigger,
-  onFilesSelect,
-  placeholder,
-  wrapperProps,
-  onLoadSinglePreviewImage,
-  withUpload,
-  withEditor,
-  saveToIpfs,
-  loadMedia,
-  onLoading,
-  width,
-  height,
-  borderRadius,
-  imgPreviewStyle,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  removeFile,
-  saveButtonTheme,
-  ...props
-}: UploadProps & WithUploadToIpfsProps) {
-  const { updateProps, store } = useModal();
-  const [showEditor, setShowEditor] = useState<boolean>(false);
-  const [isLoading, setIsLoading] = useState<boolean>(false);
-  const [preview, setPreview] = useState<string | null>();
-  const [field, meta, helpers] = useField(name);
-
-  const handleLoading = useCallback(
-    (loadingValue: boolean) => {
-      onLoading?.(loadingValue);
-      setIsLoading(loadingValue);
-    },
-    [onLoading]
-  );
-
-  const errorMessage = meta.error && meta.touched ? meta.error : "";
-  const displayError = typeof errorMessage === "string" && errorMessage !== "";
-
-  const inputRef = useRef<HTMLInputElement | null>(null);
-  const [nativeFiles, setNativeFiles] = useState<File[] | null>(null);
-  const setFiles = useCallback(
-    (value: unknown) => {
-      helpers.setValue(value);
-    },
-    [helpers]
-  );
-
-  const files = field.value as UploadFileType[];
-  const mimetypes = accept.split(",").map((acc) => acc.trim());
-  const isImageOnly = mimetypes.every((mimetype) =>
-    mimetype.startsWith("image/")
-  );
-  const isVideoOnly = mimetypes.every((mimetype) =>
-    mimetype.startsWith("video/")
-  );
-
-  useEffect(() => {
-    onFilesSelect?.(files);
-    helpers.setValue(files);
-
-    if (!multiple && files && files?.length !== 0) {
-      if (isImageOnly) {
-        if (withUpload) {
-          loadIpfsImagePreview(files[0] as FileProps);
-        } else {
-          loadAndSetMedia(files[0] as File, (base64Uri) => {
-            setPreview(base64Uri);
-            onLoadSinglePreviewImage?.(base64Uri);
-          });
-        }
-      } else if (isVideoOnly) {
-        if (withUpload) {
-          loadIpfsVideo(files[0] as FileProps);
-        } else {
-          loadAndSetMedia(files[0] as File, (base64Uri) => {
-            setPreview(base64Uri);
-          });
-        }
-      }
-    }
-  }, [files]); // eslint-disable-line
-
-  const loadIpfsVideo = async (file: FileProps) => {
-    const fileSrc = file && file?.src ? file?.src : false;
-    if (!fileSrc) {
-      return false;
-    }
-    handleLoading(true);
-    try {
-      const imagePreview = await loadMedia(fileSrc || "");
-      if (imagePreview) {
-        setPreview(imagePreview);
-      } else {
-        console.warn(
-          `imagePreview ${imagePreview} is falsy in loadIpfsImagePreview`
-        );
-      }
-    } catch (error) {
-      console.error(error);
-      Sentry.captureException(error);
-    } finally {
-      handleLoading(false);
-    }
-  };
-
-  const loadIpfsImagePreview = async (file: FileProps) => {
-    const fileSrc = file && file?.src ? file?.src : false;
-    if (!fileSrc) {
-      return false;
-    }
-    try {
-      handleLoading(true);
-      const imagePreview = await loadMedia(fileSrc || "");
-      if (imagePreview) {
-        setPreview(imagePreview);
-        onLoadSinglePreviewImage?.(imagePreview);
-      } else {
-        console.warn(
-          `imagePreview ${imagePreview} is falsy in loadIpfsImagePreview`
-        );
-      }
-    } catch (error) {
-      console.error(error);
-      Sentry.captureException(error);
-    } finally {
-      handleLoading(false);
-    }
-  };
-
-  const handleChooseFile = () => {
-    const input = inputRef.current;
-    if (input) {
-      input.click();
-    }
-  };
-
-  const handleRemoveAllFiles = () => {
-    if (disabled) {
-      return;
-    }
-    setFiles([]);
-    setPreview(null);
-  };
-
-  const handleRemoveFile = (index: number) => {
-    const newArray = files.filter(
-      (i: File | FileProps, k: number) => k !== index
-    );
-    setFiles(newArray);
-  };
-
-  const handleChange = useCallback(
-    async (filesArray: File[] | null) => {
-      if (!meta.touched) {
-        helpers.setTouched(true);
-      }
-
-      if (!filesArray) {
-        return;
-      }
-      for (const file of filesArray) {
-        if (maxSize) {
-          if (file.size > maxSize) {
-            const error = `File size cannot exceed more than ${bytesToSize(
-              maxSize
-            )}`;
-            // TODO: change to notification
-            console.error(error);
-          }
-        }
-      }
-      setFiles(filesArray);
-    },
-    [helpers, maxSize, meta.touched, setFiles]
-  );
-
-  const handleSave = useCallback(
-    async (efiles: File[] | null) => {
-      if (!meta.touched) {
-        helpers.setTouched(true);
-      }
-      handleLoading(true);
-      const files = await saveToIpfs(efiles);
-      if (files) {
-        setFiles(files);
-      } else {
-        setFiles([]);
-        console.warn(
-          `There has been an error because 'files' ${files} is falsy in handleSave`
-        );
-      }
-      handleLoading(false);
-    },
-    [meta.touched, handleLoading, saveToIpfs, helpers, setFiles]
-  );
-  const saveFn = withUpload ? handleSave : handleChange;
-  const style = {
-    borderRadius: borderRadius ? `${borderRadius}%` : "",
-    width: width ? `100%` : ""
-  };
-  return (
-    <>
-      {withEditor && showEditor && (
-        <ImageEditorModal
-          saveButtonTheme={saveButtonTheme}
-          files={nativeFiles}
-          borderRadius={borderRadius}
-          width={width}
-          height={height}
-          hideModal={async (fileList) => {
-            if (fileList) {
-              await saveFn(fileList);
-            }
-
-            setShowEditor(false);
-            updateProps({
-              ...store,
-              modalType: store.modalType,
-              // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-              // @ts-ignore
-              modalProps: {
-                ...store.modalProps,
-                hidden: false
-              }
-            });
-          }}
-        />
-      )}
-      <FieldFileUploadWrapper {...wrapperProps} $disabled={!!disabled}>
-        <FieldInput
-          {...props}
-          hidden
-          type="file"
-          accept={accept}
-          multiple={multiple}
-          onChange={async (e) => {
-            const files = e.target.files
-              ? Object.values(e.target.files)
-              : e.target.files;
-
-            if (files && withEditor) {
-              setNativeFiles(files);
-              setShowEditor(true);
-              updateProps({
-                ...store,
-                modalType: store.modalType,
-                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-                // @ts-ignore
-                modalProps: {
-                  ...store.modalProps,
-                  hidden: true
-                }
-              });
-            } else {
-              await saveFn(files);
-            }
-            e.target.value = ""; // allow user to select the same file again
-          }}
-          ref={(ref) => {
-            inputRef.current = ref;
-          }}
-          disabled={disabled}
-        />
-        {trigger ? (
-          <ThemedButton onClick={handleChooseFile} type="button">
-            <>{trigger}</>
-          </ThemedButton>
-        ) : (
-          <FileUploadWrapper
-            data-disabled={disabled}
-            onClick={handleChooseFile}
-            error={errorMessage}
-            style={style}
-          >
-            {isLoading ? (
-              <Loading size={2} />
-            ) : (
-              <>
-                {field.value && field.value?.length !== 0 && preview ? (
-                  <>
-                    {isVideoOnly ? (
-                      <VideoPreview
-                        src={
-                          preview?.startsWith("http")
-                            ? preview
-                            : "data:video/mp4;base64," +
-                              preview?.substring(
-                                "data:application/octet-stream;base64,".length
-                              )
-                        }
-                        autoPlay
-                        muted
-                        loop
-                      />
-                    ) : (
-                      <ImagePreview
-                        style={{ ...imgPreviewStyle }}
-                        src={preview}
-                      />
-                    )}
-                  </>
-                ) : isVideoOnly ? (
-                  <VideoCamera size={24} />
-                ) : (
-                  <Image size={24} />
-                )}
-                {placeholder && (
-                  <Typography tag="p" style={{ marginBottom: "0" }}>
-                    {placeholder}
-                  </Typography>
-                )}
-              </>
-            )}
-          </FileUploadWrapper>
-        )}
-        {!disabled && field.value && field.value?.length !== 0 && preview && (
-          <div onClick={handleRemoveAllFiles} data-remove style={style}>
-            <Trash size={24} color={colors.white} />
-          </div>
-        )}
-        {multiple && (
-          <UploadedFiles files={files} handleRemoveFile={handleRemoveFile} />
-        )}
-      </FieldFileUploadWrapper>
-      <Error display={displayError} message={errorMessage} />
-    </>
-  );
-}
-
-export default WithUploadToIpfs(Upload);
+import { UploadProps } from "../types";
+import BaseUpload from "./BaseUpload";
+import React from "react";
+export type { UploadProps } from "../types";
+
+export const Upload = (props: UploadProps) => {
+  return <BaseUpload {...props} />;
+};

package/src/components/form/Upload/UploadedFile.tsx

@@ -1,7 +1,7 @@
 import { ImageSquare, X } from "phosphor-react";
 import React, { useCallback } from "react";
 import styled from "styled-components";
-import bytesToSize from "../../../lib/bytes/bytesToSize";
+import { bytesToSize } from "../../../lib/bytes/bytesToSize";
 import { theme } from "../../../theme";
 
 import { Grid } from "../../ui/Grid";

package/src/components/form/Upload/WithUploadToIpfs.tsx

@@ -8,7 +8,7 @@ import ErrorToast from "../../toasts/common/ErrorToast";
 import { Typography } from "../../ui/Typography";
 import { FileProps, UploadProps } from "../types";
 import { useSaveImageToIpfs } from "../../../hooks/ipfs/useSaveImageToIpfs";
-import bytesToSize from "../../../lib/bytes/bytesToSize";
+import { bytesToSize } from "../../../lib/bytes/bytesToSize";
 
 const colors = theme.colors.light;
 

package/src/components/form/index.ts

@@ -9,4 +9,5 @@ export { default as Select, SelectProps } from "./Select";
 export * from "./CountrySelect";
 export * from "./BaseTagsInput";
 export * from "./BaseTextArea";
-export { default as Upload } from "./Upload/Upload";
+export { default as BaseUpload, BaseUploadProps } from "./Upload/BaseUpload";
+export { Upload, UploadProps } from "./Upload/Upload";

package/src/components/form/types.ts

@@ -2,7 +2,8 @@ import { ReactNode } from "react";
 import { SingleValue } from "react-select";
 import { CSSProperties } from "styled-components";
 import { ImageEditorModalProps } from "./Upload/ImageEditorModal/ImageEditorModal";
-import type { TextAreaTheme } from "./Field.styles";
+import type { FileUploadWrapperTheme, TextAreaTheme } from "./Field.styles";
+import type { GridProps } from "../ui/Grid";
 
 export interface BaseProps {
   name: string;
@@ -30,7 +31,7 @@ export interface ErrorProps {
   message?: string;
 }
 
-export interface FormFieldProps {
+export interface FormFieldProps extends GridProps {
   title: string;
   titleIcon?: ReactNode;
   subTitle?: string | false;
@@ -100,6 +101,7 @@ export interface SelectProps extends BaseProps {
       Partial<{
         selected: Partial<CSSProperties>;
         disabled: Partial<CSSProperties>;
+        focus: Partial<CSSProperties>;
       }>;
     placeholder: Partial<CSSProperties> & Partial<{ error: CSSProperties }>;
     input: Partial<CSSProperties> & Partial<{ error: CSSProperties }>;
@@ -122,6 +124,7 @@ export type UploadProps = BaseProps & {
   width?: number;
   height?: number;
   imgPreviewStyle?: Pick<CSSProperties, "objectFit">;
+  theme?: Partial<{ triggerTheme: FileUploadWrapperTheme }>;
 } & (
     | {
         withEditor: true;

package/src/index.tsx

@@ -71,6 +71,7 @@ export * from "./components/ui/MuteButton";
 export * from "./components/ui/CardCTA";
 export * from "./components/form";
 export * from "./lib/magicLink/logout";
+export * from "./lib/bytes/bytesToSize";
 export * from "./lib/magicLink/provider";
 export * from "./lib/const/networks";
 export * from "./lib/errors/transactions";

package/src/lib/bytes/bytesToSize.ts

@@ -1,4 +1,4 @@
-export default function bytesToSize(bytes: number) {
+export function bytesToSize(bytes: number) {
   const sizes = ["Bytes", "KB", "MB", "GB", "TB"];
   const i = Math.floor(Math.log(bytes) / Math.log(1024));
   return `${Math.round(bytes / Math.pow(1024, i))} ${sizes[i]}`;