diff --git a/src/SortableList.js b/src/SortableList.js index 6191ebc..f866cc9 100644 --- a/src/SortableList.js +++ b/src/SortableList.js @@ -27,8 +27,12 @@ export default class SortableList extends Component { showsHorizontalScrollIndicator: PropTypes.bool, refreshControl: PropTypes.element, autoscrollAreaSize: PropTypes.number, + snapToAlignment: PropTypes.string, rowActivationTime: PropTypes.number, manuallyActivateRows: PropTypes.bool, + scrollEventThrottle: PropTypes.number, + decelerationRate: PropTypes.oneOf([PropTypes.string, PropTypes.number]), + pagingEnabled: PropTypes.bool, nestedScrollEnabled: PropTypes.bool, disableIntervalMomentum: PropTypes.bool, @@ -39,15 +43,21 @@ export default class SortableList extends Component { onChangeOrder: PropTypes.func, onActivateRow: PropTypes.func, onReleaseRow: PropTypes.func, + onScroll: PropTypes.func, }; static defaultProps = { sortingEnabled: true, scrollEnabled: true, autoscrollAreaSize: 60, + snapToAlignment: 'start', manuallyActivateRows: false, showsVerticalScrollIndicator: true, - showsHorizontalScrollIndicator: true + showsHorizontalScrollIndicator: true, + scrollEventThrottle: 2, + decelerationRate: 'normal', + pagingEnabled: false, + onScroll: () => {} } /** @@ -134,12 +144,15 @@ export default class SortableList extends Component { } componentDidUpdate(prevProps, prevState) { - const {data} = this.state; + const {data, scrollEnabled} = this.state; const {data: prevData} = prevState; if (data && prevData && !shallowEqual(data, prevData)) { this._onUpdateLayouts(); } + if (prevProps.scrollEnabled !== scrollEnabled) { + this.setState({scrollEnabled: prevProps.scrollEnabled}) + } } scrollBy({dx = 0, dy = 0, animated = false}) { @@ -194,7 +207,20 @@ export default class SortableList extends Component { } render() { - let {contentContainerStyle, innerContainerStyle, horizontal, style, showsVerticalScrollIndicator, showsHorizontalScrollIndicator, nestedScrollEnabled, disableIntervalMomentum} = this.props; + let { + contentContainerStyle, + innerContainerStyle, + horizontal, + style, + showsVerticalScrollIndicator, + showsHorizontalScrollIndicator, + snapToAlignment, + scrollEventThrottle, + decelerationRate, + pagingEnabled, + nestedScrollEnabled, + disableIntervalMomentum, + } = this.props; const {animated, contentHeight, contentWidth, scrollEnabled} = this.state; const containerStyle = StyleSheet.flatten([style, {opacity: Number(animated)}]) innerContainerStyle = [ @@ -219,11 +245,15 @@ export default class SortableList extends Component { ref={this._onRefScrollView} horizontal={horizontal} contentContainerStyle={contentContainerStyle} - scrollEventThrottle={2} + scrollEventThrottle={scrollEventThrottle} + pagingEnabled={pagingEnabled} + decelerationRate={decelerationRate} scrollEnabled={scrollEnabled} showsHorizontalScrollIndicator={showsHorizontalScrollIndicator} showsVerticalScrollIndicator={showsVerticalScrollIndicator} - onScroll={this._onScroll}> + snapToAlignment={snapToAlignment} + onScroll={this._onScroll} + > {this._renderHeader()} {this._renderRows()} @@ -625,8 +655,9 @@ export default class SortableList extends Component { } }; - _onScroll = ({nativeEvent: {contentOffset}}) => { - this._contentOffset = contentOffset; + _onScroll = (e) => { + this._contentOffset = e.nativeEvent.contentOffset; + this.props.onScroll(e) }; _onRefContainer = (component) => {