UNPKG

@nativescript-community/ui-pager

Version:

A NativeScript Pager / Carousel component that allows the user to swipe left and right through pages of data.

307 lines (306 loc) 16.1 kB
import { Color, CoreTypes, KeyedTemplate, Template, View } from '@nativescript/core'; import * as React from 'react'; import { GridLayoutAttributes, NSVElement, NativeScriptProps, ViewAttributes } from 'react-nativescript'; import { ItemsSource, Pager as NativeScriptPager, PagerItem as NativeScriptPagerItem, Orientation } from '..'; export declare type PagerAttributes = ViewAttributes & { items?: any; selectedIndex?: number; onItemLoading?: (args: any) => void; itemIdGenerator?: (item: any, index: number, items: any) => number; itemTemplate?: string | Template; itemTemplateSelector?: string | ((item: any, index: number, items: any) => string); itemTemplates?: string | KeyedTemplate[]; canGoRight?: boolean; canGoLeft?: boolean; spacing?: CoreTypes.PercentLengthType | string; peaking?: CoreTypes.PercentLengthType | string; perPage?: number; orientation?: Orientation; transformers?: string; loadMoreCount?: number; disableSwipe?: boolean; indicator?: any; showIndicator?: boolean; indicatorColor?: Color | string; indicatorSelectedColor?: Color | string; ios?: any; android?: any; }; export type CellViewContainer = View; type CellFactory = (item: any) => React.ReactElement; type OwnProps = { items: ItemsSource | any[]; /** User may specify cellFactory for single-template or cellFactories for multi-template. */ cellFactory?: CellFactory; cellFactories?: Map<string, { placeholderItem: any; cellFactory: CellFactory; }>; onSelectedIndexChange?(args: any): void; onSelectedIndexChanged?(args: any): void; scroll?(args: any): void; swipe?(args: any): void; swipeStart?(args: any): void; swipeOver?(args: any): void; swipeEnd?(args: any): void; onLoadMoreItems?: (args: any) => void; _debug?: { logLevel: 'debug' | 'info'; onCellFirstLoad?: (container: CellViewContainer) => void; onCellRecycle?: (container: CellViewContainer) => void; }; } & Omit<PagerAttributes, 'onItemLoading'>; type Props = OwnProps & { forwardedRef?: React.RefObject<NSVElement<NativeScriptPager>>; }; type NumberKey = number | string; interface State { nativeCells: Record<NumberKey, CellViewContainer>; nativeCellToItemIndex: Map<CellViewContainer, NumberKey>; itemIndexToNativeCell?: Map<NumberKey, CellViewContainer>; } export declare class _Pager extends React.Component<Props, State> { static readonly defaultProps: { _debug: { logLevel: "info"; onCellFirstLoad: any; onCellRecycle: any; }; }; constructor(props: Props); private readonly myRef; private readonly argsViewToRootKeyAndRef; private roots; private readonly defaultOnItemLoading; protected getNativeView(): NativeScriptPager | null; private readonly renderNewRoot; componentDidMount(): void; componentWillUnmount(): void; static isItemsSource(arr: any[] | ItemsSource): arr is ItemsSource; render(): JSX.Element; } export type PagerItemAttributes = GridLayoutAttributes & { forwardedRef?: React.RefObject<NSVElement<NativeScriptPagerItem>>; }; export declare class _PagerItem extends React.Component<PagerItemAttributes, {}> { private readonly myRef; private readonly item; componentDidMount(): void; render(): React.ReactElement<{ ref: React.RefObject<NSVElement<NativeScriptPagerItem>>; left?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; top?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; bindingContext?: any; iosIgnoreSafeArea?: boolean; class?: string; alignSelf?: "auto" | "stretch" | "flex-start" | "flex-end" | "center" | "baseline"; android?: any; className?: string; col?: number; colSpan?: number; column?: string | number; columnSpan?: string | number; cssClasses?: Set<string>; cssPseudoClasses?: Set<string>; dock?: "left" | "top" | "right" | "bottom"; domNode?: import("@nativescript/core/debugger/dom-node").DOMNode; effectiveBorderBottomWidth?: number; effectiveBorderLeftWidth?: number; effectiveBorderRightWidth?: number; effectiveBorderTopWidth?: number; effectiveHeight?: number; effectiveLeft?: number; effectiveMarginBottom?: number; effectiveMarginLeft?: number; effectiveMarginRight?: number; effectiveMarginTop?: number; effectiveMinHeight?: number; effectiveMinWidth?: number; effectivePaddingBottom?: number; effectivePaddingLeft?: number; effectivePaddingRight?: number; effectivePaddingTop?: number; effectiveTop?: number; effectiveWidth?: number; flexGrow?: number; flexShrink?: number; flexWrapBefore?: boolean; hidden?: string | boolean; id?: string; ios?: any; isCollapsed?: any; isLoaded?: boolean; nativeView?: any; onBindingContextChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onClassNameChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onHiddenChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onIdChange?: (args: import("@nativescript/core").PropertyChangeData) => void; order?: number; page?: import("@nativescript/core").Page; parent?: import("@nativescript/core").ViewBase; parentNode?: import("@nativescript/core").ViewBase; recycleNativeView?: "always" | "never" | "auto"; reusable?: boolean; row?: string | number; rowSpan?: string | number; typeName?: string; viewController?: any; accessibilityHidden?: boolean; accessibilityHint?: string; accessibilityIdentifier?: string; accessibilityIgnoresInvertColors?: string | boolean; accessibilityLabel?: string; accessibilityLanguage?: string; accessibilityLiveRegion?: import("@nativescript/core").AccessibilityLiveRegion; accessibilityMediaSession?: boolean; accessibilityRole?: import("@nativescript/core").AccessibilityRole; accessibilityState?: import("@nativescript/core").AccessibilityState; accessibilityValue?: string; accessible?: boolean; androidDynamicElevationOffset?: number; androidElevation?: number; automationText?: string; background?: string; backgroundColor?: string | Color; backgroundImage?: string | import("@nativescript/core/ui/styling/linear-gradient").LinearGradient; backgroundPosition?: string; backgroundRepeat?: "repeat" | "repeat-x" | "repeat-y" | "no-repeat"; backgroundSize?: string; borderBottomColor?: string | Color; borderBottomLeftRadius?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; borderBottomRightRadius?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; borderBottomWidth?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; borderColor?: string | Color; borderLeftColor?: string | Color; borderLeftWidth?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; borderRadius?: string | number | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; borderRightColor?: string | Color; borderRightWidth?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; borderTopColor?: string | Color; borderTopLeftRadius?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; borderTopRightRadius?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; borderTopWidth?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; borderWidth?: string | number | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; boxShadow?: string | any; color?: string | Color; css?: string; cssType?: string; height?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit | CoreTypes.LengthPercentUnit; horizontalAlignment?: "left" | "right" | "stretch" | "center"; ignoreTouchAnimation?: string | boolean; iosOverflowSafeArea?: boolean; iosOverflowSafeAreaEnabled?: boolean; isEnabled?: boolean; isLayoutRequired?: boolean; isLayoutValid?: boolean; isUserInteractionEnabled?: boolean; margin?: string | number | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit | CoreTypes.LengthPercentUnit; marginBottom?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit | CoreTypes.LengthPercentUnit; marginLeft?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit | CoreTypes.LengthPercentUnit; marginRight?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit | CoreTypes.LengthPercentUnit; marginTop?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit | CoreTypes.LengthPercentUnit; minHeight?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; minWidth?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; modal?: View; onAccessibilityHintChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onAccessibilityIdentifierChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onAccessibilityIgnoresInvertColorsChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onAccessibilityLabelChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onAccessibilityValueChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onIgnoreTouchAnimationChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onIosIgnoreSafeAreaChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onIosOverflowSafeAreaChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onIosOverflowSafeAreaEnabledChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onIsEnabledChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onIsUserInteractionEnabledChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onOriginXChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onOriginYChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onTestIDChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onTouchAnimationChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onTouchDelayChange?: (args: import("@nativescript/core").PropertyChangeData) => void; opacity?: number; originX?: number; originY?: number; perspective?: number; rotate?: number; rotateX?: number; rotateY?: number; scaleX?: number; scaleY?: number; testID?: string; textTransform?: "none" | "initial" | "capitalize" | "uppercase" | "lowercase"; touchAnimation?: string | false | true | import("@nativescript/core").TouchAnimationOptions; touchDelay?: string | number; translateX?: number; translateY?: number; verticalAlignment?: "top" | "bottom" | "stretch" | "middle"; visibility?: "hidden" | "visible" | "collapse" | "collapsed"; width?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit | CoreTypes.LengthPercentUnit; onAndroidBackPressed?: (args: import("@nativescript/core").EventData) => void; onColumnChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onColumnSpanChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onDockChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onDoubleTap?: (arg: import("@nativescript/core").TapGestureEventData) => any; onLeftChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onLoaded?: (args: import("@nativescript/core").EventData) => void; onLongPress?: (arg: import("@nativescript/core").GestureEventData) => any; onPan?: (arg: import("@nativescript/core").PanGestureEventData) => any; onPinch?: (arg: import("@nativescript/core").PinchGestureEventData) => any; onRotation?: (arg: import("@nativescript/core").RotationGestureEventData) => any; onRowChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onRowSpanChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onShowingModally?: (args: import("@nativescript/core").ShownModallyData) => void; onShownModally?: (args: import("@nativescript/core").ShownModallyData) => void; onLayoutChanged?: (args: import("@nativescript/core").EventData) => void; onSwipe?: (arg: import("@nativescript/core").SwipeGestureEventData) => any; onTap?: (arg: import("@nativescript/core").TapGestureEventData) => any; onTopChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onTouch?: (arg: import("@nativescript/core").TouchGestureEventData) => any; onUnloaded?: (args: import("@nativescript/core").EventData) => void; clipToBounds?: string | boolean; isPassThroughParentEnabled?: string | boolean; onClipToBoundsChange?: (args: import("@nativescript/core").PropertyChangeData) => void; onIsPassThroughParentEnabledChange?: (args: import("@nativescript/core").PropertyChangeData) => void; padding?: string | number | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; paddingBottom?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; paddingLeft?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; paddingRight?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; paddingTop?: string | number | "auto" | CoreTypes.LengthDipUnit | CoreTypes.LengthPxUnit; columns?: string; rows?: string; }, string | React.JSXElementConstructor<any>>; } export declare const Pager: React.ForwardRefExoticComponent<{ items: ItemsSource | any[]; /** User may specify cellFactory for single-template or cellFactories for multi-template. */ cellFactory?: CellFactory; cellFactories?: Map<string, { placeholderItem: any; cellFactory: CellFactory; }>; onSelectedIndexChange?(args: any): void; onSelectedIndexChanged?(args: any): void; scroll?(args: any): void; swipe?(args: any): void; swipeStart?(args: any): void; swipeOver?(args: any): void; swipeEnd?(args: any): void; onLoadMoreItems?: (args: any) => void; _debug?: { logLevel: "debug" | "info"; onCellFirstLoad?: (container: CellViewContainer) => void; onCellRecycle?: (container: CellViewContainer) => void; }; } & Omit<PagerAttributes, "onItemLoading"> & React.RefAttributes<NSVElement<NativeScriptPager>>>; export declare const PagerItem: React.ForwardRefExoticComponent<GridLayoutAttributes & { forwardedRef?: React.RefObject<NSVElement<NativeScriptPagerItem>>; } & React.RefAttributes<NSVElement<NativeScriptPagerItem>>>; declare global { namespace JSX { interface IntrinsicElements { pager: NativeScriptProps<PagerAttributes, NativeScriptPager>; pagerItem: NativeScriptProps<PagerItemAttributes, NativeScriptPagerItem>; } } } export {};