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

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

@@ -0,0 +1,474 @@
+import { MutableRefObject } from 'react';
+import {
+  Animated,
+  ColorValue,
+  I18nManager,
+  Platform,
+  ViewStyle,
+} from 'react-native';
+
+import color from 'color';
+
+import { black, white } from '../../styles/themes/v2/colors';
+import type { InternalTheme } from '../../types';
+import getContrastingColor from '../../utils/getContrastingColor';
+
+type GetCombinedStylesProps = {
+  isAnimatedFromRight: boolean;
+  isIconStatic: boolean;
+  distance: number;
+  animFAB: Animated.Value;
+};
+
+type CombinedStyles = {
+  innerWrapper: Animated.WithAnimatedValue<ViewStyle>;
+  iconWrapper: Animated.WithAnimatedValue<ViewStyle>;
+  absoluteFill: Animated.WithAnimatedValue<ViewStyle>;
+};
+
+type Variant = 'primary' | 'secondary' | 'tertiary' | 'surface';
+
+type BaseProps = {
+  isVariant: (variant: Variant) => boolean;
+  theme: InternalTheme;
+  disabled?: boolean;
+};
+
+export const getCombinedStyles = ({
+  isAnimatedFromRight,
+  isIconStatic,
+  distance,
+  animFAB,
+}: GetCombinedStylesProps): CombinedStyles => {
+  const { isRTL } = I18nManager;
+
+  const defaultPositionStyles = { left: -distance, right: undefined };
+
+  const combinedStyles: CombinedStyles = {
+    innerWrapper: {
+      ...defaultPositionStyles,
+    },
+    iconWrapper: {
+      ...defaultPositionStyles,
+    },
+    absoluteFill: {},
+  };
+
+  const animatedFromRight = isAnimatedFromRight && !isRTL;
+  const animatedFromRightRTL = isAnimatedFromRight && isRTL;
+  const animatedFromLeft = !isAnimatedFromRight && !isRTL;
+  const animatedFromLeftRTL = !isAnimatedFromRight && isRTL;
+
+  if (animatedFromRight) {
+    combinedStyles.innerWrapper.transform = [
+      {
+        translateX: animFAB.interpolate({
+          inputRange: [distance, 0],
+          outputRange: [distance, 0],
+        }),
+      },
+    ];
+    combinedStyles.iconWrapper.transform = [
+      {
+        translateX: isIconStatic ? 0 : animFAB,
+      },
+    ];
+    combinedStyles.absoluteFill.transform = [
+      {
+        translateX: animFAB.interpolate({
+          inputRange: [distance, 0],
+          outputRange: [Math.abs(distance) / 2, Math.abs(distance)],
+        }),
+      },
+    ];
+  } else if (animatedFromRightRTL) {
+    combinedStyles.iconWrapper.transform = [
+      {
+        translateX: isIconStatic
+          ? 0
+          : animFAB.interpolate({
+              inputRange: [distance, 0],
+              outputRange: [-distance, 0],
+            }),
+      },
+    ];
+    combinedStyles.innerWrapper.transform = [
+      {
+        translateX: animFAB.interpolate({
+          inputRange: [distance, 0],
+          outputRange: [-distance, 0],
+        }),
+      },
+    ];
+    combinedStyles.absoluteFill.transform = [
+      {
+        translateX: animFAB.interpolate({
+          inputRange: [distance, 0],
+          outputRange: [0, distance],
+        }),
+      },
+    ];
+  } else if (animatedFromLeft) {
+    combinedStyles.iconWrapper.transform = [
+      {
+        translateX: isIconStatic
+          ? distance
+          : animFAB.interpolate({
+              inputRange: [0, distance],
+              outputRange: [distance, distance * 2],
+            }),
+      },
+    ];
+    combinedStyles.innerWrapper.transform = [
+      {
+        translateX: animFAB,
+      },
+    ];
+    combinedStyles.absoluteFill.transform = [
+      {
+        translateX: animFAB.interpolate({
+          inputRange: [0, distance],
+          outputRange: [0, Math.abs(distance) / 2],
+        }),
+      },
+    ];
+  } else if (animatedFromLeftRTL) {
+    combinedStyles.iconWrapper.transform = [
+      {
+        translateX: isIconStatic
+          ? animFAB.interpolate({
+              inputRange: [0, distance],
+              outputRange: [-distance, -distance * 2],
+            })
+          : -distance,
+      },
+    ];
+    combinedStyles.innerWrapper.transform = [
+      {
+        translateX: animFAB.interpolate({
+          inputRange: [0, distance],
+          outputRange: [0, -distance],
+        }),
+      },
+    ];
+    combinedStyles.absoluteFill.transform = [
+      {
+        translateX: animFAB.interpolate({
+          inputRange: [0, distance],
+          outputRange: [0, -distance],
+        }),
+      },
+    ];
+  }
+
+  return combinedStyles;
+};
+
+const getBackgroundColor = ({
+  theme,
+  isVariant,
+  disabled,
+  customBackgroundColor,
+}: BaseProps & { customBackgroundColor?: ColorValue }) => {
+  if (customBackgroundColor && !disabled) {
+    return customBackgroundColor;
+  }
+
+  if (theme.isV3) {
+    if (disabled) {
+      return theme.colors.surfaceDisabled;
+    }
+
+    if (isVariant('primary')) {
+      return theme.colors.primaryContainer;
+    }
+
+    if (isVariant('secondary')) {
+      return theme.colors.secondaryContainer;
+    }
+
+    if (isVariant('tertiary')) {
+      return theme.colors.tertiaryContainer;
+    }
+
+    if (isVariant('surface')) {
+      return theme.colors.elevation.level3;
+    }
+  }
+
+  if (disabled) {
+    if (theme.dark) {
+      return color(white).alpha(0.12).rgb().string();
+    }
+    return color(black).alpha(0.12).rgb().string();
+  }
+
+  //@ts-ignore
+  return theme.colors?.accent;
+};
+
+const getForegroundColor = ({
+  theme,
+  isVariant,
+  disabled,
+  backgroundColor,
+  customColor,
+}: BaseProps & { backgroundColor: string; customColor?: string }) => {
+  if (typeof customColor !== 'undefined' && !disabled) {
+    return customColor;
+  }
+
+  if (theme.isV3) {
+    if (disabled) {
+      return theme.colors.onSurfaceDisabled;
+    }
+
+    if (isVariant('primary')) {
+      return theme.colors.onPrimaryContainer;
+    }
+
+    if (isVariant('secondary')) {
+      return theme.colors.onSecondaryContainer;
+    }
+
+    if (isVariant('tertiary')) {
+      return theme.colors.onTertiaryContainer;
+    }
+
+    if (isVariant('surface')) {
+      return theme.colors.primary;
+    }
+  }
+
+  if (disabled) {
+    if (theme.dark) {
+      return color(white).alpha(0.32).rgb().string();
+    }
+    return color(black).alpha(0.32).rgb().string();
+  }
+
+  if (backgroundColor) {
+    return getContrastingColor(
+      backgroundColor || white,
+      white,
+      'rgba(0, 0, 0, .54)'
+    );
+  }
+
+  return getContrastingColor(white, white, 'rgba(0, 0, 0, .54)');
+};
+
+export const getFABColors = ({
+  theme,
+  variant,
+  disabled,
+  customColor,
+  customBackgroundColor,
+  customRippleColor,
+}: {
+  theme: InternalTheme;
+  variant: string;
+  disabled?: boolean;
+  customColor?: string;
+  customBackgroundColor?: ColorValue;
+  customRippleColor?: ColorValue;
+}) => {
+  const isVariant = (variantToCompare: Variant) => {
+    return variant === variantToCompare;
+  };
+
+  const baseFABColorProps = { theme, isVariant, disabled };
+
+  const backgroundColor = getBackgroundColor({
+    ...baseFABColorProps,
+    customBackgroundColor,
+  });
+
+  const foregroundColor = getForegroundColor({
+    ...baseFABColorProps,
+    customColor,
+    backgroundColor,
+  });
+
+  return {
+    backgroundColor,
+    foregroundColor,
+    rippleColor:
+      customRippleColor || color(foregroundColor).alpha(0.12).rgb().string(),
+  };
+};
+
+const getLabelColor = ({ theme }: { theme: InternalTheme }) => {
+  if (theme.isV3) {
+    return theme.colors.onSurface;
+  }
+
+  if (theme.dark) {
+    return theme.colors.text;
+  }
+
+  return color(theme.colors.text).fade(0.54).rgb().string();
+};
+
+const getBackdropColor = ({
+  theme,
+  customBackdropColor,
+}: {
+  theme: InternalTheme;
+  customBackdropColor?: string;
+}) => {
+  if (customBackdropColor) {
+    return customBackdropColor;
+  }
+  if (theme.isV3) {
+    return color(theme.colors.background).alpha(0.95).rgb().string();
+  }
+  return theme.colors?.backdrop;
+};
+
+const getStackedFABBackgroundColor = ({ theme }: { theme: InternalTheme }) => {
+  if (theme.isV3) {
+    return theme.colors.elevation.level3;
+  }
+  return theme.colors.surface;
+};
+
+export const getFABGroupColors = ({
+  theme,
+  customBackdropColor,
+}: {
+  theme: InternalTheme;
+  customBackdropColor?: string;
+}) => {
+  return {
+    labelColor: getLabelColor({ theme }),
+    backdropColor: getBackdropColor({ theme, customBackdropColor }),
+    stackedFABBackgroundColor: getStackedFABBackgroundColor({ theme }),
+  };
+};
+
+const standardSize = {
+  height: 56,
+  width: 56,
+  borderRadius: 28,
+};
+const smallSize = {
+  height: 40,
+  width: 40,
+  borderRadius: 28,
+};
+const v3SmallSize = {
+  height: 40,
+  width: 40,
+};
+const v3MediumSize = {
+  height: 56,
+  width: 56,
+};
+const v3LargeSize = {
+  height: 96,
+  width: 96,
+};
+
+const getCustomFabSize = (customSize: number, roundness: number) => ({
+  height: customSize,
+  width: customSize,
+  borderRadius: roundness === 0 ? 0 : customSize / roundness,
+});
+
+export const getFabStyle = ({
+  size,
+  theme,
+  customSize,
+}: {
+  customSize?: number;
+  size: 'small' | 'medium' | 'large';
+  theme: InternalTheme;
+}) => {
+  const { isV3, roundness } = theme;
+
+  if (customSize) return getCustomFabSize(customSize, roundness);
+
+  if (isV3) {
+    switch (size) {
+      case 'small':
+        return { ...v3SmallSize, borderRadius: 3 * roundness };
+      case 'medium':
+        return { ...v3MediumSize, borderRadius: 4 * roundness };
+      case 'large':
+        return { ...v3LargeSize, borderRadius: 7 * roundness };
+    }
+  }
+
+  if (size === 'small') {
+    return smallSize;
+  }
+  return standardSize;
+};
+
+const extended = {
+  height: 48,
+  paddingHorizontal: 16,
+};
+
+const v3Extended = {
+  height: 56,
+  borderRadius: 16,
+  paddingHorizontal: 16,
+};
+
+const getExtendedFabDimensions = (customSize: number) => ({
+  height: customSize,
+  paddingHorizontal: 16,
+});
+
+export const getExtendedFabStyle = ({
+  customSize,
+  theme,
+}: {
+  customSize?: number;
+  theme: InternalTheme;
+}) => {
+  if (customSize) return getExtendedFabDimensions(customSize);
+
+  const { isV3 } = theme;
+
+  return isV3 ? v3Extended : extended;
+};
+
+let cachedContext: CanvasRenderingContext2D | null = null;
+
+const getCanvasContext = () => {
+  if (cachedContext) {
+    return cachedContext;
+  }
+
+  const canvas = document.createElement('canvas');
+  cachedContext = canvas.getContext('2d');
+
+  return cachedContext;
+};
+
+export const getLabelSizeWeb = (ref: MutableRefObject<HTMLElement | null>) => {
+  if (Platform.OS !== 'web' || ref.current === null) {
+    return null;
+  }
+
+  const canvasContext = getCanvasContext();
+
+  if (!canvasContext) {
+    return null;
+  }
+
+  const elementStyles = window.getComputedStyle(ref.current);
+  canvasContext.font = elementStyles.font;
+
+  const metrics = canvasContext.measureText(ref.current.innerText);
+
+  return {
+    width: metrics.width,
+    height:
+      (metrics.fontBoundingBoxAscent ?? 0) +
+      (metrics.fontBoundingBoxDescent ?? 0),
+  };
+};

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

@@ -0,0 +1,168 @@
+import * as React from 'react';
+import {
+  Animated,
+  LayoutChangeEvent,
+  StyleProp,
+  StyleSheet,
+  TextStyle,
+} from 'react-native';
+
+import { getTextColor } from './utils';
+import { useInternalTheme } from '../../core/theming';
+import type { $Omit, ThemeProp } from '../../types';
+import AnimatedText from '../Typography/AnimatedText';
+
+export type Props = $Omit<
+  $Omit<React.ComponentPropsWithRef<typeof AnimatedText>, 'padding'>,
+  'type'
+> & {
+  /**
+   * Type of the helper text.
+   */
+  type: 'error' | 'info';
+  /**
+   * Text content of the HelperText.
+   */
+  children: React.ReactNode;
+  /**
+   * Whether to display the helper text.
+   */
+  visible?: boolean;
+  /**
+   * Whether to apply padding to the helper text.
+   */
+  padding?: 'none' | 'normal';
+  /**
+   * Whether the text input tied with helper text is disabled.
+   */
+  disabled?: boolean;
+  style?: StyleProp<TextStyle>;
+  /**
+   * @optional
+   */
+  theme?: ThemeProp;
+  /**
+   * TestID used for testing purposes
+   */
+  testID?: string;
+};
+
+/**
+ * Helper text is used in conjuction with input elements to provide additional hints for the user.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { View } from 'react-native';
+ * import { HelperText, TextInput } from 'react-native-paper';
+ *
+ * const MyComponent = () => {
+ *   const [text, setText] = React.useState('');
+ *
+ *    const onChangeText = text => setText(text);
+ *
+ *   const hasErrors = () => {
+ *     return !text.includes('@');
+ *   };
+ *
+ *  return (
+ *     <View>
+ *       <TextInput label="Email" value={text} onChangeText={onChangeText} />
+ *       <HelperText type="error" visible={hasErrors()}>
+ *         Email address is invalid!
+ *       </HelperText>
+ *     </View>
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ */
+const HelperText = ({
+  style,
+  type = 'info',
+  visible = true,
+  theme: themeOverrides,
+  onLayout,
+  padding = 'normal',
+  disabled,
+  ...rest
+}: Props) => {
+  const theme = useInternalTheme(themeOverrides);
+  const { current: shown } = React.useRef<Animated.Value>(
+    new Animated.Value(visible ? 1 : 0)
+  );
+
+  let { current: textHeight } = React.useRef<number>(0);
+
+  const { scale } = theme.animation;
+
+  const { maxFontSizeMultiplier = 1.5 } = rest;
+
+  React.useEffect(() => {
+    if (visible) {
+      // show text
+      Animated.timing(shown, {
+        toValue: 1,
+        duration: 150 * scale,
+        useNativeDriver: true,
+      }).start();
+    } else {
+      // hide text
+      Animated.timing(shown, {
+        toValue: 0,
+        duration: 180 * scale,
+        useNativeDriver: true,
+      }).start();
+    }
+  }, [visible, scale, shown]);
+
+  const handleTextLayout = (e: LayoutChangeEvent) => {
+    onLayout?.(e);
+    textHeight = e.nativeEvent.layout.height;
+  };
+
+  const textColor = getTextColor({ theme, disabled, type });
+
+  return (
+    <AnimatedText
+      onLayout={handleTextLayout}
+      style={[
+        styles.text,
+        padding !== 'none' ? styles.padding : {},
+        {
+          color: textColor,
+          opacity: shown,
+          transform:
+            visible && type === 'error'
+              ? [
+                  {
+                    translateY: shown.interpolate({
+                      inputRange: [0, 1],
+                      outputRange: [-textHeight / 2, 0],
+                    }),
+                  },
+                ]
+              : [],
+        },
+        style,
+      ]}
+      maxFontSizeMultiplier={maxFontSizeMultiplier}
+      {...rest}
+    >
+      {rest.children}
+    </AnimatedText>
+  );
+};
+
+const styles = StyleSheet.create({
+  text: {
+    fontSize: 12,
+    paddingVertical: 4,
+  },
+  padding: {
+    paddingHorizontal: 12,
+  },
+});
+
+export default HelperText;

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

@@ -0,0 +1,30 @@
+import color from 'color';
+
+import type { InternalTheme } from '../../types';
+
+type BaseProps = {
+  theme: InternalTheme;
+  disabled?: boolean;
+  type?: 'error' | 'info';
+};
+
+export function getTextColor({ theme, disabled, type }: BaseProps) {
+  const { colors, dark } = theme;
+
+  if (type === 'error') {
+    return colors?.error;
+  }
+
+  if (theme.isV3) {
+    if (disabled) {
+      return theme.colors.onSurfaceDisabled;
+    } else {
+      return theme.colors.onSurfaceVariant;
+    }
+  }
+
+  return color(theme?.colors?.text)
+    .alpha(dark ? 0.7 : 0.54)
+    .rgb()
+    .string();
+}