Merge pull request #24 from kaiachain/dev

Update KaSelectBox UI
kaiachain · Dec 18, 2024 · 16f7460 · 16f7460
2 parents 080812d + ba5c2c3
commit 16f7460
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kaiachain/kaia-design-system",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",

diff --git a/src/components/SelectBox/SelectBox.tsx b/src/components/SelectBox/SelectBox.tsx
@@ -30,7 +30,8 @@ const StyledDropdownToggle = styled.div<{
   align-items: center;
   border-radius: 999px;
   background-color: ${themeFunc('elevation', '9')};
-  padding: 10px 14px;
+  padding: 0px 14px 0px 4px;
+  height: 40px;
 
   outline: ${({ isError }) => (isError ? '1px' : '4px')} solid;
   outline-color: ${({ isFocused, isError }) =>
@@ -141,8 +142,16 @@ const StyledFormImg = styled.img<FormImgProps>`
   display: inline-block;
   height: 20px;
   width: 20px;
+  border-radius: 50%;
   margin-right: 12px;
 `
+const StyledSelectedImg = styled.img<FormImgProps>`
+  display: inline-block;
+  height: 34px;
+  width: 34px;
+  margin-right: 8px;
+  border-radius: 50%;
+`
 export interface KaSelectBoxOptionListType {
   value: string
   label: string
@@ -182,6 +191,24 @@ const getLabelForValue = (
   return undefined
 }
 
+const getImgForValue = (
+  options: KaSelectBoxOptionListType[],
+  value: string,
+): string | undefined => {
+  for (const option of options) {
+    if (option.value === value) {
+      return option.img
+    }
+    if (option.subItems) {
+      const childImg = getImgForValue(option.subItems, value)
+      if (childImg) {
+        return childImg
+      }
+    }
+  }
+  return undefined
+}
+
 export const KaSelectBox = ({
   optionList,
   placeholder,
@@ -271,7 +298,7 @@ export const KaSelectBox = ({
           <Row>
             {!isChild && isSelected && <NeonBar />}
             {indentIcon && isChild && <StyledIconindent />}
-            {src && <StyledFormImg src={src} style={{ borderRadius: '50%' }} />}
+            {src && <StyledFormImg src={src} />}
             <KaText
               fontType={isSelected ? 'body/md_700' : 'body/md_400'}
               color={isSelected ? getTheme('gray', '0') : getTheme('gray', '2')}
@@ -330,18 +357,27 @@ export const KaSelectBox = ({
             opacity: disabled ? 0.3 : 1,
           }}
         >
-          <KaText
-            fontType="body/md_600"
-            color={isError ? getTheme('danger', '6') : getTheme('gray', '0')}
-            style={{
-              width: '92%',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap',
-            }}
-          >
-            {selectedLabel}
-          </KaText>
+          <Row style={{ alignItems: 'center', flex: 1 }}>
+            {selectedValue && getImgForValue(optionList, selectedValue) && (
+              <StyledSelectedImg
+                src={getImgForValue(optionList, selectedValue)!}
+              />
+            )}
+
+            <KaText
+              fontType="body/md_600"
+              color={isError ? getTheme('danger', '6') : getTheme('gray', '0')}
+              style={{
+                width: '82%',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                marginLeft: '8px',
+              }}
+            >
+              {selectedLabel}
+            </KaText>
+          </Row>
           {isOpen ? (
             <StyledIconChevronBottom style={{ transform: 'rotate(-180deg)' }} />
           ) : (