cuz/src/components/PageSize/index.js

Front-end modular development kit.

import React from 'react';
import PageSizeItem from './PageSizeItem';

const PageSize = React.createClass({
  propTypes: {
    onSelect: React.PropTypes.func,
    sizeList: React.PropTypes.array,
    defaultSize: React.PropTypes.number,
    showText: React.PropTypes.string,
    children: React.PropTypes.any,
  },

  getDefaultProps() {
    return {
      sizeList: [20, 40, 60],
      showText: 'show',
    };
  },

  getInitialState() {
    return {
      pageSize: this.props.defaultSize || this.props.sizeList[0]
    };
  },

  onSelect(key) {
    this.setState({
      pageSize: key
    });

    if (this.props.onSelect) {
      this.props.onSelect(key);
    }
  },

  render() {
    const { showText, sizeList } = this.props;
    return (
      <ul className="page-size">
        <li><span>{ showText }:</span></li>
        {
          sizeList.map( (item) =>
            <PageSizeItem
              key={item}
              active={ this.state.pageSize === item }
              item= {item}
              onSelect = {this.onSelect}/>
          )
        }
      </ul>
    );
  }
});

export default PageSize;