@dmsi/wedgekit-react 0.0.229 → 0.0.231

package/src/components/Upload.tsx

@@ -4,88 +4,104 @@ import { componentGap } from "../classNames";
 import { Icon } from "./Icon";
 import { Paragraph } from "./Paragraph";
 import { Button } from "./Button";
+import { Stack } from "./Stack";
+import { Spinner } from "./Spinner";
 
 export type UploadProps = {
-    isLoading?: boolean;
-    text?: string;
-    errorText?: string;
-    onRemove?: () => void;
-    testid?: string;
+  isLoading?: boolean;
+  text?: string;
+  errorText?: string;
+  onRemove?: () => void;
+  testid?: string;
 } & ComponentProps<"input">;
 
 export function Upload(props: UploadProps) {
-    const {
-        isLoading,
-        style,
-        errorText,
-        text = 'Upload your file',
-        value,
-        onRemove,
-        testid,
-        ...rest
-    } = props;
+  const {
+    isLoading,
+    style,
+    errorText,
+    text = "Upload your file",
+    value,
+    onRemove,
+    testid,
+    ...rest
+  } = props;
 
-    return (
-        <label
-            style={{
-                ...style,
-            }}
-            className={clsx(
-                "border border-dashed border-border-primary-normal",
-                "flex flex-col items-center justify-center",
-                "p-6",
-                "cursor-pointer",
-                "relative",
-                "w-full h-[166px] desktop:w-[340px] desktop:h-[190px]",
-                componentGap,
-            )}
-            data-testid={testid}
+  return (
+    <label
+      style={{
+        ...style,
+      }}
+      className={clsx(
+        "border border-dashed border-border-primary-normal",
+        "flex flex-col items-center justify-center",
+        "p-6",
+        "cursor-pointer",
+        "relative",
+        "w-full h-[166px] desktop:w-[340px] desktop:h-[190px]",
+        componentGap,
+      )}
+      data-testid={testid}
+    >
+      <input
+        {...rest}
+        type="file"
+        className="sr-only"
+        data-testid={testid ? `${testid}-file-input` : undefined}
+      />
+
+      {isLoading && (
+        <Stack
+          centered
+          items="center"
+          justify="center"
+          sizing="container"
+          padding
         >
-            <input
-                {...rest}
-                type="file"
-                className="sr-only"
-                data-testid={testid ? `${testid}-file-input` : undefined}
-            />
+          <Spinner size="large" />
+        </Stack>
+      )}
 
-            {isLoading && (
-                <>
-                    <Icon testid={testid ? `${testid}-loading-icon` : undefined} name="cached" className="text-icon-primary-normal animate-spin" />
-                    <Paragraph testid={testid ? `${testid}-loading-text` : undefined} color="text-secondary-normal">Loading...</Paragraph>
-                </>
-            )}
-            
-            {!value && !isLoading && (
-                <>
-                    <Icon testid={testid ? `${testid}-icon` : undefined} name="cloud_upload" className="text-icon-primary-normal" />
-                    <Paragraph testid={testid ? `${testid}-text` : undefined} color={errorText ? 'text-primary-error' : 'text-secondary-normal'}>{errorText ? errorText : text}</Paragraph>
-                </>
-            )}
+      {!value && !isLoading && (
+        <>
+          <Icon
+            testid={testid ? `${testid}-icon` : undefined}
+            name="cloud_upload"
+            className="text-icon-primary-normal"
+          />
+          <Paragraph
+            testid={testid ? `${testid}-text` : undefined}
+            color={errorText ? "text-primary-error" : "text-secondary-normal"}
+          >
+            {errorText ? errorText : text}
+          </Paragraph>
+        </>
+      )}
 
-            {value && (
-                <>
-                    <img
-                        data-testid={testid ? `${testid}-uploaded-image` : undefined}
-                        src={value as string}
-                        alt=""
-                        className="absolute inset-0 object-contain object-center max-h-full max-w-full self-center justify-self-center"
-                    />
+      {value && (
+        <>
+          <img
+            data-testid={testid ? `${testid}-uploaded-image` : undefined}
+            src={value as string}
+            alt=""
+            className="absolute inset-0 object-contain object-center max-h-full max-w-full self-center justify-self-center"
+          />
 
-                    <div className="absolute right-2 top-2">
-                        <Button
-                            testid={testid ? `${testid}-remove-image-button` : undefined}
-                            onClick={(e: MouseEvent) => {
-                                e.preventDefault();
-                                e.stopPropagation();
+          <div className="absolute right-2 top-2">
+            <Button
+              testid={testid ? `${testid}-remove-image-button` : undefined}
+              onClick={(e: MouseEvent) => {
+                e.preventDefault();
+                e.stopPropagation();
 
-                                onRemove?.();
-                            }}
-                            iconOnly
-                            leftIcon={<Icon name="delete" />}
-                        />
-                    </div>
-                </>
-            )}
-        </label>
-    )
-}
+                onRemove?.();
+              }}
+              iconOnly
+              leftIcon={<Icon name="delete" />}
+            />
+          </div>
+        </>
+      )}
+    </label>
+  );
+}