Fix badge wrap for 2+ digits (#708)

app/components/badge.js

@@ -29,6 +29,12 @@ export default class Badge extends PureComponent {
         onPress: PropTypes.func
     };
 
+    constructor(props) {
+        super(props);
+
+        this.width = 0;
+    }
+
     componentWillMount() {
         this.panResponder = PanResponder.create({
             onStartShouldSetPanResponder: () => true,
@@ -45,6 +51,37 @@ export default class Badge extends PureComponent {
         }
     };
 
+    onLayout = (e) => {
+        let width;
+
+        if (e.nativeEvent.layout.width <= e.nativeEvent.layout.height) {
+            width = e.nativeEvent.layout.height;
+        } else {
+            width = e.nativeEvent.layout.width + this.props.extraPaddingHorizontal;
+        }
+        width = Math.max(width, this.props.minWidth);
+        if (this.width === width) {
+            return;
+        }
+        this.width = width;
+        const height = Math.max(e.nativeEvent.layout.height, this.props.minHeight);
+        const borderRadius = height / 2;
+        this.refs.badgeContainer.setNativeProps({
+            style: {
+                width,
+                height,
+                borderRadius
+            }
+        });
+        setTimeout(() => {
+            this.refs.badgeContainer.setNativeProps({
+                style: {
+                    display: 'flex'
+                }
+            });
+        }, 100);
+    };
+
     renderText = () => {
         const {count} = this.props;
         let text = count.toString();
@@ -58,6 +95,7 @@ export default class Badge extends PureComponent {
         return (
             <Text
                 style={[styles.text, this.props.countStyle, extra]}
+                onLayout={this.onLayout}
             >
                 {text}
             </Text>
@@ -71,7 +109,8 @@ export default class Badge extends PureComponent {
                 onPress={this.handlePress}
             >
                 <View
-                    style={[styles.badge, this.props.style]}
+                    ref='badgeContainer'
+                    style={[styles.badge, this.props.style, {display: 'none'}]}
                 >
                     <View style={styles.wrapper}>
                         {this.renderText()}

app/components/channel_drawer/channels_list/index.js

@@ -200,8 +200,8 @@ class ChannelsList extends Component {
                         style={styles.badge}
                         countStyle={styles.mention}
                         count={badgeCount}
-                        minHeight={5}
-                        minWidth={5}
+                        minHeight={20}
+                        minWidth={20}
                     />
                 );
             }
@@ -361,12 +361,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             borderRadius: 10,
             borderWidth: 1,
             flexDirection: 'row',
-            height: 20,
             padding: 3,
             position: 'absolute',
             left: 5,
-            top: 0,
-            width: 20
+            top: 0
         },
         mention: {
             color: theme.mentionColor,

app/components/channel_drawer/teams_list/teams_list.js

@@ -124,8 +124,8 @@ class TeamsList extends PureComponent {
                     style={styles.badge}
                     countStyle={styles.mention}
                     count={badgeCount}
-                    minHeight={5}
-                    minWidth={5}
+                    minHeight={20}
+                    minWidth={20}
                 />
             );
         }
@@ -319,12 +319,10 @@ const getStyleSheet = makeStyleSheetFromTheme((theme) => {
             borderRadius: 10,
             borderWidth: 1,
             flexDirection: 'row',
-            height: 20,
             padding: 3,
             position: 'absolute',
             left: 45,
-            top: -7.5,
-            width: 20
+            top: -7.5
         },
         mention: {
             color: theme.mentionColor,

app/screens/channel/channel_drawer_button.js

@@ -117,8 +117,8 @@ class ChannelDrawerButton extends PureComponent {
                     style={style.badge}
                     countStyle={style.mention}
                     count={badgeCount}
-                    minHeight={5}
-                    minWidth={5}
+                    minHeight={20}
+                    minWidth={20}
                     onPress={() => preventDoubleTap(this.handlePress, this)}
                 />
             );
@@ -162,8 +162,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
             borderRadius: 10,
             borderWidth: 1,
             flexDirection: 'row',
-            height: 20,
-            left: 5,
+            left: 3,
             padding: 3,
             position: 'absolute',
             right: 0,
@@ -174,8 +173,7 @@ const getStyleFromTheme = makeStyleSheetFromTheme((theme) => {
                 ios: {
                     top: 5
                 }
-            }),
-            width: 20
+            })
         },
         mention: {
             color: theme.mentionColor,