From 40dbf3e7df865241b29edd1d30f412857ab5870c Mon Sep 17 00:00:00 2001 From: Timur Gibadullin Date: Fri, 2 Jun 2017 18:51:19 +0300 Subject: [PATCH 1/5] update order --- examples/Basic/index.js | 12 ++++++++++-- examples/Basic/package.json | 1 + 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/examples/Basic/index.js b/examples/Basic/index.js index 828592f..f1c23c0 100644 --- a/examples/Basic/index.js +++ b/examples/Basic/index.js @@ -17,7 +17,7 @@ import { Platform, } from 'react-native'; import SortableList from 'react-native-sortable-list'; - +import {shuffle} from 'lodash'; const window = Dimensions.get('window'); @@ -65,6 +65,13 @@ const data = { }; class Basic extends Component { + state = { + order: Object.keys(data), + } + + componentDidMount() { + setInterval(() => this.setState({order: shuffle(this.state.order)}), 3000) + } render() { return ( @@ -73,6 +80,7 @@ class Basic extends Component { style={styles.list} contentContainerStyle={styles.contentContainer} data={data} + order={this.state.order} renderRow={this._renderRow} /> ); @@ -194,7 +202,7 @@ const styles = StyleSheet.create({ marginTop: 7, marginBottom: 12, borderRadius: 4, - + ...Platform.select({ ios: { diff --git a/examples/Basic/package.json b/examples/Basic/package.json index bb9ab2b..0d81a8e 100644 --- a/examples/Basic/package.json +++ b/examples/Basic/package.json @@ -6,6 +6,7 @@ "start": "node node_modules/react-native/local-cli/cli.js start" }, "dependencies": { + "lodash": "^4.17.4", "react": "^15.4.0", "react-native": "^0.41.2", "react-native-sortable-list": "../.." From d4534e3f93f3ed87bed4349a9e96507723090a22 Mon Sep 17 00:00:00 2001 From: Timur Gibadullin Date: Fri, 16 Jun 2017 17:18:33 +0300 Subject: [PATCH 2/5] Remove side-effects from renders --- src/SortableList.js | 47 +++++++++++++++++++++++++++++---------------- 1 file changed, 30 insertions(+), 17 deletions(-) diff --git a/src/SortableList.js b/src/SortableList.js index 96b5f48..666c3fb 100644 --- a/src/SortableList.js +++ b/src/SortableList.js @@ -48,6 +48,7 @@ export default class SortableList extends Component { * Stores promises of rows’ layouts. */ _rowsLayouts = []; + _resolveRowLayout = {}; _contentOffset = {x: 0, y: 0}; @@ -64,6 +65,20 @@ export default class SortableList extends Component { scrollEnabled: this.props.scrollEnabled }; + componentWillMount() { + this.props.order.forEach((key) => { + this._rowsLayouts[key] = new Promise((resolve) => { + this._resolveRowLayout[key] = resolve; + }); + }); + + if (this.props.renderFooter && !this.props.horizontal) { + this._footerLayout = new Promise((resolve) => { + this._resolveFooterLayout = resolve; + }); + } + } + componentDidMount() { this._onUpdateLayouts(); } @@ -73,14 +88,20 @@ export default class SortableList extends Component { const {data: nextData, order: nextOrder} = nextProps; if (data && nextData && !shallowEqual(data, nextData)) { + nextOrder = nextOrder || Object.keys(nextData) uniqueRowKey.id++; - this._rowsLayouts = []; + this._rowsLayouts = {}; + nextOrder.forEach((key) => { + this._rowsLayouts[key] = new Promise((resolve) => { + this._resolveRowLayout[key] = resolve; + }); + }); this.setState({ animated: false, data: nextData, containerLayout: null, rowsLayouts: null, - order: nextOrder || Object.keys(nextData) + order: nextOrder }); } else if (order && nextOrder && !shallowEqual(order, nextOrder)) { @@ -206,7 +227,6 @@ export default class SortableList extends Component { return order.map((key, index) => { const style = {[ZINDEX]: 0}; const location = {x: 0, y: 0}; - let resolveLayout; if (rowsLayouts) { if (horizontal) { @@ -218,8 +238,6 @@ export default class SortableList extends Component { location.y = nextY; nextY += rowsLayouts[key].height; } - } else { - this._rowsLayouts.push(new Promise((resolve) => (resolveLayout = resolve))); } const active = activeRowKey === key; @@ -239,7 +257,7 @@ export default class SortableList extends Component { disabled={!sortingEnabled} style={style} location={location} - onLayout={!rowsLayouts ? this._onLayoutRow.bind(this, resolveLayout, key) : null} + onLayout={!rowsLayouts ? this._onLayoutRow.bind(this, key) : null} onActivate={this._onActivateRow.bind(this, key, index)} onPress={this._onPressRow.bind(this, key)} onRelease={this._onReleaseRow.bind(this, key)} @@ -262,14 +280,9 @@ export default class SortableList extends Component { } const {footerLayout} = this.state; - let resolveLayout; - - if (!footerLayout) { - this._footerLayout = new Promise((resolve) => (resolveLayout = resolve)); - } return ( - + {this.props.renderFooter()} ); @@ -515,13 +528,13 @@ export default class SortableList extends Component { this._autoScrollInterval = null; } - _onLayoutRow(resolveLayout, rowKey, {nativeEvent: {layout}}) { - resolveLayout({rowKey, layout}); + _onLayoutRow(rowKey, {nativeEvent: {layout}}) { + this._resolveRowLayout[rowKey]({rowKey, layout}); } - _onLayoutFooter(resolveLayout, {nativeEvent: {layout}}) { - resolveLayout(layout); - } + _onLayoutFooter = ({nativeEvent: {layout}}) => { + this._resolveFooterLayout(layout); + }; _onActivateRow = (rowKey, index, e, gestureState, location) => { this._activeRowLocation = location; From 54ec7df6eefc5951b6580c0b0898a851a9d53b91 Mon Sep 17 00:00:00 2001 From: Timur Gibadullin Date: Thu, 6 Jul 2017 12:57:00 +0300 Subject: [PATCH 3/5] const -> let --- src/SortableList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/SortableList.js b/src/SortableList.js index 666c3fb..dcbb3b2 100644 --- a/src/SortableList.js +++ b/src/SortableList.js @@ -85,7 +85,7 @@ export default class SortableList extends Component { componentWillReceiveProps(nextProps) { const {data, order} = this.state; - const {data: nextData, order: nextOrder} = nextProps; + let {data: nextData, order: nextOrder} = nextProps; if (data && nextData && !shallowEqual(data, nextData)) { nextOrder = nextOrder || Object.keys(nextData) From e99beff4b5575b23787db71738b8fb8afd0c4721 Mon Sep 17 00:00:00 2001 From: Timur Gibadullin Date: Thu, 6 Jul 2017 13:09:47 +0300 Subject: [PATCH 4/5] fix crash --- src/SortableList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/SortableList.js b/src/SortableList.js index dcbb3b2..21b70df 100644 --- a/src/SortableList.js +++ b/src/SortableList.js @@ -66,7 +66,7 @@ export default class SortableList extends Component { }; componentWillMount() { - this.props.order.forEach((key) => { + this.state.order.forEach((key) => { this._rowsLayouts[key] = new Promise((resolve) => { this._resolveRowLayout[key] = resolve; }); From 85c55a80717558502544db4584611b67bbc8730a Mon Sep 17 00:00:00 2001 From: Timur Gibadullin Date: Thu, 6 Jul 2017 14:05:00 +0300 Subject: [PATCH 5/5] fix --- src/SortableList.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/SortableList.js b/src/SortableList.js index 21b70df..8a938a8 100644 --- a/src/SortableList.js +++ b/src/SortableList.js @@ -47,7 +47,7 @@ export default class SortableList extends Component { /** * Stores promises of rows’ layouts. */ - _rowsLayouts = []; + _rowsLayouts = {}; _resolveRowLayout = {}; _contentOffset = {x: 0, y: 0}; @@ -289,7 +289,7 @@ export default class SortableList extends Component { } _onUpdateLayouts() { - Promise.all([this._footerLayout, ...this._rowsLayouts]) + Promise.all([this._footerLayout, ...Object.values(this._rowsLayouts)]) .then(([footerLayout, ...rowsLayouts]) => { // Can get correct container’s layout only after rows’s layouts. this._container.measure((x, y, width, height, pageX, pageY) => {