Skip to content

fix liftcycle issue #149

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 10, 2017
Merged

fix liftcycle issue #149

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 2 additions & 4 deletions packages/react-bootstrap-table2-paginator/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
import Pagination from './pagination';
import wrapper from './wrapper';
import PaginationWrapper from './wrapper';

export default (options = {}) => ({
Pagination,
wrapper,
PaginationWrapper,
options
});
259 changes: 138 additions & 121 deletions packages/react-bootstrap-table2-paginator/src/wrapper.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,135 +5,152 @@ import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Const from './const';
import Pagination from './pagination';
import { getByCurrPage } from './page';

const wrapperFactory = baseElement =>
class PaginationWrapper extends Component {
static propTypes = {
store: PropTypes.object.isRequired
class PaginationWrapper extends Component {
static propTypes = {
store: PropTypes.object.isRequired,
baseElement: PropTypes.func.isRequired
}

constructor(props) {
super(props);
this.handleChangePage = this.handleChangePage.bind(this);
this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);

let currPage;
let currSizePerPage;
const { options } = props.pagination;
const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;

// initialize current page
if (typeof options.page !== 'undefined') {
currPage = options.page;
} else if (typeof options.pageStartIndex !== 'undefined') {
currPage = options.pageStartIndex;
} else {
currPage = Const.PAGE_START_INDEX;
}

constructor(props) {
super(props);
this.handleChangePage = this.handleChangePage.bind(this);
this.handleChangeSizePerPage = this.handleChangeSizePerPage.bind(this);

let currPage;
let currSizePerPage;
const options = props.pagination.options || {};
const sizePerPageList = options.sizePerPageList || Const.SIZE_PER_PAGE_LIST;

// initialize current page
if (typeof options.page !== 'undefined') {
currPage = options.page;
} else if (typeof options.pageStartIndex !== 'undefined') {
currPage = options.pageStartIndex;
} else {
currPage = Const.PAGE_START_INDEX;
}

// initialize current sizePerPage
if (typeof options.sizePerPage !== 'undefined') {
currSizePerPage = options.sizePerPage;
} else if (typeof sizePerPageList[0] === 'object') {
currSizePerPage = sizePerPageList[0].value;
} else {
currSizePerPage = sizePerPageList[0];
}

this.state = { currPage, currSizePerPage };
// initialize current sizePerPage
if (typeof options.sizePerPage !== 'undefined') {
currSizePerPage = options.sizePerPage;
} else if (typeof sizePerPageList[0] === 'object') {
currSizePerPage = sizePerPageList[0].value;
} else {
currSizePerPage = sizePerPageList[0];
}

isRemote() {
const { remote } = this.props;
return remote === true || (typeof remote === 'object' && remote.pagination);
}
this.state = { currPage, currSizePerPage };
}

handleChangePage(currPage) {
const { currSizePerPage } = this.state;
const { pagination: { options }, onRemotePageChange } = this.props;
if (options.onPageChange) {
options.onPageChange(currPage, currSizePerPage);
}
if (this.isRemote()) {
onRemotePageChange(currPage, currSizePerPage);
return;
}
this.setState(() => {
return {
currPage
};
});
componentWillReceiveProps(nextProps) {
let needNewState = false;
let { currPage, currSizePerPage } = this.state;
const { page, sizePerPage } = nextProps.pagination.options;
if (typeof page !== 'undefined') {
currPage = page;
needNewState = true;
}

handleChangeSizePerPage(currSizePerPage, currPage) {
const { pagination: { options }, onRemotePageChange } = this.props;
if (options.onSizePerPageChange) {
options.onSizePerPageChange(currSizePerPage, currPage);
}
if (this.isRemote()) {
onRemotePageChange(currPage, currSizePerPage);
return;
}
this.setState(() => {
return {
currPage,
currSizePerPage
};
});
if (typeof sizePerPage !== 'undefined') {
currSizePerPage = sizePerPage;
needNewState = true;
}

render() {
const { pagination: { Pagination, options }, store } = this.props;
const { currPage, currSizePerPage } = this.state;
const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
Const.With_FIRST_AND_LAST : options.withFirstAndLast;
const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
Const.SHOW_ALL_PAGE_BTNS : options.alwaysShowAllBtns;
const hideSizePerPage = typeof options.hideSizePerPage === 'undefined' ?
Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
Const.PAGE_START_INDEX : options.pageStartIndex;

const data = this.isRemote() ?
this.props.data :
getByCurrPage(store)(currPage, currSizePerPage, pageStartIndex);

const base = baseElement({
...this.props,
key: 'table',
data
});

return [
base,
<Pagination
key="pagination"
dataSize={ options.totalSize || store.data.length }
currPage={ currPage }
currSizePerPage={ currSizePerPage }
onPageChange={ this.handleChangePage }
onSizePerPageChange={ this.handleChangeSizePerPage }
sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }
pageStartIndex={ pageStartIndex }
withFirstAndLast={ withFirstAndLast }
alwaysShowAllBtns={ alwaysShowAllBtns }
hideSizePerPage={ hideSizePerPage }
hidePageListOnlyOnePage={ hidePageListOnlyOnePage }
firstPageText={ options.firstPageText || Const.FIRST_PAGE_TEXT }
prePageText={ options.prePageText || Const.PRE_PAGE_TEXT }
nextPageText={ options.nextPageText || Const.NEXT_PAGE_TEXT }
lastPageText={ options.lastPageText || Const.LAST_PAGE_TEXT }
prePageTitle={ options.prePageTitle || Const.PRE_PAGE_TITLE }
nextPageTitle={ options.nextPageTitle || Const.NEXT_PAGE_TITLE }
firstPageTitle={ options.firstPageTitle || Const.FIRST_PAGE_TITLE }
lastPageTitle={ options.lastPageTitle || Const.LAST_PAGE_TITLE }
/>
];
}
};
if (needNewState) this.setState(() => ({ currPage, currSizePerPage }));
}

isRemote() {
const { remote } = this.props;
return remote === true || (typeof remote === 'object' && remote.pagination);
}

export default wrapperFactory;
handleChangePage(currPage) {
const { currSizePerPage } = this.state;
const { pagination: { options }, onRemotePageChange } = this.props;
if (options.onPageChange) {
options.onPageChange(currPage, currSizePerPage);
}
if (this.isRemote()) {
onRemotePageChange(currPage, currSizePerPage);
return;
}
this.setState(() => {
return {
currPage
};
});
}

handleChangeSizePerPage(currSizePerPage, currPage) {
const { pagination: { options }, onRemotePageChange } = this.props;
if (options.onSizePerPageChange) {
options.onSizePerPageChange(currSizePerPage, currPage);
}
if (this.isRemote()) {
onRemotePageChange(currPage, currSizePerPage);
return;
}
this.setState(() => {
return {
currPage,
currSizePerPage
};
});
}

render() {
const { pagination: { options }, store, baseElement } = this.props;
const { currPage, currSizePerPage } = this.state;
const withFirstAndLast = typeof options.withFirstAndLast === 'undefined' ?
Const.With_FIRST_AND_LAST : options.withFirstAndLast;
const alwaysShowAllBtns = typeof options.alwaysShowAllBtns === 'undefined' ?
Const.SHOW_ALL_PAGE_BTNS : options.alwaysShowAllBtns;
const hideSizePerPage = typeof options.hideSizePerPage === 'undefined' ?
Const.HIDE_SIZE_PER_PAGE : options.hideSizePerPage;
const hidePageListOnlyOnePage = typeof options.hidePageListOnlyOnePage === 'undefined' ?
Const.HIDE_PAGE_LIST_ONLY_ONE_PAGE : options.hidePageListOnlyOnePage;
const pageStartIndex = typeof options.pageStartIndex === 'undefined' ?
Const.PAGE_START_INDEX : options.pageStartIndex;

const data = this.isRemote() ?
this.props.data :
getByCurrPage(store)(currPage, currSizePerPage, pageStartIndex);

const base = baseElement({
...this.props,
key: 'table',
data
});

return [
base,
<Pagination
key="pagination"
dataSize={ options.totalSize || store.data.length }
currPage={ currPage }
currSizePerPage={ currSizePerPage }
onPageChange={ this.handleChangePage }
onSizePerPageChange={ this.handleChangeSizePerPage }
sizePerPageList={ options.sizePerPageList || Const.SIZE_PER_PAGE_LIST }
paginationSize={ options.paginationSize || Const.PAGINATION_SIZE }
pageStartIndex={ pageStartIndex }
withFirstAndLast={ withFirstAndLast }
alwaysShowAllBtns={ alwaysShowAllBtns }
hideSizePerPage={ hideSizePerPage }
hidePageListOnlyOnePage={ hidePageListOnlyOnePage }
firstPageText={ options.firstPageText || Const.FIRST_PAGE_TEXT }
prePageText={ options.prePageText || Const.PRE_PAGE_TEXT }
nextPageText={ options.nextPageText || Const.NEXT_PAGE_TEXT }
lastPageText={ options.lastPageText || Const.LAST_PAGE_TEXT }
prePageTitle={ options.prePageTitle || Const.PRE_PAGE_TITLE }
nextPageTitle={ options.nextPageTitle || Const.NEXT_PAGE_TITLE }
firstPageTitle={ options.firstPageTitle || Const.FIRST_PAGE_TITLE }
lastPageTitle={ options.lastPageTitle || Const.LAST_PAGE_TITLE }
/>
];
}
}

export default PaginationWrapper;
32 changes: 28 additions & 4 deletions packages/react-bootstrap-table2-paginator/test/wrapper.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { shallow } from 'enzyme';
import BootstrapTable from 'react-bootstrap-table2/src/bootstrap-table';
import Store from 'react-bootstrap-table2/src/store';
import paginator from '../src';
import wrapperFactory from '../src/wrapper';
import PaginationWrapper from '../src/wrapper';
import Pagination from '../src/pagination';
import Const from '../src/const';

Expand All @@ -19,7 +19,6 @@ for (let i = 0; i < 100; i += 1) {
}

describe('Wrapper', () => {
let PaginationWrapper;
let wrapper;
let instance;

Expand All @@ -44,8 +43,7 @@ describe('Wrapper', () => {
const pureTable = props => (<BootstrapTable { ...props } />);

const createPaginationWrapper = (props, renderFragment = true) => {
PaginationWrapper = wrapperFactory(pureTable);
wrapper = shallow(<PaginationWrapper { ...props } />);
wrapper = shallow(<PaginationWrapper { ...props } baseElement={ pureTable } />);
instance = wrapper.instance();
if (renderFragment) {
const fragment = instance.render();
Expand Down Expand Up @@ -100,6 +98,32 @@ describe('Wrapper', () => {
expect(pagination.prop('lastPageTitle')).toEqual(Const.LAST_PAGE_TITLE);
expect(pagination.prop('hideSizePerPage')).toEqual(Const.HIDE_SIZE_PER_PAGE);
});

describe('componentWillReceiveProps', () => {
it('should setting currPage state correclt by options.page', () => {
props.pagination.options.page = 2;
instance.componentWillReceiveProps(props);
expect(instance.state.currPage).toEqual(props.pagination.options.page);
});

it('should not setting currPage state if options.page not existing', () => {
const { currPage } = instance.state;
instance.componentWillReceiveProps(props);
expect(instance.state.currPage).toBe(currPage);
});

it('should setting currSizePerPage state correclt by options.sizePerPage', () => {
props.pagination.options.sizePerPage = 20;
instance.componentWillReceiveProps(props);
expect(instance.state.currSizePerPage).toEqual(props.pagination.options.sizePerPage);
});

it('should not setting currSizePerPage state if options.sizePerPage not existing', () => {
const { currSizePerPage } = instance.state;
instance.componentWillReceiveProps(props);
expect(instance.state.currSizePerPage).toBe(currSizePerPage);
});
});
});

describe('when options.page is defined', () => {
Expand Down
5 changes: 2 additions & 3 deletions packages/react-bootstrap-table2/src/table-factory.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,8 @@ export const pureTable = props =>

export const wrapWithPagination = (props) => {
if (props.pagination) {
const { wrapper } = props.pagination;
const PaginationBase = wrapper(pureTable);
return React.createElement(PaginationBase, { ...props });
const { PaginationWrapper } = props.pagination;
return React.createElement(PaginationWrapper, { ...props, baseElement: pureTable });
}
return pureTable(props);
};
Expand Down
3 changes: 2 additions & 1 deletion packages/react-bootstrap-table2/test/container.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -156,7 +156,7 @@ describe('withDataStore', () => {
describe('when pagination prop is defined', () => {
const PaginationWrapper = () => <div>test</div>;
const pagination = {
wrapper: jest.fn().mockReturnValue(PaginationWrapper)
PaginationWrapper
};

beforeEach(() => {
Expand All @@ -177,6 +177,7 @@ describe('withDataStore', () => {
it('should injecting correct props to Pagination wrapper', () => {
const component = wrapper.find(PaginationWrapper);
expect(component.props().onRemotePageChange).toBeDefined();
expect(component.props().baseElement).toBeDefined();
});
});

Expand Down