react-native-ui-lib 8.1.1 → 8.1.5

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

@@ -0,0 +1,102 @@
+import React from 'react';
+import { StyleProp, ViewStyle, ColorValue } from 'react-native';
+import { TouchableOpacityProps } from '../touchableOpacity';
+export type SwitchProps = TouchableOpacityProps & {
+    /**
+     * The value of the switch. If true the switch will be turned on. Default value is false
+     */
+    value?: boolean;
+    /**
+     * Invoked with the new value when the value changes
+     */
+    onValueChange?: (value: boolean) => void;
+    /**
+     * Whether the switch should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * The Switch width
+     */
+    width?: number;
+    /**
+     * The Switch height
+     */
+    height?: number;
+    /**
+     * The Switch background color when it's turned on
+     */
+    onColor?: ColorValue;
+    /**
+     * The Switch background color when it's turned off
+     */
+    offColor?: ColorValue;
+    /**
+     * The Switch background color when it's disabled
+     */
+    disabledColor?: ColorValue;
+    /**
+     * The Switch's thumb color
+     */
+    thumbColor?: ColorValue;
+    /**
+     * The Switch's thumb size (width & height)
+     */
+    thumbSize?: number;
+    /**
+     * The Switch's thumb style
+     */
+    thumbStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+    id?: string;
+};
+declare const _default: React.ForwardRefExoticComponent<TouchableOpacityProps & {
+    /**
+     * The value of the switch. If true the switch will be turned on. Default value is false
+     */
+    value?: boolean | undefined;
+    /**
+     * Invoked with the new value when the value changes
+     */
+    onValueChange?: ((value: boolean) => void) | undefined;
+    /**
+     * Whether the switch should be disabled
+     */
+    disabled?: boolean | undefined;
+    /**
+     * The Switch width
+     */
+    width?: number | undefined;
+    /**
+     * The Switch height
+     */
+    height?: number | undefined;
+    /**
+     * The Switch background color when it's turned on
+     */
+    onColor?: ColorValue | undefined;
+    /**
+     * The Switch background color when it's turned off
+     */
+    offColor?: ColorValue | undefined;
+    /**
+     * The Switch background color when it's disabled
+     */
+    disabledColor?: ColorValue | undefined;
+    /**
+     * The Switch's thumb color
+     */
+    thumbColor?: ColorValue | undefined;
+    /**
+     * The Switch's thumb size (width & height)
+     */
+    thumbSize?: number | undefined;
+    /**
+     * The Switch's thumb style
+     */
+    thumbStyle?: StyleProp<ViewStyle>;
+    style?: StyleProp<ViewStyle>;
+    testID?: string | undefined;
+    id?: string | undefined;
+} & React.RefAttributes<any>>;
+export default _default;

package/src/components/switch/switch.driver.d.ts

@@ -0,0 +1,18 @@
+import { ViewStyle } from 'react-native';
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const SwitchDriver: (props: ComponentProps) => {
+    getStyle: () => ViewStyle;
+    isDisabled: () => boolean;
+    isChecked: () => any;
+    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;
+};

package/src/components/tabController/PageCarousel.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ScrollViewProps } from 'react-native';
+/**
+ * @description: TabController's Page Carousel
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
+ * @notes: You must pass `asCarousel` flag to TabController and render your TabPages inside a PageCarousel
+ */
+declare function PageCarousel(props: ScrollViewProps): React.JSX.Element;
+export default PageCarousel;

package/src/components/tabController/TabBar.d.ts

@@ -0,0 +1,97 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { TabControllerItemProps } from './TabBarItem';
+import { FaderProps } from '../fader';
+export interface TabControllerBarProps {
+    /**
+     * The list of tab bar items
+     */
+    items?: TabControllerItemProps[];
+    /**
+     * Tab Bar height
+     */
+    height?: number;
+    /**
+     * Show Tab Bar bottom shadow
+     */
+    enableShadow?: boolean;
+    /**
+     * custom shadow style
+     */
+    shadowStyle?: StyleProp<ViewStyle>;
+    /**
+     * custom style for the selected indicator
+     */
+    indicatorStyle?: StyleProp<ViewStyle>;
+    /**
+     * custom label style
+     */
+    labelStyle?: TabControllerItemProps['labelStyle'];
+    /**
+     * custom selected label style
+     */
+    selectedLabelStyle?: TabControllerItemProps['selectedLabelStyle'];
+    /**
+     * the default label color
+     */
+    labelColor?: string;
+    /**
+     * the selected label color
+     */
+    selectedLabelColor?: string;
+    /**
+     * whether to change the text to uppercase
+     */
+    uppercase?: boolean;
+    /**
+     * icon tint color
+     */
+    iconColor?: string;
+    /**
+     * icon selected tint color
+     */
+    selectedIconColor?: string;
+    /**
+     * TODO: rename to feedbackColor
+     * Apply background color on press for TouchableOpacity
+     */
+    activeBackgroundColor?: string;
+    /**
+     * The TabBar background Color
+     */
+    backgroundColor?: string;
+    /**
+     * Props for the start \ end faders
+     */
+    faderProps?: Pick<FaderProps, 'size' | 'tintColor'>;
+    /**
+     * The TabBar container width
+     */
+    containerWidth?: number;
+    /**
+     * Pass to center selected item
+     */
+    centerSelected?: boolean;
+    /**
+     * Whether the tabBar should be spread (default: true)
+     */
+    spreadItems?: boolean;
+    /**
+     * The indicator insets (default: Spacings.s4, set to 0 to make it wide as the item)
+     */
+    indicatorInsets?: number;
+    /**
+     * Send to get a constant width of the indicator (overrides indicatorInsets)
+     */
+    indicatorWidth?: number;
+    /**
+     * Additional styles for the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Used as a testing identifier
+     */
+    testID?: string;
+}
+declare const _default: React.ForwardRefExoticComponent<TabControllerBarProps & React.RefAttributes<any>>;
+export default _default;

package/src/components/tabController/TabBarContext.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import Reanimated from 'react-native-reanimated';
+interface TabControllerContext {
+    initialIndex?: number;
+    items?: any[];
+    itemsCount: number;
+    asCarousel?: boolean;
+    nestedInScrollView?: boolean;
+    containerWidth: number;
+    pageWidth: number;
+    /** static page index */
+    currentPage: Reanimated.SharedValue<number>;
+    /** transition page index (can be a fraction when transitioning between pages) */
+    targetPage: Reanimated.SharedValue<number>;
+    setCurrentIndex: (index: number) => void;
+}
+declare const TabBarContext: React.Context<TabControllerContext>;
+export default TabBarContext;

package/src/components/tabController/TabBarItem.d.ts

@@ -0,0 +1,105 @@
+import React, { ReactElement } from 'react';
+import { TextStyle, LayoutChangeEvent, StyleProp, ViewStyle, TextProps } from 'react-native';
+import Reanimated from 'react-native-reanimated';
+import { BadgeProps } from '../badge';
+import type { TabControllerBarProps } from './TabBar';
+export interface TabControllerItemProps extends Pick<TabControllerBarProps, 'spreadItems'> {
+    /**
+     * label of the tab
+     */
+    label?: string;
+    /**
+     * custom label style
+     */
+    labelStyle?: StyleProp<TextStyle>;
+    /**
+     * Extra label props to pass to label Text element
+     */
+    labelProps?: Omit<TextProps, 'style'>;
+    /**
+     * custom selected label style
+     */
+    selectedLabelStyle?: StyleProp<TextStyle>;
+    /**
+     * the default label color
+     */
+    labelColor?: string;
+    /**
+     * the selected label color
+     */
+    selectedLabelColor?: string;
+    /**
+     * icon of the tab
+     */
+    icon?: number;
+    /**
+     * icon tint color
+     */
+    iconColor?: string;
+    /**
+     * icon selected tint color
+     */
+    selectedIconColor?: string;
+    /**
+     * Badge component props to display next the item label
+     */
+    badge?: BadgeProps;
+    /**
+     * Pass to render a leading element
+     */
+    leadingAccessory?: ReactElement;
+    /**
+     * Pass to render a trailing element
+     */
+    trailingAccessory?: ReactElement;
+    /**
+     * A fixed width for the item
+     */
+    width?: number;
+    /**
+     * ignore of the tab
+     */
+    ignore?: boolean;
+    /**
+     * callback for when pressing a tab
+     */
+    onPress?: (index: number) => void;
+    /**
+     * whether to change the text to uppercase
+     */
+    uppercase?: boolean;
+    /**
+     * The active opacity when pressing a tab
+     */
+    activeOpacity?: number;
+    /**
+     * Apply background color for the tab bar item
+     */
+    backgroundColor?: string;
+    /**
+     * TODO: rename to feedbackColor
+     * Apply background color on press for TouchableOpacity
+     */
+    activeBackgroundColor?: string;
+    /**
+     * Pass custom style
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Used as a testing identifier
+     */
+    testID?: string;
+}
+interface Props extends TabControllerItemProps {
+    index: number;
+    targetPage: any;
+    currentPage: Reanimated.Adaptable<number>;
+    onLayout?: (event: LayoutChangeEvent, index: number) => void;
+}
+/**
+ * @description: TabController's TabBarItem
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
+ * @notes: Must be rendered as a direct child of TabController.TabBar.
+ */
+export default function TabBarItem({ index, label, labelColor, selectedLabelColor, labelStyle, labelProps, selectedLabelStyle, icon, badge, leadingAccessory, trailingAccessory, uppercase, activeOpacity, backgroundColor, activeBackgroundColor, testID, ignore, style, spreadItems, onPress, ...props }: Props): React.JSX.Element;
+export {};

package/src/components/tabController/TabPage.d.ts

@@ -0,0 +1,33 @@
+import React, { PropsWithChildren } from 'react';
+import { type StyleProp, type ViewStyle } from 'react-native';
+export interface TabControllerPageProps {
+    /**
+     * The index of the the TabPage
+     */
+    index: number;
+    /**
+     * Whether this page should be loaded lazily
+     */
+    lazy?: boolean;
+    /**
+     * How long to wait till lazy load complete (good for showing loader screens and when loading big pages)
+     */
+    lazyLoadTime?: number;
+    /**
+     * Render a custom loading page when lazy loading
+     */
+    renderLoading?: () => JSX.Element;
+    /**
+     * Used as a testing identifier
+     */
+    testID?: string;
+    /**
+     * add style properties to tab page
+     */
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * @description: TabController's TabPage
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/TabControllerScreen/index.tsx
+ */
+export default function TabPage({ testID, index, lazy, renderLoading, style, lazyLoadTime, ...props }: PropsWithChildren<TabControllerPageProps>): React.JSX.Element;

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

@@ -0,0 +1,48 @@
+import React from 'react';
+import TabBar, { TabControllerBarProps } from './TabBar';
+import TabBarItem, { TabControllerItemProps } from './TabBarItem';
+import TabPage from './TabPage';
+import PageCarousel from './PageCarousel';
+import { TabControllerImperativeMethods } from './useImperativeTabControllerHandle';
+export { TabControllerBarProps, TabControllerItemProps, TabControllerImperativeMethods };
+interface TabControllerStatics {
+    TabBar: typeof TabBar;
+    TabBarItem: typeof TabBarItem;
+    TabPage: typeof TabPage;
+    PageCarousel: typeof PageCarousel;
+}
+export interface TabControllerProps {
+    /**
+     * The list of tab bar items
+     */
+    items: TabControllerItemProps[];
+    /**
+     * Initial selected index
+     */
+    initialIndex?: number;
+    /**
+     * callback for when index has change (will not be called on ignored items)
+     */
+    onChangeIndex?: (index: number, prevIndex: number | null) => void;
+    /**
+     * When using TabController.PageCarousel this should be turned on
+     */
+    asCarousel?: boolean;
+    /**
+     * Pass when TabController is render inside a ScrollView (with a header)
+     */
+    nestedInScrollView?: boolean;
+    /**
+     * Pass for custom carousel page width
+     */
+    carouselPageWidth?: number;
+    /**
+     * Send if a SafeView is used in the context of the TabController.
+     */
+    useSafeArea?: boolean;
+    children?: React.ReactNode;
+}
+declare const _default: React.ForwardRefExoticComponent<TabControllerProps & {
+    children?: React.ReactNode;
+} & React.RefAttributes<any>> & TabControllerStatics;
+export default _default;

package/src/components/tabController/useImperativeTabControllerHandle.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface TabControllerImperativeMethods {
+    setTab: (index: number) => void;
+}
+declare const useImperativeTabControllerHandle: (ref: React.Ref<TabControllerImperativeMethods>, setCurrentIndex: (index: number) => void) => void;
+export default useImperativeTabControllerHandle;

package/src/components/tabController/useScrollToItem.d.ts

@@ -0,0 +1,79 @@
+import { RefObject } from 'react';
+import { LayoutChangeEvent } from 'react-native';
+import { ScrollToSupportedViews, ScrollToResultProps } from 'hooks';
+export declare enum OffsetType {
+    CENTER = "CENTER",
+    DYNAMIC = "DYNAMIC",
+    LEFT = "LEFT",
+    RIGHT = "RIGHT"
+}
+export type ScrollToItemProps<T extends ScrollToSupportedViews> = {
+    scrollViewRef?: RefObject<T>;
+    /**
+     * The number of items
+     */
+    itemsCount: number;
+    /**
+     * The selected item's index
+     */
+    selectedIndex?: number;
+    /**
+     * The container width, should update on orientation change
+     */
+    containerWidth: number;
+    /**
+     * Where would the item be located (default to CENTER)
+     */
+    offsetType?: OffsetType | `${OffsetType}`;
+    /**
+     * Add a margin to the offset (default to true)
+     * This gives a better UX
+     * Not relevant to OffsetType.CENTER
+     */
+    addOffsetMargin?: boolean;
+    /**
+     * How much space (padding \ margin) is there on the left\right of the items
+     */
+    outerSpacing?: number;
+    /**
+     * How much space (padding \ margin) is there between each item
+     */
+    innerSpacing?: number;
+};
+export type ScrollToItemResultProps<T extends ScrollToSupportedViews> = Pick<ScrollToResultProps<T>, 'scrollViewRef'> & {
+    /**
+     * This should be called by each ot the items' onLayout
+     */
+    onItemLayout: (event: LayoutChangeEvent, index: number) => void;
+    /**
+     * The items' width as share animated value
+     */
+    itemsWidthsAnimated: any;
+    /**
+     * The items' offsets as share animated value
+     */
+    itemsOffsetsAnimated: any;
+    /**
+     * Use in order to focus the item with the specified index (use when the selectedIndex is not changed)
+     */
+    focusIndex: (index: number, animated?: boolean) => void;
+    /**
+     * Use in order to reset the data.
+     */
+    reset: () => void;
+    /**
+     * onContentSizeChange callback (should be set to your onContentSizeChange).
+     * Needed for RTL support on Android.
+     */
+    onContentSizeChange: (contentWidth: number, contentHeight: number) => void;
+    /**
+     * onLayout callback (should be set to your onLayout).
+     * Needed for RTL support on Android.
+     */
+    onLayout: (event: LayoutChangeEvent) => void;
+};
+declare const useScrollToItem: {
+    <T extends ScrollToSupportedViews>(props: ScrollToItemProps<T>): ScrollToItemResultProps<T>;
+    offsetType: typeof OffsetType;
+};
+export default useScrollToItem;

package/src/components/text/Text.driver.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { TextProps } from './index';
+import { ComponentDriver } from '../../testkit/Component.driver';
+export declare class TextDriver extends ComponentDriver<TextProps> {
+    getTextContent: () => Promise<import("react").ReactNode>;
+    isPressable: () => Promise<boolean | null>;
+}

package/src/components/text/Text.driver.new.d.ts

@@ -0,0 +1,17 @@
+import { TextStyle } from 'react-native';
+import { ComponentProps, ComponentDriverOptions } from '../../testkit/new/Component.driver';
+export declare const TextDriver: (props: ComponentProps, options?: ComponentDriverOptions) => {
+    getText: () => string | (string | import("react-test-renderer").ReactTestInstance)[];
+    getStyle: () => TextStyle;
+    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;
+};