52 lines
2.1 KiB
TypeScript
52 lines
2.1 KiB
TypeScript
import type { ReactNode } from "react";
|
|
import FieldLabel from "./help/FieldLabel";
|
|
import { helpForFieldLabel } from "../utils/fieldHelp";
|
|
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, 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
|
|
className="toggle-switch-input"
|
|
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>
|
|
);
|
|
}
|