55 lines
1.5 KiB
TypeScript
55 lines
1.5 KiB
TypeScript
import * as React from "react";
|
|
import { ToggleButtonProps } from "./interfaces";
|
|
import { t } from "../i18next_wrapper";
|
|
|
|
export class ToggleButton extends React.Component<ToggleButtonProps, {}> {
|
|
caption() {
|
|
const { textTrue, textFalse } = this.props.customText
|
|
|| { textFalse: t("no"), textTrue: t("yes") };
|
|
const captions: { [s: string]: string | undefined } = {
|
|
"0": textFalse,
|
|
"false": textFalse,
|
|
"off": textFalse,
|
|
"1": textTrue,
|
|
"true": textTrue,
|
|
"on": textTrue,
|
|
"undefined": "🚫",
|
|
"-1": "🚫"
|
|
};
|
|
const togval = String(this.props.toggleValue);
|
|
return captions[togval] || "---";
|
|
}
|
|
|
|
css() {
|
|
const css = "fb-toggle-button fb-button ";
|
|
const greenCSS = css + "green";
|
|
const redCSS = css + "red";
|
|
const yellowCSS = css + "yellow";
|
|
|
|
const cssClasses: { [s: string]: string | undefined } = {
|
|
"0": redCSS,
|
|
"false": redCSS,
|
|
"off": redCSS,
|
|
"1": greenCSS,
|
|
"true": greenCSS,
|
|
"on": greenCSS,
|
|
"undefined": yellowCSS
|
|
};
|
|
|
|
return cssClasses[String(this.props.toggleValue)] || yellowCSS;
|
|
}
|
|
|
|
render() {
|
|
const addCss = (this.props.dim ? " dim" : "")
|
|
+ (this.props.grayscale ? " grayscale" : "");
|
|
const cb = () => !this.props.disabled && this.props.toggleAction();
|
|
return <button
|
|
disabled={!!this.props.disabled}
|
|
className={this.css() + addCss}
|
|
title={this.props.title || ""}
|
|
onClick={cb}>
|
|
{t(this.caption())}
|
|
</button>;
|
|
}
|
|
}
|