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

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

@@ -1,180 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  GestureResponderEvent,
-  StyleSheet,
-  View,
-} from 'react-native';
-
-import { getAndroidSelectionControlColor } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
-import MaterialCommunityIcon from '../MaterialCommunityIcon';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
-  /**
-   * 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;
-};
-
-// From https://material.io/design/motion/speed.html#duration
-const ANIMATION_DURATION = 100;
-
-/**
- * Checkboxes allow the selection of multiple options from a set.
- * This component follows platform guidelines for Android, but can be used
- * on any platform.
- *
- * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
- */
-const CheckboxAndroid = ({
-  status,
-  theme: themeOverrides,
-  disabled,
-  onPress,
-  testID,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { current: scaleAnim } = React.useRef<Animated.Value>(
-    new Animated.Value(1)
-  );
-  const isFirstRendering = React.useRef<boolean>(true);
-
-  const {
-    animation: { scale },
-  } = theme;
-
-  React.useEffect(() => {
-    // Do not run animation on very first rendering
-    if (isFirstRendering.current) {
-      isFirstRendering.current = false;
-      return;
-    }
-
-    const checked = status === 'checked';
-
-    Animated.sequence([
-      Animated.timing(scaleAnim, {
-        toValue: 0.85,
-        duration: checked ? ANIMATION_DURATION * scale : 0,
-        useNativeDriver: false,
-      }),
-      Animated.timing(scaleAnim, {
-        toValue: 1,
-        duration: checked
-          ? ANIMATION_DURATION * scale
-          : ANIMATION_DURATION * scale * 1.75,
-        useNativeDriver: false,
-      }),
-    ]).start();
-  }, [status, scaleAnim, scale]);
-
-  const checked = status === 'checked';
-  const indeterminate = status === 'indeterminate';
-
-  const { rippleColor, selectionControlColor } =
-    getAndroidSelectionControlColor({
-      theme,
-      disabled,
-      checked,
-      customColor: rest.color,
-      customUncheckedColor: rest.uncheckedColor,
-    });
-
-  const borderWidth = scaleAnim.interpolate({
-    inputRange: [0.8, 1],
-    outputRange: [7, 0],
-  });
-
-  const icon = indeterminate
-    ? 'minus-box'
-    : checked
-    ? 'checkbox-marked'
-    : 'checkbox-blank-outline';
-
-  return (
-    <TouchableRipple
-      {...rest}
-      borderless
-      rippleColor={rippleColor}
-      onPress={onPress}
-      disabled={disabled}
-      accessibilityRole="checkbox"
-      accessibilityState={{ disabled, checked }}
-      accessibilityLiveRegion="polite"
-      style={styles.container}
-      testID={testID}
-      theme={theme}
-    >
-      <Animated.View style={{ transform: [{ scale: scaleAnim }] }}>
-        <MaterialCommunityIcon
-          allowFontScaling={false}
-          name={icon}
-          size={24}
-          color={selectionControlColor}
-          direction="ltr"
-        />
-        <View style={[StyleSheet.absoluteFill, styles.fillContainer]}>
-          <Animated.View
-            style={[
-              styles.fill,
-              { borderColor: selectionControlColor },
-              { borderWidth },
-            ]}
-          />
-        </View>
-      </Animated.View>
-    </TouchableRipple>
-  );
-};
-
-CheckboxAndroid.displayName = 'Checkbox.Android';
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 18,
-    width: 36,
-    height: 36,
-    padding: 6,
-  },
-  fillContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  fill: {
-    height: 14,
-    width: 14,
-  },
-});
-
-export default CheckboxAndroid;
-
-// @component-docs ignore-next-line
-export { CheckboxAndroid };

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

@@ -1,104 +0,0 @@
-import * as React from 'react';
-import { GestureResponderEvent, StyleSheet, View } from 'react-native';
-
-import { getSelectionControlIOSColor } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
-import MaterialCommunityIcon from '../MaterialCommunityIcon';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
-  /**
-   * 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 checkbox.
-   */
-  color?: string;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-};
-
-/**
- * Checkboxes allow the selection of multiple options from a set.
- * This component follows platform guidelines for iOS, but can be used
- * on any platform.
- *
- * @extends TouchableRipple props https://callstack.github.io/react-native-paper/docs/components/TouchableRipple
- */
-const CheckboxIOS = ({
-  status,
-  disabled,
-  onPress,
-  theme: themeOverrides,
-  testID,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const checked = status === 'checked';
-  const indeterminate = status === 'indeterminate';
-
-  const { checkedColor, rippleColor } = getSelectionControlIOSColor({
-    theme,
-    disabled,
-    customColor: rest.color,
-  });
-
-  const icon = indeterminate ? 'minus' : 'check';
-  const opacity = indeterminate || checked ? 1 : 0;
-
-  return (
-    <TouchableRipple
-      {...rest}
-      borderless
-      rippleColor={rippleColor}
-      onPress={onPress}
-      disabled={disabled}
-      accessibilityRole="checkbox"
-      accessibilityState={{ disabled, checked }}
-      accessibilityLiveRegion="polite"
-      style={styles.container}
-      testID={testID}
-      theme={theme}
-    >
-      <View style={{ opacity }}>
-        <MaterialCommunityIcon
-          allowFontScaling={false}
-          name={icon}
-          size={24}
-          color={checkedColor}
-          direction="ltr"
-        />
-      </View>
-    </TouchableRipple>
-  );
-};
-
-CheckboxIOS.displayName = 'Checkbox.IOS';
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 18,
-    padding: 6,
-  },
-});
-
-export default CheckboxIOS;
-
-// @component-docs ignore-next-line
-export { CheckboxIOS };

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

@@ -1,236 +0,0 @@
-import * as React from 'react';
-import {
-  ColorValue,
-  GestureResponderEvent,
-  PressableAndroidRippleConfig,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import Checkbox from './Checkbox';
-import CheckboxAndroid from './CheckboxAndroid';
-import CheckboxIOS from './CheckboxIOS';
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp, MD3TypescaleKey } from '../../types';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import Text from '../Typography/Text';
-
-export type Props = {
-  /**
-   * Status of checkbox.
-   */
-  status: 'checked' | 'unchecked' | 'indeterminate';
-  /**
-   * Whether checkbox is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Label to be displayed on the item.
-   */
-  label: string;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Function to execute on long press.
-   */
-  onLongPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Type of background drawabale to display the feedback (Android).
-   * https://reactnative.dev/docs/pressable#rippleconfig
-   */
-  background?: PressableAndroidRippleConfig;
-  /**
-   * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Custom color for unchecked checkbox.
-   */
-  uncheckedColor?: string;
-  /**
-   * Custom color for checkbox.
-   */
-  color?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
-  /**
-   * Additional styles for container View.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Specifies the largest possible scale a label font can reach.
-   */
-  labelMaxFontSizeMultiplier?: number;
-  /**
-   * Style that is passed to Label element.
-   */
-  labelStyle?: StyleProp<TextStyle>;
-  /**
-   * @supported Available in v5.x with theme version 3
-   *
-   * Label 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`
-   */
-  labelVariant?: keyof typeof MD3TypescaleKey;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-  /**
-   * Checkbox control position.
-   */
-  position?: 'leading' | 'trailing';
-  /**
-   * Whether `<Checkbox.Android />` or `<Checkbox.IOS />` should be used.
-   * Left undefined `<Checkbox />` will be used.
-   */
-  mode?: 'android' | 'ios';
-};
-
-/**
- * Checkbox.Item allows you to press the whole row (item) instead of only the Checkbox.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { View } from 'react-native';
- * import { Checkbox } from 'react-native-paper';
- *
- * const MyComponent = () => (
- *   <View>
- *     <Checkbox.Item label="Item" status="checked" />
- *   </View>
- * );
- *
- * export default MyComponent;
- *```
- */
-
-const CheckboxItem = ({
-  style,
-  status,
-  label,
-  onPress,
-  onLongPress,
-  labelStyle,
-  theme: themeOverrides,
-  testID,
-  mode,
-  position = 'trailing',
-  accessibilityLabel = label,
-  disabled,
-  labelVariant = 'bodyLarge',
-  labelMaxFontSizeMultiplier = 1.5,
-  rippleColor,
-  background,
-  ...props
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const checkboxProps = { ...props, status, theme, disabled };
-  const isLeading = position === 'leading';
-  let checkbox;
-
-  if (mode === 'android') {
-    checkbox = <CheckboxAndroid {...checkboxProps} />;
-  } else if (mode === 'ios') {
-    checkbox = <CheckboxIOS {...checkboxProps} />;
-  } else {
-    checkbox = <Checkbox {...checkboxProps} />;
-  }
-
-  const textColor = theme.isV3 ? theme.colors.onSurface : theme.colors.text;
-  const disabledTextColor = theme.isV3
-    ? theme.colors.onSurfaceDisabled
-    : theme.colors.disabled;
-  const textAlign = isLeading ? 'right' : 'left';
-
-  const computedStyle = {
-    color: disabled ? disabledTextColor : textColor,
-    textAlign,
-  } as TextStyle;
-
-  return (
-    <TouchableRipple
-      accessibilityLabel={accessibilityLabel}
-      accessibilityRole="checkbox"
-      accessibilityState={{
-        checked: status === 'checked',
-        disabled,
-      }}
-      onPress={onPress}
-      onLongPress={onLongPress}
-      testID={testID}
-      disabled={disabled}
-      rippleColor={rippleColor}
-      theme={theme}
-      background={background}
-    >
-      <View
-        style={[styles.container, style]}
-        pointerEvents="none"
-        importantForAccessibility="no-hide-descendants"
-      >
-        {isLeading && checkbox}
-        <Text
-          variant={labelVariant}
-          testID={`${testID}-text`}
-          maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
-          style={[
-            styles.label,
-            !theme.isV3 && styles.font,
-            computedStyle,
-            labelStyle,
-          ]}
-        >
-          {label}
-        </Text>
-        {!isLeading && checkbox}
-      </View>
-    </TouchableRipple>
-  );
-};
-
-CheckboxItem.displayName = 'Checkbox.Item';
-
-export default CheckboxItem;
-
-// @component-docs ignore-next-line
-export { CheckboxItem };
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'space-between',
-    paddingVertical: 8,
-    paddingHorizontal: 16,
-  },
-  label: {
-    flexShrink: 1,
-    flexGrow: 1,
-  },
-  font: {
-    fontSize: 16,
-  },
-});

package/Examples/SampleUI/src/components/Checkbox/index.ts

@@ -1,19 +0,0 @@
-import CheckboxComponent from './Checkbox';
-import CheckboxAndroid from './CheckboxAndroid';
-import CheckboxIOS from './CheckboxIOS';
-import CheckboxItem from './CheckboxItem';
-
-const Checkbox = Object.assign(
-  // @component ./Checkbox.tsx
-  CheckboxComponent,
-  {
-    // @component ./CheckboxItem.tsx
-    Item: CheckboxItem,
-    // @component ./CheckboxAndroid.tsx
-    Android: CheckboxAndroid,
-    // @component ./CheckboxIOS.tsx
-    IOS: CheckboxIOS,
-  }
-);
-
-export default Checkbox;

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

@@ -1,183 +0,0 @@
-import color from 'color';
-
-import type { InternalTheme } from '../../types';
-
-const getAndroidCheckedColor = ({
-  theme,
-  customColor,
-}: {
-  theme: InternalTheme;
-  customColor?: string;
-}) => {
-  if (customColor) {
-    return customColor;
-  }
-
-  if (theme.isV3) {
-    return theme.colors.primary;
-  }
-
-  return theme.colors.accent;
-};
-
-const getAndroidUncheckedColor = ({
-  theme,
-  customUncheckedColor,
-}: {
-  theme: InternalTheme;
-  customUncheckedColor?: string;
-}) => {
-  if (customUncheckedColor) {
-    return customUncheckedColor;
-  }
-
-  if (theme.isV3) {
-    return theme.colors.onSurfaceVariant;
-  }
-
-  if (theme.dark) {
-    return color(theme.colors.text).alpha(0.7).rgb().string();
-  }
-
-  return color(theme.colors.text).alpha(0.54).rgb().string();
-};
-
-const getAndroidRippleColor = ({
-  theme,
-  checkedColor,
-  disabled,
-}: {
-  theme: InternalTheme;
-  checkedColor: string;
-  disabled?: boolean;
-}) => {
-  if (disabled) {
-    if (theme.isV3) {
-      return color(theme.colors.onSurface).alpha(0.16).rgb().string();
-    }
-    return color(theme.colors.text).alpha(0.16).rgb().string();
-  }
-
-  return color(checkedColor).fade(0.32).rgb().string();
-};
-
-const getAndroidControlColor = ({
-  theme,
-  checked,
-  disabled,
-  checkedColor,
-  uncheckedColor,
-}: {
-  theme: InternalTheme;
-  checked: boolean;
-  checkedColor: string;
-  uncheckedColor: string;
-  disabled?: boolean;
-}) => {
-  if (disabled) {
-    if (theme.isV3) {
-      return theme.colors.onSurfaceDisabled;
-    }
-    return theme.colors.disabled;
-  }
-
-  if (checked) {
-    return checkedColor;
-  }
-  return uncheckedColor;
-};
-
-export const getAndroidSelectionControlColor = ({
-  theme,
-  disabled,
-  checked,
-  customColor,
-  customUncheckedColor,
-}: {
-  theme: InternalTheme;
-  checked: boolean;
-  disabled?: boolean;
-  customColor?: string;
-  customUncheckedColor?: string;
-}) => {
-  const checkedColor = getAndroidCheckedColor({ theme, customColor });
-  const uncheckedColor = getAndroidUncheckedColor({
-    theme,
-    customUncheckedColor,
-  });
-  return {
-    rippleColor: getAndroidRippleColor({ theme, checkedColor, disabled }),
-    selectionControlColor: getAndroidControlColor({
-      theme,
-      disabled,
-      checked,
-      checkedColor,
-      uncheckedColor,
-    }),
-  };
-};
-
-const getIOSCheckedColor = ({
-  theme,
-  disabled,
-  customColor,
-}: {
-  theme: InternalTheme;
-  customColor?: string;
-  disabled?: boolean;
-}) => {
-  if (disabled) {
-    if (theme.isV3) {
-      return theme.colors.onSurfaceDisabled;
-    }
-    return theme.colors.disabled;
-  }
-
-  if (customColor) {
-    return customColor;
-  }
-
-  if (theme.isV3) {
-    return theme.colors.primary;
-  }
-
-  return theme.colors.accent;
-};
-
-const getIOSRippleColor = ({
-  theme,
-  checkedColor,
-  disabled,
-}: {
-  theme: InternalTheme;
-  checkedColor: string;
-  disabled?: boolean;
-}) => {
-  if (disabled) {
-    if (theme.isV3) {
-      return color(theme.colors.onSurface).alpha(0.16).rgb().string();
-    }
-    return color(theme.colors.text).alpha(0.16).rgb().string();
-  }
-  return color(checkedColor).fade(0.32).rgb().string();
-};
-
-export const getSelectionControlIOSColor = ({
-  theme,
-  disabled,
-  customColor,
-}: {
-  theme: InternalTheme;
-  disabled?: boolean;
-  customColor?: string;
-}) => {
-  const checkedColor = getIOSCheckedColor({ theme, disabled, customColor });
-  return {
-    checkedColor,
-    rippleColor: getIOSRippleColor({
-      theme,
-      checkedColor,
-      disabled,
-    }),
-  };
-};