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

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

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

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

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

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

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

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