feat(SalariesInput): add hasValue state with custom styling

To clarify that a file has already been uploaded, and a new upload will override these values
varianter · Sep 9, 2024 · 13375b2 · 13375b2
1 parent 339e548
commit 13375b2
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 12 deletions.
diff --git a/studio/components/salariesInput/SalariesInput.tsx b/studio/components/salariesInput/SalariesInput.tsx
@@ -9,10 +9,13 @@ import {
 import { SalariesParseErrorsToastDescription } from "./components/SalariesParseErrorsToastDescription";
 import SalariesFileUpload from "./components/SalariesFileUpload";
 import SalariesTableEditor from "./components/SalariesTableEditor";
+import { useState } from "react";
 
 export const SalariesInput = (props: StringInputProps) => {
   const toast = useToast();
 
+  const [hasValue, setHasValue] = useState(props.value !== undefined);
+
   const salaries =
     props.value === undefined
       ? undefined
@@ -31,6 +34,7 @@ export const SalariesInput = (props: StringInputProps) => {
 
   function handleSalariesChangedFromFile(salariesFromFile: Salaries) {
     props.onChange(set(salariesAsStoredString(salariesFromFile)));
+    setHasValue(true);
   }
 
   function handleSalariesFileParseErrors(errors: SalariesParseError[]) {
@@ -46,6 +50,7 @@ export const SalariesInput = (props: StringInputProps) => {
     <Stack space={4}>
       <Inline space={2}>
         <SalariesFileUpload
+          hasValue={hasValue}
           onSalariesChanged={handleSalariesChangedFromFile}
           onParseErrors={handleSalariesFileParseErrors}
         />

diff --git a/studio/components/salariesInput/components/SalariesFileUpload.tsx b/studio/components/salariesInput/components/SalariesFileUpload.tsx
@@ -12,11 +12,13 @@ import { ChangeEvent, useState, MouseEvent } from "react";
 const UPLOAD_CSV_INPUT_ID = "upload-csv-input";
 
 interface SalariesFileUploadProps {
+  hasValue?: boolean;
   onSalariesChanged: (salaries: Salaries) => void;
   onParseErrors: (errors: SalariesParseError[]) => void;
 }
 
 const SalariesFileUpload = ({
+  hasValue,
   onSalariesChanged,
   onParseErrors,
 }: SalariesFileUploadProps) => {
@@ -78,10 +80,12 @@ const SalariesFileUpload = ({
         <Box className={styles.uploadButtonWrapper}>
           <label
             htmlFor={UPLOAD_CSV_INPUT_ID}
-            className={styles.uploadButtonContent}
+            className={`${styles.uploadButtonContent}${hasValue ? ` ${styles.reUpload}` : ""}`}
           >
             <UploadIcon className={styles.uploadButtonIcon} />
-            <span className={styles.uploadButtonText}>Upload (.csv)</span>
+            <span className={styles.uploadButtonText}>
+              {hasValue ? "Re-upload" : "Upload"} (.csv)
+            </span>
           </label>
         </Box>
         {filename && (

diff --git a/studio/components/salariesInput/salariesInput.module.css b/studio/components/salariesInput/salariesInput.module.css
@@ -23,14 +23,28 @@
   padding: 0.45rem 0.6rem 0.45rem 0.5rem !important;
   background-color: #252837; /* TODO: find Sanity Studio color variable */
   border-radius: 0.1875rem;
+  color: white;
 
   &:hover {
     background-color: #1b1d27; /* TODO: find Sanity Studio color variable */
   }
+
+  &.hasValue {
+    background-color: rgb(246, 246, 248);
+    color: black;
+    border: 1px solid rgb(230, 230, 234);
+  }
 }
 
 [data-scheme="dark"] .uploadButtonContent {
   background-color: lightgray;
+  color: black;
+
+  &.hasValue {
+    background-color: rgb(25, 26, 36);
+    color: rgb(228, 229, 233);
+    border: 1px solid rgb(228, 229, 233);
+  }
 }
 
 .uploadButton {
@@ -42,20 +56,10 @@
 
 .uploadButtonIcon {
   font-size: 1.35rem;
-  color: white;
-}
-
-[data-scheme="dark"] .uploadButtonIcon {
-  color: black;
 }
 
 .uploadButtonText {
   font-size: 0.8125rem;
-  color: white;
-}
-
-[data-scheme="dark"] .uploadButtonText {
-  color: black;
 }
 
 .tableHeader {