Updated TableField and SelectTableField

components/common/SelectTableField/index.tsx

@@ -12,9 +12,11 @@ interface Props {
   open: boolean
   value?: string
   className?: string
-  imageAlt?: string
+  image?: {
-  imageClass?: string
+    className?: String
-  imageSrc?: string[]
+    alt?: string
+    src: string[]
+  }
   children: React.ReactNode
   onOpenChange: () => void
   onChange: (value: string) => void
@@ -31,10 +33,8 @@ const SelectTableField = (props: Props) => {
   return (
     <TableField
       name={props.name}
-      className="SelectField"
+      image={props.image}
-      imageAlt={props.imageAlt}
+      className="select"
-      imageClass={props.imageClass}
-      imageSrc={props.imageSrc}
       label={props.label}
     >
       <Select
@@ -43,9 +43,12 @@ const SelectTableField = (props: Props) => {
         onOpenChange={props.onOpenChange}
         onValueChange={props.onChange}
         onClose={props.onClose}
-        triggerClass={classNames({ Bound: true, Table: true })}
         value={value}
         overlayVisible={false}
+        trigger={{
+          bound: true,
+          className: 'table',
+        }}
       >
         {props.children}
       </Select>

components/common/TableField/index.module.scss

@@ -1,4 +1,4 @@
-.TableField {
+.field {
   align-items: center;
   display: grid;
   gap: $unit-2x;
@@ -18,36 +18,36 @@
     color: var(--accent-blue);
   }
 
-  &.Numeric .Right > .Input,
+  &.numeric .right > .input,
-  &.Numeric .Right > .Duration {
+  &.numeric .right > .duration {
     text-align: right;
     max-width: $unit-12x;
     width: $unit-12x;
   }
 
-  &.Numeric .Right > .Duration {
+  &.numeric .right > .Duration {
     justify-content: flex-end;
     box-sizing: border-box;
   }
 
-  &.Disabled {
+  &.disabled {
-    &:hover .Left .Info h3 {
+    &:hover .left .info h3 {
       color: var(--text-tertiary);
     }
 
-    .Left .Info h3 {
+    .left .info h3 {
       color: var(--text-tertiary);
     }
   }
 
-  .Left {
+  .left {
     align-items: center;
     display: flex;
     flex-direction: row;
     gap: $unit;
     width: 100%;
 
-    .Info {
+    .info {
       display: flex;
       flex-direction: column;
       flex-grow: 1;
@@ -55,7 +55,7 @@
       gap: $unit-half;
     }
 
-    .Image {
+    .image {
       display: none;
 
       .preview {
@@ -90,7 +90,7 @@
     }
   }
 
-  .Right {
+  .right {
     align-items: center;
     display: flex;
     flex-direction: row;
@@ -99,12 +99,12 @@
     width: 100%;
 
     @include breakpoint(phone) {
-      .Image {
+      .image {
         display: none;
       }
     }
 
-    .SelectTrigger {
+    .trigger {
       width: 100%;
     }
   }

components/common/TableField/index.tsx

@@ -5,21 +5,39 @@ interface Props {
   name: string
   label: string
   description?: string
+  image?: {
+    className?: String
+    alt?: string
+    src: string[]
+  }
   className?: string
-  imageAlt?: string
-  imageClass?: string
-  imageSrc?: string[]
   children: React.ReactNode
 }
 
 const TableField = (props: Props) => {
+  const classes = classNames(
+    {
+      [styles.field]: true,
+    },
+    props.className?.split(' ').map((className) => styles[className])
+  )
+
   const image = () => {
-    return props.imageSrc && props.imageSrc.length > 0 ? (
+    return props.image && props.image.src.length > 0 ? (
-      <div className={`preview ${props.imageClass}`}>
+      <div
+        className={classNames(
+          {
+            [styles.preview]: true,
+          },
+          props.image.className
+            ?.split(' ')
+            .map((className) => styles[className])
+        )}
+      >
         <img
-          alt={props.imageAlt}
+          alt={props.image.alt}
-          srcSet={props.imageSrc.join(', ')}
+          srcSet={props.image.src.join(', ')}
-          src={props.imageSrc[0]}
+          src={props.image.src[0]}
         />
       </div>
     ) : (
@@ -28,17 +46,17 @@ const TableField = (props: Props) => {
   }
 
   return (
-    <div className={classNames({ TableField: true }, props.className)}>
+    <div className={classes}>
-      <div className="Left">
+      <div className={styles.left}>
-        <div className="Info">
+        <div className={styles.info}>
           <h3>{props.label}</h3>
           {props.description && <p>{props.description}</p>}
         </div>
-        <div className="Image">{image()}</div>
+        <div className={styles.image}>{image()}</div>
       </div>
 
-      <div className="Right">
+      <div className={styles.right}>
-        <div className="Image">{image()}</div>
+        <div className={styles.image}>{image()}</div>
         {props.children}
       </div>
     </div>