diff --git a/README.md b/README.md index bd00cdd0..a99525af 100644 --- a/README.md +++ b/README.md @@ -142,7 +142,6 @@ React Native v0.55 | SectionList | ✓ | | | StatusBar | (✓) | Mock. No equivalent web APIs. | | SwipeableFlatList | ✓ | | -| SwipeableListView | ✓ | | | Switch | ✓ | | | Text | ✓ | Missing `onLongPress` ([#1011](https://github.com/necolas/react-native-web/issues/1011)) support. | | TextInput | ✓ | Missing rich text features ([#1023](https://github.com/necolas/react-native-web/issues/1023)), and auto-expanding behaviour ([#795](https://github.com/necolas/react-native-web/issues/795)). | diff --git a/packages/babel-plugin-react-native-web/src/moduleMap.js b/packages/babel-plugin-react-native-web/src/moduleMap.js index f00dbb7e..e3cd1a88 100644 --- a/packages/babel-plugin-react-native-web/src/moduleMap.js +++ b/packages/babel-plugin-react-native-web/src/moduleMap.js @@ -46,7 +46,6 @@ module.exports = { StatusBar: true, StyleSheet: true, SwipeableFlatList: true, - SwipeableListView: true, Switch: true, Systrace: true, TVEventHandler: true, diff --git a/packages/react-native-web/src/exports/SwipeableListView/index.js b/packages/react-native-web/src/exports/SwipeableListView/index.js deleted file mode 100644 index 992d5d8a..00000000 --- a/packages/react-native-web/src/exports/SwipeableListView/index.js +++ /dev/null @@ -1,12 +0,0 @@ -/** - * Copyright (c) Nicolas Gallagher. - * 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. - * - * @flow - */ - -import SwipeableListView from '../../vendor/react-native/SwipeableListView'; -export default SwipeableListView; diff --git a/packages/react-native-web/src/index.js b/packages/react-native-web/src/index.js index cd53f014..8881a6f7 100644 --- a/packages/react-native-web/src/index.js +++ b/packages/react-native-web/src/index.js @@ -49,7 +49,6 @@ import ScrollView from './exports/ScrollView'; import SectionList from './exports/SectionList'; import StatusBar from './exports/StatusBar'; import SwipeableFlatList from './exports/SwipeableFlatList'; -import SwipeableListView from './exports/SwipeableListView'; import Switch from './exports/Switch'; import Text from './exports/Text'; import TextInput from './exports/TextInput'; @@ -138,7 +137,6 @@ export { SectionList, StatusBar, SwipeableFlatList, - SwipeableListView, Switch, Text, TextInput, diff --git a/packages/react-native-web/src/vendor/react-native/SwipeableListView/SwipeableListViewDataSource.js b/packages/react-native-web/src/vendor/react-native/SwipeableListView/SwipeableListViewDataSource.js deleted file mode 100644 index 05d8a16e..00000000 --- a/packages/react-native-web/src/vendor/react-native/SwipeableListView/SwipeableListViewDataSource.js +++ /dev/null @@ -1,113 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @providesModule SwipeableListViewDataSource - */ -'use strict'; - -import ListViewDataSource from '../ListView/ListViewDataSource'; - -/** - * Data source wrapper around ListViewDataSource to allow for tracking of - * which row is swiped open and close opened row(s) when another row is swiped - * open. - * - * See https://github.com/facebook/react-native/pull/5602 for why - * ListViewDataSource is not subclassed. - */ -class SwipeableListViewDataSource { - _previousOpenRowID: string; - _openRowID: string; - - _dataBlob: any; - _dataSource: ListViewDataSource; - - rowIdentities: Array>; - sectionIdentities: Array; - - constructor(params: Object) { - this._dataSource = new ListViewDataSource({ - getRowData: params.getRowData, - getSectionHeaderData: params.getSectionHeaderData, - rowHasChanged: (row1, row2) => { - /** - * Row needs to be re-rendered if its swiped open/close status is - * changed, or its data blob changed. - */ - return ( - (row1.id !== this._previousOpenRowID && row2.id === this._openRowID) || - (row1.id === this._previousOpenRowID && row2.id !== this._openRowID) || - params.rowHasChanged(row1, row2) - ); - }, - sectionHeaderHasChanged: params.sectionHeaderHasChanged, - }); - } - - cloneWithRowsAndSections( - dataBlob: any, - sectionIdentities: ?Array, - rowIdentities: ?Array> - ): SwipeableListViewDataSource { - this._dataSource = this._dataSource.cloneWithRowsAndSections( - dataBlob, - sectionIdentities, - rowIdentities - ); - - this._dataBlob = dataBlob; - this.rowIdentities = this._dataSource.rowIdentities; - this.sectionIdentities = this._dataSource.sectionIdentities; - - return this; - } - - // For the actual ListView to use - getDataSource(): ListViewDataSource { - return this._dataSource; - } - - getOpenRowID(): ?string { - return this._openRowID; - } - - getFirstRowID(): ?string { - /** - * If rowIdentities is specified, find the first data row from there since - * we don't want to attempt to bounce section headers. If unspecified, find - * the first data row from _dataBlob. - */ - if (this.rowIdentities) { - return this.rowIdentities[0] && this.rowIdentities[0][0]; - } - return Object.keys(this._dataBlob)[0]; - } - - getLastRowID(): ?string { - if (this.rowIdentities && this.rowIdentities.length) { - const lastSection = this.rowIdentities[this.rowIdentities.length - 1]; - if (lastSection && lastSection.length) { - return lastSection[lastSection.length - 1]; - } - } - return Object.keys(this._dataBlob)[this._dataBlob.length - 1]; - } - - setOpenRowID(rowID: string): SwipeableListViewDataSource { - this._previousOpenRowID = this._openRowID; - this._openRowID = rowID; - - this._dataSource = this._dataSource.cloneWithRowsAndSections( - this._dataBlob, - this.sectionIdentities, - this.rowIdentities - ); - - return this; - } -} - -export default SwipeableListViewDataSource; diff --git a/packages/react-native-web/src/vendor/react-native/SwipeableListView/index.js b/packages/react-native-web/src/vendor/react-native/SwipeableListView/index.js deleted file mode 100644 index fe20cc4f..00000000 --- a/packages/react-native-web/src/vendor/react-native/SwipeableListView/index.js +++ /dev/null @@ -1,211 +0,0 @@ -/** - * Copyright (c) 2015-present, Facebook, Inc. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - * - * @providesModule SwipeableListView - * @noflow - */ -'use strict'; - -import ListView from '../ListView'; -import PropTypes from 'prop-types'; -import React from 'react'; -import SwipeableListViewDataSource from './SwipeableListViewDataSource'; -import SwipeableRow from '../SwipeableRow'; - -type DefaultProps = { - bounceFirstRowOnMount: boolean, - renderQuickActions: Function, -}; - -type Props = { - bounceFirstRowOnMount: boolean, - dataSource: SwipeableListViewDataSource, - maxSwipeDistance: number | (rowData: any, sectionID: string, rowID: string) => number, - onScroll?: ?Function, - renderRow: Function, - renderQuickActions: Function, -}; - -type State = { - dataSource: Object, -}; - -/** - * A container component that renders multiple SwipeableRow's in a ListView - * implementation. This is designed to be a drop-in replacement for the - * standard React Native `ListView`, so use it as if it were a ListView, but - * with extra props, i.e. - * - * let ds = SwipeableListView.getNewDataSource(); - * ds.cloneWithRowsAndSections(dataBlob, ?sectionIDs, ?rowIDs); - * // .. - * - * - * SwipeableRow can be used independently of this component, but the main - * benefit of using this component is - * - * - It ensures that at most 1 row is swiped open (auto closes others) - * - It can bounce the 1st row of the list so users know it's swipeable - * - More to come - */ -class SwipeableListView extends React.Component { - props: Props; - state: State; - - _listViewRef: ?React.Element = null; - _shouldBounceFirstRowOnMount: boolean = false; - - static getNewDataSource(): Object { - return new SwipeableListViewDataSource({ - getRowData: (data, sectionID, rowID) => data[sectionID][rowID], - getSectionHeaderData: (data, sectionID) => data[sectionID], - rowHasChanged: (row1, row2) => row1 !== row2, - sectionHeaderHasChanged: (s1, s2) => s1 !== s2, - }); - } - - static propTypes = { - /** - * To alert the user that swiping is possible, the first row can bounce - * on component mount. - */ - bounceFirstRowOnMount: PropTypes.bool.isRequired, - /** - * Use `SwipeableListView.getNewDataSource()` to get a data source to use, - * then use it just like you would a normal ListView data source - */ - dataSource: PropTypes.instanceOf(SwipeableListViewDataSource).isRequired, - // Maximum distance to open to after a swipe - maxSwipeDistance: PropTypes.oneOfType([ - PropTypes.number, - PropTypes.func, - ]).isRequired, - // Callback method to render the swipeable view - renderRow: PropTypes.func.isRequired, - // Callback method to render the view that will be unveiled on swipe - renderQuickActions: PropTypes.func.isRequired, - }; - - static defaultProps = { - bounceFirstRowOnMount: false, - renderQuickActions: () => null, - }; - - constructor(props: Props, context: any): void { - super(props, context); - - this._shouldBounceFirstRowOnMount = this.props.bounceFirstRowOnMount; - this.state = { - dataSource: this.props.dataSource, - }; - } - - UNSAFE_componentWillReceiveProps(nextProps: Props): void { - if (this.state.dataSource.getDataSource() !== nextProps.dataSource.getDataSource()) { - this.setState({ - dataSource: nextProps.dataSource, - }); - } - } - - render(): React.Node { - return ( - { - this._listViewRef = ref; - }} - dataSource={this.state.dataSource.getDataSource()} - onScroll={this._onScroll} - renderRow={this._renderRow} - /> - ); - } - - _onScroll = (e): void => { - // Close any opens rows on ListView scroll - if (this.props.dataSource.getOpenRowID()) { - this.setState({ - dataSource: this.state.dataSource.setOpenRowID(null), - }); - } - this.props.onScroll && this.props.onScroll(e); - } - - /** - * This is a work-around to lock vertical `ListView` scrolling on iOS and - * mimic Android behaviour. Locking vertical scrolling when horizontal - * scrolling is active allows us to significantly improve framerates - * (from high 20s to almost consistently 60 fps) - */ - _setListViewScrollable(value: boolean): void { - if (this._listViewRef && typeof this._listViewRef.setNativeProps === 'function') { - this._listViewRef.setNativeProps({ - scrollEnabled: value, - }); - } - } - - // Passing through ListView's getScrollResponder() function - getScrollResponder(): ?Object { - if (this._listViewRef && typeof this._listViewRef.getScrollResponder === 'function') { - return this._listViewRef.getScrollResponder(); - } - } - - // This enables rows having variable width slideoutView. - _getMaxSwipeDistance(rowData: Object, sectionID: string, rowID: string): number { - if (typeof this.props.maxSwipeDistance === 'function') { - return this.props.maxSwipeDistance(rowData, sectionID, rowID); - } - - return this.props.maxSwipeDistance; - } - - _renderRow = (rowData: Object, sectionID: string, rowID: string): React.Element => { - const slideoutView = this.props.renderQuickActions(rowData, sectionID, rowID); - - // If renderQuickActions is unspecified or returns falsey, don't allow swipe - if (!slideoutView) { - return this.props.renderRow(rowData, sectionID, rowID); - } - - let shouldBounceOnMount = false; - if (this._shouldBounceFirstRowOnMount) { - this._shouldBounceFirstRowOnMount = false; - shouldBounceOnMount = rowID === this.props.dataSource.getFirstRowID(); - } - - return ( - this._onOpen(rowData.id)} - onClose={() => this._onClose(rowData.id)} - onSwipeEnd={() => this._setListViewScrollable(true)} - onSwipeStart={() => this._setListViewScrollable(false)} - shouldBounceOnMount={shouldBounceOnMount}> - {this.props.renderRow(rowData, sectionID, rowID)} - - ); - }; - - _onOpen(rowID: string): void { - this.setState({ - dataSource: this.state.dataSource.setOpenRowID(rowID), - }); - } - - _onClose(rowID: string): void { - this.setState({ - dataSource: this.state.dataSource.setOpenRowID(null), - }); - } -} - -export default SwipeableListView;