55 lines
1.5 KiB
JavaScript
55 lines
1.5 KiB
JavaScript
// @flow
|
|
import * as React from "react";
|
|
import ReactContext from "mqtt/context";
|
|
|
|
export opaque type RawIcon: string = string;
|
|
|
|
export type Icon = (State) => RawIcon;
|
|
|
|
export const rawMdi = (name: string): RawIcon => {
|
|
return `mdi ${name.split(" ").map((icon) => "mdi-".concat(icon)).join(" ")}`;
|
|
};
|
|
|
|
export const mdi = (icon: string) => () => rawMdi(icon);
|
|
|
|
export const mdiBattery = (topic: string) => (state: State) => {
|
|
const rawval = state[topic];
|
|
const val = parseInt(rawval, 10);
|
|
if (isNaN(val)) {
|
|
return rawMdi("battery-unknown");
|
|
} else if (val > 95) {
|
|
return rawMdi("battery");
|
|
} else if (val > 85) {
|
|
return rawMdi("battery-90");
|
|
} else if (val > 75) {
|
|
return rawMdi("battery-80");
|
|
} else if (val > 65) {
|
|
return rawMdi("battery-70");
|
|
} else if (val > 55) {
|
|
return rawMdi("battery-60");
|
|
} else if (val > 45) {
|
|
return rawMdi("battery-50");
|
|
} else if (val > 35) {
|
|
return rawMdi("battery-40");
|
|
} else if (val > 25) {
|
|
return rawMdi("battery-30");
|
|
} else if (val > 15) {
|
|
return rawMdi("battery-20");
|
|
} else {
|
|
return rawMdi("battery-10");
|
|
}
|
|
};
|
|
|
|
export const renderRawIcon =
|
|
(icon: RawIcon, extraClass?: string): React.Node => {
|
|
return <i className={`${extraClass || ""} ${icon}`}></i>;
|
|
};
|
|
|
|
export const renderIcon =
|
|
(icon: Icon, extraClass?: string): React.Node => {
|
|
return (
|
|
<ReactContext.Consumer>
|
|
{({state}) => renderRawIcon(icon(state), extraClass)}
|
|
</ReactContext.Consumer>
|
|
);
|
|
};
|