fix: changed the way that different battery status is rendered

Dygmalab · Aug 24, 2023 · b74c04d · b74c04d
1 parent 4cc3cc9
commit b74c04d
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 34 deletions.
diff --git a/src/renderer/component/Battery/BatteryStatusSide.tsx b/src/renderer/component/Battery/BatteryStatusSide.tsx
@@ -223,7 +223,6 @@ interface BatteryStatusSideProps {
 const BatteryStatusSide: React.FC<BatteryStatusSideProps> = ({ side, batteryLevel, isSavingMode, batteryStatus, size }) => {
   const [loading, setLoading] = useState(true);
   const [sideFirstLetter, setSideFirstLetter] = useState("");
-  const [isCharging, setIsCharging] = useState(false);
   const [sideStatus, setSideStatus] = useState("status--default");
 
   useEffect(() => {
@@ -260,9 +259,6 @@ const BatteryStatusSide: React.FC<BatteryStatusSideProps> = ({ side, batteryLeve
     if (batteryLevel < 10 && !isSavingMode && batteryStatus === 0) {
       setSideStatus("status--critical");
     }
-    if (batteryStatus === 1) {
-      setIsCharging(true);
-    }
   }, [size, batteryLevel, batteryStatus, isSavingMode]);
 
   if (loading) return null;
@@ -271,16 +267,8 @@ const BatteryStatusSide: React.FC<BatteryStatusSideProps> = ({ side, batteryLeve
       <div className={`battery-indicator--item size--${size} item--${side} ${sideStatus} ${isSavingMode && "status--saving"}`}>
         <div className="battery-item--container">
           {size === "sm" ? <div className="battery-indicator--side">{sideFirstLetter}</div> : ""}
-          {size === "sm" ? (
-            <PileIndicator batteryLevel={batteryLevel} isCharging={isCharging} batteryStatus={batteryStatus} />
-          ) : (
-            ""
-          )}
-          {size === "lg" ? (
-            <DefyBatteryIndicator side={side} batteryLevel={batteryLevel} batteryStatus={batteryStatus} isCharging={isCharging} />
-          ) : (
-            ""
-          )}
+          {size === "sm" ? <PileIndicator batteryLevel={batteryLevel} batteryStatus={batteryStatus} /> : ""}
+          {size === "lg" ? <DefyBatteryIndicator side={side} batteryLevel={batteryLevel} batteryStatus={batteryStatus} /> : ""}
         </div>
       </div>
     </Style>

diff --git a/src/renderer/component/Battery/DefyBatteryIndicator.tsx b/src/renderer/component/Battery/DefyBatteryIndicator.tsx
@@ -64,20 +64,35 @@ interface DefyBatteryIndicatorProps {
   side: "left" | "right";
   batteryLevel: number;
   batteryStatus: number;
-  isCharging: boolean;
 }
-const DefyBatteryIndicator = ({ side, batteryLevel, isCharging, batteryStatus }: DefyBatteryIndicatorProps) => {
+const DefyBatteryIndicator = ({ side, batteryLevel, batteryStatus }: DefyBatteryIndicatorProps) => {
   const [batteryHeight, setBatteryHeight] = useState(0);
 
   useEffect(() => {
-    if (!isCharging && batteryStatus === 0) {
-      if (batteryLevel > 0 && batteryLevel < 5) {
-        setBatteryHeight(2);
-      } else {
-        setBatteryHeight((115 * batteryLevel) / 100);
-      }
+    switch (batteryStatus) {
+      case 0:
+        if (batteryLevel > 0 && batteryLevel < 5) {
+          setBatteryHeight(2);
+        } else {
+          setBatteryHeight((115 * batteryLevel) / 100);
+        }
+        break;
+      case 1:
+        setBatteryHeight(0);
+        break;
+      case 2:
+        setBatteryHeight(115);
+        break;
+      case 3:
+        setBatteryHeight(0);
+        break;
+      case 4:
+        setBatteryHeight(0);
+        break;
+      default:
+        setBatteryHeight(0);
     }
-  }, [batteryLevel, batteryStatus, isCharging]);
+  }, [batteryLevel, batteryStatus]);
 
   return (
     <Style>

diff --git a/src/renderer/component/Battery/PileIndicator.tsx b/src/renderer/component/Battery/PileIndicator.tsx
@@ -13,21 +13,34 @@ const PileIndicator = ({ batteryLevel, isCharging, batteryStatus }: PileIndicato
   const maskHash = `${Date.now()}-${(Math.random() + 1).toString(36).substring(7)}-level`;
 
   useEffect(() => {
-    if (!isCharging) {
-      if (batteryLevel < 5) {
-        setBatteryWidth(1);
-      } else {
-        setBatteryWidth((16 * batteryLevel) / 100);
-      }
-    }
-    if (batteryStatus === 2) {
-      setBatteryWidth(16);
+    switch (batteryStatus) {
+      case 0:
+        if (batteryLevel < 5) {
+          setBatteryWidth(1);
+        } else {
+          setBatteryWidth((16 * batteryLevel) / 100);
+        }
+        break;
+      case 1:
+        setBatteryWidth(0);
+        break;
+      case 2:
+        setBatteryWidth(16);
+        break;
+      case 3:
+        setBatteryWidth(0);
+        break;
+      case 4:
+        setBatteryWidth(0);
+        break;
+      default:
+        setBatteryWidth(0);
     }
   }, [batteryLevel, isCharging, batteryStatus]);
 
   return (
     <svg className="pileIndicator" width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-      {isCharging ? (
+      {batteryStatus === 1 ? (
         <>
           <mask
             id={`mask0_1956_10095-${maskHash}`}
@@ -62,7 +75,11 @@ const PileIndicator = ({ batteryLevel, isCharging, batteryStatus }: PileIndicato
         ""
       )}
       <rect x="21" y="6" width="1" height="4" fill="currentColor" />
-      {isCharging ? <path d="M7 8.45833L11 2.5V7.08333H13L9 13.5V8.45833H7Z" fill="currentColor" stroke="currentColor" /> : ""}
+      {batteryStatus === 1 ? (
+        <path d="M7 8.45833L11 2.5V7.08333H13L9 13.5V8.45833H7Z" fill="currentColor" stroke="currentColor" />
+      ) : (
+        ""
+      )}
       {batteryStatus === 0 ? (
         <>
           <rect x="0.5" y="4.5" width="19" height="7" stroke="currentColor" />

diff --git a/src/renderer/modules/Battery/BatteryStatus.tsx b/src/renderer/modules/Battery/BatteryStatus.tsx
@@ -129,6 +129,10 @@ const BatteryStatus = ({ disable }: BatteryStatusProps) => {
     setsLeft(leftStatus.includes("0x") ? 255 : parseInt(leftStatus, 10));
     setsRight(rightStatus.includes("0x") ? 255 : parseInt(rightStatus, 10));
     setIsSavingMode(parseInt(savingMode, 10) > 0);
+    console.log("L: batteryLevel", bLeft);
+    console.log("L: batteryStatus", sLeft);
+    console.log("R: batteryLevel", bRight);
+    console.log("R: batteryStatus", sRight);
   }
 
   if (!disable) {