Add value selection in Select

Author: forestream

packages/components/src/components/Select/Checkbox.tsx

@@ -0,0 +1,30 @@
+import { Box, css } from '@devup-ui/react'
+
+import { IconCheck } from './IconCheck'
+
+interface CheckboxProps {
+  isChecked: boolean
+}
+
+export function Checkbox({ isChecked }: CheckboxProps) {
+  return (
+    <Box
+      bg={isChecked ? '$primary' : '$border'}
+      borderRadius="4px"
+      boxSize="18px"
+      pos="relative"
+      transition="background-color 0.1s ease-in-out"
+    >
+      {isChecked && (
+        <IconCheck
+          className={css({
+            position: 'absolute',
+            top: '55%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+          })}
+        />
+      )}
+    </Box>
+  )
+}

packages/components/src/components/Select/IconCheck.tsx

@@ -0,0 +1,22 @@
+import { ComponentProps } from 'react'
+
+export function IconCheck({ ...props }: ComponentProps<'svg'>) {
+  return (
+    <svg
+      color="white"
+      fill="none"
+      height="10"
+      viewBox="0 0 12 10"
+      width="12"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        clipRule="evenodd"
+        d="M11.6044 0.825663C12.1054 1.28367 12.1344 2.05481 11.6692 2.54805L5.4787 9.11055C5.24011 9.36348 4.90375 9.50497 4.55315 9.49987C4.20254 9.49477 3.87058 9.34356 3.63968 9.0838L0.30635 5.3338C-0.143922 4.82725 -0.0917767 4.05729 0.42282 3.61405C0.937417 3.17081 1.7196 3.22214 2.16987 3.7287L4.59876 6.4612L9.85463 0.889455C10.3199 0.396214 11.1033 0.367654 11.6044 0.825663Z"
+        fill="currentColor"
+        fillRule="evenodd"
+      />
+    </svg>
+  )
+}

packages/components/src/components/Select/index.tsx

@@ -5,16 +5,24 @@ import clsx from 'clsx'
 import { ComponentProps, createContext, useContext, useState } from 'react'
 
 import { Button } from '../Button'
+import { IconCheck } from './IconCheck'
+
+type SelectType = 'default' | 'radio' | 'checkbox'
+type SelectValue<T extends SelectType> = T extends 'radio' ? string : string[]
 
 interface SelectProps {
   open?: boolean
   onOpenChange?: (open: boolean) => void
   children: React.ReactNode
+  type?: SelectType
 }
 
 const SelectContext = createContext<{
   open: boolean
   setOpen: (open: boolean) => void
+  value: SelectValue<SelectType>
+  setValue: (value: string) => void
+  type: SelectType
 } | null>(null)
 
 export const useSelect = () => {
@@ -26,17 +34,44 @@ export const useSelect = () => {
 }
 
 export function Select({
+  type = 'default',
   children,
   open: openProp,
   onOpenChange,
 }: SelectProps) {
   const [open, setOpen] = useState(openProp ?? false)
+  const [value, setValue] = useState<SelectValue<typeof type>>(
+    type === 'checkbox' ? [] : '',
+  )
+
   const handleOpenChange = (open: boolean) => {
     setOpen(open)
     onOpenChange?.(open)
   }
+
+  const handleValueChange = (nextValue: string) => {
+    if (type === 'default') return
+    if (type === 'radio') {
+      setValue(nextValue)
+      return
+    }
+    if (Array.isArray(value) && value.includes(nextValue)) {
+      setValue(value.filter((v) => v !== nextValue))
+    } else {
+      setValue([...value, nextValue])
+    }
+  }
+
   return (
-    <SelectContext.Provider value={{ open, setOpen: handleOpenChange }}>
+    <SelectContext.Provider
+      value={{
+        open,
+        setOpen: handleOpenChange,
+        value,
+        setValue: handleValueChange,
+        type,
+      }}
+    >
       <Box display="inline-block" pos="relative">
         {children}
       </Box>
@@ -105,15 +140,26 @@ export function SelectOption({
   children,
   ...props
 }: SelectOptionProps) {
-  const { setOpen } = useSelect()
+  const { setOpen, setValue, value, type } = useSelect()
+
+  const handleClose = () => {
+    if (type === 'checkbox') return
+    setOpen(false)
+  }
+
   const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
     if (onClick) {
       onClick(e)
       return
     }
-    setOpen(false)
+    setValue(children as string)
+    handleClose()
   }
 
+  const isChecked = Array.isArray(value)
+    ? value.includes(children as string)
+    : value === children
+
   return (
     <Flex
       _hover={
@@ -123,16 +169,70 @@ export function SelectOption({
       }
       alignItems="center"
       borderRadius="8px"
-      color={disabled ? '$selectDisabled' : '$title'}
+      color={disabled ? '$selectDisabled' : isChecked ? '$primary' : '$title'}
       cursor={disabled ? 'default' : 'pointer'}
+      gap={
+        {
+          checkbox: '10px',
+          radio: '6px',
+          default: '0',
+        }[type]
+      }
       h="40px"
       onClick={disabled ? undefined : handleClick}
       px="10px"
       styleOrder={1}
       transition="background-color 0.1s ease-in-out"
-      typography="inputText"
+      typography={isChecked ? 'inputBold' : 'inputText'}
       {...props}
     >
+      {
+        {
+          checkbox: (
+            <Box
+              bg={isChecked ? '$primary' : '$border'}
+              borderRadius="4px"
+              boxSize="18px"
+              pos="relative"
+              transition="background-color 0.1s ease-in-out"
+            >
+              {isChecked && (
+                <IconCheck
+                  className={css({
+                    position: 'absolute',
+                    top: '55%',
+                    left: '50%',
+                    transform: 'translate(-50%, -50%)',
+                  })}
+                />
+              )}
+            </Box>
+          ),
+          radio: (
+            <>
+              {isChecked && (
+                <Box
+                  borderRadius="4px"
+                  boxSize="18px"
+                  pos="relative"
+                  transition="background-color 0.1s ease-in-out"
+                >
+                  <IconCheck
+                    className={css({
+                      position: 'absolute',
+                      top: '55%',
+                      left: '50%',
+                      transform: 'translate(-50%, -50%)',
+                      color: '$primary',
+                    })}
+                  />
+                </Box>
+              )}
+            </>
+          ),
+          default: null,
+        }[type]
+      }
       {children}
     </Flex>
   )