From fd198b71dc643d6ace6da2fbc5cc7eabc744af15 Mon Sep 17 00:00:00 2001 From: Christopher Chedeau Date: Wed, 4 Mar 2015 08:02:34 -0800 Subject: [PATCH] [ReactNative] Use spread operator and .propTypes for ScrollView/ListView --- Libraries/Components/ListView/ListView.js | 148 +++++++++--------- .../Components/ScrollView/ScrollView.ios.js | 15 +- 2 files changed, 78 insertions(+), 85 deletions(-) diff --git a/Libraries/Components/ListView/ListView.js b/Libraries/Components/ListView/ListView.js index 086112724..aa2f82e28 100644 --- a/Libraries/Components/ListView/ListView.js +++ b/Libraries/Components/ListView/ListView.js @@ -88,80 +88,80 @@ var ListView = React.createClass({ * - renderRow(rowData, sectionID, rowID); * - renderSectionHeader(sectionData, sectionID); */ - propTypes: - merge( - ScrollView.PropTypes, { - dataSource: PropTypes.instanceOf(ListViewDataSource).isRequired, - /** - * (rowData, sectionID, rowID) => renderable - * Takes a data entry from the data source and its ids and should return - * a renderable component to be rendered as the row. By default the data - * is exactly what was put into the data source, but it's also possible to - * provide custom extractors. - */ - renderRow: PropTypes.func.isRequired, - /** - * How many rows to render on initial component mount. Use this to make - * it so that the first screen worth of data apears at one time instead of - * over the course of multiple frames. - */ - initialListSize: PropTypes.number, - /** - * Called when all rows have been rendered and the list has been scrolled - * to within onEndReachedThreshold of the bottom. The native scroll - * event is provided. - */ - onEndReached: PropTypes.func, - /** - * Threshold in pixels for onEndReached. - */ - onEndReachedThreshold: PropTypes.number, - /** - * Number of rows to render per event loop. - */ - pageSize: PropTypes.number, - /** - * () => renderable - * - * The header and footer are always rendered (if these props are provided) - * on every render pass. If they are expensive to re-render, wrap them - * in StaticContainer or other mechanism as appropriate. Footer is always - * at the bottom of the list, and header at the top, on every render pass. - */ - renderFooter: PropTypes.func, - renderHeader: PropTypes.func, - /** - * (sectionData, sectionID) => renderable - * - * If provided, a sticky header is rendered for this section. The sticky - * behavior means that it will scroll with the content at the top of the - * section until it reaches the top of the screen, at which point it will - * stick to the top until it is pushed off the screen by the next section - * header. - */ - renderSectionHeader: PropTypes.func, - /** - * How early to start rendering rows before they come on screen, in - * pixels. - */ - scrollRenderAheadDistance: React.PropTypes.number, - /** - * (visibleRows, changedRows) => void - * - * Called when the set of visible rows changes. `visibleRows` maps - * { sectionID: { rowID: true }} for all the visible rows, and - * `changedRows` maps { sectionID: { rowID: true | false }} for the rows - * that have changed their visibility, with true indicating visible, and - * false indicating the view has moved out of view. - */ - onChangeVisibleRows: React.PropTypes.func, - /** - * An experimental performance optimization for improving scroll perf of - * large lists, used in conjunction with overflow: 'hidden' on the row - * containers. Use at your own risk. - */ - removeClippedSubviews: React.PropTypes.bool, - }), + propTypes: { + ...ScrollView.propTypes, + + dataSource: PropTypes.instanceOf(ListViewDataSource).isRequired, + /** + * (rowData, sectionID, rowID) => renderable + * Takes a data entry from the data source and its ids and should return + * a renderable component to be rendered as the row. By default the data + * is exactly what was put into the data source, but it's also possible to + * provide custom extractors. + */ + renderRow: PropTypes.func.isRequired, + /** + * How many rows to render on initial component mount. Use this to make + * it so that the first screen worth of data apears at one time instead of + * over the course of multiple frames. + */ + initialListSize: PropTypes.number, + /** + * Called when all rows have been rendered and the list has been scrolled + * to within onEndReachedThreshold of the bottom. The native scroll + * event is provided. + */ + onEndReached: PropTypes.func, + /** + * Threshold in pixels for onEndReached. + */ + onEndReachedThreshold: PropTypes.number, + /** + * Number of rows to render per event loop. + */ + pageSize: PropTypes.number, + /** + * () => renderable + * + * The header and footer are always rendered (if these props are provided) + * on every render pass. If they are expensive to re-render, wrap them + * in StaticContainer or other mechanism as appropriate. Footer is always + * at the bottom of the list, and header at the top, on every render pass. + */ + renderFooter: PropTypes.func, + renderHeader: PropTypes.func, + /** + * (sectionData, sectionID) => renderable + * + * If provided, a sticky header is rendered for this section. The sticky + * behavior means that it will scroll with the content at the top of the + * section until it reaches the top of the screen, at which point it will + * stick to the top until it is pushed off the screen by the next section + * header. + */ + renderSectionHeader: PropTypes.func, + /** + * How early to start rendering rows before they come on screen, in + * pixels. + */ + scrollRenderAheadDistance: React.PropTypes.number, + /** + * (visibleRows, changedRows) => void + * + * Called when the set of visible rows changes. `visibleRows` maps + * { sectionID: { rowID: true }} for all the visible rows, and + * `changedRows` maps { sectionID: { rowID: true | false }} for the rows + * that have changed their visibility, with true indicating visible, and + * false indicating the view has moved out of view. + */ + onChangeVisibleRows: React.PropTypes.func, + /** + * An experimental performance optimization for improving scroll perf of + * large lists, used in conjunction with overflow: 'hidden' on the row + * containers. Use at your own risk. + */ + removeClippedSubviews: React.PropTypes.bool, + }, /** * Exports some data, e.g. for perf investigations or analytics. diff --git a/Libraries/Components/ScrollView/ScrollView.ios.js b/Libraries/Components/ScrollView/ScrollView.ios.js index 317b98686..08202f445 100644 --- a/Libraries/Components/ScrollView/ScrollView.ios.js +++ b/Libraries/Components/ScrollView/ScrollView.ios.js @@ -45,9 +45,10 @@ var keyboardDismissModeConstants = { * view from becoming the responder. */ - var RKScrollViewPropTypes = merge( - ScrollViewPropTypes, - { +var ScrollView = React.createClass({ + propTypes: { + ...ScrollViewPropTypes, + /** * When true, the scroll view bounces horizontally when it reaches the end * even if the content is smaller than the scroll view itself. The default @@ -153,16 +154,8 @@ var keyboardDismissModeConstants = { * The current scale of the scroll view content. The default value is 1.0. */ zoomScale: nativePropType(PropTypes.number), - } -); - -var ScrollView = React.createClass({ - statics: { - PropTypes: RKScrollViewPropTypes, }, - propTypes: RKScrollViewPropTypes, - mixins: [ScrollResponder.Mixin], getInitialState: function() {