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

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

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

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

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

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

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