@oxyhq/services 6.9.13 → 6.9.15

package/src/ui/components/TextField/helpers.js

@@ -0,0 +1,388 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getConstants = exports.getOutlinedInputColors = exports.getFlatInputColors = exports.calculateFlatInputHorizontalPadding = exports.adjustPaddingFlat = exports.adjustPaddingOut = exports.calculatePadding = exports.calculateInputHeight = exports.calculateLabelTopPosition = void 0;
+exports.calculateFlatAffixTopPosition = calculateFlatAffixTopPosition;
+exports.calculateOutlinedIconAndAffixTopPosition = calculateOutlinedIconAndAffixTopPosition;
+const react_native_1 = require("react-native");
+const color_1 = __importDefault(require("color"));
+const enums_1 = require("./Adornment/enums");
+const constants_1 = require("./constants");
+const calculateLabelTopPosition = (labelHeight, height = 0, optionalPadding = 0) => {
+    const customHeight = height > 0 ? height : 0;
+    return Math.floor((customHeight - labelHeight) / 2 + optionalPadding);
+};
+exports.calculateLabelTopPosition = calculateLabelTopPosition;
+const calculateInputHeight = (labelHeight, height, minHeight) => {
+    const finalHeight = height > 0 ? height : labelHeight;
+    if (height > 0)
+        return height;
+    return finalHeight < minHeight ? minHeight : finalHeight;
+};
+exports.calculateInputHeight = calculateInputHeight;
+const calculatePadding = (props) => {
+    const { height, multiline = false } = props;
+    let result = 0;
+    if (multiline) {
+        if (height && multiline) {
+            result = calculateTextAreaPadding(props);
+        }
+        else {
+            result = calculateInputPadding(props);
+        }
+    }
+    return Math.max(0, result);
+};
+exports.calculatePadding = calculatePadding;
+const calculateTextAreaPadding = (props) => {
+    const { dense } = props;
+    return dense ? 10 : 20;
+};
+const calculateInputPadding = ({ topPosition, fontSize, multiline, scale, dense, offset, isAndroid, }) => {
+    const refFontSize = scale * fontSize;
+    let result = Math.floor(topPosition / 2);
+    result =
+        result +
+            Math.floor((refFontSize - fontSize) / 2) -
+            (scale < 1 ? offset / 2 : 0);
+    if (multiline && isAndroid)
+        result = Math.min(dense ? offset / 2 : offset, result);
+    return result;
+};
+const adjustPaddingOut = ({ pad, multiline, label, scale, height, fontSize, lineHeight, dense, offset, isAndroid, }) => {
+    const fontHeight = lineHeight ?? fontSize;
+    const refFontHeight = scale * fontSize;
+    let result = pad;
+    if (!isAndroid && height && !multiline) {
+        return {
+            paddingTop: Math.max(0, (height - fontHeight) / 2),
+            paddingBottom: Math.max(0, (height - fontHeight) / 2),
+        };
+    }
+    if (!isAndroid && multiline) {
+        if (dense) {
+            if (label) {
+                result += scale < 1 ? Math.min(offset, (refFontHeight / 2) * scale) : 0;
+            }
+            else {
+                result += 0;
+            }
+        }
+        if (!dense) {
+            if (label) {
+                result +=
+                    scale < 1
+                        ? Math.min(offset, refFontHeight * scale)
+                        : Math.min(offset / 2, refFontHeight * scale);
+            }
+            else {
+                result += scale < 1 ? Math.min(offset / 2, refFontHeight * scale) : 0;
+            }
+        }
+        result = Math.floor(result);
+    }
+    return { paddingTop: result, paddingBottom: result };
+};
+exports.adjustPaddingOut = adjustPaddingOut;
+const adjustPaddingFlat = ({ pad, scale, multiline, label, height, offset, dense, fontSize, isAndroid, styles, }) => {
+    let result = pad;
+    let topResult = result;
+    let bottomResult = result;
+    const { paddingTop, paddingBottom } = styles;
+    const refFontSize = scale * fontSize;
+    if (!multiline) {
+        // do not modify padding if input is not multiline
+        if (label) {
+            // return const style for flat input with label
+            return { paddingTop, paddingBottom };
+        }
+        // return pad for flat input without label
+        return { paddingTop: result, paddingBottom: result };
+    }
+    if (label) {
+        // add paddings passed from styles
+        topResult = paddingTop;
+        bottomResult = paddingBottom;
+        // adjust top padding for iOS
+        if (!isAndroid) {
+            if (dense) {
+                topResult +=
+                    scale < 1
+                        ? Math.min(result, refFontSize * scale) - result / 2
+                        : Math.min(result, refFontSize * scale) - result / 2;
+            }
+            if (!dense) {
+                topResult +=
+                    scale < 1
+                        ? Math.min(offset / 2, refFontSize * scale)
+                        : Math.min(result, refFontSize * scale) - offset / 2;
+            }
+        }
+        topResult = Math.floor(topResult);
+    }
+    else {
+        if (height) {
+            // center text when height is passed
+            return {
+                paddingTop: Math.max(0, (height - fontSize) / 2),
+                paddingBottom: Math.max(0, (height - fontSize) / 2),
+            };
+        }
+        // adjust paddings for iOS if no label
+        if (!isAndroid) {
+            if (dense) {
+                result +=
+                    scale < 1
+                        ? Math.min(offset / 2, (fontSize / 2) * scale)
+                        : Math.min(offset / 2, scale);
+            }
+            if (!dense) {
+                result +=
+                    scale < 1
+                        ? Math.min(offset, fontSize * scale)
+                        : Math.min(fontSize, (offset / 2) * scale);
+            }
+            result = Math.floor(result);
+            topResult = result;
+            bottomResult = result;
+        }
+    }
+    return {
+        paddingTop: Math.max(0, topResult),
+        paddingBottom: Math.max(0, bottomResult),
+    };
+};
+exports.adjustPaddingFlat = adjustPaddingFlat;
+function calculateFlatAffixTopPosition({ height, paddingTop, paddingBottom, affixHeight, }) {
+    const inputHeightWithoutPadding = height - paddingTop - paddingBottom;
+    const halfOfTheInputHeightDecreasedByAffixHeight = (inputHeightWithoutPadding - affixHeight) / 2;
+    return paddingTop + halfOfTheInputHeightDecreasedByAffixHeight;
+}
+function calculateOutlinedIconAndAffixTopPosition({ height, affixHeight, labelYOffset, }) {
+    return (height - affixHeight + labelYOffset) / 2;
+}
+const calculateFlatInputHorizontalPadding = ({ adornmentConfig, isV3, }) => {
+    const { LABEL_PADDING_HORIZONTAL, ADORNMENT_OFFSET, FLAT_INPUT_OFFSET } = (0, exports.getConstants)(isV3);
+    let paddingLeft = LABEL_PADDING_HORIZONTAL;
+    let paddingRight = LABEL_PADDING_HORIZONTAL;
+    adornmentConfig.forEach(({ type, side }) => {
+        if (type === enums_1.AdornmentType.Icon && side === enums_1.AdornmentSide.Left) {
+            paddingLeft = constants_1.ADORNMENT_SIZE + ADORNMENT_OFFSET + FLAT_INPUT_OFFSET;
+        }
+        else if (side === enums_1.AdornmentSide.Right) {
+            if (type === enums_1.AdornmentType.Affix) {
+                paddingRight = constants_1.ADORNMENT_SIZE + ADORNMENT_OFFSET + FLAT_INPUT_OFFSET;
+            }
+            else if (type === enums_1.AdornmentType.Icon) {
+                paddingRight = constants_1.ADORNMENT_SIZE + ADORNMENT_OFFSET + FLAT_INPUT_OFFSET;
+            }
+        }
+    });
+    return { paddingLeft, paddingRight };
+};
+exports.calculateFlatInputHorizontalPadding = calculateFlatInputHorizontalPadding;
+const getInputTextColor = ({ theme, textColor, disabled, }) => {
+    if (textColor) {
+        return textColor;
+    }
+    if (theme.isV3) {
+        if (disabled) {
+            return theme.colors.onSurfaceDisabled;
+        }
+        return theme.colors.onSurface;
+    }
+    if (disabled) {
+        return (0, color_1.default)(theme.colors.text || theme.colors.onSurface).alpha(0.54).rgb().string();
+    }
+    return theme.colors.text || theme.colors.onSurface;
+};
+const getActiveColor = ({ theme, disabled, error, activeUnderlineColor, activeOutlineColor, mode, }) => {
+    const isFlat = mode === 'flat';
+    const modeColor = isFlat ? activeUnderlineColor : activeOutlineColor;
+    if (error) {
+        return theme.colors.error;
+    }
+    if (modeColor) {
+        return modeColor;
+    }
+    if (disabled) {
+        if (theme.isV3) {
+            return theme.colors.onSurfaceDisabled;
+        }
+        return (0, color_1.default)(theme.colors.text || theme.colors.onSurface).alpha(0.54).rgb().string();
+    }
+    return theme.colors.primary;
+};
+const getPlaceholderColor = ({ theme, disabled }) => {
+    if (theme.isV3) {
+        if (disabled) {
+            return theme.colors.onSurfaceDisabled;
+        }
+        return theme.colors.onSurfaceVariant;
+    }
+    if (disabled) {
+        return theme.colors.disabled || theme.colors.onSurfaceDisabled;
+    }
+    return theme.colors.placeholder || theme.colors.onSurfaceVariant;
+};
+const getSelectionColor = ({ activeColor, customSelectionColor, }) => {
+    if (typeof customSelectionColor !== 'undefined') {
+        return customSelectionColor;
+    }
+    if (react_native_1.Platform.OS === 'android') {
+        return (0, color_1.default)(activeColor).alpha(0.54).rgb().string();
+    }
+    return activeColor;
+};
+const getFlatBackgroundColor = ({ theme, disabled }) => {
+    if (theme.isV3) {
+        if (disabled) {
+            return (0, color_1.default)(theme.colors.onSurface).alpha(0.04).rgb().string();
+        }
+        return theme.colors.surfaceVariant;
+    }
+    if (disabled) {
+        return undefined;
+    }
+    return theme.dark
+        ? (0, color_1.default)(theme.colors?.background).lighten(0.24).rgb().string()
+        : (0, color_1.default)(theme.colors?.background).darken(0.06).rgb().string();
+};
+const getFlatUnderlineColor = ({ theme, disabled, underlineColor, }) => {
+    if (!disabled && underlineColor) {
+        return underlineColor;
+    }
+    if (theme.isV3) {
+        if (disabled) {
+            return theme.colors.onSurfaceDisabled;
+        }
+        return theme.colors.onSurfaceVariant;
+    }
+    if (disabled) {
+        return 'transparent';
+    }
+    return theme.colors.disabled || theme.colors.onSurfaceVariant;
+};
+const getOutlinedOutlineInputColor = ({ theme, disabled, customOutlineColor, }) => {
+    const isTransparent = (0, color_1.default)(customOutlineColor).alpha() === 0;
+    if (!disabled && customOutlineColor) {
+        return customOutlineColor;
+    }
+    if (theme.isV3) {
+        if (disabled) {
+            if (theme.dark) {
+                return 'transparent';
+            }
+            return theme.colors.surfaceDisabled;
+        }
+        return theme.colors.outline;
+    }
+    if (disabled) {
+        if (isTransparent) {
+            return customOutlineColor;
+        }
+        return theme.colors.disabled || theme.colors.onSurfaceDisabled;
+    }
+    return theme.colors.placeholder || theme.colors.onSurfaceVariant;
+};
+const getFlatInputColors = ({ underlineColor, activeUnderlineColor, customSelectionColor, textColor, disabled, error, theme, }) => {
+    const baseFlatColorProps = { theme, disabled };
+    const activeColor = getActiveColor({
+        ...baseFlatColorProps,
+        error,
+        activeUnderlineColor,
+        mode: 'flat',
+    });
+    return {
+        inputTextColor: getInputTextColor({
+            ...baseFlatColorProps,
+            textColor,
+        }),
+        activeColor,
+        underlineColorCustom: getFlatUnderlineColor({
+            ...baseFlatColorProps,
+            underlineColor,
+        }),
+        placeholderColor: getPlaceholderColor(baseFlatColorProps),
+        selectionColor: getSelectionColor({ activeColor, customSelectionColor }),
+        errorColor: theme.colors.error,
+        backgroundColor: getFlatBackgroundColor(baseFlatColorProps),
+    };
+};
+exports.getFlatInputColors = getFlatInputColors;
+const getOutlinedInputColors = ({ activeOutlineColor, customOutlineColor, customSelectionColor, textColor, disabled, error, theme, }) => {
+    const baseOutlinedColorProps = { theme, disabled };
+    const activeColor = getActiveColor({
+        ...baseOutlinedColorProps,
+        error,
+        activeOutlineColor,
+        mode: 'outlined',
+    });
+    return {
+        inputTextColor: getInputTextColor({
+            ...baseOutlinedColorProps,
+            textColor,
+        }),
+        activeColor,
+        outlineColor: getOutlinedOutlineInputColor({
+            ...baseOutlinedColorProps,
+            customOutlineColor,
+        }),
+        placeholderColor: getPlaceholderColor(baseOutlinedColorProps),
+        selectionColor: getSelectionColor({ activeColor, customSelectionColor }),
+        errorColor: theme.colors.error,
+    };
+};
+exports.getOutlinedInputColors = getOutlinedInputColors;
+const getConstants = (isV3) => {
+    // Text input affix
+    let AFFIX_OFFSET;
+    // Text input icon
+    let ICON_OFFSET;
+    //Text input flat
+    let LABEL_PADDING_TOP;
+    let LABEL_PADDING_HORIZONTAL;
+    let FLAT_INPUT_OFFSET;
+    let MIN_HEIGHT;
+    // Text input outlined;
+    let INPUT_PADDING_HORIZONTAL;
+    let ADORNMENT_OFFSET;
+    let OUTLINED_INPUT_OFFSET;
+    if (isV3) {
+        AFFIX_OFFSET = constants_1.MD3_AFFIX_OFFSET;
+        ICON_OFFSET = constants_1.MD3_ICON_OFFSET;
+        LABEL_PADDING_TOP = constants_1.MD3_LABEL_PADDING_TOP;
+        LABEL_PADDING_HORIZONTAL = constants_1.MD3_LABEL_PADDING_HORIZONTAL;
+        FLAT_INPUT_OFFSET = constants_1.MD3_FLAT_INPUT_OFFSET;
+        MIN_HEIGHT = constants_1.MD3_MIN_HEIGHT;
+        INPUT_PADDING_HORIZONTAL = constants_1.MD3_INPUT_PADDING_HORIZONTAL;
+        ADORNMENT_OFFSET = constants_1.MD3_ADORNMENT_OFFSET;
+        OUTLINED_INPUT_OFFSET = constants_1.MD3_OUTLINED_INPUT_OFFSET;
+    }
+    else {
+        AFFIX_OFFSET = constants_1.MD2_AFFIX_OFFSET;
+        ICON_OFFSET = constants_1.MD2_ICON_OFFSET;
+        LABEL_PADDING_TOP = constants_1.MD2_LABEL_PADDING_TOP;
+        LABEL_PADDING_HORIZONTAL = constants_1.MD2_LABEL_PADDING_HORIZONTAL;
+        FLAT_INPUT_OFFSET = constants_1.MD2_FLAT_INPUT_OFFSET;
+        MIN_HEIGHT = constants_1.MD2_MIN_HEIGHT;
+        INPUT_PADDING_HORIZONTAL = constants_1.MD2_INPUT_PADDING_HORIZONTAL;
+        ADORNMENT_OFFSET = constants_1.MD2_ADORNMENT_OFFSET;
+        OUTLINED_INPUT_OFFSET = constants_1.MD2_OUTLINED_INPUT_OFFSET;
+    }
+    return {
+        AFFIX_OFFSET,
+        ICON_OFFSET,
+        LABEL_PADDING_TOP,
+        LABEL_PADDING_HORIZONTAL,
+        FLAT_INPUT_OFFSET,
+        MIN_HEIGHT,
+        INPUT_PADDING_HORIZONTAL,
+        ADORNMENT_OFFSET,
+        OUTLINED_INPUT_OFFSET,
+        MIN_WIDTH: constants_1.MIN_WIDTH,
+    };
+};
+exports.getConstants = getConstants;

package/src/ui/components/TextField/types.d.ts

@@ -0,0 +1,155 @@
+import type * as React from 'react';
+import type { TextInput as NativeTextInput, Animated, TextStyle, LayoutChangeEvent, ColorValue, StyleProp, ViewProps, ViewStyle, NativeSyntheticEvent, TextLayoutEventData } from 'react-native';
+import type { $Omit, InternalTheme, ThemeProp } from '../types';
+export type TextFieldLabelProp = string | React.ReactElement;
+export type TextInputLabelProp = TextFieldLabelProp;
+type TextInputProps = React.ComponentPropsWithRef<typeof NativeTextInput> & {
+    mode?: 'flat' | 'outlined';
+    left?: React.ReactNode;
+    right?: React.ReactNode;
+    disabled?: boolean;
+    label?: TextFieldLabelProp;
+    placeholder?: string;
+    error?: boolean;
+    onChangeText?: Function;
+    selectionColor?: string;
+    cursorColor?: string;
+    underlineColor?: string;
+    activeUnderlineColor?: string;
+    outlineColor?: string;
+    activeOutlineColor?: string;
+    textColor?: string;
+    dense?: boolean;
+    multiline?: boolean;
+    numberOfLines?: number;
+    onFocus?: (args: NativeSyntheticEvent<unknown>) => void;
+    onBlur?: (args: NativeSyntheticEvent<unknown>) => void;
+    render?: (props: RenderProps) => React.ReactNode;
+    value?: string;
+    style?: StyleProp<TextStyle>;
+    theme?: ThemeProp;
+    testID?: string;
+    contentStyle?: StyleProp<TextStyle>;
+    outlineStyle?: StyleProp<ViewStyle>;
+    underlineStyle?: StyleProp<ViewStyle>;
+    scaledLabel?: boolean;
+};
+export type RenderProps = {
+    ref: (a?: NativeTextInput | null) => void;
+    onChangeText?: (a: string) => void;
+    placeholder?: string;
+    placeholderTextColor?: ColorValue;
+    editable?: boolean;
+    selectionColor?: string;
+    cursorColor?: string;
+    onFocus?: (args: NativeSyntheticEvent<unknown>) => void;
+    onBlur?: (args: NativeSyntheticEvent<unknown>) => void;
+    underlineColorAndroid?: string;
+    onLayout?: (args: LayoutChangeEvent) => void;
+    style: any;
+    multiline?: boolean;
+    numberOfLines?: number;
+    value?: string;
+    adjustsFontSizeToFit?: boolean;
+    testID?: string;
+};
+type TextInputTypesWithoutMode = $Omit<TextInputProps, 'mode'>;
+export type State = {
+    labeled: Animated.Value;
+    error: Animated.Value;
+    focused: boolean;
+    displayPlaceholder: boolean;
+    value?: string;
+    labelTextLayout: {
+        width: number;
+    };
+    labelLayout: {
+        measured: boolean;
+        width: number;
+        height: number;
+    };
+    leftLayout: {
+        height: number | null;
+        width: number | null;
+    };
+    rightLayout: {
+        height: number | null;
+        width: number | null;
+    };
+    inputContainerLayout: {
+        width: number;
+    };
+    contentStyle?: StyleProp<ViewProps>;
+};
+export type ChildTextInputProps = {
+    parentState: State;
+    innerRef: (ref?: NativeTextInput | null) => void;
+    onFocus?: (args: NativeSyntheticEvent<unknown>) => void;
+    onBlur?: (args: NativeSyntheticEvent<unknown>) => void;
+    forceFocus: () => void;
+    onChangeText?: (value: string) => void;
+    onInputLayout: (event: LayoutChangeEvent) => void;
+    onLayoutAnimatedText: (args: LayoutChangeEvent) => void;
+    onLabelTextLayout: (event: NativeSyntheticEvent<TextLayoutEventData>) => void;
+    onLeftAffixLayoutChange: (event: LayoutChangeEvent) => void;
+    onRightAffixLayoutChange: (event: LayoutChangeEvent) => void;
+} & $Omit<TextInputTypesWithoutMode, 'theme'> & {
+    theme: InternalTheme;
+};
+export type LabelProps = {
+    mode?: 'flat' | 'outlined';
+    placeholderStyle: any;
+    placeholderOpacity: number | Animated.Value | Animated.AnimatedInterpolation<number>;
+    baseLabelTranslateX: number;
+    baseLabelTranslateY: number;
+    wiggleOffsetX: number;
+    labelScale: number;
+    fontSize: number;
+    lineHeight?: number | undefined;
+    fontWeight: TextStyle['fontWeight'];
+    font: any;
+    topPosition: number;
+    paddingLeft?: number;
+    paddingRight?: number;
+    labelTranslationXOffset?: number;
+    placeholderColor: string | null;
+    backgroundColor?: ColorValue;
+    label?: TextFieldLabelProp | null;
+    hasActiveOutline?: boolean | null;
+    activeColor: string;
+    errorColor?: string;
+    labelError?: boolean | null;
+    onLayoutAnimatedText: (args: LayoutChangeEvent) => void;
+    onLabelTextLayout: (event: NativeSyntheticEvent<TextLayoutEventData>) => void;
+    roundness: number;
+    maxFontSizeMultiplier?: number | undefined | null;
+    testID?: string;
+    contentStyle?: StyleProp<ViewProps>;
+    theme?: ThemeProp;
+};
+export type InputLabelProps = {
+    labeled: Animated.Value;
+    error: Animated.Value;
+    focused: boolean;
+    wiggle: boolean;
+    opacity: number;
+    labelLayoutMeasured: boolean;
+    labelLayoutWidth: number;
+    labelLayoutHeight: number;
+    inputContainerLayout: {
+        width: number;
+    };
+    labelBackground?: any;
+    maxFontSizeMultiplier?: number | undefined | null;
+    isV3?: boolean;
+    scaledLabel?: boolean;
+} & LabelProps;
+export type LabelBackgroundProps = {
+    labelStyle: any;
+    labeled: Animated.Value;
+    labelLayoutWidth: number;
+    labelLayoutHeight: number;
+    maxFontSizeMultiplier?: number | undefined | null;
+    theme?: ThemeProp;
+} & LabelProps;
+export {};

package/src/ui/components/TextField/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });