Farmbot-Web-App/frontend/devices/components/pin_guard_input_group.tsx

49 lines
1.5 KiB
TypeScript

import * as React from "react";
import { McuInputBox } from "./mcu_input_box";
import { PinGuardMCUInputGroupProps } from "./interfaces";
import { Row, Col } from "../../ui/index";
import { settingToggle } from "../actions";
import { ToggleButton } from "../../controls/toggle_button";
import { isUndefined } from "lodash";
import { t } from "../../i18next_wrapper";
import { PinNumberDropdown } from "./pin_number_dropdown";
export function PinGuardMCUInputGroup(props: PinGuardMCUInputGroupProps) {
const { sourceFwConfig, dispatch, label, pinNumKey, timeoutKey, activeStateKey
} = props;
const activeStateValue = sourceFwConfig(activeStateKey).value;
const inactiveState = isUndefined(activeStateValue)
? undefined
: !activeStateValue;
return <Row>
<Col xs={3}>
<label>
{label}
</label>
</Col>
<Col xs={3}>
<PinNumberDropdown
pinNumKey={pinNumKey}
dispatch={dispatch}
resources={props.resources}
sourceFwConfig={sourceFwConfig} />
</Col>
<Col xs={4}>
<McuInputBox
setting={timeoutKey}
sourceFwConfig={sourceFwConfig}
dispatch={dispatch}
filter={32000} />
</Col>
<Col xs={2} className={"centered-button-div"}>
<ToggleButton
customText={{ textFalse: t("low"), textTrue: t("high") }}
toggleValue={inactiveState}
dim={!sourceFwConfig(activeStateKey).consistent}
toggleAction={() =>
dispatch(settingToggle(activeStateKey, sourceFwConfig))} />
</Col>
</Row>;
}