[ptmt#3] Optimize rendering for SimpleChat, add embeds

ptmt · ptmt · commit c2f77258288e · 2015-12-08T20:34:16.000+06:00
diff --git a/Examples/SimpleChatClient/actions.js b/Examples/SimpleChatClient/actions.js
@@ -70,6 +70,9 @@ export function init(): any {
         if (!getState().selectedChannel) {
           dispatch(onChannelSelect(payload.servers[0].channels[0].id));
         }
+        if (getState().selectedChannel && !getState().messages) {
+          dispatch(onChannelSelect(getState().selectedChannel));
+        }
       })
     )
     .catch(e => {
diff --git a/Examples/SimpleChatClient/components/ChatLayout.js b/Examples/SimpleChatClient/components/ChatLayout.js
@@ -10,7 +10,8 @@ var {
   Text,
   TouchableOpacity,
   TouchableHighlight,
-  TextInput
+  TextInput,
+  LayoutAnimation
 } = React;
 
 import LoadingIndicator from './LoadingIndicator';
@@ -52,9 +53,23 @@ class ChatLayout extends React.Component {
     if (!text) {
       return;
     }
+    LayoutAnimation.spring();
     this.props.actions.sendMessage(text);
     this.setState({currentMessage: ''});
   }
+  render1() {
+    const messages = this.props.messages ?
+      <View style={{backgroundColor: 'black', flex: 1}} /> :
+      <Text key={'loading_indicator'}>Loading messages...</Text>;
+
+    console.log('MESSAGES', messages);
+
+    return (
+      <View style={{flex: 1}}>
+        {messages}
+      </View>
+    );
+  }
   render() {
     const servers = this.props.servers && this.props.servers.map((server, serverKey) => {
       return (
@@ -84,7 +99,7 @@ class ChatLayout extends React.Component {
             <View style={{flex: 1}}>
               {messages && messages.length > 0 ?
                 <MessagesListView messages={messages} /> :
-                <LoadingIndicator visible={messages}>Loading messages...</LoadingIndicator>
+                <LoadingIndicator>Loading messages...</LoadingIndicator>
               }
             </View>
             <View style={styles.inputWrapper}>
diff --git a/Examples/SimpleChatClient/components/LoadingIndicator.js b/Examples/SimpleChatClient/components/LoadingIndicator.js
@@ -8,14 +8,9 @@ import React,  {
 } from 'react-native-desktop';
 
 export default class LoadingIndicator extends React.Component {
-  componentWillUnmount() {
-    console.log('on unmount');
-  }
-  render(): ReactElement {
-    const visibilityStyle = this.props.visible ? { opacity: 0} : {};
-    console.log(this.props.children, visibilityStyle)
+  render() {
     return (
-      <View style={[styles.container, visibilityStyle]}>
+      <View style={[styles.container]}>
         <ActivityIndicatorIOS size="large" style={{width: 40, alignSelf: 'center'}}/>
         <Text>{this.props.children}</Text>
       </View>
diff --git a/Examples/SimpleChatClient/components/Message.js b/Examples/SimpleChatClient/components/Message.js
@@ -5,26 +5,46 @@ import React,  {
   View,
   Text,
   Image,
-  StyleSheet,
-  Animated
+  StyleSheet
 } from 'react-native-desktop';
 
 import Markdown from './SuperSimpleMarkdown';
 
 export default class Message extends React.Component {
-  render(): ReactElement {
+  render() {
     const date = new Date(this.props.timestamp);
     const time = ('0' + date.getHours()).slice(-2) + ':' +   ('0' + date.getMinutes()).slice(-2);
-    const attachImage = this.props.attachments && this.props.attachments.length > 0 ?
+    const attachedImage = this.props.attachments && this.props.attachments.length > 0 && this.props.attachments[0].url ?
       this.props.attachments[0].url : null;
+
+    const attachedEmbeds =  this.props.embeds && this.props.embeds.length > 0 && this.props.embeds[0].thumbnail ?
+      this.props.embeds[0] : null;
+
     return (
       <View style={[styles.message]} key={this.props.id}>
         <Text style={styles.messageTimestamp}>{time}</Text>
         <Text style={styles.messageUsername} numberOfLines={1}>{'<'}{this.props.author.username}{'>'}</Text>
-        {attachImage &&
-          <Image resizeMode={'contain'} source={{uri: attachImage}} style={{width: 300, height: 300}} />
+        {attachedImage &&
+          <Image resizeMode={'contain'} source={{uri: attachedImage}} style={{width: 300, height: 300}} />
         }
         <Markdown>{parseMentions(this.props.content, this.props.mentions)}</Markdown>
+        {attachedEmbeds &&
+          <Preview {...attachedEmbeds} />
+        }
+      </View>
+    );
+  } //
+}
+
+class Preview extends React.Component {
+  render() {
+    return (
+      <View style={{flex: 1, margin: 10, borderColor: '#eee', borderWidth: 1, padding: 3}}>
+        <Text style={{fontSize: 12, textAlign:'center', fontWeight: 'bold'}}>{this.props.title}</Text>
+        <View style={{flexDirection: 'row', flex: 1, justifyContent: 'center', alignContent: 'center'}}>
+          <Image resizeMode={'contain'} source={{uri: this.props.thumbnail.url}} style={{margin: 5, width: 80, height: 80}} />
+          <Text style={{fontSize: 12, color: '#777', margin: 10, width: 200}}>{this.props.description}</Text>
+        </View>
       </View>
     );
   }
@@ -40,6 +60,7 @@ function parseMentions(text: string, mentions: Array<any>): string {
   }
   matches.forEach(mention => {
     const id = mention.substring(2, mention.length - 1);
+    // TODO: ignore links
 		text = text.replace(mention, '**@' + mentions.filter(m => m.id === id)[0].username + '**');
   });
   return text;
diff --git a/Examples/SimpleChatClient/components/MessagesListView.js b/Examples/SimpleChatClient/components/MessagesListView.js
@@ -4,7 +4,7 @@
 import React,  {
   Text,
   StyleSheet,
-  ListView,
+  ListView
 } from 'react-native-desktop';
 
 import Message from './Message';
@@ -26,7 +26,6 @@ export default class MessagesListView extends React.Component {
     });
   }
   render() {
-
     return (
       <ListView
         style={styles.container}
diff --git a/Examples/SimpleChatClient/components/SuperSimpleMarkdown.js b/Examples/SimpleChatClient/components/SuperSimpleMarkdown.js
@@ -11,6 +11,7 @@ const {
 export default class Markdown extends React.Component {
 
   componentWillMount() {
+
     const rules = generateRules(styles);
     const mixedRules = { ...rules, ...SimpleMarkdown.defaultRules};
     const parser = SimpleMarkdown.parserFor(mixedRules);
@@ -100,7 +101,7 @@ const generateRules = styles => {
         return React.createElement(Text, {
           key: state.key,
           style: [styles.text, styles.link],
-          children: node.content
+          children: node.content[0].content
         });
       }
     },
@@ -143,14 +144,20 @@ const generateRules = styles => {
     },
     text: {
       react: function(node, output, state) {
+
+        var textStyles = [styles.text];
+        if (typeof node.content.split !== 'function') {
+          return React.createElement(Text, {
+            style: textStyles
+          }, node.content);
+        }
         //Breaking words up in order to allow for text reflowing in flexbox
         var words = node.content.split(' ');
         words = words.map((word, i) => {
           var elements = [];
           if (i != words.length - 1) {
             word = word + ' ';
           }
-          var textStyles = [styles.text];
           if (!state.withinText) {
             textStyles.push(styles.plainText);
           }
@@ -159,21 +166,24 @@ const generateRules = styles => {
           }, word);
         });
         return words;
-        // return React.createElement(Text, {
-        //   style: styles.text
-        // }, node.content);
       }
     },
     heading: {
       react: function(node, output, state) {
+        var textStyles = [styles.text];
+        if (typeof node.content.split !== 'function') {
+          return React.createElement(Text, {
+            style: textStyles
+          }, node.content);
+        }
+
         //Breaking words up in order to allow for text reflowing in flexbox
         var words = node.content.split(' ');
         words = words.map((word, i) => {
           var elements = [];
           if (i != words.length - 1) {
             word = word + ' ';
           }
-          var textStyles = [styles.text];
           if (!state.withinText) {
             textStyles.push(styles.plainText);
           }
diff --git a/Libraries/CustomComponents/ListView/ListView.js b/Libraries/CustomComponents/ListView/ListView.js
@@ -31,7 +31,6 @@ var React = require('React');
 var RCTUIManager = require('NativeModules').UIManager;
 var RCTScrollViewManager = require('NativeModules').ScrollViewManager;
 var ScrollView = require('ScrollView');
-var View = require('View');
 var ScrollResponder = require('ScrollResponder');
 var StaticRenderer = require('StaticRenderer');
 var TimerMixin = require('react-timer-mixin');
@@ -338,23 +337,37 @@ var ListView = React.createClass({
       }
 
       for (var rowIdx = 0; rowIdx < rowIDs.length; rowIdx++) {
-        var rowID = rowIDs[rowIdx];
+
+        // Inverting index if this is inverting ListView
+        var rowID = this.props.autoScrollToBottom ?
+          rowIDs[rowIdx] :
+          rowIDs.length - 1 - rowIdx;
+
         var comboID = sectionID + rowID;
         var shouldUpdateRow = rowCount >= this.state.prevRenderedRowsCount &&
-          dataSource.rowShouldUpdate(sectionIdx, rowIdx);
+          dataSource.rowShouldUpdate(sectionIdx, rowID);
         var row =
           <StaticRenderer
             key={'r_' + comboID}
             shouldUpdate={!!shouldUpdateRow}
             render={this.props.renderRow.bind(
               null,
-              dataSource.getRowData(sectionIdx, rowIdx),
+              dataSource.getRowData(sectionIdx, rowID),
               sectionID,
               rowID,
               this.onRowHighlighted
             )}
           />;
-        bodyComponents.push(row);
+
+        /*
+         * Prepend items
+         */
+        if (this.props.autoScrollToBottom) {
+          bodyComponents = [row].concat(bodyComponents);
+        } else {
+          bodyComponents.push(row);
+        }
+
         totalIndex++;
 
         if (this.props.renderSeparator &&

Original file line number	Diff line number	Diff line change
`@@ -70,6 +70,9 @@ export function init(): any {`
`70`	`70`	`if (!getState().selectedChannel) {`
`71`	`71`	`dispatch(onChannelSelect(payload.servers[0].channels[0].id));`
`72`	`72`	`}`
	`73`	`+ if (getState().selectedChannel && !getState().messages) {`
	`74`	`+ dispatch(onChannelSelect(getState().selectedChannel));`
	`75`	`+ }`
`73`	`76`	`})`
`74`	`77`	`)`
`75`	`78`	`.catch(e => {`