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

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

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

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

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

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

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