Merge pull request #1795 from gluestack/fix/select-reset

feat: added reset feature to select component
gluestack · Mar 18, 2024 · df07318 · df07318
2 parents 8596e7f + 0361407
commit df07318
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 36 deletions.
diff --git a/example/storybook/src/ui/components/Forms/Select/Select.tsx b/example/storybook/src/ui/components/Forms/Select/Select.tsx
@@ -63,18 +63,14 @@ const SelectBasic = ({
           <SelectDragIndicatorWrapper>
             <SelectDragIndicator />
           </SelectDragIndicatorWrapper>
-          <SelectItem label="UX Research" value="UX Research" />
-          <SelectItem label="Web Development" value="Web Development" />
+          <SelectItem label="UX Research" value="ux" />
+          <SelectItem label="Web Development" value="web" />
           <SelectItem
             label="Cross Platform Development Process"
-            value="Cross Platform Development Process"
+            value="cross-platform"
           />
-          <SelectItem
-            label="UI Designing"
-            value="UI Designing"
-            isDisabled={true}
-          />
-          <SelectItem label="Backend Development" value="Backend Development" />
+          <SelectItem label="UI Designing" value="ui" isDisabled={true} />
+          <SelectItem label="Backend Development" value="backend" />
         </SelectContent>
       </SelectPortal>
     </Select>

diff --git a/example/storybook/src/ui/components/Forms/Select/index.stories.mdx b/example/storybook/src/ui/components/Forms/Select/index.stories.mdx
@@ -78,7 +78,7 @@ This is an illustration of a **Themed Select** component with default configurat
               <SelectItem label="Web Development" value="web" />
               <SelectItem
                 label="Cross Platform Development Process"
-                value="Cross Platform Development Process"
+                value="cross-platform"
               />
               <SelectItem
                 label="UI Designing"
@@ -311,17 +311,17 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
         <Table.TR>
           <Table.TD>
             <Table.TText>
-              <InlineCode>selectedValue</InlineCode>
+              <InlineCode>defaultValue</InlineCode>
             </Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>boolean</Table.TText>
+            <Table.TText>string</Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>false</Table.TText>
+            <Table.TText>-</Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>{`Sets the currently selected option value, allowing the component to render with the corresponding option pre-selected.`}</Table.TText>
+            <Table.TText>{`Sets the initial selected option value for a select component.`}</Table.TText>
           </Table.TD>
         </Table.TR>
         <Table.TR>
@@ -343,23 +343,23 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
         <Table.TR>
           <Table.TD>
             <Table.TText>
-              <InlineCode>defaultValue</InlineCode>
+              <InlineCode>selectedValue</InlineCode>
             </Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>boolean</Table.TText>
+            <Table.TText>string</Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>false</Table.TText>
+            <Table.TText>-</Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>{`Sets the initial selected option value for a select component.`}</Table.TText>
+            <Table.TText>{`Sets the currently selected option value, allowing the component to render with the corresponding option pre-selected.`}</Table.TText>
           </Table.TD>
         </Table.TR>
         <Table.TR>
           <Table.TD>
             <Table.TText>
-              <InlineCode>onOpen</InlineCode>
+              <InlineCode>onValueChange</InlineCode>
             </Table.TText>
           </Table.TD>
           <Table.TD>
@@ -369,13 +369,13 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
             <Table.TText>-</Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>{`Callback to be invoked when Select Dropdown or Actionsheet is opened.`}</Table.TText>
+            <Table.TText>{`Callback to be invoked when Select value is changed.`}</Table.TText>
           </Table.TD>
         </Table.TR>
         <Table.TR>
           <Table.TD>
             <Table.TText>
-              <InlineCode>onValueChange</InlineCode>
+              <InlineCode>onOpen</InlineCode>
             </Table.TText>
           </Table.TD>
           <Table.TD>
@@ -385,7 +385,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
             <Table.TText>-</Table.TText>
           </Table.TD>
           <Table.TD>
-            <Table.TText>{`Callback to be invoked when Select value is changed.`}</Table.TText>
+            <Table.TText>{`Callback to be invoked when Select Dropdown or Actionsheet is opened.`}</Table.TText>
           </Table.TD>
         </Table.TR>
         <Table.TR>
@@ -409,7 +409,9 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
   </TableContainer>
 </AppProvider>
 
-> Note: Please note that if you want to use `initialLabel` prop, then you also need to pass `defaultValue` or `selectedValue` prop, to select the option value for a select component.
+> Note: Please note that if you want to use the `initialLabel` prop, you also need to pass the `defaultValue` or `selectedValue` prop to select the option value for a select component. Conversely, if you are using the `defaultValue` prop, you have to utilize the `initialLabel` prop.
+<br/>
+> Note: If you want to **reset** the select component, you should pass **'null'** as the value for `selectedValue`.
 
 #### SelectTrigger
 

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',
@@ -79,6 +80,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/Select.tsx b/packages/unstyled/select/src/Select.tsx
@@ -17,7 +17,7 @@ export const Select = (StyledSelect: any) =>
         isHovered: isHoveredProp,
         isFocused: isFocusedProp,
         isFocusVisible: isFocusVisibleProp,
-        selectedValue: selectedOption,
+        selectedValue,
         selectedLabel: selectedLabel,
         onValueChange,
         defaultValue,
@@ -35,17 +35,22 @@ export const Select = (StyledSelect: any) =>
 
       const hoverRef = React.useRef(null);
       const { hoverProps, isHovered } = useHover({ isDisabled }, hoverRef);
+      const [label, setLabel] = React.useState(initialLabel ?? selectedLabel);
+      const [isOpen, setIsOpen] = React.useState<boolean>(false);
 
       const [value, setValue] = useControllableState({
-        value: selectedOption,
+        value: selectedValue,
         defaultValue,
         onChange: (newValue: any) => {
           onValueChange && onValueChange(newValue);
         },
       });
 
-      const [label, setLabel] = React.useState(initialLabel ?? selectedLabel);
-      const [isOpen, setIsOpen] = React.useState<boolean>(false);
+      React.useEffect(() => {
+        if (selectedValue === null) {
+          setLabel(initialLabel);
+        }
+      }, [selectedValue, initialLabel]);
 
       const handleClose = React.useCallback(() => {
         setIsOpen(false);

diff --git a/packages/unstyled/select/src/SelectInput.tsx b/packages/unstyled/select/src/SelectInput.tsx
@@ -16,7 +16,7 @@ export const SelectInput = (StyledSelectInput: any) =>
         states={{
           disabled: isDisabled,
         }}
-        daaSet={{
+        dataSet={{
           disabled: isDisabled ? 'true' : 'false',
         }}
         disabled={isDisabled}

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>

diff --git a/packages/unstyled/select/src/SelectPortal.tsx b/packages/unstyled/select/src/SelectPortal.tsx
@@ -2,6 +2,7 @@ import React, { forwardRef } from 'react';
 import { SelectContext, SelectPortalContext } from './SelectContext';
 import { StyleSheet, Platform } from 'react-native';
 import { mergeRefs } from '@gluestack-ui/utils';
+const PLACEHOLDER_OPTION = '__GluestackPlaceholder__';
 
 export const SelectPortal = (StyledSelectPortal: any) =>
   forwardRef(({ children, ...props }: any, ref?: any) => {
@@ -24,7 +25,6 @@ export const SelectPortal = (StyledSelectPortal: any) =>
       isReadOnly,
       ...portalProps
     } = React.useContext(SelectContext);
-    const tempFix = '__GluestackPlaceholder__';
     if (Platform.OS !== 'web') {
       return (
         <StyledSelectPortal
@@ -44,7 +44,7 @@ export const SelectPortal = (StyledSelectPortal: any) =>
               hoverProps,
               focusProps,
               setValue,
-              value: value === null ? tempFix : value,
+              value: value === null ? PLACEHOLDER_OPTION : value,
               setLabel,
               label,
               isReadOnly,
@@ -78,7 +78,7 @@ export const SelectPortal = (StyledSelectPortal: any) =>
             }
           }}
           ref={mergeRefs([ref, hoverRef])}
-          value={value === undefined ? tempFix : value}
+          value={value ?? PLACEHOLDER_OPTION}
           aria-label={placeholder}
           aria-readonly={isReadOnly}
           style={StyleSheet.flatten([
@@ -102,7 +102,7 @@ export const SelectPortal = (StyledSelectPortal: any) =>
             setFocused(false);
           }}
         >
-          <option disabled value={tempFix}>
+          <option disabled value={PLACEHOLDER_OPTION}>
             {placeholder}
           </option>
           {children}