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

package/Examples/SampleUI/src/components/Chip/helpers.tsx

@@ -1,322 +0,0 @@
-import type { ColorValue } from 'react-native';
-
-import color from 'color';
-
-import { black, white } from '../../styles/themes/v2/colors';
-import type { InternalTheme } from '../../types';
-
-type BaseProps = {
-  theme: InternalTheme;
-  isOutlined: boolean;
-  disabled?: boolean;
-};
-
-const getBorderColor = ({
-  theme,
-  isOutlined,
-  disabled,
-  selectedColor,
-  backgroundColor,
-}: BaseProps & { backgroundColor: string; selectedColor?: string }) => {
-  const isSelectedColor = selectedColor !== undefined;
-
-  if (theme.isV3) {
-    if (!isOutlined) {
-      // If the Chip mode is "flat", set border color to transparent
-      return 'transparent';
-    }
-
-    if (disabled) {
-      return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string();
-    }
-
-    if (isSelectedColor) {
-      return color(selectedColor).alpha(0.29).rgb().string();
-    }
-
-    return theme.colors.outline;
-  }
-
-  if (isOutlined) {
-    if (isSelectedColor) {
-      return color(selectedColor).alpha(0.29).rgb().string();
-    }
-
-    if (theme.dark) {
-      return color(white).alpha(0.29).rgb().string();
-    }
-
-    return color(black).alpha(0.29).rgb().string();
-  }
-
-  return backgroundColor;
-};
-
-const getTextColor = ({
-  theme,
-  isOutlined,
-  disabled,
-  selectedColor,
-}: BaseProps & {
-  selectedColor?: string;
-}) => {
-  const isSelectedColor = selectedColor !== undefined;
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    if (isSelectedColor) {
-      return selectedColor;
-    }
-
-    if (isOutlined) {
-      return theme.colors.onSurfaceVariant;
-    }
-
-    return theme.colors.onSecondaryContainer;
-  }
-
-  if (disabled) {
-    return theme.colors.disabled;
-  }
-
-  if (isSelectedColor) {
-    return color(selectedColor).alpha(0.87).rgb().string();
-  }
-
-  return color(theme.colors.text).alpha(0.87).rgb().string();
-};
-
-const getDefaultBackgroundColor = ({
-  theme,
-  isOutlined,
-}: Omit<BaseProps, 'disabled' | 'selectedColor'>) => {
-  if (theme.isV3) {
-    if (isOutlined) {
-      return theme.colors.surface;
-    }
-
-    return theme.colors.secondaryContainer;
-  }
-
-  if (isOutlined) {
-    return theme.colors?.surface;
-  }
-
-  if (theme.dark) {
-    return '#383838';
-  }
-
-  return '#ebebeb';
-};
-
-const getBackgroundColor = ({
-  theme,
-  isOutlined,
-  disabled,
-  customBackgroundColor,
-}: BaseProps & {
-  customBackgroundColor?: ColorValue;
-}) => {
-  if (typeof customBackgroundColor === 'string') {
-    return customBackgroundColor;
-  }
-
-  if (theme.isV3) {
-    if (disabled) {
-      if (isOutlined) {
-        return 'transparent';
-      }
-      return color(theme.colors.onSurfaceVariant).alpha(0.12).rgb().string();
-    }
-  }
-
-  return getDefaultBackgroundColor({ theme, isOutlined });
-};
-
-const getSelectedBackgroundColor = ({
-  theme,
-  isOutlined,
-  disabled,
-  customBackgroundColor,
-  showSelectedOverlay,
-}: BaseProps & {
-  customBackgroundColor?: ColorValue;
-  showSelectedOverlay?: boolean;
-}) => {
-  const backgroundColor = getBackgroundColor({
-    theme,
-    disabled,
-    isOutlined,
-    customBackgroundColor,
-  });
-
-  if (theme.isV3) {
-    if (isOutlined) {
-      if (showSelectedOverlay) {
-        return color(backgroundColor)
-          .mix(color(theme.colors.onSurfaceVariant), 0.12)
-          .rgb()
-          .string();
-      }
-      return color(backgroundColor)
-        .mix(color(theme.colors.onSurfaceVariant), 0)
-        .rgb()
-        .string();
-    }
-
-    if (showSelectedOverlay) {
-      return color(backgroundColor)
-        .mix(color(theme.colors.onSecondaryContainer), 0.12)
-        .rgb()
-        .string();
-    }
-
-    return color(backgroundColor)
-      .mix(color(theme.colors.onSecondaryContainer), 0)
-      .rgb()
-      .string();
-  }
-
-  if (theme.dark) {
-    if (isOutlined) {
-      return color(backgroundColor).lighten(0.2).rgb().string();
-    }
-    return color(backgroundColor).lighten(0.4).rgb().string();
-  }
-
-  if (isOutlined) {
-    return color(backgroundColor).darken(0.08).rgb().string();
-  }
-
-  return color(backgroundColor).darken(0.2).rgb().string();
-};
-
-const getIconColor = ({
-  theme,
-  isOutlined,
-  disabled,
-  selectedColor,
-}: BaseProps & {
-  selectedColor?: string;
-}) => {
-  const isSelectedColor = selectedColor !== undefined;
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-
-    if (isSelectedColor) {
-      return selectedColor;
-    }
-
-    if (isOutlined) {
-      return theme.colors.onSurfaceVariant;
-    }
-
-    return theme.colors.onSecondaryContainer;
-  }
-
-  if (disabled) {
-    return theme.colors.disabled;
-  }
-
-  if (isSelectedColor) {
-    return color(selectedColor).alpha(0.54).rgb().string();
-  }
-
-  return color(theme.colors.text).alpha(0.54).rgb().string();
-};
-
-const getRippleColor = ({
-  theme,
-  isOutlined,
-  disabled,
-  selectedColor,
-  selectedBackgroundColor,
-  customRippleColor,
-}: BaseProps & {
-  selectedBackgroundColor: string;
-  selectedColor?: string;
-  customRippleColor?: ColorValue;
-}) => {
-  if (customRippleColor) {
-    return customRippleColor;
-  }
-
-  const isSelectedColor = selectedColor !== undefined;
-  const textColor = getTextColor({
-    theme,
-    disabled,
-    selectedColor,
-    isOutlined,
-  });
-
-  if (theme.isV3) {
-    if (isSelectedColor) {
-      return color(selectedColor).alpha(0.12).rgb().string();
-    }
-
-    return color(textColor).alpha(0.12).rgb().string();
-  }
-
-  if (isSelectedColor) {
-    return color(selectedColor).fade(0.5).rgb().string();
-  }
-
-  return selectedBackgroundColor;
-};
-
-export const getChipColors = ({
-  isOutlined,
-  theme,
-  selectedColor,
-  showSelectedOverlay,
-  customBackgroundColor,
-  disabled,
-  customRippleColor,
-}: BaseProps & {
-  customBackgroundColor?: ColorValue;
-  disabled?: boolean;
-  showSelectedOverlay?: boolean;
-  selectedColor?: string;
-  customRippleColor?: ColorValue;
-}) => {
-  const baseChipColorProps = { theme, isOutlined, disabled };
-
-  const backgroundColor = getBackgroundColor({
-    ...baseChipColorProps,
-    customBackgroundColor,
-  });
-
-  const selectedBackgroundColor = getSelectedBackgroundColor({
-    ...baseChipColorProps,
-    customBackgroundColor,
-    showSelectedOverlay,
-  });
-
-  return {
-    borderColor: getBorderColor({
-      ...baseChipColorProps,
-      selectedColor,
-      backgroundColor,
-    }),
-    textColor: getTextColor({
-      ...baseChipColorProps,
-      selectedColor,
-    }),
-    iconColor: getIconColor({
-      ...baseChipColorProps,
-      selectedColor,
-    }),
-    rippleColor: getRippleColor({
-      ...baseChipColorProps,
-      selectedColor,
-      selectedBackgroundColor,
-      customRippleColor,
-    }),
-    backgroundColor,
-    selectedBackgroundColor,
-  };
-};

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

@@ -1,140 +0,0 @@
-import * as React from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
-
-import Icon, { IconSource, isEqualIcon, isValidIcon } from './Icon';
-import { useInternalTheme } from '../core/theming';
-import type { ThemeProp } from '../types';
-
-type Props = {
-  /**
-   * Icon to display for the `CrossFadeIcon`.
-   */
-  source: IconSource;
-  /**
-   * Color of the icon.
-   */
-  color: string;
-  /**
-   * Size of the icon.
-   */
-  size: number;
-  /**
-   * TestID used for testing purposes
-   */
-  testID?: string;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-const CrossFadeIcon = ({
-  color,
-  size,
-  source,
-  theme: themeOverrides,
-  testID = 'cross-fade-icon',
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const [currentIcon, setCurrentIcon] = React.useState<IconSource>(
-    () => source
-  );
-  const [previousIcon, setPreviousIcon] = React.useState<IconSource | null>(
-    null
-  );
-  const { current: fade } = React.useRef<Animated.Value>(new Animated.Value(1));
-
-  const { scale } = theme.animation;
-
-  if (currentIcon !== source) {
-    setPreviousIcon(() => currentIcon);
-    setCurrentIcon(() => source);
-  }
-
-  React.useEffect(() => {
-    if (isValidIcon(previousIcon) && !isEqualIcon(previousIcon, currentIcon)) {
-      fade.setValue(1);
-
-      Animated.timing(fade, {
-        duration: scale * 200,
-        toValue: 0,
-        useNativeDriver: true,
-      }).start();
-    }
-  }, [currentIcon, previousIcon, fade, scale]);
-
-  const opacityPrev = fade;
-  const opacityNext = previousIcon
-    ? fade.interpolate({
-        inputRange: [0, 1],
-        outputRange: [1, 0],
-      })
-    : 1;
-
-  const rotatePrev = fade.interpolate({
-    inputRange: [0, 1],
-    outputRange: ['-90deg', '0deg'],
-  });
-
-  const rotateNext = previousIcon
-    ? fade.interpolate({
-        inputRange: [0, 1],
-        outputRange: ['0deg', '-180deg'],
-      })
-    : '0deg';
-
-  return (
-    <View
-      style={[
-        styles.content,
-        {
-          height: size,
-          width: size,
-        },
-      ]}
-    >
-      {previousIcon ? (
-        <Animated.View
-          style={[
-            styles.icon,
-            {
-              opacity: opacityPrev,
-              transform: [{ rotate: rotatePrev }],
-            },
-          ]}
-          testID={`${testID}-previous`}
-        >
-          <Icon source={previousIcon} size={size} color={color} theme={theme} />
-        </Animated.View>
-      ) : null}
-      <Animated.View
-        style={[
-          styles.icon,
-          {
-            opacity: opacityNext,
-            transform: [{ rotate: rotateNext }],
-          },
-        ]}
-        testID={`${testID}-current`}
-      >
-        <Icon source={currentIcon} size={size} color={color} theme={theme} />
-      </Animated.View>
-    </View>
-  );
-};
-
-export default CrossFadeIcon;
-
-const styles = StyleSheet.create({
-  content: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  icon: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-});

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

@@ -1,138 +0,0 @@
-import * as React from 'react';
-import { StyleSheet, StyleProp, View, ViewStyle } from 'react-native';
-
-import DataTableCell from './DataTableCell';
-import DataTableHeader, {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  DataTableHeader as _DataTableHeader,
-} from './DataTableHeader';
-import DataTablePagination, {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  DataTablePagination as _DataTablePagination,
-} from './DataTablePagination';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import DataTableRow, { DataTableRow as _DataTableRow } from './DataTableRow';
-import DataTableTitle, {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  DataTableTitle as _DataTableTitle,
-} from './DataTableTitle';
-
-export type Props = React.ComponentPropsWithRef<typeof View> & {
-  /**
-   * Content of the `DataTable`.
-   */
-  children: React.ReactNode;
-  style?: StyleProp<ViewStyle>;
-};
-
-/**
- * Data tables allow displaying sets of data.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { DataTable } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [page, setPage] = React.useState<number>(0);
- *   const [numberOfItemsPerPageList] = React.useState([2, 3, 4]);
- *   const [itemsPerPage, onItemsPerPageChange] = React.useState(
- *     numberOfItemsPerPageList[0]
- *   );
- *
- *   const [items] = React.useState([
- *    {
- *      key: 1,
- *      name: 'Cupcake',
- *      calories: 356,
- *      fat: 16,
- *    },
- *    {
- *      key: 2,
- *      name: 'Eclair',
- *      calories: 262,
- *      fat: 16,
- *    },
- *    {
- *      key: 3,
- *      name: 'Frozen yogurt',
- *      calories: 159,
- *      fat: 6,
- *    },
- *    {
- *      key: 4,
- *      name: 'Gingerbread',
- *      calories: 305,
- *      fat: 3.7,
- *    },
- *   ]);
- *
- *   const from = page * itemsPerPage;
- *   const to = Math.min((page + 1) * itemsPerPage, items.length);
- *
- *   React.useEffect(() => {
- *     setPage(0);
- *   }, [itemsPerPage]);
- *
- *   return (
- *     <DataTable>
- *       <DataTable.Header>
- *         <DataTable.Title>Dessert</DataTable.Title>
- *         <DataTable.Title numeric>Calories</DataTable.Title>
- *         <DataTable.Title numeric>Fat</DataTable.Title>
- *       </DataTable.Header>
- *
- *       {items.slice(from, to).map((item) => (
- *         <DataTable.Row key={item.key}>
- *           <DataTable.Cell>{item.name}</DataTable.Cell>
- *           <DataTable.Cell numeric>{item.calories}</DataTable.Cell>
- *           <DataTable.Cell numeric>{item.fat}</DataTable.Cell>
- *         </DataTable.Row>
- *       ))}
- *
- *       <DataTable.Pagination
- *         page={page}
- *         numberOfPages={Math.ceil(items.length / itemsPerPage)}
- *         onPageChange={(page) => setPage(page)}
- *         label={`${from + 1}-${to} of ${items.length}`}
- *         numberOfItemsPerPageList={numberOfItemsPerPageList}
- *         numberOfItemsPerPage={itemsPerPage}
- *         onItemsPerPageChange={onItemsPerPageChange}
- *         showFastPaginationControls
- *         selectPageDropdownLabel={'Rows per page'}
- *       />
- *     </DataTable>
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-const DataTable = ({ children, style, ...rest }: Props) => (
-  <View {...rest} style={[styles.container, style]}>
-    {children}
-  </View>
-);
-
-// @component ./DataTableHeader.tsx
-DataTable.Header = DataTableHeader;
-
-// @component ./DataTableTitle.tsx
-DataTable.Title = DataTableTitle;
-
-// @component ./DataTableRow.tsx
-DataTable.Row = DataTableRow;
-
-// @component ./DataTableCell.tsx
-DataTable.Cell = DataTableCell;
-
-// @component ./DataTablePagination.tsx
-DataTable.Pagination = DataTablePagination;
-
-const styles = StyleSheet.create({
-  container: {
-    width: '100%',
-  },
-});
-
-export default DataTable;

package/Examples/SampleUI/src/components/DataTable/DataTableCell.tsx

@@ -1,132 +0,0 @@
-import * as React from 'react';
-import {
-  StyleSheet,
-  StyleProp,
-  ViewStyle,
-  TextStyle,
-  GestureResponderEvent,
-} from 'react-native';
-
-import type { $RemoveChildren } from '../../types';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import Text from '../Typography/Text';
-
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
-  /**
-   * Content of the `DataTableCell`.
-   */
-  children: React.ReactNode;
-  /**
-   * Align the text to the right. Generally monetary or number fields are aligned to right.
-   */
-  numeric?: boolean;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Text content style of the `DataTableCell`.
-   */
-  textStyle?: StyleProp<TextStyle>;
-  /**
-   * Specifies the largest possible scale a text font can reach.
-   */
-  maxFontSizeMultiplier?: number;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-};
-
-/**
- * A component to show a single cell inside of a table.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { DataTable } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *      <DataTable.Row>
- *        <DataTable.Cell numeric>1</DataTable.Cell>
- *        <DataTable.Cell numeric>2</DataTable.Cell>
- *        <DataTable.Cell numeric>3</DataTable.Cell>
- *        <DataTable.Cell numeric>4</DataTable.Cell>
- *      </DataTable.Row>
- * );
- *
- * export default MyComponent;
- * ```
- *
- * If you want to support multiline text, please use View instead, as multiline text doesn't comply with
- * MD Guidelines (https://github.com/callstack/react-native-paper/issues/2381).
- *
- * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
- */
-const DataTableCell = ({
-  children,
-  textStyle,
-  style,
-  numeric,
-  maxFontSizeMultiplier,
-  testID,
-  ...rest
-}: Props) => {
-  return (
-    <TouchableRipple
-      {...rest}
-      testID={testID}
-      style={[styles.container, numeric && styles.right, style]}
-    >
-      <CellContent
-        textStyle={textStyle}
-        testID={testID}
-        maxFontSizeMultiplier={maxFontSizeMultiplier}
-      >
-        {children}
-      </CellContent>
-    </TouchableRipple>
-  );
-};
-
-const CellContent = ({
-  children,
-  textStyle,
-  maxFontSizeMultiplier,
-  testID,
-}: Pick<
-  Props,
-  'children' | 'textStyle' | 'testID' | 'maxFontSizeMultiplier'
->) => {
-  if (React.isValidElement(children)) {
-    return children;
-  }
-
-  return (
-    <Text
-      style={textStyle}
-      numberOfLines={1}
-      maxFontSizeMultiplier={maxFontSizeMultiplier}
-      testID={`${testID}-text-container`}
-    >
-      {children}
-    </Text>
-  );
-};
-
-DataTableCell.displayName = 'DataTable.Cell';
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-
-  right: {
-    justifyContent: 'flex-end',
-  },
-});
-
-export default DataTableCell;