GovOPlaN/govoplan-core
1
0
Fork 0
Code Issues 33 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(webui): clarify shared controls and status feedback

Browse Source
This commit is contained in:
Albrecht Degering
2026-07-20 20:03:42 +02:00
parent 344fc0077f
commit c50ce58ad8
9 changed files with 211 additions and 195 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
webui/src/components/ToggleSwitch.tsx
View File

@@ -5,15 +5,21 @@ import { usePlatformLanguage } from "../i18n/LanguageContext";
type ToggleSwitchProps = {
label: ReactNode;
activeLabel?: ReactNode;
inactiveLabel?: ReactNode;
checked: boolean;
onChange?: (checked: boolean) => void;
disabled?: boolean;
help?: ReactNode;
};
export default function ToggleSwitch({ label, checked, onChange, disabled = false, help }: ToggleSwitchProps) {
export default function ToggleSwitch({ label, activeLabel, inactiveLabel, checked, onChange, disabled = false, help }: ToggleSwitchProps) {
const { translateText } = usePlatformLanguage();
const hasStateLabels = activeLabel !== undefined || inactiveLabel !== undefined;
const renderedLabel = typeof label === "string" ? translateText(label) : label;
const renderedInactiveLabel = typeof inactiveLabel === "string" ? translateText(inactiveLabel) : inactiveLabel;
const renderedActiveLabel = typeof activeLabel === "string" ? translateText(activeLabel) : activeLabel;
const inputLabel = typeof renderedLabel === "string" ? renderedLabel : undefined;
return (
<label className={`toggle-switch-row ${disabled ? "disabled" : ""}`}>
<input
@@ -21,12 +27,25 @@ export default function ToggleSwitch({ label, checked, onChange, disabled = fals
type="checkbox"
checked={checked}
disabled={disabled}
aria-label={inputLabel}
onChange={(event) => onChange?.(event.target.checked)}
/>
{hasStateLabels && inactiveLabel !== undefined &&
<span className="toggle-switch-state-label is-inactive" data-selected={!checked || undefined}>
{renderedInactiveLabel}
</span>
}
<span className="toggle-switch-track" aria-hidden="true"><span className="toggle-switch-thumb" /></span>
{hasStateLabels && activeLabel !== undefined &&
<span className="toggle-switch-state-label is-active" data-selected={checked || undefined}>
{renderedActiveLabel}
</span>
}
{!hasStateLabels &&
<span className="toggle-switch-copy">
<FieldLabel className="toggle-switch-label" help={help ?? helpForFieldLabel(label)}>{renderedLabel}</FieldLabel>
</span>
}
</label>
);
}