MessageList Component added.

Author: abdurrahmanekr

example-native/App.js

@@ -10,15 +10,14 @@ import {
     StyleSheet,
     Text,
     View,
-    ScrollView,
 } from 'react-native';
 
-import { ChatItem, MessageBox, } from '../native';
+import { ChatItem, MessageList, } from '../native';
 import Theme from '../native/Theme';
 
 import IconI from 'react-native-vector-icons/Ionicons';
 import IconM from 'react-native-vector-icons/MaterialIcons';
-
+var messageSource=[];
 export default class App extends Component<{}> {
     constructor(props) {
         super(props);
@@ -27,6 +26,7 @@ export default class App extends Component<{}> {
             show: true,
             messageList: [],
         };
+
         Theme.icons = {
             waiting: <IconM name='access-time' size={13}/>,
             sent: <IconM name='check' size={13}/>,
@@ -67,7 +67,7 @@ export default class App extends Component<{}> {
                     view: 'list',
                     title: 'consectetur adipisicing elit',
                     titleColor: this.getRandomColor(),
-                    text: type === 'spotify' ? 'spotify:track:7wGoVu4Dady5GV0Sv4UIsx' : 'Ab beatae odit deleniti dolor numquam nisi, non laboriosam sequi',
+                    text: 'Ab beatae odit deleniti dolor numquam nisi, non laboriosam sequi',
                     data: {
                         uri: require('./assets/chat-user.png'),
                         status: {
@@ -101,38 +101,19 @@ export default class App extends Component<{}> {
     }
 
     render() {
-        var arr = [];
-        for (var i = 0; i < 5; i++)
-            arr.push(i);
-
-        var chatSource = arr.map(x => this.random('chat'));
-        var messageSource = arr.map(x => this.random('message'));
+        messageSource.unshift(this.random('message'));
         return (
-            <ScrollView
+            <View
                 style={{
                     flex: 1,
                     marginTop: 10,
                     backgroundColor: '#ccc',
                 }}>
-                {
-                    messageSource.map((x, i) => (
-                        <MessageBox
-                            key={i}
-                            {...x}/>
-                    ))
-                }
-                {
-                    chatSource.map((x, i) => (
-                        <ChatItem
-                            key={i}
-                            title={x.title}
-                            unread={i || 1}
-                            statusColor='lightgreen'
-                            subtitle={x.subtitle}
-                            avatar={require('./assets/chat-user.png')}/>
-                    ))
-                }
-            </ScrollView>
+                <MessageList
+                    lockable={true}
+                    dataSource={messageSource}/>
+                <Text onPress={() => {this.setState(this.state)}}>Gönder</Text>
+            </View>
         );
     }
 }

native/MessageList/MessageList.js

@@ -0,0 +1,82 @@
+import React, { Component } from 'react';
+import styles from './MessageListStyle.js';
+
+import Avatar from '../Avatar/Avatar';
+import MessageBox from '../MessageBox/MessageBox';
+
+import {
+    ScrollView,
+} from 'react-native';
+
+export class MessageList extends Component {
+
+    constructor(props) {
+        super(props);
+    }
+
+    onOpen(item, i, e) {
+        if (this.props.onOpen instanceof Function)
+            this.props.onOpen(item, i, e);
+    }
+
+    onDownload(item, i, e) {
+        if (this.props.onDownload instanceof Function)
+            this.props.onDownload(item, i, e);
+    }
+
+    onPress(item, i, e) {
+        if (this.props.onPress instanceof Function)
+            this.props.onPress(item, i, e);
+    }
+
+    onTitlePress(item, i, e) {
+        if (this.props.onTitlePress instanceof Function)
+            this.props.onTitlePress(item, i, e);
+    }
+
+    onForwardPress(item, i, e) {
+        if (this.props.onForwardPress instanceof Function)
+            this.props.onForwardPress(item, i, e);
+    }
+
+    loadRef(ref) {
+        this.mlistRef = ref;
+        if (this.props.cmpRef instanceof Function)
+            this.props.cmpRef(ref);
+    }
+
+    render() {
+        return (
+            <ScrollView
+                ref={this.loadRef.bind(this)}
+                style={styles.rceContainerMlist}>
+                {
+                    this.props.dataSource.map((x, i) => (
+                        <MessageBox
+                            key={i}
+                            {...x}
+                            onOpen={this.props.onOpen && ((e) => this.onOpen(x, i, e))}
+                            onDownload={this.props.onDownload && ((e) => this.onDownload(x, i, e))}
+                            onTitlePress={this.props.onDownload && ((e) => this.onTitlePress(x, i, e))}
+                            onForwardPress={this.props.onForwardPress && ((e) => this.onForwardPress(x, i, e))}
+                            onPress={this.props.onPress && ((e) => this.onPress(x, i, e))}/>
+                    ))
+                }
+            </ScrollView>
+        );
+    }
+}
+
+
+MessageList.defaultProps = {
+    onPress: null,
+    onTitlePress: null,
+    onForwardPress: null,
+    onOpen: null,
+    onDownload: null,
+    dataSource: [],
+    lockable: false,
+    toBottomHeight: 300,
+};
+
+export default MessageList;

native/MessageList/MessageListStyle.js

@@ -0,0 +1,9 @@
+import {
+    StyleSheet,
+} from 'react-native';
+
+export default StyleSheet.create({
+    rceContainerMlist: {
+
+    }
+});

native/MessageList/__tests__/MessageList.js

@@ -0,0 +1,13 @@
+import React, { Component } from 'react';
+import { shallow } from 'enzyme';
+import toJson from 'enzyme-to-json';
+import MessageList from '../MessageList';
+
+describe('MessageList component', () => {
+  it('should render without issues', () => {
+    const component = shallow(<MessageList />);
+
+    expect(component.length).toBe(1);
+    expect(toJson(component)).toMatchSnapshot();
+  });
+});

native/index.js

@@ -1,7 +1,9 @@
 import ChatItem from './ChatItem/ChatItem';
 import MessageBox from './MessageBox/MessageBox';
+import MessageList from './MessageList/MessageList';
 
 export {
     ChatItem,
     MessageBox,
+    MessageList,
 };