fix(select): Resolved issue with display and animations

storm-software · May 18, 2024 · ffc08ff · ffc08ff
1 parent ad71740
commit ffc08ff
Showing 1 changed file with 155 additions and 54 deletions.
diff --git a/components/select/src/Select.tsx b/components/select/src/Select.tsx
@@ -8,7 +8,6 @@ import type {
 } from "@tamagui/web";
 import { withStaticProperties } from "@tamagui/helpers";
 import {
-  createRef,
   useCallback,
   useId,
   useLayoutEffect,
@@ -19,7 +18,7 @@ import {
 import { Label } from "@tamagui/label";
 import { XGroup } from "@tamagui/group";
 import { isWeb } from "@tamagui/constants";
-import { XStack, YStack } from "@tamagui/stacks";
+import { ThemeableStack, XStack, YStack } from "@tamagui/stacks";
 import type { ColorTokens, FontSizeTokens } from "@tamagui/core";
 import {
   Text,
@@ -97,45 +96,108 @@ export const defaultSelectGroupStyles = {
   hoverStyle: {
     borderColor: "$accent10",
     backgroundColor: "$background"
-  },
-
-  focusStyle: {
-    outlineColor: "$accent10",
-    outlineWidth: 2,
-    outlineOffset: "$1.25",
-    outlineStyle: "solid",
-    borderColor: "$borderColorFocus"
   }
 } as const;
 
 const SelectGroupFrame = styled(TamaguiSelect.Trigger, {
   name: "Select",
   context: SelectContext,
+  unstyled: true,
+  radiused: true,
+  hoverTheme: false,
+  pressTheme: true,
+  focusable: true,
+  backgrounded: false,
 
   justifyContent: "space-between",
   animation: "$slow",
   size: "$true",
   fontFamily: "$body",
   color: "$color",
   backgroundColor: "$background",
-  borderRadius: "$radius",
+  borderWidth: 0,
+  borderColor: "transparent",
+  borderStyle: "none" as any,
+  outlineWidth: 0,
+  outlineColor: "transparent",
+  outlineStyle: "none",
+
+  variants: {
+    scaleIcon: {
+      ":number": {} as any
+    },
+
+    size: {
+      "...size": (val, { tokens }) => {
+        return {
+          borderRadius: tokens.radius[val]
+        };
+      }
+    },
+
+    required: {
+      true: {}
+    },
+
+    disabled: {
+      true: {
+        color: "$disabled",
+        placeholderColor: "$disabled",
+        userSelect: "none",
+        cursor: "not-allowed",
+
+        hoverStyle: {
+          color: "$disabled"
+        },
+
+        focusStyle: {
+          color: "$disabled"
+        },
+
+        pressStyle: {
+          color: "$disabled"
+        }
+      },
+      false: {
+        cursor: "pointer"
+      }
+    }
+  } as const,
+
+  defaultVariants: {
+    required: false,
+    disabled: false
+  }
+});
+
+const SelectGroupFrameContainer = styled(ThemeableStack, {
+  name: "Select",
+  context: SelectContext,
+
+  radiused: true,
+  hoverTheme: true,
+  pressTheme: true,
+  focusable: true,
+  backgrounded: false,
+  animation: "$slow",
+  backgroundColor: "transparent",
   borderWidth: 1,
   borderColor: "$borderColor",
+  borderStyle: "solid",
   outlineWidth: 0,
   outlineColor: "transparent",
   outlineStyle: "none",
 
   hoverStyle: {
-    borderColor: "$accent10",
-    backgroundColor: "$background"
+    borderColor: "$accent10"
   },
 
   focusStyle: {
     outlineColor: "$accent10",
     outlineWidth: 2,
     outlineOffset: "$1.25",
     outlineStyle: "solid",
-    borderColor: "$borderColorFocus"
+    borderColor: "$borderColor"
   },
 
   variants: {
@@ -146,7 +208,15 @@ const SelectGroupFrame = styled(TamaguiSelect.Trigger, {
     applyFocusStyle: {
       ":boolean": (val, { props }) => {
         if (val) {
-          return props.focusStyle || defaultSelectGroupStyles.focusStyle;
+          return (
+            props.focusStyle || {
+              outlineColor: "$accent10",
+              outlineWidth: 2,
+              outlineOffset: "$1.25",
+              outlineStyle: "solid",
+              borderColor: "$borderColorFocus"
+            }
+          );
         }
       }
     },
@@ -159,17 +229,14 @@ const SelectGroupFrame = styled(TamaguiSelect.Trigger, {
       }
     },
 
-    required: {
-      true: {}
-    },
-
     disabled: {
       true: {
         color: "$disabled",
         borderColor: "$disabled",
         placeholderColor: "$disabled",
         userSelect: "none",
         cursor: "not-allowed",
+        borderWidth: 1,
 
         hoverStyle: {
           color: "$disabled",
@@ -189,12 +256,16 @@ const SelectGroupFrame = styled(TamaguiSelect.Trigger, {
           outlineStyle: "none",
           outlineColor: "transparent"
         }
+      },
+      false: {
+        borderWidth: 1,
+        borderColor: "$borderColor",
+        cursor: "pointer"
       }
     }
   } as const,
 
   defaultVariants: {
-    required: false,
     disabled: false
   }
 });
@@ -212,49 +283,56 @@ const InternalStateContext = createStyledContext({
 
 const SelectGroupImpl = SelectGroupFrame.styleable((props, forwardedRef) => {
   const { children, ...rest } = props;
-  const { theme, disabled, size } = SelectContext.useStyledContext();
+  const { theme, disabled, size, scaleIcon } = SelectContext.useStyledContext();
   const { open } = InternalStateContext.useStyledContext();
 
   return (
-    <SelectGroupFrame
-      theme={theme}
-      applyFocusStyle={open}
-      ref={forwardedRef}
-      iconAfter={ChevronDown}
-      {...rest}
-      size={size}
-      disabled={disabled}>
-      {theme &&
-        (theme.toLowerCase().includes(ColorRole.ERROR) ||
-          theme.toLowerCase().includes(ColorRole.WARNING)) && (
+    <SelectGroupFrameContainer theme={theme} applyFocusStyle={open}>
+      <SelectGroupFrame
+        theme={theme}
+        ref={forwardedRef}
+        {...rest}
+        scaleIcon={scaleIcon}
+        size={size}
+        active={!disabled}
+        disabled={disabled}>
+        {theme &&
+          (theme.toLowerCase().includes(ColorRole.ERROR) ||
+            theme.toLowerCase().includes(ColorRole.WARNING)) && (
+            <SelectIcon>
+              <AlertCircle />
+            </SelectIcon>
+          )}
+        {!disabled && theme && theme.toLowerCase().includes(ColorRole.INFO) && (
           <SelectIcon>
-            <AlertCircle />
+            <Info />
           </SelectIcon>
         )}
-      {!disabled && theme && theme.toLowerCase().includes(ColorRole.INFO) && (
-        <SelectIcon>
-          <Info />
-        </SelectIcon>
-      )}
-      {!disabled && theme && theme.toLowerCase().includes(ColorRole.HELP) && (
-        <SelectIcon>
-          <HelpCircle />
-        </SelectIcon>
-      )}
-      {!disabled &&
-        theme &&
-        theme.toLowerCase().includes(ColorRole.SUCCESS) && (
+        {!disabled && theme && theme.toLowerCase().includes(ColorRole.HELP) && (
           <SelectIcon>
-            <CheckCircle />
+            <HelpCircle />
           </SelectIcon>
         )}
-      {children}
-      {disabled && (
-        <SelectIcon marginRight={0}>
-          <Lock />
-        </SelectIcon>
-      )}
-    </SelectGroupFrame>
+        {!disabled &&
+          theme &&
+          theme.toLowerCase().includes(ColorRole.SUCCESS) && (
+            <SelectIcon>
+              <CheckCircle />
+            </SelectIcon>
+          )}
+        {children}
+        {disabled && (
+          <SelectIcon marginRight={0}>
+            <Lock />
+          </SelectIcon>
+        )}
+        {!disabled && (
+          <SelectIconChevron marginRight={0} opened={open}>
+            <ChevronDown size="$1.5" />
+          </SelectIconChevron>
+        )}
+      </SelectGroupFrame>
+    </SelectGroupFrameContainer>
   );
 });
 
@@ -435,6 +513,29 @@ const SelectIconWrapper = SelectIcon.styleable(
   }
 );
 
+const SelectIconChevron = styled(SelectIcon, {
+  name: "Select",
+  context: SelectContext,
+
+  marginRight: 0,
+  animation: "$slow",
+
+  variants: {
+    opened: {
+      true: {
+        rotate: "180deg"
+      },
+      false: {
+        rotate: "0deg"
+      }
+    }
+  } as const,
+
+  defaultVariants: {
+    opened: false
+  }
+});
+
 export const SelectComp = styled(TamaguiSelect, {
   name: "Select",
   context: SelectContext,