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

package/Examples/SampleUI/src/components/TextInput/TextInputOutlined.tsx

@@ -0,0 +1,450 @@
+import * as React from 'react';
+import {
+  Animated,
+  View,
+  TextInput as NativeTextInput,
+  StyleSheet,
+  I18nManager,
+  Platform,
+  TextStyle,
+  ColorValue,
+  LayoutChangeEvent,
+} from 'react-native';
+
+import { Outline } from './Addons/Outline';
+import { AdornmentType, AdornmentSide } from './Adornment/enums';
+import TextInputAdornment, {
+  getAdornmentConfig,
+  getAdornmentStyleAdjustmentForNativeInput,
+  TextInputAdornmentProps,
+} from './Adornment/TextInputAdornment';
+import {
+  MAXIMIZED_LABEL_FONT_SIZE,
+  MINIMIZED_LABEL_FONT_SIZE,
+  LABEL_WIGGLE_X_OFFSET,
+  ADORNMENT_SIZE,
+  OUTLINE_MINIMIZED_LABEL_Y_OFFSET,
+  LABEL_PADDING_TOP,
+  MIN_DENSE_HEIGHT_OUTLINED,
+  LABEL_PADDING_TOP_DENSE,
+} from './constants';
+import {
+  calculateLabelTopPosition,
+  calculateInputHeight,
+  calculatePadding,
+  adjustPaddingOut,
+  Padding,
+  calculateOutlinedIconAndAffixTopPosition,
+  getOutlinedInputColors,
+  getConstants,
+} from './helpers';
+import InputLabel from './Label/InputLabel';
+import LabelBackground from './Label/LabelBackground';
+import type { RenderProps, ChildTextInputProps } from './types';
+
+const TextInputOutlined = ({
+  disabled = false,
+  editable = true,
+  label,
+  error = false,
+  selectionColor: customSelectionColor,
+  cursorColor,
+  underlineColor: _underlineColor,
+  outlineColor: customOutlineColor,
+  activeOutlineColor,
+  outlineStyle,
+  textColor,
+  dense,
+  style,
+  theme,
+  render = (props: RenderProps) => <NativeTextInput {...props} />,
+  multiline = false,
+  parentState,
+  innerRef,
+  onFocus,
+  forceFocus,
+  onBlur,
+  onChangeText,
+  onLayoutAnimatedText,
+  onLabelTextLayout,
+  onLeftAffixLayoutChange,
+  onRightAffixLayoutChange,
+  onInputLayout,
+  onLayout,
+  left,
+  right,
+  placeholderTextColor,
+  testID = 'text-input-outlined',
+  contentStyle,
+  scaledLabel,
+  ...rest
+}: ChildTextInputProps) => {
+  const adornmentConfig = getAdornmentConfig({ left, right });
+
+  const { colors, isV3, roundness } = theme;
+  const font = isV3 ? theme.fonts.bodyLarge : theme.fonts.regular;
+  const hasActiveOutline = parentState.focused || error;
+
+  const { INPUT_PADDING_HORIZONTAL, MIN_HEIGHT, ADORNMENT_OFFSET, MIN_WIDTH } =
+    getConstants(isV3);
+
+  const {
+    fontSize: fontSizeStyle,
+    fontWeight,
+    lineHeight: lineHeightStyle,
+    height,
+    backgroundColor = colors?.background,
+    textAlign,
+    ...viewStyle
+  } = (StyleSheet.flatten(style) || {}) as TextStyle;
+  const fontSize = fontSizeStyle || MAXIMIZED_LABEL_FONT_SIZE;
+  const lineHeight =
+    lineHeightStyle || (Platform.OS === 'web' ? fontSize * 1.2 : undefined);
+
+  const {
+    inputTextColor,
+    activeColor,
+    outlineColor,
+    placeholderColor,
+    errorColor,
+    selectionColor,
+  } = getOutlinedInputColors({
+    activeOutlineColor,
+    customOutlineColor,
+    customSelectionColor,
+    textColor,
+    disabled,
+    error,
+    theme,
+  });
+
+  const densePaddingTop = label ? LABEL_PADDING_TOP_DENSE : 0;
+  const paddingTop = label ? LABEL_PADDING_TOP : 0;
+  const yOffset = label ? OUTLINE_MINIMIZED_LABEL_Y_OFFSET : 0;
+
+  const labelScale = MINIMIZED_LABEL_FONT_SIZE / fontSize;
+  const fontScale = MAXIMIZED_LABEL_FONT_SIZE / fontSize;
+
+  const labelWidth = parentState.labelLayout.width;
+  const labelHeight = parentState.labelLayout.height;
+  const labelHalfWidth = labelWidth / 2;
+  const labelHalfHeight = labelHeight / 2;
+
+  const baseLabelTranslateX =
+    (I18nManager.getConstants().isRTL ? 1 : -1) *
+    (labelHalfWidth -
+      (labelScale * labelWidth) / 2 -
+      (fontSize - MINIMIZED_LABEL_FONT_SIZE) * labelScale);
+
+  let labelTranslationXOffset = 0;
+  const isAdornmentLeftIcon = adornmentConfig.some(
+    ({ side, type }) =>
+      side === AdornmentSide.Left && type === AdornmentType.Icon
+  );
+  const isAdornmentRightIcon = adornmentConfig.some(
+    ({ side, type }) =>
+      side === AdornmentSide.Right && type === AdornmentType.Icon
+  );
+
+  if (isAdornmentLeftIcon) {
+    labelTranslationXOffset =
+      (I18nManager.getConstants().isRTL ? -1 : 1) *
+      (ADORNMENT_SIZE + ADORNMENT_OFFSET - (isV3 ? 0 : 8));
+  }
+
+  const minInputHeight =
+    (dense ? MIN_DENSE_HEIGHT_OUTLINED : MIN_HEIGHT) - paddingTop;
+
+  const inputHeight = calculateInputHeight(labelHeight, height, minInputHeight);
+
+  const topPosition = calculateLabelTopPosition(
+    labelHeight,
+    inputHeight,
+    paddingTop
+  );
+
+  if (height && typeof height !== 'number') {
+    // eslint-disable-next-line
+    console.warn('Currently we support only numbers in height prop');
+  }
+
+  const paddingSettings = {
+    height: height ? +height : null,
+    labelHalfHeight,
+    offset: paddingTop,
+    multiline: multiline ? multiline : null,
+    dense: dense ? dense : null,
+    topPosition,
+    fontSize,
+    lineHeight,
+    label,
+    scale: fontScale,
+    isAndroid: Platform.OS === 'android',
+    styles: StyleSheet.flatten(
+      dense ? styles.inputOutlinedDense : styles.inputOutlined
+    ) as Padding,
+  };
+
+  const pad = calculatePadding(paddingSettings);
+
+  const paddingOut = adjustPaddingOut({ ...paddingSettings, pad });
+
+  const baseLabelTranslateY = -labelHalfHeight - (topPosition + yOffset);
+
+  const { current: placeholderOpacityAnims } = React.useRef([
+    new Animated.Value(0),
+    new Animated.Value(1),
+  ]);
+
+  const placeholderOpacity = hasActiveOutline
+    ? parentState.labeled
+    : placeholderOpacityAnims[parentState.labelLayout.measured ? 1 : 0];
+
+  const placeholderStyle = {
+    position: 'absolute',
+    left: 0,
+    paddingHorizontal: INPUT_PADDING_HORIZONTAL,
+  };
+
+  const placeholderTextColorBasedOnState = parentState.displayPlaceholder
+    ? placeholderTextColor ?? placeholderColor
+    : 'transparent';
+
+  const labelBackgroundColor: ColorValue =
+    backgroundColor === 'transparent'
+      ? theme.colors.background
+      : backgroundColor;
+
+  const labelProps = {
+    label,
+    onLayoutAnimatedText,
+    onLabelTextLayout,
+    placeholderOpacity,
+    labelError: error,
+    placeholderStyle,
+    baseLabelTranslateY,
+    baseLabelTranslateX,
+    font,
+    fontSize,
+    lineHeight,
+    fontWeight,
+    labelScale,
+    wiggleOffsetX: LABEL_WIGGLE_X_OFFSET,
+    topPosition,
+    hasActiveOutline,
+    activeColor,
+    placeholderColor,
+    backgroundColor: labelBackgroundColor,
+    errorColor,
+    labelTranslationXOffset,
+    roundness,
+    maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
+    testID,
+    contentStyle,
+    inputContainerLayout: {
+      width:
+        parentState.inputContainerLayout.width +
+        (isAdornmentRightIcon || isAdornmentLeftIcon
+          ? INPUT_PADDING_HORIZONTAL
+          : 0),
+    },
+    opacity:
+      parentState.value || parentState.focused
+        ? parentState.labelLayout.measured
+          ? 1
+          : 0
+        : 1,
+    isV3,
+  };
+
+  const onLayoutChange = React.useCallback(
+    (e: LayoutChangeEvent) => {
+      onInputLayout(e);
+      onLayout?.(e);
+    },
+    [onLayout, onInputLayout]
+  );
+
+  const minHeight = (height ||
+    (dense ? MIN_DENSE_HEIGHT_OUTLINED : MIN_HEIGHT)) as number;
+
+  const outlinedHeight =
+    inputHeight + (dense ? densePaddingTop / 2 : paddingTop);
+  const { leftLayout, rightLayout } = parentState;
+
+  const leftAffixTopPosition = calculateOutlinedIconAndAffixTopPosition({
+    height: outlinedHeight,
+    affixHeight: leftLayout.height || 0,
+    labelYOffset: -yOffset,
+  });
+
+  const rightAffixTopPosition = calculateOutlinedIconAndAffixTopPosition({
+    height: outlinedHeight,
+    affixHeight: rightLayout.height || 0,
+    labelYOffset: -yOffset,
+  });
+  const iconTopPosition = calculateOutlinedIconAndAffixTopPosition({
+    height: outlinedHeight,
+    affixHeight: ADORNMENT_SIZE,
+    labelYOffset: -yOffset,
+  });
+
+  const rightAffixWidth = right
+    ? rightLayout.width || ADORNMENT_SIZE
+    : ADORNMENT_SIZE;
+
+  const leftAffixWidth = left
+    ? leftLayout.width || ADORNMENT_SIZE
+    : ADORNMENT_SIZE;
+
+  const adornmentStyleAdjustmentForNativeInput =
+    getAdornmentStyleAdjustmentForNativeInput({
+      adornmentConfig,
+      rightAffixWidth,
+      leftAffixWidth,
+      mode: 'outlined',
+      isV3,
+    });
+  const affixTopPosition = {
+    [AdornmentSide.Left]: leftAffixTopPosition,
+    [AdornmentSide.Right]: rightAffixTopPosition,
+  };
+  const onAffixChange = {
+    [AdornmentSide.Left]: onLeftAffixLayoutChange,
+    [AdornmentSide.Right]: onRightAffixLayoutChange,
+  };
+
+  let adornmentProps: TextInputAdornmentProps = {
+    adornmentConfig,
+    forceFocus,
+    topPosition: {
+      [AdornmentType.Icon]: iconTopPosition,
+      [AdornmentType.Affix]: affixTopPosition,
+    },
+    onAffixChange,
+    isTextInputFocused: parentState.focused,
+    maxFontSizeMultiplier: rest.maxFontSizeMultiplier,
+    disabled,
+  };
+  if (adornmentConfig.length) {
+    adornmentProps = {
+      ...adornmentProps,
+      left,
+      right,
+      textStyle: { ...font, fontSize, lineHeight, fontWeight },
+      visible: parentState.labeled,
+    };
+  }
+
+  return (
+    <View style={viewStyle}>
+      {/*
+          Render the outline separately from the container
+          This is so that the label can overlap the outline
+          Otherwise the border will cut off the label on Android
+          */}
+      <Outline
+        isV3={isV3}
+        style={outlineStyle}
+        label={label}
+        roundness={roundness}
+        hasActiveOutline={hasActiveOutline}
+        focused={parentState.focused}
+        activeColor={activeColor}
+        outlineColor={outlineColor}
+        backgroundColor={backgroundColor}
+      />
+      <View
+        style={[
+          styles.labelContainer,
+          {
+            paddingTop,
+            minHeight,
+          },
+        ]}
+      >
+        {label ? (
+          <InputLabel
+            labeled={parentState.labeled}
+            error={parentState.error}
+            focused={parentState.focused}
+            scaledLabel={scaledLabel}
+            wiggle={Boolean(parentState.value && labelProps.labelError)}
+            labelLayoutMeasured={parentState.labelLayout.measured}
+            labelLayoutWidth={parentState.labelLayout.width}
+            labelLayoutHeight={parentState.labelLayout.height}
+            {...labelProps}
+            labelBackground={LabelBackground}
+            maxFontSizeMultiplier={rest.maxFontSizeMultiplier}
+          />
+        ) : null}
+        {render?.({
+          ...rest,
+          ref: innerRef,
+          onLayout: onLayoutChange,
+          onChangeText,
+          placeholder: rest.placeholder,
+          editable: !disabled && editable,
+          selectionColor,
+          cursorColor:
+            typeof cursorColor === 'undefined' ? activeColor : cursorColor,
+          placeholderTextColor: placeholderTextColorBasedOnState,
+          onFocus,
+          onBlur,
+          underlineColorAndroid: 'transparent',
+          multiline,
+          style: [
+            styles.input,
+            !multiline || (multiline && height) ? { height: inputHeight } : {},
+            paddingOut,
+            {
+              ...font,
+              fontSize,
+              lineHeight,
+              fontWeight,
+              color: inputTextColor,
+              textAlignVertical: multiline ? 'top' : 'center',
+              textAlign: textAlign
+                ? textAlign
+                : I18nManager.getConstants().isRTL
+                ? 'right'
+                : 'left',
+              paddingHorizontal: INPUT_PADDING_HORIZONTAL,
+              minWidth: Math.min(
+                parentState.labelTextLayout.width +
+                  2 * INPUT_PADDING_HORIZONTAL,
+                MIN_WIDTH
+              ),
+            },
+            Platform.OS === 'web' ? { outline: 'none' } : undefined,
+            adornmentStyleAdjustmentForNativeInput,
+            contentStyle,
+          ],
+          testID,
+        } as RenderProps)}
+      </View>
+      <TextInputAdornment {...adornmentProps} />
+    </View>
+  );
+};
+
+export default TextInputOutlined;
+
+const styles = StyleSheet.create({
+  labelContainer: {
+    paddingBottom: 0,
+    flexGrow: 1,
+  },
+  input: {
+    margin: 0,
+    flexGrow: 1,
+  },
+  inputOutlined: {
+    paddingTop: 8,
+    paddingBottom: 8,
+  },
+  inputOutlinedDense: {
+    paddingTop: 4,
+    paddingBottom: 4,
+  },
+});

package/Examples/SampleUI/src/components/TextInput/constants.tsx

@@ -0,0 +1,48 @@
+export const MAXIMIZED_LABEL_FONT_SIZE = 16;
+export const MINIMIZED_LABEL_FONT_SIZE = 12;
+export const LABEL_WIGGLE_X_OFFSET = 4;
+
+export const ADORNMENT_SIZE = 24;
+export const MIN_WIDTH = 100;
+
+//Text input affix offset
+export const MD2_AFFIX_OFFSET = 12;
+export const MD3_AFFIX_OFFSET = 16;
+
+// Text input icon
+export const ICON_SIZE = 24;
+export const MD2_ICON_OFFSET = 12;
+export const MD3_ICON_OFFSET = 16;
+
+// Text input common
+export const MD2_MIN_HEIGHT = 64;
+export const MD3_MIN_HEIGHT = 56;
+export const MD3_ADORNMENT_OFFSET = 16;
+export const MD2_ADORNMENT_OFFSET = 12;
+export const LABEL_PADDING_TOP_DENSE = 24;
+export const LABEL_PADDING_TOP = 8;
+
+// Text input flat
+export const MD2_LABEL_PADDING_TOP = 30;
+export const MD3_LABEL_PADDING_TOP = 26;
+
+export const MD2_LABEL_PADDING_HORIZONTAL = 12;
+export const MD3_LABEL_PADDING_HORIZONTAL = 16;
+
+export const MD2_FLAT_INPUT_OFFSET = 8;
+export const MD3_FLAT_INPUT_OFFSET = 16;
+
+export const MINIMIZED_LABEL_Y_OFFSET = -18;
+export const MIN_DENSE_HEIGHT_WL = 52;
+export const MIN_DENSE_HEIGHT = 40;
+
+// Text input outlined
+export const MD2_INPUT_PADDING_HORIZONTAL = 14;
+export const MD3_INPUT_PADDING_HORIZONTAL = 16;
+
+// extra space to avoid overlapping input's text and icon
+export const MD2_OUTLINED_INPUT_OFFSET = 8;
+export const MD3_OUTLINED_INPUT_OFFSET = 16;
+
+export const OUTLINE_MINIMIZED_LABEL_Y_OFFSET = -6;
+export const MIN_DENSE_HEIGHT_OUTLINED = 48;