<commit_before>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Box from '../box';
import { LinkButton } from '../button';
import { TextSmall } from '../typography';
import { IconChevronLeftMediumOutline, IconChevronRightMediumOutline } from '@teamleader/ui-icons';
import cx from 'classnames';
import omit from 'lodash.omit';
import theme from './theme.css';

class Pagination extends PureComponent {
  static propTypes = {
    inverse: PropTypes.bool,
    nextPageText: PropTypes.string,
    numItems: PropTypes.number.isRequired,
    numItemsPerPage: PropTypes.number,
    maxNumPagesVisible: PropTypes.number,
    currentPage: PropTypes.number.isRequired,
    onPageChange: PropTypes.func.isRequired,
    prevPageText: PropTypes.string,
    className: PropTypes.string,
  };

  static defaultProps = {
    currentPage: 1,
    inverse: false,
    numItemsPerPage: 10,
    maxNumPagesVisible: 7,
  };

  constructor() {
    super(...arguments);

    this.handleChange = ::this.handleChange;
  }

  getNumPages() {
    return Math.ceil(this.props.numItems / this.props.numItemsPerPage);
  }

  handleChange(page) {
    this.props.onPageChange(page);
  }

  render() {
    const { className, currentPage, inverse, maxNumPagesVisible, nextPageText, prevPageText, ...others } = this.props;
    const numPages = this.getNumPages();

    if (numPages < 2) {
      return null;
    }

    const classNames = cx(theme['pagination'], { [theme['inverse']]: inverse }, className);
    const iterator = [currentPage];
    const rest = omit(others, ['numItems', 'numItemsPerPage']);

    let counter = 0;

    while (iterator.length < maxNumPagesVisible && iterator.length < numPages) {
      if (counter % 2 === 0 && iterator[0] !== 1) {
        iterator.unshift(iterator[0] - 1);
      } else if (counter % 2 === 1 && iterator[iterator.length - 1] !== numPages) {
        iterator.push(iterator[iterator.length - 1] + 1);
      }

      counter++;
    }

    // make sure the first and the last item are the first and the last page
    iterator[0] = 1;
    iterator[iterator.length - 1] = numPages;

    // should we replace the 2nd and 2nd last by ellipsis?
    if (iterator.length > 1 && iterator[1] !== 2) {
      iterator[1] = 'ellipsis-left';
    }
    if (iterator.length > 1 && iterator[iterator.length - 2] !== numPages - 1) {
      iterator[iterator.length - 2] = 'ellipsis-right';
    }

    return (
      <Box data-teamleader-ui="pagination" className={classNames} element="nav" {...rest}>
        <ul className={theme['list']}>
          {currentPage > 1 && (
            <li className={theme['list-item']}>
              <LinkButton
                icon={<IconChevronLeftMediumOutline />}
                inverse={inverse}
                label={prevPageText}
                onClick={() => this.handleChange(currentPage - 1)}
              />
            </li>
          )}
          {iterator.map(page => {
            return (
              <li key={page} className={theme['list-item']}>
                {('' + page).indexOf('ellipsis') === -1 ? (<commit_msg>Moved logic to the render method so we don't need to omit props<commit_after>import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import Box from '../box';
import { LinkButton } from '../button';
import { TextSmall } from '../typography';
import { IconChevronLeftMediumOutline, IconChevronRightMediumOutline } from '@teamleader/ui-icons';
import cx from 'classnames';
import theme from './theme.css';

class Pagination extends PureComponent {
  static propTypes = {
    inverse: PropTypes.bool,
    nextPageText: PropTypes.string,
    numItems: PropTypes.number.isRequired,
    numItemsPerPage: PropTypes.number,
    maxNumPagesVisible: PropTypes.number,
    currentPage: PropTypes.number.isRequired,
    onPageChange: PropTypes.func.isRequired,
    prevPageText: PropTypes.string,
    className: PropTypes.string,
  };

  static defaultProps = {
    currentPage: 1,
    inverse: false,
    numItemsPerPage: 10,
    maxNumPagesVisible: 7,
  };

  constructor() {
    super(...arguments);

    this.handleChange = ::this.handleChange;
  }

  handleChange(page) {
    this.props.onPageChange(page);
  }

  render() {
    const {
      className,
      currentPage,
      inverse,
      maxNumPagesVisible,
      nextPageText,
      numItems,
      numItemsPerPage,
      prevPageText,
      ...others
    } = this.props;

    const numPages = Math.ceil(numItems / numItemsPerPage);

    if (numPages < 2) {
      return null;
    }

    const classNames = cx(theme['pagination'], { [theme['inverse']]: inverse }, className);
    const iterator = [currentPage];

    let counter = 0;

    while (iterator.length < maxNumPagesVisible && iterator.length < numPages) {
      if (counter % 2 === 0 && iterator[0] !== 1) {
        iterator.unshift(iterator[0] - 1);
      } else if (counter % 2 === 1 && iterator[iterator.length - 1] !== numPages) {
        iterator.push(iterator[iterator.length - 1] + 1);
      }

      counter++;
    }

    // make sure the first and the last item are the first and the last page
    iterator[0] = 1;
    iterator[iterator.length - 1] = numPages;

    // should we replace the 2nd and 2nd last by ellipsis?
    if (iterator.length > 1 && iterator[1] !== 2) {
      iterator[1] = 'ellipsis-left';
    }
    if (iterator.length > 1 && iterator[iterator.length - 2] !== numPages - 1) {
      iterator[iterator.length - 2] = 'ellipsis-right';
    }

    return (
      <Box data-teamleader-ui="pagination" className={classNames} element="nav" {...others}>
        <ul className={theme['list']}>
          {currentPage > 1 && (
            <li className={theme['list-item']}>
              <LinkButton
                icon={<IconChevronLeftMediumOutline />}
                inverse={inverse}
                label={prevPageText}
                onClick={() => this.handleChange(currentPage - 1)}
              />
            </li>
          )}
          {iterator.map(page => {
            return (
              <li key={page} className={theme['list-item']}>
                {('' + page).indexOf('ellipsis') === -1 ? (
{'fraction_non_alphanumeric': 0.13802588996763754, 'fraction_numerical': 0.010679611650485437, 'mean_word_length': 2.6103971962616823, 'pattern_counts': {'":': 0, '<': 23, '<?xml version=': 0, '>': 27, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1990639', 'n_tokens_mistral': 1901, 'n_tokens_neox': 1803, 'n_words': 434}