Counter Icon badge (#1081)

* add counterIcon badge

* remove counterIcon prop

Author: lidord-wix

demo/src/assets/icons/bell.png

@@ -5,8 +5,7 @@ const BadgesSpace = 30;
 const plusIcon = require('../../assets/icons/chevronUp.png');
 const minusIcon = require('../../assets/icons/chevronDown.png');
 const star = require('../../assets/icons/star.png');
-const search = require('../../assets/icons/search.png');
-
+const bell = require('../../assets/icons/bell.png');
 
 export default class BadgesScreen extends Component {
   constructor(props) {
@@ -137,6 +136,15 @@ export default class BadgesScreen extends Component {
             </Text>
           </View>
         </View>
+
+        <Text text50 marginB-10 row center marginT-25>
+          Counter Icon Badges
+        </Text>
+        <View row paddingH-15>
+            <Badge marginR-10 withCounterIcon label={'9999'} labelFormatterLimit={3} icon={bell} backgroundColor={Colors.red30} iconStyle={{height: 18, width: 18}}/>
+            <Badge marginR-10 withCounterIcon label={'4'} icon={bell} backgroundColor={Colors.red30} color={Colors.blue30} iconStyle={{height: 18, width: 18}}/>
+        </View>
+
       </ScrollView>
     );
   }

demo/src/assets/icons/[email protected]

@@ -4,7 +4,7 @@ import {ImageSourcePropType, ImageStyle, StyleProp, StyleSheet, Text, TextStyle,
 import {View as AnimatableView} from 'react-native-animatable';
 import {extractAccessibilityProps, extractAnimationProps} from '../../commons/modifiers';
 import {asBaseComponent} from '../../commons/new';
-import {BorderRadiuses, Colors, Typography} from '../../style';
+import {BorderRadiuses, Colors, Spacings, Typography} from '../../style';
 import TouchableOpacity from '../touchableOpacity';
 import Image from '../image';
 import View from '../view';
@@ -143,6 +143,15 @@ class Badge extends PureComponent<BadgeProps> {
       height: badgeHeight,
       minWidth: badgeHeight
     };
+    if (icon && label) {
+      style.paddingRight = 6;
+      style.paddingLeft = 4;
+      style.height = Spacings.s5;
+      if (borderWidth) {
+        style.height += borderWidth * 2;
+      }
+      return style;
+    }
 
     const isPimple = label === undefined;
     if (isPimple || icon) {
@@ -213,7 +222,8 @@ class Badge extends PureComponent<BadgeProps> {
   }
 
   renderIcon() {
-    const {icon, iconStyle, iconProps, borderColor} = this.props;
+    const {icon, iconStyle, iconProps, borderColor, label} = this.props;
+    const flex = label ? 0 : 1;
     return (
       <Image
         source={icon!}
@@ -222,7 +232,7 @@ class Badge extends PureComponent<BadgeProps> {
         borderColor={borderColor}
         {...iconProps}
         style={{
-          flex: 1,
+          flex,
           ...iconStyle
         }}
       />
@@ -237,6 +247,7 @@ class Badge extends PureComponent<BadgeProps> {
       containerStyle,
       hitSlop,
       icon,
+      label,
       onPress,
       testId,
       testID,
@@ -265,7 +276,10 @@ class Badge extends PureComponent<BadgeProps> {
           hitSlop={hitSlop}
           {...animationProps}
         >
-          {icon ? this.renderIcon() : this.renderLabel()}
+          <View flex row centerV>
+          {icon && this.renderIcon()}
+          {label && this.renderLabel()}
+          </View>
         </Container>
       </View>
     );