react-native-ui-lib 8.0.1 → 8.1.0

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

@@ -1,15 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,196 +0,0 @@
-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

@@ -1,10 +0,0 @@
-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

@@ -1,13 +0,0 @@
-/// <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

@@ -1,29 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,106 +0,0 @@
-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;
-}