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

package/Examples/SampleUI/src/components/RadioButton/RadioButtonAndroid.tsx

@@ -1,202 +0,0 @@
-import * as React from 'react';
-import { Animated, StyleSheet, View } from 'react-native';
-
-import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';
-import { handlePress, isChecked } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
-import { getAndroidSelectionControlColor } from '../Checkbox/utils';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
-  /**
-   * Value of the radio button
-   */
-  value: string;
-  /**
-   * Status of radio button.
-   */
-  status?: 'checked' | 'unchecked';
-  /**
-   * Whether radio is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (param?: any) => void;
-  /**
-   * Custom color for unchecked radio.
-   */
-  uncheckedColor?: string;
-  /**
-   * Custom color for radio.
-   */
-  color?: string;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-};
-
-const BORDER_WIDTH = 2;
-
-/**
- * Radio buttons allow the selection a single option 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 RadioButtonAndroid = ({
-  disabled,
-  onPress,
-  theme: themeOverrides,
-  value,
-  status,
-  testID,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { current: borderAnim } = React.useRef<Animated.Value>(
-    new Animated.Value(BORDER_WIDTH)
-  );
-
-  const { current: radioAnim } = React.useRef<Animated.Value>(
-    new Animated.Value(1)
-  );
-
-  const isFirstRendering = React.useRef<boolean>(true);
-
-  const { scale } = theme.animation;
-
-  React.useEffect(() => {
-    // Do not run animation on very first rendering
-    if (isFirstRendering.current) {
-      isFirstRendering.current = false;
-      return;
-    }
-
-    if (status === 'checked') {
-      radioAnim.setValue(1.2);
-
-      Animated.timing(radioAnim, {
-        toValue: 1,
-        duration: 150 * scale,
-        useNativeDriver: true,
-      }).start();
-    } else {
-      borderAnim.setValue(10);
-
-      Animated.timing(borderAnim, {
-        toValue: BORDER_WIDTH,
-        duration: 150 * scale,
-        useNativeDriver: false,
-      }).start();
-    }
-  }, [status, borderAnim, radioAnim, scale]);
-
-  return (
-    <RadioButtonContext.Consumer>
-      {(context?: RadioButtonContextType) => {
-        const checked =
-          isChecked({
-            contextValue: context?.value,
-            status,
-            value,
-          }) === 'checked';
-
-        const { rippleColor, selectionControlColor } =
-          getAndroidSelectionControlColor({
-            theme,
-            disabled,
-            checked,
-            customColor: rest.color,
-            customUncheckedColor: rest.uncheckedColor,
-          });
-
-        return (
-          <TouchableRipple
-            {...rest}
-            borderless
-            rippleColor={rippleColor}
-            onPress={
-              disabled
-                ? undefined
-                : (event) => {
-                    handlePress({
-                      onPress,
-                      onValueChange: context?.onValueChange,
-                      value,
-                      event,
-                    });
-                  }
-            }
-            accessibilityRole="radio"
-            accessibilityState={{ disabled, checked }}
-            accessibilityLiveRegion="polite"
-            style={styles.container}
-            testID={testID}
-            theme={theme}
-          >
-            <Animated.View
-              style={[
-                styles.radio,
-                {
-                  borderColor: selectionControlColor,
-                  borderWidth: borderAnim,
-                },
-              ]}
-            >
-              {checked ? (
-                <View style={[StyleSheet.absoluteFill, styles.radioContainer]}>
-                  <Animated.View
-                    style={[
-                      styles.dot,
-                      {
-                        backgroundColor: selectionControlColor,
-                        transform: [{ scale: radioAnim }],
-                      },
-                    ]}
-                  />
-                </View>
-              ) : null}
-            </Animated.View>
-          </TouchableRipple>
-        );
-      }}
-    </RadioButtonContext.Consumer>
-  );
-};
-
-RadioButtonAndroid.displayName = 'RadioButton.Android';
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 18,
-  },
-  radioContainer: {
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  radio: {
-    height: 20,
-    width: 20,
-    borderRadius: 10,
-    margin: 8,
-  },
-  dot: {
-    height: 10,
-    width: 10,
-    borderRadius: 5,
-  },
-});
-
-export default RadioButtonAndroid;
-
-// @component-docs ignore-next-line
-export { RadioButtonAndroid };

package/Examples/SampleUI/src/components/RadioButton/RadioButtonGroup.tsx

@@ -1,67 +0,0 @@
-import * as React from 'react';
-import { View } from 'react-native';
-
-export type Props = {
-  /**
-   * Function to execute on selection change.
-   */
-  onValueChange: (value: string) => void;
-  /**
-   * Value of the currently selected radio button.
-   */
-  value: string;
-  /**
-   * React elements containing radio buttons.
-   */
-  children: React.ReactNode;
-};
-
-export type RadioButtonContextType = {
-  value: string;
-  onValueChange: (item: string) => void;
-};
-
-export const RadioButtonContext = React.createContext<RadioButtonContextType>(
-  null as any
-);
-
-/**
- * Radio button group allows to control a group of radio buttons.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { View } from 'react-native';
- * import { RadioButton, Text } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [value, setValue] = React.useState('first');
- *
- *   return (
- *     <RadioButton.Group onValueChange={newValue => setValue(newValue)} value={value}>
- *       <View>
- *         <Text>First</Text>
- *         <RadioButton value="first" />
- *       </View>
- *       <View>
- *         <Text>Second</Text>
- *         <RadioButton value="second" />
- *       </View>
- *     </RadioButton.Group>
- *   );
- * };
- *
- * export default MyComponent;
- *```
- */
-const RadioButtonGroup = ({ value, onValueChange, children }: Props) => (
-  <RadioButtonContext.Provider value={{ value, onValueChange }}>
-    <View accessibilityRole="radiogroup">{children}</View>
-  </RadioButtonContext.Provider>
-);
-
-RadioButtonGroup.displayName = 'RadioButton.Group';
-export default RadioButtonGroup;
-
-// @component-docs ignore-next-line
-export { RadioButtonGroup };

package/Examples/SampleUI/src/components/RadioButton/RadioButtonIOS.tsx

@@ -1,130 +0,0 @@
-import * as React from 'react';
-import { GestureResponderEvent, StyleSheet, View } from 'react-native';
-
-import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';
-import { handlePress, isChecked } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { $RemoveChildren, ThemeProp } from '../../types';
-import { getSelectionControlIOSColor } from '../Checkbox/utils';
-import MaterialCommunityIcon from '../MaterialCommunityIcon';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-
-export type Props = $RemoveChildren<typeof TouchableRipple> & {
-  /**
-   * Value of the radio button
-   */
-  value: string;
-  /**
-   * Status of radio button.
-   */
-  status?: 'checked' | 'unchecked';
-  /**
-   * Whether radio is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Custom color for radio.
-   */
-  color?: string;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-};
-
-/**
- * Radio buttons allow the selection a single option 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 RadioButtonIOS = ({
-  disabled,
-  onPress,
-  theme: themeOverrides,
-  status,
-  value,
-  testID,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-
-  return (
-    <RadioButtonContext.Consumer>
-      {(context?: RadioButtonContextType) => {
-        const checked =
-          isChecked({
-            contextValue: context?.value,
-            status,
-            value,
-          }) === 'checked';
-
-        const { checkedColor, rippleColor } = getSelectionControlIOSColor({
-          theme,
-          disabled,
-          customColor: rest.color,
-        });
-        const opacity = checked ? 1 : 0;
-
-        return (
-          <TouchableRipple
-            {...rest}
-            borderless
-            rippleColor={rippleColor}
-            onPress={
-              disabled
-                ? undefined
-                : (event) => {
-                    handlePress({
-                      onPress,
-                      value,
-                      onValueChange: context?.onValueChange,
-                      event,
-                    });
-                  }
-            }
-            accessibilityRole="radio"
-            accessibilityState={{ disabled, checked }}
-            accessibilityLiveRegion="polite"
-            style={styles.container}
-            testID={testID}
-            theme={theme}
-          >
-            <View style={{ opacity }}>
-              <MaterialCommunityIcon
-                allowFontScaling={false}
-                name="check"
-                size={24}
-                color={checkedColor}
-                direction="ltr"
-              />
-            </View>
-          </TouchableRipple>
-        );
-      }}
-    </RadioButtonContext.Consumer>
-  );
-};
-
-RadioButtonIOS.displayName = 'RadioButton.IOS';
-
-const styles = StyleSheet.create({
-  container: {
-    borderRadius: 18,
-    padding: 6,
-  },
-});
-
-export default RadioButtonIOS;
-
-// @component-docs ignore-next-line
-export { RadioButtonIOS };

package/Examples/SampleUI/src/components/RadioButton/RadioButtonItem.tsx

@@ -1,268 +0,0 @@
-import * as React from 'react';
-import {
-  ColorValue,
-  GestureResponderEvent,
-  PressableAndroidRippleConfig,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import RadioButton from './RadioButton';
-import RadioButtonAndroid from './RadioButtonAndroid';
-import { RadioButtonContext, RadioButtonContextType } from './RadioButtonGroup';
-import RadioButtonIOS from './RadioButtonIOS';
-import { handlePress, isChecked } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp, MD3TypescaleKey } from '../../types';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import Text from '../Typography/Text';
-
-export type Props = {
-  /**
-   * Value of the radio button.
-   */
-  value: string;
-  /**
-   * Label to be displayed on the item.
-   */
-  label: string;
-  /**
-   * Whether radio is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Type of background drawabale to display the feedback (Android).
-   * https://reactnative.dev/docs/pressable#rippleconfig
-   */
-  background?: PressableAndroidRippleConfig;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Function to execute on long press.
-   */
-  onLongPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Accessibility label for the touchable. This is read by the screen reader when the user taps the touchable.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Custom color for unchecked radio.
-   */
-  uncheckedColor?: string;
-  /**
-   * Custom color for radio.
-   */
-  color?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
-  /**
-   * Status of radio button.
-   */
-  status?: 'checked' | 'unchecked';
-  /**
-   * Additional styles for container View.
-   */
-  style?: StyleProp<ViewStyle>;
-  /**
-   * 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;
-  /**
-   * Specifies the largest possible scale a label font can reach.
-   */
-  labelMaxFontSizeMultiplier?: number;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-  /**
-   * Whether `<RadioButton.Android />` or `<RadioButton.IOS />` should be used.
-   * Left undefined `<RadioButton />` will be used.
-   */
-  mode?: 'android' | 'ios';
-  /**
-   * Radio button control position.
-   */
-  position?: 'leading' | 'trailing';
-};
-
-/**
- * RadioButton.Item allows you to press the whole row (item) instead of only the RadioButton.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { RadioButton } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [value, setValue] = React.useState('first');
- *
- *   return (
- *     <RadioButton.Group onValueChange={value => setValue(value)} value={value}>
- *       <RadioButton.Item label="First item" value="first" />
- *       <RadioButton.Item label="Second item" value="second" />
- *     </RadioButton.Group>
- *   );
- * };
- *
- * export default MyComponent;
- *```
- */
-const RadioButtonItem = ({
-  value,
-  label,
-  style,
-  labelStyle,
-  onPress,
-  onLongPress,
-  disabled,
-  color,
-  uncheckedColor,
-  rippleColor,
-  status,
-  theme: themeOverrides,
-  background,
-  accessibilityLabel = label,
-  testID,
-  mode,
-  position = 'trailing',
-  labelVariant = 'bodyLarge',
-  labelMaxFontSizeMultiplier,
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const radioButtonProps = {
-    value,
-    disabled,
-    status,
-    color,
-    theme,
-    uncheckedColor,
-  };
-  const isLeading = position === 'leading';
-  let radioButton: any;
-
-  if (mode === 'android') {
-    radioButton = <RadioButtonAndroid {...radioButtonProps} />;
-  } else if (mode === 'ios') {
-    radioButton = <RadioButtonIOS {...radioButtonProps} />;
-  } else {
-    radioButton = <RadioButton {...radioButtonProps} />;
-  }
-
-  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 (
-    <RadioButtonContext.Consumer>
-      {(context?: RadioButtonContextType) => {
-        const checked =
-          isChecked({
-            contextValue: context?.value,
-            status,
-            value,
-          }) === 'checked';
-        return (
-          <TouchableRipple
-            onPress={(event) =>
-              handlePress({
-                onPress: onPress,
-                onValueChange: context?.onValueChange,
-                value,
-                event,
-              })
-            }
-            onLongPress={onLongPress}
-            accessibilityLabel={accessibilityLabel}
-            accessibilityRole="radio"
-            accessibilityState={{
-              checked,
-              disabled,
-            }}
-            testID={testID}
-            disabled={disabled}
-            background={background}
-            theme={theme}
-            rippleColor={rippleColor}
-          >
-            <View style={[styles.container, style]} pointerEvents="none">
-              {isLeading && radioButton}
-              <Text
-                variant={labelVariant}
-                style={[
-                  styles.label,
-                  !theme.isV3 && styles.font,
-                  computedStyle,
-                  labelStyle,
-                ]}
-                maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
-              >
-                {label}
-              </Text>
-              {!isLeading && radioButton}
-            </View>
-          </TouchableRipple>
-        );
-      }}
-    </RadioButtonContext.Consumer>
-  );
-};
-
-RadioButtonItem.displayName = 'RadioButton.Item';
-
-export default RadioButtonItem;
-
-// @component-docs ignore-next-line
-export { RadioButtonItem };
-
-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/RadioButton/index.ts

@@ -1,22 +0,0 @@
-import RadioButtonComponent from './RadioButton';
-import RadioButtonAndroid from './RadioButtonAndroid';
-import RadioButtonGroup from './RadioButtonGroup';
-import RadioButtonIOS from './RadioButtonIOS';
-import RadioButtonItem from './RadioButtonItem';
-
-const RadioButton = Object.assign(
-  // @component ./RadioButton.tsx
-  RadioButtonComponent,
-  {
-    // @component ./RadioButtonGroup.tsx
-    Group: RadioButtonGroup,
-    // @component ./RadioButtonAndroid.tsx
-    Android: RadioButtonAndroid,
-    // @component ./RadioButtonIOS.tsx
-    IOS: RadioButtonIOS,
-    // @component ./RadioButtonItem.tsx
-    Item: RadioButtonItem,
-  }
-);
-
-export default RadioButton;