98 lines
2.6 KiB
JavaScript
98 lines
2.6 KiB
JavaScript
// @flow
|
|
import React from "react";
|
|
import ListItem from "@material-ui/core/ListItem";
|
|
import ListItemIcon from "@material-ui/core/ListItemIcon";
|
|
import { renderRawIcon } from "config/icon";
|
|
|
|
import type { ControlUI } from "config/flowtypes";
|
|
|
|
import { Toggle, DropDown, Link,
|
|
Section, Text, Progress, Slider } from "./UiItem";
|
|
import MqttContext from "mqtt/context";
|
|
import type { MqttContextValue } from "mqtt/context";
|
|
|
|
export type UiItemListProps = {
|
|
controls: Array<ControlUI>
|
|
};
|
|
|
|
export default class UiItemList extends React.PureComponent<UiItemListProps> {
|
|
constructor(props: UiItemListProps) {
|
|
super(props);
|
|
}
|
|
|
|
render() {
|
|
return this.props.controls.map((control, key) => {
|
|
if (control.type == null) {
|
|
throw new Error(
|
|
"A control is missing the \"type\" parameter"
|
|
);
|
|
}
|
|
if (control.type === "section") {
|
|
return (
|
|
<MqttContext.Consumer>
|
|
{this.renderListItem(control, key)}
|
|
</MqttContext.Consumer>
|
|
);
|
|
}
|
|
return (
|
|
<ListItem key={key}>
|
|
<MqttContext.Consumer>
|
|
{this.renderListItem(control, key)}
|
|
</MqttContext.Consumer>
|
|
</ListItem>
|
|
);
|
|
});
|
|
}
|
|
|
|
renderListItem(control: ControlUI, key: number) {
|
|
return (mqtt: MqttContextValue) => {
|
|
const node = this.renderControl(control, key.toString(), mqtt);
|
|
if (control.icon == null || control.type === "link") {
|
|
return node;
|
|
} else {
|
|
const listIconNode = (
|
|
<ListItemIcon key={`${key.toString()}-liicon`}>
|
|
{renderRawIcon(control.icon(mqtt.state), "mdi-24px")}
|
|
</ListItemIcon>
|
|
);
|
|
return [listIconNode, node];
|
|
}
|
|
};
|
|
}
|
|
|
|
renderControl(control: ControlUI, key: string, mqtt: MqttContextValue) {
|
|
const props = {
|
|
state: Object.assign({}, mqtt.state),
|
|
onChangeState: mqtt.changeState,
|
|
key: `${key}-licontrol`
|
|
};
|
|
switch (control.type) {
|
|
case "toggle": {
|
|
return <Toggle item={control} {...props} />;
|
|
}
|
|
case "dropDown": {
|
|
return <DropDown item={control} {...props} />;
|
|
}
|
|
case "section": {
|
|
return <Section item={control} {...props} />;
|
|
}
|
|
case "link": {
|
|
return <Link item={control} {...props} />;
|
|
}
|
|
case "slider": {
|
|
return <Slider item={control} {...props} />;
|
|
}
|
|
case "text": {
|
|
return <Text item={control} {...props} />;
|
|
}
|
|
case "progress": {
|
|
return <Progress item={control} {...props} />;
|
|
}
|
|
default: {
|
|
throw new Error(
|
|
`Unknown UI type "${control.type}" for "${control.text}" component`
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|