sapo-components-ui-rn 1.1.3 → 1.1.4

package/dist/components/Badge/index.d.ts

@@ -3,8 +3,8 @@ import { StyleProp, ViewStyle, TextStyle } from "react-native";
 type BadgeType = "success" | "error" | "info" | "warning" | "default";
 type BadgeSize = "default" | "small" | "tiny";
 type BadgeMode = "default" | "outline";
+type ProgressType = "full" | "half" | "empty" | "none";
 interface BadgeProps {
-    children?: React.ReactNode;
     value?: string;
     borderColor?: string;
     backgroundColor?: string;
@@ -15,6 +15,8 @@ interface BadgeProps {
     badgeSize?: BadgeSize;
     mode?: BadgeMode;
     textSize?: number;
+    progressType?: ProgressType;
+    leftIcon?: React.ReactNode;
 }
 declare const Badge: React.NamedExoticComponent<BadgeProps>;
 export default Badge;

package/dist/index.esm.js

@@ -6799,13 +6799,47 @@ var BADGE_CONFIGS = {
         borderRadius: 4,
     },
 };
+var ProgressCircle = function (_a) {
+    var progress = _a.progress, color = _a.color;
+    var size = 8;
+    if (progress === "empty") {
+        return (React__default.createElement(View, { style: {
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+                borderWidth: CONSTANTS.BORDER_WIDTH_1,
+                borderColor: color,
+                backgroundColor: "transparent",
+            } }));
+    }
+    if (progress === "half") {
+        return (React__default.createElement(View, { style: {
+                width: size,
+                height: size,
+                borderRadius: size / 2,
+                borderWidth: CONSTANTS.BORDER_WIDTH_1,
+                borderColor: color,
+                backgroundColor: "transparent",
+                overflow: "hidden",
+                justifyContent: "flex-end",
+            } },
+            React__default.createElement(View, { style: {
+                    width: size,
+                    height: size / 2,
+                    backgroundColor: color,
+                } })));
+    }
+    return (React__default.createElement(View, { style: {
+            width: size,
+            height: size,
+            borderRadius: size / 2,
+            backgroundColor: color,
+        } }));
+};
 var Badge = React__default.memo(function (_a) {
-    var children = _a.children, _b = _a.value, value = _b === void 0 ? "1" : _b, style = _a.style, textColor = _a.textColor, textStyle = _a.textStyle, _c = _a.type, type = _c === void 0 ? "success" : _c, _d = _a.badgeSize, badgeSize = _d === void 0 ? "default" : _d, _e = _a.mode, mode = _e === void 0 ? "default" : _e, textSize = _a.textSize, borderColor = _a.borderColor, backgroundColor = _a.backgroundColor;
+    var _b = _a.value, value = _b === void 0 ? "1" : _b, style = _a.style, textColor = _a.textColor, textStyle = _a.textStyle, _c = _a.type, type = _c === void 0 ? "success" : _c, _d = _a.badgeSize, badgeSize = _d === void 0 ? "default" : _d, _e = _a.mode, mode = _e === void 0 ? "default" : _e, textSize = _a.textSize, borderColor = _a.borderColor, backgroundColor = _a.backgroundColor, _f = _a.progressType, progressType = _f === void 0 ? "none" : _f, leftIcon = _a.leftIcon;
     var theme = useInternalTheme();
     var colors = theme.colors;
-    if (children) {
-        return React__default.createElement(View, { style: style }, children);
-    }
     var sizeStyles = useMemo(function () {
         if (badgeSize === "tiny")
             return null;
@@ -6898,11 +6932,15 @@ var Badge = React__default.memo(function (_a) {
         return textSize || ((_a = BADGE_CONFIGS.sizes[badgeSize]) === null || _a === void 0 ? void 0 : _a.textSize) || 12;
     }, [textSize, badgeSize]);
     if (badgeSize === "tiny") {
-        return (React__default.createElement(View, { row: true, width: BADGE_CONFIGS.tiny.width, height: BADGE_CONFIGS.tiny.height, borderRadius: BADGE_CONFIGS.tiny.borderRadius, backgroundColor: typeStyles.backgroundColor }));
+        return (React__default.createElement(View, { row: true, style: style },
+            React__default.createElement(ProgressCircle, { progress: progressType, color: typeStyles.backgroundColor })));
     }
     return (React__default.createElement(View, { row: true },
-        React__default.createElement(View, { center: true, borderRadius: 999, borderWidth: CONSTANTS.BORDER_WIDTH_1, style: [sizeStyles, typeStyles, style] },
-            React__default.createElement(Text$1, { size: finalTextSize, color: textColor || textColorStyle, style: [styles$8.textMedium, textStyle] }, value))));
+        React__default.createElement(View, { row: true, center: true, borderRadius: 999, borderWidth: CONSTANTS.BORDER_WIDTH_1, style: [sizeStyles, typeStyles, style] },
+            leftIcon && React__default.createElement(View, { paddingRight: CONSTANTS.SPACE_4 }, leftIcon),
+            progressType !== "none" && (React__default.createElement(ProgressCircle, { progress: progressType, color: textColorStyle })),
+            React__default.createElement(View, { paddingLeft: progressType !== "none" ? CONSTANTS.SPACE_4 : 0 },
+                React__default.createElement(Text$1, { size: finalTextSize, color: textColor || textColorStyle, style: [styles$8.textMedium, textStyle] }, value)))));
 });
 Badge.displayName = "Badge";
 var styles$8 = StyleSheet.create(__assign({}, containerStyles));