@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
TypeScript
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 {};