react-native-ui-lib 8.1.1 → 8.1.5

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

@@ -0,0 +1,129 @@
+import React, { Component } from 'react';
+import { Animated, StyleProp, TouchableOpacityProps, ViewStyle, TextStyle, ImageStyle } from 'react-native';
+import { TextProps } from '../text';
+export interface CheckboxProps extends TouchableOpacityProps {
+    /**
+     * The value of the Checkbox. 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 checkbox is required
+     */
+    required?: boolean;
+    /**
+     * Callback for when field validity has changed (only after invoking validate())
+     */
+    onChangeValidity?: (isValid?: boolean) => void;
+    /**
+     * Whether the checkbox should be disabled
+     */
+    disabled?: boolean;
+    /**
+     * The Checkbox color
+     */
+    color?: string;
+    /**
+     * alternative Checkbox outline style
+     */
+    outline?: boolean;
+    /**
+     * The size of the checkbox. affect both width and height
+     */
+    size?: number;
+    /**
+     * The Checkbox border radius
+     */
+    borderRadius?: number;
+    /**
+     * The icon asset to use for the selected indication (accept only local assets)
+     */
+    selectedIcon?: number;
+    /**
+     * The selected icon color
+     */
+    iconColor?: string;
+    /**
+     * The label of the checkbox
+     */
+    label?: string;
+    /**
+     * The style of the label
+     */
+    labelStyle?: StyleProp<TextStyle>;
+    /**
+     * Props that will be passed to the checkbox Text label.
+     */
+    labelProps?: Omit<TextProps, 'style'>;
+    /**
+     * Additional styling
+     */
+    style?: StyleProp<ViewStyle>;
+    /**
+     * Additional styling for checkbox and label container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    indeterminate?: boolean;
+}
+interface CheckboxMethods {
+    validate: () => void;
+    isValid: () => boolean;
+}
+export type CheckboxRef = Checkbox & CheckboxMethods;
+interface CheckboxState {
+    isChecked: Animated.Value;
+    showError?: boolean;
+    isValid?: boolean;
+}
+declare class Checkbox extends Component<CheckboxProps, CheckboxState> {
+    static displayName: string;
+    styles: {
+        container: StyleProp<ViewStyle>;
+        selectedIcon: StyleProp<ImageStyle>;
+        checkboxLabel: StyleProp<TextStyle>;
+    };
+    animationStyle: {
+        opacity: CheckboxState['isChecked'];
+        transform: [
+            {
+                scaleX: CheckboxState['isChecked'];
+            },
+            {
+                scaleY: CheckboxState['isChecked'];
+            }
+        ];
+    };
+    constructor(props: CheckboxProps);
+    validationState: boolean;
+    componentDidUpdate(prevProps: CheckboxProps): void;
+    getAccessibilityProps(): {
+        accessible: boolean;
+        accessibilityLabel: string;
+        accessibilityRole: string;
+        accessibilityState: {
+            disabled: boolean | undefined;
+            checked: boolean | undefined;
+        };
+    };
+    animateCheckbox(value: CheckboxProps['value']): void;
+    setValidation(newValue: boolean): void;
+    onPress: () => void;
+    getColor: () => string;
+    getBackgroundColor: () => string;
+    getTintColor: () => string;
+    getBorderStyle(): (StyleProp<ViewStyle> | {
+        borderColor: string;
+    })[];
+    getLabelStyle: () => {
+        color: string;
+    };
+    renderCheckbox(): React.JSX.Element;
+    render(): React.JSX.Element;
+    validate: () => boolean;
+    isValid: () => boolean | undefined;
+}
+declare const _default: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,33 @@
+import { ComponentProps } from '../../testkit/new/Component.driver';
+export declare const ChipDriver: (props: ComponentProps) => {
+    getLabel: () => {
+        getText: () => string | (string | import("react-test-renderer").ReactTestInstance)[];
+        getStyle: () => import("react-native").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;
+    };
+    getDismissIcon: () => {
+        exists: () => boolean;
+        getStyle: () => any;
+        getElement: () => import("react-test-renderer").ReactTestInstance;
+        queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+    };
+    getIcon: () => {
+        exists: () => boolean;
+        getStyle: () => any;
+        getElement: () => import("react-test-renderer").ReactTestInstance;
+        queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+    };
+    getElement: () => import("react-test-renderer").ReactTestInstance;
+    queryElement: () => import("react-test-renderer").ReactTestInstance | undefined;
+    exists: () => boolean;
+};

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

@@ -0,0 +1,209 @@
+import React from 'react';
+import { StyleProp, ViewStyle, ViewProps, ImageStyle, TextStyle, ImageSourcePropType } from 'react-native';
+import { AvatarProps } from '../avatar';
+import { BadgeProps } from '../badge';
+import { TouchableOpacityProps } from '../touchableOpacity';
+import { IconProps } from '../icon';
+export type ChipProps = ViewProps & TouchableOpacityProps & {
+    /**
+     * Chip's size. Number or a width and height object.
+     */
+    size?: number | Partial<{
+        width: number;
+        height: number;
+    }>;
+    /**
+     * On Chip press callback
+     */
+    onPress?: (props: any) => void;
+    /**
+     * Chip's background color
+     */
+    backgroundColor?: string;
+    /**
+     * The Chip borderRadius
+     */
+    borderRadius?: number;
+    /**
+     * Chip's container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Uses size as minWidth and minHeight - default is true
+     */
+    useSizeAsMinimum?: boolean;
+    /**
+     * Disables all internal elements default spacings. Helps reach a custom design
+     */
+    resetSpacings?: boolean;
+    /**
+     * Used as testing identifier
+     */
+    testID?: string;
+    /**
+     * Main Chip text
+     */
+    label?: string;
+    /**
+     * Label's style
+     */
+    labelStyle?: StyleProp<TextStyle>;
+    /**
+     * Badge props object
+     */
+    badgeProps?: BadgeProps;
+    /**
+     * Display badge as counter (no background)
+     */
+    useCounter?: boolean;
+    /**
+     * Avatar props object
+     */
+    avatarProps?: AvatarProps;
+    /**
+     * Additional icon props
+     */
+    iconProps?: Omit<IconProps, 'source'>;
+    /**
+     * Icon style
+     */
+    iconStyle?: StyleProp<ImageStyle>;
+    /**
+     * Left icon's source
+     */
+    iconSource?: ImageSourcePropType;
+    /**
+     * Right icon's source
+     */
+    rightIconSource?: ImageSourcePropType;
+    /**
+     * Left custom element
+     */
+    leftElement?: JSX.Element;
+    /**
+     * Right custom element
+     */
+    rightElement?: JSX.Element;
+    /**
+     * Adds a dismiss button and serves as its callback
+     */
+    onDismiss?: (props: any) => void;
+    /**
+     * Dismiss color
+     */
+    dismissColor?: string;
+    /**
+     * Dismiss asset
+     */
+    dismissIcon?: ImageSourcePropType;
+    /**
+     * Dismiss style
+     */
+    dismissIconStyle?: StyleProp<ImageStyle>;
+    /**
+     * Dismiss container style
+     */
+    dismissContainerStyle?: StyleProp<ImageStyle>;
+};
+declare const _default: React.ForwardRefExoticComponent<ViewProps & TouchableOpacityProps & {
+    /**
+     * Chip's size. Number or a width and height object.
+     */
+    size?: number | Partial<{
+        width: number;
+        height: number;
+    }> | undefined;
+    /**
+     * On Chip press callback
+     */
+    onPress?: ((props: any) => void) | undefined;
+    /**
+     * Chip's background color
+     */
+    backgroundColor?: string | undefined;
+    /**
+     * The Chip borderRadius
+     */
+    borderRadius?: number | undefined;
+    /**
+     * Chip's container style
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * Uses size as minWidth and minHeight - default is true
+     */
+    useSizeAsMinimum?: boolean | undefined;
+    /**
+     * Disables all internal elements default spacings. Helps reach a custom design
+     */
+    resetSpacings?: boolean | undefined;
+    /**
+     * Used as testing identifier
+     */
+    testID?: string | undefined;
+    /**
+     * Main Chip text
+     */
+    label?: string | undefined;
+    /**
+     * Label's style
+     */
+    labelStyle?: StyleProp<TextStyle>;
+    /**
+     * Badge props object
+     */
+    badgeProps?: BadgeProps | undefined;
+    /**
+     * Display badge as counter (no background)
+     */
+    useCounter?: boolean | undefined;
+    /**
+     * Avatar props object
+     */
+    avatarProps?: AvatarProps | undefined;
+    /**
+     * Additional icon props
+     */
+    iconProps?: Omit<IconProps, "source"> | undefined;
+    /**
+     * Icon style
+     */
+    iconStyle?: StyleProp<ImageStyle>;
+    /**
+     * Left icon's source
+     */
+    iconSource?: ImageSourcePropType | undefined;
+    /**
+     * Right icon's source
+     */
+    rightIconSource?: ImageSourcePropType | undefined;
+    /**
+     * Left custom element
+     */
+    leftElement?: JSX.Element | undefined;
+    /**
+     * Right custom element
+     */
+    rightElement?: JSX.Element | undefined;
+    /**
+     * Adds a dismiss button and serves as its callback
+     */
+    onDismiss?: ((props: any) => void) | undefined;
+    /**
+     * Dismiss color
+     */
+    dismissColor?: string | undefined;
+    /**
+     * Dismiss asset
+     */
+    dismissIcon?: ImageSourcePropType | undefined;
+    /**
+     * Dismiss style
+     */
+    dismissIconStyle?: StyleProp<ImageStyle>;
+    /**
+     * Dismiss container style
+     */
+    dismissContainerStyle?: StyleProp<ImageStyle>;
+} & React.RefAttributes<any>>;
+export default _default;

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

@@ -0,0 +1,55 @@
+import React from 'react';
+import { TextFieldProps } from '../textField';
+import { ChipProps } from '../chip';
+export declare enum ChipsInputChangeReason {
+    Added = "added",
+    Removed = "removed"
+}
+export type ChipsInputChipProps = ChipProps & {
+    invalid?: boolean;
+};
+export type ChipsInputProps = Omit<TextFieldProps, 'ref'> & {
+    /**
+     * Chip items to render in the input
+     */
+    chips?: ChipsInputChipProps[];
+    /**
+     * A default set of chip props to pass to all chips
+     */
+    defaultChipProps?: ChipProps;
+    /**
+     * A default set of chip props to pass to all invalid chips
+     */
+    invalidChipProps?: ChipProps;
+    /**
+     * Change callback for when chips changed (either added or removed)
+     */
+    onChange?: (chips: ChipsInputChipProps[], changeReason: ChipsInputChangeReason, updatedChip: ChipProps) => void;
+    /**
+     * Maximum chips
+     */
+    maxChips?: number;
+};
+declare const ChipsInput: React.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & {
+    /**
+     * Chip items to render in the input
+     */
+    chips?: ChipsInputChipProps[] | undefined;
+    /**
+     * A default set of chip props to pass to all chips
+     */
+    defaultChipProps?: ChipProps | undefined;
+    /**
+     * A default set of chip props to pass to all invalid chips
+     */
+    invalidChipProps?: ChipProps | undefined;
+    /**
+     * Change callback for when chips changed (either added or removed)
+     */
+    onChange?: ((chips: ChipsInputChipProps[], changeReason: ChipsInputChangeReason, updatedChip: ChipProps) => void) | undefined;
+    /**
+     * Maximum chips
+     */
+    maxChips?: number | undefined;
+} & React.RefAttributes<any>>;
+export default ChipsInput;

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

@@ -0,0 +1,116 @@
+/// <reference types="node" />
+import React, { PureComponent } from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import Carousel from '../carousel';
+import { ColorSwatchProps, ColorInfo } from '../colorSwatch';
+interface Props {
+    /**
+     * Array of colors to render in the palette
+     */
+    colors: string[];
+    /**
+     * Style to pass the palette container
+     */
+    containerStyle?: StyleProp<ViewStyle>;
+    /**
+     * The container margins
+     */
+    containerWidth?: number;
+    /**
+     * Whether to use pagination when number of colors exceeds the number of rows
+     */
+    usePagination?: boolean;
+    /**
+     * Whether the colors pagination scrolls in a loop
+     */
+    loop?: boolean;
+    /**
+     * The number of color rows from 2 to 5
+     */
+    numberOfRows?: number;
+    /**
+     * Style to pass all the ColorSwatches in the palette
+     */
+    swatchStyle?: StyleProp<ViewStyle>;
+    /**
+     * The value of the selected swatch
+     */
+    value?: string;
+    /**
+     * The index of the item to animate at first render (default is last)
+     */
+    animatedIndex?: number;
+    /**
+     * Invoked once when value changes by selecting one of the swatches in the palette
+     */
+    onValueChange?: ColorSwatchProps['onPress'];
+    style?: StyleProp<ViewStyle>;
+    testID?: string;
+    /**
+     * The ColorPalette's background color
+     */
+    backgroundColor?: string;
+}
+export type ColorPaletteProps = Props;
+interface State {
+    currentPage: number;
+    scrollable: boolean;
+    orientation?: string;
+    contentWidth?: number;
+}
+/**
+ * @description: A color palette component
+ * @example: https://github.com/wix/react-native-ui-lib/blob/master/demo/src/screens/componentScreens/ColorPickerScreen.tsx
+ * @notes: This is a screen width component
+ * @gif: https://github.com/wix/react-native-ui-lib/blob/master/demo/showcase/ColorPalette/ColorPalette.gif?raw=true
+ */
+declare class ColorPalette extends PureComponent<Props, State> {
+    static displayName: string;
+    static defaultProps: {
+        numberOfRows: number;
+        usePagination: boolean;
+        loop: boolean;
+        backgroundColor: string;
+    };
+    constructor(props: Props);
+    carousel: React.RefObject<typeof Carousel>;
+    scrollBar: React.RefObject<any>;
+    itemsRefs?: any;
+    selectedColorIndex?: number;
+    selectedPage?: number;
+    currentColorsCount?: number;
+    itemsPerRow: number;
+    itemsPerPage: number;
+    usePagination?: boolean;
+    innerMargin?: number;
+    swatchStyles?: StyleProp<ViewStyle>[];
+    private dimensionsChangeListener;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Props): void;
+    componentWillUnmount(): void;
+    onOrientationChanged: () => void;
+    initLocalVariables(): void;
+    get value(): string | undefined;
+    get colors(): any[];
+    get containerWidth(): number;
+    getUniqueColors: (this: any, colors: any) => any[];
+    getNumberOfRows(): number;
+    getItemsPerRow(): number;
+    shouldUsePagination(): boolean | undefined;
+    getInnerMargin(): number;
+    scrollToSelected: () => NodeJS.Timeout;
+    onContentSizeChange: (contentWidth: number) => void;
+    onChangePage: (index: number) => void;
+    onValueChange: (value: string, colorInfo: ColorInfo) => void;
+    getHorizontalMargins: (index: number) => {
+        marginLeft: number | undefined;
+        marginRight: number | undefined;
+    };
+    getSwatchStyle: (index: number) => StyleProp<ViewStyle>;
+    renderColorSwatch(color: string, index: number): React.JSX.Element;
+    renderPalette(props: Props, contentStyle: StyleProp<ViewStyle>, colors: string[], pageIndex: number): React.JSX.Element;
+    renderScrollableContent(): React.JSX.Element;
+    renderPaginationContent(): React.JSX.Element;
+    render(): React.JSX.Element;
+}
+export default ColorPalette;

package/src/components/colorPicker/ColorPickerDialog.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { DialogProps } from '../dialog';
+export interface ColorPickerDialogProps extends DialogProps {
+    /**
+     * The initial color to pass the picker dialog
+     */
+    initialColor?: string;
+    /**
+     * onSubmit callback for the picker dialog color change
+     */
+    onSubmit?: (color: string, textColor: string) => void;
+    /**
+     * Props to pass the Dialog component // TODO: deprecate 'dialogProps' prop
+     */
+    dialogProps?: object;
+    /**
+     * Additional styling for the color preview text.
+     */
+    previewInputStyle?: StyleProp<ViewStyle>;
+    /**
+     * Accessibility labels as an object of strings, ex. {addButton: 'add custom color using hex code', dismissButton: 'dismiss', doneButton: 'done', input: 'custom hex color code'}
+     */
+    /**
+     * Ok (v) button color
+     */
+    doneButtonColor?: string;
+    accessibilityLabels?: {
+        dismissButton?: string;
+        doneButton?: string;
+        input?: string;
+    };
+    /**
+     * Whether to use the new Slider implementation using Reanimated
+     */
+    migrate?: boolean;
+}
+declare const _default: React.ForwardRefExoticComponent<ColorPickerDialogProps & React.RefAttributes<any>>;
+export default _default;

package/src/components/colorPicker/ColorPickerDialogHeader.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { ColorPickerDialogProps } from './ColorPickerDialog';
+type HeaderProps = Pick<ColorPickerDialogProps, 'doneButtonColor' | 'accessibilityLabels' | 'testID'> & {
+    valid: boolean;
+    onDismiss: () => void;
+    onDonePressed: () => void;
+};
+declare const ColorPickerDialogHeader: (props: HeaderProps) => React.JSX.Element;
+export default ColorPickerDialogHeader;

package/src/components/colorPicker/ColorPickerDialogSliders.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { HSLColor } from './ColorPickerPresenter';
+import { ColorPickerDialogProps } from './ColorPickerDialog';
+type SlidersProps = Pick<ColorPickerDialogProps, 'migrate'> & {
+    keyboardHeight: number;
+    color: HSLColor;
+    onSliderValueChange: (value: HSLColor) => void;
+};
+declare const ColorPickerDialogSliders: (props: SlidersProps) => React.JSX.Element;
+export default ColorPickerDialogSliders;

package/src/components/colorPicker/ColorPickerPresenter.d.ts

@@ -0,0 +1,16 @@
+import { Colors } from '../../style';
+export type HSLColor = ReturnType<typeof Colors.getHSL>;
+export declare const BORDER_RADIUS = 12;
+export declare function getColorValue(color?: string): string | undefined;
+export declare function getHexColor(text: string): string;
+export declare function getValidColorString(text?: string): {
+    hex: string;
+    valid: boolean;
+    undefined?: undefined;
+} | {
+    undefined: undefined;
+    valid: boolean;
+    hex?: undefined;
+};
+export declare function getHexString(color: HSLColor): string;
+export declare function getTextColor(color: string): string;

package/src/components/colorPicker/ColorPickerPreview.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { ColorPickerDialogProps } from './ColorPickerDialog';
+import { HSLColor, getColorValue } from './ColorPickerPresenter';
+type PreviewProps = Pick<ColorPickerDialogProps, 'accessibilityLabels' | 'previewInputStyle' | 'testID'> & {
+    color: HSLColor;
+    text: ReturnType<typeof getColorValue>;
+    valid: boolean;
+    onChangeText: (value: string) => void;
+    onFocus: () => void;
+};
+declare const ColorPickerPreview: (props: PreviewProps) => React.JSX.Element;
+export default ColorPickerPreview;

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { ColorPaletteProps } from '../colorPalette';
+import { ColorPickerDialogProps } from './ColorPickerDialog';
+import type { ComponentStatics } from '../../typings/common';
+interface Props extends ColorPickerDialogProps, Pick<ColorPaletteProps, 'onValueChange'> {
+    /**
+     * Array of colors for the picker's color palette (hex values)
+     */
+    colors: string[];
+    /**
+     * The value of the selected swatch // TODO: rename prop 'selectedValue'
+     */
+    value?: string;
+    /**
+     * The index of the item to animate at first render (default is last)
+     */
+    animatedIndex?: number;
+    /**
+     * Accessibility labels as an object of strings, ex.
+     * {
+     *  addButton: 'add custom color using hex code',
+     *  dismissButton: 'dismiss',
+     *  doneButton: 'done',
+     *  input: 'custom hex color code'
+     * }
+     */
+    accessibilityLabels?: {
+        addButton?: string;
+        dismissButton?: string;
+        doneButton?: string;
+        input?: string;
+    };
+    testID?: string;
+    /**
+     * The ColorPicker's background color
+     */
+    backgroundColor?: string;
+}
+export type ColorPickerProps = Props;
+declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<any>> & ComponentStatics<{
+    (props: Props): React.JSX.Element;
+    displayName: string;
+    Dialog: React.ForwardRefExoticComponent<ColorPickerDialogProps & React.RefAttributes<any>>;
+}>;
+export default _default;