diff --git a/packages/react-bootstrap-table2-editor/src/context.js b/packages/react-bootstrap-table2-editor/src/context.js index ea3c1f0..30f5e6a 100644 --- a/packages/react-bootstrap-table2-editor/src/context.js +++ b/packages/react-bootstrap-table2-editor/src/context.js @@ -1,5 +1,8 @@ +/* eslint disable-next-line: 0 */ /* eslint react/prop-types: 0 */ /* eslint react/require-default-props: 0 */ +/* eslint camelcase: 0 */ +/* eslint react/no-unused-prop-types: 0 */ import React from 'react'; import PropTypes from 'prop-types'; import { CLICK_TO_CELL_EDIT, DBCLICK_TO_CELL_EDIT } from './const'; @@ -43,7 +46,7 @@ export default ( }; } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.cellEdit && isRemoteCellEdit()) { if (nextProps.cellEdit.options.errorMessage) { this.setState(() => ({ diff --git a/packages/react-bootstrap-table2-editor/src/editing-cell.js b/packages/react-bootstrap-table2-editor/src/editing-cell.js index 2a0d85b..e729998 100644 --- a/packages/react-bootstrap-table2-editor/src/editing-cell.js +++ b/packages/react-bootstrap-table2-editor/src/editing-cell.js @@ -2,6 +2,7 @@ /* eslint no-return-assign: 0 */ /* eslint class-methods-use-this: 0 */ /* eslint jsx-a11y/no-noninteractive-element-interactions: 0 */ +/* eslint camelcase: 0 */ import React, { Component } from 'react'; import cs from 'classnames'; import PropTypes from 'prop-types'; @@ -51,7 +52,11 @@ export default (_, onStartEdit) => }; } - componentWillReceiveProps({ message }) { + componentWillUnmount() { + this.clearTimer(); + } + + UNSAFE_componentWillReceiveProps({ message }) { if (_.isDefined(message)) { this.createTimer(); this.setState(() => ({ @@ -60,10 +65,6 @@ export default (_, onStartEdit) => } } - componentWillUnmount() { - this.clearTimer(); - } - clearTimer() { if (this.indicatorTimer) { clearTimeout(this.indicatorTimer); diff --git a/packages/react-bootstrap-table2-editor/test/context.test.js b/packages/react-bootstrap-table2-editor/test/context.test.js index 57b56bf..65e9d2c 100644 --- a/packages/react-bootstrap-table2-editor/test/context.test.js +++ b/packages/react-bootstrap-table2-editor/test/context.test.js @@ -117,7 +117,7 @@ describe('CellEditContext', () => { wrapper = shallow(shallowContext()); wrapper.setState(initialState); wrapper.render(); - wrapper.instance().componentWillReceiveProps({}); + wrapper.instance().UNSAFE_componentWillReceiveProps({}); }); it('should not set state.message', () => { @@ -138,7 +138,7 @@ describe('CellEditContext', () => { wrapper = shallow(shallowContext()); wrapper.setState(initialState); wrapper.render(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ cellEdit: cellEditFactory(defaultCellEdit) }); }); @@ -164,7 +164,7 @@ describe('CellEditContext', () => { wrapper = shallow(shallowContext(defaultCellEdit, true)); wrapper.setState(initialState); wrapper.render(); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ cellEdit: cellEditFactory({ ...defaultCellEdit, errorMessage: message @@ -190,7 +190,7 @@ describe('CellEditContext', () => { beforeEach(() => { wrapper = shallow(shallowContext(defaultCellEdit, true)); wrapper.setState(initialState); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ cellEdit: cellEditFactory({ ...defaultCellEdit }) }); wrapper.update(); diff --git a/packages/react-bootstrap-table2-filter/src/components/text.js b/packages/react-bootstrap-table2-filter/src/components/text.js index a359a95..b02e6d5 100644 --- a/packages/react-bootstrap-table2-filter/src/components/text.js +++ b/packages/react-bootstrap-table2-filter/src/components/text.js @@ -1,6 +1,7 @@ /* eslint react/require-default-props: 0 */ /* eslint react/prop-types: 0 */ /* eslint no-return-assign: 0 */ +/* eslint camelcase: 0 */ import React, { Component } from 'react'; import { PropTypes } from 'prop-types'; @@ -41,16 +42,16 @@ class TextFilter extends Component { } } - componentWillReceiveProps(nextProps) { + componentWillUnmount() { + this.cleanTimer(); + } + + UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.defaultValue !== this.props.defaultValue) { this.applyFilter(nextProps.defaultValue); } } - componentWillUnmount() { - this.cleanTimer(); - } - filter(e) { e.stopPropagation(); this.cleanTimer(); diff --git a/packages/react-bootstrap-table2-filter/src/context.js b/packages/react-bootstrap-table2-filter/src/context.js index 013be6e..f9be85f 100644 --- a/packages/react-bootstrap-table2-filter/src/context.js +++ b/packages/react-bootstrap-table2-filter/src/context.js @@ -1,5 +1,6 @@ /* eslint react/prop-types: 0 */ /* eslint react/require-default-props: 0 */ +/* eslint camelcase: 0 */ import React from 'react'; import PropTypes from 'prop-types'; @@ -37,15 +38,6 @@ export default ( } } - componentWillReceiveProps(nextProps) { - // let nextData = nextProps.data; - if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.data)) { - this.doFilter(nextProps, this.isEmitDataChange); - } else { - this.data = nextProps.data; - } - } - onFilter(column, filterType, initialize = false) { return (filterVal) => { // watch out here if migration to context API, #334 @@ -90,6 +82,15 @@ export default ( return this.data; } + UNSAFE_componentWillReceiveProps(nextProps) { + // let nextData = nextProps.data; + if (!isRemoteFiltering() && !_.isEqual(nextProps.data, this.data)) { + this.doFilter(nextProps, this.isEmitDataChange); + } else { + this.data = nextProps.data; + } + } + doFilter(props, ignoreEmitDataChange = false) { const { dataChangeListener, data, columns } = props; const result = filters(data, columns, _)(this.currFilters); diff --git a/packages/react-bootstrap-table2-filter/test/components/text.test.js b/packages/react-bootstrap-table2-filter/test/components/text.test.js index fbc849f..fbb2200 100644 --- a/packages/react-bootstrap-table2-filter/test/components/text.test.js +++ b/packages/react-bootstrap-table2-filter/test/components/text.test.js @@ -144,7 +144,7 @@ describe('Text Filter', () => { ); instance = wrapper.instance(); - instance.componentWillReceiveProps(nextProps); + instance.UNSAFE_componentWillReceiveProps(nextProps); }); it('should setting state correctly when props.defaultValue is changed', () => { diff --git a/packages/react-bootstrap-table2-paginator/src/data-context.js b/packages/react-bootstrap-table2-paginator/src/data-context.js index 654e9f8..153884c 100644 --- a/packages/react-bootstrap-table2-paginator/src/data-context.js +++ b/packages/react-bootstrap-table2-paginator/src/data-context.js @@ -21,8 +21,9 @@ class PaginationDataProvider extends Provider { isRemotePagination: PropTypes.func.isRequired } - componentWillReceiveProps(nextProps) { - super.componentWillReceiveProps(nextProps); + // eslint-disable-next-line camelcase, react/sort-comp + UNSAFE_componentWillReceiveProps(nextProps) { + super.UNSAFE_componentWillReceiveProps(nextProps); const { currSizePerPage } = this; const { custom, onPageChange } = nextProps.pagination.options; diff --git a/packages/react-bootstrap-table2-paginator/src/pagination-handler.js b/packages/react-bootstrap-table2-paginator/src/pagination-handler.js index fcc9e11..412258b 100644 --- a/packages/react-bootstrap-table2-paginator/src/pagination-handler.js +++ b/packages/react-bootstrap-table2-paginator/src/pagination-handler.js @@ -1,4 +1,5 @@ /* eslint react/prop-types: 0 */ +/* eslint camelcase: 0 */ import React, { Component } from 'react'; import pageResolver from './page-resolver'; @@ -12,7 +13,7 @@ export default WrappedComponent => this.state = this.initialState(); } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { const { dataSize, currSizePerPage } = nextProps; if (currSizePerPage !== this.props.currSizePerPage || dataSize !== this.props.dataSize) { const totalPages = this.calculateTotalPage(currSizePerPage, dataSize); diff --git a/packages/react-bootstrap-table2-paginator/src/state-context.js b/packages/react-bootstrap-table2-paginator/src/state-context.js index 3f616cb..b1079ef 100644 --- a/packages/react-bootstrap-table2-paginator/src/state-context.js +++ b/packages/react-bootstrap-table2-paginator/src/state-context.js @@ -1,6 +1,7 @@ /* eslint react/prop-types: 0 */ /* eslint react/require-default-props: 0 */ /* eslint no-lonely-if: 0 */ +/* eslint camelcase: 0 */ import React from 'react'; import EventEmitter from 'events'; import Const from './const'; @@ -45,23 +46,6 @@ class StateProvider extends React.Component { this.dataChangeListener.on('filterChanged', this.handleDataSizeChange); } - componentWillReceiveProps(nextProps) { - const { custom } = nextProps.pagination.options; - - // user should align the page when the page is not fit to the data size when remote enable - if (this.isRemotePagination() || custom) { - if (typeof nextProps.pagination.options.page !== 'undefined') { - this.currPage = nextProps.pagination.options.page; - } - if (typeof nextProps.pagination.options.sizePerPage !== 'undefined') { - this.currSizePerPage = nextProps.pagination.options.sizePerPage; - } - if (typeof nextProps.pagination.options.totalSize !== 'undefined') { - this.dataSize = nextProps.pagination.options.totalSize; - } - } - } - getPaginationProps = () => { const { pagination: { options }, bootstrap4 } = this.props; const { currPage, currSizePerPage, dataSize } = this; @@ -113,6 +97,23 @@ class StateProvider extends React.Component { getPaginationRemoteEmitter = () => this.remoteEmitter || this.props.remoteEmitter; + UNSAFE_componentWillReceiveProps(nextProps) { + const { custom } = nextProps.pagination.options; + + // user should align the page when the page is not fit to the data size when remote enable + if (this.isRemotePagination() || custom) { + if (typeof nextProps.pagination.options.page !== 'undefined') { + this.currPage = nextProps.pagination.options.page; + } + if (typeof nextProps.pagination.options.sizePerPage !== 'undefined') { + this.currSizePerPage = nextProps.pagination.options.sizePerPage; + } + if (typeof nextProps.pagination.options.totalSize !== 'undefined') { + this.dataSize = nextProps.pagination.options.totalSize; + } + } + } + isRemotePagination = () => { const e = {}; this.remoteEmitter.emit('isRemotePagination', e); diff --git a/packages/react-bootstrap-table2-paginator/test/data-context.test.js b/packages/react-bootstrap-table2-paginator/test/data-context.test.js index ba920cc..48dd1aa 100644 --- a/packages/react-bootstrap-table2-paginator/test/data-context.test.js +++ b/packages/react-bootstrap-table2-paginator/test/data-context.test.js @@ -174,7 +174,7 @@ describe('PaginationDataContext', () => { data: [], pagination: { ...defaultPagination } }; - instance.componentWillReceiveProps(nextProps); + instance.UNSAFE_componentWillReceiveProps(nextProps); }); it('should reset currPage to first page', () => { @@ -195,7 +195,7 @@ describe('PaginationDataContext', () => { data: [], pagination: { ...defaultPagination, options: { onPageChange } } }; - instance.componentWillReceiveProps(nextProps); + instance.UNSAFE_componentWillReceiveProps(nextProps); }); it('should call options.onPageChange correctly', () => { diff --git a/packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js b/packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js index 4c295a1..b9216d1 100644 --- a/packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js +++ b/packages/react-bootstrap-table2-paginator/test/pagination-handler.test.js @@ -164,13 +164,13 @@ describe('paginationHandler', () => { }); it('should setting correct state.totalPages', () => { - instance.componentWillReceiveProps(nextProps); + instance.UNSAFE_componentWillReceiveProps(nextProps); expect(instance.state.totalPages).toEqual( instance.calculateTotalPage(nextProps.currSizePerPage)); }); it('should setting correct state.lastPage', () => { - instance.componentWillReceiveProps(nextProps); + instance.UNSAFE_componentWillReceiveProps(nextProps); const totalPages = instance.calculateTotalPage(nextProps.currSizePerPage); expect(instance.state.lastPage).toEqual( instance.calculateLastPage(totalPages)); @@ -186,13 +186,13 @@ describe('paginationHandler', () => { }); it('should setting correct state.totalPages', () => { - instance.componentWillReceiveProps(nextProps); + instance.UNSAFE_componentWillReceiveProps(nextProps); expect(instance.state.totalPages).toEqual( instance.calculateTotalPage(nextProps.currSizePerPage, nextProps.dataSize)); }); it('should setting correct state.lastPage', () => { - instance.componentWillReceiveProps(nextProps); + instance.UNSAFE_componentWillReceiveProps(nextProps); const totalPages = instance.calculateTotalPage( nextProps.currSizePerPage, nextProps.dataSize); expect(instance.state.lastPage).toEqual( diff --git a/packages/react-bootstrap-table2-paginator/test/state-context.test.js b/packages/react-bootstrap-table2-paginator/test/state-context.test.js index bc4a91c..c17630e 100644 --- a/packages/react-bootstrap-table2-paginator/test/state-context.test.js +++ b/packages/react-bootstrap-table2-paginator/test/state-context.test.js @@ -156,7 +156,7 @@ describe('PaginationStateContext', () => { data, pagination: { ...defaultPagination, options: { page: 3, sizePerPage: 5, totalSize: 50 } } }; - instance.componentWillReceiveProps(nextProps); + instance.UNSAFE_componentWillReceiveProps(nextProps); }); it('should always reset currPage and currSizePerPage', () => { @@ -181,7 +181,7 @@ describe('PaginationStateContext', () => { options: { page: 3, sizePerPage: 5, custom: true, totalSize: 50 } } }; - instance.componentWillReceiveProps(nextProps); + instance.UNSAFE_componentWillReceiveProps(nextProps); }); it('should always reset currPage and currSizePerPage', () => { diff --git a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js index 70909e0..9bef75f 100644 --- a/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js +++ b/packages/react-bootstrap-table2-toolkit/src/search/SearchBar.js @@ -1,3 +1,4 @@ +/* eslint camelcase: 0 */ /* eslint no-return-assign: 0 */ import React from 'react'; import PropTypes from 'prop-types'; @@ -34,10 +35,6 @@ class SearchBar extends React.Component { }; } - componentWillReceiveProps(nextProps) { - this.setState({ value: nextProps.searchText }); - } - onChangeValue = (e) => { this.setState({ value: e.target.value }); } @@ -50,6 +47,10 @@ class SearchBar extends React.Component { debounceCallback(); } + UNSAFE_componentWillReceiveProps(nextProps) { + this.setState({ value: nextProps.searchText }); + } + render() { const { className, diff --git a/packages/react-bootstrap-table2-toolkit/src/search/context.js b/packages/react-bootstrap-table2-toolkit/src/search/context.js index bfed70d..50dafc4 100644 --- a/packages/react-bootstrap-table2-toolkit/src/search/context.js +++ b/packages/react-bootstrap-table2-toolkit/src/search/context.js @@ -3,6 +3,7 @@ /* eslint no-continue: 0 */ /* eslint no-lonely-if: 0 */ /* eslint class-methods-use-this: 0 */ +/* eslint camelcase: 0 */ import React from 'react'; import PropTypes from 'prop-types'; @@ -35,7 +36,17 @@ export default (options = { this.state = { data: initialData }; } - componentWillReceiveProps(nextProps) { + getSearched() { + return this.state.data; + } + + triggerListener(result) { + if (this.props.dataChangeListener) { + this.props.dataChangeListener.emit('filterChanged', result.length); + } + } + + UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.searchText !== this.props.searchText) { if (isRemoteSearch()) { handleRemoteSearchChange(nextProps.searchText); @@ -59,16 +70,6 @@ export default (options = { } } - getSearched() { - return this.state.data; - } - - triggerListener(result) { - if (this.props.dataChangeListener) { - this.props.dataChangeListener.emit('filterChanged', result.length); - } - } - search(props) { const { data, columns } = props; const searchText = props.searchText.toLowerCase(); diff --git a/packages/react-bootstrap-table2/src/bootstrap-table.js b/packages/react-bootstrap-table2/src/bootstrap-table.js index 692c29f..338a428 100644 --- a/packages/react-bootstrap-table2/src/bootstrap-table.js +++ b/packages/react-bootstrap-table2/src/bootstrap-table.js @@ -1,3 +1,4 @@ +/* eslint camelcase: 0 */ /* eslint arrow-body-style: 0 */ import React, { Component } from 'react'; @@ -18,7 +19,7 @@ class BootstrapTable extends PropsBaseResolver(Component) { this.validateProps(); } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.onDataSizeChange && !nextProps.pagination) { if (nextProps.data.length !== this.props.data.length) { nextProps.onDataSizeChange({ dataSize: nextProps.data.length }); diff --git a/packages/react-bootstrap-table2/src/contexts/data-context.js b/packages/react-bootstrap-table2/src/contexts/data-context.js index 3394c7a..1e207d8 100644 --- a/packages/react-bootstrap-table2/src/contexts/data-context.js +++ b/packages/react-bootstrap-table2/src/contexts/data-context.js @@ -1,3 +1,4 @@ +/* eslint camelcase: 0 */ import React, { Component } from 'react'; import PropTypes from 'prop-types'; @@ -12,10 +13,6 @@ export default () => { state = { data: this.props.data }; - componentWillReceiveProps(nextProps) { - this.setState(() => ({ data: nextProps.data })); - } - getData = (filterProps, searchProps, sortProps, paginationProps) => { if (paginationProps) return paginationProps.data; else if (sortProps) return sortProps.data; @@ -24,6 +21,10 @@ export default () => { return this.props.data; } + UNSAFE_componentWillReceiveProps(nextProps) { + this.setState(() => ({ data: nextProps.data })); + } + render() { return ( } } - componentWillReceiveProps(nextProps) { + UNSAFE_componentWillReceiveProps(nextProps) { if (!nextProps.pagination && this.props.pagination) { this.PaginationContext = null; } diff --git a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js index e1c5e47..fb1aed0 100644 --- a/packages/react-bootstrap-table2/src/contexts/row-expand-context.js +++ b/packages/react-bootstrap-table2/src/contexts/row-expand-context.js @@ -1,3 +1,4 @@ +/* eslint camelcase: 0 */ /* eslint react/prop-types: 0 */ import React from 'react'; import PropTypes from 'prop-types'; @@ -16,7 +17,11 @@ class RowExpandProvider extends React.Component { state = { expanded: this.props.expandRow.expanded || [], isClosing: this.props.expandRow.isClosing || [] }; - componentWillReceiveProps(nextProps) { + onClosed = (closedRow) => { + this.setState({ isClosing: this.state.isClosing.filter(value => value !== closedRow) }); + }; + + UNSAFE_componentWillReceiveProps(nextProps) { if (nextProps.expandRow) { const nextExpanded = nextProps.expandRow.expanded || this.state.expanded; const isClosing = this.state.expanded.reduce((acc, cur) => { @@ -36,10 +41,6 @@ class RowExpandProvider extends React.Component { } } - onClosed = (closedRow) => { - this.setState({ isClosing: this.state.isClosing.filter(value => value !== closedRow) }); - }; - handleRowExpand = (rowKey, expanded, rowIndex, e) => { const { data, keyField, expandRow: { onExpand, onlyOneExpanding, nonExpandable } } = this.props; if (nonExpandable && _.contains(nonExpandable, rowKey)) { diff --git a/packages/react-bootstrap-table2/src/contexts/selection-context.js b/packages/react-bootstrap-table2/src/contexts/selection-context.js index 573c54f..31a0e43 100644 --- a/packages/react-bootstrap-table2/src/contexts/selection-context.js +++ b/packages/react-bootstrap-table2/src/contexts/selection-context.js @@ -1,3 +1,4 @@ +/* eslint camelcase: 0 */ /* eslint react/prop-types: 0 */ import React from 'react'; import PropTypes from 'prop-types'; @@ -19,17 +20,17 @@ class SelectionProvider extends React.Component { this.selected = props.selectRow.selected || []; } - componentWillReceiveProps(nextProps) { - if (nextProps.selectRow) { - this.selected = nextProps.selectRow.selected || this.selected; - } - } - // exposed API getSelected() { return this.selected; } + UNSAFE_componentWillReceiveProps(nextProps) { + if (nextProps.selectRow) { + this.selected = nextProps.selectRow.selected || this.selected; + } + } + handleRowSelect = (rowKey, checked, rowIndex, e) => { const { data, keyField, selectRow: { mode, onSelect } } = this.props; const { ROW_SELECT_SINGLE } = Const; diff --git a/packages/react-bootstrap-table2/test/contexts/data-context.test.js b/packages/react-bootstrap-table2/test/contexts/data-context.test.js index 0761640..7e6dab3 100644 --- a/packages/react-bootstrap-table2/test/contexts/data-context.test.js +++ b/packages/react-bootstrap-table2/test/contexts/data-context.test.js @@ -81,7 +81,7 @@ describe('DataContext', () => { beforeEach(() => { wrapper = shallow(shallowContext()); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ data: newData }); }); diff --git a/packages/react-bootstrap-table2/test/contexts/selection-context.test.js b/packages/react-bootstrap-table2/test/contexts/selection-context.test.js index 1196088..107c4fc 100644 --- a/packages/react-bootstrap-table2/test/contexts/selection-context.test.js +++ b/packages/react-bootstrap-table2/test/contexts/selection-context.test.js @@ -99,7 +99,7 @@ describe('DataContext', () => { beforeEach(() => { wrapper = shallow(shallowContext()); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ selectRow: newSelectRow }); }); @@ -115,7 +115,7 @@ describe('DataContext', () => { ...defaultSelectRow, selected: defaultSelected })); - wrapper.instance().componentWillReceiveProps({ + wrapper.instance().UNSAFE_componentWillReceiveProps({ selectRow: defaultSelectRow }); }); @@ -128,7 +128,7 @@ describe('DataContext', () => { describe('if nextProps.selectRow is not existing', () => { beforeEach(() => { wrapper = shallow(shallowContext()); - wrapper.instance().componentWillReceiveProps({}); + wrapper.instance().UNSAFE_componentWillReceiveProps({}); }); it('should not set this.selected', () => {