@oxyhq/services 6.9.13 → 6.9.15

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

@@ -0,0 +1,191 @@
+import * as React from 'react';
+import { type StyleProp, TextInput as NativeTextInput, type TextStyle, type ViewStyle } from 'react-native';
+import { type Props as TextFieldAffixProps } from './TextField/Adornment/TextFieldAffix';
+import { type Props as TextFieldIconProps } from './TextField/Adornment/TextFieldIcon';
+import type { RenderProps, TextFieldLabelProp } from './TextField/types';
+import type { ThemeProp } from "./types";
+export type Props = React.ComponentPropsWithRef<typeof NativeTextInput> & {
+    /**
+     * Mode of the TextInput.
+     * - `flat` - flat input with an underline.
+     * - `outlined` - input with an outline.
+     *
+     * In `outlined` mode, the background color of the label is derived from `colors?.background` in theme or the `backgroundColor` style.
+     * This component render TextInputOutlined or TextInputFlat based on that props
+     */
+    mode?: 'flat' | 'outlined';
+    /**
+     * The adornment placed on the left side of the input. It can be either `TextField.Icon` or `TextField.Affix`.
+     */
+    left?: React.ReactNode;
+    /**
+     * The adornment placed on the right side of the input. It can be either `TextField.Icon` or `TextField.Affix`.
+     */
+    right?: React.ReactNode;
+    /**
+     * If true, user won't be able to interact with the component.
+     */
+    disabled?: boolean;
+    /**
+     * The text or component to use for the floating label.
+     */
+    label?: TextFieldLabelProp;
+    /**
+     * Placeholder for the input.
+     */
+    placeholder?: string;
+    /**
+     * Whether to style the TextInput with error style.
+     */
+    error?: boolean;
+    /**
+     * Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.
+     */
+    onChangeText?: Function;
+    /**
+     * Selection color of the input. On iOS, it sets both the selection color and cursor color.
+     * On Android, it sets only the selection color.
+     */
+    selectionColor?: string;
+    /**
+     * @platform Android only
+     * Cursor (or "caret") color of the input on Android.
+     * This property has no effect on iOS.
+     */
+    cursorColor?: string;
+    /**
+     * Inactive underline color of the input.
+     */
+    underlineColor?: string;
+    /**
+     * Active underline color of the input.
+     */
+    activeUnderlineColor?: string;
+    /**
+     * Inactive outline color of the input.
+     */
+    outlineColor?: string;
+    /**
+     * Active outline color of the input.
+     */
+    activeOutlineColor?: string;
+    /**
+     * Color of the text in the input.
+     */
+    textColor?: string;
+    /**
+     * Sets min height with densed layout. For `TextField` in `flat` mode
+     * height is `64dp` or in dense layout - `52dp` with label or `40dp` without label.
+     * For `TextField` in `outlined` mode
+     * height is `56dp` or in dense layout - `40dp` regardless of label.
+     * When you apply `height` prop in style the `dense` prop affects only `paddingVertical` inside `TextField`
+     */
+    dense?: boolean;
+    /**
+     * Whether the input can have multiple lines.
+     */
+    multiline?: boolean;
+    /**
+     * @platform Android only
+     * The number of lines to show in the input (Android only).
+     */
+    numberOfLines?: number;
+    /**
+     * Callback that is called when the text input is focused.
+     */
+    onFocus?: (args: any) => void;
+    /**
+     * Callback that is called when the text input is blurred.
+     */
+    onBlur?: (args: any) => void;
+    /**
+     *
+     * Callback to render a custom input component such as `react-native-text-input-mask`
+     * instead of the default `TextInput` component from `react-native`.
+     *
+     * Example:
+     * ```js
+     * <TextField
+     *   label="Phone number"
+     *   render={props =>
+     *     <TextInputMask
+     *       {...props}
+     *       mask="+[00] [000] [000] [000]"
+     *     />
+     *   }
+     * />
+     * ```
+     */
+    render?: (props: RenderProps) => React.ReactNode;
+    /**
+     * Value of the text input.
+     */
+    value?: string;
+    /**
+     * Pass `fontSize` prop to modify the font size inside `TextField`.
+     * Pass `height` prop to set `TextField` height. When `height` is passed,
+     * `dense` prop will affect only input's `paddingVertical`.
+     * Pass `paddingHorizontal` to modify horizontal padding.
+     * This can be used to get MD Guidelines v1 TextInput look.
+     */
+    style?: StyleProp<TextStyle>;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+    /**
+     * testID to be used on tests.
+     */
+    testID?: string;
+    /**
+     * Pass custom style directly to the input itself.
+     * Overrides input style
+     * Example: `paddingLeft`, `backgroundColor`
+     */
+    contentStyle?: StyleProp<TextStyle>;
+    /**
+     * Pass style to override the default style of outlined wrapper.
+     * Overrides style when mode is set to `outlined`
+     * Example: `borderRadius`, `borderColor`
+     */
+    outlineStyle?: StyleProp<ViewStyle>;
+    /**
+     * Pass style to override the default style of underlined wrapper.
+     * Overrides style when mode is set to `flat`
+     * Example: `borderRadius`, `borderColor`
+     */
+    underlineStyle?: StyleProp<ViewStyle>;
+};
+interface CompoundedComponent extends React.ForwardRefExoticComponent<Props & React.RefAttributes<TextFieldHandles>> {
+    Icon: React.FunctionComponent<TextFieldIconProps>;
+    Affix: React.FunctionComponent<Partial<TextFieldAffixProps>>;
+}
+type TextFieldHandles = Pick<NativeTextInput, 'focus' | 'clear' | 'blur' | 'isFocused' | 'setNativeProps' | 'setSelection'>;
+/**
+ * A component to allow users to input text.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { TextField } from './TextField';
+ *
+ * const MyComponent = () => {
+ *   const [text, setText] = React.useState("");
+ *
+ *   return (
+ *     <TextField
+ *       label="Email"
+ *       value={text}
+ *       onChangeText={text => setText(text)}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends TextInput props https://reactnative.dev/docs/textinput#props
+ */
+declare const TextField: CompoundedComponent;
+export default TextField;
+export type { Props as TextFieldProps };

package/src/ui/components/TextField.js

@@ -0,0 +1,291 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const React = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const TextFieldAffix_1 = __importDefault(require("./TextField/Adornment/TextFieldAffix"));
+const TextFieldIcon_1 = __importDefault(require("./TextField/Adornment/TextFieldIcon"));
+const TextFieldFlat_1 = __importDefault(require("./TextField/TextFieldFlat"));
+const TextFieldOutlined_1 = __importDefault(require("./TextField/TextFieldOutlined"));
+const theming_1 = require("./theming");
+const forwardRef_1 = require("./utils/forwardRef");
+const roundLayoutSize_1 = require("./utils/roundLayoutSize");
+const BLUR_ANIMATION_DURATION = 180;
+const FOCUS_ANIMATION_DURATION = 150;
+const DefaultRenderer = (props) => (0, jsx_runtime_1.jsx)(react_native_1.TextInput, { ...props });
+/**
+ * A component to allow users to input text.
+ *
+ * ## Usage
+ * ```js
+ * import * as React from 'react';
+ * import { TextField } from './TextField';
+ *
+ * const MyComponent = () => {
+ *   const [text, setText] = React.useState("");
+ *
+ *   return (
+ *     <TextField
+ *       label="Email"
+ *       value={text}
+ *       onChangeText={text => setText(text)}
+ *     />
+ *   );
+ * };
+ *
+ * export default MyComponent;
+ * ```
+ *
+ * @extends TextInput props https://reactnative.dev/docs/textinput#props
+ */
+const TextField = (0, forwardRef_1.forwardRef)(({ mode = 'flat', dense = false, disabled = false, error: errorProp = false, multiline = false, editable = true, contentStyle, render = DefaultRenderer, theme: themeOverrides, ...rest }, ref) => {
+    const theme = (0, theming_1.useInternalTheme)(themeOverrides);
+    const isControlled = rest.value !== undefined;
+    const validInputValue = isControlled ? rest.value : rest.defaultValue;
+    const { current: labeled } = React.useRef(new react_native_1.Animated.Value(validInputValue ? 0 : 1));
+    const { current: error } = React.useRef(new react_native_1.Animated.Value(errorProp ? 1 : 0));
+    const [focused, setFocused] = React.useState(false);
+    const [displayPlaceholder, setDisplayPlaceholder] = React.useState(false);
+    const [uncontrolledValue, setUncontrolledValue] = React.useState(validInputValue);
+    // Use value from props instead of local state when input is controlled
+    const value = isControlled ? rest.value : uncontrolledValue;
+    const [labelTextLayout, setLabelTextLayout] = React.useState({
+        width: 33,
+    });
+    const [inputContainerLayout, setInputContainerLayout] = React.useState({
+        width: 65,
+    });
+    const [labelLayout, setLabelLayout] = React.useState({
+        measured: false,
+        width: 0,
+        height: 0,
+    });
+    const [leftLayout, setLeftLayout] = React.useState({
+        width: null,
+        height: null,
+    });
+    const [rightLayout, setRightLayout] = React.useState({
+        width: null,
+        height: null,
+    });
+    const timer = React.useRef(undefined);
+    const root = React.useRef(null);
+    const { scale } = theme.animation;
+    React.useImperativeHandle(ref, () => ({
+        focus: () => root.current?.focus(),
+        clear: () => root.current?.clear(),
+        setNativeProps: (args) => root.current?.setNativeProps(args),
+        isFocused: () => root.current?.isFocused() || false,
+        blur: () => root.current?.blur(),
+        forceFocus: () => root.current?.focus(),
+        setSelection: (start, end) => root.current?.setSelection(start, end),
+    }));
+    React.useEffect(() => {
+        // When the input has an error, we wiggle the label and apply error styles
+        if (errorProp) {
+            // show error
+            react_native_1.Animated.timing(error, {
+                toValue: 1,
+                duration: FOCUS_ANIMATION_DURATION * scale,
+                // To prevent this - https://github.com/callstack/react-native-paper/issues/941
+                useNativeDriver: true,
+            }).start();
+        }
+        else {
+            react_native_1.Animated.timing(error, {
+                toValue: 0,
+                duration: BLUR_ANIMATION_DURATION * scale,
+                // To prevent this - https://github.com/callstack/react-native-paper/issues/941
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [errorProp, scale, error]);
+    React.useEffect(() => {
+        // Show placeholder text only if the input is focused, or there's no label
+        // We don't show placeholder if there's a label because the label acts as placeholder
+        // When focused, the label moves up, so we can show a placeholder
+        if (focused || !rest.label) {
+            // If the user wants to use the contextMenu, when changing the placeholder, the contextMenu is closed
+            // This is a workaround to mitigate this behavior in scenarios where the placeholder is not specified.
+            if (rest.placeholder) {
+                // Display placeholder in a delay to offset the label animation
+                // If we show it immediately, they'll overlap and look ugly
+                timer.current = setTimeout(() => setDisplayPlaceholder(true), 50);
+            }
+        }
+        else {
+            // hidePlaceholder
+            setDisplayPlaceholder(false);
+        }
+        return () => {
+            if (timer.current) {
+                clearTimeout(timer.current);
+            }
+        };
+    }, [focused, rest.label, rest.placeholder]);
+    React.useEffect(() => {
+        labeled.stopAnimation();
+        // The label should be minimized if the text input is focused, or has text
+        // In minimized mode, the label moves up and becomes small
+        // workaround for animated regression for react native > 0.61
+        // https://github.com/callstack/react-native-paper/pull/1440
+        if (value || focused) {
+            // minimize label
+            react_native_1.Animated.timing(labeled, {
+                toValue: 0,
+                duration: BLUR_ANIMATION_DURATION * scale,
+                // To prevent this - https://github.com/callstack/react-native-paper/issues/941
+                useNativeDriver: true,
+            }).start();
+        }
+        else {
+            // restore label
+            react_native_1.Animated.timing(labeled, {
+                toValue: 1,
+                duration: FOCUS_ANIMATION_DURATION * scale,
+                // To prevent this - https://github.com/callstack/react-native-paper/issues/941
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [focused, value, labeled, scale]);
+    const onLeftAffixLayoutChange = React.useCallback((event) => {
+        const height = (0, roundLayoutSize_1.roundLayoutSize)(event.nativeEvent.layout.height);
+        const width = (0, roundLayoutSize_1.roundLayoutSize)(event.nativeEvent.layout.width);
+        if (width !== leftLayout.width || height !== leftLayout.height) {
+            setLeftLayout({
+                width,
+                height,
+            });
+        }
+    }, [leftLayout.height, leftLayout.width]);
+    const onRightAffixLayoutChange = React.useCallback((event) => {
+        const width = (0, roundLayoutSize_1.roundLayoutSize)(event.nativeEvent.layout.width);
+        const height = (0, roundLayoutSize_1.roundLayoutSize)(event.nativeEvent.layout.height);
+        if (width !== rightLayout.width || height !== rightLayout.height) {
+            setRightLayout({
+                width,
+                height,
+            });
+        }
+    }, [rightLayout.height, rightLayout.width]);
+    const handleFocus = (args) => {
+        if (disabled || !editable) {
+            return;
+        }
+        setFocused(true);
+        rest.onFocus?.(args);
+    };
+    const handleBlur = (args) => {
+        if (!editable) {
+            return;
+        }
+        setFocused(false);
+        rest.onBlur?.(args);
+    };
+    const handleChangeText = (value) => {
+        if (!editable || disabled) {
+            return;
+        }
+        if (!isControlled) {
+            // Keep track of value in local state when input is not controlled
+            setUncontrolledValue(value);
+        }
+        rest.onChangeText?.(value);
+    };
+    const handleLayoutAnimatedText = React.useCallback((e) => {
+        const width = (0, roundLayoutSize_1.roundLayoutSize)(e.nativeEvent.layout.width);
+        const height = (0, roundLayoutSize_1.roundLayoutSize)(e.nativeEvent.layout.height);
+        if (width !== labelLayout.width || height !== labelLayout.height) {
+            setLabelLayout({
+                width,
+                height,
+                measured: true,
+            });
+        }
+    }, [labelLayout.height, labelLayout.width]);
+    const handleLabelTextLayout = React.useCallback(({ nativeEvent }) => {
+        setLabelTextLayout({
+            width: nativeEvent.lines.reduce((acc, line) => acc + Math.ceil(line.width), 0),
+        });
+    }, []);
+    const handleInputContainerLayout = React.useCallback(({ nativeEvent: { layout } }) => {
+        setInputContainerLayout({
+            width: layout.width,
+        });
+    }, []);
+    const forceFocus = React.useCallback(() => root.current?.focus(), []);
+    const { maxFontSizeMultiplier = 1.5 } = rest;
+    const scaledLabel = !!(value || focused);
+    if (mode === 'outlined') {
+        return ((0, jsx_runtime_1.jsx)(TextFieldOutlined_1.default, { dense: dense, disabled: disabled, error: errorProp, multiline: multiline, editable: editable, render: render, ...rest, theme: theme, value: value, parentState: {
+                labeled,
+                error,
+                focused,
+                displayPlaceholder,
+                value,
+                labelTextLayout,
+                labelLayout,
+                leftLayout,
+                rightLayout,
+                inputContainerLayout,
+            }, innerRef: (ref) => {
+                root.current = ref;
+            }, onFocus: handleFocus, forceFocus: forceFocus, onBlur: handleBlur, onChangeText: handleChangeText, onLayoutAnimatedText: handleLayoutAnimatedText, onInputLayout: handleInputContainerLayout, onLabelTextLayout: handleLabelTextLayout, onLeftAffixLayoutChange: onLeftAffixLayoutChange, onRightAffixLayoutChange: onRightAffixLayoutChange, maxFontSizeMultiplier: maxFontSizeMultiplier, contentStyle: contentStyle, scaledLabel: scaledLabel }));
+    }
+    return ((0, jsx_runtime_1.jsx)(TextFieldFlat_1.default, { dense: dense, disabled: disabled, error: errorProp, multiline: multiline, editable: editable, render: render, ...rest, theme: theme, value: value, parentState: {
+            labeled,
+            error,
+            focused,
+            displayPlaceholder,
+            value,
+            labelTextLayout,
+            labelLayout,
+            leftLayout,
+            rightLayout,
+            inputContainerLayout,
+        }, innerRef: (ref) => {
+            root.current = ref;
+        }, onFocus: handleFocus, forceFocus: forceFocus, onBlur: handleBlur, onInputLayout: handleInputContainerLayout, onChangeText: handleChangeText, onLayoutAnimatedText: handleLayoutAnimatedText, onLabelTextLayout: handleLabelTextLayout, onLeftAffixLayoutChange: onLeftAffixLayoutChange, onRightAffixLayoutChange: onRightAffixLayoutChange, maxFontSizeMultiplier: maxFontSizeMultiplier, contentStyle: contentStyle, scaledLabel: scaledLabel }));
+});
+// @component ./TextField/Adornment/TextFieldIcon.tsx
+TextField.Icon = TextFieldIcon_1.default;
+// @component ./TextField/Adornment/TextFieldAffix.tsx
+// @ts-ignore Types of property 'theme' are incompatible.
+TextField.Affix = TextFieldAffix_1.default;
+exports.default = TextField;

package/src/ui/components/TouchableRipple/Pressable.d.ts

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+import type { Animated, PressableProps as PressableNativeProps, StyleProp, View, ViewStyle } from 'react-native';
+export type PressableStateCallbackType = {
+    hovered: boolean;
+    pressed: boolean;
+    focused: boolean;
+};
+export type PressableProps = Omit<PressableNativeProps, 'children' | 'style'> & {
+    children: React.ReactNode | ((state: PressableStateCallbackType) => React.ReactNode) | undefined;
+    style?: StyleProp<ViewStyle> | Animated.WithAnimatedValue<StyleProp<ViewStyle>> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle> | Animated.WithAnimatedValue<StyleProp<ViewStyle>>) | undefined;
+};
+export declare const Pressable: React.ForwardRefExoticComponent<PressableProps & React.RefAttributes<View>>;

package/src/ui/components/TouchableRipple/Pressable.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Pressable = void 0;
+const react_native_1 = require("react-native");
+exports.Pressable = react_native_1.Pressable;

package/src/ui/components/TouchableRipple/TouchableRipple.d.ts

@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { type ColorValue, type GestureResponderEvent, type StyleProp, type View, type ViewStyle } from 'react-native';
+import type { PressableProps, PressableStateCallbackType } from './Pressable';
+import type { ThemeProp } from '../types';
+export type Props = PressableProps & {
+    /**
+     * Whether to render the ripple outside the view bounds.
+     */
+    borderless?: boolean;
+    /**
+     * Type of background drawabale to display the feedback (Android).
+     * https://reactnative.dev/docs/pressable#rippleconfig
+     */
+    background?: Object;
+    /**
+     * Whether to start the ripple at the center (Web).
+     */
+    centered?: boolean;
+    /**
+     * Whether to prevent interaction with the touchable.
+     */
+    disabled?: boolean;
+    /**
+     * Function to execute on press. If not set, will cause the touchable to be disabled.
+     */
+    onPress?: (e: GestureResponderEvent) => void;
+    /**
+     * Function to execute on long press.
+     */
+    onLongPress?: (e: GestureResponderEvent) => void;
+    /**
+     * Function to execute immediately when a touch is engaged, before `onPressOut` and `onPress`.
+     */
+    onPressIn?: (e: GestureResponderEvent) => void;
+    /**
+     * Function to execute when a touch is released.
+     */
+    onPressOut?: (e: GestureResponderEvent) => void;
+    /**
+     * Color of the ripple effect (Android >= 5.0 and Web).
+     */
+    rippleColor?: ColorValue;
+    /**
+     * Color of the underlay for the highlight effect (Android < 5.0 and iOS).
+     */
+    underlayColor?: string;
+    /**
+     * Content of the `TouchableRipple`.
+     */
+    children: ((state: PressableStateCallbackType) => React.ReactNode) | React.ReactNode;
+    style?: StyleProp<ViewStyle> | ((state: PressableStateCallbackType) => StyleProp<ViewStyle>) | undefined;
+    /**
+     * @optional
+     */
+    theme?: ThemeProp;
+};
+declare const Component: import("../utils/forwardRef").ForwardRefComponent<View, Props>;
+declare const _default: typeof Component & {
+    supported: boolean;
+};
+export default _default;