react-native-ui-lib 8.1.1 → 8.1.5

package/src/components/icon/index.d.ts

@@ -0,0 +1,97 @@
+import React from 'react';
+import { ImageProps as RNImageProps } from 'react-native';
+import { BaseComponentInjectedProps, MarginModifiers } from '../../commons/new';
+import { ComponentStatics } from '../../typings/common';
+import { RecorderProps } from '../../typings/recorderTypes';
+import { BadgeProps } from '../badge';
+import type { ImageProps } from '../image';
+export type IconProps = Omit<RNImageProps, 'source' | 'tintColor'> & MarginModifiers & RecorderProps & {
+    /**
+     * if provided icon source will be driven from asset name
+     */
+    assetName?: string;
+    /**
+     * the asset group, default is "icons"
+     */
+    assetGroup?: string;
+    /**
+     * Badge props passed down to Badge component
+     */
+    badgeProps?: BadgeProps;
+    /**
+     * the icon tint
+     */
+    tintColor?: string | null;
+    /**
+     * the icon size
+     */
+    size?: number | {
+        width: number;
+        height: number;
+    };
+    /**
+     * whether the icon should flip horizontally on RTL
+     */
+    supportRTL?: boolean;
+    source?: ImageProps['source'];
+};
+declare const _default: React.ForwardRefExoticComponent<Omit<RNImageProps, "source" | "tintColor"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & RecorderProps & {
+    /**
+     * if provided icon source will be driven from asset name
+     */
+    assetName?: string | undefined;
+    /**
+     * the asset group, default is "icons"
+     */
+    assetGroup?: string | undefined;
+    /**
+     * Badge props passed down to Badge component
+     */
+    badgeProps?: BadgeProps | undefined;
+    /**
+     * the icon tint
+     */
+    tintColor?: string | null | undefined;
+    /**
+     * the icon size
+     */
+    size?: number | {
+        width: number;
+        height: number;
+    } | undefined;
+    /**
+     * whether the icon should flip horizontally on RTL
+     */
+    supportRTL?: boolean | undefined;
+    source?: import("../image").ImageSourceType;
+} & React.RefAttributes<any>> & ComponentStatics<React.ForwardRefExoticComponent<Omit<RNImageProps, "source" | "tintColor"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & RecorderProps & {
+    /**
+     * if provided icon source will be driven from asset name
+     */
+    assetName?: string | undefined;
+    /**
+     * the asset group, default is "icons"
+     */
+    assetGroup?: string | undefined;
+    /**
+     * Badge props passed down to Badge component
+     */
+    badgeProps?: BadgeProps | undefined;
+    /**
+     * the icon tint
+     */
+    tintColor?: string | null | undefined;
+    /**
+     * the icon size
+     */
+    size?: number | {
+        width: number;
+        height: number;
+    } | undefined;
+    /**
+     * whether the icon should flip horizontally on RTL
+     */
+    supportRTL?: boolean | undefined;
+    source?: import("../image").ImageSourceType;
+} & BaseComponentInjectedProps & React.RefAttributes<unknown>>>;
+export default _default;

package/src/components/image/Image.driver.d.ts

@@ -0,0 +1,4 @@
+import { ImageProps } from './index';
+import { ComponentDriver } from '../../testkit/Component.driver';
+export declare class ImageDriver extends ComponentDriver<ImageProps> {
+}

package/src/components/image/Image.driver.new.d.ts

@@ -0,0 +1,2 @@
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const ImageDriver: (props: ComponentProps) => import("../../testkit/new/Component.driver").ComponentDriverResult;

package/src/components/image/index.d.ts

@@ -0,0 +1,192 @@
+import React, { PureComponent } from 'react';
+import { Image as RNImage, ImageProps as RNImageProps, ImageBackgroundProps, NativeSyntheticEvent, ImageErrorEventData } from 'react-native';
+import { ForwardRefInjectedProps, BaseComponentInjectedProps, MarginModifiers } from '../../commons/new';
+import { ComponentStatics } from '../../typings/common';
+import { RecorderProps } from '../../typings/recorderTypes';
+import { OverlayTypeType, OverlayIntensityType } from '../overlay';
+export type ImageSourceType = string | RNImageProps['source'];
+export type ImageProps = Omit<RNImageProps, 'source'> & Pick<ImageBackgroundProps, 'imageStyle'> & MarginModifiers & RecorderProps & {
+    /**
+     * custom source transform handler for manipulating the image source (great for size control)
+     */
+    sourceTransformer?: (props: any) => ImageSourceType;
+    /**
+     * if provided image source will be driven from asset name
+     */
+    assetName?: string;
+    /**
+     * the asset group, default is "icons"
+     */
+    assetGroup?: string;
+    /**
+     * the asset tint
+     */
+    tintColor?: string;
+    /**
+     * whether the image should flip horizontally on RTL locals
+     */
+    supportRTL?: boolean;
+    /**
+     * Show image as a cover, full width, image (according to aspect ratio, default: 16:8)
+     */
+    cover?: boolean;
+    /**
+     * The aspect ratio for the image
+     */
+    aspectRatio?: number;
+    /**
+     * The type of overly to place on top of the image. Note: the image MUST have proper size, see examples in:
+     * https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/OverlaysScreen.tsx
+     */
+    overlayType?: OverlayTypeType;
+    /**
+     * The intensity of the overlay ('LOW' | 'MEDIUM' | 'HIGH'), default is 'LOW'.
+     */
+    overlayIntensity?: OverlayIntensityType;
+    /**
+     * Pass a custom color for the overlay
+     */
+    overlayColor?: string;
+    /**
+     * Render an overlay with custom content
+     */
+    customOverlayContent?: React.ReactElement | React.ReactElement[];
+    /**
+     * Default image source in case of an error
+     */
+    errorSource?: ImageSourceType;
+    /**
+     * An imageId that can be used in sourceTransformer logic
+     */
+    imageId?: string;
+    /**
+     * Use a container for the Image, this can solve issues on
+     * Android when animation needs to be performed on the same
+     * view; i.e. animation related crashes on Android.
+     */
+    useBackgroundContainer?: boolean;
+    /**
+     * The image width
+     */
+    width?: string | number;
+    /**
+     * The image height
+     */
+    height?: string | number;
+    source: ImageSourceType;
+};
+type Props = ImageProps & ForwardRefInjectedProps & BaseComponentInjectedProps;
+type State = {
+    error: boolean;
+    prevSource: ImageSourceType;
+};
+/**
+ * @description: Image wrapper with extra functionality like source transform and assets support
+ * @extends: Image
+ * @extendsLink: https://reactnative.dev/docs/image
+ * @notes: please note that for SVG support you need to add both
+ * `react-native-svg` and `react-native-svg-transformer`,
+ * and also configure them (see `metro.config.js`)
+ */
+declare class Image extends PureComponent<Props, State> {
+    static displayName: string;
+    static defaultProps: {
+        assetGroup: string;
+    };
+    static overlayTypes: {
+        VERTICAL: string;
+        TOP: string;
+        BOTTOM: string;
+        SOLID: string;
+    };
+    static overlayIntensityType: typeof OverlayIntensityType;
+    sourceTransformer?: (props: any) => ImageSourceType;
+    constructor(props: Props);
+    static getDerivedStateFromProps(nextProps: Partial<Props>, prevState: State): {
+        error: boolean;
+        prevSource: ImageSourceType;
+    } | null;
+    isGif(): boolean | undefined;
+    shouldUseImageBackground(): boolean;
+    getVerifiedSource(source?: ImageSourceType): any;
+    getImageSource(): any;
+    getImageStyle: () => import("react-native").StyleProp<import("react-native").ImageStyle>;
+    onError: (event: NativeSyntheticEvent<ImageErrorEventData>) => void;
+    renderSvg: () => React.JSX.Element;
+    renderImageWithContainer: () => React.JSX.Element;
+    renderImage: (useImageInsideContainer: boolean) => React.JSX.Element;
+    renderRegularImage(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export { Image };
+declare const _default: React.ForwardRefExoticComponent<Omit<RNImageProps, "source"> & Pick<ImageBackgroundProps, "imageStyle"> & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & RecorderProps & {
+    /**
+     * custom source transform handler for manipulating the image source (great for size control)
+     */
+    sourceTransformer?: ((props: any) => ImageSourceType) | undefined;
+    /**
+     * if provided image source will be driven from asset name
+     */
+    assetName?: string | undefined;
+    /**
+     * the asset group, default is "icons"
+     */
+    assetGroup?: string | undefined;
+    /**
+     * the asset tint
+     */
+    tintColor?: string | undefined;
+    /**
+     * whether the image should flip horizontally on RTL locals
+     */
+    supportRTL?: boolean | undefined;
+    /**
+     * Show image as a cover, full width, image (according to aspect ratio, default: 16:8)
+     */
+    cover?: boolean | undefined;
+    /**
+     * The aspect ratio for the image
+     */
+    aspectRatio?: number | undefined;
+    /**
+     * The type of overly to place on top of the image. Note: the image MUST have proper size, see examples in:
+     * https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/OverlaysScreen.tsx
+     */
+    overlayType?: string | undefined;
+    /**
+     * The intensity of the overlay ('LOW' | 'MEDIUM' | 'HIGH'), default is 'LOW'.
+     */
+    overlayIntensity?: OverlayIntensityType | undefined;
+    /**
+     * Pass a custom color for the overlay
+     */
+    overlayColor?: string | undefined;
+    /**
+     * Render an overlay with custom content
+     */
+    customOverlayContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
+    /**
+     * Default image source in case of an error
+     */
+    errorSource?: ImageSourceType;
+    /**
+     * An imageId that can be used in sourceTransformer logic
+     */
+    imageId?: string | undefined;
+    /**
+     * Use a container for the Image, this can solve issues on
+     * Android when animation needs to be performed on the same
+     * view; i.e. animation related crashes on Android.
+     */
+    useBackgroundContainer?: boolean | undefined;
+    /**
+     * The image width
+     */
+    width?: string | number | undefined;
+    /**
+     * The image height
+     */
+    height?: string | number | undefined;
+    source: ImageSourceType;
+} & React.RefAttributes<any>> & ComponentStatics<typeof Image & typeof RNImage>;
+export default _default;

package/src/components/listItem/ListItemPart.d.ts

@@ -0,0 +1,15 @@
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { ListItemPartProps } from './types';
+export { ListItemPartProps };
+declare const _default: React.ForwardRefExoticComponent<{
+    left?: boolean | undefined;
+    middle?: boolean | undefined;
+    right?: boolean | undefined;
+    row?: boolean | undefined;
+    column?: boolean | undefined;
+    containerStyle?: import("react-native").StyleProp<ViewStyle>;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<any>>;
+export default _default;

package/src/components/listItem/index.d.ts

@@ -0,0 +1,52 @@
+import React, { Component } from 'react';
+import ListItemPart from './ListItemPart';
+import { ListItemProps } from './types';
+type ListItemState = {
+    pressed: boolean;
+};
+/**
+ * @description: List item component to render inside a List component
+ * @extends: TouchableOpacity
+ * @gif: https://media.giphy.com/media/l1IBjHowyPcOTWAY8/giphy.gif
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/BasicListScreen.tsx
+ */
+declare class ListItem extends Component<ListItemProps, ListItemState> {
+    static displayName: string;
+    static defaultProps: {
+        height: number;
+        containerElement: React.ForwardRefExoticComponent<import("../../components/touchableOpacity").TouchableOpacityProps & React.RefAttributes<any>>;
+        underlayColor: string;
+    };
+    static Part: typeof ListItemPart;
+    styles: {
+        container: {
+            backgroundColor: string;
+        };
+        innerContainer: {
+            flexDirection: "row";
+            height: import("react-native").DimensionValue | undefined;
+        };
+    };
+    constructor(props: ListItemProps);
+    onHideUnderlay(): void;
+    onShowUnderlay(): void;
+    setPressed(isPressed: boolean): void;
+    renderViewContainer: () => React.JSX.Element;
+    renderCustomContainer: (Container: React.ComponentType) => React.JSX.Element;
+    renderChildren: () => React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export { ListItemProps };
+declare const _default: React.ForwardRefExoticComponent<import("../../components/touchableOpacity").TouchableOpacityProps & {
+    height?: import("react-native").DimensionValue | undefined;
+    onPress?: (() => void) | undefined;
+    onLongPress?: (() => void) | undefined;
+    containerStyle?: import("react-native").ViewStyle | undefined;
+    containerElement?: React.ComponentType<import("../../components/touchableOpacity").TouchableOpacityProps | ListItemProps> | undefined;
+    style?: import("react-native").ViewStyle | undefined;
+    underlayColor?: string | undefined;
+    testID?: string | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<any>> & typeof ListItem;
+export default _default;

package/src/components/listItem/types.d.ts

@@ -0,0 +1,60 @@
+import { PropsWithChildren } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { TouchableOpacityProps } from '../touchableOpacity';
+export type ListItemProps = TouchableOpacityProps & PropsWithChildren<{
+    /**
+     * the list item height
+     */
+    height?: ViewStyle['height'];
+    /**
+     * action for when pressing the item
+     */
+    onPress?: () => void;
+    /**
+     * action for when long pressing the item
+     */
+    onLongPress?: () => void;
+    /**
+     * Additional styles for the top container
+     */
+    containerStyle?: ViewStyle;
+    /**
+     * The container element to wrap the ListItem
+     */
+    containerElement?: React.ComponentType<ListItemProps | TouchableOpacityProps>;
+    /**
+     * The inner element style
+     */
+    style?: ViewStyle;
+    /**
+     * The inner element pressed backgroundColor
+     */
+    underlayColor?: string;
+    testID?: string;
+}>;
+export type ListItemPartProps = PropsWithChildren<{
+    /**
+     * this part content will be aligned to left
+     */
+    left?: boolean;
+    /**
+     * this part content will be aligned to spreaded
+     */
+    middle?: boolean;
+    /**
+     * this part content will be aligned to right
+     */
+    right?: boolean;
+    /**
+     * this part content direction will be row (default)
+     */
+    row?: boolean;
+    /**
+     * this part content direction will be column
+     */
+    column?: boolean;
+    /**
+     * container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+}>;

package/src/components/loaderScreen/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { LoaderScreenProps } from './types';
+export { LoaderScreenProps };
+declare const _default: React.ForwardRefExoticComponent<import("react-native").ActivityIndicatorProps & {
+    loaderColor?: string | undefined;
+    customLoader?: React.ReactChild | undefined;
+    backgroundColor?: string | undefined;
+    message?: string | undefined;
+    messageStyle?: import("react-native").TextStyle | undefined;
+    overlay?: boolean | undefined;
+    containerStyle?: import("react-native").ViewStyle | undefined;
+} & React.RefAttributes<any>>;
+export default _default;

package/src/components/loaderScreen/types.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { ActivityIndicatorProps, TextStyle, ViewStyle } from 'react-native';
+export type LoaderScreenProps = ActivityIndicatorProps & {
+    /**
+     * Color of the loading indicator
+     */
+    loaderColor?: string;
+    /**
+     * Custom loader
+     */
+    customLoader?: React.ReactChild;
+    /**
+     * Color of the loader background (only when passing 'overlay')
+     */
+    backgroundColor?: string;
+    /**
+     * loader message
+     */
+    message?: string;
+    /**
+     * message style
+     */
+    messageStyle?: TextStyle;
+    /**
+     * Show the screen as an absolute overlay
+     */
+    overlay?: boolean;
+    /**
+    * Custom container style
+    */
+    containerStyle?: ViewStyle;
+};

package/src/components/marquee/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { MarqueeDirections, MarqueeProps } from './types';
+declare function Marquee(props: MarqueeProps): React.JSX.Element;
+export { MarqueeProps, MarqueeDirections };
+export default Marquee;

package/src/components/marquee/types.d.ts

@@ -0,0 +1,35 @@
+import type { PropsWithChildren } from 'react';
+import { TextProps } from '../text';
+import { ViewProps } from '../view';
+export declare enum MarqueeDirections {
+    RIGHT = "RIGHT",
+    LEFT = "LEFT",
+    UP = "UP",
+    DOWN = "DOWN"
+}
+export type MarqueeProps = PropsWithChildren<{
+    /**
+     * Marquee label
+     */
+    label: string;
+    /**
+     * Marquee label style
+     */
+    labelStyle?: TextProps['style'];
+    /**
+     * Marquee direction
+     */
+    direction?: MarqueeDirections | `${MarqueeDirections}`;
+    /**
+     * Marquee animation duration
+     */
+    duration?: number;
+    /**
+     * Marquee animation number of repetitions
+     */
+    numberOfReps?: number;
+    /**
+     * Custom container style
+     */
+    containerStyle?: ViewProps['style'];
+}>;

package/src/components/maskedInput/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { MaskedInputProps } from './new';
+export { MaskedInputProps };
+declare const _default: React.ForwardRefExoticComponent<Omit<any, "ref"> & React.RefAttributes<unknown>>;
+export default _default;

package/src/components/maskedInput/new.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+import { TextInputProps, StyleProp, ViewStyle } from 'react-native';
+export interface MaskedInputProps extends Omit<TextInputProps, 'value'> {
+    /**
+     * Initial value to pass to masked input
+     */
+    initialValue?: string;
+    /**
+     * callback for rendering the custom input out of the value returns from the actual input
+     */
+    renderMaskedText?: (value?: string) => JSX.Element | undefined;
+    /**
+     * Custom formatter for the input value
+     */
+    formatter?: (value?: string) => string | undefined;
+    /**
+     * container style for the masked input container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+}
+declare const _default: React.ForwardRefExoticComponent<MaskedInputProps & React.RefAttributes<any>>;
+export default _default;

package/src/components/modal/Modal.driver.new.d.ts

@@ -0,0 +1,8 @@
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const ModalDriver: (props: ComponentProps) => {
+    isVisible: () => boolean;
+    pressOnBackground: () => void;
+    getElement: () => import("react-test-renderer").ReactTestInstance;
+    queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+    exists: () => boolean;
+};

package/src/components/modal/TopBar.d.ts

@@ -0,0 +1,89 @@
+import React from 'react';
+import { StyleProp, TextStyle, ImageSourcePropType, AccessibilityProps } from 'react-native';
+import { ViewProps } from '../../components/view';
+import { ButtonProps } from '../../components/button';
+export interface ModalTopBarProps {
+    /**
+     * title to display in the center of the top bar
+     */
+    title?: string;
+    /**
+     * title custom style
+     */
+    titleStyle?: StyleProp<TextStyle>;
+    /**
+     * Accessibility props for the title
+     */
+    titleAccessibilityProps?: Omit<AccessibilityProps, 'accessible'>;
+    /**
+     * subtitle to display below the top bar title
+     */
+    subtitle?: string;
+    /**
+     * subtitle custom style
+     */
+    subtitleStyle?: StyleProp<TextStyle>;
+    /**
+     * done action props (Button props)
+     */
+    doneButtonProps?: Omit<ButtonProps, 'onPress'>;
+    /**
+     * done action label
+     */
+    doneLabel?: string;
+    /**
+     * done action icon
+     */
+    doneIcon?: ImageSourcePropType | null;
+    /**
+     * done action callback
+     */
+    onDone?: (props?: any) => void;
+    /**
+     * cancel action props (Button props)
+     */
+    cancelButtonProps?: Omit<ButtonProps, 'onPress'>;
+    /**
+     * cancel action label
+     */
+    cancelLabel?: string;
+    /**
+     * cancel action icon
+     */
+    cancelIcon?: ImageSourcePropType | null;
+    /**
+     * cancel action callback
+     */
+    onCancel?: (props?: any) => void;
+    /**
+     * buttons to render on the right side of the top bar
+     */
+    rightButtons?: topBarButtonProp | topBarButtonProp[];
+    /**
+     * buttons to render on the left side of the top bar
+     */
+    leftButtons?: topBarButtonProp | topBarButtonProp[];
+    /**
+     * whether to include status bar or not (height claculations)
+     */
+    includeStatusBar?: boolean;
+    /**
+     * style for the TopBar container
+     */
+    containerStyle?: ViewProps['style'];
+    /**
+     * Whether or not to handle SafeArea
+     */
+    useSafeArea?: boolean;
+    testID?: string;
+}
+type topBarButtonProp = {
+    onPress?: (props: any) => void;
+    label?: string;
+    icon?: ImageSourcePropType | null;
+    accessibilityLabel?: string;
+    buttonProps?: Omit<ButtonProps, 'onPress'>;
+    testID?: string;
+};
+declare const _default: React.ForwardRefExoticComponent<ModalTopBarProps & React.RefAttributes<any>>;
+export default _default;