fix: general refactor about spread usage, menu item, optional icon co…

…mponent (#38) * fix: remove spread operator usage in styles * refactor: add worklet for color calculation * refactor: use color worklet in menu item comp * refactor: make icon component props optional
enesozturk · Aug 7, 2021 · 5820f94 · 5820f94
1 parent 2de54e9
commit 5820f94
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 32 deletions.
diff --git a/src/components/menu/MenuItem.tsx b/src/components/menu/MenuItem.tsx
@@ -9,16 +9,9 @@ import styles from './styles';
 import { MenuItemProps } from './types';
 import { useInternal } from '../../hooks';
 import { CONTEXT_MENU_STATE, IS_IOS } from '../../constants';
-import {
-  BORDER_LIGHT_COLOR,
-  BORDER_DARK_COLOR,
-  MENU_TITLE_COLOR,
-  MENU_TEXT_DESTRUCTIVE_COLOR_LIGHT,
-  MENU_TEXT_DESTRUCTIVE_COLOR_DARK,
-  MENU_TEXT_DARK_COLOR,
-  MENU_TEXT_LIGHT_COLOR,
-} from './constants';
+import { BORDER_LIGHT_COLOR, BORDER_DARK_COLOR } from './constants';
 import isEqual from 'lodash.isequal';
+import { getColor } from './calculations';
 import { AnimatedIcon } from '../provider/Provider';
 
 const ItemComponent = IS_IOS ? TouchableOpacity : GHTouchableOpacity;
@@ -40,21 +33,11 @@ const MenuItemComponent = ({ item, isLast }: MenuItemComponentProps) => {
       borderBottomColor,
       borderBottomWidth: isLast ? 0 : 1,
     };
-  }, [theme, isLast]);
+  }, [theme, isLast, item]);
 
   const textColor = useAnimatedStyle(() => {
-    return {
-      color: item.isTitle
-        ? MENU_TITLE_COLOR
-        : item.isDestructive
-        ? theme.value === 'dark'
-          ? MENU_TEXT_DESTRUCTIVE_COLOR_DARK
-          : MENU_TEXT_DESTRUCTIVE_COLOR_LIGHT
-        : theme.value === 'dark'
-        ? MENU_TEXT_DARK_COLOR
-        : MENU_TEXT_LIGHT_COLOR,
-    };
-  }, [item, theme]);
+    return { color: getColor(item.isTitle, item.isDestructive, theme.value) };
+  }, [theme, item]);
 
   const handleOnPress = useCallback(() => {
     if (!item.isTitle) {

diff --git a/src/components/menu/calculations.ts b/src/components/menu/calculations.ts
@@ -1,6 +1,13 @@
 import Animated from 'react-native-reanimated';
 
 import { MENU_WIDTH } from '../../constants';
+import {
+  MENU_TEXT_DARK_COLOR,
+  MENU_TEXT_DESTRUCTIVE_COLOR_DARK,
+  MENU_TEXT_DESTRUCTIVE_COLOR_LIGHT,
+  MENU_TEXT_LIGHT_COLOR,
+  MENU_TITLE_COLOR,
+} from './constants';
 import type { MenuInternalProps } from './types';
 
 export const leftOrRight = (
@@ -13,13 +20,30 @@ export const leftOrRight = (
 
   let leftPosition = 0;
   anchorPositionHorizontal === 'right'
-    ? (leftPosition = -MENU_WIDTH + itemWidth )
+    ? (leftPosition = -MENU_WIDTH + itemWidth)
     : anchorPositionHorizontal === 'left'
-    ? (leftPosition = 0 )
-    : (leftPosition = -menuProps.value.itemWidth -
-          MENU_WIDTH / 2 +
-          menuProps.value.itemWidth / 2
-      );
+    ? (leftPosition = 0)
+    : (leftPosition =
+        -menuProps.value.itemWidth -
+        MENU_WIDTH / 2 +
+        menuProps.value.itemWidth / 2);
 
   return leftPosition;
 };
+
+export const getColor = (
+  isTitle: boolean | undefined,
+  isDestructive: boolean | undefined,
+  themeValue: 'light' | 'dark'
+) => {
+  'worklet';
+  return isTitle
+    ? MENU_TITLE_COLOR
+    : isDestructive
+    ? themeValue === 'dark'
+      ? MENU_TEXT_DESTRUCTIVE_COLOR_DARK
+      : MENU_TEXT_DESTRUCTIVE_COLOR_LIGHT
+    : themeValue === 'dark'
+    ? MENU_TEXT_DARK_COLOR
+    : MENU_TEXT_LIGHT_COLOR;
+};
diff --git a/src/components/menu/styles.ts b/src/components/menu/styles.ts
@@ -40,13 +40,15 @@ const styles = StyleSheet.create({
     borderBottomColor: 'rgba(255, 255, 255, 0.1)',
   },
   menuItemText: {
-    ...styleGuide.typography.callout,
+    fontSize: styleGuide.typography.callout.fontSize,
+    lineHeight: styleGuide.typography.callout.lineHeight,
     textAlign: 'left',
     width: '100%',
     flex: 1,
   },
   menuItemTitleText: {
-    ...styleGuide.typography.callout2,
+    fontSize: styleGuide.typography.callout2.fontSize,
+    lineHeight: styleGuide.typography.callout2.lineHeight,
     textAlign: 'center',
     width: '100%',
     flex: 1,

diff --git a/src/components/provider/Provider.tsx b/src/components/provider/Provider.tsx
@@ -24,7 +24,8 @@ const ProviderComponent = ({
   theme: selectedTheme,
   iconComponent,
 }: HoldMenuProviderProps) => {
-  AnimatedIcon = Animated.createAnimatedComponent(iconComponent);
+  if (iconComponent)
+    AnimatedIcon = Animated.createAnimatedComponent(iconComponent);
 
   const state = useSharedValue<CONTEXT_MENU_STATE>(
     CONTEXT_MENU_STATE.UNDETERMINED

diff --git a/src/components/provider/types.d.ts b/src/components/provider/types.d.ts
@@ -7,6 +7,6 @@ export interface HoldMenuProviderProps {
    * theme="light"
    */
   theme?: 'dark' | 'light';
-  iconComponent: any;
+  iconComponent?: any;
   children: React.ReactElement | React.ReactElement[];
 }