react-native-ui-lib 8.1.1 → 8.1.5

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

@@ -0,0 +1,157 @@
+/// <reference types="react" />
+import { ImageStyle, TextStyle, StyleProp } from 'react-native';
+import { BaseComponentInjectedProps, ForwardRefInjectedProps, TypographyModifiers, ColorsModifiers, BackgroundColorModifier, MarginModifiers } from '../../commons/new';
+import { TouchableOpacityProps } from '../touchableOpacity';
+import { TextProps } from '../text';
+import { ImageProps } from '../image';
+import type { IconProps } from '../icon';
+export declare enum ButtonSize {
+    xSmall = "xSmall",
+    small = "small",
+    medium = "medium",
+    large = "large"
+}
+export type ButtonSizeProp = ButtonSize | `${ButtonSize}`;
+export declare enum ButtonAnimationDirection {
+    center = "center",
+    left = "left",
+    right = "right"
+}
+export type ButtonAnimationDirectionProp = ButtonAnimationDirection | `${ButtonAnimationDirection}`;
+export type ButtonProps = TouchableOpacityProps & TypographyModifiers & ColorsModifiers & BackgroundColorModifier & MarginModifiers & {
+    /**
+     * Text to show inside the button
+     */
+    label?: string;
+    /**
+     * The Button text color (inherited from Text component)
+     */
+    color?: string;
+    /**
+     * Icon image source or a callback function that returns a source
+     * TODO: Deprecate icon source as function
+     */
+    iconSource?: ImageProps['source'] | null | ((iconStyle?: StyleProp<ImageStyle>[]) => JSX.Element);
+    /**
+     * Icon image style
+     */
+    iconStyle?: StyleProp<ImageStyle>;
+    /**
+     * Other image props that will be passed to the image
+     */
+    iconProps?: Partial<IconProps>;
+    /**
+     * Should the icon be right to the label
+     */
+    iconOnRight?: boolean;
+    /**
+     * whether the icon should flip horizontally on RTL locals
+     */
+    supportRTL?: boolean;
+    /**
+     * Color of the button background
+     */
+    backgroundColor?: string;
+    /**
+     * Color of the disabled button background
+     */
+    disabledBackgroundColor?: string;
+    /**
+     * Size of the button [large, medium, small, xSmall]
+     */
+    size?: ButtonSizeProp;
+    /**
+     * Custom border radius.
+     */
+    borderRadius?: number;
+    /**
+     * Actions handler
+     */
+    onPress?: (props: any) => void;
+    /**
+     * Disable interactions for the component
+     */
+    disabled?: boolean;
+    /**
+     * Button will have outline style
+     */
+    outline?: boolean;
+    /**
+     * The outline color
+     */
+    outlineColor?: string;
+    /**
+     * The outline width
+     */
+    outlineWidth?: number;
+    /**
+     * Button will look like a link
+     */
+    link?: boolean;
+    /**
+     * Button will look like a hyperlink
+     */
+    hyperlink?: boolean;
+    /**
+     * label color for when it's displayed as link or hyperlink
+     */
+    linkColor?: string;
+    /**
+     * Additional styles for label text
+     */
+    labelStyle?: StyleProp<TextStyle>;
+    /**
+     * Props that will be passed to the button's Text label.
+     */
+    labelProps?: TextProps;
+    /**
+     * should the button act as a coast to coast button (no border radius)
+     */
+    fullWidth?: boolean;
+    /**
+     * should the button be a round button
+     */
+    round?: boolean;
+    /**
+     * Control shadow visibility
+     */
+    enableShadow?: boolean;
+    /**
+     * avoid inner button padding
+     */
+    avoidInnerPadding?: boolean;
+    /**
+     * avoid minimum width constraints
+     */
+    avoidMinWidth?: boolean;
+    /**
+     * callback for getting activeBackgroundColor (e.g. (calculatedBackgroundColor, prop) => {...})
+     * better set using ThemeManager
+     */
+    getActiveBackgroundColor?: (backgroundColor: string, props: any) => string;
+    /**
+     * should animate layout change
+     */
+    animateLayout?: boolean;
+    /**
+     * the direction of the animation ('left' and 'right' will effect the button's own alignment)
+     */
+    animateTo?: ButtonAnimationDirectionProp;
+    /**
+     * Custom element to render as button background (takes precedence over backgroundColor)
+     */
+    customBackground?: React.ReactElement;
+};
+export type ButtonState = {
+    size?: number;
+    borderRadius?: number;
+    isLandscape?: boolean;
+    measuredSize?: {
+        width: number;
+        height: number;
+    };
+};
+export type Props = ButtonProps & BaseComponentInjectedProps & ForwardRefInjectedProps;
+export declare const DEFAULT_PROPS: {
+    iconOnRight: boolean;
+};

package/src/components/card/CardContext.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const CardContext: React.Context<{}>;
+export default CardContext;

package/src/components/card/CardImage.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { ImageProps } from '../image';
+export type CardImageProps = ImageProps & {
+    /**
+     * Image width
+     */
+    width?: number | string;
+    /**
+     * Image height
+     */
+    height?: number | string;
+    /**
+     * The Image position which determines the appropriate flex-ness of the image and border radius (for Android)
+     * this prop derived automatically from Card parent component if it rendered as a direct child of the
+     * Card component
+     */
+    position?: string[];
+};
+declare const _default: React.ComponentType<CardImageProps>;
+export default _default;

package/src/components/card/CardPresenter.d.ts

@@ -0,0 +1,12 @@
+export declare function extractPositionValues(position: string[] | undefined): {
+    top: boolean;
+    left: boolean;
+    right: boolean;
+    bottom: boolean;
+};
+export declare function generateBorderRadiusStyle({ position, borderRadius }: {
+    position: string[] | undefined;
+    borderRadius: number | undefined;
+}): {
+    [key: string]: number | undefined;
+};

package/src/components/card/CardSection.d.ts

@@ -0,0 +1,79 @@
+import React from 'react';
+import { ViewStyle, ImageStyle, ImageSourcePropType, StyleProp } from 'react-native';
+import { ViewProps } from '../view';
+import { TextProps } from '../text';
+import { ImageProps } from '../image';
+type ContentType = TextProps & {
+    text?: string;
+};
+export type CardSectionProps = ViewProps & {
+    /**
+     * Text content for the CardSection.
+     * Example: content={[{text: 'You’re Invited!', text70: true, grey10: true}]}
+     */
+    content?: ContentType[];
+    /**
+     * Style for the content
+     */
+    contentStyle?: StyleProp<ViewStyle>;
+    /**
+     * Give the section a background color
+     */
+    backgroundColor?: string;
+    /**
+     * Image props for a leading icon to render before the text
+     */
+    leadingIcon?: ImageProps;
+    /**
+     * Image props for a trailing icon to render after the text
+     */
+    trailingIcon?: ImageProps;
+    /**
+     * Will be used for the background when provided
+     */
+    imageSource?: ImageSourcePropType;
+    /**
+     * The style for the background image
+     */
+    imageStyle?: StyleProp<ImageStyle>;
+    /**
+     * Other image props that will be passed to the image
+     */
+    imageProps?: Partial<ImageProps>;
+};
+declare const _default: React.ForwardRefExoticComponent<ViewProps & {
+    /**
+     * Text content for the CardSection.
+     * Example: content={[{text: 'You’re Invited!', text70: true, grey10: true}]}
+     */
+    content?: ContentType[] | undefined;
+    /**
+     * Style for the content
+     */
+    contentStyle?: StyleProp<ViewStyle>;
+    /**
+     * Give the section a background color
+     */
+    backgroundColor?: string | undefined;
+    /**
+     * Image props for a leading icon to render before the text
+     */
+    leadingIcon?: ImageProps | undefined;
+    /**
+     * Image props for a trailing icon to render after the text
+     */
+    trailingIcon?: ImageProps | undefined;
+    /**
+     * Will be used for the background when provided
+     */
+    imageSource?: ImageSourcePropType | undefined;
+    /**
+     * The style for the background image
+     */
+    imageStyle?: StyleProp<ImageStyle>;
+    /**
+     * Other image props that will be passed to the image
+     */
+    imageProps?: Partial<ImageProps> | undefined;
+} & React.RefAttributes<any>>;
+export default _default;

package/src/components/card/asCardChild.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare function asCardChild<T>(WrappedComponent: React.ComponentType<any>): React.ComponentType<T>;
+export default asCardChild;
+export type asCardChildProps = {
+    context?: any;
+};

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

@@ -0,0 +1,120 @@
+import React from 'react';
+import { StyleProp, ViewStyle, type DimensionValue } from 'react-native';
+import { MarginModifiers } from '../../commons/new';
+import { ViewProps } from '../view';
+import { TouchableOpacityProps } from '../touchableOpacity';
+import CardImage from './CardImage';
+import CardSection, { CardSectionProps } from './CardSection';
+export interface CardSelectionOptions {
+    icon?: number;
+    iconColor?: string;
+    color?: string;
+    borderWidth?: number;
+    indicatorSize?: number;
+    hideIndicator?: boolean;
+}
+export { CardSectionProps };
+export type CardProps = ViewProps & TouchableOpacityProps & MarginModifiers & {
+    /**
+     * card custom width
+     */
+    width?: DimensionValue;
+    /**
+     * card custom height
+     */
+    height?: DimensionValue;
+    /**
+     * should inner card flow direction be horizontal
+     */
+    row?: boolean;
+    /**
+     * card border radius (will be passed to inner Card.Image component)
+     */
+    borderRadius?: number;
+    /**
+     * action for when pressing the card
+     */
+    onPress?: TouchableOpacityProps['onPress'];
+    /**
+     * whether the card should have shadow or not
+     */
+    enableShadow?: boolean;
+    /**
+     * elevation value (Android only)
+     */
+    elevation?: number;
+    /**
+     * enable blur effect (iOS only)
+     */
+    enableBlur?: boolean;
+    /**
+     * blur option for blur effect according to @react-native-community/blur lib (make sure enableBlur is on)
+     */
+    blurOptions?: object;
+    /**
+     * Additional styles for the top container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Adds visual indication that the card is selected
+     */
+    selected?: boolean;
+    /**
+     * Custom options for styling the selection indication
+     */
+    selectionOptions?: CardSelectionOptions;
+};
+declare const _default: React.ForwardRefExoticComponent<ViewProps & TouchableOpacityProps & Partial<Record<"margin" | "marginL" | "marginT" | "marginR" | "marginB" | "marginH" | "marginV", boolean>> & {
+    /**
+     * card custom width
+     */
+    width?: DimensionValue | undefined;
+    /**
+     * card custom height
+     */
+    height?: DimensionValue | undefined;
+    /**
+     * should inner card flow direction be horizontal
+     */
+    row?: boolean | undefined;
+    /**
+     * card border radius (will be passed to inner Card.Image component)
+     */
+    borderRadius?: number | undefined;
+    /**
+     * action for when pressing the card
+     */
+    onPress?: ((props?: any) => void) | undefined;
+    /**
+     * whether the card should have shadow or not
+     */
+    enableShadow?: boolean | undefined;
+    /**
+     * elevation value (Android only)
+     */
+    elevation?: number | undefined;
+    /**
+     * enable blur effect (iOS only)
+     */
+    enableBlur?: boolean | undefined;
+    /**
+     * blur option for blur effect according to @react-native-community/blur lib (make sure enableBlur is on)
+     */
+    blurOptions?: object | undefined;
+    /**
+     * Additional styles for the top container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Adds visual indication that the card is selected
+     */
+    selected?: boolean | undefined;
+    /**
+     * Custom options for styling the selection indication
+     */
+    selectionOptions?: CardSelectionOptions | undefined;
+} & React.RefAttributes<any>> & {
+    Image: typeof CardImage;
+    Section: typeof CardSection;
+};
+export default _default;

package/src/components/carousel/Carousel.driver.new.d.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from '../../testkit/new/Component.driver';
+import { ScrollProps } from '../../testkit/new/useScrollable.driver';
+export declare const CarouselDriver: (props: ComponentProps) => {
+    scroll: (props: ScrollProps) => void;
+    triggerEvent: (eventName?: string | undefined, event?: Partial<import("react-native/types").NativeScrollEvent> | undefined) => void;
+    getElement: () => import("react-test-renderer").ReactTestInstance;
+    queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+    exists: () => boolean;
+};

package/src/components/carousel/CarouselPresenter.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from 'react';
+import { CarouselProps, CarouselState } from './types';
+export declare function getChildrenLength(props: PropsWithChildren<CarouselProps>): number;
+export declare function calcOffset(props: CarouselProps, state: Omit<CarouselState, 'initialOffset' | 'prevProps' | 'currentStandingPage'>): {
+    x: number;
+    y: number;
+};
+export declare function calcPageIndex(offset: number, props: CarouselProps, pageSize: number): number;
+export declare function isOutOfBounds(offset: number, props: CarouselProps, pageWidth: number): boolean;

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

@@ -0,0 +1,73 @@
+import React, { Component, RefObject, ReactNode, Key } from 'react';
+import { ScrollView, LayoutChangeEvent, NativeSyntheticEvent, NativeScrollEvent } from 'react-native';
+import { CarouselProps, CarouselState, PageControlPosition } from './types';
+export { CarouselProps, PageControlPosition };
+type DefaultProps = Partial<CarouselProps>;
+/**
+ * @description: Carousel for scrolling pages horizontally
+ * @gif: https://user-images.githubusercontent.com/1780255/107120258-40b5bc80-6895-11eb-9596-8065d3a940ff.gif, https://user-images.githubusercontent.com/1780255/107120257-3eebf900-6895-11eb-9800-402e9e0dc692.gif
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/CarouselScreen.tsx
+ * @extends: ScrollView
+ * @extendsLink: https://reactnative.dev/docs/scrollview
+ * @notes: This is a screen width Component
+ */
+declare class Carousel extends Component<CarouselProps, CarouselState> {
+    static displayName: string;
+    static defaultProps: DefaultProps;
+    static pageControlPositions: typeof PageControlPosition;
+    carousel: RefObject<ScrollView>;
+    autoplayTimer?: ReturnType<typeof setTimeout>;
+    orientationChange?: boolean;
+    skippedInitialScroll?: boolean;
+    isAutoScrolled: boolean;
+    private dimensionsChangeListener;
+    constructor(props: CarouselProps);
+    static getDerivedStateFromProps(nextProps: CarouselProps, prevState: CarouselState): {
+        pageWidth: number;
+        initialOffset: {
+            x: number;
+            y: number;
+        };
+        prevProps: CarouselProps;
+    } | {
+        prevProps: CarouselProps;
+        pageWidth?: undefined;
+        initialOffset?: undefined;
+    } | null;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: CarouselProps): void;
+    onOrientationChanged: () => void;
+    getItemSpacings(props: CarouselProps): number;
+    getContainerMarginHorizontal: () => number;
+    getContainerPaddingVertical: () => number;
+    updateOffset: (animated?: boolean) => void;
+    startAutoPlay(): void;
+    stopAutoPlay(): void;
+    resetAutoPlay(): void;
+    goToPage(pageIndex: number, animated?: boolean): void;
+    goToNextPage(): void;
+    getCalcIndex(index: number): number;
+    getSnapToOffsets: () => number[] | undefined;
+    getInitialContentOffset: (snapToOffsets: number[] | undefined) => PointPropType;
+    shouldUsePageWidth(): number | false | undefined;
+    shouldEnablePagination(): boolean | undefined;
+    shouldAllowAccessibilityLayout(): boolean | undefined;
+    onContentSizeChange: () => void;
+    onContainerLayout: ({ nativeEvent: { layout: { width: containerWidth, height: containerHeight } } }: LayoutChangeEvent) => void;
+    onMomentumScrollEnd: () => void;
+    onScroll: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    onScrollEvent: (...args: any[]) => void;
+    renderChild: (child: ReactNode, key: Key) => JSX.Element | undefined;
+    renderChildren(): JSX.Element[] | null | undefined;
+    renderPageControl(): React.JSX.Element | undefined;
+    renderCounter(): React.JSX.Element | undefined;
+    renderAccessibleLayout(): React.JSX.Element;
+    renderCarousel(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export { Carousel };
+declare const _default: React.ForwardRefExoticComponent<CarouselProps & React.RefAttributes<any>> & Carousel & {
+    pageControlPositions: typeof PageControlPosition;
+};
+export default _default;

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

@@ -0,0 +1,107 @@
+import { ScrollViewProps, StyleProp, ViewStyle, NativeSyntheticEvent, NativeScrollEvent, Animated } from 'react-native';
+import { PointPropType } from 'deprecated-react-native-prop-types';
+import { PageControlProps } from '../pageControl';
+export declare enum PageControlPosition {
+    OVER = "over",
+    UNDER = "under"
+}
+export interface CarouselProps extends ScrollViewProps {
+    /**
+     * the first page to start with
+     */
+    initialPage?: number;
+    /**
+     * the page width (all pages should have the same width). Does not work if passing 'loop' prop
+     */
+    pageWidth?: number;
+    /**
+     * the page height (all pages should have the same height).
+     */
+    pageHeight?: number;
+    /**
+     * the spacing between the items
+     */
+    itemSpacings?: number;
+    /**
+     * Horizontal margin for the container
+     */
+    containerMarginHorizontal?: number;
+    /**
+     * Vertical padding for the container.
+     * Sometimes needed when there are overflows that are cut in Android.
+     */
+    containerPaddingVertical?: number;
+    /**
+     * if true, will have infinite scroll (do not turn on for vertical scrolling)
+     */
+    loop?: boolean;
+    /**
+     * callback for when page has changed
+     */
+    onChangePage?: (newPageIndex: number, oldPageIndex: number, info: {
+        isAutoScrolled: boolean;
+    }) => void;
+    /**
+     * callback for onScroll event of the internal ScrollView
+     */
+    onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+    /**
+     * Should the container be animated (send the animation style via containerStyle)
+     */
+    animated?: boolean;
+    /**
+     * the carousel style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * PageControl component props
+     */
+    pageControlProps?: Partial<PageControlProps>;
+    /**
+     * The position of the PageControl component ['over', 'under'], otherwise it won't display
+     */
+    pageControlPosition?: PageControlPosition | `${PageControlPosition}`;
+    /**
+     * whether to show a page counter (will not work with 'pageWidth' prop)
+     */
+    showCounter?: boolean;
+    /**
+     * the counter's text style
+     */
+    counterTextStyle?: StyleProp<ViewStyle>;
+    /**
+     * will block multiple pages scroll (will not work with 'pageWidth' prop)
+     */
+    pagingEnabled?: boolean;
+    /**
+     * Whether to layout Carousel for accessibility
+     */
+    allowAccessibleLayout?: boolean;
+    /**
+     * Whether to switch automatically between the pages
+     */
+    autoplay?: boolean;
+    /**
+     * the amount of ms to wait before switching to the next page, in case autoplay is on
+     */
+    autoplayInterval?: number;
+    /**
+     * When true the scroll view's children are arranged horizontally in a row
+     * instead of vertically in a column. The default value is true.
+     */
+    horizontal?: boolean | null;
+    /**
+     * Pass to attach to ScrollView's Animated.event in order to animated elements base on
+     * Carousel scroll offset (pass new Animated.ValueXY())
+     */
+    animatedScrollOffset?: Animated.ValueXY;
+}
+export interface CarouselState {
+    containerWidth?: number;
+    currentPage: number;
+    currentStandingPage: number;
+    pageWidth: number;
+    pageHeight: number;
+    initialOffset: PointPropType;
+    prevProps: CarouselProps;
+}

package/src/components/checkbox/Checkbox.driver.d.ts

@@ -0,0 +1,15 @@
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const CheckboxDriver: (props: ComponentProps) => {
+    getLabel: () => string | (string | import("react-test-renderer").ReactTestInstance)[];
+    press: () => void;
+    hasOnPress: () => boolean;
+    onPressIn: () => void;
+    hasOnPressIn: () => boolean;
+    onPressOut: () => void;
+    hasOnPressOut: () => boolean;
+    onLongPress: () => void;
+    hasOnLongPress: () => boolean;
+    getElement: () => import("react-test-renderer").ReactTestInstance;
+    queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+    exists: () => boolean;
+};