@hero-design/rn 8.119.1 → 8.120.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @hero-design/rn
 
+## 8.120.0
+
+### Minor Changes
+
+- [#4874](https://github.com/Thinkei/hero-design/pull/4874) [`c3c35f0c8d2825138330aaae0ae383b624b8e067`](https://github.com/Thinkei/hero-design/commit/c3c35f0c8d2825138330aaae0ae383b624b8e067) Thanks [@ttkien](https://github.com/ttkien)! - [BottomNavigation] add badge count
+
 ## 8.119.1
 
 ### Patch Changes

package/es/index.js

@@ -10399,10 +10399,12 @@ var BottomNavigation = function BottomNavigation(_ref) {
   })), /*#__PURE__*/React__default.createElement(BottomBarWrapper, {
     themeInsets: insets
   }, /*#__PURE__*/React__default.createElement(BottomBar, null, tabs.map(function (tab) {
+    var _badge$count, _badge$testID;
     var key = tab.key,
       icon = tab.icon,
       title = tab.title,
-      testID = tab.testID;
+      testID = tab.testID,
+      badge = tab.badge;
     var active = selectedTabKey === key;
     var inactiveIcon = getInactiveIcon(icon);
     return /*#__PURE__*/React__default.createElement(TouchableWithoutFeedback, {
@@ -10411,11 +10413,16 @@ var BottomNavigation = function BottomNavigation(_ref) {
         return onTabPress(key);
       },
       testID: testID
-    }, /*#__PURE__*/React__default.createElement(BottomBarItem, null, /*#__PURE__*/React__default.createElement(Icon, {
+    }, /*#__PURE__*/React__default.createElement(BottomBarItem, null, /*#__PURE__*/React__default.createElement(Status, {
+      content: (_badge$count = badge === null || badge === void 0 ? void 0 : badge.count) !== null && _badge$count !== void 0 ? _badge$count : 0,
+      visible: !!badge && badge.count > 0,
+      max: badge === null || badge === void 0 ? void 0 : badge.max,
+      testID: (_badge$testID = badge === null || badge === void 0 ? void 0 : badge.testID) !== null && _badge$testID !== void 0 ? _badge$testID : "bottom-nav-badge-".concat(key)
+    }, /*#__PURE__*/React__default.createElement(Icon, {
       icon: active ? icon : inactiveIcon,
       intent: active ? 'primary' : 'muted',
       testID: "hero-icon-".concat(icon)
-    }), !!title && /*#__PURE__*/React__default.createElement(StyledBottomBarText, {
+    })), !!title && /*#__PURE__*/React__default.createElement(StyledBottomBarText, {
       intent: active ? 'primary' : 'muted',
       numberOfLines: 1
     }, title)));

package/lib/index.js

@@ -10428,10 +10428,12 @@ var BottomNavigation = function BottomNavigation(_ref) {
   })), /*#__PURE__*/React__namespace.default.createElement(BottomBarWrapper, {
     themeInsets: insets
   }, /*#__PURE__*/React__namespace.default.createElement(BottomBar, null, tabs.map(function (tab) {
+    var _badge$count, _badge$testID;
     var key = tab.key,
       icon = tab.icon,
       title = tab.title,
-      testID = tab.testID;
+      testID = tab.testID,
+      badge = tab.badge;
     var active = selectedTabKey === key;
     var inactiveIcon = getInactiveIcon(icon);
     return /*#__PURE__*/React__namespace.default.createElement(reactNative.TouchableWithoutFeedback, {
@@ -10440,11 +10442,16 @@ var BottomNavigation = function BottomNavigation(_ref) {
         return onTabPress(key);
       },
       testID: testID
-    }, /*#__PURE__*/React__namespace.default.createElement(BottomBarItem, null, /*#__PURE__*/React__namespace.default.createElement(Icon, {
+    }, /*#__PURE__*/React__namespace.default.createElement(BottomBarItem, null, /*#__PURE__*/React__namespace.default.createElement(Status, {
+      content: (_badge$count = badge === null || badge === void 0 ? void 0 : badge.count) !== null && _badge$count !== void 0 ? _badge$count : 0,
+      visible: !!badge && badge.count > 0,
+      max: badge === null || badge === void 0 ? void 0 : badge.max,
+      testID: (_badge$testID = badge === null || badge === void 0 ? void 0 : badge.testID) !== null && _badge$testID !== void 0 ? _badge$testID : "bottom-nav-badge-".concat(key)
+    }, /*#__PURE__*/React__namespace.default.createElement(Icon, {
       icon: active ? icon : inactiveIcon,
       intent: active ? 'primary' : 'muted',
       testID: "hero-icon-".concat(icon)
-    }), !!title && /*#__PURE__*/React__namespace.default.createElement(StyledBottomBarText, {
+    })), !!title && /*#__PURE__*/React__namespace.default.createElement(StyledBottomBarText, {
       intent: active ? 'primary' : 'muted',
       numberOfLines: 1
     }, title)));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hero-design/rn",
-  "version": "8.119.1",
+  "version": "8.120.0",
   "license": "MIT",
   "main": "lib/index.js",
   "module": "es/index.js",

package/src/components/BottomNavigation/index.tsx

@@ -16,6 +16,7 @@ import {
 } from './StyledBottomNavigation';
 import { isIOS } from '../../utils/helpers';
 import type { IconName } from '../Icon';
+import Count from '../Badge/Count';
 
 export type BottomNavigationTabType = {
   key: string;
@@ -23,8 +24,18 @@ export type BottomNavigationTabType = {
   icon: IconName;
   component: ReactNode;
   testID?: string;
+  /**
+   * Badge to display on the tab icon.
+   */
+  badge?: {
+    /** The number to display on the badge. */
+    count: number;
+    /** Maximum number before showing `${max}+`. Defaults to 99. */
+    max?: number;
+    /** Testing id for the badge wrapper. */
+    testID?: string;
+  };
 };
-
 interface BottomNavigationProps extends ViewProps {
   /**
    * Callback which is called on tab press, receiving key of upcoming active Tab.
@@ -42,13 +53,7 @@ interface BottomNavigationProps extends ViewProps {
   /**
    * List of Tabs to be rendered. Each Tab must have an unique key.
    */
-  tabs: {
-    key: string;
-    title?: string;
-    icon: IconName;
-    component: ReactNode;
-    testID?: string;
-  }[];
+  tabs: BottomNavigationTabType[];
   /**
    * Additional style.
    */
@@ -124,7 +129,7 @@ const BottomNavigation = ({
       <BottomBarWrapper themeInsets={insets}>
         <BottomBar>
           {tabs.map((tab) => {
-            const { key, icon, title, testID } = tab;
+            const { key, icon, title, testID, badge } = tab;
             const active = selectedTabKey === key;
             const inactiveIcon = getInactiveIcon(icon);
 
@@ -135,11 +140,18 @@ const BottomNavigation = ({
                 testID={testID}
               >
                 <BottomBarItem>
-                  <Icon
-                    icon={active ? icon : inactiveIcon}
-                    intent={active ? 'primary' : 'muted'}
-                    testID={`hero-icon-${icon}`}
-                  />
+                  <Count
+                    content={badge?.count ?? 0}
+                    visible={!!badge && badge.count > 0}
+                    max={badge?.max}
+                    testID={badge?.testID ?? `bottom-nav-badge-${key}`}
+                  >
+                    <Icon
+                      icon={active ? icon : inactiveIcon}
+                      intent={active ? 'primary' : 'muted'}
+                      testID={`hero-icon-${icon}`}
+                    />
+                  </Count>
                   {!!title && (
                     <StyledBottomBarText
                       intent={active ? 'primary' : 'muted'}

package/types/components/BottomNavigation/index.d.ts

@@ -7,6 +7,17 @@ export type BottomNavigationTabType = {
     icon: IconName;
     component: ReactNode;
     testID?: string;
+    /**
+     * Badge to display on the tab icon.
+     */
+    badge?: {
+        /** The number to display on the badge. */
+        count: number;
+        /** Maximum number before showing `${max}+`. Defaults to 99. */
+        max?: number;
+        /** Testing id for the badge wrapper. */
+        testID?: string;
+    };
 };
 interface BottomNavigationProps extends ViewProps {
     /**
@@ -25,13 +36,7 @@ interface BottomNavigationProps extends ViewProps {
     /**
      * List of Tabs to be rendered. Each Tab must have an unique key.
      */
-    tabs: {
-        key: string;
-        title?: string;
-        icon: IconName;
-        component: ReactNode;
-        testID?: string;
-    }[];
+    tabs: BottomNavigationTabType[];
     /**
      * Additional style.
      */