react-native-acoustic-connect-beta 19.0.26 → 19.0.28

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

@@ -1,78 +0,0 @@
-import * as React from 'react';
-import { Animated, StyleSheet, StyleProp, ViewStyle } from 'react-native';
-
-import type { ThemeProp } from 'src/types';
-
-import { useInternalTheme } from '../../../core/theming';
-
-type UnderlineProps = {
-  parentState: {
-    focused: boolean;
-  };
-  error?: boolean;
-  colors?: {
-    error?: string;
-  };
-  activeColor: string;
-  underlineColorCustom?: string;
-  hasActiveOutline?: boolean;
-  style?: StyleProp<ViewStyle>;
-  theme?: ThemeProp;
-};
-
-export const Underline = ({
-  parentState,
-  error,
-  colors,
-  activeColor,
-  underlineColorCustom,
-  hasActiveOutline,
-  style,
-  theme: themeOverrides,
-}: UnderlineProps) => {
-  const { isV3 } = useInternalTheme(themeOverrides);
-
-  let backgroundColor = parentState.focused
-    ? activeColor
-    : underlineColorCustom;
-
-  if (error) backgroundColor = colors?.error;
-
-  const activeScale = isV3 ? 2 : 1;
-
-  return (
-    <Animated.View
-      testID="text-input-underline"
-      style={[
-        styles.underline,
-        isV3 && styles.md3Underline,
-        {
-          backgroundColor,
-          // Underlines is thinner when input is not focused
-          transform: [
-            {
-              scaleY: (isV3 ? hasActiveOutline : parentState.focused)
-                ? activeScale
-                : 0.5,
-            },
-          ],
-        },
-        style,
-      ]}
-    />
-  );
-};
-
-const styles = StyleSheet.create({
-  underline: {
-    position: 'absolute',
-    left: 0,
-    right: 0,
-    bottom: 0,
-    height: 2,
-    zIndex: 1,
-  },
-  md3Underline: {
-    height: 1,
-  },
-});

package/Examples/SampleUI/src/components/TextInput/Adornment/TextInputAdornment.tsx

@@ -1,208 +0,0 @@
-import React from 'react';
-import type {
-  LayoutChangeEvent,
-  TextStyle,
-  StyleProp,
-  Animated,
-  DimensionValue,
-} from 'react-native';
-
-import type { ThemeProp } from 'src/types';
-
-import { AdornmentSide, AdornmentType, InputMode } from './enums';
-import TextInputAffix, { AffixAdornment } from './TextInputAffix';
-import TextInputIcon, { IconAdornment } from './TextInputIcon';
-import type {
-  AdornmentConfig,
-  AdornmentStyleAdjustmentForNativeInput,
-} from './types';
-import { getConstants } from '../helpers';
-
-export function getAdornmentConfig({
-  left,
-  right,
-}: {
-  left?: React.ReactNode;
-  right?: React.ReactNode;
-}): Array<AdornmentConfig> {
-  let adornmentConfig: any[] = [];
-  if (left || right) {
-    [
-      { side: AdornmentSide.Left, adornment: left },
-      { side: AdornmentSide.Right, adornment: right },
-    ].forEach(({ side, adornment }) => {
-      if (adornment && React.isValidElement(adornment)) {
-        let type;
-        if (adornment.type === TextInputAffix) {
-          type = AdornmentType.Affix;
-        } else if (adornment.type === TextInputIcon) {
-          type = AdornmentType.Icon;
-        }
-        adornmentConfig.push({
-          side,
-          type,
-        });
-      }
-    });
-  }
-
-  return adornmentConfig;
-}
-
-export function getAdornmentStyleAdjustmentForNativeInput({
-  adornmentConfig,
-  leftAffixWidth,
-  rightAffixWidth,
-  paddingHorizontal,
-  inputOffset = 0,
-  mode,
-  isV3,
-}: {
-  inputOffset?: number;
-  adornmentConfig: AdornmentConfig[];
-  leftAffixWidth: number;
-  rightAffixWidth: number;
-  mode?: 'outlined' | 'flat';
-  paddingHorizontal?: DimensionValue;
-  isV3?: boolean;
-}): AdornmentStyleAdjustmentForNativeInput | {} {
-  const { OUTLINED_INPUT_OFFSET, ADORNMENT_OFFSET } = getConstants(isV3);
-
-  if (adornmentConfig.length) {
-    const adornmentStyleAdjustmentForNativeInput = adornmentConfig.map(
-      ({ type, side }: AdornmentConfig) => {
-        const isLeftSide = side === AdornmentSide.Left;
-        const inputModeAdornemntOffset =
-          mode === InputMode.Outlined
-            ? ADORNMENT_OFFSET + OUTLINED_INPUT_OFFSET
-            : ADORNMENT_OFFSET;
-        const paddingKey = `padding${captalize(side)}`;
-        const affixWidth = isLeftSide ? leftAffixWidth : rightAffixWidth;
-        const padding =
-          typeof paddingHorizontal === 'number'
-            ? paddingHorizontal
-            : inputModeAdornemntOffset;
-        const offset = affixWidth + padding;
-
-        const isAffix = type === AdornmentType.Affix;
-        const marginKey = `margin${captalize(side)}`;
-
-        return {
-          [marginKey]: isAffix ? 0 : offset,
-          [paddingKey]: isAffix ? offset : inputOffset,
-        };
-      }
-    );
-    const allStyleAdjustmentsMerged =
-      adornmentStyleAdjustmentForNativeInput.reduce(
-        (mergedStyles, currentStyle) => {
-          return {
-            ...mergedStyles,
-            ...currentStyle,
-          };
-        },
-        {}
-      );
-    return allStyleAdjustmentsMerged;
-  } else {
-    return [{}];
-  }
-}
-
-const captalize = (text: string) =>
-  text.charAt(0).toUpperCase() + text.slice(1);
-
-export interface TextInputAdornmentProps {
-  forceFocus: () => void;
-  adornmentConfig: AdornmentConfig[];
-  topPosition: {
-    [AdornmentType.Affix]: {
-      [AdornmentSide.Left]: number | null;
-      [AdornmentSide.Right]: number | null;
-    };
-    [AdornmentType.Icon]: number;
-  };
-  onAffixChange: {
-    [AdornmentSide.Left]: (event: LayoutChangeEvent) => void;
-    [AdornmentSide.Right]: (event: LayoutChangeEvent) => void;
-  };
-  left?: React.ReactNode;
-  right?: React.ReactNode;
-  textStyle?: StyleProp<TextStyle>;
-  visible?: Animated.Value;
-  isTextInputFocused: boolean;
-  paddingHorizontal?: DimensionValue;
-  maxFontSizeMultiplier?: number | undefined | null;
-  theme?: ThemeProp;
-  disabled?: boolean;
-}
-
-const TextInputAdornment: React.FunctionComponent<TextInputAdornmentProps> = ({
-  adornmentConfig,
-  left,
-  right,
-  onAffixChange,
-  textStyle,
-  visible,
-  topPosition,
-  isTextInputFocused,
-  forceFocus,
-  paddingHorizontal,
-  maxFontSizeMultiplier,
-  theme,
-  disabled,
-}) => {
-  if (adornmentConfig.length) {
-    return (
-      <>
-        {adornmentConfig.map(({ type, side }: AdornmentConfig) => {
-          let inputAdornmentComponent;
-          if (side === AdornmentSide.Left) {
-            inputAdornmentComponent = left;
-          } else if (side === AdornmentSide.Right) {
-            inputAdornmentComponent = right;
-          }
-
-          const commonProps = {
-            side: side,
-            testID: `${side}-${type}-adornment`,
-            isTextInputFocused,
-            paddingHorizontal,
-            disabled,
-          };
-          if (type === AdornmentType.Icon) {
-            return (
-              <IconAdornment
-                {...commonProps}
-                theme={theme}
-                key={side}
-                icon={inputAdornmentComponent}
-                topPosition={topPosition[AdornmentType.Icon]}
-                forceFocus={forceFocus}
-              />
-            );
-          } else if (type === AdornmentType.Affix) {
-            return (
-              <AffixAdornment
-                {...commonProps}
-                key={side}
-                topPosition={topPosition[AdornmentType.Affix][side]}
-                affix={inputAdornmentComponent}
-                textStyle={textStyle}
-                onLayout={onAffixChange[side]}
-                visible={visible}
-                maxFontSizeMultiplier={maxFontSizeMultiplier}
-              />
-            );
-          } else {
-            return null;
-          }
-        })}
-      </>
-    );
-  } else {
-    return null;
-  }
-};
-
-export default TextInputAdornment;

package/Examples/SampleUI/src/components/TextInput/Adornment/TextInputAffix.tsx

@@ -1,212 +0,0 @@
-import React from 'react';
-import {
-  Animated,
-  DimensionValue,
-  GestureResponderEvent,
-  LayoutChangeEvent,
-  Pressable,
-  StyleProp,
-  StyleSheet,
-  Text,
-  TextStyle,
-  ViewStyle,
-} from 'react-native';
-
-import { AdornmentSide } from './enums';
-import { getTextColor } from './utils';
-import { useInternalTheme } from '../../../core/theming';
-import type { ThemeProp } from '../../../types';
-import { getConstants } from '../helpers';
-
-export type Props = {
-  /**
-   * Text to show.
-   */
-  text: string;
-  onLayout?: (event: LayoutChangeEvent) => void;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Accessibility label for the affix. This is read by the screen reader when the user taps the affix.
-   */
-  accessibilityLabel?: string;
-  /**
-   * Style that is passed to the Text element.
-   */
-  textStyle?: StyleProp<TextStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-type ContextState = {
-  topPosition: number | null;
-  onLayout?: (event: LayoutChangeEvent) => void;
-  visible?: Animated.Value;
-  textStyle?: StyleProp<TextStyle>;
-  side: AdornmentSide;
-  paddingHorizontal?: DimensionValue;
-  maxFontSizeMultiplier?: number | undefined | null;
-  testID?: string;
-  disabled?: boolean;
-};
-
-const AffixContext = React.createContext<ContextState>({
-  textStyle: { fontFamily: '', color: '' },
-  topPosition: null,
-  side: AdornmentSide.Left,
-});
-
-const AffixAdornment: React.FunctionComponent<
-  {
-    affix: React.ReactNode;
-    testID: string;
-  } & ContextState
-> = ({
-  affix,
-  side,
-  textStyle,
-  topPosition,
-  onLayout,
-  visible,
-  paddingHorizontal,
-  maxFontSizeMultiplier,
-  testID,
-  disabled,
-}) => {
-  return (
-    <AffixContext.Provider
-      value={{
-        side,
-        textStyle,
-        topPosition,
-        onLayout,
-        visible,
-        paddingHorizontal,
-        maxFontSizeMultiplier,
-        testID,
-        disabled,
-      }}
-    >
-      {affix}
-    </AffixContext.Provider>
-  );
-};
-
-/**
- * A component to render a leading / trailing text in the TextInput
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { TextInput } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [text, setText] = React.useState('');
- *
- *   return (
- *     <TextInput
- *       mode="outlined"
- *       label="Outlined input"
- *       placeholder="Type something"
- *       right={<TextInput.Affix text="/100" />}
- *     />
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-
-const TextInputAffix = ({
-  text,
-  textStyle: labelStyle,
-  theme: themeOverrides,
-  onLayout: onTextLayout,
-  onPress,
-  accessibilityLabel = text,
-}: Props) => {
-  const theme = useInternalTheme(themeOverrides);
-  const { AFFIX_OFFSET } = getConstants(theme.isV3);
-
-  const {
-    textStyle,
-    onLayout,
-    topPosition,
-    side,
-    visible,
-    paddingHorizontal,
-    maxFontSizeMultiplier,
-    testID,
-    disabled,
-  } = React.useContext(AffixContext);
-
-  const offset =
-    typeof paddingHorizontal === 'number' ? paddingHorizontal : AFFIX_OFFSET;
-
-  const style = {
-    top: topPosition,
-    [side]: offset,
-  } as ViewStyle;
-
-  const textColor = getTextColor({ theme, disabled });
-
-  const content = (
-    <Text
-      maxFontSizeMultiplier={maxFontSizeMultiplier}
-      style={[{ color: textColor }, textStyle, labelStyle]}
-      onLayout={onTextLayout}
-      testID={`${testID}-text`}
-    >
-      {text}
-    </Text>
-  );
-
-  return (
-    <Animated.View
-      style={[
-        styles.container,
-        style,
-        {
-          opacity:
-            visible?.interpolate({
-              inputRange: [0, 1],
-              outputRange: [1, 0],
-            }) || 1,
-        },
-      ]}
-      onLayout={onLayout}
-      testID={testID}
-    >
-      {onPress ? (
-        <Pressable
-          onPress={onPress}
-          accessibilityRole="button"
-          accessibilityLabel={accessibilityLabel}
-        >
-          {content}
-        </Pressable>
-      ) : (
-        content
-      )}
-    </Animated.View>
-  );
-};
-
-TextInputAffix.displayName = 'TextInput.Affix';
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-});
-
-export default TextInputAffix;
-
-// @component-docs ignore-next-line
-export { TextInputAffix, AffixAdornment };

package/Examples/SampleUI/src/components/TextInput/Adornment/TextInputIcon.tsx

@@ -1,195 +0,0 @@
-import React from 'react';
-import {
-  ColorValue,
-  GestureResponderEvent,
-  StyleProp,
-  StyleSheet,
-  View,
-  ViewStyle,
-} from 'react-native';
-
-import { getIconColor } from './utils';
-import { useInternalTheme } from '../../../core/theming';
-import type { $Omit, ThemeProp } from '../../../types';
-import type { IconSource } from '../../Icon';
-import IconButton from '../../IconButton/IconButton';
-import { ICON_SIZE } from '../constants';
-import { getConstants } from '../helpers';
-
-export type Props = $Omit<
-  React.ComponentProps<typeof IconButton>,
-  'icon' | 'theme' | 'color' | 'iconColor'
-> & {
-  /**
-   * @renamed Renamed from 'name' to 'icon` in v5.x
-   * Icon to show.
-   */
-  icon: IconSource;
-  /**
-   * Function to execute on press.
-   */
-  onPress?: (e: GestureResponderEvent) => void;
-  /**
-   * Whether the TextInput will focus after onPress.
-   */
-  forceTextInputFocus?: boolean;
-  /**
-   * Color of the icon or a function receiving a boolean indicating whether the TextInput is focused and returning the color.
-   */
-  color?: ((isTextInputFocused: boolean) => string | undefined) | string;
-  /**
-   * Color of the ripple effect.
-   */
-  rippleColor?: ColorValue;
-  style?: StyleProp<ViewStyle>;
-  /**
-   * @optional
-   */
-  theme?: ThemeProp;
-};
-
-type StyleContextType = {
-  style: StyleProp<ViewStyle>;
-  isTextInputFocused: boolean;
-  forceFocus: () => void;
-  testID: string;
-  disabled?: boolean;
-};
-
-const StyleContext = React.createContext<StyleContextType>({
-  style: {},
-  isTextInputFocused: false,
-  forceFocus: () => {},
-  testID: '',
-});
-
-const IconAdornment: React.FunctionComponent<
-  {
-    testID: string;
-    icon: React.ReactNode;
-    topPosition: number;
-    side: 'left' | 'right';
-    theme?: ThemeProp;
-    disabled?: boolean;
-  } & Omit<StyleContextType, 'style'>
-> = ({
-  icon,
-  topPosition,
-  side,
-  isTextInputFocused,
-  forceFocus,
-  testID,
-  theme: themeOverrides,
-  disabled,
-}) => {
-  const { isV3 } = useInternalTheme(themeOverrides);
-  const { ICON_OFFSET } = getConstants(isV3);
-
-  const style = {
-    top: topPosition,
-    [side]: ICON_OFFSET,
-  };
-  const contextState = {
-    style,
-    isTextInputFocused,
-    forceFocus,
-    testID,
-    disabled,
-  };
-
-  return (
-    <StyleContext.Provider value={contextState}>{icon}</StyleContext.Provider>
-  );
-};
-
-/**
- * A component to render a leading / trailing icon in the TextInput
- *
- * ## Usage
- * ```js
- * import * as React from 'react';
- * import { TextInput } from 'react-native-paper';
- *
- * const MyComponent = () => {
- *   const [text, setText] = React.useState('');
- *
- *   return (
- *     <TextInput
- *       label="Password"
- *       secureTextEntry
- *       right={<TextInput.Icon icon="eye" />}
- *     />
- *   );
- * };
- *
- * export default MyComponent;
- * ```
- */
-
-const TextInputIcon = ({
-  icon,
-  onPress,
-  forceTextInputFocus = true,
-  color: customColor,
-  theme: themeOverrides,
-  rippleColor,
-  ...rest
-}: Props) => {
-  const { style, isTextInputFocused, forceFocus, testID, disabled } =
-    React.useContext(StyleContext);
-
-  const onPressWithFocusControl = React.useCallback(
-    (e: GestureResponderEvent) => {
-      if (forceTextInputFocus && !isTextInputFocused) {
-        forceFocus();
-      }
-
-      onPress?.(e);
-    },
-    [forceTextInputFocus, forceFocus, isTextInputFocused, onPress]
-  );
-
-  const theme = useInternalTheme(themeOverrides);
-
-  const iconColor = getIconColor({
-    theme,
-    disabled,
-    isTextInputFocused,
-    customColor,
-  });
-
-  return (
-    <View style={[styles.container, style]}>
-      <IconButton
-        icon={icon}
-        style={styles.iconButton}
-        size={ICON_SIZE}
-        onPress={onPressWithFocusControl}
-        iconColor={iconColor}
-        testID={testID}
-        theme={themeOverrides}
-        rippleColor={rippleColor}
-        {...rest}
-      />
-    </View>
-  );
-};
-TextInputIcon.displayName = 'TextInput.Icon';
-
-const styles = StyleSheet.create({
-  container: {
-    position: 'absolute',
-    width: ICON_SIZE,
-    height: ICON_SIZE,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  iconButton: {
-    margin: 0,
-  },
-});
-
-export default TextInputIcon;
-
-// @component-docs ignore-next-line
-export { IconAdornment };

package/Examples/SampleUI/src/components/TextInput/Adornment/enums.tsx

@@ -1,12 +0,0 @@
-export enum AdornmentType {
-  Icon = 'icon',
-  Affix = 'affix',
-}
-export enum AdornmentSide {
-  Right = 'right',
-  Left = 'left',
-}
-export enum InputMode {
-  Outlined = 'outlined',
-  Flat = 'flat',
-}

package/Examples/SampleUI/src/components/TextInput/Adornment/types.tsx

@@ -1,11 +0,0 @@
-import type { AdornmentSide, AdornmentType } from './enums';
-
-export type AdornmentConfig = {
-  side: AdornmentSide;
-  type: AdornmentType;
-};
-export type AdornmentStyleAdjustmentForNativeInput = {
-  adornmentStyleAdjustmentForNativeInput: Array<
-    { paddingRight: number; paddingLeft: number } | {}
-  >;
-};