list components

Components/Widgets/Icon.js

@@ -0,0 +1,37 @@
+/* @flow */
+'use strict';
+
+import React from 'react-native';
+import NativeBaseComponent from '../Base/NativeBaseComponent';
+import _ from 'lodash';
+import computeProps from '../../Utils/computeProps';
+import Icon from 'react-native-vector-icons/Ionicons';
+
+export default class IconNB extends NativeBaseComponent {
+
+    getInitialStyle() {
+        return {
+            icon: {
+                fontSize: 27,
+                color: 'white'
+            }
+        }
+    }
+    prepareRootProps() {
+        var defaultProps = {
+            style: this.getInitialStyle().icon
+        };
+
+        console.log(computeProps(this.props, defaultProps));
+
+        return computeProps(this.props, defaultProps);
+
+    }
+
+    render() { 
+        return(
+          <Icon {...this.prepareRootProps()}/>
+        );
+    }
+
+}

Components/Widgets/List.js

@@ -0,0 +1,42 @@
+/* @flow */
+'use strict';
+
+import React, {View, Text} from 'react-native';
+import Title from './Title';
+import NativeBaseComponent from '../Base/NativeBaseComponent';
+import _ from 'lodash';
+import computeProps from '../../Utils/computeProps';
+
+export default class ListNB extends NativeBaseComponent {
+
+    getInitialStyle() {
+        return {
+            list: {
+
+            },
+            insetList: {
+                borderWidth: 1,
+                borderRadius: 8
+            }
+        }
+    }
+
+    prepareRootProps() {
+
+        var defaultProps = {
+            style: this.props.inset ? this.getInitialStyle().insetList : this.getInitialStyle().list
+        };
+
+        return computeProps(this.props, defaultProps);
+
+    }
+
+    render() { 
+        return(
+          <View {...this.prepareRootProps()} >
+            {this.props.children}
+          </View>
+        );
+    }
+
+}

Components/Widgets/ListItem.js

@@ -0,0 +1,98 @@
+/* @flow */
+'use strict';
+
+import React from 'react-native';
+import NativeBaseComponent from '../Base/NativeBaseComponent';
+import _ from 'lodash';
+import computeProps from '../../Utils/computeProps';
+import Icon from './Icon';
+import Text from './Text';
+import View from './View';
+import Button from './Button';
+
+export default class ListItemNB extends NativeBaseComponent {
+
+    getInitialStyle() {
+        return {
+            listItem: {
+                borderBottomWidth: 1,
+                padding: 7
+            },
+            listItemDivider: {
+                borderBottomWidth: 1,
+                padding: 7,
+                backgroundColor: '#ddd'
+            },
+            itemText: {
+                fontSize: 25
+            },
+            itemIcon: {
+                fontSize: 25,
+                color: 'black'
+            },
+            itemButton: {
+                width: 50
+            },
+            itemNote: {
+                fontSize: 15,
+                color: '#999'
+            }
+        }
+    }
+
+    getChildStyle(child) {
+        var mergedStyle = {};
+        if(child.type == Icon) {
+            return _.merge(mergedStyle, this.getInitialStyle().itemIcon, child.props.style);
+        }
+
+        else if(child.type == Text) {
+            if(child.props.note)
+                return _.merge(mergedStyle, this.getInitialStyle().itemNote, child.props.style);
+            else 
+                return _.merge(mergedStyle, this.getInitialStyle().itemText, child.props.style);
+        }
+
+        else if(child.type == Button) {
+            return _.merge(mergedStyle, this.getInitialStyle().itemButton, child.props.style);
+        }
+
+        else 
+            return child.props.style;
+    }
+
+    prepareRootProps() {
+        if(this.props.itemDivider)
+            var defaultProps = {
+                style: this.getInitialStyle().listItemDivider
+            };
+        else 
+            var defaultProps = {
+                style: this.getInitialStyle().listItem
+            };
+
+        console.log(computeProps(this.props, defaultProps));
+
+        return computeProps(this.props, defaultProps);
+
+    }
+
+    renderChildren() {
+        var newChildren = React.Children.map(this.props.children, (child) => {
+          return React.cloneElement(child, {style: this.getChildStyle(child)})
+        });
+
+        console.log(newChildren);
+
+        return newChildren;
+    }
+
+    render() { 
+        return(
+          <View {...this.prepareRootProps()} >
+            {this.renderChildren()}
+          </View>
+        );
+    }
+
+}

Components/Widgets/Thumbnail.js

@@ -0,0 +1,49 @@
+/* @flow */
+'use strict';
+
+import React, {Image, View} from 'react-native';
+import NativeBaseComponent from '../Base/NativeBaseComponent';
+import _ from 'lodash';
+import computeProps from '../../Utils/computeProps';
+
+export default class ThumbnailNB extends NativeBaseComponent {
+
+    getInitialStyle() {
+        return {
+            thumbnail: {
+                borderRadius: 15,
+                width: 30,
+                height: 30
+            }
+        }
+    }
+    prepareRootProps() {
+        var thumbnailStyle = {};
+        if(this.props.circular) {
+            thumbnailStyle.width = this.props.size;
+            thumbnailStyle.height = this.props.size;
+            thumbnailStyle.borderRadius = this.props.size/2;
+        }
+        else if(this.props.square) {
+            thumbnailStyle.width = this.props.size;
+            thumbnailStyle.height = this.props.size;
+            thumbnailStyle.borderRadius = 0;
+        }
+
+        var defaultProps = {
+            style: _.merge(this.getInitialStyle().thumbnail, thumbnailStyle)
+        };
+
+        console.log(computeProps(this.props, defaultProps));
+
+        return computeProps(this.props, defaultProps);
+
+    }
+
+    render() { 
+        return(
+              <Image {...this.prepareRootProps()}/>
+        );
+    }
+
+}