sapo-components-ui-rn 1.1.3 → 1.1.5

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

@@ -1,10 +1,10 @@
 import React from "react";
 import { StyleProp, ViewStyle, TextStyle } from "react-native";
 type BadgeType = "success" | "error" | "info" | "warning" | "default";
-type BadgeSize = "default" | "small" | "tiny";
+type BadgeSize = "large" | "medium" | "small";
 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

@@ -6781,33 +6781,68 @@ var Image$1 = memoDeepEqual(Image);
 
 var BADGE_CONFIGS = {
     sizes: {
-        small: {
+        medium: {
             paddingHorizontal: CONSTANTS.SPACE_4,
             minWidth: 16,
             minHeight: 16,
             textSize: 10,
         },
-        default: {
+        large: {
             paddingHorizontal: CONSTANTS.SPACE_8,
             minWidth: 16,
+            minHeight: 24,
             textSize: 12,
         },
     },
-    tiny: {
+    small: {
         width: 8,
         height: 8,
         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 ? "large" : _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")
+        if (badgeSize === "small")
             return null;
         return BADGE_CONFIGS.sizes[badgeSize];
     }, [badgeSize]);
@@ -6839,8 +6874,8 @@ var Badge = React__default.memo(function (_a) {
                     backgroundColor: backgroundColor || colors.surfacePrimaryInverseDefault,
                 },
                 outline: {
-                    borderColor: borderColor || colors.borderInfoDefault,
-                    backgroundColor: backgroundColor || colors.surfaceInfoInverseDefault,
+                    borderColor: borderColor || colors.borderPrimaryDefault,
+                    backgroundColor: backgroundColor || colors.surfaceSecondaryDefault,
                 },
             },
             warning: {
@@ -6878,7 +6913,7 @@ var Badge = React__default.memo(function (_a) {
             },
             info: {
                 default: colors.textOnFillDefault,
-                outline: colors.textInfoDefault,
+                outline: colors.textDefault,
             },
             warning: {
                 default: colors.textOnFillDefault,
@@ -6893,16 +6928,20 @@ var Badge = React__default.memo(function (_a) {
     }, [colors, type, mode]);
     var finalTextSize = useMemo(function () {
         var _a;
-        if (badgeSize === "tiny")
+        if (badgeSize === "small")
             return 0;
         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 }));
+    if (badgeSize === "small") {
+        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));