1 | import * as React from 'react';
|
2 | import { StyleProp, View, ViewStyle } from 'react-native';
|
3 | declare type Props = React.ComponentPropsWithRef<typeof View> & PaginationControlsProps & PaginationDropdownProps & {
|
4 | /**
|
5 | * Label text to display which indicates current pagination.
|
6 | */
|
7 | label?: React.ReactNode;
|
8 | /**
|
9 | * AccessibilityLabel for `label`.
|
10 | */
|
11 | accessibilityLabel?: string;
|
12 | /**
|
13 | * Label text for select page dropdown to display.
|
14 | */
|
15 | selectPageDropdownLabel?: React.ReactNode;
|
16 | /**
|
17 | * AccessibilityLabel for `selectPageDropdownLabel`.
|
18 | */
|
19 | selectPageDropdownAccessibilityLabel?: string;
|
20 | style?: StyleProp<ViewStyle>;
|
21 | /**
|
22 | * @optional
|
23 | */
|
24 | theme: ReactNativePaper.Theme;
|
25 | };
|
26 | declare type PaginationDropdownProps = {
|
27 | /**
|
28 | * The current number of rows per page.
|
29 | */
|
30 | numberOfItemsPerPage?: number;
|
31 | /**
|
32 | * Options for a number of rows per page to choose from.
|
33 | */
|
34 | numberOfItemsPerPageList?: Array<number>;
|
35 | /**
|
36 | * The function to set the number of rows per page.
|
37 | */
|
38 | onItemsPerPageChange?: (numberOfItemsPerPage: number) => void;
|
39 | };
|
40 | declare type PaginationControlsProps = {
|
41 | /**
|
42 | * The currently visible page (starting with 0).
|
43 | */
|
44 | page: number;
|
45 | /**
|
46 | * The total number of pages.
|
47 | */
|
48 | numberOfPages: number;
|
49 | /**
|
50 | * Function to execute on page change.
|
51 | */
|
52 | onPageChange: (page: number) => void;
|
53 | /**
|
54 | * Whether to show fast forward and fast rewind buttons in pagination. False by default.
|
55 | */
|
56 | showFastPaginationControls?: boolean;
|
57 | };
|
58 | /**
|
59 | * A component to show pagination for data table.
|
60 | *
|
61 | * <div class="screenshots">
|
62 | * <figure>
|
63 | * <img class="medium" src="screenshots/data-table-pagination.png" />
|
64 | * </figure>
|
65 | * </div>
|
66 | *
|
67 | *
|
68 | * ## Usage
|
69 | * ```js
|
70 | * import * as React from 'react';
|
71 | * import { DataTable } from 'react-native-paper';
|
72 | *
|
73 | * const numberOfItemsPerPageList = [2, 3, 4];
|
74 | *
|
75 | * const items = [
|
76 | * {
|
77 | * key: 1,
|
78 | * name: 'Page 1',
|
79 | * },
|
80 | * {
|
81 | * key: 2,
|
82 | * name: 'Page 2',
|
83 | * },
|
84 | * {
|
85 | * key: 3,
|
86 | * name: 'Page 3',
|
87 | * },
|
88 | * ];
|
89 | *
|
90 | * const MyComponent = () => {
|
91 | * const [page, setPage] = React.useState(0);
|
92 | * const [numberOfItemsPerPage, onItemsPerPageChange] = React.useState(numberOfItemsPerPageList[0]);
|
93 | * const from = page * numberOfItemsPerPage;
|
94 | * const to = Math.min((page + 1) * numberOfItemsPerPage, items.length);
|
95 | *
|
96 | * React.useEffect(() => {
|
97 | * setPage(0);
|
98 | * }, [numberOfItemsPerPage]);
|
99 | *
|
100 | * return (
|
101 | * <DataTable>
|
102 | * <DataTable.Pagination
|
103 | * page={page}
|
104 | * numberOfPages={Math.ceil(items.length / numberOfItemsPerPage)}
|
105 | * onPageChange={page => setPage(page)}
|
106 | * label={`${from + 1}-${to} of ${items.length}`}
|
107 | * showFastPaginationControls
|
108 | * numberOfItemsPerPageList={numberOfItemsPerPageList}
|
109 | * numberOfItemsPerPage={numberOfItemsPerPage}
|
110 | * onItemsPerPageChange={onItemsPerPageChange}
|
111 | * selectPageDropdownLabel={'Rows per page'}
|
112 | * />
|
113 | * </DataTable>
|
114 | * );
|
115 | * };
|
116 | *
|
117 | * export default MyComponent;
|
118 | * ```
|
119 | */
|
120 | declare const DataTablePagination: {
|
121 | ({ label, accessibilityLabel, page, numberOfPages, onPageChange, style, theme, showFastPaginationControls, numberOfItemsPerPageList, numberOfItemsPerPage, onItemsPerPageChange, selectPageDropdownLabel, selectPageDropdownAccessibilityLabel, ...rest }: Props): JSX.Element;
|
122 | displayName: string;
|
123 | };
|
124 | declare const _default: React.ComponentType<Pick<import("react-native").ViewProps & React.RefAttributes<View> & PaginationControlsProps & PaginationDropdownProps & {
|
125 | /**
|
126 | * Label text to display which indicates current pagination.
|
127 | */
|
128 | label?: React.ReactNode;
|
129 | /**
|
130 | * AccessibilityLabel for `label`.
|
131 | */
|
132 | accessibilityLabel?: string | undefined;
|
133 | /**
|
134 | * Label text for select page dropdown to display.
|
135 | */
|
136 | selectPageDropdownLabel?: React.ReactNode;
|
137 | /**
|
138 | * AccessibilityLabel for `selectPageDropdownLabel`.
|
139 | */
|
140 | selectPageDropdownAccessibilityLabel?: string | undefined;
|
141 | style?: StyleProp<ViewStyle>;
|
142 | /**
|
143 | * @optional
|
144 | */
|
145 | theme: ReactNativePaper.Theme;
|
146 | }, "label" | keyof import("react-native").ViewProps | keyof React.RefAttributes<View> | "selectPageDropdownLabel" | "selectPageDropdownAccessibilityLabel" | keyof PaginationControlsProps | keyof PaginationDropdownProps> & {
|
147 | theme?: import("@callstack/react-theme-provider").$DeepPartial<ReactNativePaper.Theme> | undefined;
|
148 | }> & import("@callstack/react-theme-provider/typings/hoist-non-react-statics").NonReactStatics<React.ComponentType<import("react-native").ViewProps & React.RefAttributes<View> & PaginationControlsProps & PaginationDropdownProps & {
|
149 | /**
|
150 | * Label text to display which indicates current pagination.
|
151 | */
|
152 | label?: React.ReactNode;
|
153 | /**
|
154 | * AccessibilityLabel for `label`.
|
155 | */
|
156 | accessibilityLabel?: string | undefined;
|
157 | /**
|
158 | * Label text for select page dropdown to display.
|
159 | */
|
160 | selectPageDropdownLabel?: React.ReactNode;
|
161 | /**
|
162 | * AccessibilityLabel for `selectPageDropdownLabel`.
|
163 | */
|
164 | selectPageDropdownAccessibilityLabel?: string | undefined;
|
165 | style?: StyleProp<ViewStyle>;
|
166 | /**
|
167 | * @optional
|
168 | */
|
169 | theme: ReactNativePaper.Theme;
|
170 | }> & {
|
171 | ({ label, accessibilityLabel, page, numberOfPages, onPageChange, style, theme, showFastPaginationControls, numberOfItemsPerPageList, numberOfItemsPerPage, onItemsPerPageChange, selectPageDropdownLabel, selectPageDropdownAccessibilityLabel, ...rest }: Props): JSX.Element;
|
172 | displayName: string;
|
173 | }, {}>;
|
174 | export default _default;
|
175 | export { DataTablePagination };
|