react-native-navigation-drilldown
Version:
Drilldown screens to use with react-navigation
90 lines (89 loc) • 3.81 kB
TypeScript
/// <reference types="react" />
import { ImageBackgroundProperties, ImageURISource, StyleProp, TextProperties, TextStyle, ViewStyle } from 'react-native';
import { NavigationAction } from 'react-navigation';
export declare const DEFAULT_ROUTE_NAME = "DrilldownRoute";
export declare type IconSource = string | ImageURISource;
export interface DrilldownItemProps {
id: string | number;
icon?: IconSource;
name: string;
children?: DrilldownItemProps[];
}
export declare type DrilldownSelection = DrilldownItemProps | DrilldownItemProps[] | null;
export declare type ItemMapper = (item: {
name: string;
icon?: IconSource;
}) => {
name: string;
icon?: IconSource;
};
export interface DrilldownBaseProps {
options: DrilldownItemProps;
value?: DrilldownSelection;
multi?: boolean;
displayCategoryToggles?: boolean;
onChange?: (items: DrilldownSelection) => void;
routeName?: string;
rootDrilldownScreenKey?: string;
itemView?: React.ComponentType<ItemViewProps>;
itemViewProps?: ItemStyleProps;
navigate: (options: {
routeName: string;
params?: any;
action?: NavigationAction;
key?: string;
}) => boolean;
goBack: (routeKey?: (string | null)) => boolean;
}
export interface HandleProps {
contentStyle?: StyleProp<ViewStyle>;
contentProps?: ImageBackgroundProperties;
renderContent?: () => (React.ReactElement<any> | null);
leftIcon?: ImageURISource | string;
leftIconStyle?: StyleProp<ViewStyle>;
leftIconProps?: ImageBackgroundProperties;
renderLeftIcon?: (icon?: ImageURISource | string) => (React.ReactElement<any> | null);
title?: string;
titleStyle?: StyleProp<TextStyle>;
titleProps?: Partial<TextProperties>;
renderTitle?: (title?: string) => (React.ReactElement<any> | null);
rightIcon?: ImageURISource | string;
rightIconStyle?: StyleProp<ViewStyle>;
rightIconProps?: ImageBackgroundProperties;
renderRightIcon?: (icon?: ImageURISource | string) => (React.ReactElement<any> | null);
disabled?: boolean;
onPress?: () => void;
}
export interface ItemStyleProps {
contentStyle?: StyleProp<ViewStyle>;
contentProps?: ImageBackgroundProperties;
renderContent?: (item: DrilldownItemProps, isLeaf: boolean, selfSelected: boolean, leafSelected: boolean) => (React.ReactElement<any> | null);
leftIconStyle?: StyleProp<ViewStyle>;
leftIconProps?: ImageBackgroundProperties;
renderLeftIcon?: (item: DrilldownItemProps, isLeaf: boolean, selfSelected: boolean, leafSelected: boolean) => (React.ReactElement<any> | null);
titleStyle?: StyleProp<TextStyle>;
titleProps?: Partial<TextProperties>;
renderTitle?: (item: DrilldownItemProps, isLeaf: boolean, selfSelected: boolean, leafSelected: boolean) => (React.ReactElement<any> | null);
rightIconStyle?: StyleProp<ViewStyle>;
rightIconProps?: ImageBackgroundProperties;
renderRightIcon?: (item: DrilldownItemProps, isLeaf: boolean, selfSelected: boolean, leafSelected: boolean) => (React.ReactElement<any> | null);
}
export interface ItemViewProps extends ItemStyleProps {
item: DrilldownItemProps;
isLeaf: boolean;
selfSelected: boolean;
subtreeSelected: boolean;
onPress: (item: DrilldownItemProps) => void;
}
export interface DrilldownListProps extends DrilldownBaseProps {
rootOptions: DrilldownItemProps;
}
export interface DrilldownProps extends DrilldownBaseProps {
label: string | ((selection?: DrilldownSelection) => string);
icon?: IconSource | ((selection?: DrilldownSelection) => IconSource);
name: string;
handle?: React.ComponentType<HandleProps>;
handleProps?: HandleProps | ((selected?: DrilldownSelection) => HandleProps);
style?: StyleProp<ViewStyle>;
disabled?: boolean;
}