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

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

@@ -0,0 +1,170 @@
+import * as React from 'react';
+import {
+  I18nManager,
+  Image,
+  ImageSourcePropType,
+  Platform,
+} from 'react-native';
+
+import { accessibilityProps } from './MaterialCommunityIcon';
+import { Consumer as SettingsConsumer } from '../core/settings';
+import { useInternalTheme } from '../core/theming';
+import type { ThemeProp } from '../types';
+
+type IconSourceBase = string | ImageSourcePropType;
+
+export type IconSource =
+  | IconSourceBase
+  | Readonly<{ source: IconSourceBase; direction: 'rtl' | 'ltr' | 'auto' }>
+  | ((props: IconProps & { color: string }) => React.ReactNode);
+
+type IconProps = {
+  /**
+   * Size of icon.
+   */
+  size: number;
+  allowFontScaling?: boolean;
+};
+
+const isImageSource = (source: any) =>
+  // source is an object with uri
+  (typeof source === 'object' &&
+    source !== null &&
+    Object.prototype.hasOwnProperty.call(source, 'uri') &&
+    typeof source.uri === 'string') ||
+  // source is a module, e.g. - require('image')
+  typeof source === 'number' ||
+  // image url on web
+  (Platform.OS === 'web' &&
+    typeof source === 'string' &&
+    (source.startsWith('data:image') ||
+      /\.(bmp|jpg|jpeg|png|gif|svg)$/.test(source)));
+
+const getIconId = (source: any) => {
+  if (
+    typeof source === 'object' &&
+    source !== null &&
+    Object.prototype.hasOwnProperty.call(source, 'uri') &&
+    typeof source.uri === 'string'
+  ) {
+    return source.uri;
+  }
+
+  return source;
+};
+
+export const isValidIcon = (source: any) =>
+  typeof source === 'string' ||
+  typeof source === 'function' ||
+  isImageSource(source);
+
+export const isEqualIcon = (a: any, b: any) =>
+  a === b || getIconId(a) === getIconId(b);
+
+export type Props = IconProps & {
+  /**
+   * Icon to display.
+   */
+  source: any;
+  /**
+   * Color of the icon.
+   */
+  color?: string;
+  /**
+   * TestID used for testing purposes
+   */
+  testID?: string;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+};
+
+/**
+ * An icon component which renders icon from vector library.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { Icon, MD3Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <Icon
+ *     source="camera"
+ *     color={MD3Colors.error50}
+ *     size={20}
+ *   />
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ */
+
+const Icon = ({
+  source,
+  color,
+  size,
+  theme: themeOverrides,
+  testID,
+  ...rest
+}: Props) => {
+  const theme = useInternalTheme(themeOverrides);
+  const direction =
+    typeof source === 'object' && source.direction && source.source
+      ? source.direction === 'auto'
+        ? I18nManager.getConstants().isRTL
+          ? 'rtl'
+          : 'ltr'
+        : source.direction
+      : null;
+
+  const s =
+    typeof source === 'object' && source.direction && source.source
+      ? source.source
+      : source;
+  const iconColor =
+    color || (theme.isV3 ? theme.colors.onSurface : theme.colors.text);
+
+  if (isImageSource(s)) {
+    return (
+      <Image
+        {...rest}
+        testID={testID}
+        source={s}
+        style={[
+          {
+            transform: [{ scaleX: direction === 'rtl' ? -1 : 1 }],
+          },
+          {
+            width: size,
+            height: size,
+            tintColor: color,
+            resizeMode: `contain`,
+          },
+        ]}
+        {...accessibilityProps}
+        accessibilityIgnoresInvertColors
+      />
+    );
+  } else if (typeof s === 'string') {
+    return (
+      <SettingsConsumer>
+        {({ icon }) => {
+          return icon?.({
+            name: s,
+            color: iconColor,
+            size,
+            direction,
+            testID,
+          });
+        }}
+      </SettingsConsumer>
+    );
+  } else if (typeof s === 'function') {
+    return s({ color: iconColor, size, direction, testID });
+  }
+
+  return null;
+};
+
+export default Icon;

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

@@ -0,0 +1,234 @@
+import * as React from 'react';
+import {
+  GestureResponderEvent,
+  StyleProp,
+  StyleSheet,
+  ViewStyle,
+  View,
+  Animated,
+  ColorValue,
+} from 'react-native';
+
+import { getIconButtonColor } from './utils';
+import { useInternalTheme } from '../../core/theming';
+import type { $RemoveChildren, ThemeProp } from '../../types';
+import { forwardRef } from '../../utils/forwardRef';
+import ActivityIndicator from '../ActivityIndicator';
+import CrossFadeIcon from '../CrossFadeIcon';
+import Icon, { IconSource } from '../Icon';
+import Surface from '../Surface';
+import TouchableRipple from '../TouchableRipple/TouchableRipple';
+
+const PADDING = 8;
+
+type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal';
+
+export type Props = Omit<$RemoveChildren<typeof TouchableRipple>, 'style'> & {
+  /**
+   * Icon to display.
+   */
+  icon: IconSource;
+  /**
+   * @supported Available in v5.x with theme version 3
+   * Mode of the icon button. By default there is no specified mode - only pressable icon will be rendered.
+   */
+  mode?: IconButtonMode;
+  /**
+   * @renamed Renamed from 'color' to 'iconColor' in v5.x
+   * Color of the icon.
+   */
+  iconColor?: string;
+  /**
+   * Background color of the icon container.
+   */
+  containerColor?: string;
+  /**
+   * Color of the ripple effect.
+   */
+  rippleColor?: ColorValue;
+  /**
+   * @supported Available in v5.x with theme version 3
+   * Whether icon button is selected. A selected button receives alternative combination of icon and container colors.
+   */
+  selected?: boolean;
+  /**
+   * Size of the icon.
+   */
+  size?: number;
+  /**
+   * Whether the button is disabled. A disabled button is greyed out and `onPress` is not called on touch.
+   */
+  disabled?: boolean;
+  /**
+   * Whether an icon change is animated.
+   */
+  animated?: boolean;
+  /**
+   * Accessibility label for the button. This is read by the screen reader when the user taps the button.
+   */
+  accessibilityLabel?: string;
+  /**
+   * Style of button's inner content.
+   * Use this prop to apply custom height and width or to set a custom padding`.
+   */
+  contentStyle?: StyleProp<ViewStyle>;
+  /**
+   * Function to execute on press.
+   */
+  onPress?: (e: GestureResponderEvent) => void;
+  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
+  ref?: React.RefObject<View>;
+  /**
+   * TestID used for testing purposes
+   */
+  testID?: string;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+  /**
+   * Whether to show a loading indicator.
+   */
+  loading?: boolean;
+};
+
+/**
+ * An icon button is a button which displays only an icon without a label.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { IconButton, MD3Colors } from 'react-native-paper';
+ *
+ * const MyComponent = () => (
+ *   <IconButton
+ *     icon="camera"
+ *     iconColor={MD3Colors.error50}
+ *     size={20}
+ *     onPress={() => console.log('Pressed')}
+ *   />
+ * );
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
+ */
+const IconButton = forwardRef<View, Props>(
+  (
+    {
+      icon,
+      iconColor: customIconColor,
+      containerColor: customContainerColor,
+      rippleColor: customRippleColor,
+      size = 24,
+      accessibilityLabel,
+      disabled,
+      onPress,
+      selected = false,
+      animated = false,
+      mode,
+      style,
+      theme: themeOverrides,
+      testID = 'icon-button',
+      loading = false,
+      contentStyle,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    const theme = useInternalTheme(themeOverrides);
+    const { isV3 } = theme;
+
+    const IconComponent = animated ? CrossFadeIcon : Icon;
+
+    const { iconColor, rippleColor, backgroundColor, borderColor } =
+      getIconButtonColor({
+        theme,
+        disabled,
+        selected,
+        mode,
+        customIconColor,
+        customContainerColor,
+        customRippleColor,
+      });
+
+    const buttonSize = isV3 ? size + 2 * PADDING : size * 1.5;
+
+    const {
+      borderWidth = isV3 && mode === 'outlined' && !selected ? 1 : 0,
+      borderRadius = buttonSize / 2,
+    } = (StyleSheet.flatten(style) || {}) as ViewStyle;
+
+    const borderStyles = {
+      borderWidth,
+      borderRadius,
+      borderColor,
+    };
+
+    return (
+      <Surface
+        ref={ref}
+        testID={`${testID}-container`}
+        style={[
+          {
+            backgroundColor,
+            width: buttonSize,
+            height: buttonSize,
+          },
+          styles.container,
+          borderStyles,
+          !isV3 && disabled && styles.disabled,
+          style,
+        ]}
+        {...(isV3 && { elevation: 0 })}
+      >
+        <TouchableRipple
+          borderless
+          centered
+          onPress={onPress}
+          rippleColor={rippleColor}
+          accessibilityLabel={accessibilityLabel}
+          style={[styles.touchable, contentStyle]}
+          // @ts-expect-error We keep old a11y props for backwards compat with old RN versions
+          accessibilityTraits={disabled ? ['button', 'disabled'] : 'button'}
+          accessibilityComponentType="button"
+          accessibilityRole="button"
+          accessibilityState={{ disabled }}
+          disabled={disabled}
+          hitSlop={
+            TouchableRipple.supported
+              ? { top: 10, left: 10, bottom: 10, right: 10 }
+              : { top: 6, left: 6, bottom: 6, right: 6 }
+          }
+          testID={testID}
+          {...rest}
+        >
+          {loading ? (
+            <ActivityIndicator size={size} color={iconColor} />
+          ) : (
+            <IconComponent color={iconColor} source={icon} size={size} />
+          )}
+        </TouchableRipple>
+      </Surface>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  container: {
+    overflow: 'hidden',
+    margin: 6,
+    elevation: 0,
+  },
+  touchable: {
+    flexGrow: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  disabled: {
+    opacity: 0.32,
+  },
+});
+
+export default IconButton;

package/Examples/SampleUI/src/components/IconButton/utils.ts

@@ -0,0 +1,190 @@
+import type { ColorValue } from 'react-native';
+
+import color from 'color';
+
+import type { InternalTheme } from '../../types';
+
+type IconButtonMode = 'outlined' | 'contained' | 'contained-tonal';
+
+type BaseProps = {
+  theme: InternalTheme;
+  isMode: (mode: IconButtonMode) => boolean;
+  disabled?: boolean;
+  selected?: boolean;
+};
+
+const getBorderColor = ({
+  theme,
+  disabled,
+}: {
+  theme: InternalTheme;
+  disabled?: boolean;
+}) => {
+  if (theme.isV3) {
+    if (disabled) {
+      return theme.colors.surfaceDisabled;
+    }
+
+    return theme.colors.outline;
+  }
+
+  return undefined;
+};
+
+const getBackgroundColor = ({
+  theme,
+  isMode,
+  disabled,
+  selected,
+  customContainerColor,
+}: BaseProps & { customContainerColor?: string }) => {
+  if (theme.isV3) {
+    if (disabled) {
+      if (isMode('contained') || isMode('contained-tonal')) {
+        return theme.colors.surfaceDisabled;
+      }
+    }
+
+    if (typeof customContainerColor !== 'undefined') {
+      return customContainerColor;
+    }
+
+    if (isMode('contained')) {
+      if (selected) {
+        return theme.colors.primary;
+      }
+      return theme.colors.surfaceVariant;
+    }
+
+    if (isMode('contained-tonal')) {
+      if (selected) {
+        return theme.colors.secondaryContainer;
+      }
+      return theme.colors.surfaceVariant;
+    }
+
+    if (isMode('outlined')) {
+      if (selected) {
+        return theme.colors.inverseSurface;
+      }
+    }
+  }
+
+  if (typeof customContainerColor !== 'undefined') {
+    return customContainerColor;
+  }
+
+  return undefined;
+};
+
+const getIconColor = ({
+  theme,
+  isMode,
+  disabled,
+  selected,
+  customIconColor,
+}: BaseProps & { customIconColor?: string }) => {
+  if (theme.isV3) {
+    if (disabled) {
+      return theme.colors.onSurfaceDisabled;
+    }
+
+    if (typeof customIconColor !== 'undefined') {
+      return customIconColor;
+    }
+
+    if (isMode('contained')) {
+      if (selected) {
+        return theme.colors.onPrimary;
+      }
+      return theme.colors.primary;
+    }
+
+    if (isMode('contained-tonal')) {
+      if (selected) {
+        return theme.colors.onSecondaryContainer;
+      }
+      return theme.colors.onSurfaceVariant;
+    }
+
+    if (isMode('outlined')) {
+      if (selected) {
+        return theme.colors.inverseOnSurface;
+      }
+      return theme.colors.onSurfaceVariant;
+    }
+
+    if (selected) {
+      return theme.colors.primary;
+    }
+    return theme.colors.onSurfaceVariant;
+  }
+
+  if (typeof customIconColor !== 'undefined') {
+    return customIconColor;
+  }
+
+  return theme.colors.text;
+};
+
+const getRippleColor = ({
+  theme,
+  iconColor,
+  customRippleColor,
+}: {
+  theme: InternalTheme;
+  iconColor: string;
+  customRippleColor?: ColorValue;
+}) => {
+  if (customRippleColor) {
+    return customRippleColor;
+  }
+  if (theme.isV3) {
+    return color(iconColor).alpha(0.12).rgb().string();
+  }
+  return color(iconColor).alpha(0.32).rgb().string();
+};
+
+export const getIconButtonColor = ({
+  theme,
+  disabled,
+  mode,
+  selected,
+  customIconColor,
+  customContainerColor,
+  customRippleColor,
+}: {
+  theme: InternalTheme;
+  disabled?: boolean;
+  selected?: boolean;
+  mode?: IconButtonMode;
+  customIconColor?: string;
+  customContainerColor?: string;
+  customRippleColor?: ColorValue;
+}) => {
+  const isMode = (modeToCompare: IconButtonMode) => {
+    return mode === modeToCompare;
+  };
+
+  const baseIconColorProps = {
+    theme,
+    isMode,
+    disabled,
+    selected,
+  };
+
+  const iconColor = getIconColor({
+    ...baseIconColorProps,
+    customIconColor,
+  });
+
+  return {
+    iconColor,
+    backgroundColor: getBackgroundColor({
+      ...baseIconColorProps,
+      customContainerColor,
+    }),
+    rippleColor: getRippleColor({ theme, iconColor, customRippleColor }),
+    borderColor: getBorderColor({ theme, disabled }),
+  };
+};

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

@@ -0,0 +1,20 @@
+// @component ./ListAccordion.tsx
+export { default as Accordion } from './ListAccordion';
+
+// @component ./ListAccordionGroup.tsx
+export { default as AccordionGroup } from './ListAccordionGroup';
+
+// @component ./ListIcon.tsx
+export { default as Icon } from './ListIcon';
+
+// @component ./ListItem.tsx
+export { default as Item } from './ListItem';
+
+// @component ./ListSection.tsx
+export { default as Section } from './ListSection';
+
+// @component ./ListSubheader.tsx
+export { default as Subheader } from './ListSubheader';
+
+// @component ./ListImage.tsx
+export { default as Image } from './ListImage';