From d1b5b936f27105b36c0cb29c9aaa80a738e46bbd Mon Sep 17 00:00:00 2001 From: jcurtis Date: Fri, 16 Feb 2018 14:16:11 -0400 Subject: [PATCH 1/3] Add renderHeader which acts the same as renderFooter but at the top --- README.md | 3 +++ src/SortableList.js | 38 ++++++++++++++++++++++++++++++++------ 2 files changed, 35 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 4a4fdf6..b158d51 100644 --- a/README.md +++ b/README.md @@ -40,6 +40,9 @@ A RefreshControl that works the same way as a ScrollView's refreshControl. - **renderRow** (function)
`({key, index, data, disabled, active}) => renderable`
Takes a row key, row index, data entry from the data source and its statuses disabled, active and should return a renderable component to be rendered as the row. The child component will receive a method called `toggleRowActive` (only if `manuallyActivateRows={true}`) to manually activate the row. Useful if you have multiple touch responders in your view.
+- **renderHeader?** (function)
+`() => renderable`
+Renders returned component at the top of the list. - **renderFooter?** (function)
`() => renderable`
Renders returned component at the bottom of the list. diff --git a/src/SortableList.js b/src/SortableList.js index d251889..85ae089 100644 --- a/src/SortableList.js +++ b/src/SortableList.js @@ -15,7 +15,7 @@ uniqueRowKey.id = 0 export default class SortableList extends Component { static propTypes = { - data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired, + data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]).isRequired, order: PropTypes.arrayOf(PropTypes.any), style: ViewPropTypes.style, contentContainerStyle: ViewPropTypes.style, @@ -28,6 +28,7 @@ export default class SortableList extends Component { manuallyActivateRows: PropTypes.bool, renderRow: PropTypes.func.isRequired, + renderHeader: PropTypes.func, renderFooter: PropTypes.func, onChangeOrder: PropTypes.func, @@ -75,6 +76,11 @@ export default class SortableList extends Component { }); }); + if (this.props.renderHeader && !this.props.horizontal) { + this._headerLayout = new Promise((resolve) => { + this._resolveHeaderLayout = resolve; + }); + } if (this.props.renderFooter && !this.props.horizontal) { this._footerLayout = new Promise((resolve) => { this._resolveFooterLayout = resolve; @@ -178,7 +184,7 @@ export default class SortableList extends Component { const containerStyle = StyleSheet.flatten([style, {opacity: Number(animated)}]) const innerContainerStyle = [ styles.rowsContainer, - horizontal ? {width: contentWidth} : {height: contentHeight}, + horizontal ? {width: contentWidth} : {height: contentHeight} ]; let {refreshControl} = this.props; @@ -198,6 +204,7 @@ export default class SortableList extends Component { scrollEventThrottle={2} scrollEnabled={scrollEnabled} onScroll={this._onScroll}> + {this._renderHeader()} {this._renderRows()} @@ -222,10 +229,10 @@ export default class SortableList extends Component { if (rowsLayouts) { if (horizontal) { location.x = nextX; - nextX += rowsLayouts[key].width; + nextX += rowsLayouts[key] ? rowsLayouts[key].width : 0; } else { location.y = nextY; - nextY += rowsLayouts[key].height; + nextY += rowsLayouts[key] ? rowsLayouts[key].height : 0; } } @@ -264,6 +271,20 @@ export default class SortableList extends Component { }); } + _renderHeader() { + if (!this.props.renderHeader || this.props.horizontal) { + return null; + } + + const {headerLayout} = this.state; + + return ( + + {this.props.renderHeader()} + + ); + } + _renderFooter() { if (!this.props.renderFooter || this.props.horizontal) { return null; @@ -279,8 +300,8 @@ export default class SortableList extends Component { } _onUpdateLayouts() { - Promise.all([this._footerLayout, ...Object.values(this._rowsLayouts)]) - .then(([footerLayout, ...rowsLayouts]) => { + Promise.all([this._headerLayout, this._footerLayout, ...Object.values(this._rowsLayouts)]) + .then(([headerLayout, footerLayout, ...rowsLayouts]) => { // Can get correct container’s layout only after rows’s layouts. this._container.measure((x, y, width, height, pageX, pageY) => { const rowsLayoutsByKey = {}; @@ -296,6 +317,7 @@ export default class SortableList extends Component { this.setState({ containerLayout: {x, y, width, height, pageX, pageY}, rowsLayouts: rowsLayoutsByKey, + headerLayout, footerLayout, contentHeight, contentWidth, @@ -522,6 +544,10 @@ export default class SortableList extends Component { this._resolveRowLayout[rowKey]({rowKey, layout}); } + _onLayoutHeader = ({nativeEvent: {layout}}) => { + this._resolveHeaderLayout(layout); + }; + _onLayoutFooter = ({nativeEvent: {layout}}) => { this._resolveFooterLayout(layout); }; From fad2661cdfaba864caaae3b0373bfba14d17065b Mon Sep 17 00:00:00 2001 From: jcurtis Date: Wed, 28 Feb 2018 10:07:35 -0400 Subject: [PATCH 2/3] Keep trailing comma --- src/SortableList.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/SortableList.js b/src/SortableList.js index 85ae089..89e7457 100644 --- a/src/SortableList.js +++ b/src/SortableList.js @@ -184,7 +184,7 @@ export default class SortableList extends Component { const containerStyle = StyleSheet.flatten([style, {opacity: Number(animated)}]) const innerContainerStyle = [ styles.rowsContainer, - horizontal ? {width: contentWidth} : {height: contentHeight} + horizontal ? {width: contentWidth} : {height: contentHeight}, ]; let {refreshControl} = this.props; From b7bc885ce4730b5e7e5bc452297acfc878993648 Mon Sep 17 00:00:00 2001 From: jcurtis Date: Wed, 28 Feb 2018 10:10:02 -0400 Subject: [PATCH 3/3] Revert undefined check fix for separate PR --- src/SortableList.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/SortableList.js b/src/SortableList.js index 73fcf31..6c53748 100644 --- a/src/SortableList.js +++ b/src/SortableList.js @@ -231,10 +231,10 @@ export default class SortableList extends Component { if (rowsLayouts) { if (horizontal) { location.x = nextX; - nextX += rowsLayouts[key] ? rowsLayouts[key].width : 0; + nextX += rowsLayouts[key].width; } else { location.y = nextY; - nextY += rowsLayouts[key] ? rowsLayouts[key].height : 0; + nextY += rowsLayouts[key].height; } }