@prosperitainova/dumbo-react-native/lib/module/components/Pagination/index.js

Dumbo for React Native Library

"use strict";

import React from 'react';
import { Pressable, ScrollView, StyleSheet } from 'react-native';
import { getColor } from '../../styles/colors';
import { createIcon, pressableFeedbackStyle, styleReferenceBreaker } from '../../helpers';
import { defaultText } from '../../constants/defaultText';
import CircleIcon from '@carbon/icons/es/circle--solid/20';

/** Props for Pagination component */
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * Pagination component for rendering a pagination menu
 *
 * {@link https://github.com/carbon-design-system/carbon-react-native/blob/main/example/src/Views/Pagination.tsx | Example code}
 */

export class Pagination extends React.Component {
  get styles() {
    return StyleSheet.create({
      wrapper: {
        width: '100%',
        flexDirection: 'column'
      },
      wrapperContent: {
        marginRight: 'auto',
        marginLeft: 'auto'
      },
      item: {
        padding: 8,
        paddingLeft: 4,
        paddingRight: 4
      }
    });
  }
  changePage = page => {
    const {
      onPageChange
    } = this.props;
    if (typeof onPageChange === 'function') {
      onPageChange(page);
    }
  };
  getPageItem(index) {
    const {
      currentPage
    } = this.props;
    const page = index + 1;
    const getStateStyle = state => {
      return state.pressed ? {
        backgroundColor: getColor('layerActive01')
      } : undefined;
    };
    return /*#__PURE__*/_jsx(Pressable, {
      style: state => pressableFeedbackStyle(state, this.styles.item, getStateStyle),
      onPress: () => this.changePage(page),
      accessibilityLabel: String(page),
      children: createIcon(CircleIcon, 8, 8, currentPage === page ? getColor('buttonTertiary') : getColor('iconOnColorDisabled'))
    }, index);
  }
  render() {
    const {
      componentProps,
      style,
      paginationText,
      totalPages
    } = this.props;
    const elements = [];
    for (let i = 0; i < totalPages; i++) {
      elements.push(this.getPageItem(i));
    }
    return /*#__PURE__*/_jsx(ScrollView, {
      bounces: false,
      style: styleReferenceBreaker(this.styles.wrapper, style),
      contentContainerStyle: this.styles.wrapperContent,
      ...(componentProps || {}),
      accessibilityLabel: paginationText || defaultText.pagination,
      horizontal: true,
      children: elements.map(item => item)
    });
  }
}
//# sourceMappingURL=index.js.map