fix: resolve circular dependencies (#4056)

lukewalczak · web-flow · commit 36ce39b9787f · 2023-09-18T21:48:22.000+02:00
diff --git a/src/components/Appbar/Appbar.tsx b/src/components/Appbar/Appbar.tsx
@@ -11,10 +11,7 @@ import {
 
 import color from 'color';
 
-import AppbarAction from './AppbarAction';
-import AppbarBackAction from './AppbarBackAction';
 import AppbarContent from './AppbarContent';
-import AppbarHeader from './AppbarHeader';
 import {
   AppbarModes,
   DEFAULT_APPBAR_HEIGHT,
@@ -287,14 +284,14 @@ const Appbar = ({
               children,
               isDark,
               isV3,
-              renderOnly: [AppbarBackAction],
+              renderOnly: ['Appbar.BackAction'],
               mode,
             })}
             {renderAppbarContent({
               children: filterAppbarActions(true),
               isDark,
               isV3,
-              renderOnly: [AppbarAction],
+              renderOnly: ['Appbar.Action'],
               mode,
             })}
             {/* Right side of row container, can contain other AppbarAction if they are not leading icons */}
@@ -304,10 +301,10 @@ const Appbar = ({
                 isDark,
                 isV3,
                 renderExcept: [
-                  Appbar,
-                  AppbarBackAction,
-                  AppbarContent,
-                  AppbarHeader,
+                  'Appbar',
+                  'Appbar.BackAction',
+                  'Appbar.Content',
+                  'Appbar.Header',
                 ],
                 mode,
               })}
@@ -318,7 +315,7 @@ const Appbar = ({
             children,
             isDark,
             isV3,
-            renderOnly: [AppbarContent],
+            renderOnly: ['Appbar.Content'],
             mode,
           })}
         </View>
diff --git a/src/components/Appbar/utils.ts b/src/components/Appbar/utils.ts
@@ -2,13 +2,9 @@ import React from 'react';
 import type { ColorValue, StyleProp, ViewStyle } from 'react-native';
 import { StyleSheet, Animated } from 'react-native';
 
-import AppbarAction from './AppbarAction';
-import AppbarBackAction from './AppbarBackAction';
-import AppbarContent from './AppbarContent';
 import overlay from '../../styles/overlay';
 import { black, white } from '../../styles/themes/v2/colors';
 import type { InternalTheme, ThemeProp } from '../../types';
-import Tooltip from '../Tooltip/Tooltip';
 
 export type AppbarModes = 'small' | 'medium' | 'large' | 'center-aligned';
 
@@ -93,8 +89,9 @@ type BaseProps = {
 type RenderAppbarContentProps = BaseProps & {
   children: React.ReactNode;
   shouldCenterContent?: boolean;
-  renderOnly?: (React.ComponentType<any> | false)[];
-  renderExcept?: React.ComponentType<any>[];
+  isV3: boolean;
+  renderOnly?: (string | boolean)[];
+  renderExcept?: string[];
   mode?: AppbarModes;
   theme?: ThemeProp;
 };
@@ -126,50 +123,56 @@ export const renderAppbarContent = ({
   mode = 'small',
   theme,
 }: RenderAppbarContentProps) => {
-  return (
-    React.Children.toArray(children as React.ReactNode | React.ReactNode[])
-      .filter((child) => child != null && typeof child !== 'boolean')
-      .filter((child) =>
-        // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
-        renderExcept ? !renderExcept.includes(child.type) : child
-      )
+  return React.Children.toArray(children as React.ReactNode | React.ReactNode[])
+    .filter((child) => child != null && typeof child !== 'boolean')
+    .filter((child) =>
+      // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
+      renderExcept ? !renderExcept.includes(child.type.displayName) : child
+    )
+    .filter((child) =>
+      // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
+      renderOnly ? renderOnly.includes(child.type.displayName) : child
+    )
+    .map((child, i) => {
+      if (
+        !React.isValidElement(child) ||
+        ![
+          'Appbar.Content',
+          'Appbar.Action',
+          'Appbar.BackAction',
+          'Tooltip',
+        ].includes(
+          // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
+          child.type.displayName
+        )
+      ) {
+        return child;
+      }
+
+      const props: {
+        color?: string;
+        style?: StyleProp<ViewStyle>;
+        mode?: AppbarModes;
+        theme?: ThemeProp;
+      } = {
+        theme,
+        color: getAppbarColor({ color: child.props.color, isDark, isV3 }),
+      };
+
       // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
-      .filter((child) => (renderOnly ? renderOnly.includes(child.type) : child))
-      .map((child, i) => {
-        if (
-          !React.isValidElement(child) ||
-          ![AppbarContent, AppbarAction, AppbarBackAction, Tooltip].includes(
-            // @ts-expect-error: TypeScript complains about the type of type but it doesn't matter
-            child.type
-          )
-        ) {
-          return child;
-        }
-
-        const props: {
-          color?: string;
-          style?: StyleProp<ViewStyle>;
-          mode?: AppbarModes;
-          theme?: ThemeProp;
-        } = {
-          theme,
-          color: getAppbarColor({ color: child.props.color, isDark, isV3 }),
-        };
-
-        if (child.type === AppbarContent) {
-          props.mode = mode;
-          props.style = [
-            isV3
-              ? i === 0 && !shouldCenterContent && styles.v3Spacing
-              : i !== 0 && styles.v2Spacing,
-            shouldCenterContent && styles.centerAlignedContent,
-            child.props.style,
-          ];
-          props.color;
-        }
-        return React.cloneElement(child, props);
-      })
-  );
+      if (child.type.displayName === 'Appbar.Content') {
+        props.mode = mode;
+        props.style = [
+          isV3
+            ? i === 0 && !shouldCenterContent && styles.v3Spacing
+            : i !== 0 && styles.v2Spacing,
+          shouldCenterContent && styles.centerAlignedContent,
+          child.props.style,
+        ];
+        props.color;
+      }
+      return React.cloneElement(child, props);
+    });
 };
 
 const styles = StyleSheet.create({
diff --git a/src/components/TextInput/types.tsx b/src/components/TextInput/types.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import type {
   TextInput as NativeTextInput,
   Animated,
@@ -6,13 +7,44 @@ import type {
   ColorValue,
   StyleProp,
   ViewProps,
+  ViewStyle,
 } from 'react-native';
 
 import type { $Omit, InternalTheme, ThemeProp } from './../../types';
-import type { Props as TextInputProps } from './TextInput';
 
 export type TextInputLabelProp = string | React.ReactElement;
 
+type TextInputProps = React.ComponentPropsWithRef<typeof NativeTextInput> & {
+  mode?: 'flat' | 'outlined';
+  left?: React.ReactNode;
+  right?: React.ReactNode;
+  disabled?: boolean;
+  label?: TextInputLabelProp;
+  placeholder?: string;
+  error?: boolean;
+  onChangeText?: Function;
+  selectionColor?: string;
+  cursorColor?: string;
+  underlineColor?: string;
+  activeUnderlineColor?: string;
+  outlineColor?: string;
+  activeOutlineColor?: string;
+  textColor?: string;
+  dense?: boolean;
+  multiline?: boolean;
+  numberOfLines?: number;
+  onFocus?: (args: any) => void;
+  onBlur?: (args: any) => void;
+  render?: (props: RenderProps) => React.ReactNode;
+  value?: string;
+  style?: StyleProp<TextStyle>;
+  theme?: ThemeProp;
+  testID?: string;
+  contentStyle?: StyleProp<TextStyle>;
+  outlineStyle?: StyleProp<ViewStyle>;
+  underlineStyle?: StyleProp<ViewStyle>;
+};
+
 export type RenderProps = {
   ref: (a?: NativeTextInput | null) => void;
   onChangeText?: (a: string) => void;
diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -212,6 +212,8 @@ const Tooltip = ({
   );
 };
 
+Tooltip.displayName = 'Tooltip';
+
 const styles = StyleSheet.create({
   tooltip: {
     alignSelf: 'flex-start',
diff --git a/src/components/__tests__/Appbar/Appbar.test.tsx b/src/components/__tests__/Appbar/Appbar.test.tsx
@@ -9,10 +9,6 @@ import { getTheme } from '../../../core/theming';
 import overlay from '../../../styles/overlay';
 import { tokens } from '../../../styles/themes/v3/tokens';
 import Appbar from '../../Appbar';
-import AppbarAction from '../../Appbar/AppbarAction';
-import AppbarBackAction from '../../Appbar/AppbarBackAction';
-import AppbarContent from '../../Appbar/AppbarContent';
-import AppbarHeader from '../../Appbar/AppbarHeader';
 import {
   getAppbarBackgroundColor,
   modeTextVariant,
@@ -86,7 +82,12 @@ describe('renderAppbarContent', () => {
         </Menu>,
       ],
       isDark: false,
-      renderExcept: [Appbar, AppbarHeader, AppbarBackAction, AppbarContent],
+      renderExcept: [
+        'Appbar',
+        'Appbar.Header',
+        'Appbar.BackAction',
+        'Appbar.Content',
+      ],
     });
 
     expect(result).toHaveLength(3);
@@ -97,7 +98,7 @@ describe('renderAppbarContent', () => {
       isV3: false,
       children,
       isDark: false,
-      renderOnly: [AppbarAction],
+      renderOnly: ['Appbar.Action'],
     });
 
     expect(result).toHaveLength(2);
@@ -108,7 +109,7 @@ describe('renderAppbarContent', () => {
       isV3: false,
       children,
       isDark: false,
-      renderOnly: [AppbarContent],
+      renderOnly: ['Appbar.Content'],
       mode: 'large',
     });
 
@@ -121,7 +122,7 @@ describe('renderAppbarContent', () => {
         children,
         isDark: false,
         isV3,
-        renderOnly: [AppbarContent],
+        renderOnly: ['Appbar.Content'],
         mode: 'center-aligned',
         shouldCenterContent: true,
       });
@@ -146,7 +147,7 @@ describe('renderAppbarContent', () => {
         children,
         isDark: false,
         isV3,
-        renderOnly: [AppbarContent],
+        renderOnly: ['Appbar.Content'],
         mode: 'center-aligned',
         shouldCenterContent: !isV3 && Platform.OS === 'ios',
       });
@@ -167,7 +168,7 @@ describe('renderAppbarContent', () => {
         children,
         isDark: false,
         isV3,
-        renderOnly: [AppbarContent],
+        renderOnly: ['Appbar.Content'],
         mode: 'center-aligned',
         shouldCenterContent: !isV3 && Platform.OS === 'ios',
       });
@@ -187,7 +188,10 @@ describe('renderAppbarContent', () => {
         children,
         isDark: false,
         isV3,
-        renderOnly: [AppbarContent, withAppbarBackAction && AppbarBackAction],
+        renderOnly: [
+          'Appbar.Content',
+          withAppbarBackAction && 'Appbar.BackAction',
+        ],
       });
 
     const v2Spacing = {
diff --git a/src/react-navigation/types.tsx b/src/react-navigation/types.tsx
@@ -7,7 +7,8 @@ import type {
   TabActionHelpers,
   TabNavigationState,
 } from '@react-navigation/native';
-import type { BottomNavigation } from 'react-native-paper';
+
+import type BottomNavigation from '../components/BottomNavigation/BottomNavigation';
 
 export type MaterialBottomTabNavigationEventMap = {
   /**
