refactor(upload): rename Error component to ErrorComponent

bosonprotocol · Oct 23, 2024 · 182fad2 · 182fad2
1 parent 754daed
commit 182fad2
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 3 deletions.
diff --git a/packages/react-kit/src/components/form/Field.styles.ts b/packages/react-kit/src/components/form/Field.styles.ts
@@ -128,6 +128,7 @@ export type FileUploadWrapperTheme = Partial<{
 }>;
 export const FileUploadWrapper = styled.div<{
   $error: unknown;
+  $v2?: boolean;
   theme: FileUploadWrapperTheme | undefined;
 }>`
   position: relative;
@@ -188,13 +189,28 @@ export const FileUploadWrapper = styled.div<{
     cursor: not-allowed;
     opacity: 0.5;
   }
+  ${({ $v2 }) =>
+    $v2 &&
+    css`
+      aspect-ratio: 1/1;
+      padding-inline: 1.5rem;
+      background: ${colors.white};
+      min-width: 9.375rem;
+      width: auto;
+      height: auto;
+      border-radius: 12px;
+      border: 2px solid ${theme.colors.light.border};
+      color: ${theme.colors.light.greyText};
+    `}
 `;
 
 export const FieldFileUpload = styled(FieldInput)`
   display: none;
 `;
 
-export const FieldFileUploadWrapper = styled.div<{ $disabled: boolean }>`
+export const FieldFileUploadWrapper = styled.div<{
+  $disabled: boolean;
+}>`
   position: relative;
   display: inline-block;
   ${({ $disabled }) =>

diff --git a/packages/react-kit/src/components/form/Upload/BaseUpload.tsx b/packages/react-kit/src/components/form/Upload/BaseUpload.tsx
@@ -53,6 +53,7 @@ function BaseUpload({
   removeFile,
   saveButtonTheme,
   errorComponent,
+  v2,
   theme,
   ...props
 }: UploadPropsWithNoIpfs & WithUploadToIpfsProps) {
@@ -220,6 +221,7 @@ function BaseUpload({
       handleLoading(true);
       try {
         const files = await saveToIpfs(efiles, true);
+        setErrorMessage(undefined);
         if (files) {
           setFiles(files);
         } else {
@@ -272,8 +274,8 @@ function BaseUpload({
           }}
         />
       )}
+      {errorMesage && errorComponent?.(errorMesage)}
       <FieldFileUploadWrapper {...wrapperProps} $disabled={!!disabled}>
-        {errorMesage && errorComponent?.(errorMesage)}
         <FieldInput
           {...props}
           hidden
@@ -317,6 +319,7 @@ function BaseUpload({
             data-disabled={disabled}
             onClick={handleChooseFile}
             $error={errorMessage}
+            $v2={v2}
             style={style}
             theme={theme?.triggerTheme}
           >

diff --git a/packages/react-kit/src/components/form/types.ts b/packages/react-kit/src/components/form/types.ts
@@ -138,6 +138,7 @@ export type UploadProps = BaseProps & {
   width?: number;
   height?: number;
   errorComponent?: (errorMessage: string) => React.ReactNode;
+  v2?: boolean;
   imgPreviewStyle?: Pick<CSSProperties, "objectFit">;
   theme?: Partial<{ triggerTheme: FileUploadWrapperTheme }>;
 } & (

diff --git a/packages/react-kit/src/theme.ts b/packages/react-kit/src/theme.ts
@@ -30,7 +30,8 @@ export const theme = {
       cyan: "#00FFFF",
       lightArrowColor: "#dedfe3",
       darkGreyTimeStamp: "#E8EAF1",
-      lightGrey2: "#eff0f7"
+      lightGrey2: "#eff0f7",
+      greyText: "rgba(28, 13, 24, 0.75)"
     }
   },
   mobile: "768px",