react-native-acoustic-connect-beta 18.0.7 → 18.0.8

package/Examples/SampleUI/src/react-navigation/navigators/createMaterialBottomTabNavigator.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+
+import {
+  createNavigatorFactory,
+  DefaultNavigatorOptions,
+  ParamListBase,
+  TabActionHelpers,
+  TabNavigationState,
+  TabRouter,
+  TabRouterOptions,
+  useNavigationBuilder,
+} from '@react-navigation/native';
+
+import type {
+  MaterialBottomTabNavigationConfig,
+  MaterialBottomTabNavigationEventMap,
+  MaterialBottomTabNavigationOptions,
+} from '../types';
+import MaterialBottomTabView from '../views/MaterialBottomTabView';
+
+export type MaterialBottomTabNavigatorProps = DefaultNavigatorOptions<
+  ParamListBase,
+  TabNavigationState<ParamListBase>,
+  MaterialBottomTabNavigationOptions,
+  MaterialBottomTabNavigationEventMap
+> &
+  TabRouterOptions &
+  MaterialBottomTabNavigationConfig;
+
+function MaterialBottomTabNavigator({
+  id,
+  initialRouteName,
+  backBehavior,
+  children,
+  screenListeners,
+  screenOptions,
+  ...rest
+}: MaterialBottomTabNavigatorProps) {
+  const { state, descriptors, navigation, NavigationContent } =
+    useNavigationBuilder<
+      TabNavigationState<ParamListBase>,
+      TabRouterOptions,
+      TabActionHelpers<ParamListBase>,
+      MaterialBottomTabNavigationOptions,
+      MaterialBottomTabNavigationEventMap
+    >(TabRouter, {
+      id,
+      initialRouteName,
+      backBehavior,
+      children,
+      screenListeners,
+      screenOptions,
+    });
+
+  return (
+    <NavigationContent>
+      <MaterialBottomTabView
+        {...rest}
+        state={state}
+        navigation={navigation}
+        descriptors={descriptors}
+      />
+    </NavigationContent>
+  );
+}
+
+export default createNavigatorFactory<
+  TabNavigationState<ParamListBase>,
+  MaterialBottomTabNavigationOptions,
+  MaterialBottomTabNavigationEventMap,
+  typeof MaterialBottomTabNavigator
+>(MaterialBottomTabNavigator);

package/Examples/SampleUI/src/react-navigation/types.tsx

@@ -0,0 +1,126 @@
+import type {
+  Descriptor,
+  NavigationHelpers,
+  NavigationProp,
+  ParamListBase,
+  RouteProp,
+  TabActionHelpers,
+  TabNavigationState,
+} from '@react-navigation/native';
+
+import type BottomNavigation from '../components/BottomNavigation/BottomNavigation';
+
+export type MaterialBottomTabNavigationEventMap = {
+  /**
+   * Event which fires on tapping on the tab in the tab bar.
+   */
+  tabPress: { data: undefined; canPreventDefault: true };
+  /**
+   * Event which fires on long pressing on the tab in the tab bar.
+   */
+  tabLongPress: {};
+};
+
+export type MaterialBottomTabNavigationHelpers = NavigationHelpers<
+  ParamListBase,
+  MaterialBottomTabNavigationEventMap
+> &
+  TabActionHelpers<ParamListBase>;
+
+export type MaterialBottomTabNavigationProp<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = keyof ParamList,
+  NavigatorID extends string | undefined = undefined
+> = NavigationProp<
+  ParamList,
+  RouteName,
+  NavigatorID,
+  TabNavigationState<ParamList>,
+  MaterialBottomTabNavigationOptions,
+  MaterialBottomTabNavigationEventMap
+> &
+  TabActionHelpers<ParamList>;
+
+export type MaterialBottomTabScreenProps<
+  ParamList extends ParamListBase,
+  RouteName extends keyof ParamList = keyof ParamList,
+  NavigatorID extends string | undefined = undefined
+> = {
+  navigation: MaterialBottomTabNavigationProp<
+    ParamList,
+    RouteName,
+    NavigatorID
+  >;
+  route: RouteProp<ParamList, RouteName>;
+};
+
+export type MaterialBottomTabNavigationOptions = {
+  /**
+   * Title text for the screen.
+   */
+  title?: string;
+
+  /**
+   * @deprecated In v5.x works only with theme version 2.
+   * Color of the tab bar when this tab is active. Only used when `shifting` is `true`.
+   */
+  tabBarColor?: string;
+
+  /**
+   * Label text of the tab displayed in the navigation bar. When undefined, scene title is used.
+   */
+  tabBarLabel?: string;
+
+  /**
+   * String referring to an icon in the `MaterialCommunityIcons` set, or a
+   * function that given { focused: boolean, color: string } returns a React.Node to display in the navigation bar.
+   */
+  tabBarIcon?:
+    | string
+    | ((props: { focused: boolean; color: string }) => React.ReactNode);
+
+  /**
+   * Badge to show on the tab icon, can be `true` to show a dot, `string` or `number` to show text.
+   */
+  tabBarBadge?: boolean | number | string;
+
+  /**
+   * Accessibility label for the tab button. This is read by the screen reader when the user taps the tab.
+   */
+  tabBarAccessibilityLabel?: string;
+
+  /**
+   * ID to locate this tab button in tests.
+   */
+  tabBarButtonTestID?: string;
+};
+
+export type MaterialBottomTabDescriptor = Descriptor<
+  MaterialBottomTabNavigationOptions,
+  MaterialBottomTabNavigationProp<ParamListBase>,
+  RouteProp<ParamListBase>
+>;
+
+export type MaterialBottomTabDescriptorMap = Record<
+  string,
+  MaterialBottomTabDescriptor
+>;
+
+export type MaterialBottomTabNavigationConfig = Partial<
+  Omit<
+    React.ComponentProps<typeof BottomNavigation>,
+    | 'navigationState'
+    | 'onIndexChange'
+    | 'onTabPress'
+    | 'onTabLongPress'
+    | 'renderScene'
+    | 'renderLabel'
+    | 'renderIcon'
+    | 'getAccessibilityLabel'
+    | 'getBadge'
+    | 'getColor'
+    | 'getLabelText'
+    | 'getTestID'
+    | 'getLazy'
+  >
+>;

package/Examples/SampleUI/src/react-navigation/views/MaterialBottomTabView.tsx

@@ -0,0 +1,140 @@
+import * as React from 'react';
+import { I18nManager, Platform, StyleSheet } from 'react-native';
+
+import {
+  CommonActions,
+  Link,
+  ParamListBase,
+  Route,
+  TabNavigationState,
+  useLinkBuilder,
+} from '@react-navigation/native';
+
+import BottomNavigation from '../../components/BottomNavigation/BottomNavigation';
+import MaterialCommunityIcon from '../../components/MaterialCommunityIcon';
+import type {
+  MaterialBottomTabDescriptorMap,
+  MaterialBottomTabNavigationConfig,
+  MaterialBottomTabNavigationHelpers,
+} from '../types';
+
+type Props = MaterialBottomTabNavigationConfig & {
+  state: TabNavigationState<ParamListBase>;
+  navigation: MaterialBottomTabNavigationHelpers;
+  descriptors: MaterialBottomTabDescriptorMap;
+};
+export default function MaterialBottomTabView({
+  state,
+  navigation,
+  descriptors,
+  ...rest
+}: Props) {
+  const buildLink = useLinkBuilder();
+
+  return (
+    <BottomNavigation
+      {...rest}
+      onIndexChange={noop}
+      navigationState={state}
+      renderScene={({ route }) => descriptors[route.key].render()}
+      renderTouchable={
+        Platform.OS === 'web'
+          ? ({
+              onPress,
+              route,
+              accessibilityRole: _0,
+              borderless: _1,
+              centered: _2,
+              rippleColor: _3,
+              style,
+              ...rest
+            }) => {
+              return (
+                <Link
+                  {...rest}
+                  // @ts-expect-error: to could be undefined, but it doesn't affect functionality
+                  to={buildLink(route.name, route.params)}
+                  accessibilityRole="link"
+                  onPress={(e: any) => {
+                    if (
+                      !(e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) && // ignore clicks with modifier keys
+                      (e.button == null || e.button === 0) // ignore everything but left clicks
+                    ) {
+                      e.preventDefault();
+                      onPress?.(e);
+                    }
+                  }}
+                  style={[styles.touchable, style]}
+                />
+              );
+            }
+          : undefined
+      }
+      renderIcon={({ route, focused, color }) => {
+        const { options } = descriptors[route.key];
+
+        if (typeof options.tabBarIcon === 'string') {
+          return (
+            <MaterialCommunityIcon
+              direction={I18nManager.getConstants().isRTL ? 'rtl' : 'ltr'}
+              name={options.tabBarIcon}
+              color={color}
+              size={24}
+            />
+          );
+        }
+
+        if (typeof options.tabBarIcon === 'function') {
+          return options.tabBarIcon({ focused, color });
+        }
+
+        return null;
+      }}
+      getLabelText={({ route }) => {
+        const { options } = descriptors[route.key];
+
+        return options.tabBarLabel !== undefined
+          ? options.tabBarLabel
+          : options.title !== undefined
+          ? options.title
+          : (route as Route<string>).name;
+      }}
+      getColor={({ route }) => descriptors[route.key].options.tabBarColor}
+      getBadge={({ route }) => descriptors[route.key].options.tabBarBadge}
+      getAccessibilityLabel={({ route }) =>
+        descriptors[route.key].options.tabBarAccessibilityLabel
+      }
+      getTestID={({ route }) =>
+        descriptors[route.key].options.tabBarButtonTestID
+      }
+      onTabPress={({ route, preventDefault }) => {
+        const event = navigation.emit({
+          type: 'tabPress',
+          target: route.key,
+          canPreventDefault: true,
+        });
+
+        if (event.defaultPrevented) {
+          preventDefault();
+        } else {
+          navigation.dispatch({
+            ...CommonActions.navigate(route.name, route.params),
+            target: state.key,
+          });
+        }
+      }}
+      onTabLongPress={({ route }) =>
+        navigation.emit({ type: 'tabLongPress', target: route.key })
+      }
+    />
+  );
+}
+
+const styles = StyleSheet.create({
+  touchable: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+});
+
+function noop() {}

package/Examples/SampleUI/src/styles/__tests__/fonts.test.js

@@ -0,0 +1,290 @@
+import configureFonts, { fontConfig } from '../fonts';
+import { typescale } from '../themes/v3/tokens';
+
+const mockPlatform = (OS) => {
+  jest.resetModules();
+  jest.doMock('react-native/Libraries/Utilities/Platform', () => ({
+    OS,
+    select: (objs) => objs[OS],
+  }));
+};
+
+const customFont = {
+  custom: {
+    fontFamily: 'sans-serif',
+    fontWeight: 'bold',
+  },
+};
+
+const customFontV3 = {
+  displayLarge: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '400',
+    lineHeight: 64,
+    fontSize: 57,
+  },
+  displayMedium: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '400',
+    lineHeight: 52,
+    fontSize: 45,
+  },
+  displaySmall: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '400',
+    lineHeight: 44,
+    fontSize: 36,
+  },
+
+  headlineLarge: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '400',
+    lineHeight: 40,
+    fontSize: 32,
+  },
+  headlineMedium: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '400',
+    lineHeight: 36,
+    fontSize: 28,
+  },
+  headlineSmall: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '400',
+    lineHeight: 32,
+    fontSize: 24,
+  },
+
+  titleLarge: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '400',
+    lineHeight: 28,
+    fontSize: 22,
+  },
+  titleMedium: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '500',
+    lineHeight: 24,
+    fontSize: 16,
+  },
+  titleSmall: {
+    fontFamily: 'NotoSans',
+    fontWeight: '500',
+    letterSpacing: 0,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+
+  labelLarge: {
+    fontFamily: 'NotoSans',
+    fontWeight: '500',
+    letterSpacing: 0,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  labelMedium: {
+    fontFamily: 'NotoSans',
+    fontWeight: '500',
+    letterSpacing: 0,
+    lineHeight: 16,
+    fontSize: 12,
+  },
+  labelSmall: {
+    fontFamily: 'NotoSans',
+    fontWeight: '500',
+    letterSpacing: 0,
+    lineHeight: 16,
+    fontSize: 11,
+  },
+
+  bodyLarge: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '400',
+    lineHeight: 24,
+    fontSize: 16,
+  },
+  bodyMedium: {
+    fontFamily: 'NotoSans',
+    fontWeight: '400',
+    letterSpacing: 0,
+    lineHeight: 20,
+    fontSize: 14,
+  },
+  bodySmall: {
+    fontFamily: 'NotoSans',
+    fontWeight: '400',
+    letterSpacing: 0,
+    lineHeight: 16,
+    fontSize: 12,
+  },
+
+  default: {
+    fontFamily: 'NotoSans',
+    letterSpacing: 0,
+    fontWeight: '400',
+  },
+};
+
+describe('configureFonts', () => {
+  it('adds custom fonts to the iOS config', () => {
+    mockPlatform('ios');
+    expect(
+      configureFonts({
+        config: {
+          ios: {
+            ...fontConfig.ios,
+            customFont,
+          },
+        },
+        isV3: false,
+      })
+    ).toEqual({
+      ...fontConfig.ios,
+      customFont,
+    });
+  });
+
+  it('adds custom fonts to the Android config', () => {
+    mockPlatform('android');
+    expect(
+      configureFonts({
+        config: {
+          android: {
+            ...fontConfig.android,
+            customFont,
+          },
+        },
+        isV3: false,
+      })
+    ).toEqual({
+      ...fontConfig.android,
+      customFont,
+    });
+  });
+
+  it('adds custom fonts to the Web config', () => {
+    mockPlatform('web');
+    expect(
+      configureFonts({
+        config: {
+          web: {
+            ...fontConfig.web,
+            customFont,
+          },
+        },
+        isV3: false,
+      })
+    ).toEqual({
+      ...fontConfig.web,
+      customFont,
+    });
+  });
+
+  it('overrides properties passed in config for all variants', () => {
+    expect(
+      configureFonts({
+        config: {
+          fontFamily: 'NotoSans',
+          letterSpacing: 0,
+        },
+      })
+    ).toEqual(customFontV3);
+  });
+
+  it('overrides properties passed in config for several variants', () => {
+    expect(
+      configureFonts({
+        config: {
+          bodyLarge: {
+            fontFamily: 'NotoSans',
+            fontSize: 18,
+            fontStyle: 'italic',
+          },
+          headlineMedium: {
+            fontSize: 30,
+          },
+          bodySmall: {
+            fontStyle: 'italic',
+          },
+        },
+      })
+    ).toEqual({
+      ...typescale,
+      bodyLarge: {
+        fontFamily: 'NotoSans',
+        letterSpacing: 0.15,
+        fontWeight: '400',
+        fontStyle: 'italic',
+        lineHeight: 24,
+        fontSize: 18,
+      },
+      headlineMedium: {
+        fontFamily: 'System',
+        letterSpacing: 0,
+        fontWeight: '400',
+        lineHeight: 36,
+        fontSize: 30,
+      },
+      bodySmall: {
+        fontFamily: 'System',
+        fontWeight: '400',
+        fontStyle: 'italic',
+        letterSpacing: 0.4,
+        lineHeight: 16,
+        fontSize: 12,
+      },
+    });
+  });
+
+  it('adds custom variant to theme fonts', () => {
+    expect(
+      configureFonts({
+        config: {
+          customVariant: {
+            fontFamily: 'NotoSans',
+            letterSpacing: 0,
+            fontWeight: '400',
+            fontStyle: 'italic',
+            lineHeight: 64,
+            fontSize: 57,
+          },
+        },
+      })
+    ).toEqual({
+      ...typescale,
+      customVariant: {
+        fontFamily: 'NotoSans',
+        letterSpacing: 0,
+        fontWeight: '400',
+        fontStyle: 'italic',
+        lineHeight: 64,
+        fontSize: 57,
+      },
+    });
+  });
+
+  it('should be deterministic', () => {
+    // first call that should not mutate the original config
+    configureFonts({
+      config: {
+        labelMedium: {
+          color: 'coral',
+        },
+      },
+    });
+
+    // second call that should return the original config without modification
+    const fontsB = configureFonts({ config: {} });
+
+    expect(fontsB.labelMedium.color).toBeUndefined();
+  });
+});