cuz/lib/components/PageSize/index.js

Front-end modular development kit.

'use strict';

var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _PageSizeItem = require('./PageSizeItem');

var _PageSizeItem2 = _interopRequireDefault(_PageSizeItem);

var PageSize = _react2['default'].createClass({
  displayName: 'PageSize',

  propTypes: {
    onSelect: _react2['default'].PropTypes.func,
    sizeList: _react2['default'].PropTypes.array,
    defaultSize: _react2['default'].PropTypes.number,
    showText: _react2['default'].PropTypes.string,
    children: _react2['default'].PropTypes.any
  },

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

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

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

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

  render: function render() {
    var _this = this;

    var _props = this.props;
    var showText = _props.showText;
    var sizeList = _props.sizeList;

    return _react2['default'].createElement(
      'ul',
      { className: 'page-size' },
      _react2['default'].createElement(
        'li',
        null,
        _react2['default'].createElement(
          'span',
          null,
          showText,
          ':'
        )
      ),
      sizeList.map(function (item) {
        return _react2['default'].createElement(_PageSizeItem2['default'], {
          key: item,
          active: _this.state.pageSize === item,
          item: item,
          onSelect: _this.onSelect });
      })
    );
  }
});

exports['default'] = PageSize;
module.exports = exports['default'];