react-native-ui-lib 8.1.1 → 8.1.5

package/src/components/gridList/useGridLayout.d.ts

@@ -0,0 +1,15 @@
+import { GridListBaseProps } from './types';
+export declare const DEFAULT_NUM_COLUMNS = 3;
+export declare const DEFAULT_ITEM_SPACINGS: number;
+declare const useGridLayout: (props: GridListBaseProps) => {
+    itemContainerStyle: {
+        width: number;
+    };
+    numberOfColumns: number;
+    itemWidth: number;
+    itemSpacing: number;
+    listStyle: import("react-native/types").StyleProp<import("react-native/types").ViewStyle>[];
+    listContentStyle: import("react-native/types").StyleProp<import("react-native/types").ViewStyle>[];
+    listColumnWrapperStyle: import("react-native/types").StyleProp<import("react-native/types").ViewStyle>[];
+};
+export default useGridLayout;

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

@@ -0,0 +1,132 @@
+import React, { Component } from 'react';
+import { type DimensionValue, StyleProp, ViewStyle } from 'react-native';
+import { ViewProps } from '../view';
+import { TouchableOpacityProps } from '../touchableOpacity';
+import { type TextProps } from '../text';
+import { ImageProps } from '../image';
+export declare enum HorizontalAlignment {
+    left = "left",
+    center = "center",
+    right = "right"
+}
+export interface GridListItemProps {
+    /**
+     * Image props object for rendering an image item
+     */
+    imageProps?: ImageProps;
+    /**
+     * Props to pass on to the touchable container
+     */
+    containerProps?: Omit<TouchableOpacityProps | ViewProps, 'style'>;
+    /**
+     * Custom GridListItem to be rendered in the GridView
+     */
+    renderCustomItem?: () => React.ReactElement;
+    /**
+     * The item size
+     */
+    itemSize?: number | ImageSize;
+    /**
+     * Title content text
+     */
+    title?: string | React.ReactElement;
+    /**
+     * Title content typography
+     */
+    titleTypography?: string;
+    /**
+     * Title content color
+     */
+    titleColor?: string;
+    /**
+     * Title content number of lines
+     */
+    titleLines?: number;
+    /**
+     * Subtitle content text
+     */
+    subtitle?: string | React.ReactElement;
+    /**
+     * Subtitle content typography
+     */
+    subtitleTypography?: string;
+    /**
+     * Subtitle content color
+     */
+    subtitleColor?: string;
+    /**
+     * Subtitle content number of lines
+     */
+    subtitleLines?: number;
+    /**
+     * Description content text
+     */
+    description?: string | React.ReactElement;
+    /**
+     * Description content typography
+     */
+    descriptionTypography?: string;
+    /**
+     * Description content color
+     */
+    descriptionColor?: string;
+    /**
+     * Description content number of lines
+     */
+    descriptionLines?: number;
+    /**
+     * Renders the title, subtitle and description inside the item
+     */
+    overlayText?: boolean;
+    /**
+     * Custom container styling for inline text
+     */
+    overlayTextContainerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Should content be align to start (default is center)
+     */
+    alignToStart?: boolean;
+    /**
+     * Content horizontal alignment (default is center)
+     */
+    horizontalAlignment?: HorizontalAlignment | `${HorizontalAlignment}`;
+    /**
+     * Custom container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * The item's action handler
+     */
+    onPress?: TouchableOpacityProps['onPress'];
+    /**
+     * Renders an overlay on top of the image
+     */
+    renderOverlay?: () => React.ReactElement;
+    /**
+     * Test ID for component
+     */
+    testID?: string;
+    children?: React.ReactElement | React.ReactElement[];
+}
+/**
+ * @description: A single grid view/list item component
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridViewScreen.tsx
+ */
+declare class GridListItem extends Component<GridListItemProps> {
+    static displayName: string;
+    static horizontalAlignment: typeof HorizontalAlignment;
+    static defaultProps: {
+        itemSize: number;
+    };
+    state: {};
+    onItemPress: () => void;
+    getItemSizeObj(): ImageSize;
+    getContainerHorizontalAlignment: (this: any, horizontalAlignment: any) => "center" | "flex-start" | "flex-end" | undefined;
+    renderContent(text: string | React.ReactElement | undefined, textProps: Partial<TextProps>): React.JSX.Element | undefined;
+    render(): React.JSX.Element;
+}
+export default GridListItem;
+interface ImageSize {
+    width?: DimensionValue;
+    height?: DimensionValue;
+}

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

@@ -0,0 +1,80 @@
+import React from 'react';
+import UIComponent from '../../commons/UIComponent';
+import { GridListItemProps } from '../gridListItem';
+export interface GridViewProps {
+    /**
+     * The list of items based on GridListItem props
+     */
+    items?: GridListItemProps[];
+    /**
+     * pass the desired grid view width (will improve loading time)
+     */
+    viewWidth?: number;
+    /**
+     * Allow a responsive item width to the maximum item width
+     */
+    maxItemWidth?: number;
+    /**
+     * Number of items to show in a row (ignored when passing maxItemWidth)
+     */
+    numColumns?: number;
+    /**
+     * Spacing between each item
+     */
+    itemSpacing?: number;
+    /**
+     * overlay label for the last item
+     */
+    lastItemLabel?: string | number;
+    /**
+     * color of overlay label for the last item
+     */
+    lastItemOverlayColor?: string;
+    /**
+     * whether to keep the items initial size when orientation changes,
+     * in which case the apt number of columns will be calculated automatically.
+     * Ignored when passing 'maxItemWidth'
+     */
+    keepItemSize?: boolean;
+    /**
+     * Pass to render a custom item
+     */
+    renderCustomItem?: (item: GridListItemProps) => React.ReactElement;
+}
+interface GridViewState {
+    viewWidth: number;
+    numColumns: number;
+    itemSize: number;
+}
+/**
+ * @description: A auto-generated grid view that calculate item size according to given props
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/GridViewScreen.tsx
+ */
+declare class GridView extends UIComponent<GridViewProps, GridViewState> {
+    static displayName: string;
+    static defaultProps: {
+        numColumns: number;
+        itemSpacing: number;
+    };
+    private dimensionsChangeListener;
+    state: {
+        viewWidth: number;
+        numColumns: number;
+        itemSize: number;
+    };
+    static getDerivedStateFromProps(nextProps: GridViewProps, prevState: GridViewState): {
+        viewWidth: number;
+        numColumns: number | undefined;
+    } | null;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    onOrientationChanged: () => void;
+    getDefaultViewWidth(): number;
+    getGridContainerWidth(): number;
+    calcNumberOfColumns(): number;
+    calcItemSize(): number;
+    renderLastItemOverlay(): React.JSX.Element | undefined;
+    renderItem: (item: GridListItemProps, index: number) => React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default GridView;

package/src/components/hint/Hint.driver.d.ts

@@ -0,0 +1,6 @@
+import { HintProps } from './index';
+import { ComponentDriver } from '../../testkit/Component.driver';
+export declare class HintDriver extends ComponentDriver<HintProps> {
+    getHintContent: () => Promise<any>;
+    getHintModal: () => Promise<any>;
+}

package/src/components/hint/Hint.driver.new.d.ts

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

package/src/components/hint/HintAnchor.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type LayoutRectangle } from 'react-native';
+import { LayoutStyle, HintProps, PaddingsStyle } from './types';
+interface HintAnchorProps extends HintProps {
+    showHint: boolean;
+    isUsingModal: boolean;
+    targetLayout?: LayoutRectangle;
+    hintContainerLayout: LayoutStyle;
+    hintPadding: PaddingsStyle;
+    hintAnimatedStyle: any;
+}
+export default function HintAnchor({ children, showHint, isUsingModal, targetLayout, containerWidth, testID, hintContainerLayout, hintPadding, hintAnimatedStyle, style, ...others }: HintAnchorProps): React.JSX.Element;
+export {};

package/src/components/hint/HintBubble.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { View as RNView, LayoutChangeEvent } from 'react-native';
+import { HintProps } from './types';
+interface HintBubbleProps extends Pick<HintProps, 'testID' | 'visible' | 'message' | 'messageStyle' | 'color' | 'removePaddings' | 'enableShadow' | 'borderRadius' | 'iconStyle' | 'icon' | 'customContent'> {
+    hintRef: React.RefObject<RNView>;
+    setHintLayout: (layoutChangeEvent: LayoutChangeEvent) => void;
+    hintPositionStyle: {
+        left: number;
+    };
+}
+export default function HintBubble({ visible, message, messageStyle, icon, iconStyle, borderRadius, removePaddings, enableShadow, color, customContent, testID, hintRef, hintPositionStyle, setHintLayout }: HintBubbleProps): React.JSX.Element;
+export {};

package/src/components/hint/HintMockChildren.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { LayoutRectangle } from 'react-native';
+import { HintProps } from './types';
+interface HintMockChildrenProps extends Pick<HintProps, 'children' | 'backdropColor'> {
+    targetLayout?: LayoutRectangle;
+}
+export default function HintMockChildren({ children, backdropColor, targetLayout }: HintMockChildrenProps): React.JSX.Element | null;
+export {};

package/src/components/hint/HintOld.d.ts

@@ -0,0 +1,196 @@
+import React, { Component, ReactElement, ElementRef } from 'react';
+import { Animated, GestureResponderEvent, ImageSourcePropType, ImageStyle, StyleProp, TextStyle, ViewStyle, LayoutChangeEvent, View as RNView } from 'react-native';
+declare enum TARGET_POSITIONS {
+    LEFT = "left",
+    RIGHT = "right",
+    CENTER = "center"
+}
+declare enum HintPositions {
+    TOP = "top",
+    BOTTOM = "bottom"
+}
+interface HintTargetFrame {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+}
+type Position = Pick<ViewStyle, 'top' | 'bottom' | 'left' | 'right'>;
+type HintPositionStyle = Position & Pick<ViewStyle, 'alignItems'>;
+type Paddings = Pick<ViewStyle, 'paddingLeft' | 'paddingRight' | 'paddingVertical' | 'paddingHorizontal'>;
+type ContentType = string | ReactElement;
+export interface HintProps {
+    /**
+     * Control the visibility of the hint
+     */
+    visible?: boolean;
+    /**
+     * The hint background color
+     */
+    color?: string;
+    /**
+     * The hint message
+     */
+    message?: ContentType | ContentType[];
+    /**
+     * The hint message custom style
+     */
+    messageStyle?: StyleProp<TextStyle>;
+    /**
+     * Icon to show next to the hint's message
+     */
+    icon?: ImageSourcePropType;
+    /**
+     * The icon's style
+     */
+    iconStyle?: StyleProp<ImageStyle>;
+    /**
+     * The hint's position
+     */
+    position?: HintPositions;
+    /**
+     * Provide custom target position instead of wrapping a child
+     */
+    targetFrame?: HintTargetFrame;
+    /**
+     * Open the hint using a Modal component
+     */
+    useModal?: boolean;
+    /**
+     * Show side tips instead of the middle tip
+     */
+    useSideTip?: boolean;
+    /**
+     * The hint's border radius
+     */
+    borderRadius?: number;
+    /**
+     * Hint margins from screen edges
+     */
+    edgeMargins?: number;
+    /**
+     * Hint offset from target
+     */
+    offset?: number;
+    /**
+     * Callback for Hint press
+     */
+    onPress?: () => void;
+    /**
+     * Callback for the background press
+     */
+    onBackgroundPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Color for background overlay (require onBackgroundPress)
+     */
+    backdropColor?: string;
+    /**
+     * The hint container width
+     */
+    containerWidth?: number;
+    /**
+     * Custom content element to render inside the hint container
+     */
+    customContent?: JSX.Element;
+    /**
+     * Remove all hint's paddings
+     */
+    removePaddings?: boolean;
+    /**
+     * Enable shadow (for hint with white background only)
+     */
+    enableShadow?: boolean;
+    /**
+     * The hint's test identifier
+     */
+    testID?: string;
+    /**
+     * Additional styling
+     */
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+}
+interface HintState {
+    targetLayout?: HintTargetFrame;
+    targetLayoutInWindow?: HintTargetFrame;
+    hintUnmounted: boolean;
+    hintMessageWidth?: number;
+}
+/**
+ * @description: Hint component for displaying a tooltip over wrapped component
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/HintsScreen.tsx
+ * @notes: You can either wrap a component or pass a specific targetFrame
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/Hint/Hint.gif?raw=true
+ */
+declare class Hint extends Component<HintProps, HintState> {
+    static displayName: string;
+    static defaultProps: {
+        position: HintPositions;
+        useModal: boolean;
+    };
+    static positions: typeof HintPositions;
+    targetRef: ElementRef<typeof RNView> | null;
+    hintRef: React.RefObject<RNView>;
+    animationDuration: number;
+    state: {
+        targetLayoutInWindow: {
+            x: number;
+            y: number;
+            width: number;
+            height: number;
+        } | undefined;
+        targetLayout: HintTargetFrame | undefined;
+        hintUnmounted: boolean;
+        hintMessageWidth: undefined;
+    };
+    visibleAnimated: Animated.Value;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: HintProps): void;
+    animateHint: () => void;
+    toggleAnimationEndedToRemoveHint: () => void;
+    focusAccessibilityOnHint: () => void;
+    setTargetRef: (ref: ElementRef<typeof RNView>) => void;
+    setHintLayout: ({ nativeEvent: { layout } }: LayoutChangeEvent) => void;
+    onTargetLayout: ({ nativeEvent: { layout } }: LayoutChangeEvent) => void;
+    getAccessibilityInfo(): {
+        accessible: boolean;
+        accessibilityLabel: string;
+    } | undefined;
+    get containerWidth(): number;
+    get targetLayout(): HintTargetFrame | undefined;
+    get showHint(): boolean;
+    get tipSize(): {
+        width: number;
+        height: number;
+    };
+    get hintOffset(): number;
+    get edgeMargins(): number;
+    get shouldUseSideTip(): boolean;
+    get isShortMessage(): undefined;
+    getTargetPositionOnScreen(): TARGET_POSITIONS;
+    getContainerPosition(): {
+        top: number | undefined;
+        left: number | undefined;
+    } | undefined;
+    getHintPosition(): HintPositionStyle;
+    getHintPadding(): Paddings;
+    getHintAnimatedStyle: () => {
+        opacity: Animated.Value;
+        transform: {
+            translateY: Animated.AnimatedInterpolation<string | number>;
+        }[];
+    };
+    getTipPosition(): Position;
+    getHintOffsetForShortMessage: () => number;
+    isUsingModal: () => boolean | undefined;
+    renderOverlay(): React.JSX.Element | undefined;
+    renderHintTip(): React.JSX.Element;
+    renderHint(): React.JSX.Element;
+    renderHintContainer(): React.JSX.Element | undefined;
+    renderHintAnchor(): React.JSX.Element;
+    renderMockChildren(): React.JSX.Element | undefined;
+    renderChildren(): React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    render(): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
+}
+declare const _default: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<any>> & typeof Hint;
+export default _default;

package/src/components/hint/hooks/useHintAccessibility.d.ts

@@ -0,0 +1,10 @@
+import { ElementRef } from 'react';
+import { View as RNView } from 'react-native';
+import { HintProps } from '../types';
+export default function useHintAccessibility(message?: HintProps['message']): {
+    focusAccessibilityOnHint: (targetRef: ElementRef<typeof RNView>, hintRef: ElementRef<typeof RNView>) => void;
+    accessibilityInfo: {
+        accessible: boolean;
+        accessibilityLabel: string;
+    } | undefined;
+};

package/src/components/hint/hooks/useHintLayout.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { LayoutChangeEvent, LayoutRectangle, View as RNView } from 'react-native';
+import { HintProps } from '../types';
+type UseHintLayoutProps = Pick<HintProps, 'onBackgroundPress' | 'targetFrame'>;
+export default function useHintLayout({ onBackgroundPress, targetFrame }: UseHintLayoutProps): {
+    targetLayoutState: LayoutRectangle | undefined;
+    targetLayoutInWindowState: LayoutRectangle | undefined;
+    hintMessageWidth: number | undefined;
+    targetRef: import("react").MutableRefObject<RNView | null>;
+    onTargetLayout: ({ nativeEvent: { layout } }: LayoutChangeEvent) => void;
+    setHintLayout: ({ nativeEvent: { layout } }: LayoutChangeEvent) => void;
+};
+export {};

package/src/components/hint/hooks/useHintPosition.d.ts

@@ -0,0 +1,29 @@
+import { LayoutRectangle } from 'react-native';
+import { LayoutStyle, PositionStyle, PaddingsStyle, TargetAlignments, HintProps } from '../types';
+interface UseHintPositionProps extends Pick<HintProps, 'position' | 'useSideTip'> {
+    isUsingModal: boolean;
+    targetLayoutState?: LayoutRectangle;
+    targetLayoutInWindowState?: LayoutRectangle;
+    containerWidth: number;
+    edgeMargins: number;
+    offset: number;
+    hintMessageWidth?: number;
+}
+export default function useHintPosition({ isUsingModal, targetLayoutState, targetLayoutInWindowState, position, containerWidth, useSideTip, offset, edgeMargins, hintMessageWidth }: UseHintPositionProps): {
+    tipSize: {
+        width: number;
+        height: number;
+    };
+    targetAlignmentOnScreen: TargetAlignments;
+    hintContainerLayout: LayoutStyle;
+    tipPositionStyle: PositionStyle;
+    hintPadding: PaddingsStyle;
+    hintPositionStyle: {
+        left: number;
+    };
+    targetScreenToRelativeOffset: {
+        left: number;
+        top: number;
+    };
+};
+export {};

package/src/components/hint/hooks/useHintVisibility.d.ts

@@ -0,0 +1,6 @@
+import { Animated } from 'react-native';
+export default function useHintVisibility(visible?: boolean): {
+    hintUnmounted: boolean;
+    visibilityProgress: Animated.Value;
+    animateHint: () => void;
+};

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

@@ -0,0 +1,14 @@
+import React from 'react';
+import { HintPositions, HintProps } from './types';
+declare const Hint: {
+    (props: HintProps): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
+    displayName: string;
+    positions: typeof HintPositions;
+};
+export { HintProps, Hint };
+declare const _default: React.ForwardRefExoticComponent<HintProps & React.RefAttributes<any>> & {
+    (props: HintProps): string | number | true | React.JSX.Element | Iterable<React.ReactNode> | null;
+    displayName: string;
+    positions: typeof HintPositions;
+};
+export default _default;

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

@@ -0,0 +1,106 @@
+import type { ReactElement } from 'react';
+import type { GestureResponderEvent, ImageSourcePropType, ImageStyle, LayoutRectangle, StyleProp, TextStyle, ViewStyle } from 'react-native';
+export type PositionStyle = Pick<ViewStyle, 'top' | 'bottom' | 'left' | 'right'>;
+export type LayoutStyle = PositionStyle & Pick<ViewStyle, 'alignItems'>;
+export type PaddingsStyle = Pick<ViewStyle, 'paddingLeft' | 'paddingRight' | 'paddingVertical' | 'paddingHorizontal'>;
+export type ContentType = string | ReactElement;
+export declare enum TargetAlignments {
+    LEFT = "left",
+    RIGHT = "right",
+    CENTER = "center"
+}
+export declare enum HintPositions {
+    TOP = "top",
+    BOTTOM = "bottom"
+}
+export interface HintProps {
+    /**
+     * Control the visibility of the hint
+     */
+    visible?: boolean;
+    /**
+     * The hint background color
+     */
+    color?: string;
+    /**
+     * The hint message
+     */
+    message?: ContentType | ContentType[];
+    /**
+     * The hint message custom style
+     */
+    messageStyle?: StyleProp<TextStyle>;
+    /**
+     * Icon to show next to the hint's message
+     */
+    icon?: ImageSourcePropType;
+    /**
+     * The icon's style
+     */
+    iconStyle?: StyleProp<ImageStyle>;
+    /**
+     * The hint's position
+     */
+    position?: HintPositions;
+    /**
+     * Provide custom target position instead of wrapping a child
+     */
+    targetFrame?: LayoutRectangle;
+    /**
+     * Open the hint using a Modal component
+     */
+    useModal?: boolean;
+    /**
+     * Show side tips instead of the middle tip
+     */
+    useSideTip?: boolean;
+    /**
+     * The hint's border radius
+     */
+    borderRadius?: number;
+    /**
+     * Hint margins from screen edges
+     */
+    edgeMargins?: number;
+    /**
+     * Hint offset from target
+     */
+    offset?: number;
+    /**
+     * Callback for Hint press
+     */
+    onPress?: () => void;
+    /**
+     * Callback for the background press
+     */
+    onBackgroundPress?: (event: GestureResponderEvent) => void;
+    /**
+     * Color for background overlay (require onBackgroundPress)
+     */
+    backdropColor?: string;
+    /**
+     * The hint container width
+     */
+    containerWidth?: number;
+    /**
+     * Custom content element to render inside the hint container
+     */
+    customContent?: JSX.Element;
+    /**
+     * Remove all hint's paddings
+     */
+    removePaddings?: boolean;
+    /**
+     * Enable shadow (for hint with white background only)
+     */
+    enableShadow?: boolean;
+    /**
+     * The hint's test identifier
+     */
+    testID?: string;
+    /**
+     * Additional styling
+     */
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+}