From a38ac6f662ffe5f156fa7425c7ff3295b4a6b23d Mon Sep 17 00:00:00 2001 From: stealthanthrax Date: Mon, 17 Aug 2020 01:39:47 +0530 Subject: [PATCH 1/2] Merged Multi Lists and Flat List in One --- packages/rn-tester/Podfile.lock | 54 ++--- .../js/components/ListExampleShared.js | 18 +- .../js/examples/FlatList/FlatListExample.js | 35 +++- .../MultiColumn/MultiColumnExample.js | 189 ------------------ .../js/utils/RNTesterList.android.js | 4 - .../rn-tester/js/utils/RNTesterList.ios.js | 5 - 6 files changed, 69 insertions(+), 236 deletions(-) delete mode 100644 packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js diff --git a/packages/rn-tester/Podfile.lock b/packages/rn-tester/Podfile.lock index b592e756e6f48f..82c7040c081a8f 100644 --- a/packages/rn-tester/Podfile.lock +++ b/packages/rn-tester/Podfile.lock @@ -489,8 +489,8 @@ SPEC CHECKSUMS: CocoaAsyncSocket: 694058e7c0ed05a9e217d1b3c7ded962f4180845 CocoaLibEvent: 2fab71b8bd46dd33ddb959f7928ec5909f838e3f DoubleConversion: cde416483dac037923206447da6e1454df403714 - FBLazyVector: 4f846f6dbe3e8641eed90bc8c08c6e45ffbd6f9e - FBReactNativeSpec: 015ce97eac985833c513751e41d44ee887767169 + FBLazyVector: 5863c5c79828af7aa986e60bc219cb7d7a26e214 + FBReactNativeSpec: 31243fde32702d40228d2790ac3f01490fa42840 Flipper: 33585e2d9810fe5528346be33bcf71b37bb7ae13 Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41 Flipper-Folly: c12092ea368353b58e992843a990a3225d4533c3 @@ -501,31 +501,31 @@ SPEC CHECKSUMS: Folly: b73c3869541e86821df3c387eb0af5f65addfab4 glog: 40a13f7840415b9a77023fbcae0f1e6f43192af3 OpenSSL-Universal: 8b48cc0d10c1b2923617dfe5c178aa9ed2689355 - RCTRequired: 34582e9b3ebe69f244e091f37218d318406d5c4a - RCTTypeSafety: 1ade47a69b092cddf1e4ea21e0c5bdc65cc950b4 - React: cafb3c2321f7df55ce90dbf29d513799a79e4418 - React-callinvoker: 0dada022d38b73e6e15b33e2a96476153f79bbf6 - React-Core: 6c6f6c40bb1e031de8a0fafce08c010edfef09ab - React-CoreModules: d13d148c851af5780f864be74bc2165140923dc7 - React-cxxreact: 4661b3295e62c6eaada084e2f826c70c71ef11ea - React-jsi: fe94132da767bfc4801968c2a12abae43e9a833e - React-jsiexecutor: 959bb48c75a3bfc1b1d2b991087a6d8df721cbcf - React-jsinspector: 7fbf9b42b58b02943a0d89b0ba9fff0070f2de98 - React-perflogger: 1f668f3e4d1adef1fafb3b95e7d6cf922113fe31 - React-RCTActionSheet: 51c43beeb74ef41189e87fe9823e53ebf6210359 - React-RCTAnimation: 9d09196c641c1ebfef3a4e9ae670bcda5fadb420 - React-RCTBlob: 715489626cf44d28ee51e5277a4d559167351696 - React-RCTImage: 19151d2d071b05c3832a0b212473cafa4ea8948f - React-RCTLinking: 7c94c0f2fcc658cb4043dacb4f6621dca2f8f8b5 - React-RCTNetwork: 7596e84acacd5d0674e9743b55c5bf61a626af69 - React-RCTPushNotification: 88c9f47ff0d4391d5136d70745f15713cdc5f6bb - React-RCTSettings: a29c61f85f535ba2eff54d80bef2ea3cdb6e5fba - React-RCTTest: cfe25fcf70b04a747dba4326105db398250caa9a - React-RCTText: 6c01963d3e562109f5548262b09b1b2bc260dd60 - React-RCTVibration: d42d73dafd9f63cf758656ee743aa80c566798ff - React-runtimeexecutor: 60dd6204a13f68a1aa1118870edcc604a791df2b - ReactCommon: 511b4a9ea129c129c6dbc982942007d195903a9a - Yoga: f7fa200d8c49f97b54c9421079e781fb900b5cae + RCTRequired: 04831261fc2b840f6634ac44cf840223ec0f7777 + RCTTypeSafety: 050011b0060d7df325977843dfcab82dedc37630 + React: d1cedd4c298a9499ae3316a9cf9b52fb4544e438 + React-callinvoker: 827e4e6b4e4c62ff82d2578bc547715a8e3a5fcb + React-Core: eb2786084e924a5636ddc701791fe9707cd0da2f + React-CoreModules: 5be7a9f6c2abc4c6c4f3e14743e96be6811a767b + React-cxxreact: 4860d6b373d6eefa1f8310dd41c6ab6dcaef8a1e + React-jsi: c18ea4f497b06dd4301520e3cf7bc4c343f15d2a + React-jsiexecutor: 5a6506adcc8e193d9e6633a89f89d6bdb952ef80 + React-jsinspector: 338c1575fd978f6b67eb549e53729a5a134b9922 + React-perflogger: bc95b582eadcbd03243d1662b6355af5c8a74119 + React-RCTActionSheet: e0e332599b51314fa27d39209eba0e419e40e268 + React-RCTAnimation: 337d70d6c5473d6c6648e0a7d6c35076e194da71 + React-RCTBlob: 4bd8399efc93035d6e5ea94286766cee10278b42 + React-RCTImage: 7fbb61752852b839362ef5f8994fe8b598bd5871 + React-RCTLinking: 892f99265651a817ddc31afcab4a62337d94772e + React-RCTNetwork: 2d8af83ec9d594d53713a83ec0766c74d4153523 + React-RCTPushNotification: fe83f8ee632d5fcc028a6aa3593c865c639b665f + React-RCTSettings: aa36dd52e89d269589454f9689341c7e1ddd0ce4 + React-RCTTest: daf32349e5b703ed949bd7293b3fd6b3eca59850 + React-RCTText: ab0278db3379fd35fa8e621dc25e28e36f272e34 + React-RCTVibration: de031eef00052f649e291810d77081b6e75f4b25 + React-runtimeexecutor: d3fd50d59e453bfc9301f6caebdf29dcd130f157 + ReactCommon: 3e510df01fc5b63f19e306fb7e4ddb6278fa3bad + Yoga: 24c6ad3bec82b78482e73802574fc478b7f67f6d YogaKit: f782866e155069a2cca2517aafea43200b01fd5a PODFILE CHECKSUM: 3045d3456f0f2268f15db9a527839e6a19e6071c diff --git a/packages/rn-tester/js/components/ListExampleShared.js b/packages/rn-tester/js/components/ListExampleShared.js index 522d72e3d93318..559a1345d5ce5f 100644 --- a/packages/rn-tester/js/components/ListExampleShared.js +++ b/packages/rn-tester/js/components/ListExampleShared.js @@ -39,7 +39,7 @@ function genItemData(count: number, start: number = 0): Array { const itemHash = Math.abs(hashCode('Item ' + ii)); dataBlob.push({ title: 'Item ' + ii, - text: LOREM_IPSUM.substr(0, (itemHash % 301) + 20), + text: LIST_CONTENT[itemHash % LIST_CONTENT.length], key: String(ii), pressed: false, }); @@ -195,12 +195,16 @@ const THUMB_URLS = [ require('../assets/victory.png'), ]; -const LOREM_IPSUM = - 'Lorem ipsum dolor sit amet, ius ad pertinax oportere accommodare, an vix \ -civibus corrumpit referrentur. Te nam case ludus inciderint, te mea facilisi adipiscing. Sea id \ -integre luptatum. In tota sale consequuntur nec. Erat ocurreret mei ei. Eu paulo sapientem \ -vulputate est, vel an accusam intellegam interesset. Nam eu stet pericula reprimique, ea vim illud \ -modus, putant invidunt reprehendunt ne qui.'; +const LIST_CONTENT = [ + 'Crunchy Croissants', + 'Braised Leeks with Mozzarella & Fried Egg', + 'Lamb Salad with Fregola', + 'Smoked Pork Jowl with Pickles', + 'Malted Custard French Toast', + 'Meat Pie', + 'Macarons', + 'Squeaky Cheese' +]; /* eslint no-bitwise: 0 */ function hashCode(str: string): number { diff --git a/packages/rn-tester/js/examples/FlatList/FlatListExample.js b/packages/rn-tester/js/examples/FlatList/FlatListExample.js index e174e782b0512a..aaf75ce812ff94 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatListExample.js +++ b/packages/rn-tester/js/examples/FlatList/FlatListExample.js @@ -59,6 +59,10 @@ type State = {| empty: boolean, useFlatListItemComponent: boolean, fadingEdgeLength: number, + multiColor: number, + header: boolean, + footer: boolean, + numColumns: number, |}; class FlatListExample extends React.PureComponent { @@ -74,6 +78,10 @@ class FlatListExample extends React.PureComponent { empty: false, useFlatListItemComponent: false, fadingEdgeLength: 0, + header: false, + footer: false, + numColumns: 1, + multiColumn: false }; _onChangeFilterText = filterText => { @@ -131,6 +139,9 @@ class FlatListExample extends React.PureComponent { {renderSmallSwitchOption(this, 'empty')} {renderSmallSwitchOption(this, 'debug')} {renderSmallSwitchOption(this, 'useFlatListItemComponent')} + {renderSmallSwitchOption(this, 'header')} + {renderSmallSwitchOption(this, 'footer')} + {renderSmallSwitchOption(this, 'multiColumn')} {Platform.OS === 'android' && ( { /> )} + { + this.state.multiColumn === true && ( + + + this.setState({ + numColumns: Number(event.nativeEvent.text) + }) + } + /> + + ) + } @@ -152,8 +178,8 @@ class FlatListExample extends React.PureComponent { } - ListFooterComponent={FooterComponent} + ListHeaderComponent={this.state.header ? : null} + ListFooterComponent={this.state.footer ? FooterComponent : null} ListEmptyComponent={ListEmptyComponent} data={this.state.empty ? [] : filteredData} debug={this.state.debug} @@ -165,11 +191,12 @@ class FlatListExample extends React.PureComponent { inverted={this.state.inverted} key={ (this.state.horizontal ? 'h' : 'v') + - (this.state.fixedHeight ? 'f' : 'd') + (this.state.fixedHeight ? 'f' : 'd') + + this.state.numColumns.toString() } keyboardShouldPersistTaps="always" keyboardDismissMode="on-drag" - numColumns={1} + numColumns={this.state.horizontal ? 1 : this.state.numColumns} onEndReached={this._onEndReached} onRefresh={this._onRefresh} onScroll={ diff --git a/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js b/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js deleted file mode 100644 index 7fc8c9c8964104..00000000000000 --- a/packages/rn-tester/js/examples/MultiColumn/MultiColumnExample.js +++ /dev/null @@ -1,189 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @format - * @flow - */ - -'use strict'; -const RNTesterPage = require('../../components/RNTesterPage'); -const React = require('react'); - -const infoLog = require('../../../../../Libraries/Utilities/infoLog'); - -const { - FooterComponent, - HeaderComponent, - ItemComponent, - PlainInput, - SeparatorComponent, - genItemData, - getItemLayout, - pressItem, - renderSmallSwitchOption, -} = require('../../components/ListExampleShared'); -const {FlatList, StyleSheet, Text, View, Alert} = require('react-native'); - -import type {Item} from '../../components/ListExampleShared'; - -class MultiColumnExample extends React.PureComponent< - $FlowFixMeProps, - $FlowFixMeState, -> { - state: - | any - | {| - data: Array, - filterText: string, - fixedHeight: boolean, - logViewable: boolean, - numColumns: number, - virtualized: boolean, - |} = { - data: genItemData(1000), - filterText: '', - fixedHeight: true, - logViewable: false, - numColumns: 2, - virtualized: true, - }; - _onChangeFilterText = filterText => { - this.setState(() => ({filterText})); - }; - _onChangeNumColumns = numColumns => { - this.setState(() => ({numColumns: Number(numColumns)})); - }; - render(): React.Node { - const filterRegex = new RegExp(String(this.state.filterText), 'i'); - const filter = item => - filterRegex.test(item.text) || filterRegex.test(item.title); - const filteredData = this.state.data.filter(filter); - return ( - - MultiColumn'} - noSpacer={true} - noScroll={true}> - - - - numColumns: - - - - {renderSmallSwitchOption(this, 'virtualized')} - {renderSmallSwitchOption(this, 'fixedHeight')} - {renderSmallSwitchOption(this, 'logViewable')} - - - - - Alert.alert('Alert', 'onRefresh: nothing to refresh :P') - } - refreshing={false} - renderItem={this._renderItemComponent} - disableVirtualization={!this.state.virtualized} - onViewableItemsChanged={this._onViewableItemsChanged} - /> - - ); - } - _getItemLayout( - data: any, - index: number, - ): { - length: number, - offset: number, - index: number, - ... - } { - const length = - getItemLayout(data, index).length + 2 * (CARD_MARGIN + BORDER_WIDTH); - return {length, offset: length * index, index}; - } - _renderItemComponent = ({item}) => { - return ( - - - - ); - }; - // This is called when items change viewability by scrolling into or out of the viewable area. - _onViewableItemsChanged = (info: { - changed: Array<{ - key: string, - isViewable: boolean, - item: {columns: Array<*>, ...}, - index: ?number, - section?: any, - ... - }>, - ... - }) => { - // Impressions can be logged here - if (this.state.logViewable) { - infoLog( - 'onViewableItemsChanged: ', - info.changed.map(v => ({...v, item: '...'})), - ); - } - }; - _pressItem = (key: string) => { - pressItem(this, key); - }; -} - -const CARD_MARGIN = 4; -const BORDER_WIDTH = 1; - -const styles = StyleSheet.create({ - card: { - margin: CARD_MARGIN, - borderRadius: 10, - flex: 1, - overflow: 'hidden', - borderColor: 'lightgray', - borderWidth: BORDER_WIDTH, - }, - row: { - flexDirection: 'row', - alignItems: 'center', - }, - searchRow: { - padding: 10, - }, -}); - -exports.title = 'FlatList - MultiColumn'; -exports.description = 'Performant, scrollable grid of data.'; -exports.examples = [ - { - title: 'Simple flat list multi column', - render: function(): React.Element { - return ; - }, - }, -]; diff --git a/packages/rn-tester/js/utils/RNTesterList.android.js b/packages/rn-tester/js/utils/RNTesterList.android.js index c3afb2b83df1c9..05a7020b9c4aa7 100644 --- a/packages/rn-tester/js/utils/RNTesterList.android.js +++ b/packages/rn-tester/js/utils/RNTesterList.android.js @@ -44,10 +44,6 @@ const ComponentExamples: Array = [ key: 'ModalExample', module: require('../examples/Modal/ModalExample'), }, - { - key: 'MultiColumnExample', - module: require('../examples/MultiColumn/MultiColumnExample'), - }, { key: 'NewAppScreenExample', module: require('../examples/NewAppScreen/NewAppScreenExample'), diff --git a/packages/rn-tester/js/utils/RNTesterList.ios.js b/packages/rn-tester/js/utils/RNTesterList.ios.js index 611400d2814251..a983c8ea08c40b 100644 --- a/packages/rn-tester/js/utils/RNTesterList.ios.js +++ b/packages/rn-tester/js/utils/RNTesterList.ios.js @@ -70,11 +70,6 @@ const ComponentExamples: Array = [ module: require('../examples/Modal/ModalExample'), supportsTVOS: true, }, - { - key: 'MultiColumnExample', - module: require('../examples/MultiColumn/MultiColumnExample'), - supportsTVOS: true, - }, { key: 'NewAppScreenExample', module: require('../examples/NewAppScreen/NewAppScreenExample'), From e24750bb717825c96246f4ff2d9080944c32d940 Mon Sep 17 00:00:00 2001 From: stealthanthrax Date: Mon, 17 Aug 2020 13:47:26 +0530 Subject: [PATCH 2/2] Code Styling Fix --- packages/rn-tester/js/examples/FlatList/FlatListExample.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/rn-tester/js/examples/FlatList/FlatListExample.js b/packages/rn-tester/js/examples/FlatList/FlatListExample.js index aaf75ce812ff94..eb9fa92be981d8 100644 --- a/packages/rn-tester/js/examples/FlatList/FlatListExample.js +++ b/packages/rn-tester/js/examples/FlatList/FlatListExample.js @@ -78,8 +78,8 @@ class FlatListExample extends React.PureComponent { empty: false, useFlatListItemComponent: false, fadingEdgeLength: 0, - header: false, - footer: false, + header: true, + footer: true, numColumns: 1, multiColumn: false }; @@ -179,7 +179,7 @@ class FlatListExample extends React.PureComponent { fadingEdgeLength={this.state.fadingEdgeLength} ItemSeparatorComponent={ItemSeparatorComponent} ListHeaderComponent={this.state.header ? : null} - ListFooterComponent={this.state.footer ? FooterComponent : null} + ListFooterComponent={this.state.footer ? : null} ListEmptyComponent={ListEmptyComponent} data={this.state.empty ? [] : filteredData} debug={this.state.debug}