2017-09-19 12:28:19 -06:00
|
|
|
import * as React from "react";
|
|
|
|
import { Row, Col } from "../ui/index";
|
|
|
|
import { ToggleButton } from "./toggle_button";
|
2019-04-02 13:59:37 -06:00
|
|
|
import { t } from "../i18next_wrapper";
|
2017-09-19 12:28:19 -06:00
|
|
|
|
|
|
|
export interface KeyValRowProps {
|
|
|
|
label: string;
|
2017-09-19 13:47:42 -06:00
|
|
|
labelPlaceholder: string;
|
2017-09-19 12:28:19 -06:00
|
|
|
value: string;
|
2017-09-19 13:47:42 -06:00
|
|
|
valuePlaceholder: string;
|
2017-09-19 12:28:19 -06:00
|
|
|
onClick(): void;
|
|
|
|
disabled: boolean;
|
2017-09-20 17:56:41 -06:00
|
|
|
toggleValue?: number | undefined;
|
2018-12-03 20:05:45 -07:00
|
|
|
title?: string;
|
2017-09-19 12:28:19 -06:00
|
|
|
}
|
|
|
|
|
2018-12-18 11:25:17 -07:00
|
|
|
/** A row containing a label, value, and toggle button. Useful for maintaining
|
2017-09-19 12:28:19 -06:00
|
|
|
* lists of things (peripherals, feeds, tools etc). */
|
|
|
|
export function KeyValShowRow(p: KeyValRowProps) {
|
2018-12-03 20:05:45 -07:00
|
|
|
const { label, value, toggleValue, disabled, onClick, title } = p;
|
2017-09-19 12:28:19 -06:00
|
|
|
return <Row>
|
|
|
|
<Col xs={4}>
|
|
|
|
<label>{label}</label>
|
|
|
|
</Col>
|
|
|
|
<Col xs={4}>
|
2017-09-20 17:56:41 -06:00
|
|
|
<p>{value}</p>
|
2017-09-19 12:28:19 -06:00
|
|
|
</Col>
|
|
|
|
<Col xs={4}>
|
|
|
|
<ToggleButton
|
2017-09-20 17:56:41 -06:00
|
|
|
toggleValue={toggleValue}
|
2017-09-19 12:28:19 -06:00
|
|
|
toggleAction={onClick}
|
2018-12-03 20:05:45 -07:00
|
|
|
title={title}
|
2018-03-13 21:55:15 -06:00
|
|
|
customText={{ textFalse: t("off"), textTrue: t("on") }}
|
2017-09-19 12:28:19 -06:00
|
|
|
disabled={disabled} />
|
|
|
|
</Col>
|
|
|
|
</Row>;
|
|
|
|
}
|