mqtt-control-map/src/components/UiItems/Link.js
uwap 0a027fd7c2 Completely rewrite the UI Components
to a new functional way of defining them with advantages towards generating docs and a potential editor functionality
2018-11-10 01:34:31 +01:00

47 lines
1 KiB
JavaScript

// @flow
import React from "react";
import createComponent from "./base";
import { isEnabled, isDisabled } from "./utils";
import { renderRawIcon } from "config/icon";
import type { UILink } from "config/flowtypes";
import Button from "@material-ui/core/Button";
const followLink = (item, state) => () => {
if (isEnabled(item, state)) {
return window.open(item.link, "_blank");
}
return false;
};
const Icon = ({item, state}) => {
if (item.icon == null) {
return false;
}
return renderRawIcon(item.icon(state), "mdi-24px");
};
const BaseComponent = (_h, item: UILink, state, _changeState) => (
<Button
variant="raised"
onClick={followLink(item, state)}
color="primary"
disabled={isDisabled(item, state)}
>
<Icon item={item} state={state} />
{item.text}
</Button>
);
export default createComponent({
id: "link",
name: "Link",
desc: `
The link is a button that opens a web page in a new tab.
`,
parameters: {
text: "A descriptive label for the link"
},
baseComponent: BaseComponent
});