1 | function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
2 |
|
3 | import * as React from 'react';
|
4 | import { StyleSheet, View, I18nManager } from 'react-native';
|
5 | import color from 'color';
|
6 | import IconButton from '../IconButton';
|
7 | import Text from '../Typography/Text';
|
8 | import { withTheme, useTheme } from '../../core/theming';
|
9 | import MaterialCommunityIcon from '../MaterialCommunityIcon';
|
10 | import Menu from '../Menu/Menu';
|
11 | import Button from '../Button';
|
12 |
|
13 | const PaginationControls = _ref => {
|
14 | let {
|
15 | page,
|
16 | numberOfPages,
|
17 | onPageChange,
|
18 | showFastPaginationControls
|
19 | } = _ref;
|
20 | const {
|
21 | colors
|
22 | } = useTheme();
|
23 | return React.createElement(React.Fragment, null, showFastPaginationControls ? React.createElement(IconButton, {
|
24 | icon: _ref2 => {
|
25 | let {
|
26 | size,
|
27 | color
|
28 | } = _ref2;
|
29 | return React.createElement(MaterialCommunityIcon, {
|
30 | name: "page-first",
|
31 | color: color,
|
32 | size: size,
|
33 | direction: I18nManager.isRTL ? 'rtl' : 'ltr'
|
34 | });
|
35 | },
|
36 | color: colors.text,
|
37 | disabled: page === 0,
|
38 | onPress: () => onPageChange(0),
|
39 | accessibilityLabel: "page-first"
|
40 | }) : null, React.createElement(IconButton, {
|
41 | icon: _ref3 => {
|
42 | let {
|
43 | size,
|
44 | color
|
45 | } = _ref3;
|
46 | return React.createElement(MaterialCommunityIcon, {
|
47 | name: "chevron-left",
|
48 | color: color,
|
49 | size: size,
|
50 | direction: I18nManager.isRTL ? 'rtl' : 'ltr'
|
51 | });
|
52 | },
|
53 | color: colors.text,
|
54 | disabled: page === 0,
|
55 | onPress: () => onPageChange(page - 1),
|
56 | accessibilityLabel: "chevron-left"
|
57 | }), React.createElement(IconButton, {
|
58 | icon: _ref4 => {
|
59 | let {
|
60 | size,
|
61 | color
|
62 | } = _ref4;
|
63 | return React.createElement(MaterialCommunityIcon, {
|
64 | name: "chevron-right",
|
65 | color: color,
|
66 | size: size,
|
67 | direction: I18nManager.isRTL ? 'rtl' : 'ltr'
|
68 | });
|
69 | },
|
70 | color: colors.text,
|
71 | disabled: numberOfPages === 0 || page === numberOfPages - 1,
|
72 | onPress: () => onPageChange(page + 1),
|
73 | accessibilityLabel: "chevron-right"
|
74 | }), showFastPaginationControls ? React.createElement(IconButton, {
|
75 | icon: _ref5 => {
|
76 | let {
|
77 | size,
|
78 | color
|
79 | } = _ref5;
|
80 | return React.createElement(MaterialCommunityIcon, {
|
81 | name: "page-last",
|
82 | color: color,
|
83 | size: size,
|
84 | direction: I18nManager.isRTL ? 'rtl' : 'ltr'
|
85 | });
|
86 | },
|
87 | color: colors.text,
|
88 | disabled: numberOfPages === 0 || page === numberOfPages - 1,
|
89 | onPress: () => onPageChange(numberOfPages - 1),
|
90 | accessibilityLabel: "page-last"
|
91 | }) : null);
|
92 | };
|
93 |
|
94 | const PaginationDropdown = _ref6 => {
|
95 | let {
|
96 | numberOfItemsPerPageList,
|
97 | numberOfItemsPerPage,
|
98 | onItemsPerPageChange
|
99 | } = _ref6;
|
100 | const {
|
101 | colors
|
102 | } = useTheme();
|
103 | const [showSelect, toggleSelect] = React.useState(false);
|
104 | return React.createElement(Menu, {
|
105 | visible: showSelect,
|
106 | onDismiss: () => toggleSelect(!showSelect),
|
107 | anchor: React.createElement(Button, {
|
108 | mode: "outlined",
|
109 | onPress: () => toggleSelect(true),
|
110 | style: styles.button,
|
111 | icon: "menu-down",
|
112 | contentStyle: styles.contentStyle
|
113 | }, `${numberOfItemsPerPage}`)
|
114 | }, numberOfItemsPerPageList === null || numberOfItemsPerPageList === void 0 ? void 0 : numberOfItemsPerPageList.map(option => React.createElement(Menu.Item, {
|
115 | key: option,
|
116 | titleStyle: option === numberOfItemsPerPage && {
|
117 | color: colors.primary
|
118 | },
|
119 | onPress: () => {
|
120 | onItemsPerPageChange === null || onItemsPerPageChange === void 0 ? void 0 : onItemsPerPageChange(option);
|
121 | toggleSelect(false);
|
122 | },
|
123 | title: option
|
124 | })));
|
125 | };
|
126 |
|
127 |
|
128 |
|
129 |
|
130 |
|
131 |
|
132 |
|
133 |
|
134 |
|
135 |
|
136 |
|
137 |
|
138 |
|
139 |
|
140 |
|
141 |
|
142 |
|
143 |
|
144 |
|
145 |
|
146 |
|
147 |
|
148 |
|
149 |
|
150 |
|
151 |
|
152 |
|
153 |
|
154 |
|
155 |
|
156 |
|
157 |
|
158 |
|
159 |
|
160 |
|
161 |
|
162 |
|
163 |
|
164 |
|
165 |
|
166 |
|
167 |
|
168 |
|
169 |
|
170 |
|
171 |
|
172 |
|
173 |
|
174 |
|
175 |
|
176 |
|
177 |
|
178 |
|
179 |
|
180 |
|
181 |
|
182 |
|
183 |
|
184 |
|
185 |
|
186 |
|
187 |
|
188 |
|
189 |
|
190 | const DataTablePagination = _ref7 => {
|
191 | let {
|
192 | label,
|
193 | accessibilityLabel,
|
194 | page,
|
195 | numberOfPages,
|
196 | onPageChange,
|
197 | style,
|
198 | theme,
|
199 | showFastPaginationControls = false,
|
200 | numberOfItemsPerPageList,
|
201 | numberOfItemsPerPage,
|
202 | onItemsPerPageChange,
|
203 | selectPageDropdownLabel,
|
204 | selectPageDropdownAccessibilityLabel,
|
205 | ...rest
|
206 | } = _ref7;
|
207 | const labelColor = color(theme.colors.text).alpha(0.6).rgb().string();
|
208 | return React.createElement(View, _extends({}, rest, {
|
209 | style: [styles.container, style],
|
210 | accessibilityLabel: "pagination-container"
|
211 | }), numberOfItemsPerPageList && numberOfItemsPerPage && onItemsPerPageChange && React.createElement(View, {
|
212 | accessibilityLabel: "Options Select",
|
213 | style: styles.optionsContainer
|
214 | }, React.createElement(Text, {
|
215 | style: [styles.label, {
|
216 | color: labelColor
|
217 | }],
|
218 | numberOfLines: 3,
|
219 | accessibilityLabel: selectPageDropdownAccessibilityLabel || 'selectPageDropdownLabel'
|
220 | }, selectPageDropdownLabel), React.createElement(PaginationDropdown, {
|
221 | numberOfItemsPerPageList: numberOfItemsPerPageList,
|
222 | numberOfItemsPerPage: numberOfItemsPerPage,
|
223 | onItemsPerPageChange: onItemsPerPageChange
|
224 | })), React.createElement(Text, {
|
225 | style: [styles.label, {
|
226 | color: labelColor
|
227 | }],
|
228 | numberOfLines: 3,
|
229 | accessibilityLabel: accessibilityLabel || 'label'
|
230 | }, label), React.createElement(View, {
|
231 | style: styles.iconsContainer
|
232 | }, React.createElement(PaginationControls, {
|
233 | showFastPaginationControls: showFastPaginationControls,
|
234 | onPageChange: onPageChange,
|
235 | page: page,
|
236 | numberOfPages: numberOfPages
|
237 | })));
|
238 | };
|
239 |
|
240 | DataTablePagination.displayName = 'DataTable.Pagination';
|
241 | const styles = StyleSheet.create({
|
242 | container: {
|
243 | justifyContent: 'flex-end',
|
244 | flexDirection: 'row',
|
245 | alignItems: 'center',
|
246 | paddingLeft: 16,
|
247 | flexWrap: 'wrap'
|
248 | },
|
249 | optionsContainer: {
|
250 | flexDirection: 'row',
|
251 | alignItems: 'center',
|
252 | marginVertical: 6
|
253 | },
|
254 | label: {
|
255 | fontSize: 12,
|
256 | marginRight: 16
|
257 | },
|
258 | button: {
|
259 | textAlign: 'center',
|
260 | marginRight: 16
|
261 | },
|
262 | iconsContainer: {
|
263 | flexDirection: 'row'
|
264 | },
|
265 | contentStyle: {
|
266 | flexDirection: 'row-reverse'
|
267 | }
|
268 | });
|
269 | export default withTheme(DataTablePagination);
|
270 |
|
271 | export { DataTablePagination };
|
272 |
|
\ | No newline at end of file |