Fix req. cycles, implement FlatList/SectionList, use react-native-web…

…view.
shoutem · Jul 23, 2019 · aa35533 · aa35533
1 parent b8b1972
commit aa35533
Show file tree

Hide file tree

Showing 18 changed files with 381 additions and 395 deletions.
diff --git a/components/DropDownMenu/DropDownModal.js b/components/DropDownMenu/DropDownModal.js
@@ -2,22 +2,22 @@ import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
 import {
   Modal,
-  ListView,
   LayoutAnimation,
   Dimensions,
   NativeModules,
 } from 'react-native';
 import _ from 'lodash';
 
-import { connectStyle, changeColorAlpha } from '@shoutem/theme';
 import { TimingDriver, FadeIn, ZoomOut } from '@shoutem/animation';
+import { connectStyle, changeColorAlpha } from '@shoutem/theme';
 
 import { Button } from '../Button';
 import { Icon } from '../Icon';
-import { Text } from '../Text';
-import { View } from '../View';
 import { LinearGradient } from '../LinearGradient';
+import { ListView } from '../ListView';
+import { Text } from '../Text';
 import { TouchableOpacity } from '../TouchableOpacity';
+import { View } from '../View';
 
 const window = Dimensions.get('window');
 
@@ -76,17 +76,18 @@ class DropDownModal extends PureComponent {
 
   constructor(props) {
     super(props);
-    this.state = {
-      optionHeight: 0,
-      shouldRenderModalContent: false,
-    };
+
     this.close = this.close.bind(this);
     this.emitOnOptionSelectedEvent = this.emitOnOptionSelectedEvent.bind(this);
     this.renderGradient = this.renderGradient.bind(this);
     this.renderRow = this.renderRow.bind(this);
     this.selectOption = this.selectOption.bind(this);
     this.onOptionLayout = this.onOptionLayout.bind(this);
-    this.ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
+
+    this.state = {
+      optionHeight: 0,
+      shouldRenderModalContent: false,
+    };
   }
 
   componentWillMount() {
@@ -242,12 +243,13 @@ class DropDownModal extends PureComponent {
   render() {
     const { titleProperty, options, style } = this.props;
     const { shouldRenderModalContent } = this.state;
+
     if (_.size(options) === 0) {
       return null;
     }
 
     const listViewStyle = this.resolveListViewStyle();
-    const dataSource = this.ds.cloneWithRows(options.filter((option) => option[titleProperty]));
+    const data = options.filter((option) => option[titleProperty]);
 
     return (
       <Modal
@@ -260,8 +262,7 @@ class DropDownModal extends PureComponent {
             <View style={style.modal} styleName="vertical">
               {shouldRenderModalContent ?
                 <ListView
-                  scrollRenderAheadDistance={50}
-                  dataSource={dataSource}
+                  data={data}
                   renderRow={this.renderRow}
                   style={listViewStyle}
                   renderFooter={this.renderFooter}

diff --git a/components/LinearGradient.js b/components/LinearGradient.js
@@ -1,22 +1,26 @@
 import React, { PureComponent } from 'react';
 import RNLinearGradient from 'react-native-linear-gradient';
 import _ from 'lodash';
+
 import { connectAnimation } from '@shoutem/animation';
 import { connectStyle } from '@shoutem/theme';
 
-const RNLinearGradientPropsKeys = Object.keys(RNLinearGradient.propTypes);
+const RNLinearGradientPropsKeys = ['start', 'end', 'colors', 'locations'];
 
 class LinearGradient extends PureComponent {
   render () {
     const { props } = this;
 
-    const style = { ..._.omit(props.style, RNLinearGradientPropsKeys) };
+    const styleWithOmissions = _.omit(props.style, RNLinearGradientPropsKeys);
+    const linearGradientProps = {
+      ...props,
+      ..._.pick(props.style, RNLinearGradientPropsKeys),
+    };
 
     return (
       <RNLinearGradient
-        {...props}
-        {..._.pick(props.style, RNLinearGradientPropsKeys)}
-        style={style}
+        {...linearGradientProps}
+        style={styleWithOmissions}
       >
         {props.children}
       </RNLinearGradient>

diff --git a/components/ListView.js b/components/ListView.js
@@ -2,7 +2,8 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import {
   View,
-  ListView as RNListView,
+  FlatList,
+  SectionList,
   RefreshControl,
   StatusBar,
   Platform,
@@ -12,6 +13,8 @@ import _ from 'lodash';
 
 import { connectStyle } from '@shoutem/theme';
 
+import { Caption } from './Text';
+import { Divider } from './Divider';
 import { Spinner } from './Spinner';
 
 const scrollViewProps = _.keys(ScrollView.propTypes);
@@ -23,49 +26,6 @@ const Status = {
   IDLE: 'idle',
 };
 
-/**
- * Provides dataSource to ListView.
- * Clones items and group them by section if needed.
- */
-class ListDataSource {
-  constructor(config, getSectionId) {
-    this.getSectionId = getSectionId;
-    this.withSections = !!config.sectionHeaderHasChanged;
-    this.dataSource = new RNListView.DataSource(config);
-  }
-
-  /**
-   * Transforms items list ([...items]) to [[...sectionItems], [...sectionItems]]
-   * @param data
-   * @returns {*}
-   */
-  groupItemsIntoSections(data) {
-    let prevSectionId;
-    return data.reduce((sections, item) => {
-      const sectionId = this.getSectionId(item);
-      if (prevSectionId !== sectionId) {
-        prevSectionId = sectionId;
-        sections.push([]);
-      }
-      const lastSectionIndex = sections.length - 1;
-      sections[lastSectionIndex].push(item);
-      return sections;
-    }, []);
-  }
-
-  /**
-   * Transforms items list [<item>, <item>]
-   * @param data
-   * @returns {*}
-   */
-  clone(data) {
-    if (this.withSections) {
-      return this.dataSource.cloneWithRowsAndSections(this.groupItemsIntoSections(data));
-    }
-    return this.dataSource.cloneWithRows(data);
-  }
-}
-
 class ListView extends Component {
   static propTypes = {
     autoHideHeader: PropTypes.bool,
@@ -75,12 +35,14 @@ class ListView extends Component {
     onLoadMore: PropTypes.func,
     onRefresh: PropTypes.func,
     getSectionId: PropTypes.func,
+    sections: PropTypes.object,
     renderRow: PropTypes.func,
     renderHeader: PropTypes.func,
     renderFooter: PropTypes.func,
     renderSectionHeader: PropTypes.func,
     scrollDriver: PropTypes.object,
-    // TODO(Braco) - add render separator
+    hasFeaturedItem: PropTypes.bool,
+    renderFeaturedItem: PropTypes.func,
   };
 
   constructor(props, context) {
@@ -92,25 +54,12 @@ class ListView extends Component {
     this.renderRefreshControl = this.renderRefreshControl.bind(this);
     this.listView = null;
 
-
-    this.listDataSource = new ListDataSource({
-      rowHasChanged: (r1, r2) => r1 !== r2,
-      sectionHeaderHasChanged: props.renderSectionHeader ? (s1, s2) => s1 !== s2 : undefined,
-      getSectionHeaderData: (dataBlob, sectionId) => props.getSectionId(dataBlob[sectionId][0]),
-    }, props.getSectionId);
-
-
     this.state = {
       status: props.loading ? Status.LOADING : Status.IDLE,
-      dataSource: this.listDataSource.clone(props.data),
     };
   }
 
   componentWillReceiveProps(nextProps) {
-    if (nextProps.data !== this.props.data) {
-      this.setState({ dataSource: this.listDataSource.clone(nextProps.data) });
-    }
-
     if (nextProps.loading !== this.props.loading) {
       this.setLoading(nextProps.loading);
     }
@@ -153,26 +102,46 @@ class ListView extends Component {
     // configuration
     // default load more threshold
     mappedProps.onEndReachedThreshold = 40;
-    // React native warning
-    // NOTE: In react 0.23 it can't be set to false
-    mappedProps.enableEmptySections = true;
 
     // style
     mappedProps.style = props.style.list;
-
     mappedProps.contentContainerStyle = props.style.listContent;
 
     // rendering
     mappedProps.renderHeader = this.createRenderHeader(props.renderHeader, props.autoHideHeader);
-    mappedProps.renderRow = props.renderRow;
-    mappedProps.renderFooter = this.renderFooter;
-    mappedProps.renderSectionHeader = props.renderSectionHeader;
+    mappedProps.renderItem = (data) => props.renderRow(data.item);
+    mappedProps.ListFooterComponent = this.renderFooter;
+
+    if (props.hasFeaturedItem && !props.sections) {
+      mappedProps.sections = [
+        { data: [props.data[0]], renderItem: (data) => props.renderFeaturedItem(data.item) },
+        { data: props.data.slice(1) },
+      ]
+    }
+
+    if (props.renderSectionHeader) {
+      mappedProps.renderSectionHeader = ({section}) => props.renderSectionHeader(section);
+    }
+    else if (!props.hasFeaturedItem) {
+      mappedProps.renderSectionHeader = ({section}) => this.renderDefaultSectionHeader(section);
+    }
 
     // events
     mappedProps.onEndReached = this.createOnLoadMore();
 
     // data to display
-    mappedProps.dataSource = this.state.dataSource;
+    mappedProps.data = props.data;
+
+    // key extractor
+    mappedProps.keyExtractor = (item, index) => index.toString();
+
+    // sections for SectionList
+    if (props.sections) {
+      mappedProps.sections = props.sections;
+    }
+
+    // is data refreshing
+    mappedProps.refreshing = this.state.refreshing === Status.REFRESHING;
 
     // refresh control
     mappedProps.refreshControl = props.onRefresh && this.renderRefreshControl();
@@ -253,6 +222,16 @@ class ListView extends Component {
     this.listView = listView;
   }
 
+  renderDefaultSectionHeader(section) {
+    const title = _.get(section, 'title', '');
+
+    return (
+      <Divider styleName="section-header">
+        <Caption>{title.toUpperCase()}</Caption>
+      </Divider>
+    );
+  }
+
   renderFooter() {
     const { style, renderFooter } = this.props;
     const { status } = this.state;
@@ -305,7 +284,13 @@ class ListView extends Component {
   }
 
   render() {
-    return <RNListView {...this.getPropsToPass()} />;
+    const { sections, hasFeaturedItem } = this.props;
+
+    if (sections || hasFeaturedItem) {
+      return <SectionList {...this.getPropsToPass()} />;
+    }
+
+    return <FlatList {...this.getPropsToPass()} />;
   }
 }
 

diff --git a/components/RichMedia.js b/components/RichMedia.js
diff --git a/components/Video/Video.js b/components/Video/Video.js
@@ -1,13 +1,10 @@
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
+import { View } from 'react-native';
+import { WebView } from 'react-native-webview';
 
-import {
-  View,
-  WebView,
-} from 'react-native';
-
-import { connectStyle } from '@shoutem/theme';
 import { connectAnimation } from '@shoutem/animation';
+import { connectStyle } from '@shoutem/theme';
 
 import VideoSourceReader from './VideoSourceReader';
 

diff --git a/examples/components/Buttons.js b/examples/components/Buttons.js
@@ -66,7 +66,7 @@ export function Buttons() {
         </Button>
       </Stage>
 
-      <Stage title="Button / Full width - Normal">
+      <Stage title="Button / Full width - Muted">
         <View styleName="horizontal flexible">
           <Button styleName="full-width muted">
             <Icon name="add-to-favorites-on" />
@@ -79,7 +79,7 @@ export function Buttons() {
         </View>
       </Stage>
 
-      <Stage title="Button / Full width - Active (Feed)">
+      <Stage title="Button / Full width - Active">
         <View styleName="horizontal flexible">
           <Button styleName="full-width">
             <Icon name="add-to-favorites-on" />