cspace-ui/src/components/search/PageSizeChooser.jsx

CollectionSpace user interface for browsers

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { defineMessages, FormattedMessage } from 'react-intl';
import ComboBoxInputContainer from '../../containers/input/ComboBoxInputContainer';
import styles from '../../../styles/cspace-ui/PageSizeChooser.css';

const messages = defineMessages({
  pageSize: {
    id: 'pageSizeChooser.pageSize',
    description: 'The current page size displayed above search results.',
    defaultMessage: '{pageSize} per page',
  },
});

const propTypes = {
  pageSize: PropTypes.number.isRequired,
  embedded: PropTypes.bool,
  pageSizeOptionListName: PropTypes.string,
  onPageSizeChange: PropTypes.func,
};

const defaultProps = {
  pageSizeOptionListName: 'searchResultPagePageSizes',
};

export default class PageSizeChooser extends Component {
  constructor(props) {
    super(props);

    this.handleCommit = this.handleCommit.bind(this);
    this.handleAddOption = this.handleAddOption.bind(this);
  }

  handleAddOption(label) {
    const {
      onPageSizeChange,
    } = this.props;

    if (onPageSizeChange) {
      const value = parseInt(label, 10);

      if (!Number.isNaN(value) && value > 0) {
        onPageSizeChange(value);
      }
    }
  }

  handleCommit(path, value) {
    const {
      pageSize,
      onPageSizeChange,
    } = this.props;

    if (onPageSizeChange) {
      const newPageSize = parseInt(value, 10);

      if (newPageSize !== pageSize) {
        onPageSizeChange(newPageSize);
      }
    }
  }

  render() {
    const {
      embedded,
      pageSize,
      pageSizeOptionListName,
    } = this.props;

    const value = Number.isNaN(pageSize) ? '' : pageSize.toString();

    const chooser = (
      <ComboBoxInputContainer
        embedded={embedded}
        source={pageSizeOptionListName}
        value={value}
        onAddOption={this.handleAddOption}
        onCommit={this.handleCommit}
      />
    );

    return (
      <div className={styles.common}>
        <FormattedMessage
          {...messages.pageSize}
          tagName="div"
          values={{ pageSize: chooser }}
        />
      </div>
    );
  }
}

PageSizeChooser.propTypes = propTypes;
PageSizeChooser.defaultProps = defaultProps;