react-native-ui-lib 8.1.1 → 8.1.5

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

@@ -0,0 +1,321 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { FlatListProps, StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { ExpandableOverlayProps, ExpandableOverlayMethods } from '../../incubator/expandableOverlay';
+import { ModalTopBarProps } from '../modal/TopBar';
+import { TextFieldMethods, TextFieldProps } from '../textField';
+import { TouchableOpacityProps } from '../touchableOpacity';
+import { ButtonProps } from '../button';
+import { CheckboxProps } from '../checkbox';
+export declare enum PickerModes {
+    SINGLE = "SINGLE",
+    MULTI = "MULTI"
+}
+export declare enum PickerFieldTypes {
+    form = "form",
+    filter = "filter",
+    settings = "settings"
+}
+export type PickerSingleValue = string | number;
+export type PickerMultiValue = PickerSingleValue[];
+export type PickerValue = PickerSingleValue | PickerMultiValue | undefined;
+type PickerFilteredItems = ReactNode | Pick<PickerItemProps, 'label' | 'value' | 'disabled'>[] | undefined;
+type RenderPickerOverloads<ValueType> = ValueType extends PickerValue ? (value?: ValueType, label?: string) => React.ReactElement : never;
+type RenderPicker = RenderPickerOverloads<PickerValue>;
+export type RenderCustomModalProps = {
+    visible: boolean;
+    toggleModal: () => void;
+    onSearchChange: (searchValue: string) => void;
+    children: ReactNode;
+    onDone: () => void;
+    onCancel: () => void;
+};
+export interface PickerSearchStyle {
+    icon?: number;
+    color?: string;
+    placeholderTextColor?: string;
+    selectionColor?: string;
+}
+type PickerPropsDeprecation = {
+    /**
+     * @deprecated
+     * Callback for modal onShow event
+     * Instead pass onShow via customPickerProps.modalProps.onShow
+     */
+    onShow?: () => void;
+    /**
+     * @deprecated
+     * instead pass items
+     */
+    children?: ReactNode | undefined;
+    /**
+     * @deprecated
+     * Render a custom header for Picker's dialog
+     * instead use renderHeader
+     */
+    renderCustomDialogHeader?: (callbacks: {
+        onDone?: () => void;
+        onCancel?: () => void;
+    }) => React.ReactElement;
+    /**
+     * @deprecated
+     * Render custom picker input (the value will be passed)
+     * Example:
+     * renderPicker = (selectedItem) => {...}
+     * instead use renderInput
+     */
+    renderPicker?: RenderPicker;
+    /**
+     * @deprecated
+     * Render custom picker overlay (e.g ({visible, children, toggleModal}) => {...})
+     * instead use renderOverlay
+     */
+    renderCustomModal?: (modalProps: RenderCustomModalProps) => React.ReactElement;
+    /**
+     * @deprecated
+     * Pass props to the picker modal
+     * instead pass modalProps via customPickerProps.modalProps
+     */
+    pickerModalProps?: ExpandableOverlayProps['modalProps'];
+};
+type PickerSearchProps = {
+    /**
+     * Show search input to filter picker items by label
+     */
+    showSearch?: boolean;
+    /**
+     * Style object for the search input (only when passing showSearch)
+     */
+    searchStyle?: PickerSearchStyle;
+    /**
+     * Placeholder text for the search input (only when passing showSearch)
+     */
+    searchPlaceholder?: string;
+    /**
+     * callback for picker modal search input text change (only when passing showSearch)
+     */
+    onSearchChange?: (searchValue: string, filteredItems?: PickerFilteredItems) => void;
+    /**
+     * Render custom search input (only when passing showSearch)
+     */
+    renderCustomSearch?: (props: PickerItemsListProps) => React.ReactElement;
+};
+type PickerListProps = PickerSearchProps & {
+    /**
+     * Render a custom header for Picker's Overlay
+     */
+    renderHeader?: (callbacks: {
+        onDone?: () => void;
+        onCancel?: () => void;
+    }) => React.ReactElement;
+    /**
+     * Pass props to the list component that wraps the picker items (allows to control FlatList behavior)
+     */
+    listProps?: Partial<FlatListProps<any>>;
+    /**
+     * The picker modal top bar props
+     */
+    topBarProps?: ModalTopBarProps;
+    /**
+     * Add safe area in the Picker modal view
+     */
+    useSafeArea?: boolean;
+};
+type PickerExpandableOverlayProps = {
+    /**
+     * Custom picker overlay props
+     */
+    customPickerProps?: ExpandableOverlayProps;
+    /**
+     * Render custom picker overlay (e.g ({visible, children, toggleModal}) => {...})
+     */
+    renderOverlay?: (modalProps: RenderCustomModalProps) => React.ReactElement;
+    /**
+     * Add blur effect to picker modal (iOS only)
+     */
+    enableModalBlur?: boolean;
+};
+interface PickerSelectionStatusLabelData {
+    selectedCount: number;
+    areAllItemsSelected: boolean;
+}
+export type ButtonSelectionStatus = {
+    /**
+     * Select all element type
+     */
+    selectAllType?: 'button';
+    /**
+     * Button props
+     */
+    buttonProps?: ButtonProps;
+};
+export type CheckboxSelectionStatus = {
+    /**
+     * Select all element type
+     */
+    selectAllType?: 'checkbox';
+    /**
+     * Checkbox props
+     */
+    checkboxProps?: CheckboxProps;
+};
+export type PickerSelectionStatusProps = {
+    /**
+     * A function that generates a label based on the selected items' count and status
+     */
+    getLabel?: (data: PickerSelectionStatusLabelData) => string;
+    /**
+     * Custom container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Control weather to show the label or not
+     */
+    showLabel?: boolean;
+} & (ButtonSelectionStatus | CheckboxSelectionStatus);
+export type PickerBaseProps = Omit<TextFieldProps, 'value' | 'onChange'> & PickerPropsDeprecation & PickerExpandableOverlayProps & PickerListProps & {
+    /**
+     * Use dialog instead of modal picker
+     */
+    useDialog?: boolean;
+    /**
+     * Use wheel picker instead of a list picker
+     */
+    useWheelPicker?: boolean;
+    /**
+     * Picker value
+     */
+    value?: PickerValue;
+    /**
+     * Callback for when picker value change
+     */
+    onChange?: (value: PickerValue) => void;
+    /**
+     * SINGLE or MULTI selection mode
+     */
+    mode?: PickerModes | `${PickerModes}`;
+    /**
+     * Limit the number of selected items
+     */
+    selectionLimit?: number;
+    /**
+     * Pass for different field type UI (form, filter or settings)
+     */
+    fieldType?: PickerFieldTypes | `${PickerFieldTypes}`;
+    /**
+     * Render custom picker input (the value will be passed)
+     * Example:
+     * renderInput = (selectedItem) => {...}
+     */
+    renderInput?: RenderPicker;
+    /**
+     * Render custom picker item
+     */
+    renderItem?: (value: PickerValue, itemProps: PickerItemProps & {
+        isSelected: boolean;
+        isItemDisabled: boolean;
+    }, label?: string) => React.ReactElement;
+    /**
+     * Render custom top element
+     */
+    renderCustomTopElement?: (value?: PickerValue) => React.ReactElement;
+    /**
+     * Selection status bar props
+     */
+    selectionStatus?: PickerSelectionStatusProps;
+    /**
+     * Add onPress callback for when pressing the picker
+     */
+    onPress?: () => void;
+    /**
+     * A function that returns the label to show for the selected Picker value
+     */
+    getLabel?: (value: PickerValue) => string;
+    /**
+     * Custom picker input container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Data source for Picker
+     */
+    items?: PickerItemProps[];
+    /**
+     * Component test id
+     */
+    testID?: string;
+    /**
+     * Show a loader (while items are loading/fetching)
+     */
+    showLoader?: boolean;
+    /**
+     * Custom loader element
+     */
+    customLoaderElement?: JSX.Element;
+};
+export type PickerPropsWithSingle = PickerBaseProps & {
+    mode?: PickerModes.SINGLE;
+    value?: PickerSingleValue;
+    onChange?: (value: PickerSingleValue) => void;
+};
+export type PickerPropsWithMulti = PickerBaseProps & {
+    mode?: PickerModes.MULTI;
+    value?: PickerMultiValue;
+    onChange?: (value: PickerMultiValue) => void;
+};
+export type PickerProps = PickerPropsWithSingle | PickerPropsWithMulti;
+export interface PickerItemProps extends Pick<TouchableOpacityProps, 'customValue'> {
+    /**
+     * Item's value
+     */
+    value: PickerSingleValue;
+    /**
+     * Item's label
+     */
+    label: string;
+    /**
+     * Item's label style
+     */
+    labelStyle?: StyleProp<TextStyle>;
+    /**
+     * Render custom item
+     */
+    renderItem?: PickerProps['renderItem'];
+    /**
+     * Pass to change the selected icon
+     */
+    selectedIcon?: number;
+    /**
+     * Pass to change the selected icon color
+     */
+    selectedIconColor?: string;
+    /**
+     * Is the item disabled
+     */
+    disabled?: boolean;
+    /**
+     * Callback for onPress action, will stop selection if false is returned
+     * @param selected true\false in multi mode and undefined in single mode
+     * @param props the props sent to the item
+     */
+    onPress?: (selected: boolean | undefined, props: any) => void | Promise<boolean>;
+    /**
+     * Component test id
+     */
+    testID?: string;
+}
+export interface PickerContextProps extends Pick<PickerProps, 'value' | 'renderItem' | 'selectionLimit'> {
+    onPress: (value: PickerSingleValue) => void;
+    isMultiMode: boolean;
+    onSelectedLayout: (event: any) => any;
+    selectionLimit: PickerProps['selectionLimit'];
+    areAllItemsSelected: boolean;
+    selectedCount: number;
+    toggleAllItemsSelection?: (selectAll: boolean) => void;
+}
+export type PickerItemsListProps = Pick<PropsWithChildren<PickerProps>, 'topBarProps' | 'listProps' | 'renderHeader' | 'useSafeArea' | 'showLoader' | 'customLoaderElement' | 'renderCustomTopElement' | 'selectionStatus' | 'showSearch' | 'searchStyle' | 'searchPlaceholder' | 'onSearchChange' | 'renderCustomSearch' | 'children' | 'useWheelPicker' | 'useDialog' | 'mode' | 'testID'> & {
+    items?: {
+        value: any;
+        label: any;
+    }[];
+};
+export type PickerMethods = TextFieldMethods & ExpandableOverlayMethods;
+export {};

package/src/components/pieChart/PieSegment.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import { ColorValue } from 'react-native';
+export type PieSegmentProps = {
+    /**
+     * The percentage of pie the segment should cover
+     */
+    percentage: number;
+    /**
+     * The radius of the containing pie
+     */
+    radius: number;
+    /**
+     * The color of the segment
+     */
+    color: string;
+    /**
+     * The start angle of the segment
+     */
+    startAngle?: number;
+    /**
+     * The padding between the segments and the container of the pie.
+     */
+    padding?: number;
+    /**
+     * The width of the divider between the segments
+     */
+    dividerWidth?: number;
+    /**
+     * The color of the divider between the segments
+     */
+    dividerColor?: ColorValue;
+};
+declare const PieSegment: (props: PieSegmentProps) => React.JSX.Element;
+export default PieSegment;

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { PieSegmentProps } from './PieSegment';
+export type PieChartSegmentProps = Pick<PieSegmentProps, 'percentage' | 'color'>;
+export type PieChartProps = {
+    /**
+     * Pie chart segments array
+     */
+    segments: PieChartSegmentProps[];
+    /**
+     * Pie chart diameter
+     */
+    diameter?: number;
+} & Pick<PieSegmentProps, 'dividerWidth' | 'dividerColor'>;
+declare const PieChart: (props: PieChartProps) => React.JSX.Element | null;
+export default PieChart;

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

@@ -0,0 +1,65 @@
+import React, { PureComponent } from 'react';
+import { Animated, StyleProp, ViewStyle, LayoutChangeEvent } from 'react-native';
+/**
+ * @description: Progress bar
+ * @example:https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressBarScreen.tsx
+ */
+interface Props {
+    /**
+     * The progress of the bar from 0 to 100
+     */
+    progress?: number;
+    /**
+     *  FullWidth Ui preset
+     */
+    fullWidth?: boolean;
+    /**
+     * Override container style
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Progress color
+     */
+    progressColor?: string;
+    /**
+     * Custom element to render on top of the animated progress
+     */
+    customElement?: JSX.Element;
+    testID?: string;
+}
+export type ProgressBarProps = Props;
+interface State {
+    containerWidth?: number;
+}
+declare class ProgressBar extends PureComponent<Props, State> {
+    static displayName: string;
+    static defaultProps: Partial<Props>;
+    progressAnimation: Animated.Value;
+    constructor(props: Props);
+    componentDidUpdate(prevProps: Props): void;
+    getContainerWidth: (event: LayoutChangeEvent) => void;
+    animateProgress(toValue?: number): void;
+    getAccessibilityProps(): {
+        accessible: boolean;
+        accessibilityLabel: string;
+    } | undefined;
+    getContainerStyle(): {
+        height: number;
+        borderRadius?: number | undefined;
+    };
+    getProgressStyle(): {
+        right: number | undefined;
+        backgroundColor: string;
+        borderRadius: number;
+    } | {
+        right: number | undefined;
+        backgroundColor: string;
+        borderBottomRightRadius: number;
+        borderTopRightRadius: number;
+    };
+    renderCustomElement(): React.FunctionComponentElement<any> | undefined;
+    render(): React.JSX.Element;
+}
+export { ProgressBar };
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>> & typeof ProgressBar;
+export default _default;

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

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Animated } from 'react-native';
+import { AnimatedImageProps } from '../animatedImage';
+/**
+ * @description: Image component that loads first a small thumbnail of the images,
+ *               and fades-in the full-sized image with animation once it's loaded
+ * @extends: AnimatedImage
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ProgressiveImageScreen.js
+ */
+export type ProgressiveImageProps = {
+    /**
+     * small thumbnail source to display while the full-size image is loading
+     */
+    thumbnailSource: AnimatedImageProps['source'];
+};
+declare class ProgressiveImage extends React.Component<ProgressiveImageProps, {}> {
+    static displayName: string;
+    thumbnailAnimated: Animated.Value;
+    imageAnimated: Animated.Value;
+    getThumbnail: () => React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default ProgressiveImage;

package/src/components/radioButton/RadioButton.driver.d.ts

@@ -0,0 +1,9 @@
+import { RadioButtonProps } from './index';
+import { ComponentDriver, ComponentDriverArgs } from '../../testkit/Component.driver';
+export declare class RadioButtonDriver extends ComponentDriver<RadioButtonProps> {
+    private readonly labelDriver;
+    private readonly iconDriver;
+    constructor(componentDriverArgs: ComponentDriverArgs);
+    hasLabel: () => Promise<boolean>;
+    hasIcon: () => Promise<boolean>;
+}

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

@@ -0,0 +1,121 @@
+import React from 'react';
+import { TextStyle, StyleProp, ImageSourcePropType, ImageStyle, ViewStyle } from 'react-native';
+import { ViewProps } from '../view';
+import { RadioGroupContextProps } from '../radioGroup/RadioGroupContext';
+export type RadioButtonProps = RadioGroupContextProps & ViewProps & {
+    /**
+     * The identifier value of the radio button. must be different than other RadioButtons in the same group
+     */
+    value?: string | number | boolean;
+    /**
+     * When using RadioButton without a RadioGroup, use this prop to toggle selection
+     */
+    selected?: boolean;
+    /**
+     * Invoked when pressing the button
+     */
+    onPress?: (selected: boolean) => void;
+    /**
+     * Whether the radio button should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * The color of the radio button
+     */
+    color?: string;
+    /**
+     * The size of the radio button, affect both width & height
+     */
+    size?: number;
+    /**
+     * The radio button border radius
+     */
+    borderRadius?: number;
+    /**
+     * A label for the radio button description
+     */
+    label?: string;
+    /**
+     * Label style
+     */
+    labelStyle?: TextStyle;
+    /**
+     * Icon image source
+     */
+    iconSource?: ImageSourcePropType;
+    /**
+     * Icon image style
+     */
+    iconStyle?: ImageStyle;
+    /**
+     * Should the icon be on the right side of the label
+     */
+    iconOnRight?: boolean;
+    /**
+     * Should the content be rendered left to the button
+     */
+    contentOnLeft?: boolean;
+    /**
+     * Additional styling for the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+};
+declare const _default: React.ForwardRefExoticComponent<RadioGroupContextProps & ViewProps & {
+    /**
+     * The identifier value of the radio button. must be different than other RadioButtons in the same group
+     */
+    value?: string | number | boolean | undefined;
+    /**
+     * When using RadioButton without a RadioGroup, use this prop to toggle selection
+     */
+    selected?: boolean | undefined;
+    /**
+     * Invoked when pressing the button
+     */
+    onPress?: ((selected: boolean) => void) | undefined;
+    /**
+     * Whether the radio button should be disabled
+     */
+    disabled?: boolean | undefined;
+    /**
+     * The color of the radio button
+     */
+    color?: string | undefined;
+    /**
+     * The size of the radio button, affect both width & height
+     */
+    size?: number | undefined;
+    /**
+     * The radio button border radius
+     */
+    borderRadius?: number | undefined;
+    /**
+     * A label for the radio button description
+     */
+    label?: string | undefined;
+    /**
+     * Label style
+     */
+    labelStyle?: TextStyle | undefined;
+    /**
+     * Icon image source
+     */
+    iconSource?: ImageSourcePropType | undefined;
+    /**
+     * Icon image style
+     */
+    iconStyle?: ImageStyle | undefined;
+    /**
+     * Should the icon be on the right side of the label
+     */
+    iconOnRight?: boolean | undefined;
+    /**
+     * Should the content be rendered left to the button
+     */
+    contentOnLeft?: boolean | undefined;
+    /**
+     * Additional styling for the container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+} & React.RefAttributes<any>>;
+export default _default;

package/src/components/radioGroup/RadioGroup.driver.d.ts

@@ -0,0 +1,13 @@
+import { RadioGroupProps } from './index';
+import { ComponentDriver, ComponentDriverArgs } from '../../testkit/Component.driver';
+type RadioGroupDriverArgs = ComponentDriverArgs & {
+    testIDs: {
+        [key: string]: string;
+    };
+};
+export declare class RadioGroupDriver extends ComponentDriver<RadioGroupProps> {
+    private readonly radioButtonDrivers;
+    constructor(radioGroupDriverArgs: RadioGroupDriverArgs);
+    pressOn: (radioButtonTestId: string) => Promise<void>;
+}
+export {};

package/src/components/radioGroup/RadioGroupContext.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+export interface RadioGroupContextProps {
+    /**
+     * The identifier value of the radio button. must be different than other RadioButtons in the same group
+     */
+    value?: string | number | boolean;
+    /**
+     * Invoked once when value changes, by selecting one of the radio buttons in the group
+     */
+    onValueChange?: (value: string | number | boolean) => void;
+}
+export type RadioGroupContextPropTypes = RadioGroupContextProps;
+declare const _default: React.Context<RadioGroupContextProps>;
+export default _default;

package/src/components/radioGroup/asRadioGroupChild.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function asRadioGroupChild(WrappedComponent: React.ComponentType<any>): any;

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

@@ -0,0 +1,47 @@
+import React, { PureComponent, GetDerivedStateFromProps } from 'react';
+import { BaseComponentInjectedProps, ForwardRefInjectedProps } from '../../commons/new';
+import { ViewProps } from '../view';
+export type RadioGroupProps = ViewProps & {
+    /**
+     * The initial value of the selected radio button
+     */
+    initialValue?: string | number | boolean;
+    /**
+     * Invoked once when value changes, by selecting one of the radio buttons in the group
+     */
+    onValueChange?: ((value?: string) => void) | ((value?: number) => void) | ((value?: boolean) => void) | ((value?: any) => void);
+};
+interface RadioGroupState {
+    initialValue?: RadioGroupProps['initialValue'];
+    value?: RadioGroupProps['initialValue'];
+}
+type Props = RadioGroupProps & BaseComponentInjectedProps & ForwardRefInjectedProps;
+/**
+ * @description: Wrap a group of Radio Buttons to automatically control their selection
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Default.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Alignment.gif?raw=true, https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Custom.gif?raw=true
+ * @image: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/RadioButton/Individual.png?raw=true
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/RadioButtonScreen.js
+ */
+declare class RadioGroup extends PureComponent<Props, RadioGroupState> {
+    static displayName: string;
+    constructor(props: Props);
+    static getDerivedStateFromProps: GetDerivedStateFromProps<Props, RadioGroupState>;
+    getContextProviderValue(): {
+        value: string | number | boolean | undefined;
+        onValueChange: (value: string | number | boolean | undefined) => void;
+    };
+    onValueChange: (value: RadioGroupProps['initialValue']) => void;
+    render(): React.JSX.Element;
+}
+export { RadioGroup };
+declare const _default: React.ForwardRefExoticComponent<ViewProps & {
+    /**
+     * The initial value of the selected radio button
+     */
+    initialValue?: string | number | boolean | undefined;
+    /**
+     * Invoked once when value changes, by selecting one of the radio buttons in the group
+     */
+    onValueChange?: ((value?: string | undefined) => void) | ((value?: number | undefined) => void) | ((value?: boolean | undefined) => void) | ((value?: any) => void) | undefined;
+} & React.RefAttributes<any>>;
+export default _default;