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

package/Examples/SampleUI/src/components/BottomNavigation/BottomNavigationRouteScreen.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { Animated, Platform, View, ViewProps } from 'react-native';
+
+interface Props extends ViewProps {
+  visibility?: 0 | 1 | Animated.AnimatedInterpolation<number>;
+  index: number;
+}
+
+class BottomNavigationRouteScreen extends React.Component<Props> {
+  render(): JSX.Element {
+    const { style, index, children, visibility, ...rest } = this.props;
+
+    // On Web, the unfocused tab screens can still be clicked since they are transparent, but still there
+    // Hiding them with `display: none` makes sure that they won't receive clicks
+    // We only set it on Web since on native, react-native-pager-view's breaks due to layout changing
+    const display =
+      Platform.OS === 'web' ? (visibility === 0 ? 'none' : 'flex') : undefined;
+
+    return (
+      <View
+        testID={`RouteScreen: ${index}`}
+        style={[style, { display }]}
+        {...rest}
+      >
+        {children}
+      </View>
+    );
+  }
+}
+
+export default Animated.createAnimatedComponent(BottomNavigationRouteScreen);

package/Examples/SampleUI/src/components/BottomNavigation/utils.ts

@@ -0,0 +1,70 @@
+import color from 'color';
+import type { InternalTheme } from 'src/types';
+
+import type { black, white } from '../../styles/themes/v2/colors';
+
+type BaseProps = {
+  defaultColor: typeof black | typeof white;
+  theme: InternalTheme;
+};
+
+export const getActiveTintColor = ({
+  activeColor,
+  defaultColor,
+  theme,
+}: BaseProps & {
+  activeColor: string | undefined;
+}) => {
+  if (typeof activeColor === 'string') {
+    return activeColor;
+  }
+
+  if (theme.isV3) {
+    return theme.colors.onSecondaryContainer;
+  }
+
+  return defaultColor;
+};
+
+export const getInactiveTintColor = ({
+  inactiveColor,
+  defaultColor,
+  theme,
+}: BaseProps & {
+  inactiveColor: string | undefined;
+}) => {
+  if (typeof inactiveColor === 'string') {
+    return inactiveColor;
+  }
+
+  if (theme.isV3) {
+    return theme.colors.onSurfaceVariant;
+  }
+
+  return color(defaultColor).alpha(0.5).rgb().string();
+};
+
+export const getLabelColor = ({
+  tintColor,
+  hasColor,
+  focused,
+  defaultColor,
+  theme,
+}: BaseProps & {
+  tintColor: string;
+  hasColor: boolean;
+  focused: boolean;
+}) => {
+  if (hasColor) {
+    return tintColor;
+  }
+
+  if (theme.isV3) {
+    if (focused) {
+      return theme.colors.onSurface;
+    }
+    return theme.colors.onSurfaceVariant;
+  }
+
+  return defaultColor;
+};

package/Examples/SampleUI/src/components/Button/Button.tsx

@@ -0,0 +1,503 @@
+import * as React from 'react';
+import {
+  AccessibilityRole,
+  Animated,
+  ColorValue,
+  GestureResponderEvent,
+  Platform,
+  PressableAndroidRippleConfig,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+import color from 'color';
+
+import {
+  ButtonMode,
+  getButtonColors,
+  getButtonTouchableRippleStyle,
+} from './utils';
+import { useInternalTheme } from '../../core/theming';
+import type { $Omit, ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
+import hasTouchHandler from '../../utils/hasTouchHandler';
+import { splitStyles } from '../../utils/splitStyles';
+import ActivityIndicator from '../ActivityIndicator';
+import Icon, { IconSource } from '../Icon';
+import Surface from '../Surface';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+import Text from '../Typography/Text';
+
+export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
+  /**
+   * Mode of the button. You can change the mode to adjust the styling to give it desired emphasis.
+   * - `text` - flat button without background or outline, used for the lowest priority actions, especially when presenting multiple options.
+   * - `outlined` - button with an outline without background, typically used for important, but not primary action – represents medium emphasis.
+   * - `contained` - button with a background color, used for important action, have the most visual impact and high emphasis.
+   * - `elevated` - button with a background color and elevation, used when absolutely necessary e.g. button requires visual separation from a patterned background. @supported Available in v5.x with theme version 3
+   * - `contained-tonal` - button with a secondary background color, an alternative middle ground between contained and outlined buttons. @supported Available in v5.x with theme version 3
+   */
+  mode?: 'text' | 'outlined' | 'contained' | 'elevated' | 'contained-tonal';
+  /**
+   * Whether the color is a dark color. A dark button will render light text and vice-versa. Only applicable for:
+   *  * `contained` mode for theme version 2
+   *  * `contained`, `contained-tonal` and `elevated` modes for theme version 3.
+   */
+  dark?: boolean;
+  /**
+   * Use a compact look, useful for `text` buttons in a row.
+   */
+  compact?: boolean;
+  /**
+   * @deprecated Deprecated in v5.x - use `buttonColor` or `textColor` instead.
+   * Custom text color for flat button, or background color for contained button.
+   */
+  color?: string;
+  /**
+   * Custom button's background color.
+   */
+  buttonColor?: string;
+  /**
+   * Custom button's text color.
+   */
+  textColor?: string;
+  /**
+   * Color of the ripple effect.
+   */
+  rippleColor?: ColorValue;
+  /**
+   * Whether to show a loading indicator.
+   */
+  loading?: boolean;
+  /**
+   * Icon to display for the `Button`.
+   */
+  icon?: IconSource;
+  /**
+   * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
+   */
+  disabled?: boolean;
+  /**
+   * Label text of the button.
+   */
+  children: React.ReactNode;
+  /**
+   * Make the label text uppercased. Note that this won't work if you pass React elements as children.
+   */
+  uppercase?: boolean;
+  /**
+   * Type of background drawabale to display the feedback (Android).
+   * https://reactnative.dev/docs/pressable#rippleconfig
+   */
+  background?: PressableAndroidRippleConfig;
+  /**
+   * Accessibility label for the button. This is read by the screen reader when the user taps the button.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Accessibility hint for the button. This is read by the screen reader when the user taps the button.
+   */
+  accessibilityHint?: string;
+  /**
+   * Accessibility role for the button. The "button" role is set by default.
+   */
+  accessibilityRole?: AccessibilityRole;
+  /**
+   * Function to execute on press.
+   */
+  onPress?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute as soon as the touchable element is pressed and invoked even before onPress.
+   */
+  onPressIn?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute as soon as the touch is released even before onPress.
+   */
+  onPressOut?: (e: GestureResponderEvent) => void;
+  /**
+   * Function to execute on long press.
+   */
+  onLongPress?: (e: GestureResponderEvent) => void;
+  /**
+   * The number of milliseconds a user must touch the element before executing `onLongPress`.
+   */
+  delayLongPress?: number;
+  /**
+   * Style of button's inner content.
+   * Use this prop to apply custom height and width, to set a custom padding or to set the icon on the right with `flexDirection: 'row-reverse'`.
+   */
+  contentStyle?: StyleProp<ViewStyle>;
+  /**
+   * Specifies the largest possible scale a text font can reach.
+   */
+  maxFontSizeMultiplier?: number;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  /**
+   * Style for the button text.
+   */
+  labelStyle?: StyleProp<TextStyle>;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+  /**
+   * Reference for the touchable
+   */
+  touchableRef?: React.RefObject<View>;
+  /**
+   * testID to be used on tests.
+   */
+  testID?: string;
+};
+
+/**
+ * A button is component that the user can press to trigger an action.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Button } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Button icon="camera" mode="contained" onPress={() => console.log('Pressed')}>
+ *     Press me
+ *   </Button>
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+const Button = (
+  {
+    disabled,
+    compact,
+    mode = 'text',
+    dark,
+    loading,
+    icon,
+    buttonColor: customButtonColor,
+    textColor: customTextColor,
+    rippleColor: customRippleColor,
+    children,
+    accessibilityLabel,
+    accessibilityHint,
+    accessibilityRole = 'button',
+    onPress,
+    onPressIn,
+    onPressOut,
+    onLongPress,
+    delayLongPress,
+    style,
+    theme: themeOverrides,
+    uppercase: uppercaseProp,
+    contentStyle,
+    labelStyle,
+    testID = 'button',
+    accessible,
+    background,
+    maxFontSizeMultiplier,
+    touchableRef,
+    ...rest
+  }: Props,
+  ref: React.ForwardedRef<View>
+) => {
+  const theme = useInternalTheme(themeOverrides);
+  const isMode = React.useCallback(
+    (modeToCompare: ButtonMode) => {
+      return mode === modeToCompare;
+    },
+    [mode]
+  );
+  const { roundness, isV3, animation } = theme;
+  const uppercase = uppercaseProp ?? !theme.isV3;
+
+  const hasPassedTouchHandler = hasTouchHandler({
+    onPress,
+    onPressIn,
+    onPressOut,
+    onLongPress,
+  });
+
+  const isElevationEntitled =
+    !disabled && (isV3 ? isMode('elevated') : isMode('contained'));
+  const initialElevation = isV3 ? 1 : 2;
+  const activeElevation = isV3 ? 2 : 8;
+
+  const { current: elevation } = React.useRef<Animated.Value>(
+    new Animated.Value(isElevationEntitled ? initialElevation : 0)
+  );
+
+  React.useEffect(() => {
+    // Workaround not to call setValue on Animated.Value, because it breaks styles.
+    // https://github.com/callstack/react-native-paper/issues/4559
+    Animated.timing(elevation, {
+      toValue: isElevationEntitled ? initialElevation : 0,
+      duration: 0,
+      useNativeDriver: true,
+    });
+  }, [isElevationEntitled, elevation, initialElevation]);
+
+  const handlePressIn = (e: GestureResponderEvent) => {
+    onPressIn?.(e);
+    if (isV3 ? isMode('elevated') : isMode('contained')) {
+      const { scale } = animation;
+      Animated.timing(elevation, {
+        toValue: activeElevation,
+        duration: 200 * scale,
+        useNativeDriver:
+          Platform.OS === 'web' ||
+          Platform.constants.reactNativeVersion.minor <= 72,
+      }).start();
+    }
+  };
+
+  const handlePressOut = (e: GestureResponderEvent) => {
+    onPressOut?.(e);
+    if (isV3 ? isMode('elevated') : isMode('contained')) {
+      const { scale } = animation;
+      Animated.timing(elevation, {
+        toValue: initialElevation,
+        duration: 150 * scale,
+        useNativeDriver:
+          Platform.OS === 'web' ||
+          Platform.constants.reactNativeVersion.minor <= 72,
+      }).start();
+    }
+  };
+
+  const flattenedStyles = (StyleSheet.flatten(style) || {}) as ViewStyle;
+  const [, borderRadiusStyles] = splitStyles(
+    flattenedStyles,
+    (style) => style.startsWith('border') && style.endsWith('Radius')
+  );
+
+  const borderRadius = (isV3 ? 5 : 1) * roundness;
+  const iconSize = isV3 ? 18 : 16;
+
+  const { backgroundColor, borderColor, textColor, borderWidth } =
+    getButtonColors({
+      customButtonColor,
+      customTextColor,
+      theme,
+      mode,
+      disabled,
+      dark,
+    });
+
+  const rippleColor =
+    customRippleColor || color(textColor).alpha(0.12).rgb().string();
+
+  const touchableStyle = {
+    ...borderRadiusStyles,
+    borderRadius: borderRadiusStyles.borderRadius ?? borderRadius,
+  };
+
+  const buttonStyle = {
+    backgroundColor,
+    borderColor,
+    borderWidth,
+    ...touchableStyle,
+  };
+
+  const { color: customLabelColor, fontSize: customLabelSize } =
+    StyleSheet.flatten(labelStyle) || {};
+
+  const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
+
+  const textStyle = {
+    color: textColor,
+    ...font,
+  };
+
+  const iconStyle =
+    StyleSheet.flatten(contentStyle)?.flexDirection === 'row-reverse'
+      ? [
+          styles.iconReverse,
+          isV3 && styles[`md3IconReverse${compact ? 'Compact' : ''}`],
+          isV3 &&
+            isMode('text') &&
+            styles[`md3IconReverseTextMode${compact ? 'Compact' : ''}`],
+        ]
+      : [
+          styles.icon,
+          isV3 && styles[`md3Icon${compact ? 'Compact' : ''}`],
+          isV3 &&
+            isMode('text') &&
+            styles[`md3IconTextMode${compact ? 'Compact' : ''}`],
+        ];
+
+  return (
+    <Surface
+      {...rest}
+      ref={ref}
+      testID={`${testID}-container`}
+      style={
+        [
+          styles.button,
+          compact && styles.compact,
+          buttonStyle,
+          style,
+          !isV3 && !disabled && { elevation },
+        ] as Animated.WithAnimatedValue<StyleProp<ViewStyle>>
+      }
+      {...(isV3 && { elevation: elevation })}
+    >
+      <TouchableRipple
+        borderless
+        background={background}
+        onPress={onPress}
+        onLongPress={onLongPress}
+        onPressIn={hasPassedTouchHandler ? handlePressIn : undefined}
+        onPressOut={hasPassedTouchHandler ? handlePressOut : undefined}
+        delayLongPress={delayLongPress}
+        accessibilityLabel={accessibilityLabel}
+        accessibilityHint={accessibilityHint}
+        accessibilityRole={accessibilityRole}
+        accessibilityState={{ disabled }}
+        accessible={accessible}
+        disabled={disabled}
+        rippleColor={rippleColor}
+        style={getButtonTouchableRippleStyle(touchableStyle, borderWidth)}
+        testID={testID}
+        theme={theme}
+        ref={touchableRef}
+      >
+        <View style={[styles.content, contentStyle]}>
+          {icon && loading !== true ? (
+            <View style={iconStyle} testID={`${testID}-icon-container`}>
+              <Icon
+                source={icon}
+                size={customLabelSize ?? iconSize}
+                color={
+                  typeof customLabelColor === 'string'
+                    ? customLabelColor
+                    : textColor
+                }
+              />
+            </View>
+          ) : null}
+          {loading ? (
+            <ActivityIndicator
+              size={customLabelSize ?? iconSize}
+              color={
+                typeof customLabelColor === 'string'
+                  ? customLabelColor
+                  : textColor
+              }
+              style={iconStyle}
+            />
+          ) : null}
+          <Text
+            variant="labelLarge"
+            selectable={false}
+            numberOfLines={1}
+            testID={`${testID}-text`}
+            style={[
+              styles.label,
+              !isV3 && styles.md2Label,
+              isV3 &&
+                (isMode('text')
+                  ? icon || loading
+                    ? styles.md3LabelTextAddons
+                    : styles.md3LabelText
+                  : styles.md3Label),
+              compact && styles.compactLabel,
+              uppercase && styles.uppercaseLabel,
+              textStyle,
+              labelStyle,
+            ]}
+            maxFontSizeMultiplier={maxFontSizeMultiplier}
+          >
+            {children}
+          </Text>
+        </View>
+      </TouchableRipple>
+    </Surface>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    minWidth: 64,
+    borderStyle: 'solid',
+  },
+  compact: {
+    minWidth: 'auto',
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  icon: {
+    marginLeft: 12,
+    marginRight: -4,
+  },
+  iconReverse: {
+    marginRight: 12,
+    marginLeft: -4,
+  },
+  /* eslint-disable react-native/no-unused-styles */
+  md3Icon: {
+    marginLeft: 16,
+    marginRight: -16,
+  },
+  md3IconCompact: {
+    marginLeft: 8,
+    marginRight: 0,
+  },
+  md3IconReverse: {
+    marginLeft: -16,
+    marginRight: 16,
+  },
+  md3IconReverseCompact: {
+    marginLeft: 0,
+    marginRight: 8,
+  },
+  md3IconTextMode: {
+    marginLeft: 12,
+    marginRight: -8,
+  },
+  md3IconTextModeCompact: {
+    marginLeft: 6,
+    marginRight: 0,
+  },
+  md3IconReverseTextMode: {
+    marginLeft: -8,
+    marginRight: 12,
+  },
+  md3IconReverseTextModeCompact: {
+    marginLeft: 0,
+    marginRight: 6,
+  },
+  /* eslint-enable react-native/no-unused-styles */
+  label: {
+    textAlign: 'center',
+    marginVertical: 9,
+    marginHorizontal: 16,
+  },
+  md2Label: {
+    letterSpacing: 1,
+  },
+  compactLabel: {
+    marginHorizontal: 8,
+  },
+  uppercaseLabel: {
+    textTransform: 'uppercase',
+  },
+  md3Label: {
+    marginVertical: 10,
+    marginHorizontal: 24,
+  },
+  md3LabelText: {
+    marginHorizontal: 12,
+  },
+  md3LabelTextAddons: {
+    marginHorizontal: 16,
+  },
+});
+
+export default forwardRef(Button);