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

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

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

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

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

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