fix for passing borderRadius 0 (#540)

Author: Inbal-Tish

demo/src/screens/componentScreens/CardsScreen.js

@@ -1,9 +1,10 @@
 import _ from 'lodash';
 import React, {Component} from 'react';
 import {StyleSheet, ScrollView} from 'react-native';
-import {Constants, Colors, View, Card, Button, Text, Image} from 'react-native-ui-lib'; //eslint-disable-line
+import {Constants, Colors, View, Card, Button, Text, Image} from 'react-native-ui-lib'; // eslint-disable-line
 import posts from '../../data/posts';
 
+
 const featureIcon = require('../../assets/icons/star.png');
 const shareIcon = require('../../assets/icons/share.png');
 const cardImage = require('../../assets/images/card-example.jpg');
@@ -12,18 +13,19 @@ const cardImage2 = require('../../assets/images/empty-state.jpg');
 export default class CardsScreen extends Component {
   state = {
     selected1: true,
-    selected2: true,
+    selected2: true
   };
 
   render() {
     const {selected1, selected2} = this.state;
+
     return (
       <View>
         <Image
           style={StyleSheet.absoluteFillObject}
           source={{
             uri:
-              'https://images.pexels.com/photos/1005644/pexels-photo-1005644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260',
+              'https://images.pexels.com/photos/1005644/pexels-photo-1005644.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260'
           }}
         />
 
@@ -59,7 +61,7 @@ export default class CardsScreen extends Component {
                 activeOpacity={1}
                 marginR-20
               >
-                <Card.Image height={'100%'} imageSource={cardImage} />
+                <Card.Image height={'100%'} imageSource={cardImage}/>
               </Card>
               <Card
                 height={120}
@@ -74,7 +76,7 @@ export default class CardsScreen extends Component {
                   borderWidth: 3,
                 }}
               >
-                <Card.Image height={'100%'} imageSource={cardImage} />
+                <Card.Image height={'100%'} imageSource={cardImage}/>
               </Card>
             </View>
 
@@ -110,16 +112,15 @@ export default class CardsScreen extends Component {
               )}
             </View>
 
-            <Card row height={160} style={{marginBottom: 15}} onPress={() => {}} enableBlur>
-              <Card.Image width={115} imageSource={cardImage} />
+            <Card row height={160} style={{marginBottom: 15}} onPress={() => {}} enableBlur borderRadius={0}>
+              <Card.Image width={115} imageSource={cardImage}/>
               <View padding-20 flex>
                 <Text text70 dark10>
                   You’re Invited!
                 </Text>
                 <Text text80 dark10>
                   222 Join Old The Town Barbershop Official Store. Download the Wix app to...
                 </Text>
-
                 <Text text90 dark50>
                   wix.to/A465c
                 </Text>
@@ -131,36 +132,34 @@ export default class CardsScreen extends Component {
                 <Text text70 dark10>
                   You’re Invited!
                 </Text>
-
                 <Text text80 dark10>
                   Join Old The Town Barbershop Official Store. Download the Wix app to...
                 </Text>
-
                 <Text text90 dark50>
                   wix.to/A465c
                 </Text>
               </View>
-              <Card.Image width={115} imageSource={cardImage} />
+              <Card.Image width={115} imageSource={cardImage}/>
             </Card>
 
             <Card style={{marginBottom: 15}} onPress={() => {}}>
               <View padding-20>
                 <Text text70 dark10>
                   You’re Invited!
                 </Text>
-
                 <Text text90 dark50>
                   join now
                 </Text>
               </View>
-              <Card.Image height={120} imageSource={cardImage2} />
+              <Card.Image height={120} imageSource={cardImage2}/>
             </Card>
 
             {_.map(posts, (post, i) => {
               const statusColor = post.status === 'Published' ? Colors.green30 : Colors.orange30;
+              
               return (
                 <Card key={i} style={{marginBottom: 15}} onPress={() => console.log('press on a card')}>
-                  <Card.Image height={160} imageSource={post.coverImage} />
+                  <Card.Image height={160} imageSource={post.coverImage}/>
 
                   <View padding-20>
                     <Text text40 color={Colors.dark10}>
@@ -182,8 +181,8 @@ export default class CardsScreen extends Component {
                         {post.likes} Likes
                       </Text>
                       <View row right>
-                        <Button style={{marginRight: 10}} text90 link iconSource={featureIcon} label="Feature" />
-                        <Button text90 link iconSource={shareIcon} label="Share" />
+                        <Button style={{marginRight: 10}} text90 link iconSource={featureIcon} label="Feature"/>
+                        <Button text90 link iconSource={shareIcon} label="Share"/>
                       </View>
                     </View>
                   </View>

src/components/card/index.js

@@ -14,8 +14,8 @@ import CardItem from './CardItem';
 import CardImage from './CardImage';
 import Assets from '../../assets';
 
-const DEFAULT_BORDER_RADIUS = BorderRadiuses.br40;
 
+const DEFAULT_BORDER_RADIUS = BorderRadiuses.br40;
 const DEFAULT_SELECTION_PROPS = {
   borderWidth: 2,
   color: Colors.blue30,
@@ -147,31 +147,39 @@ class Card extends PureBaseComponent {
 
   get elevationStyle() {
     const {elevation, enableShadow} = this.getThemeProps();
+    
     if (enableShadow) {
       return {elevation: elevation || 2};
     }
   }
 
   get shadowStyle() {
     const {enableShadow} = this.getThemeProps();
+    
     if (enableShadow) {
       return this.styles.containerShadow;
     }
   }
 
   get blurBgStyle() {
     const {enableBlur} = this.getThemeProps();
+    
     if (Constants.isIOS && enableBlur) {
       return {backgroundColor: Colors.rgba(Colors.white, 0.85)};
     } else {
       return {backgroundColor: Colors.white};
     }
   }
 
+  get borderRadius() {
+    const {borderRadius} = this.getThemeProps();
+    
+    return borderRadius === undefined ? DEFAULT_BORDER_RADIUS : borderRadius;
+  }
+
   renderSelection() {
-    const {selectionOptions, borderRadius, selected} = this.getThemeProps();
+    const {selectionOptions, selected} = this.getThemeProps();
     const {animatedSelected} = this.state;
-
     const selectionColor = _.get(selectionOptions, 'color', DEFAULT_SELECTION_PROPS.color);
 
     if (_.isUndefined(selected)) {
@@ -183,7 +191,7 @@ class Card extends PureBaseComponent {
         style={[
           this.styles.selectedBorder,
           {borderColor: selectionColor},
-          borderRadius && {borderRadius},
+          {borderRadius: this.borderRadius},
           {opacity: animatedSelected}
         ]}
         pointerEvents="none"
@@ -196,13 +204,12 @@ class Card extends PureBaseComponent {
   }
 
   renderChildren() {
-    const {borderRadius} = this.getThemeProps();
     const children = React.Children.map(this.props.children, (child, index) => {
       if (_.get(child, 'type.displayName') === CardImage.displayName) {
         const position = this.calcImagePosition(index);
         return React.cloneElement(child, {
           position,
-          borderRadius: borderRadius || DEFAULT_BORDER_RADIUS
+          borderRadius: this.borderRadius
         });
       }
       return child;
@@ -211,10 +218,10 @@ class Card extends PureBaseComponent {
   }
 
   render() {
-    const {onPress, style, containerStyle, borderRadius, enableBlur, ...others} = this.getThemeProps();
+    const {onPress, style, containerStyle, enableBlur, ...others} = this.getThemeProps();
     const blurOptions = this.getBlurOptions();
     const Container = onPress ? TouchableOpacity : View;
-    const brRadius = borderRadius || DEFAULT_BORDER_RADIUS;
+    const brRadius = this.borderRadius;
 
     return (
       <Container
@@ -244,14 +251,16 @@ class Card extends PureBaseComponent {
   }
 }
 
-function createStyles({width, height, borderRadius = DEFAULT_BORDER_RADIUS, selectionOptions}) {
+function createStyles({width, height, borderRadius, selectionOptions}) {
   const selectionOptionsWithDefaults = _.merge(DEFAULT_SELECTION_PROPS, selectionOptions);
+  const brRadius = borderRadius === undefined ? DEFAULT_BORDER_RADIUS : borderRadius;
+
   return StyleSheet.create({
     container: {
       width,
       height,
       overflow: 'visible',
-      borderRadius
+      borderRadius: brRadius
     },
     containerShadow: {
       // sh30 bottom
@@ -262,7 +271,7 @@ function createStyles({width, height, borderRadius = DEFAULT_BORDER_RADIUS, sele
     },
     blurView: {
       ...StyleSheet.absoluteFillObject,
-      borderRadius
+      borderRadius: brRadius
     },
     selectedBorder: {
       ...StyleSheet.absoluteFillObject,