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

package/src/components/form/Field.styles.ts

@@ -115,7 +115,21 @@ export const FieldInput = styled.input<{
     `};
 `;
 
-export const FileUploadWrapper = styled.div<{ error: any }>`
+export type FileUploadWrapperTheme = Partial<{
+  borderColor: CSSProperties["borderColor"];
+  borderRadius: CSSProperties["borderRadius"];
+  background: CSSProperties["background"];
+  focus: Partial<{
+    borderColor: CSSProperties["borderColor"];
+  }>;
+  error: Partial<{
+    borderColor: CSSProperties["borderColor"];
+  }>;
+}>;
+export const FileUploadWrapper = styled.div<{
+  $error: unknown;
+  theme: FileUploadWrapperTheme | undefined;
+}>`
   position: relative;
   overflow: hidden;
   display: flex;
@@ -144,28 +158,33 @@ export const FileUploadWrapper = styled.div<{ error: any }>`
     }
   }
 
-  background: ${colors.lightGrey};
-  border-radius: 0;
+  background: ${({ theme }) => theme?.background || colors.lightGrey};
+  ${({ theme }) =>
+    theme.borderRadius !== undefined &&
+    css`
+      border-radius: ${theme.borderRadius};
+    `};
   outline: none;
 
-  ${({ error }) =>
-    !checkIfValueIsEmpty(error)
+  ${({ $error, theme }) =>
+    !checkIfValueIsEmpty($error)
       ? css`
-          border: 1px solid ${colors.orange};
+          border: 1px solid ${theme?.error?.borderColor || colors.orange};
         `
       : css`
-          border: 1px solid ${colors.border};
+          border: 1px solid ${theme?.borderColor || colors.border};
         `}
 
   ${transition};
 
   &:focus,
   &:hover {
-    border: 1px solid var(--secondary);
+    border: 1px solid
+      ${({ theme }) => theme?.hover?.borderColor || colors.lightGrey};
   }
 
   /* prettier-ignore */
-  [data-disabled=true] {
+  :disabled, [data-disabled=true] {
     cursor: not-allowed;
     opacity: 0.5;
   }

package/src/components/form/FormField.tsx

@@ -22,7 +22,8 @@ export function FormField({
   children,
   style = {},
   valueToCopy,
-  copyIconColor = colors.secondary
+  copyIconColor = colors.secondary,
+  ...rest
 }: FormFieldProps) {
   return (
     <FormFieldWrapper
@@ -31,6 +32,7 @@ export function FormField({
       alignItems="flex-start"
       flexGrow="1"
       style={style}
+      {...rest}
     >
       <>
         <Grid justifyContent="flex-start" margin="0 0 0.375rem 0">

package/src/components/form/Select.tsx

@@ -1,7 +1,7 @@
 /* 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";
@@ -11,14 +11,21 @@ import type { SelectDataProps, SelectProps } from "./types";
 export type { SelectProps } from "./types";
 const colors = theme.colors.light;
 
-const customStyles = (error: unknown, customTheme: SelectProps["theme"]) => ({
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  singleValue: (provided: any, state: any) => {
+const customStyles = (
+  error: unknown,
+  customTheme: SelectProps["theme"]
+): StylesConfig<
+  SelectDataProps<string>,
+  boolean,
+  GroupBase<SelectDataProps<string>>
+> => ({
+  singleValue: (provided: any) => {
     return {
       ...provided,
       color: colors.darkGrey,
       fontSize: "13.33px",
-      ...customTheme?.singleValue
+      ...customTheme?.singleValue,
+      ...(!checkIfValueIsEmpty(error) && customTheme?.singleValue?.error)
     };
   },
   control: (provided: any, state: any) => {
@@ -57,34 +64,39 @@ const customStyles = (error: unknown, customTheme: SelectProps["theme"]) => ({
     position: "relative",
     width: "100%"
   }),
-  option: (provided: any, state: any) => ({
-    ...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)
-  }),
+  option: (provided: any, 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)
+    };
+  },
   indicatorSeparator: () => ({
     display: "none"
   }),
   placeholder: (provided: any) => ({
     ...provided,
-    ...customTheme?.placeholder
+    ...customTheme?.placeholder,
+    ...(!checkIfValueIsEmpty(error) && customTheme?.placeholder?.error)
   }),
   input: (provided: any) => ({
     ...provided,
-    ...customTheme?.input
+    ...customTheme?.input,
+    ...(!checkIfValueIsEmpty(error) && customTheme?.input?.error)
   })
 });
 

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

@@ -0,0 +1,366 @@
+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,
+  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}%` : "",
+    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);