react-native-ui-lib 8.0.1 → 8.1.0

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

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

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

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

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

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

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

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

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

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

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

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

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