feat(select): 🎨 add select and select option theme (#84)

feat(select): 🎨 add select and select option theme

Author: kodiakhq[bot]

.vscode/settings.json

@@ -21,7 +21,8 @@
     "icons",
     "kodiak",
     "utils",
-    "divider"
+    "divider",
+    "select"
   ],
   "git.branchProtection": ["main"]
 }

example/src/AppRoot.tsx

@@ -14,6 +14,7 @@ import {
   MeterComponentScreen,
   ProgressScreen,
   RadioScreen,
+  SelectScreen,
   SliderComponentScreen,
   SpinnerScreen,
   SwitchComponentScreen,
@@ -25,7 +26,12 @@ const Drawer = createDrawerNavigator();
 
 const AppRoot = () => {
   return (
-    <Drawer.Navigator initialRouteName="ButtonScreen">
+    <Drawer.Navigator initialRouteName="SelectScreen">
+      <Drawer.Screen
+        options={{ title: "Select" }}
+        name="SelectScreen"
+        component={SelectScreen}
+      />
       <Drawer.Screen
         options={{ title: "Avatar" }}
         name="AvatarScreen"

example/src/modules/forms/SelectScreen.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import {
+  Box,
+  ItemData,
+  Select,
+  useTheme,
+} from "@adaptui/react-native-tailwind";
+import { BottomSheetModalProvider } from "@gorhom/bottom-sheet";
+
+const options: ItemData[] = [
+  {
+    value: "apple",
+    label: "Apple",
+  },
+  {
+    value: "orange",
+    label: "Orange",
+  },
+  {
+    value: "watermelon",
+    label: "Watermelon",
+  },
+  {
+    value: "grapes",
+    label: "Grapes",
+  },
+  {
+    value: "banana",
+    label: "Banana",
+  },
+  {
+    value: "blueberry",
+    label: "Blueberry",
+  },
+  {
+    value: "sapota",
+    label: "Sapota",
+  },
+  {
+    value: "papaya",
+    label: "Papaya",
+  },
+  {
+    value: "avocado",
+    label: "Avocado",
+  },
+  {
+    value: "strawberry",
+    label: "Strawberry",
+  },
+  {
+    value: "cherry",
+    label: "Cherry",
+  },
+  {
+    value: "fig",
+    label: "Fig",
+  },
+  {
+    value: "guava",
+    label: "Guava",
+  },
+  {
+    value: "mango",
+    label: "Mango",
+  },
+];
+
+export const SelectScreen = () => {
+  const tailwind = useTheme();
+
+  return (
+    <Box style={tailwind.style("flex-1 px-2 justify-center bg-white-900")}>
+      <BottomSheetModalProvider>
+        <Select
+          style={tailwind.style("my-1")}
+          size="sm"
+          options={options}
+          placeholder="Select fruit"
+        />
+        <Select
+          style={tailwind.style("my-1")}
+          size="md"
+          options={options}
+          placeholder="Select fruit"
+        />
+        <Select
+          style={tailwind.style("my-1")}
+          size="lg"
+          options={options}
+          placeholder="Select fruit"
+        />
+        <Select
+          style={tailwind.style("my-1")}
+          size="xl"
+          options={options}
+          placeholder="Select fruit"
+        />
+      </BottomSheetModalProvider>
+    </Box>
+  );
+};

example/src/modules/forms/index.ts

@@ -1,5 +1,6 @@
 export * from "./CheckboxGroupScreen";
 export * from "./InputScreen";
 export * from "./RadioScreen";
+export * from "./SelectScreen";
 export * from "./SliderComponentScreen";
 export * from "./SwitchComponentScreen";

src/components/select/Select.tsx

@@ -1,22 +1,33 @@
 import React, { forwardRef, useCallback, useMemo, useRef } from "react";
+import { ListRenderItemInfo, PressableProps } from "react-native";
 import { useControllableState } from "@chakra-ui/hooks";
-import { BottomSheetModal } from "@gorhom/bottom-sheet";
-import { useHover } from "@react-native-aria/interactions";
+import { BottomSheetFlatList, BottomSheetModal } from "@gorhom/bottom-sheet";
 import { isUndefined } from "lodash";
 
-import { Box, Text, Touchable } from "../../primitives";
+import { Text, Touchable } from "../../primitives";
 import { useTheme } from "../../theme";
-import { createComponent, createContext, RenderPropType } from "../../utils";
-
+import {
+  createComponent,
+  createContext,
+  RenderPropType,
+  styleAdapter,
+  useOnHover,
+} from "../../utils";
+
+import { SelectOption } from "./SelectOption";
 import { SelectPrefix } from "./SelectPrefix";
 import { SelectSuffix } from "./SelectSuffix";
 
 export type SelectSizes = "sm" | "md" | "lg" | "xl";
 export type SelectVariants = "outline" | "subtle" | "underline" | "ghost";
 
-type ItemData = { value: string; disabled: boolean; label: string };
+export type ItemData = { value: string; disabled?: boolean; label: string };
+
+function keyExtractor(item: ItemData) {
+  return `select-item-${item.value}`;
+}
 
-export interface SelectProps {
+export interface SelectProps extends PressableProps {
   /**
    * The Select Options
    */
@@ -61,6 +72,10 @@ export interface SelectProps {
    * True, if the select is disabled.
    */
   disabled: boolean;
+  /**
+   * Bottomsheet Snap points
+   */
+  snapPoints: string[];
 }
 
 const [SelectGroupProvider, useSelectGroupContext] = createContext({
@@ -87,6 +102,10 @@ const RNSelect: React.FC<Partial<SelectProps>> = forwardRef<
     state,
     onStateChange,
     placeholder = "Select option",
+    options,
+    snapPoints: _snapPoints,
+    style,
+    ...otherProps
   } = props;
 
   const [prefixWidth, setPrefixWidth] = React.useState(0);
@@ -100,43 +119,68 @@ const RNSelect: React.FC<Partial<SelectProps>> = forwardRef<
 
   const selectRef = useRef();
 
-  const { isHovered, hoverProps } = useHover({}, selectRef);
-
+  const { onHoverIn, onHoverOut, hovered } = useOnHover();
+  const isHovered = useMemo(
+    () => (hovered.value ? true : false),
+    [hovered.value],
+  );
   // ref
   const bottomSheetModalRef = useRef<BottomSheetModal>(null);
 
   // variables
-  const snapPoints = useMemo(() => ["25%", "50%"], []);
-
-  const handleSheetChanges = useCallback((index: number) => {
-    console.log("handleSheetChanges", index);
-  }, []);
+  const snapPoints = useMemo(
+    () => (_snapPoints ? _snapPoints : ["50%"]),
+    [_snapPoints],
+  );
 
   // callbacks
   const handlePresentModalPress = useCallback(() => {
     bottomSheetModalRef.current?.present();
   }, []);
 
+  const renderSelectItem = ({ item }: ListRenderItemInfo<ItemData>) => {
+    const handleSelectItemPress = () => {
+      setSelectState(item.value);
+      bottomSheetModalRef.current?.dismiss();
+    };
+    const isSelected = selectState === item.value;
+    return (
+      <SelectOption
+        key={`select-item-${item.value}`}
+        value={item.value}
+        label={item.label}
+        size={size}
+        handlePress={handleSelectItemPress}
+        isSelected={isSelected}
+      />
+    );
+  };
+
   return (
     <SelectGroupProvider value={{ selectState, setSelectState }}>
       <Touchable
+        // Web Callbacks
+        onHoverIn={onHoverIn}
+        onHoverOut={onHoverOut}
+        // Web Callbacks
         onPress={handlePresentModalPress}
-        style={({ pressed }) => [
+        style={touchState => [
           tailwind.style([
             selectStyle.base.common,
             selectStyle.base.size[size].common,
             !prefix ? selectStyle.base.size[size].withoutAddon : "",
             selectStyle.base.variant[variant].common,
             invalid ? selectStyle.base.variant[variant].invalid : "",
             disabled ? selectStyle.base.variant[variant].disabled : "",
-            pressed || isHovered
+            touchState.pressed || hovered.value
               ? selectStyle.base.variant[variant].pressedOrHovered
               : "",
           ]),
+          styleAdapter(style, touchState),
         ]}
+        {...otherProps}
         disabled={disabled}
         ref={selectRef}
-        {...hoverProps}
       >
         {({ pressed }) => {
           return (
@@ -155,7 +199,7 @@ const RNSelect: React.FC<Partial<SelectProps>> = forwardRef<
               <Text
                 style={tailwind.style([
                   selectStyle.base.text.size[size],
-                  pressed || isHovered
+                  pressed || hovered.value
                     ? selectStyle.base.text.variant[variant].common
                     : disabled
                     ? selectStyle.base.text.variant[variant].disabled
@@ -166,7 +210,10 @@ const RNSelect: React.FC<Partial<SelectProps>> = forwardRef<
                   `pr-[${suffixWidth}px]`,
                 ])}
               >
-                {isUndefined(selectState) ? placeholder : selectState}
+                {isUndefined(selectState)
+                  ? placeholder
+                  : options?.filter(item => item.value === selectState)[0]
+                      ?.label}
               </Text>
               <SelectSuffix
                 onLayout={event =>
@@ -186,10 +233,15 @@ const RNSelect: React.FC<Partial<SelectProps>> = forwardRef<
         ref={bottomSheetModalRef}
         index={0}
         snapPoints={snapPoints}
-        onChange={handleSheetChanges}
         style={tailwind.style("rounded-t-lg shadow-lg")}
       >
-        <Box style={tailwind.style("flex-1")}>{props.children}</Box>
+        <BottomSheetFlatList
+          data={options}
+          keyExtractor={keyExtractor}
+          renderItem={renderSelectItem}
+          contentContainerStyle={tailwind.style("px-4")}
+          extraData={selectState}
+        />
       </BottomSheetModal>
     </SelectGroupProvider>
   );