react-native-acoustic-connect-beta 19.0.25 → 19.0.27

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

@@ -1,272 +0,0 @@
-import { StyleSheet, type ViewStyle } from 'react-native';
-
-import color from 'color';
-
-import { black, white } from '../../styles/themes/v2/colors';
-import type { InternalTheme } from '../../types';
-import { splitStyles } from '../../utils/splitStyles';
-
-export type ButtonMode =
-  | 'text'
-  | 'outlined'
-  | 'contained'
-  | 'elevated'
-  | 'contained-tonal';
-
-type BaseProps = {
-  isMode: (mode: ButtonMode) => boolean;
-  theme: InternalTheme;
-  disabled?: boolean;
-};
-
-const isDark = ({
-  dark,
-  backgroundColor,
-}: {
-  dark?: boolean;
-  backgroundColor?: string;
-}) => {
-  if (typeof dark === 'boolean') {
-    return dark;
-  }
-
-  if (backgroundColor === 'transparent') {
-    return false;
-  }
-
-  if (backgroundColor !== 'transparent') {
-    return !color(backgroundColor).isLight();
-  }
-
-  return false;
-};
-
-const getButtonBackgroundColor = ({
-  isMode,
-  theme,
-  disabled,
-  customButtonColor,
-}: BaseProps & {
-  customButtonColor?: string;
-}) => {
-  if (customButtonColor && !disabled) {
-    return customButtonColor;
-  }
-
-  if (theme.isV3) {
-    if (disabled) {
-      if (isMode('outlined') || isMode('text')) {
-        return 'transparent';
-      }
-
-      return theme.colors.surfaceDisabled;
-    }
-
-    if (isMode('elevated')) {
-      return theme.colors.elevation.level1;
-    }
-
-    if (isMode('contained')) {
-      return theme.colors.primary;
-    }
-
-    if (isMode('contained-tonal')) {
-      return theme.colors.secondaryContainer;
-    }
-  }
-
-  if (isMode('contained')) {
-    if (disabled) {
-      return color(theme.dark ? white : black)
-        .alpha(0.12)
-        .rgb()
-        .string();
-    }
-
-    return theme.colors.primary;
-  }
-
-  return 'transparent';
-};
-
-const getButtonTextColor = ({
-  isMode,
-  theme,
-  disabled,
-  customTextColor,
-  backgroundColor,
-  dark,
-}: BaseProps & {
-  customTextColor?: string;
-  backgroundColor: string;
-  dark?: boolean;
-}) => {
-  if (customTextColor && !disabled) {
-    return customTextColor;
-  }
-
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    if (typeof dark === 'boolean') {
-      if (
-        isMode('contained') ||
-        isMode('contained-tonal') ||
-        isMode('elevated')
-      ) {
-        return isDark({ dark, backgroundColor }) ? white : black;
-      }
-    }
-
-    if (isMode('outlined') || isMode('text') || isMode('elevated')) {
-      return theme.colors.primary;
-    }
-
-    if (isMode('contained')) {
-      return theme.colors.onPrimary;
-    }
-
-    if (isMode('contained-tonal')) {
-      return theme.colors.onSecondaryContainer;
-    }
-  }
-
-  if (disabled) {
-    return color(theme.dark ? white : black)
-      .alpha(0.32)
-      .rgb()
-      .string();
-  }
-
-  if (isMode('contained')) {
-    return isDark({ dark, backgroundColor }) ? white : black;
-  }
-
-  return theme.colors.primary;
-};
-
-const getButtonBorderColor = ({ isMode, disabled, theme }: BaseProps) => {
-  if (theme.isV3) {
-    if (disabled && isMode('outlined')) {
-      return theme.colors.surfaceDisabled;
-    }
-
-    if (isMode('outlined')) {
-      return theme.colors.outline;
-    }
-  }
-
-  if (isMode('outlined')) {
-    return color(theme.dark ? white : black)
-      .alpha(0.29)
-      .rgb()
-      .string();
-  }
-
-  return 'transparent';
-};
-
-const getButtonBorderWidth = ({
-  isMode,
-  theme,
-}: Omit<BaseProps, 'disabled'>) => {
-  if (theme.isV3) {
-    if (isMode('outlined')) {
-      return 1;
-    }
-  }
-
-  if (isMode('outlined')) {
-    return StyleSheet.hairlineWidth;
-  }
-
-  return 0;
-};
-
-export const getButtonColors = ({
-  theme,
-  mode,
-  customButtonColor,
-  customTextColor,
-  disabled,
-  dark,
-}: {
-  theme: InternalTheme;
-  mode: ButtonMode;
-  customButtonColor?: string;
-  customTextColor?: string;
-  disabled?: boolean;
-  dark?: boolean;
-}) => {
-  const isMode = (modeToCompare: ButtonMode) => {
-    return mode === modeToCompare;
-  };
-
-  const backgroundColor = getButtonBackgroundColor({
-    isMode,
-    theme,
-    disabled,
-    customButtonColor,
-  });
-
-  const textColor = getButtonTextColor({
-    isMode,
-    theme,
-    disabled,
-    customTextColor,
-    backgroundColor,
-    dark,
-  });
-
-  const borderColor = getButtonBorderColor({ isMode, theme, disabled });
-
-  const borderWidth = getButtonBorderWidth({ isMode, theme });
-
-  return {
-    backgroundColor,
-    borderColor,
-    textColor,
-    borderWidth,
-  };
-};
-
-type ViewStyleBorderRadiusStyles = Partial<
-  Pick<
-    ViewStyle,
-    | 'borderBottomEndRadius'
-    | 'borderBottomLeftRadius'
-    | 'borderBottomRightRadius'
-    | 'borderBottomStartRadius'
-    | 'borderTopEndRadius'
-    | 'borderTopLeftRadius'
-    | 'borderTopRightRadius'
-    | 'borderTopStartRadius'
-    | 'borderRadius'
-  >
->;
-export const getButtonTouchableRippleStyle = (
-  style?: ViewStyle,
-  borderWidth: number = 0
-): ViewStyleBorderRadiusStyles => {
-  if (!style) return {};
-  const touchableRippleStyle: ViewStyleBorderRadiusStyles = {};
-
-  const [, borderRadiusStyles] = splitStyles(
-    style,
-    (style) => style.startsWith('border') && style.endsWith('Radius')
-  );
-
-  (
-    Object.keys(borderRadiusStyles) as Array<keyof ViewStyleBorderRadiusStyles>
-  ).forEach((key) => {
-    const value = style[key as keyof ViewStyleBorderRadiusStyles];
-    if (typeof value === 'number') {
-      // Only subtract borderWidth if value is greater than 0
-      const radius = value > 0 ? value - borderWidth : 0;
-      touchableRippleStyle[key as keyof ViewStyleBorderRadiusStyles] = radius;
-    }
-  });
-  return touchableRippleStyle;
-};

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

@@ -1,373 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  GestureResponderEvent,
-  StyleProp,
-  StyleSheet,
-  Pressable,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import useLatestCallback from 'use-latest-callback';
-
-import CardActions from './CardActions';
-import CardContent from './CardContent';
-import CardCover from './CardCover';
-import CardTitle from './CardTitle';
-import { getCardColors } 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 Surface from '../Surface';
-
-type CardComposition = {
-  Content: typeof CardContent;
-  Actions: typeof CardActions;
-  Cover: typeof CardCover;
-  Title: typeof CardTitle;
-};
-
-type OutlinedCardProps = {
-  mode: 'outlined';
-  elevation?: never;
-};
-
-type ElevatedCardProps = {
-  mode?: 'elevated';
-  elevation?: number;
-};
-
-type ContainedCardProps = {
-  mode?: 'contained';
-  elevation?: never;
-};
-
-type HandlePressType = 'in' | 'out';
-
-type Mode = 'elevated' | 'outlined' | 'contained';
-
-export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
-  /**
-   * Mode of the Card.
-   * - `elevated` - Card with elevation.
-   * - `contained` - Card without outline and elevation @supported Available in v5.x with theme version 3
-   * - `outlined` - Card with an outline.
-   */
-  mode?: Mode;
-  /**
-   * Content of the `Card`.
-   */
-  children: React.ReactNode;
-  /**
-   * Function to execute on long press.
-   */
-  onLongPress?: () => void;
-  /**
-   * 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;
-  /**
-   * The number of milliseconds a user must touch the element before executing `onLongPress`.
-   */
-  delayLongPress?: number;
-  /**
-   * If true, disable all interactions for this component.
-   */
-  disabled?: boolean;
-  /**
-   * Changes Card shadow and background on iOS and Android.
-   */
-  elevation?: 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
-  /**
-   * Style of card's inner content.
-   */
-  contentStyle?: StyleProp<ViewStyle>;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * Pass down testID from card props to touchable
-   */
-  testID?: string;
-  /**
-   * Pass down accessible from card props to touchable
-   */
-  accessible?: boolean;
-};
-
-/**
- * A card is a sheet of material that serves as an entry point to more detailed information.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Avatar, Button, Card, Text } from 'react-native-paper';
- *
- * const LeftContent = props => <Avatar.Icon {...props} icon="folder" />
- *
- * const MyComponent = () => (
- *   <Card>
- *     <Card.Title title="Card Title" subtitle="Card Subtitle" left={LeftContent} />
- *     <Card.Content>
- *       <Text variant="titleLarge">Card title</Text>
- *       <Text variant="bodyMedium">Card content</Text>
- *     </Card.Content>
- *     <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
- *     <Card.Actions>
- *       <Button>Cancel</Button>
- *       <Button>Ok</Button>
- *     </Card.Actions>
- *   </Card>
- * );
- *
- * export default MyComponent;
- * ```
- */
-
-const Card = (
-  {
-    elevation: cardElevation = 1,
-    delayLongPress,
-    onPress,
-    onLongPress,
-    onPressOut,
-    onPressIn,
-    mode: cardMode = 'elevated',
-    children,
-    style,
-    contentStyle,
-    theme: themeOverrides,
-    testID = 'card',
-    accessible,
-    disabled,
-    ...rest
-  }: (OutlinedCardProps | ElevatedCardProps | ContainedCardProps) & Props,
-  ref: React.ForwardedRef<View>
-) => {
-  const theme = useInternalTheme(themeOverrides);
-  const isMode = React.useCallback(
-    (modeToCompare: Mode) => {
-      return cardMode === modeToCompare;
-    },
-    [cardMode]
-  );
-
-  const hasPassedTouchHandler = hasTouchHandler({
-    onPress,
-    onLongPress,
-    onPressIn,
-    onPressOut,
-  });
-
-  // Default animated value
-  const { current: elevation } = React.useRef<Animated.Value>(
-    new Animated.Value(cardElevation)
-  );
-  // Dark adaptive animated value, used in case of toggling the theme,
-  // it prevents animating the background with native drivers inside Surface
-  const { current: elevationDarkAdaptive } = React.useRef<Animated.Value>(
-    new Animated.Value(cardElevation)
-  );
-  const { animation, dark, mode, roundness, isV3 } = theme;
-
-  const prevDarkRef = React.useRef<boolean>(dark);
-  React.useEffect(() => {
-    prevDarkRef.current = dark;
-  });
-
-  const prevDark = prevDarkRef.current;
-  const isAdaptiveMode = mode === 'adaptive';
-  const animationDuration = 150 * animation.scale;
-
-  React.useEffect(() => {
-    /**
-     * Resets animations values if updating to dark adaptive mode,
-     * otherwise, any card that is in the middle of animation while
-     * toggling the theme will stay at that animated value until
-     * the next press-in
-     */
-    if (dark && isAdaptiveMode && !prevDark) {
-      elevation.setValue(cardElevation);
-      elevationDarkAdaptive.setValue(cardElevation);
-    }
-  }, [
-    prevDark,
-    dark,
-    isAdaptiveMode,
-    cardElevation,
-    elevation,
-    elevationDarkAdaptive,
-  ]);
-
-  const runElevationAnimation = (pressType: HandlePressType) => {
-    if (isV3 && isMode('contained')) {
-      return;
-    }
-
-    const isPressTypeIn = pressType === 'in';
-    if (dark && isAdaptiveMode) {
-      Animated.timing(elevationDarkAdaptive, {
-        toValue: isPressTypeIn ? (isV3 ? 2 : 8) : cardElevation,
-        duration: animationDuration,
-        useNativeDriver: false,
-      }).start();
-    } else {
-      Animated.timing(elevation, {
-        toValue: isPressTypeIn ? (isV3 ? 2 : 8) : cardElevation,
-        duration: animationDuration,
-        useNativeDriver: false,
-      }).start();
-    }
-  };
-
-  const handlePressIn = useLatestCallback((e: GestureResponderEvent) => {
-    onPressIn?.(e);
-    runElevationAnimation('in');
-  });
-
-  const handlePressOut = useLatestCallback((e: GestureResponderEvent) => {
-    onPressOut?.(e);
-    runElevationAnimation('out');
-  });
-
-  const total = React.Children.count(children);
-  const siblings = React.Children.map(children, (child) =>
-    React.isValidElement(child) && child.type
-      ? (child.type as any).displayName
-      : null
-  );
-  const computedElevation =
-    dark && isAdaptiveMode ? elevationDarkAdaptive : elevation;
-
-  const { backgroundColor, borderColor: themedBorderColor } = getCardColors({
-    theme,
-    mode: cardMode,
-  });
-
-  const flattenedStyles = (StyleSheet.flatten(style) || {}) as ViewStyle;
-
-  const { borderColor = themedBorderColor } = flattenedStyles;
-
-  const [, borderRadiusStyles] = splitStyles(
-    flattenedStyles,
-    (style) => style.startsWith('border') && style.endsWith('Radius')
-  );
-
-  const borderRadiusCombinedStyles = {
-    borderRadius: (isV3 ? 3 : 1) * roundness,
-    ...borderRadiusStyles,
-  };
-
-  const content = (
-    <View style={[styles.innerContainer, contentStyle]} testID={testID}>
-      {React.Children.map(children, (child, index) =>
-        React.isValidElement(child)
-          ? React.cloneElement(child as React.ReactElement<any>, {
-              index,
-              total,
-              siblings,
-              borderRadiusStyles,
-            })
-          : child
-      )}
-    </View>
-  );
-
-  return (
-    <Surface
-      ref={ref}
-      style={[
-        isV3 && !isMode('elevated') && { backgroundColor },
-        !isV3 && isMode('outlined')
-          ? styles.resetElevation
-          : {
-              elevation: computedElevation as unknown as number,
-            },
-        borderRadiusCombinedStyles,
-        style,
-      ]}
-      theme={theme}
-      {...(isV3 && {
-        elevation: isMode('elevated') ? computedElevation : 0,
-      })}
-      testID={`${testID}-container`}
-      {...rest}
-    >
-      {isMode('outlined') && (
-        <View
-          pointerEvents="none"
-          testID={`${testID}-outline`}
-          style={[
-            {
-              borderColor,
-            },
-            styles.outline,
-            borderRadiusCombinedStyles,
-          ]}
-        />
-      )}
-
-      {hasPassedTouchHandler ? (
-        <Pressable
-          accessible={accessible}
-          unstable_pressDelay={0}
-          disabled={disabled}
-          delayLongPress={delayLongPress}
-          onLongPress={onLongPress}
-          onPress={onPress}
-          onPressIn={handlePressIn}
-          onPressOut={handlePressOut}
-        >
-          {content}
-        </Pressable>
-      ) : (
-        content
-      )}
-    </Surface>
-  );
-};
-
-Card.displayName = 'Card';
-const Component = forwardRef(Card);
-
-const CardComponent = Component as typeof Component & CardComposition;
-
-// @component ./CardContent.tsx
-CardComponent.Content = CardContent;
-// @component ./CardActions.tsx
-CardComponent.Actions = CardActions;
-// @component ./CardCover.tsx
-CardComponent.Cover = CardCover;
-// @component ./CardTitle.tsx
-CardComponent.Title = CardTitle;
-
-const styles = StyleSheet.create({
-  innerContainer: {
-    flexShrink: 1,
-  },
-  outline: {
-    borderWidth: 1,
-    position: 'absolute',
-    width: '100%',
-    height: '100%',
-    zIndex: 2,
-  },
-  resetElevation: {
-    elevation: 0,
-  },
-});
-
-export default CardComponent;

package/Examples/SampleUI/src/components/Card/CardActions.tsx

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import { StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-
-import type { ThemeProp } from 'src/types';
-
-import { useInternalTheme } from '../../core/theming';
-
-export type Props = React.ComponentPropsWithRef<typeof View> & {
-  /**
-   * Items inside the `CardActions`.
-   */
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-  theme?: ThemeProp;
-};
-
-/**
- * A component to show a list of actions inside a Card.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Card, Button } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Card>
- *     <Card.Actions>
- *       <Button>Cancel</Button>
- *       <Button>Ok</Button>
- *     </Card.Actions>
- *   </Card>
- * );
- *
- * export default MyComponent;
- * ```
- */
-const CardActions = (props: Props) => {
-  const { isV3 } = useInternalTheme(props.theme);
-  const justifyContent = isV3 ? 'flex-end' : 'flex-start';
-
-  return (
-    <View
-      {...props}
-      style={[styles.container, props.style, { justifyContent }]}
-    >
-      {React.Children.map(props.children, (child, i) => {
-        return React.isValidElement(child)
-          ? React.cloneElement(child as React.ReactElement<any>, {
-              compact: !isV3 && child.props.compact !== false,
-              mode:
-                child.props.mode ||
-                (isV3 && (i === 0 ? 'outlined' : 'contained')),
-              style: [isV3 && styles.button, child.props.style],
-            })
-          : child;
-      })}
-    </View>
-  );
-};
-
-CardActions.displayName = 'Card.Actions';
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    padding: 8,
-  },
-  button: {
-    marginLeft: 8,
-  },
-});
-
-export default CardActions;