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

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

@@ -1,99 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, StyleProp, View, ViewStyle } from 'react-native';
-
-export type Props = React.ComponentPropsWithRef<typeof View> & {
-  /**
-   * Items inside the `Card.Content`.
-   */
-  children: React.ReactNode;
-  /**
-   * @internal
-   */
-  index?: number;
-  /**
-   * @internal
-   */
-  total?: number;
-  /**
-   * @internal
-   */
-  siblings?: Array<string>;
-  style?: StyleProp<ViewStyle>;
-};
-
-/**
- * A component to show content inside a Card.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Card, Text } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Card>
- *     <Card.Content>
- *       <Text variant="titleLarge">Card title</Text>
- *       <Text variant="bodyMedium">Card content</Text>
- *     </Card.Content>
- *   </Card>
- * );
- *
- * export default MyComponent;
- * ```
- */
-const CardContent = ({ index, total, siblings, style, ...rest }: Props) => {
-  const cover = 'withInternalTheme(CardCover)';
-  const title = 'withInternalTheme(CardTitle)';
-
-  let contentStyle, prev, next;
-
-  if (typeof index === 'number' && siblings) {
-    prev = siblings[index - 1];
-    next = siblings[index + 1];
-  }
-
-  if (
-    (prev === cover && next === cover) ||
-    (prev === title && next === title) ||
-    total === 1
-  ) {
-    contentStyle = styles.only;
-  } else if (index === 0) {
-    if (next === cover || next === title) {
-      contentStyle = styles.only;
-    } else {
-      contentStyle = styles.first;
-    }
-  } else if (typeof total === 'number' && index === total - 1) {
-    if (prev === cover || prev === title) {
-      contentStyle = styles.only;
-    } else {
-      contentStyle = styles.last;
-    }
-  } else if (prev === cover || prev === title) {
-    contentStyle = styles.first;
-  } else if (next === cover || next === title) {
-    contentStyle = styles.last;
-  }
-
-  return <View {...rest} style={[styles.container, contentStyle, style]} />;
-};
-
-CardContent.displayName = 'Card.Content';
-
-const styles = StyleSheet.create({
-  container: {
-    paddingHorizontal: 16,
-  },
-  first: {
-    paddingTop: 16,
-  },
-  last: {
-    paddingBottom: 16,
-  },
-  only: {
-    paddingVertical: 16,
-  },
-});
-
-export default CardContent;

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

@@ -1,96 +0,0 @@
-import * as React from 'react';
-import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
-
-import { getCardCoverStyle } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import { grey200 } from '../../styles/themes/v2/colors';
-import type { ThemeProp } from '../../types';
-import { splitStyles } from '../../utils/splitStyles';
-
-export type Props = React.ComponentPropsWithRef<typeof Image> & {
-  /**
-   * @internal
-   */
-  index?: number;
-  /**
-   * @internal
-   */
-  total?: number;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * A component to show a cover image inside a Card.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Card } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Card>
- *     <Card.Cover source={{ uri: 'https://picsum.photos/700' }} />
- *   </Card>
- * );
- *
- * export default MyComponent;
- * ```
- *
- * @extends Image props https://reactnative.dev/docs/image#props
- */
-const CardCover = ({
-  index,
-  total,
-  style,
-  theme: themeOverrides,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-
-  const flattenedStyles = (StyleSheet.flatten(style) || {}) as ViewStyle;
-  const [, borderRadiusStyles] = splitStyles(
-    flattenedStyles,
-    (style) => style.startsWith('border') && style.endsWith('Radius')
-  );
-
-  const coverStyle = getCardCoverStyle({
-    theme,
-    index,
-    total,
-    borderRadiusStyles,
-  });
-
-  return (
-    <View style={[styles.container, coverStyle, style]}>
-      <Image
-        {...rest}
-        style={[styles.image, coverStyle]}
-        accessibilityIgnoresInvertColors
-      />
-    </View>
-  );
-};
-
-CardCover.displayName = 'Card.Cover';
-const styles = StyleSheet.create({
-  container: {
-    height: 195,
-    backgroundColor: grey200,
-    overflow: 'hidden',
-  },
-  image: {
-    flex: 1,
-    height: undefined,
-    width: undefined,
-    justifyContent: 'flex-end',
-  },
-});
-
-export default CardCover;
-
-// @component-docs ignore-next-line
-export { CardCover };

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

@@ -1,236 +0,0 @@
-import * as React from 'react';
-import {
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { useInternalTheme } from '../../core/theming';
-import type { MD3TypescaleKey, ThemeProp } from '../../types';
-import Text from '../Typography/Text';
-import Caption from '../Typography/v2/Caption';
-import Title from '../Typography/v2/Title';
-
-export type Props = React.ComponentPropsWithRef<typeof View> & {
-  /**
-   * Text for the title. Note that this will only accept a string or `<Text>`-based node.
-   */
-  title: React.ReactNode;
-  /**
-   * Style for the title.
-   */
-  titleStyle?: StyleProp<TextStyle>;
-  /**
-   * Number of lines for the title.
-   */
-  titleNumberOfLines?: number;
-  /**
-   * @supported Available in v5.x with theme version 3
-   *
-   * Title text variant defines appropriate text styles for type role and its size.
-   * Available variants:
-   *
-   *  Display: `displayLarge`, `displayMedium`, `displaySmall`
-   *
-   *  Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
-   *
-   *  Title: `titleLarge`, `titleMedium`, `titleSmall`
-   *
-   *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
-   *
-   *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
-   */
-  titleVariant?: keyof typeof MD3TypescaleKey;
-  /**
-   * Text for the subtitle. Note that this will only accept a string or `<Text>`-based node.
-   */
-  subtitle?: React.ReactNode;
-  /**
-   * Style for the subtitle.
-   */
-  subtitleStyle?: StyleProp<TextStyle>;
-  /**
-   * Number of lines for the subtitle.
-   */
-  subtitleNumberOfLines?: number;
-  /**
-   * @supported Available in v5.x with theme version 3
-   *
-   * Subtitle text variant defines appropriate text styles for type role and its size.
-   * Available variants:
-   *
-   *  Display: `displayLarge`, `displayMedium`, `displaySmall`
-   *
-   *  Headline: `headlineLarge`, `headlineMedium`, `headlineSmall`
-   *
-   *  Title: `titleLarge`, `titleMedium`, `titleSmall`
-   *
-   *  Label:  `labelLarge`, `labelMedium`, `labelSmall`
-   *
-   *  Body: `bodyLarge`, `bodyMedium`, `bodySmall`
-   */
-  subtitleVariant?: keyof typeof MD3TypescaleKey;
-  /**
-   * Callback which returns a React element to display on the left side.
-   */
-  left?: (props: { size: number }) => React.ReactNode;
-  /**
-   * Style for the left element wrapper.
-   */
-  leftStyle?: StyleProp<ViewStyle>;
-  /**
-   * Callback which returns a React element to display on the right side.
-   */
-  right?: (props: { size: number }) => React.ReactNode;
-  /**
-   * Style for the right element wrapper.
-   */
-  rightStyle?: StyleProp<ViewStyle>;
-  /**
-   * @internal
-   */
-  index?: number;
-  /**
-   * @internal
-   */
-  total?: number;
-  /**
-   * Specifies the largest possible scale a title font can reach.
-   */
-  titleMaxFontSizeMultiplier?: number;
-  /**
-   * Specifies the largest possible scale a subtitle font can reach.
-   */
-  subtitleMaxFontSizeMultiplier?: number;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-const LEFT_SIZE = 40;
-
-/**
- * A component to show a title, subtitle and an avatar inside a Card.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Avatar, Card, IconButton } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <Card.Title
- *     title="Card Title"
- *     subtitle="Card Subtitle"
- *     left={(props) => <Avatar.Icon {...props} icon="folder" />}
- *     right={(props) => <IconButton {...props} icon="dots-vertical" onPress={() => {}} />}
- *   />
- * );
- *
- * export default MyComponent;
- * ```
- */
-const CardTitle = ({
-  title,
-  titleStyle,
-  titleNumberOfLines = 1,
-  titleVariant = 'bodyLarge',
-  titleMaxFontSizeMultiplier,
-  subtitle,
-  subtitleStyle,
-  subtitleNumberOfLines = 1,
-  subtitleVariant = 'bodyMedium',
-  subtitleMaxFontSizeMultiplier,
-  left,
-  leftStyle,
-  right,
-  rightStyle,
-  style,
-  theme: themeOverrides,
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const TitleComponent = theme.isV3 ? Text : Title;
-  const SubtitleComponent = theme.isV3 ? Text : Caption;
-
-  const minHeight = subtitle || left || right ? 72 : 50;
-  const marginBottom = subtitle ? 0 : 2;
-
-  return (
-    <View style={[styles.container, { minHeight }, style]}>
-      {left ? (
-        <View style={[styles.left, leftStyle]}>
-          {left({
-            size: LEFT_SIZE,
-          })}
-        </View>
-      ) : null}
-
-      <View style={[styles.titles]}>
-        {title && (
-          <TitleComponent
-            style={[styles.title, { marginBottom }, titleStyle]}
-            numberOfLines={titleNumberOfLines}
-            variant={titleVariant}
-            maxFontSizeMultiplier={titleMaxFontSizeMultiplier}
-          >
-            {title}
-          </TitleComponent>
-        )}
-        {subtitle && (
-          <SubtitleComponent
-            style={[styles.subtitle, subtitleStyle]}
-            numberOfLines={subtitleNumberOfLines}
-            variant={subtitleVariant}
-            maxFontSizeMultiplier={subtitleMaxFontSizeMultiplier}
-          >
-            {subtitle}
-          </SubtitleComponent>
-        )}
-      </View>
-      <View style={rightStyle}>{right ? right({ size: 24 }) : null}</View>
-    </View>
-  );
-};
-
-CardTitle.displayName = 'Card.Title';
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingLeft: 16,
-  },
-
-  left: {
-    justifyContent: 'center',
-    marginRight: 16,
-    height: LEFT_SIZE,
-    width: LEFT_SIZE,
-  },
-
-  titles: {
-    flex: 1,
-    flexDirection: 'column',
-    justifyContent: 'center',
-  },
-
-  title: {
-    minHeight: 30,
-    paddingRight: 16,
-  },
-
-  subtitle: {
-    minHeight: 20,
-    marginVertical: 0,
-    paddingRight: 16,
-  },
-});
-
-export default CardTitle;
-
-// @component-docs ignore-next-line
-export { CardTitle };

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

@@ -1,110 +0,0 @@
-import type { ViewStyle } from 'react-native';
-
-import color from 'color';
-
-import { black, white } from '../../styles/themes/v2/colors';
-import type { InternalTheme } from '../../types';
-
-type CardMode = 'elevated' | 'outlined' | 'contained';
-
-type BorderRadiusStyles = Pick<
-  ViewStyle,
-  Extract<keyof ViewStyle, `border${string}Radius`>
->;
-
-export const getCardCoverStyle = ({
-  theme,
-  index,
-  total,
-  borderRadiusStyles,
-}: {
-  theme: InternalTheme;
-  borderRadiusStyles: BorderRadiusStyles;
-  index?: number;
-  total?: number;
-}) => {
-  const { isV3, roundness } = theme;
-
-  if (Object.keys(borderRadiusStyles).length > 0) {
-    return {
-      borderRadius: 3 * roundness,
-      ...borderRadiusStyles,
-    };
-  }
-
-  if (isV3) {
-    return {
-      borderRadius: 3 * roundness,
-    };
-  }
-
-  if (index === 0) {
-    if (total === 1) {
-      return {
-        borderRadius: roundness,
-      };
-    }
-
-    return {
-      borderTopLeftRadius: roundness,
-      borderTopRightRadius: roundness,
-    };
-  }
-
-  if (typeof total === 'number' && index === total - 1) {
-    return {
-      borderBottomLeftRadius: roundness,
-    };
-  }
-
-  return undefined;
-};
-
-const getBorderColor = ({ theme }: { theme: InternalTheme }) => {
-  if (theme.isV3) {
-    return theme.colors.outline;
-  }
-
-  if (theme.dark) {
-    return color(white).alpha(0.12).rgb().string();
-  }
-  return color(black).alpha(0.12).rgb().string();
-};
-
-const getBackgroundColor = ({
-  theme,
-  isMode,
-}: {
-  theme: InternalTheme;
-  isMode: (mode: CardMode) => boolean;
-}) => {
-  if (theme.isV3) {
-    if (isMode('contained')) {
-      return theme.colors.surfaceVariant;
-    }
-    if (isMode('outlined')) {
-      return theme.colors.surface;
-    }
-  }
-  return undefined;
-};
-
-export const getCardColors = ({
-  theme,
-  mode,
-}: {
-  theme: InternalTheme;
-  mode: CardMode;
-}) => {
-  const isMode = (modeToCompare: CardMode) => {
-    return mode === modeToCompare;
-  };
-
-  return {
-    backgroundColor: getBackgroundColor({
-      theme,
-      isMode,
-    }),
-    borderColor: getBorderColor({ theme }),
-  };
-};

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

@@ -1,78 +0,0 @@
-import * as React from 'react';
-import { GestureResponderEvent, Platform } from 'react-native';
-
-import CheckboxAndroid from './CheckboxAndroid';
-import CheckboxIOS from './CheckboxIOS';
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-
-export type Props = {
-  /**
-   * Status of checkbox.
-   */
-  status: 'checked' | 'unchecked' | 'indeterminate';
-  /**
-   * Whether checkbox is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Custom color for unchecked checkbox.
-   */
-  uncheckedColor?: string;
-  /**
-   * Custom color for checkbox.
-   */
-  color?: string;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-};
-
-/**
- * Checkboxes allow the selection of multiple options from a set.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Checkbox } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [checked, setChecked] = React.useState(false);
- *
- *   return (
- *     <Checkbox
- *       status={checked ? 'checked' : 'unchecked'}
- *       onPress={() => {
- *         setChecked(!checked);
- *       }}
- *     />
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-const Checkbox = ({ theme: themeOverrides, ...props }: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  return Platform.OS === 'ios' ? (
-    <CheckboxIOS {...props} theme={theme} />
-  ) : (
-    <CheckboxAndroid {...props} theme={theme} />
-  );
-};
-
-export default Checkbox;
-
-// @component-docs ignore-next-line
-const CheckboxWithTheme = Checkbox;
-// @component-docs ignore-next-line
-export { CheckboxWithTheme as Checkbox };