Skip to content

Commit

Permalink
Merge pull request #303 from alexicum/master
Browse files Browse the repository at this point in the history 
#264 widgets do no support null or undefined children
  • Loading branch information
@himanshu-satija
himanshu-satija authored Nov 18, 2016
2 parents b3b8986 + 6670b3f commit 6854e19
Showing 1 changed file with 92 additions and 102 deletions.
194 changes: 92 additions & 102 deletions Components/Widgets/CardItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
'use strict';

import React from 'react';
import {Image, TouchableOpacity} from 'react-native';
import { Image, TouchableOpacity } from 'react-native';
import NativeBaseComponent from '../Base/NativeBaseComponent';
import computeProps from '../../Utils/computeProps';
import Icon from './Icon';
Expand All @@ -23,7 +23,8 @@ export default class CardItemNB extends NativeBaseComponent {
return {
listItem: {
borderBottomWidth: this.getTheme().borderWidth,
padding: (this.imagePresent() && !this.ifShowCase()) ? 0 : this.getTheme().listItemPadding,
padding: (this.imagePresent() && !this.ifShowCase()) ? 0 :
this.getTheme().listItemPadding,
backgroundColor: this.getTheme().listBg,
justifyContent: (this.buttonPresent()) ? 'space-between' : 'flex-start',
flexDirection: (this.thumbnailPresent() || this.iconPresent() || (this.notePresent() && this.ifShowCase())) ? 'row' : 'column',
Expand All @@ -33,14 +34,14 @@ export default class CardItemNB extends NativeBaseComponent {
borderBottomWidth: this.getTheme().borderWidth,
padding: this.getTheme().listItemPadding,
backgroundColor: 'transparent',
paddingVertical: this.getTheme().listItemPadding+2,
paddingVertical: this.getTheme().listItemPadding + 2,
justifyContent: (this.buttonPresent()) ? 'space-between' : 'flex-start',
flexDirection: 'row',
borderColor: 'transparent'
},
itemText: {
fontSize: this.ifShowCase() ? 14 : 15,
marginTop: this.ifShowCase() ? 10 : 0,
marginTop: this.ifShowCase() ? 10 : 0,
color: this.getContextForegroundColor(),
flex: 1
},
Expand Down Expand Up @@ -71,179 +72,166 @@ export default class CardItemNB extends NativeBaseComponent {
alignSelf: 'stretch',
height: this.ifShowCase() ? 120 : 300
}
}
};
}
getRightStyle() {
return {
right : {
right: {
flex: 1,
paddingLeft: 10,
backgroundColor: 'transparent'
},
right2 : {
right2: {
flex: 1,
flexDirection: 'row',
paddingLeft: 10,
alignItems: 'center',
justifyContent: 'space-between',
backgroundColor: 'transparent'
},
right3 : {
right3: {
flex: 1,
flexDirection: 'column',
paddingLeft: 10,
justifyContent: 'flex-start',
backgroundColor: 'transparent'
}
}
};
}

thumbnailPresent() {
var thumbnailComponentPresent = false;
React.Children.forEach(this.props.children, function (child) {
if(child.type == Thumbnail)
let thumbnailComponentPresent = false;
React.Children.forEach(this.props.children, (child) => {
if (child && child.type === Thumbnail) {
thumbnailComponentPresent = true;
})
}
});

return thumbnailComponentPresent;
}

imagePresent() {
var imagePresent = false;
React.Children.forEach(this.props.children, function (child) {
if(child.type == Image)
let imagePresent = false;
React.Children.forEach(this.props.children, (child) => {
if (child && child.type === Image) {
imagePresent = true;
})
}
});

return imagePresent;
}

iconPresent() {
var iconComponentPresent = false;
React.Children.forEach(this.props.children, function (child) {
if(child.type == Icon)
let iconComponentPresent = false;
React.Children.forEach(this.props.children, (child) => {
if (child && child.type === Icon) {
iconComponentPresent = true;
})
}
});

return iconComponentPresent;
}

buttonPresent() {
var buttonComponentPresent = false;
React.Children.forEach(this.props.children, function (child) {
if(child.type == Button)
let buttonComponentPresent = false;
React.Children.forEach(this.props.children, (child) => {
if (child && child.type === Button) {
buttonComponentPresent = true;
})
}
});

return buttonComponentPresent;
}

ifShowCase() {
var ifShowCase = false;

if(this.props.cardBody) {
ifShowCase = true;
}


return ifShowCase;
return !!this.props.cardBody;
}

notePresent() {
var notePresent = false;
let notePresent = false;

React.Children.forEach(this.props.children, function (child) {
if(child.type == Text && child.props.note)
React.Children.forEach(this.props.children, (child) => {
if (child && (child.type === Text) && child.props.note) {
notePresent = true;
}
});

return notePresent;
}

squareThumbs() {
var squareThumbs = false;
let squareThumbs = false;
if (this.thumbnailPresent()) {
React.Children.forEach(this.props.children, function (child) {
if(child.props.square)
React.Children.forEach(this.props.children, (child) => {
if (child && child.props.square) {
squareThumbs = true;
}
});
}

return squareThumbs;
}

getChildProps(child) {
var defaultProps = {};
if(child.type == Image && !Array.isArray(this.props.children)) {
let defaultProps = {};
if (child.type === Image && !Array.isArray(this.props.children)) {
defaultProps = {
resizeMode: 'cover',
style: this.getInitialStyle().fullImage
}
}
else if(child.type == Button) {
};
} else
if (child.type === Button) {
defaultProps = {
style: this.getInitialStyle().itemButton
}
}
else if(child.type == Text) {
if ((this.props.header) || (this.props.footer)) {
defaultProps = {
style: this.getInitialStyle().dividerItemText
}
}
else {
if(child.props.note && this.thumbnailPresent()) {
};
} else
if (child.type === Text) {
if ((this.props.header) || (this.props.footer)) {
defaultProps = {
style: this.getInitialStyle().dividerItemText
};
} else if (child.props.note && this.thumbnailPresent()) {
defaultProps = {
style: this.getInitialStyle().itemSubNote
}
}
else if(child.props.note) {
};
} else if (child.props.note) {
defaultProps = {
style: this.getInitialStyle().itemNote
}
}
else {
};
} else {
defaultProps = {
style: this.getInitialStyle().itemText
}
};
}
}
}
else if(child.type == Icon) {
} else if (child.type === Icon) {
defaultProps = {
style: this.getInitialStyle().itemIcon
}
}
else if(child.type == Thumbnail) {
};
} else if (child.type === Thumbnail) {
defaultProps = {
style: this.getInitialStyle().thumbnail
}
}
else if(child.type == Image ) {
};
} else if (child.type === Image) {
defaultProps = {
style: this.getInitialStyle().fullImage
}
}
else {
};
} else {
defaultProps = {
foregroundColor: this.getContextForegroundColor()
}
};
}

return computeProps(child.props, defaultProps);
}

prepareRootProps() {
var defaultProps = {};

if((this.props.header) || (this.props.footer)) {
let defaultProps = {};

if ((this.props.header) || (this.props.footer)) {
defaultProps = {
style: this.getInitialStyle().listItemDivider
};
}

else {
} else {
defaultProps = {
style: this.getInitialStyle().listItem
};
Expand All @@ -256,31 +244,30 @@ export default class CardItemNB extends NativeBaseComponent {


renderChildren() {
var newChildren = [];

if(!this.thumbnailPresent() && !this.iconPresent()) {
newChildren = React.Children.map(this.props.children, (child, i) => {
return React.cloneElement(child, {...this.getChildProps(child), key: i});
});
}
else {
let newChildren = [];
let childrenArray = React.Children.toArray(this.props.children);
childrenArray = childrenArray.filter(child => !!child);

if (!this.thumbnailPresent() && !this.iconPresent()) {
newChildren = childrenArray.map((child, i) =>
React.cloneElement(child, { ...this.getChildProps(child), key: i })
);
} else {
newChildren = [];
if(!Array.isArray(this.props.children)) {
if (!Array.isArray(this.props.children)) {
newChildren.push(
<View key='cardItem' style={{justifyContent: 'flex-start'}}>
{React.cloneElement(this.props.children, this.getChildProps(this.props.children))}
<View key='cardItem' style={{ justifyContent: 'flex-start' }}>
{React.cloneElement(childrenArray, this.getChildProps(childrenArray))}
</View>
);
}
else {

var childrenArray = React.Children.toArray(this.props.children);
newChildren.push(React.cloneElement(childrenArray[0], this.getChildProps(childrenArray[0])));
} else {
newChildren.push(
React.cloneElement(childrenArray[0], this.getChildProps(childrenArray[0])));
newChildren.push(
<View key='cardItem' style={ this.notePresent() ? this.getRightStyle().right : this.squareThumbs() ? this.getRightStyle().right3 : this.getRightStyle().right2 }>
{childrenArray.slice(1).map((child, i) => {
return React.cloneElement(child, {...this.getChildProps(child), key: i});
})}
<View key='cardItem' style={this.notePresent() ? this.getRightStyle().right : this.squareThumbs() ? this.getRightStyle().right3 : this.getRightStyle().right2}>
{childrenArray.slice(1).map((child, i) =>
React.cloneElement(child, { ...this.getChildProps(child), key: i })
)}
</View>
);
}
Expand All @@ -291,8 +278,11 @@ export default class CardItemNB extends NativeBaseComponent {


render() {
return(
<TouchableOpacity ref={c => this._root = c} {...this.prepareRootProps()} activeOpacity={ (this.props.button) ? 0.2 : 1} >
return (
<TouchableOpacity
ref={(c) => { this._root = c; }} {...this.prepareRootProps()}
activeOpacity={(this.props.button) ? 0.2 : 1}
>
{this.renderChildren()}
</TouchableOpacity>
);
Expand Down

0 comments on commit 6854e19

Please sign in to comment.