@bosonprotocol/react-kit 0.33.0-alpha.8 → 0.33.0

package/src/components/form/Select.tsx

@@ -1,25 +1,25 @@
 /* eslint @typescript-eslint/no-explicit-any: "off" */
 import React from "react";
 import { useField } from "formik";
-import Select from "react-select";
+import Select, { GroupBase, StylesConfig } from "react-select";
 import { checkIfValueIsEmpty } from "../../lib/object/checkIfValueIsEmpty";
 import { theme } from "../../theme";
 import { zIndex } from "../ui/zIndex";
 
 import Error from "./Error";
 import type { SelectDataProps, SelectProps } from "./types";
+export type { SelectProps } from "./types";
 const colors = theme.colors.light;
 
-const customStyles = (error: any) => ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  singleValue: (provided: any, state: any) => {
-    return {
-      ...provided,
-      color: colors.darkGrey,
-      fontSize: "13.33px"
-    };
-  },
-  control: (provided: any, state: any) => {
+const customStyles = (
+  error: unknown,
+  customTheme: SelectProps["theme"]
+): StylesConfig<
+  SelectDataProps<string>,
+  boolean,
+  GroupBase<SelectDataProps<string>>
+> => ({
+  control: (provided, state: any) => {
     const before = state.selectProps.label
       ? {
           ":before": {
@@ -34,41 +34,71 @@ const customStyles = (error: any) => ({
       borderRadius: 0,
       padding: "0.4rem 0.25rem",
       boxShadow: "none",
-      ":hover": {
-        borderColor: colors.secondary,
-        borderWidth: "1px"
-      },
       background: colors.lightGrey,
+      ...customTheme?.control,
       border: state.isFocused
-        ? `1px solid ${colors.secondary}`
+        ? customTheme?.control?.focus?.border ?? `1px solid ${colors.secondary}`
         : !checkIfValueIsEmpty(error)
-          ? `1px solid ${colors.orange}`
-          : `1px solid ${colors.border}`,
+          ? customTheme?.control?.error?.border ?? `1px solid ${colors.orange}`
+          : customTheme?.control?.border ?? `1px solid ${colors.border}`,
+      ":hover": {
+        borderColor: colors.secondary,
+        borderWidth: "1px",
+        ...customTheme?.control?.hover
+      },
       ...before
     };
   },
-  container: (provided: any, state: any) => ({
+  container: (provided, state: any) => ({
     ...provided,
     zIndex: state.isFocused ? zIndex.Select + 1 : zIndex.Select,
     position: "relative",
     width: "100%"
   }),
-  option: (provided: any, state: any) => ({
-    ...provided,
-    cursor: state.isDisabled ? "not-allowed" : "pointer",
-    opacity: state.isDisabled ? "0.5" : "1",
-    background:
-      state.isOptionSelected || state.isSelected || state.isFocused
-        ? colors.lightGrey
-        : colors.white,
-    color:
-      state.isOptionSelected || state.isSelected
-        ? colors.secondary
-        : colors.black
-  }),
+  option: (provided, state: any) => {
+    return {
+      ...provided,
+      cursor: state.isDisabled ? "not-allowed" : "pointer",
+      opacity: state.isDisabled
+        ? customTheme?.option?.disabled?.opacity ?? "0.5"
+        : customTheme?.option?.opacity ?? "1",
+      background:
+        state.isOptionSelected || state.isSelected || state.isFocused
+          ? customTheme?.option?.selected?.background ?? colors.lightGrey
+          : customTheme?.option?.background ?? colors.white,
+      color:
+        state.isOptionSelected || state.isSelected
+          ? customTheme?.option?.selected?.color ?? colors.secondary
+          : customTheme?.option?.color ?? colors.black,
+      ...(state.isDisabled && customTheme?.option?.disabled),
+      ...((state.isOptionSelected || state.isSelected) &&
+        customTheme?.option?.selected),
+      ...(state.isFocused && customTheme?.option?.focus),
+      ...(!checkIfValueIsEmpty(error) && customTheme?.option?.error)
+    };
+  },
   indicatorSeparator: () => ({
     display: "none"
-  })
+  }),
+  placeholder: (provided) => ({
+    ...provided,
+    ...customTheme?.placeholder,
+    ...(!checkIfValueIsEmpty(error) && customTheme?.placeholder?.error)
+  }),
+  input: (provided) => ({
+    ...provided,
+    ...customTheme?.input,
+    ...(!checkIfValueIsEmpty(error) && customTheme?.input?.error)
+  }),
+  singleValue: (provided) => {
+    return {
+      ...provided,
+      color: colors.darkGrey,
+      fontSize: "13.33px",
+      ...customTheme?.singleValue,
+      ...(!checkIfValueIsEmpty(error) && customTheme?.singleValue?.error)
+    };
+  }
 });
 
 export default function SelectComponent({
@@ -80,6 +110,7 @@ export default function SelectComponent({
   disabled = false,
   errorMessage,
   onChange,
+  theme,
   ...props
 }: SelectProps) {
   const [field, meta, helpers] = useField(name);
@@ -109,7 +140,7 @@ export default function SelectComponent({
   return (
     <>
       <Select
-        styles={customStyles(displayErrorMessage)}
+        styles={customStyles(displayErrorMessage, theme)}
         {...field}
         {...props}
         placeholder={placeholder}

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

@@ -0,0 +1,367 @@
+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 as UploadPropsWithNoIpfs,
+  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;
+export type BaseUploadProps = UploadPropsWithNoIpfs;
+function BaseUpload({
+  name,
+  accept = "image/*",
+  disabled,
+  maxSize,
+  multiple = false,
+  trigger,
+  onFilesSelect,
+  placeholder,
+  wrapperProps,
+  onLoadSinglePreviewImage,
+  withUpload,
+  withEditor,
+  saveToIpfs,
+  loadMedia,
+  onLoading,
+  width,
+  height,
+  borderRadius,
+  borderRadiusUnit = "px",
+  imgPreviewStyle,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  removeFile,
+  saveButtonTheme,
+  theme,
+  ...props
+}: UploadPropsWithNoIpfs & 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}${borderRadiusUnit}` : "",
+    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}
+            theme={theme?.triggerTheme}
+          >
+            {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" marginBottom={0} textAlign="center">
+                    {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(BaseUpload);