Pagination

const change = function(value) {
  console.log(value);
};
ReactDOM.render(<Pagination defaultCurrent={2} onChange={change} />, mountNode);

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      current: 2
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(current) {
    this.setState({
      current
    });
  }
  render() {
    return (
      <Pagination current={this.state.current} onChange={this.handleChange} />
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

ReactDOM.render(<Pagination total={500} />, mountNode);

class Demo extends React.Component {
  constructor(...args) {
    super(...args);
    this.state = {
      pageSize: 20
    };
    this.handleChange = pageSize => {
      this.setState({ pageSize });
    };
  }
  render() {
    return (
      <div>
        <h3>Set page size</h3>
        <Pagination pageSize={20} />
        <h3>Hide page size selector</h3>
        <Pagination pageSizeSelector={false} />
        <h3>Set page size selector to 'dropdown'，and show it in the end</h3>
        <Pagination pageSizeSelector="dropdown" pageSizePosition="end" />
        <h3>Use pageSizeList to specify the number of records per page.</h3>
        <Pagination
          pageSize={this.state.pageSize}
          total={100}
          pageSizeSelector="filter"
          pageSizeList={[5, 10, 20]}
          onPageSizeChange={this.handleChange}
        />
      </div>
    );
  }
}
ReactDOM.render(<Demo />, mountNode);

const change = function(value) {
  console.log(value);
};
ReactDOM.render(
  <div>
    <h3>Hide jump forcibly</h3>
    <Pagination total={500} showJump={false} />
  </div>,
  mountNode
);

ReactDOM.render(
  <div>
    <h3>small</h3>
    <Pagination defaultCurrent={2} size="small" />
    <h3>medium</h3>
    <Pagination defaultCurrent={2} size="medium" />
    <h3>large</h3>
    <Pagination defaultCurrent={2} size="large" />
  </div>,
  mountNode
);

ReactDOM.render(
  <div>
    <h3>normal</h3>
    <Pagination defaultCurrent={2} />
    <h3>arrow-only</h3>
    <Pagination defaultCurrent={2} shape="arrow-only" />
    <h3>arrow-prev-only</h3>
    <Pagination defaultCurrent={2} shape="arrow-prev-only" />
    <h3>no-border</h3>
    <Pagination defaultCurrent={2} shape="no-border" type="simple" />
  </div>,
  mountNode
);

ReactDOM.render(
  <div>
    <h3>normal</h3>
    <Pagination defaultCurrent={2} />
    <h3>simple</h3>
    <Pagination defaultCurrent={2} type="simple" />
    <h3>mini</h3>
    <Pagination defaultCurrent={2} type="mini" />
  </div>,
  mountNode
);

const total = 50;
ReactDOM.render(
  <Pagination
    className="custom-pagination"
    total={total}
    totalRender={total => `Total: ${total}`}
  />,
  mountNode
);

const handlePageSizeChange = size => console.log(size);
const containerStyle = {
  height: "300px",
  padding: 0,
  width: "100%"
};
const boxStyle = {
  overflow: "auto",
  position: "relative",
  width: "100%",
  height: "200px",
  border: "1px solid black"
};
const tempStyle = {
  height: "200px",
  display: "flex",
  "justify-content": "center",
  "align-items": "center"
};
const parentStyle = {
  display: "flex",
  "justify-content": "space-between"
};
const popupProps = {
  align: "bl tl"
};
ReactDOM.render(
  <div>
    <h3>default align - 'tl bl'</h3>
    <Pagination
      pageSizeSelector="dropdown"
      total="10"
      pageSizePosition="start"
      onPageSizeChange={handlePageSizeChange}
    />
    <h3>custom align - 'bl tl'</h3>
    <Pagination
      pageSizeSelector="dropdown"
      total="10"
      pageSizePosition="start"
      onPageSizeChange={handlePageSizeChange}
      popupProps={popupProps}
    />
    <h3>Inside parent with "overlflow: auto"</h3>
    <div style={containerStyle}>
      <div style={boxStyle}>
        <div style={tempStyle}>scroll down to see the example</div>
        <div style={parentStyle}>
          <div>
            <h3>default align - 'tl bl'</h3>
            <Pagination
              pageSizeSelector="dropdown"
              total="10"
              pageSizePosition="start"
              onPageSizeChange={handlePageSizeChange}
            />
          </div>
          <div>
            <h3>custom align - 'bl tl'</h3>
            <Pagination
              pageSizeSelector="dropdown"
              total="10"
              pageSizePosition="start"
              onPageSizeChange={handlePageSizeChange}
              popupProps={popupProps}
            />
          </div>
        </div>
      </div>
    </div>
  </div>,
  mountNode
);

const format = `${window.location.href}#/{page}`;
ReactDOM.render(<Pagination defaultCurrent={2} link={format} />, mountNode);

function handleChange(page) {
  hashHistory.push(page.toString());
}
ReactDOM.render(
  <Pagination defaultCurrent={2} onChange={handleChange} />,
  mountNode
);