Add hover style for [Selectbox] (#144)

dooboolab-community · Oct 8, 2021 · 67c9b51 · 67c9b51
1 parent 8d0de13
commit 67c9b51
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/main/SelectBox/index.tsx b/main/SelectBox/index.tsx
@@ -16,6 +16,7 @@ import {Icon} from '../Icon';
 import {TouchableOpacity} from 'react-native-gesture-handler';
 import {Typography} from '../Typography';
 import styled from '@emotion/native';
+import {useHover} from 'react-native-web-hooks';
 import {withTheme} from '@emotion/react';
 
 const Title = styled.View`
@@ -45,6 +46,7 @@ type Styles = {
   rightElementContainer?: StyleProp<ViewStyle>;
   itemContainer?: StyleProp<ViewStyle>;
   itemText?: StyleProp<TextStyle>;
+  hovered?: StyleProp<ViewStyle>;
 };
 interface ItemCompProps<T> {
   value: T;
@@ -69,15 +71,20 @@ function ItemComp<T extends {value: string} | string>({
     setIsOpened(false);
   };
 
+  const ref = useRef(null);
+  const hover = useHover(ref);
+
   return (
-    <TouchableOpacity {...itemTouchableProps} onPress={handlePress}>
+    <TouchableOpacity {...itemTouchableProps} onPress={handlePress} ref={ref}>
       <Item
         style={[
           {
             borderColor: theme.primary,
             backgroundColor: theme.textContrast,
           },
           styles?.itemContainer,
+          hover && {backgroundColor: theme.secondary},
+          hover && styles?.hovered,
         ]}
       >
         <Typography.Body2 style={styles?.itemText}>

diff --git a/stories/dooboo-ui/SelectBoxStories/SelectBoxStory.tsx b/stories/dooboo-ui/SelectBoxStories/SelectBoxStory.tsx
@@ -90,12 +90,15 @@ const SelectBoxStory: FC = () => {
             borderRightWidth: 0,
           },
           itemContainer: {
-            backgroundColor: theme.secondary,
+            backgroundColor: theme.paper,
             borderTopWidth: 0,
             borderBottomWidth: 0,
             borderLeftWidth: 0,
             borderRightWidth: 0,
           },
+          hovered: {
+            backgroundColor: theme.secondary,
+          },
         }}
       />
       <Divider />