diff --git a/ags-v3/widget/modules/Battery.tsx b/ags-v3/widget/modules/Battery.tsx index c874541..1654564 100644 --- a/ags-v3/widget/modules/Battery.tsx +++ b/ags-v3/widget/modules/Battery.tsx @@ -1,29 +1,38 @@ import AstalBattery from "gi://AstalBattery" -import { createBinding } from "ags" +import { createBinding, createDerivedBinding } from "ags" export default function Battery() { const bat = AstalBattery.get_default() - const text = createBinding(bat, "percentage")((p: number) => { - const pct = Math.round(p * 100) - let icon = "" - if (bat.charging) icon = "󰂄" - else if (pct > 90) icon = "󰁹" - else if (pct > 70) icon = "󰂁" - else if (pct > 50) icon = "󰁿" - else if (pct > 30) icon = "󰁽" - else if (pct > 10) icon = "󰁻" - else icon = "󰂃" - return `${icon} ${pct}%` - }) + const percentage = createBinding(bat, "percentage") + const charging = createBinding(bat, "charging") - const cls = createBinding(bat, "percentage")((p: number) => { - const pct = Math.round(p * 100) - if (bat.charging) return "battery charging" - if (pct <= 10) return "battery low" - if (pct <= 20) return "battery warning" - return "battery" - }) + const text = createDerivedBinding( + [percentage, charging], + (p: number, isCharging: boolean) => { + const pct = Math.round(p * 100) + let icon = "" + if (isCharging) icon = "󰂄" + else if (pct > 90) icon = "󰁹" + else if (pct > 70) icon = "󰂁" + else if (pct > 50) icon = "󰁿" + else if (pct > 30) icon = "󰁽" + else if (pct > 10) icon = "󰁻" + else icon = "󰂃" + return `${icon} ${pct}%` + }, + ) + + const cls = createDerivedBinding( + [percentage, charging], + (p: number, isCharging: boolean) => { + const pct = Math.round(p * 100) + if (isCharging) return "battery charging" + if (pct <= 10) return "battery low" + if (pct <= 20) return "battery warning" + return "battery" + }, + ) return