2017-12-16 18:21:13 -07:00
|
|
|
import * as React from "react";
|
|
|
|
import { McuInputBox } from "./mcu_input_box";
|
|
|
|
import { PinGuardMCUInputGroupProps } from "./interfaces";
|
2018-01-20 07:46:44 -07:00
|
|
|
import { Row, Col } from "../../ui/index";
|
2017-12-16 18:21:13 -07:00
|
|
|
import { settingToggle } from "../actions";
|
|
|
|
import { ToggleButton } from "../../controls/toggle_button";
|
2018-08-08 08:44:12 -06:00
|
|
|
import { isUndefined } from "lodash";
|
2019-04-02 13:59:37 -06:00
|
|
|
import { t } from "../../i18next_wrapper";
|
2019-06-21 15:45:44 -06:00
|
|
|
import { PinNumberDropdown } from "./pin_number_dropdown";
|
2017-12-16 18:21:13 -07:00
|
|
|
|
|
|
|
export function PinGuardMCUInputGroup(props: PinGuardMCUInputGroupProps) {
|
|
|
|
|
2020-02-28 09:34:28 -07:00
|
|
|
const { sourceFwConfig, dispatch, label, pinNumKey, timeoutKey, activeStateKey
|
2018-03-09 02:34:24 -07:00
|
|
|
} = props;
|
2019-06-21 15:45:44 -06:00
|
|
|
const activeStateValue = sourceFwConfig(activeStateKey).value;
|
2018-03-09 02:34:24 -07:00
|
|
|
const inactiveState = isUndefined(activeStateValue)
|
2017-12-20 20:01:40 -07:00
|
|
|
? undefined
|
2018-03-09 02:34:24 -07:00
|
|
|
: !activeStateValue;
|
2017-12-16 18:21:13 -07:00
|
|
|
return <Row>
|
|
|
|
<Col xs={3}>
|
|
|
|
<label>
|
2020-02-28 09:34:28 -07:00
|
|
|
{label}
|
2017-12-16 18:21:13 -07:00
|
|
|
</label>
|
|
|
|
</Col>
|
|
|
|
<Col xs={3}>
|
2019-06-21 15:45:44 -06:00
|
|
|
<PinNumberDropdown
|
|
|
|
pinNumKey={pinNumKey}
|
2017-12-20 15:22:35 -07:00
|
|
|
dispatch={dispatch}
|
2019-06-21 15:45:44 -06:00
|
|
|
resources={props.resources}
|
|
|
|
sourceFwConfig={sourceFwConfig} />
|
2017-12-16 18:21:13 -07:00
|
|
|
</Col>
|
|
|
|
<Col xs={4}>
|
|
|
|
<McuInputBox
|
2019-06-21 15:45:44 -06:00
|
|
|
setting={timeoutKey}
|
2018-03-09 02:34:24 -07:00
|
|
|
sourceFwConfig={sourceFwConfig}
|
2017-12-20 15:22:35 -07:00
|
|
|
dispatch={dispatch}
|
|
|
|
filter={32000} />
|
2017-12-16 18:21:13 -07:00
|
|
|
</Col>
|
2018-01-29 11:32:32 -07:00
|
|
|
<Col xs={2} className={"centered-button-div"}>
|
2017-12-16 18:21:13 -07:00
|
|
|
<ToggleButton
|
2018-03-13 21:55:15 -06:00
|
|
|
customText={{ textFalse: t("low"), textTrue: t("high") }}
|
2017-12-20 20:01:40 -07:00
|
|
|
toggleValue={inactiveState}
|
2019-06-21 15:45:44 -06:00
|
|
|
dim={!sourceFwConfig(activeStateKey).consistent}
|
|
|
|
toggleAction={() =>
|
|
|
|
dispatch(settingToggle(activeStateKey, sourceFwConfig))} />
|
2017-12-16 18:21:13 -07:00
|
|
|
</Col>
|
|
|
|
</Row>;
|
|
|
|
}
|