feat: added checked for select component

gluestack · Feb 16, 2024 · 0361407 · 0361407
1 parent ce45c3b
commit 0361407
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 4 deletions.
diff --git a/packages/config/src/theme/SelectActionsheetItem.ts b/packages/config/src/theme/SelectActionsheetItem.ts
@@ -24,6 +24,10 @@ export const SelectActionsheetItem = createStyle({
     bg: '$backgroundLight200',
   },
 
+  ':checked': {
+    bg: '$backgroundLight300',
+  },
+
   ':focus': {
     bg: '$backgroundLight100',
   },

diff --git a/packages/unstyled/actionsheet/src/ActionsheetItem.tsx b/packages/unstyled/actionsheet/src/ActionsheetItem.tsx
@@ -63,10 +63,11 @@ export function ActionsheetItem<T>(
           states={{
             hover: isHoveredProp || isHovered,
             focus: isFocusedProp || isFocused,
-            // @ts-ignore
             active: isPressedProp || isPressed,
             disabled: isDisabled,
             focusVisible: isFocusVisibleProp || isFocusVisible,
+            // @ts-ignore
+            ...props.states,
           }}
           dataSet={{
             hover: isHoveredProp || isHovered ? 'true' : 'false',
@@ -76,6 +77,8 @@ export function ActionsheetItem<T>(
             disabled: isDisabled ? 'true' : 'false',
             focusVisible:
               isFocusVisibleProp || isFocusVisible ? 'true' : 'false',
+            // @ts-ignore
+            ...props.dataSet,
           }}
         >
           {children}

diff --git a/packages/unstyled/select/src/SelectItem.tsx b/packages/unstyled/select/src/SelectItem.tsx
@@ -36,13 +36,13 @@ export const SelectItem = (StyledSelectItem: any, StyledSelectItemText: any) =>
                 handleClose();
               }
             }}
+            {...props}
             states={{
-              active: activeValue === value,
+              checked: activeValue === value,
             }}
             dataSet={{
-              active: activeValue === value ? 'true' : 'false',
+              checked: activeValue == value ? 'true' : 'false',
             }}
-            {...props}
           >
             <StyledSelectItemText>{label}</StyledSelectItemText>
           </StyledSelectItem>