refactor: move some function to utils, add test cases

callstack · May 25, 2022 · 87a4b4b · 87a4b4b
1 parent 76b9271
commit 87a4b4b
Show file tree

Hide file tree

Showing 4 changed files with 275 additions and 69 deletions.
diff --git a/example/src/Examples/MenuExample.tsx b/example/src/Examples/MenuExample.tsx
@@ -14,8 +14,6 @@ import {
   List,
   TouchableRipple,
   useTheme,
-  MD2Colors,
-  MD3Colors,
 } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
 

diff --git a/src/components/Menu/MenuItem.tsx b/src/components/Menu/MenuItem.tsx
@@ -1,4 +1,3 @@
-import color from 'color';
 import * as React from 'react';
 import {
   StyleProp,
@@ -10,12 +9,14 @@ import {
 import Icon, { IconSource } from '../Icon';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import Text from '../Typography/Text';
-import { black, white } from '../../styles/themes/v2/colors';
 import { withTheme } from '../../core/theming';
 import type { Theme } from '../../types';
-
-const MIN_WIDTH = 112;
-const MAX_WIDTH = 280;
+import {
+  getContentMaxWidth,
+  getMenuItemColor,
+  MAX_WIDTH,
+  MIN_WIDTH,
+} from './utils';
 
 type Props = {
   /**
@@ -110,62 +111,24 @@ const MenuItem = ({
   accessibilityLabel,
   theme,
 }: Props) => {
-  const disabledColor = theme.isV3
-    ? theme.colors.onSurfaceDisabled
-    : color(theme.dark ? white : black)
-        .alpha(0.32)
-        .rgb()
-        .string();
-
-  const titleColor = disabled
-    ? disabledColor
-    : theme.isV3
-    ? theme.colors.onSurface
-    : color(theme.colors.text).alpha(0.87).rgb().string();
-
-  const iconColor = disabled
-    ? disabledColor
-    : theme.isV3
-    ? theme.colors.onSurfaceVariant
-    : color(theme.colors.text).alpha(0.54).rgb().string();
-
-  const underlayColor = theme.isV3
-    ? color(theme.colors.primary).alpha(0.12).rgb().string()
-    : undefined;
-
-  const iconWidth = theme.isV3 ? 24 : 40;
-
-  const getContentWidth = React.useMemo(() => {
-    let maxWidth = MAX_WIDTH;
-    let minWidth = MIN_WIDTH;
+  const { titleColor, iconColor, underlayColor } = getMenuItemColor({
+    theme,
+    disabled,
+  });
+  const { isV3 } = theme;
 
-    if (theme.isV3) {
-      minWidth = minWidth - 12;
-      if (leadingIcon || trailingIcon) {
-        maxWidth = maxWidth - (iconWidth + 24);
-      } else if (leadingIcon && trailingIcon) {
-        maxWidth = maxWidth - (2 * iconWidth + 24);
-      } else {
-        maxWidth = maxWidth - 12;
-      }
-    } else {
-      minWidth = minWidth - 16;
-      if (leadingIcon) {
-        maxWidth = maxWidth - (iconWidth + 48);
-      } else {
-        maxWidth = maxWidth - 16;
-      }
-    }
+  const containerPadding = isV3 ? 12 : 8;
 
-    return {
-      minWidth,
-      maxWidth,
-    };
-  }, [theme.isV3, leadingIcon, trailingIcon]);
+  const iconWidth = isV3 ? 24 : 40;
 
-  const { minWidth, maxWidth } = getContentWidth;
+  const minWidth = MIN_WIDTH - (isV3 ? 12 : 16);
 
-  const containerPadding = theme.isV3 ? 12 : 8;
+  const maxWidth = getContentMaxWidth({
+    isV3,
+    iconWidth,
+    leadingIcon,
+    trailingIcon,
+  });
 
   return (
     <TouchableRipple
@@ -186,18 +149,18 @@ const MenuItem = ({
       <View style={styles.row}>
         {leadingIcon ? (
           <View
-            style={[!theme.isV3 && styles.item, { width: iconWidth }]}
+            style={[!isV3 && styles.item, { width: iconWidth }]}
             pointerEvents="box-none"
           >
             <Icon source={leadingIcon} size={24} color={iconColor} />
           </View>
         ) : null}
         <View
           style={[
-            !theme.isV3 && styles.item,
+            !isV3 && styles.item,
             styles.content,
             { minWidth, maxWidth },
-            theme.isV3 &&
+            isV3 &&
               (leadingIcon
                 ? styles.md3LeadingIcon
                 : styles.md3WithoutLeadingIcon),
@@ -209,18 +172,14 @@ const MenuItem = ({
             variant="bodyLarge"
             selectable={false}
             numberOfLines={1}
-            style={[
-              !theme.isV3 && styles.title,
-              { color: titleColor },
-              titleStyle,
-            ]}
+            style={[!isV3 && styles.title, { color: titleColor }, titleStyle]}
           >
             {title}
           </Text>
         </View>
-        {theme.isV3 && trailingIcon ? (
+        {isV3 && trailingIcon ? (
           <View
-            style={[!theme.isV3 && styles.item, { width: iconWidth }]}
+            style={[!isV3 && styles.item, { width: iconWidth }]}
             pointerEvents="box-none"
           >
             <Icon source={trailingIcon} size={24} color={iconColor} />

diff --git a/src/components/Menu/utils.ts b/src/components/Menu/utils.ts
@@ -0,0 +1,89 @@
+import color from 'color';
+import type { Theme } from '../../types';
+import { white, black } from '../../styles/themes/v2/colors';
+import type { IconSource } from '../Icon';
+
+export const MIN_WIDTH = 112;
+export const MAX_WIDTH = 280;
+
+type ContentProps = {
+  isV3: boolean;
+  iconWidth: number;
+  leadingIcon?: IconSource;
+  trailingIcon?: IconSource;
+};
+
+type ColorProps = {
+  theme: Theme;
+  disabled?: boolean;
+};
+
+const getDisabledColor = (theme: Theme) => {
+  if (theme.isV3) {
+    return theme.colors.onSurfaceDisabled;
+  }
+
+  return color(theme.dark ? white : black)
+    .alpha(0.32)
+    .rgb()
+    .string();
+};
+
+const getTitleColor = ({ theme, disabled }: ColorProps) => {
+  if (disabled) {
+    return getDisabledColor(theme);
+  }
+
+  if (theme.isV3) {
+    return theme.colors.onSurface;
+  }
+
+  return color(theme.colors.text).alpha(0.87).rgb().string();
+};
+
+const getIconColor = ({ theme, disabled }: ColorProps) => {
+  if (disabled) {
+    return getDisabledColor(theme);
+  }
+
+  if (theme.isV3) {
+    return theme.colors.onSurfaceVariant;
+  }
+
+  return color(theme.colors.text).alpha(0.54).rgb().string();
+};
+
+export const getMenuItemColor = ({ theme, disabled }: ColorProps) => {
+  return {
+    titleColor: getTitleColor({ theme, disabled }),
+    iconColor: getIconColor({ theme, disabled }),
+    underlayColor: theme.isV3
+      ? color(theme.colors.primary).alpha(0.12).rgb().string()
+      : undefined,
+  };
+};
+
+export const getContentMaxWidth = ({
+  isV3,
+  iconWidth,
+  leadingIcon,
+  trailingIcon,
+}: ContentProps) => {
+  if (isV3) {
+    if (leadingIcon && trailingIcon) {
+      return MAX_WIDTH - (2 * iconWidth + 24);
+    }
+
+    if (leadingIcon || trailingIcon) {
+      return MAX_WIDTH - (iconWidth + 24);
+    }
+
+    return MAX_WIDTH - 12;
+  }
+
+  if (leadingIcon) {
+    return MAX_WIDTH - (iconWidth + 48);
+  }
+
+  return MAX_WIDTH - 16;
+};