| 1 | {"version":3,"sources":["DataTablePagination.tsx"],"names":["React","StyleSheet","View","I18nManager","color","IconButton","Text","withTheme","useTheme","MaterialCommunityIcon","Menu","Button","PaginationControls","page","numberOfPages","onPageChange","showFastPaginationControls","colors","size","isRTL","text","PaginationDropdown","numberOfItemsPerPageList","numberOfItemsPerPage","onItemsPerPageChange","showSelect","toggleSelect","useState","styles","button","contentStyle","map","option","primary","DataTablePagination","label","accessibilityLabel","style","theme","selectPageDropdownLabel","selectPageDropdownAccessibilityLabel","rest","labelColor","alpha","rgb","string","container","optionsContainer","iconsContainer","displayName","create","justifyContent","flexDirection","alignItems","paddingLeft","flexWrap","marginVertical","fontSize","marginRight","textAlign"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport {\n StyleSheet,\n StyleProp,\n View,\n ViewStyle,\n I18nManager,\n} from 'react-native';\nimport color from 'color';\nimport IconButton from '../IconButton';\nimport Text from '../Typography/Text';\nimport { withTheme, useTheme } from '../../core/theming';\nimport MaterialCommunityIcon from '../MaterialCommunityIcon';\nimport Menu from '../Menu/Menu';\nimport Button from '../Button';\n\ntype Props = React.ComponentPropsWithRef<typeof View> &\n PaginationControlsProps &\n PaginationDropdownProps & {\n /**\n * Label text to display which indicates current pagination.\n */\n label?: React.ReactNode;\n /**\n * AccessibilityLabel for `label`.\n */\n accessibilityLabel?: string;\n /**\n * Label text for select page dropdown to display.\n */\n selectPageDropdownLabel?: React.ReactNode;\n /**\n * AccessibilityLabel for `selectPageDropdownLabel`.\n */\n selectPageDropdownAccessibilityLabel?: string;\n style?: StyleProp<ViewStyle>;\n /**\n * @optional\n */\n theme: ReactNativePaper.Theme;\n };\n\ntype PaginationDropdownProps = {\n /**\n * The current number of rows per page.\n */\n numberOfItemsPerPage?: number;\n /**\n * Options for a number of rows per page to choose from.\n */\n numberOfItemsPerPageList?: Array<number>;\n /**\n * The function to set the number of rows per page.\n */\n onItemsPerPageChange?: (numberOfItemsPerPage: number) => void;\n};\n\ntype PaginationControlsProps = {\n /**\n * The currently visible page (starting with 0).\n */\n page: number;\n /**\n * The total number of pages.\n */\n numberOfPages: number;\n /**\n * Function to execute on page change.\n */\n onPageChange: (page: number) => void;\n /**\n * Whether to show fast forward and fast rewind buttons in pagination. False by default.\n */\n showFastPaginationControls?: boolean;\n};\n\nconst PaginationControls = ({\n page,\n numberOfPages,\n onPageChange,\n showFastPaginationControls,\n}: PaginationControlsProps) => {\n const { colors } = useTheme();\n return (\n <>\n {showFastPaginationControls ? (\n <IconButton\n icon={({ size, color }) => (\n <MaterialCommunityIcon\n name=\"page-first\"\n color={color}\n size={size}\n direction={I18nManager.isRTL ? 'rtl' : 'ltr'}\n />\n )}\n color={colors.text}\n disabled={page === 0}\n onPress={() => onPageChange(0)}\n accessibilityLabel=\"page-first\"\n />\n ) : null}\n <IconButton\n icon={({ size, color }) => (\n <MaterialCommunityIcon\n name=\"chevron-left\"\n color={color}\n size={size}\n direction={I18nManager.isRTL ? 'rtl' : 'ltr'}\n />\n )}\n color={colors.text}\n disabled={page === 0}\n onPress={() => onPageChange(page - 1)}\n accessibilityLabel=\"chevron-left\"\n />\n <IconButton\n icon={({ size, color }) => (\n <MaterialCommunityIcon\n name=\"chevron-right\"\n color={color}\n size={size}\n direction={I18nManager.isRTL ? 'rtl' : 'ltr'}\n />\n )}\n color={colors.text}\n disabled={numberOfPages === 0 || page === numberOfPages - 1}\n onPress={() => onPageChange(page + 1)}\n accessibilityLabel=\"chevron-right\"\n />\n {showFastPaginationControls ? (\n <IconButton\n icon={({ size, color }) => (\n <MaterialCommunityIcon\n name=\"page-last\"\n color={color}\n size={size}\n direction={I18nManager.isRTL ? 'rtl' : 'ltr'}\n />\n )}\n color={colors.text}\n disabled={numberOfPages === 0 || page === numberOfPages - 1}\n onPress={() => onPageChange(numberOfPages - 1)}\n accessibilityLabel=\"page-last\"\n />\n ) : null}\n </>\n );\n};\n\nconst PaginationDropdown = ({\n numberOfItemsPerPageList,\n numberOfItemsPerPage,\n onItemsPerPageChange,\n}: PaginationDropdownProps) => {\n const { colors } = useTheme();\n const [showSelect, toggleSelect] = React.useState<boolean>(false);\n\n return (\n <Menu\n visible={showSelect}\n onDismiss={() => toggleSelect(!showSelect)}\n anchor={\n <Button\n mode=\"outlined\"\n onPress={() => toggleSelect(true)}\n style={styles.button}\n icon=\"menu-down\"\n contentStyle={styles.contentStyle}\n >\n {`${numberOfItemsPerPage}`}\n </Button>\n }\n >\n {numberOfItemsPerPageList?.map((option) => (\n <Menu.Item\n key={option}\n titleStyle={\n option === numberOfItemsPerPage && {\n color: colors.primary,\n }\n }\n onPress={() => {\n onItemsPerPageChange?.(option);\n toggleSelect(false);\n }}\n title={option}\n />\n ))}\n </Menu>\n );\n};\n\n/**\n * A component to show pagination for data table.\n *\n * <div class=\"screenshots\">\n * <figure>\n * <img class=\"medium\" src=\"screenshots/data-table-pagination.png\" />\n * </figure>\n * </div>\n *\n *\n * ## Usage\n * ```js\n * import * as React from 'react';\n * import { DataTable } from 'react-native-paper';\n *\n * const numberOfItemsPerPageList = [2, 3, 4];\n *\n * const items = [\n * {\n * key: 1,\n * name: 'Page 1',\n * },\n * {\n * key: 2,\n * name: 'Page 2',\n * },\n * {\n * key: 3,\n * name: 'Page 3',\n * },\n * ];\n *\n * const MyComponent = () => {\n * const [page, setPage] = React.useState(0);\n * const [numberOfItemsPerPage, onItemsPerPageChange] = React.useState(numberOfItemsPerPageList[0]);\n * const from = page * numberOfItemsPerPage;\n * const to = Math.min((page + 1) * numberOfItemsPerPage, items.length);\n *\n * React.useEffect(() => {\n * setPage(0);\n * }, [numberOfItemsPerPage]);\n *\n * return (\n * <DataTable>\n * <DataTable.Pagination\n * page={page}\n * numberOfPages={Math.ceil(items.length / numberOfItemsPerPage)}\n * onPageChange={page => setPage(page)}\n * label={`${from + 1}-${to} of ${items.length}`}\n * showFastPaginationControls\n * numberOfItemsPerPageList={numberOfItemsPerPageList}\n * numberOfItemsPerPage={numberOfItemsPerPage}\n * onItemsPerPageChange={onItemsPerPageChange}\n * selectPageDropdownLabel={'Rows per page'}\n * />\n * </DataTable>\n * );\n * };\n *\n * export default MyComponent;\n * ```\n */\nconst DataTablePagination = ({\n label,\n accessibilityLabel,\n page,\n numberOfPages,\n onPageChange,\n style,\n theme,\n showFastPaginationControls = false,\n numberOfItemsPerPageList,\n numberOfItemsPerPage,\n onItemsPerPageChange,\n selectPageDropdownLabel,\n selectPageDropdownAccessibilityLabel,\n ...rest\n}: Props) => {\n const labelColor = color(theme.colors.text).alpha(0.6).rgb().string();\n\n return (\n <View\n {...rest}\n style={[styles.container, style]}\n accessibilityLabel=\"pagination-container\"\n >\n {numberOfItemsPerPageList &&\n numberOfItemsPerPage &&\n onItemsPerPageChange && (\n <View\n accessibilityLabel=\"Options Select\"\n style={styles.optionsContainer}\n >\n <Text\n style={[styles.label, { color: labelColor }]}\n numberOfLines={3}\n accessibilityLabel={\n selectPageDropdownAccessibilityLabel ||\n 'selectPageDropdownLabel'\n }\n >\n {selectPageDropdownLabel}\n </Text>\n <PaginationDropdown\n numberOfItemsPerPageList={numberOfItemsPerPageList}\n numberOfItemsPerPage={numberOfItemsPerPage}\n onItemsPerPageChange={onItemsPerPageChange}\n />\n </View>\n )}\n <Text\n style={[styles.label, { color: labelColor }]}\n numberOfLines={3}\n accessibilityLabel={accessibilityLabel || 'label'}\n >\n {label}\n </Text>\n <View style={styles.iconsContainer}>\n <PaginationControls\n showFastPaginationControls={showFastPaginationControls}\n onPageChange={onPageChange}\n page={page}\n numberOfPages={numberOfPages}\n />\n </View>\n </View>\n );\n};\n\nDataTablePagination.displayName = 'DataTable.Pagination';\n\nconst styles = StyleSheet.create({\n container: {\n justifyContent: 'flex-end',\n flexDirection: 'row',\n alignItems: 'center',\n paddingLeft: 16,\n flexWrap: 'wrap',\n },\n optionsContainer: {\n flexDirection: 'row',\n alignItems: 'center',\n marginVertical: 6,\n },\n label: {\n fontSize: 12,\n marginRight: 16,\n },\n button: {\n textAlign: 'center',\n marginRight: 16,\n },\n iconsContainer: {\n flexDirection: 'row',\n },\n contentStyle: {\n flexDirection: 'row-reverse',\n },\n});\n\nexport default withTheme(DataTablePagination);\n\n// @component-docs ignore-next-line\nexport { DataTablePagination };\n"]} |