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

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

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

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

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