react-native-acoustic-connect-beta 19.0.25 → 19.0.27

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

@@ -1,376 +0,0 @@
-import * as React from 'react';
-import {
-  Animated,
-  Platform,
-  ShadowStyleIOS,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { useInternalTheme } from '../core/theming';
-import overlay, { isAnimatedValue } from '../styles/overlay';
-import shadow from '../styles/shadow';
-import type { ThemeProp, MD3Elevation } from '../types';
-import { forwardRef } from '../utils/forwardRef';
-import { splitStyles } from '../utils/splitStyles';
-
-type Elevation = 0 | 1 | 2 | 3 | 4 | 5 | Animated.Value;
-
-export type Props = Omit<React.ComponentPropsWithRef<typeof View>, 'style'> & {
-  /**
-   * Content of the `Surface`.
-   */
-  children: React.ReactNode;
-  style?: Animated.WithAnimatedValue<StyleProp<ViewStyle>>;
-  /**
-   * @supported Available in v5.x with theme version 3
-   * Changes shadows and background on iOS and Android.
-   * Used to create UI hierarchy between components.
-   *
-   * Note: If `mode` is set to `flat`, Surface doesn't have a shadow.
-   *
-   * Note: In version 2 the `elevation` prop was accepted via `style` prop i.e. `style={{ elevation: 4 }}`.
-   * It's no longer supported with theme version 3 and you should use `elevation` property instead.
-   */
-  elevation?: Elevation;
-  /**
-   * @supported Available in v5.x with theme version 3
-   * Mode of the Surface.
-   * - `elevated` - Surface with a shadow and background color corresponding to set `elevation` value.
-   * - `flat` - Surface without a shadow, with the background color corresponding to set `elevation` value.
-   */
-  mode?: 'flat' | 'elevated';
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-  /**
-   * TestID used for testing purposes
-   */
-  testID?: string;
-  ref?: React.RefObject<View>;
-};
-
-const MD2Surface = forwardRef<View, Props>(
-  ({ style, theme: overrideTheme, ...rest }: Omit<Props, 'elevation'>, ref) => {
-    const { elevation = 4 } = (StyleSheet.flatten(style) || {}) as ViewStyle;
-    const { dark: isDarkTheme, mode, colors } = useInternalTheme(overrideTheme);
-
-    return (
-      <Animated.View
-        ref={ref}
-        {...rest}
-        style={[
-          {
-            backgroundColor:
-              isDarkTheme && mode === 'adaptive'
-                ? overlay(elevation, colors?.surface)
-                : colors?.surface,
-          },
-          elevation ? shadow(elevation) : null,
-          style,
-        ]}
-      />
-    );
-  }
-);
-
-const outerLayerStyleProperties: (keyof ViewStyle)[] = [
-  'position',
-  'alignSelf',
-  'top',
-  'right',
-  'bottom',
-  'left',
-  'start',
-  'end',
-  'flex',
-  'flexShrink',
-  'flexGrow',
-  'width',
-  'height',
-  'transform',
-  'opacity',
-];
-
-const shadowColor = '#000';
-const iOSShadowOutputRanges = [
-  {
-    shadowOpacity: 0.15,
-    height: [0, 1, 2, 4, 6, 8],
-    shadowRadius: [0, 3, 6, 8, 10, 12],
-  },
-  {
-    shadowOpacity: 0.3,
-    height: [0, 1, 1, 1, 2, 4],
-    shadowRadius: [0, 1, 2, 3, 3, 4],
-  },
-];
-const inputRange = [0, 1, 2, 3, 4, 5];
-function getStyleForShadowLayer(
-  elevation: Elevation,
-  layer: 0 | 1
-): Animated.WithAnimatedValue<ShadowStyleIOS> {
-  if (isAnimatedValue(elevation)) {
-    return {
-      shadowColor,
-      shadowOpacity: elevation.interpolate({
-        inputRange: [0, 1],
-        outputRange: [0, iOSShadowOutputRanges[layer].shadowOpacity],
-        extrapolate: 'clamp',
-      }),
-      shadowOffset: {
-        width: 0,
-        height: elevation.interpolate({
-          inputRange,
-          outputRange: iOSShadowOutputRanges[layer].height,
-        }),
-      },
-      shadowRadius: elevation.interpolate({
-        inputRange,
-        outputRange: iOSShadowOutputRanges[layer].shadowRadius,
-      }),
-    };
-  }
-
-  return {
-    shadowColor,
-    shadowOpacity: elevation ? iOSShadowOutputRanges[layer].shadowOpacity : 0,
-    shadowOffset: {
-      width: 0,
-      height: iOSShadowOutputRanges[layer].height[elevation],
-    },
-    shadowRadius: iOSShadowOutputRanges[layer].shadowRadius[elevation],
-  };
-}
-
-const SurfaceIOS = forwardRef<
-  View,
-  Omit<Props, 'elevation'> & {
-    elevation: Elevation;
-    backgroundColor?: string | Animated.AnimatedInterpolation<string | number>;
-  }
->(
-  (
-    {
-      elevation,
-      style,
-      backgroundColor,
-      testID,
-      children,
-      mode = 'elevated',
-      ...props
-    },
-    ref
-  ) => {
-    const [outerLayerViewStyles, innerLayerViewStyles] = React.useMemo(() => {
-      const flattenedStyles = (StyleSheet.flatten(style) || {}) as ViewStyle;
-
-      const [filteredStyles, outerLayerStyles, borderRadiusStyles] =
-        splitStyles(
-          flattenedStyles,
-          (style) =>
-            outerLayerStyleProperties.includes(style) ||
-            style.startsWith('margin'),
-          (style) => style.startsWith('border') && style.endsWith('Radius')
-        );
-
-      if (
-        process.env.NODE_ENV !== 'production' &&
-        filteredStyles.overflow === 'hidden' &&
-        elevation !== 0
-      ) {
-        console.warn(
-          'When setting overflow to hidden on Surface the shadow will not be displayed correctly. Wrap the content of your component in a separate View with the overflow style.'
-        );
-      }
-
-      const bgColor = flattenedStyles.backgroundColor || backgroundColor;
-
-      const isElevated = mode === 'elevated';
-
-      const outerLayerViewStyles = {
-        ...(isElevated && getStyleForShadowLayer(elevation, 0)),
-        ...outerLayerStyles,
-        ...borderRadiusStyles,
-        backgroundColor: bgColor,
-      };
-
-      const innerLayerViewStyles = {
-        ...(isElevated && getStyleForShadowLayer(elevation, 1)),
-        ...filteredStyles,
-        ...borderRadiusStyles,
-        flex: flattenedStyles.height ? 1 : undefined,
-        backgroundColor: bgColor,
-      };
-
-      return [outerLayerViewStyles, innerLayerViewStyles];
-    }, [style, elevation, backgroundColor, mode]);
-
-    return (
-      <Animated.View
-        ref={ref}
-        style={outerLayerViewStyles}
-        testID={`${testID}-outer-layer`}
-      >
-        <Animated.View {...props} style={innerLayerViewStyles} testID={testID}>
-          {children}
-        </Animated.View>
-      </Animated.View>
-    );
-  }
-);
-
-/**
- * Surface is a basic container that can give depth to an element with elevation shadow.
- * On dark theme with `adaptive` mode, surface is constructed by also placing a semi-transparent white overlay over a component surface.
- * See [Dark Theme](https://callstack.github.io/react-native-paper/docs/guides/theming#dark-theme) for more information.
- * Overlay and shadow can be applied by specifying the `elevation` property both on Android and iOS.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Surface, Text } from 'react-native-paper';
- * import { StyleSheet } from 'react-native';
- *
- * const MyComponent = () => (
- *   <Surface style={styles.surface} elevation={4}>
- *      <Text>Surface</Text>
- *   </Surface>
- * );
- *
- * export default MyComponent;
- *
- * const styles = StyleSheet.create({
- *   surface: {
- *     padding: 8,
- *     height: 80,
- *     width: 80,
- *     alignItems: 'center',
- *     justifyContent: 'center',
- *   },
- * });
- * ```
- */
-const Surface = forwardRef<View, Props>(
-  (
-    {
-      elevation = 1,
-      children,
-      theme: overridenTheme,
-      style,
-      testID = 'surface',
-      mode = 'elevated',
-      ...props
-    }: Props,
-    ref
-  ) => {
-    const theme = useInternalTheme(overridenTheme);
-
-    if (!theme.isV3)
-      return (
-        <MD2Surface {...props} theme={theme} style={style} ref={ref}>
-          {children}
-        </MD2Surface>
-      );
-
-    const { colors } = theme;
-
-    const inputRange = [0, 1, 2, 3, 4, 5];
-
-    const backgroundColor = (() => {
-      if (isAnimatedValue(elevation)) {
-        return elevation.interpolate({
-          inputRange,
-          outputRange: inputRange.map((elevation) => {
-            return colors.elevation?.[`level${elevation as MD3Elevation}`];
-          }),
-        });
-      }
-
-      return colors.elevation?.[`level${elevation}`];
-    })();
-
-    const isElevated = mode === 'elevated';
-
-    if (Platform.OS === 'web') {
-      const { pointerEvents = 'auto' } = props;
-      return (
-        <Animated.View
-          {...props}
-          pointerEvents={pointerEvents}
-          ref={ref}
-          testID={testID}
-          style={[
-            { backgroundColor },
-            elevation && isElevated ? shadow(elevation, theme.isV3) : null,
-            style,
-          ]}
-        >
-          {children}
-        </Animated.View>
-      );
-    }
-
-    if (Platform.OS === 'android') {
-      const elevationLevel = [0, 3, 6, 9, 12, 15];
-
-      const getElevationAndroid = () => {
-        if (isAnimatedValue(elevation)) {
-          return elevation.interpolate({
-            inputRange,
-            outputRange: elevationLevel,
-          });
-        }
-
-        return elevationLevel[elevation];
-      };
-
-      const { margin, padding, transform, borderRadius } = (StyleSheet.flatten(
-        style
-      ) || {}) as ViewStyle;
-
-      const outerLayerStyles = { margin, padding, transform, borderRadius };
-      const sharedStyle = [{ backgroundColor }, style];
-
-      return (
-        <Animated.View
-          {...props}
-          testID={testID}
-          ref={ref}
-          style={[
-            {
-              backgroundColor,
-              transform,
-            },
-            outerLayerStyles,
-            sharedStyle,
-            isElevated && {
-              elevation: getElevationAndroid(),
-            },
-          ]}
-        >
-          {children}
-        </Animated.View>
-      );
-    }
-
-    return (
-      <SurfaceIOS
-        {...props}
-        ref={ref}
-        elevation={elevation}
-        backgroundColor={backgroundColor}
-        style={style}
-        testID={testID}
-        mode={mode}
-      >
-        {children}
-      </SurfaceIOS>
-    );
-  }
-);
-
-export default Surface;

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

@@ -1,108 +0,0 @@
-import * as React from 'react';
-import {
-  NativeModules,
-  Platform,
-  StyleProp,
-  Switch as NativeSwitch,
-  ViewStyle,
-} from 'react-native';
-
-import { getSwitchColor } from './utils';
-import { useInternalTheme } from '../../core/theming';
-import type { ThemeProp } from '../../types';
-
-const version = NativeModules.PlatformConstants
-  ? NativeModules.PlatformConstants.reactNativeVersion
-  : undefined;
-
-export type Props = React.ComponentPropsWithRef<typeof NativeSwitch> & {
-  /**
-   * Disable toggling the switch.
-   */
-  disabled?: boolean;
-  /**
-   * Value of the switch, true means 'on', false means 'off'.
-   */
-  value?: boolean;
-  /**
-   * Custom color for switch.
-   */
-  color?: string;
-  /**
-   * Callback called with the new value when it changes.
-   */
-  onValueChange?: Function;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-/**
- * Switch is a visual toggle between two mutually exclusive states — on and off.
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { Switch } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [isSwitchOn, setIsSwitchOn] = React.useState(false);
- *
- *   const onToggleSwitch = () => setIsSwitchOn(!isSwitchOn);
- *
- *   return <Switch value={isSwitchOn} onValueChange={onToggleSwitch} />;
- * };
- *
- * export default MyComponent;
- * ```
- */
-const Switch = ({
-  value,
-  disabled,
-  onValueChange,
-  color,
-  theme: themeOverrides,
-  ...rest
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { checkedColor, onTintColor, thumbTintColor } = getSwitchColor({
-    theme,
-    disabled,
-    value,
-    color,
-  });
-
-  const props =
-    version && version.major === 0 && version.minor <= 56
-      ? {
-          onTintColor,
-          thumbTintColor,
-        }
-      : Platform.OS === 'web'
-      ? {
-          activeTrackColor: onTintColor,
-          thumbColor: thumbTintColor,
-          activeThumbColor: checkedColor,
-        }
-      : {
-          thumbColor: thumbTintColor,
-          trackColor: {
-            true: onTintColor,
-            false: onTintColor,
-          },
-        };
-
-  return (
-    <NativeSwitch
-      value={value}
-      disabled={disabled}
-      onValueChange={disabled ? undefined : onValueChange}
-      {...props}
-      {...rest}
-    />
-  );
-};
-
-export default Switch;

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

@@ -1,113 +0,0 @@
-import { Platform } from 'react-native';
-
-import setColor from 'color';
-
-import {
-  grey400,
-  grey800,
-  grey50,
-  grey700,
-  white,
-  black,
-} from '../../styles/themes/v2/colors';
-import type { InternalTheme } from '../../types';
-
-type BaseProps = {
-  theme: InternalTheme;
-  disabled?: boolean;
-  value?: boolean;
-};
-
-const getCheckedColor = ({
-  theme,
-  color,
-}: {
-  theme: InternalTheme;
-  color?: string;
-}) => {
-  if (color) {
-    return color;
-  }
-
-  if (theme.isV3) {
-    return theme.colors.primary;
-  }
-
-  return theme.colors.accent;
-};
-
-const getThumbTintColor = ({
-  theme,
-  disabled,
-  value,
-  checkedColor,
-}: BaseProps & { checkedColor: string }) => {
-  const isIOS = Platform.OS === 'ios';
-
-  if (isIOS) {
-    return undefined;
-  }
-
-  if (disabled) {
-    if (theme.dark) {
-      return grey800;
-    }
-    return grey400;
-  }
-
-  if (value) {
-    return checkedColor;
-  }
-
-  if (theme.dark) {
-    return grey400;
-  }
-  return grey50;
-};
-
-const getOnTintColor = ({
-  theme,
-  disabled,
-  value,
-  checkedColor,
-}: BaseProps & { checkedColor: string }) => {
-  const isIOS = Platform.OS === 'ios';
-
-  if (isIOS) {
-    return checkedColor;
-  }
-
-  if (disabled) {
-    if (theme.dark) {
-      if (theme.isV3) {
-        return setColor(white).alpha(0.06).rgb().string();
-      }
-      return setColor(white).alpha(0.1).rgb().string();
-    }
-    return setColor(black).alpha(0.12).rgb().string();
-  }
-
-  if (value) {
-    return setColor(checkedColor).alpha(0.5).rgb().string();
-  }
-
-  if (theme.dark) {
-    return grey700;
-  }
-  return 'rgb(178, 175, 177)';
-};
-
-export const getSwitchColor = ({
-  theme,
-  disabled,
-  value,
-  color,
-}: BaseProps & { color?: string }) => {
-  const checkedColor = getCheckedColor({ theme, color });
-
-  return {
-    onTintColor: getOnTintColor({ theme, disabled, value, checkedColor }),
-    thumbTintColor: getThumbTintColor({ theme, disabled, value, checkedColor }),
-    checkedColor,
-  };
-};

package/Examples/SampleUI/src/components/TextInput/Addons/Outline.tsx

@@ -1,64 +0,0 @@
-import * as React from 'react';
-import {
-  StyleSheet,
-  ColorValue,
-  StyleProp,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { TextInputLabelProp } from '../types';
-
-type OutlineProps = {
-  isV3: boolean;
-  activeColor: string;
-  backgroundColor: ColorValue;
-  hasActiveOutline?: boolean;
-  focused?: boolean;
-  outlineColor?: string;
-  roundness?: number;
-  label?: TextInputLabelProp;
-  style?: StyleProp<ViewStyle>;
-};
-
-export const Outline = ({
-  isV3,
-  label,
-  activeColor,
-  backgroundColor,
-  hasActiveOutline,
-  focused,
-  outlineColor,
-  roundness,
-  style,
-}: OutlineProps) => (
-  <View
-    testID="text-input-outline"
-    pointerEvents="none"
-    style={[
-      styles.outline,
-      !label && styles.noLabelOutline,
-      // eslint-disable-next-line react-native/no-inline-styles
-      {
-        backgroundColor,
-        borderRadius: roundness,
-        borderWidth: (isV3 ? hasActiveOutline : focused) ? 2 : 1,
-        borderColor: hasActiveOutline ? activeColor : outlineColor,
-      },
-      style,
-    ]}
-  />
-);
-
-const styles = StyleSheet.create({
-  outline: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    top: 6,
-    bottom: 0,
-  },
-  noLabelOutline: {
-    top: 0,
-  },
-});