import React, {Component, createElement} from 'react'; import {render} from 'react-dom'; import Pager from '@jetbrains/ring-ui/components/pager/pager'; class Example extends Component { state = { total: 750, currentPage: 1 } render() { const {total, currentPage} = this.state; return ( this.setState({currentPage})} /> ); } } render(createElement(Example, {}), document.getElementById('pager'));
import React, {Component, createElement} from 'react'; import {render} from 'react-dom'; import Pager from '@jetbrains/ring-ui/components/pager/pager'; class Example extends Component { state = { total: 750, currentPage: 1 } render() { const {total, currentPage} = this.state; return ( this.setState({currentPage})} /> ); } } render(createElement(Example, {}), document.getElementById('pager'));
import React, {Component, createElement} from 'react'; import {render} from 'react-dom'; import Pager from '@jetbrains/ring-ui/components/pager/pager'; class Example extends Component { state = { total: 250, currentPage: 1 } render() { const {total, currentPage} = this.state; return ( this.setState({currentPage})} /> ); } } render(createElement(Example, {}), document.getElementById('pager'));
import React, {Component, createElement} from 'react'; import {render} from 'react-dom'; import Pager from '@jetbrains/ring-ui/components/pager/pager'; class Example extends Component { state = { total: 400, currentPage: 1 } render() { const {total, currentPage} = this.state; return ( this.setState({currentPage})} /> ); } } render(createElement(Example, {}), document.getElementById('pager'));
import React, {Component, createElement} from 'react'; import {render} from 'react-dom'; import Pager from '@jetbrains/ring-ui/components/pager/pager'; class Example extends Component { state = { total: 300, currentPage: 1, pageSize: 50 } render() { const {total, currentPage, pageSize} = this.state; return ( this.setState({currentPage})} onPageSizeChange={pageSize => this.setState({pageSize})} /> ); } } render(createElement(Example, {}), document.getElementById('pager'));
import React, {Component, createElement} from 'react'; import {render} from 'react-dom'; import Pager from '@jetbrains/ring-ui/components/pager/pager'; class Example extends Component { state = { total: 10, currentPage: 1, pageSize: 10 } render() { const {total, currentPage, pageSize} = this.state; return ( this.setState({currentPage: cp})} onLoadPage={cp => this.setState({currentPage: cp, total: this.state.total + 10})} visiblePagesLimit={5} disablePageSizeSelector /> ); } } render(createElement(Example, {}), document.getElementById('pager'));
import React, {Component, createElement} from 'react'; import {render} from 'react-dom'; import Pager from '@jetbrains/ring-ui/components/pager/pager'; const getDataFromUrl = (name, defaultValue) => { const params = new URLSearchParams(location.search); const value = params.get(name); return value != undefined ? parseInt(value) : defaultValue; } const hrefGenerator = (linkPageNumber, pageSize) => { const params = new URLSearchParams(location.search); params.set('page', linkPageNumber) if (pageSize != undefined){ params.set('pageSize', pageSize) } return `${location.pathname}?${params}`; } const handleHistory = (page, pageSize) => { window.history.pushState({page: page, pageSize: pageSize}, '', hrefGenerator(page, pageSize)); }; class Example extends Component { state = { total: 999, currentPage: getDataFromUrl("page", 1), pageSize: getDataFromUrl("pageSize", 20) } handlePageChange(update) { this.setState(update, () => history.pushState(this.state, '', hrefGenerator(this.state.currentPage, this.state.pageSize))) } componentDidMount() { history.replaceState(this.state, '', hrefGenerator(this.state.currentPage, this.state.pageSize)) window.addEventListener('popstate', event => { if (window.history.state && window.history.state.currentPage && window.history.state.pageSize){ this.setState({pageSize: window.history.state.pageSize, currentPage: window.history.state.currentPage}); } }, false); } componentWillUnmount() { window.removeEventListener('popstate'); } render() { const {total, currentPage, pageSize} = this.state; return ( this.handlePageChange({currentPage})} onPageSizeChange={pageSize => this.handlePageChange({currentPage: 1, pageSize})} onLoadPage={currentPage => this.handlePageChange(prevState => ({currentPage, total: prevState.total + 500}))} /> ); } } render(createElement(Example, {}), document.getElementById('pager'));
import React, {Component, createElement} from 'react'; import {render} from 'react-dom'; import Pager from '@jetbrains/ring-ui/components/pager/pager'; const getDataFromUrl = (name, defaultValue) => { const params = new URLSearchParams(location.search); const value = params.get(name); return value != undefined ? parseInt(value) : defaultValue; } const hrefGenerator = (linkPageNumber, pageSize) => { const params = new URLSearchParams(location.search); params.set('page', linkPageNumber) if (pageSize != undefined){ params.set('pageSize', pageSize) } return `${location.pathname}?${params}`; } class Example extends Component { state = { total: 120, currentPage: getDataFromUrl("page", 1), pageSize: getDataFromUrl("pageSize", 20) } render() { const {total, currentPage, pageSize} = this.state; return ( ); } } render(createElement(Example, {}), document.getElementById('pager'));