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

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

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

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

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

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