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

package/Examples/SampleUI/src/components/SegmentedButtons/SegmentedButtonItem.tsx

@@ -1,271 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  ColorValue,
-  GestureResponderEvent,
-  PressableAndroidRippleConfig,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import color from 'color';
-import type { ThemeProp } from 'src/types';
-
-import {
-  getSegmentedButtonBorderRadius,
-  getSegmentedButtonColors,
-  getSegmentedButtonDensityPadding,
-} from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { IconSource } from '../Icon';
-import Icon from '../Icon';
-import TouchableRipple from '../TouchableRipple/TouchableRipple';
-import Text from '../Typography/Text';
-
-export type Props = {
-  /**
-   * Whether the segmented button is checked
-   */
-  checked: boolean;
-  /**
-   * Icon to display for the `SegmentedButtonItem`.
-   */
-  icon?: IconSource;
-  /**
-   * @supported Available in v5.x with theme version 3
-   * Custom color for unchecked Text and Icon.
-   */
-  uncheckedColor?: string;
-  /**
-   * @supported Available in v5.x with theme version 3
-   * Custom color for checked Text and Icon.
-   */
-  checkedColor?: string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
-  /**
-   * Whether the button is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Type of background drawabale to display the feedback (Android).
-   * https://reactnative.dev/docs/pressable#rippleconfig
-   */
-  background?: PressableAndroidRippleConfig;
-  /**
-   * Accessibility label for the `SegmentedButtonItem`. This is read by the screen reader when the user taps the button.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (event: GestureResponderEvent) => void;
-  /**
-   * Value of button.
-   */
-  value: string;
-  /**
-   * Label text of the button.
-   */
-  label?: string;
-  /**
-   * Button segment.
-   */
-  segment?: 'first' | 'last';
-  /**
-   * Show optional check icon to indicate selected state
-   */
-  showSelectedCheck?: boolean;
-  /**
-   * Density is applied to the height, to allow usage in denser UIs.
-   */
-  density?: 'regular' | 'small' | 'medium' | 'high';
-  /**
-   * Specifies the largest possible scale a label font can reach.
-   */
-  labelMaxFontSizeMultiplier?: number;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * Style for the button label.
-   */
-  labelStyle?: StyleProp<TextStyle>;
-  /**
-   * testID to be used on tests.
-   */
-  testID?: string;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-const SegmentedButtonItem = ({
-  checked,
-  accessibilityLabel,
-  disabled,
-  style,
-  labelStyle,
-  showSelectedCheck,
-  checkedColor,
-  uncheckedColor,
-  rippleColor: customRippleColor,
-  background,
-  icon,
-  testID,
-  label,
-  onPress,
-  segment,
-  density = 'regular',
-  theme: themeOverrides,
-  labelMaxFontSizeMultiplier,
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-
-  const checkScale = React.useRef(new Animated.Value(0)).current;
-
-  React.useEffect(() => {
-    if (!showSelectedCheck) {
-      return;
-    }
-    if (checked) {
-      Animated.spring(checkScale, {
-        toValue: 1,
-        useNativeDriver: true,
-      }).start();
-    } else {
-      Animated.spring(checkScale, {
-        toValue: 0,
-        useNativeDriver: true,
-      }).start();
-    }
-  }, [checked, checkScale, showSelectedCheck]);
-
-  const { roundness, isV3 } = theme;
-  const { borderColor, textColor, borderWidth, backgroundColor } =
-    getSegmentedButtonColors({
-      checked,
-      theme,
-      disabled,
-      checkedColor,
-      uncheckedColor,
-    });
-
-  const borderRadius = (isV3 ? 5 : 1) * roundness;
-  const segmentBorderRadius = getSegmentedButtonBorderRadius({
-    theme,
-    segment,
-  });
-  const rippleColor =
-    customRippleColor || color(textColor).alpha(0.12).rgb().string();
-
-  const showIcon = !icon ? false : label && checked ? !showSelectedCheck : true;
-  const showCheckedIcon = checked && showSelectedCheck;
-
-  const iconSize = isV3 ? 18 : 16;
-  const iconStyle = {
-    marginRight: label ? 5 : showCheckedIcon ? 3 : 0,
-    ...(label && {
-      transform: [
-        {
-          scale: checkScale.interpolate({
-            inputRange: [0, 1],
-            outputRange: [1, 0],
-          }),
-        },
-      ],
-    }),
-  };
-
-  const buttonStyle: ViewStyle = {
-    backgroundColor,
-    borderColor,
-    borderWidth,
-    borderRadius,
-    ...segmentBorderRadius,
-  };
-  const paddingVertical = getSegmentedButtonDensityPadding({ density });
-  const rippleStyle: ViewStyle = {
-    borderRadius,
-    ...segmentBorderRadius,
-  };
-  const labelTextStyle: TextStyle = {
-    ...(!isV3
-      ? {
-          textTransform: 'uppercase',
-          fontWeight: '500',
-        }
-      : theme.fonts.labelLarge),
-    color: textColor,
-  };
-
-  return (
-    <View style={[buttonStyle, styles.button, style]}>
-      <TouchableRipple
-        borderless
-        onPress={onPress}
-        accessibilityLabel={accessibilityLabel}
-        accessibilityState={{ disabled, checked }}
-        accessibilityRole="button"
-        disabled={disabled}
-        rippleColor={rippleColor}
-        testID={testID}
-        style={rippleStyle}
-        background={background}
-        theme={theme}
-      >
-        <View style={[styles.content, { paddingVertical }]}>
-          {showCheckedIcon ? (
-            <Animated.View
-              testID={`${testID}-check-icon`}
-              style={[iconStyle, { transform: [{ scale: checkScale }] }]}
-            >
-              <Icon source={'check'} size={iconSize} color={textColor} />
-            </Animated.View>
-          ) : null}
-          {showIcon ? (
-            <Animated.View testID={`${testID}-icon`} style={iconStyle}>
-              <Icon source={icon} size={iconSize} color={textColor} />
-            </Animated.View>
-          ) : null}
-          <Text
-            variant="labelLarge"
-            style={[styles.label, labelTextStyle, labelStyle]}
-            selectable={false}
-            numberOfLines={1}
-            maxFontSizeMultiplier={labelMaxFontSizeMultiplier}
-            testID={`${testID}-label`}
-          >
-            {label}
-          </Text>
-        </View>
-      </TouchableRipple>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  button: {
-    flex: 1,
-    minWidth: 76,
-    borderStyle: 'solid',
-  },
-  label: {
-    textAlign: 'center',
-  },
-  content: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingVertical: 9,
-    paddingHorizontal: 16,
-  },
-});
-
-export default SegmentedButtonItem;
-
-export { SegmentedButtonItem as SegmentedButton };

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

@@ -1,197 +0,0 @@
-import * as React from 'react';
-import {
-  GestureResponderEvent,
-  StyleProp,
-  StyleSheet,
-  TextStyle,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import type { ThemeProp } from 'src/types';
-
-import SegmentedButtonItem from './SegmentedButtonItem';
-import { getDisabledSegmentedButtonStyle } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { IconSource } from '../Icon';
-
-type ConditionalValue<T extends string = string> =
-  | {
-      /**
-       * Array of the currently selected segmented button values.
-       */
-      value: T[];
-      /**
-       * Support multiple selected options.
-       */
-      multiSelect: true;
-      /**
-       * Function to execute on selection change
-       */
-      onValueChange: (value: T[]) => void;
-    }
-  | {
-      /**
-       * Value of the currently selected segmented button.
-       */
-      value: T;
-      /**
-       * Support multiple selected options.
-       */
-      multiSelect?: false;
-      /**
-       * Function to execute on selection change
-       */
-      onValueChange: (value: T) => void;
-    };
-
-export type Props<T extends string = string> = {
-  /**
-   * Buttons to display as options in toggle button.
-   * Button should contain the following properties:
-   * - `value`: value of button (required)
-   * - `icon`: icon to display for the item
-   * - `disabled`: whether the button is disabled
-   * - `accessibilityLabel`: acccessibility label for the button. This is read by the screen reader when the user taps the button.
-   * - `checkedColor`: custom color for checked Text and Icon
-   * - `uncheckedColor`: custom color for unchecked Text and Icon
-   * - `onPress`: callback that is called when button is pressed
-   * - `label`: label text of the button
-   * - `showSelectedCheck`: show optional check icon to indicate selected state
-   * - `style`: pass additional styles for the button
-   * - `testID`: testID to be used on tests
-   */
-  buttons: {
-    value: T;
-    icon?: IconSource;
-    disabled?: boolean;
-    accessibilityLabel?: string;
-    checkedColor?: string;
-    uncheckedColor?: string;
-    onPress?: (event: GestureResponderEvent) => void;
-    label?: string;
-    showSelectedCheck?: boolean;
-    style?: StyleProp<ViewStyle>;
-    labelStyle?: StyleProp<TextStyle>;
-    testID?: string;
-  }[];
-  /**
-   * Density is applied to the height, to allow usage in denser UIs
-   */
-  density?: 'regular' | 'small' | 'medium' | 'high';
-  style?: StyleProp<ViewStyle>;
-  theme?: ThemeProp;
-} & ConditionalValue<T>;
-
-/**
- * Segmented buttons can be used to select options, switch views or sort elements.</br>
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { SafeAreaView, StyleSheet } from 'react-native';
- * import { SegmentedButtons } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [value, setValue] = React.useState('');
- *
- *   return (
- *     <SafeAreaView style={styles.container}>
- *       <SegmentedButtons
- *         value={value}
- *         onValueChange={setValue}
- *         buttons={[
- *           {
- *             value: 'walk',
- *             label: 'Walking',
- *           },
- *           {
- *             value: 'train',
- *             label: 'Transit',
- *           },
- *           { value: 'drive', label: 'Driving' },
- *         ]}
- *       />
- *     </SafeAreaView>
- *   );
- * };
- *
- * const styles = StyleSheet.create({
- *   container: {
- *     flex: 1,
- *     alignItems: 'center',
- *   },
- * });
- *
- * export default MyComponent;
- *```
- */
-const SegmentedButtons = <T extends string = string>({
-  value,
-  onValueChange,
-  buttons,
-  multiSelect,
-  density,
-  style,
-  theme: themeOverrides,
-}: Props<T>) => {
-  const theme = useInternalTheme(themeOverrides);
-
-  return (
-    <View style={[styles.row, style]}>
-      {buttons.map((item, i) => {
-        const disabledChildStyle = getDisabledSegmentedButtonStyle({
-          theme,
-          buttons,
-          index: i,
-        });
-        const segment =
-          i === 0 ? 'first' : i === buttons.length - 1 ? 'last' : undefined;
-
-        const checked =
-          multiSelect && Array.isArray(value)
-            ? value.includes(item.value)
-            : value === item.value;
-
-        const onPress = (e: GestureResponderEvent) => {
-          item.onPress?.(e);
-
-          const nextValue =
-            multiSelect && Array.isArray(value)
-              ? checked
-                ? value.filter((val) => item.value !== val)
-                : [...value, item.value]
-              : item.value;
-
-          // @ts-expect-error: TS doesn't preserve types after destructuring, so the type isn't inferred correctly
-          onValueChange(nextValue);
-        };
-
-        return (
-          <SegmentedButtonItem
-            {...item}
-            key={i}
-            checked={checked}
-            segment={segment}
-            density={density}
-            onPress={onPress}
-            style={[item.style, disabledChildStyle]}
-            labelStyle={item.labelStyle}
-            theme={theme}
-          />
-        );
-      })}
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  row: {
-    flexDirection: 'row',
-  },
-});
-
-export default SegmentedButtons;
-
-// @component-docs ignore-next-line
-export { SegmentedButtons as SegmentedButtons };

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

@@ -1,179 +0,0 @@
-import { StyleSheet, ViewStyle } from 'react-native';
-
-import color from 'color';
-
-import { black, white } from '../../styles/themes/v2/colors';
-import type { InternalTheme } from '../../types';
-
-type BaseProps = {
-  theme: InternalTheme;
-  disabled?: boolean;
-  checked: boolean;
-};
-
-type SegmentedButtonProps = {
-  checkedColor?: string;
-  uncheckedColor?: string;
-} & BaseProps;
-
-const DEFAULT_PADDING = 9;
-
-export const getSegmentedButtonDensityPadding = ({
-  density,
-}: {
-  density?: 'regular' | 'small' | 'medium' | 'high';
-}) => {
-  let padding = DEFAULT_PADDING;
-
-  switch (density) {
-    case 'small':
-      return padding - 2;
-    case 'medium':
-      return padding - 4;
-    case 'high':
-      return padding - 8;
-    default:
-      return padding;
-  }
-};
-
-export const getDisabledSegmentedButtonStyle = ({
-  theme,
-  index,
-  buttons,
-}: {
-  theme: InternalTheme;
-  buttons: { disabled?: boolean }[];
-  index: number;
-}): ViewStyle => {
-  const width = getSegmentedButtonBorderWidth({ theme });
-  const isDisabled = buttons[index]?.disabled;
-  const isNextDisabled = buttons[index + 1]?.disabled;
-
-  if (!isDisabled && isNextDisabled) {
-    return {
-      borderRightWidth: width,
-    };
-  }
-  return {};
-};
-
-export const getSegmentedButtonBorderRadius = ({
-  segment,
-  theme,
-}: {
-  theme: InternalTheme;
-  segment?: 'first' | 'last';
-}): ViewStyle => {
-  if (segment === 'first') {
-    return {
-      borderTopRightRadius: 0,
-      borderBottomRightRadius: 0,
-      ...(theme.isV3 && { borderRightWidth: 0 }),
-    };
-  } else if (segment === 'last') {
-    return {
-      borderTopLeftRadius: 0,
-      borderBottomLeftRadius: 0,
-    };
-  } else {
-    return {
-      borderRadius: 0,
-      ...(theme.isV3 && { borderRightWidth: 0 }),
-    };
-  }
-};
-
-const getSegmentedButtonBackgroundColor = ({ checked, theme }: BaseProps) => {
-  if (checked) {
-    if (theme.isV3) {
-      return theme.colors.secondaryContainer;
-    } else {
-      return color(theme.colors.primary).alpha(0.12).rgb().string();
-    }
-  }
-  return 'transparent';
-};
-
-const getSegmentedButtonBorderColor = ({
-  theme,
-  disabled,
-  checked,
-}: BaseProps) => {
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.surfaceDisabled;
-    }
-    return theme.colors.outline;
-  }
-  if (checked) {
-    return theme.colors.primary;
-  }
-
-  return color(theme.dark ? white : black)
-    .alpha(0.29)
-    .rgb()
-    .string();
-};
-
-const getSegmentedButtonBorderWidth = ({
-  theme,
-}: Omit<BaseProps, 'disabled' | 'checked'>) => {
-  if (theme.isV3) {
-    return 1;
-  }
-
-  return StyleSheet.hairlineWidth;
-};
-
-const getSegmentedButtonTextColor = ({
-  theme,
-  disabled,
-  checked,
-  checkedColor,
-  uncheckedColor,
-}: SegmentedButtonProps) => {
-  if (theme.isV3) {
-    if (disabled) {
-      return theme.colors.onSurfaceDisabled;
-    }
-    if (checked) {
-      return checkedColor ?? theme.colors.onSecondaryContainer;
-    }
-    return uncheckedColor ?? theme.colors.onSurface;
-  }
-
-  if (disabled) {
-    return theme.colors.disabled;
-  }
-  // Primary color is used for checked state too.
-  return theme.colors.primary;
-};
-
-export const getSegmentedButtonColors = ({
-  theme,
-  disabled,
-  checked,
-  checkedColor,
-  uncheckedColor,
-}: SegmentedButtonProps) => {
-  const backgroundColor = getSegmentedButtonBackgroundColor({
-    theme,
-    checked,
-  });
-  const borderColor = getSegmentedButtonBorderColor({
-    theme,
-    disabled,
-    checked,
-  });
-  const textColor = getSegmentedButtonTextColor({
-    theme,
-    disabled,
-    checked,
-    checkedColor,
-    uncheckedColor,
-  });
-  const borderWidth = getSegmentedButtonBorderWidth({ theme });
-
-  return { backgroundColor, borderColor, textColor, borderWidth };
-};