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

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

@@ -0,0 +1,272 @@
+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

@@ -0,0 +1,373 @@
+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

@@ -0,0 +1,74 @@
+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;