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

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

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

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

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

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

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