react-native-ui-lib 8.1.1 → 8.1.5

package/src/hooks/useScrollTo/index.d.ts

@@ -0,0 +1,37 @@
+import { RefObject } from 'react';
+import { ScrollView, FlatList, LayoutChangeEvent } from 'react-native';
+export type ScrollToSupportedViews = ScrollView | FlatList;
+export type ScrollToProps<T extends ScrollToSupportedViews> = {
+    /**
+     * A reference to the ScrollView (or FlatList) which the items are in
+     */
+    scrollViewRef?: RefObject<T>;
+    /**
+     * Is the scroll view horizontal (default is true)
+     */
+    horizontal?: boolean;
+};
+export type ScrollToResultProps<T extends ScrollToSupportedViews> = {
+    /**
+     * A reference to the ScrollView (or FlatList) which the items are in (from the props or a created one)
+     */
+    scrollViewRef: RefObject<T>;
+    /**
+     * scrollTo callback.
+     * offset - the x or y to scroll to.
+     * animated - should the scroll be animated (default is true)
+     */
+    scrollTo: (offset: number, animated?: boolean) => 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 useScrollTo: <T extends ScrollToSupportedViews>(props: ScrollToProps<T>) => ScrollToResultProps<T>;
+export default useScrollTo;

package/src/hooks/useScrollToItem/index.d.ts

@@ -0,0 +1,65 @@
+import { LayoutChangeEvent } from 'react-native';
+import { ScrollToProps, ScrollToSupportedViews, ScrollToResultProps } from '../useScrollTo';
+export declare enum OffsetType {
+    CENTER = "CENTER",
+    DYNAMIC = "DYNAMIC",
+    LEFT = "LEFT",
+    RIGHT = "RIGHT"
+}
+export type ScrollToItemProps<T extends ScrollToSupportedViews> = Pick<ScrollToProps<T>, 'scrollViewRef'> & {
+    /**
+     * The number of items
+     */
+    itemsCount: number;
+    /**
+     * The selected item's index
+     */
+    selectedIndex?: 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
+     */
+    itemsWidths: number[];
+    /**
+     * Use in order to focus the item with the specified index (use when the selectedIndex is not changed)
+     */
+    focusIndex: (index: number, animated?: boolean) => 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/hooks/useThemeProps/index.d.ts

@@ -0,0 +1,2 @@
+declare const useThemeProps: <T extends object>(props: T, componentName: string) => T;
+export default useThemeProps;

package/src/hooks/useToggleValue/index.d.ts

@@ -0,0 +1,2 @@
+declare const useToggleValue: (initial: any, second?: any) => any[];
+export default useToggleValue;

package/src/incubator/TouchableOpacity.d.ts

@@ -0,0 +1,52 @@
+import React from 'react';
+import { LayoutChangeEvent } from 'react-native';
+import { State } from 'react-native-gesture-handler';
+import { ViewProps } from '../components/view';
+export type TouchableOpacityProps = {
+    /**
+     * Background color
+     */
+    backgroundColor?: string;
+    /**
+     * Background color when actively pressing the touchable
+     */
+    feedbackColor?: string;
+    /**
+     * Opacity value when actively pressing the touchable
+     */
+    activeOpacity?: number;
+    /**
+     * Scale value when actively pressing the touchable
+     */
+    activeScale?: number;
+    /**
+     * Callback for when tapping the touchable
+     */
+    onPress?: (props: any) => void;
+    /**
+     * Callback for when long pressing the touchable
+     */
+    onLongPress?: (props: any) => void;
+    /**
+     * Pass controlled pressState to track gesture state changes
+     */
+    pressState?: State;
+    /**
+     * If true, disable all interactions for this component.
+     */
+    disabled?: boolean;
+    /**
+     * Pass custom style
+     */
+    style?: ViewProps['style'];
+    /**
+     * Custom value of any type to pass on to TouchableOpacity and receive back in onPress callback
+     */
+    customValue?: any;
+    children?: React.ReactNode;
+    onLayout?: (event: LayoutChangeEvent) => void;
+    testID?: string;
+    nativeID?: string;
+};
+declare const _default: React.ForwardRefExoticComponent<TouchableOpacityProps & React.RefAttributes<any>>;
+export default _default;

package/src/incubator/calendar/Agenda.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { AgendaProps } from './types';
+declare function Agenda(props: AgendaProps): React.JSX.Element;
+export default Agenda;

package/src/incubator/calendar/CalendarContext.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { CalendarContextProps } from './types';
+declare const CalendarContext: import("react").Context<CalendarContextProps>;
+export default CalendarContext;

package/src/incubator/calendar/CalendarItem.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CalendarItemProps } from './types';
+declare function CalendarItem(props: CalendarItemProps): React.JSX.Element | null;
+declare const _default: React.MemoExoticComponent<typeof CalendarItem>;
+export default _default;

package/src/incubator/calendar/Day.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DayProps } from './types';
+declare const Day: (props: DayProps) => React.JSX.Element;
+export default Day;

package/src/incubator/calendar/Day_OLD.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { DayProps } from './types';
+declare const Day: (props: DayProps) => React.JSX.Element;
+export default Day;

package/src/incubator/calendar/Header.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { HeaderProps } from './types';
+declare const Header: (props: HeaderProps) => React.JSX.Element;
+export default Header;

package/src/incubator/calendar/Month.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MonthProps } from './types';
+declare function Month(props: MonthProps): React.JSX.Element;
+export default Month;

package/src/incubator/calendar/TodayButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { TodayButtonProps } from './types';
+declare const TodayButton: (props: TodayButtonProps) => React.JSX.Element;
+export default TodayButton;

package/src/incubator/calendar/Week.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { WeekProps } from './types';
+declare const Week: (props: WeekProps) => React.JSX.Element;
+export default Week;

package/src/incubator/calendar/WeekDaysNames.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { WeekDaysNamesProps } from './types';
+declare const WeekDaysNames: (props: WeekDaysNamesProps) => React.JSX.Element;
+export default WeekDaysNames;

package/src/incubator/calendar/helpers/CalendarProcessor.d.ts

@@ -0,0 +1,2 @@
+import { DateObjectWithOptionalDay } from '../types';
+export declare function generateMonthItems(date: number, pastRange: number, futureRange: number): DateObjectWithOptionalDay[];

package/src/incubator/calendar/helpers/DataProcessor.d.ts

@@ -0,0 +1,2 @@
+import { Data, InternalData } from '../types';
+export declare function addHeaders(data: Data): InternalData;

package/src/incubator/calendar/helpers/DateUtils.d.ts

@@ -0,0 +1,23 @@
+import { FirstDayOfWeek, DayNamesFormat, DateObjectWithOptionalDay, DateObjectWithDate } from '../types';
+export declare const HOUR_IN_MS: number;
+export declare function getWeekNumbersOfMonth(year: number, month: number, firstDayOfWeek: FirstDayOfWeek): number[];
+declare function getFirstDayInTheYear(year: number, firstDayOfWeek: FirstDayOfWeek): number;
+export declare function getDaysOfWeekNumber(year: number, weekNumber: number, firstDayOfWeek: FirstDayOfWeek): any[];
+export declare function getDateObject(date: number | DateObjectWithDate): {
+    day: number;
+    month: number;
+    year: number;
+    dayOfTheWeek: number;
+    timestamp: number;
+};
+export declare function addMonths(date: number, count: number, useFirstDay?: boolean): number;
+export declare function addYears(date: number, count: number): number;
+export declare function getMonthForIndex(index: number): string | undefined;
+export declare function getWeekDayNames(firstDayOfWeek?: number, format?: DayNamesFormat): string[];
+export declare function isPastDate(date: number): boolean;
+export declare function isSameDay(d1: number, d2: number): boolean;
+export declare function isSameMonth(d1: number | DateObjectWithOptionalDay, d2: number | DateObjectWithOptionalDay): boolean;
+export declare const _forTesting: {
+    getFirstDayInTheYear: typeof getFirstDayInTheYear;
+};
+export {};

package/src/incubator/calendar/index.d.ts

@@ -0,0 +1,7 @@
+import React, { PropsWithChildren } from 'react';
+import { CalendarProps } from './types';
+declare function Calendar(props: PropsWithChildren<CalendarProps>): React.JSX.Element;
+declare namespace Calendar {
+    var Agenda: typeof import("./Agenda").default;
+}
+export default Calendar;

package/src/incubator/calendar/types.d.ts

@@ -0,0 +1,118 @@
+/// <reference types="react" />
+import { StyleProp, ViewStyle, TextStyle } from 'react-native';
+import { SharedValue } from 'react-native-reanimated';
+import { ButtonProps } from '../../components/button';
+export interface DateObject {
+    timestamp: number;
+    month: number;
+    year: number;
+    day: number;
+    dayOfTheWeek: number;
+}
+export interface DateObjectWithDate {
+    month: number;
+    year: number;
+    day: number;
+}
+export interface DateObjectWithOptionalDay {
+    timestamp: number;
+    month: number;
+    year: number;
+    day?: number;
+}
+export declare enum FirstDayOfWeek {
+    SUNDAY = 0,
+    MONDAY = 1,
+    SATURDAY = 6
+}
+export declare enum UpdateSource {
+    INIT = 0,
+    DAY_SELECT = 1,
+    MONTH_ARROW = 2,
+    MONTH_SCROLL = 3,
+    WEEK_ARROW = 4,
+    WEEK_SCROLL = 5,
+    AGENDA_SCROLL = 6,
+    TODAY_PRESS = 7,
+    PROP_UPDATE = 8
+}
+export interface Event {
+    id: string;
+    start: number;
+    end: number;
+}
+export type Data = Event[];
+export type DateSectionHeader = {
+    header: string;
+    date: number;
+};
+export type InternalEvent = (Event & {
+    type: 'Event';
+}) | (DateSectionHeader & {
+    type: 'Header';
+});
+export type InternalData = InternalEvent[];
+export interface CalendarContextProps {
+    firstDayOfWeek: FirstDayOfWeek;
+    selectedDate: SharedValue<number>;
+    setDate: (date: number, updateSource: UpdateSource) => void;
+    data: InternalData;
+    showWeeksNumbers: boolean;
+    showExtraDays: boolean;
+    updateSource: SharedValue<UpdateSource>;
+    staticHeader?: boolean;
+    setHeaderHeight?: (height: number) => void;
+    headerHeight: SharedValue<number>;
+    today: number;
+}
+export interface DayProps {
+    date: number;
+    onPress?: (date: number) => void;
+    currentMonth?: number;
+}
+export interface WeekProps {
+    weekNumber: number;
+    year: number;
+    month: number;
+}
+export interface MonthProps {
+    month: number;
+    year: number;
+}
+export interface CalendarItemProps {
+    weekNumber?: number;
+    month?: number;
+    year: number;
+}
+export interface HeaderProps {
+    year?: number;
+    month?: number;
+}
+export interface TodayButtonProps {
+    containerStyle?: StyleProp<ViewStyle>;
+    buttonProps?: ButtonProps;
+}
+export interface WeekDaysNamesProps {
+    containerStyle?: StyleProp<ViewStyle>;
+    textStyle?: StyleProp<TextStyle>;
+    format?: DayNamesFormat;
+}
+export declare enum DayNamesFormat {
+    DEFAULT = 0,
+    LONG_ABBREVIATION = 1,
+    SHORT_ABBREVIATION = 2
+}
+export interface CalendarProps {
+    data: Data;
+    initialDate?: number;
+    onChangeDate?: (date: number) => void;
+    firstDayOfWeek?: FirstDayOfWeek;
+    staticHeader?: boolean;
+    showExtraDays?: boolean;
+}
+export interface AgendaProps {
+    renderEvent?: (event: Event) => React.ReactElement | null;
+    renderHeader?: (header: DateSectionHeader) => React.ReactElement | null;
+    showLoader?: boolean;
+    onEndReached?: (date: number) => void;
+}

package/src/incubator/expandableOverlay/ExpandableOverlay.driver.d.ts

@@ -0,0 +1,7 @@
+import { type ComponentProps } from '../../testkit/new/Component.driver';
+export declare const ExpandableOverlayDriver: (props: ComponentProps, useDialog: boolean) => {
+    exists: () => boolean;
+    open: () => void;
+    isOpen: () => boolean;
+    pressOnBackground: () => void;
+};

package/src/incubator/expandableOverlay/index.d.ts

@@ -0,0 +1,83 @@
+import React, { PropsWithChildren } from 'react';
+import { TouchableOpacityProps } from '../../components/touchableOpacity';
+import { ModalProps, ModalTopBarProps } from '../../components/modal';
+import { DialogProps } from '../../components/dialog';
+export interface ExpandableOverlayMethods {
+    openExpandable: () => void;
+    closeExpandable: () => void;
+    toggleExpandable: () => void;
+}
+export interface RenderCustomOverlayProps extends ExpandableOverlayMethods {
+    visible: boolean;
+}
+export type ExpandableOverlayProps = TouchableOpacityProps & PropsWithChildren<{
+    /**
+     * The content to render inside the expandable modal/dialog
+     */
+    expandableContent?: React.ReactElement;
+    /**
+     * Whether to use a dialog as expandable container (by default the container will be a full screen modal)
+     */
+    useDialog?: boolean;
+    /**
+     *  The props to pass to the dialog expandable container
+     */
+    dialogProps?: DialogProps;
+    /**
+     * The props to pass to the modal expandable container
+     */
+    modalProps?: ModalProps;
+    /**
+     * Whether to render a modal top bar (relevant only for modal)
+     */
+    showTopBar?: boolean;
+    /**
+     * The modal top bar props to pass on
+     */
+    topBarProps?: ModalTopBarProps;
+    /**
+     * A custom overlay to render instead of Modal or Dialog components
+     */
+    renderCustomOverlay?: (props: RenderCustomOverlayProps) => React.ReactElement | undefined | null;
+    /**
+     * Disabled opening expandable overlay
+     */
+    disabled?: boolean;
+}>;
+declare const _default: React.ForwardRefExoticComponent<TouchableOpacityProps & {
+    /**
+     * The content to render inside the expandable modal/dialog
+     */
+    expandableContent?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | undefined;
+    /**
+     * Whether to use a dialog as expandable container (by default the container will be a full screen modal)
+     */
+    useDialog?: boolean | undefined;
+    /**
+     *  The props to pass to the dialog expandable container
+     */
+    dialogProps?: DialogProps | undefined;
+    /**
+     * The props to pass to the modal expandable container
+     */
+    modalProps?: ModalProps | undefined;
+    /**
+     * Whether to render a modal top bar (relevant only for modal)
+     */
+    showTopBar?: boolean | undefined;
+    /**
+     * The modal top bar props to pass on
+     */
+    topBarProps?: ModalTopBarProps | undefined;
+    /**
+     * A custom overlay to render instead of Modal or Dialog components
+     */
+    renderCustomOverlay?: ((props: RenderCustomOverlayProps) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null | undefined) | undefined;
+    /**
+     * Disabled opening expandable overlay
+     */
+    disabled?: boolean | undefined;
+} & {
+    children?: React.ReactNode;
+} & React.RefAttributes<ExpandableOverlayMethods>>;
+export default _default;

package/src/incubator/gradient/BorderGradient.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { BorderGradientProps } from './types';
+declare const BorderGradient: (props: BorderGradientProps) => React.JSX.Element | null;
+export default BorderGradient;

package/src/incubator/gradient/CircleGradient.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { CircleGradientProps } from './types';
+declare const CircleGradient: (props: CircleGradientProps) => React.JSX.Element | null;
+export default CircleGradient;

package/src/incubator/gradient/RectangleGradient.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { RectangleGradientProps } from './types';
+declare const RectangleGradient: (props: RectangleGradientProps) => React.JSX.Element | null;
+export default RectangleGradient;

package/src/incubator/gradient/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { GradientProps } from './types';
+export { GradientProps };
+declare const Gradient: (props: GradientProps) => React.JSX.Element | null;
+export default Gradient;

package/src/incubator/gradient/types.d.ts

@@ -0,0 +1,26 @@
+import type { LinearGradientProps } from 'react-native-linear-gradient';
+type CommonGradientProps = Pick<LinearGradientProps, 'colors' | 'children'> & {
+    angle?: number;
+    center?: boolean;
+    centerH?: boolean;
+    centerV?: boolean;
+};
+export type GradientProps = ({
+    type: 'rectangle';
+} & RectangleGradientProps) | ({
+    type: 'circle';
+} & CircleGradientProps) | ({
+    type: 'border';
+} & BorderGradientProps);
+export type RectangleGradientProps = CommonGradientProps & {
+    width?: number;
+    height?: number;
+};
+export type CircleGradientProps = CommonGradientProps & {
+    radius: number;
+};
+export type BorderGradientProps = RectangleGradientProps & {
+    borderWidth?: number;
+    borderRadius?: number;
+};
+export {};

package/src/incubator/gradient/useAngleTransform.d.ts

@@ -0,0 +1,27 @@
+declare function getStartEndFromAngle(angle?: number): {
+    start: {
+        x: number;
+        y: number;
+    };
+    end: {
+        x: number;
+        y: number;
+    };
+};
+export declare const _forTesting: {
+    getStartEndFromAngle: typeof getStartEndFromAngle;
+};
+export type AngleTransformProps = {
+    angle?: number;
+};
+declare const useAngleTransform: (props: AngleTransformProps) => {
+    start: {
+        x: number;
+        y: number;
+    };
+    end: {
+        x: number;
+        y: number;
+    };
+};
+export default useAngleTransform;

package/src/incubator/index.d.ts

@@ -0,0 +1,9 @@
+export { default as Calendar } from './calendar';
+export { default as ExpandableOverlay, ExpandableOverlayProps, ExpandableOverlayMethods } from './expandableOverlay';
+export { default as TextField, TextFieldProps, FieldContextType, TextFieldMethods, TextFieldRef, TextFieldValidationMessagePosition, TextFieldValidator } from '../components/textField';
+export { default as Toast, ToastProps, ToastPresets } from './toast';
+export { default as TouchableOpacity, TouchableOpacityProps } from './TouchableOpacity';
+export { default as Slider, SliderRef, SliderProps } from './slider';
+export { default as ChipsInput, ChipsInputProps, ChipsInputChangeReason, ChipsInputChipProps } from '../components/chipsInput';
+export { default as WheelPicker, WheelPickerProps, WheelPickerItemProps, WheelPickerAlign, WheelPickerItemValue } from '../components/WheelPicker';
+export { default as Gradient, GradientProps } from './gradient';

package/src/incubator/slider/Slider.driver.d.ts

@@ -0,0 +1,5 @@
+import { SliderProps } from './index';
+import { ComponentDriver } from '../../testkit/Component.driver';
+export declare class SliderDriver extends ComponentDriver<SliderProps> {
+    isDisabled: () => Promise<boolean>;
+}

package/src/incubator/slider/SliderPresenter.d.ts

@@ -0,0 +1,6 @@
+import { SharedValue } from 'react-native-reanimated';
+import { SliderProps } from './index';
+export declare function getOffsetForValue(value: number, span: number, minimumValue?: number, maximumValue?: number): number;
+export declare function getValueForOffset(offset: number, span: number, minimum?: number, maximum?: number, step?: number): number;
+export declare function validateValues(props: SliderProps): void;
+export declare function getStepInterpolated(trackWidth: number, minimumValue: number, maximumValue: number, stepXValue: SharedValue<number>): number;

package/src/incubator/slider/Thumb.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { ViewProps, ViewStyle } from 'react-native';
+import { SharedValue } from 'react-native-reanimated';
+interface ThumbProps extends ViewProps {
+    start: SharedValue<number>;
+    end: SharedValue<number>;
+    offset: SharedValue<number>;
+    stepInterpolatedValue: SharedValue<number>;
+    stepInterpolation?: () => number;
+    shouldBounceToStep?: boolean;
+    gap?: number;
+    disabled?: boolean;
+    secondary?: boolean;
+    defaultStyle?: SharedValue<ViewStyle>;
+    activeStyle?: SharedValue<ViewStyle>;
+    disableActiveStyling?: boolean;
+    hitSlop?: ViewProps['hitSlop'];
+    shouldDisableRTL?: boolean;
+    onSeekStart?: () => void;
+    onSeekEnd?: () => void;
+    enableShadow?: boolean;
+}
+declare const Thumb: (props: ThumbProps) => React.JSX.Element;
+export default Thumb;

package/src/incubator/slider/Track.d.ts

@@ -0,0 +1,13 @@
+import React, { ReactElement } from 'react';
+import { ViewProps, StyleProp, ViewStyle, GestureResponderEvent } from 'react-native';
+export interface Props extends ViewProps {
+    animatedStyle?: any;
+    disabled?: boolean;
+    maximumTrackTintColor?: string;
+    minimumTrackTintColor?: string;
+    trackStyle?: StyleProp<ViewStyle>;
+    renderTrack?: () => ReactElement | ReactElement[];
+    onPress?: ((event: GestureResponderEvent) => void) | undefined;
+}
+declare const Track: (props: Props) => React.JSX.Element;
+export default Track;