Almost completely rewrite UiItems
This commit is contained in:
parent
9cc827d5a6
commit
6c7ea9dfb3
8 changed files with 245 additions and 21 deletions
3
.babelrc
3
.babelrc
|
|
@ -2,4 +2,7 @@
|
|||
"presets": [
|
||||
"env", "react"
|
||||
],
|
||||
"plugins": [
|
||||
"transform-class-properties"
|
||||
],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -333,7 +333,7 @@ const config : Config = {
|
|||
somafm_lush: "Lush (SomaFM)"
|
||||
},
|
||||
icon: "radio",
|
||||
enableCondition: (a, b, state) => state.onkyo_connection.inernal == "connected" && state.onkyo_inputs.internal == "netzwerk"
|
||||
enableCondition: (a, b, state) => state.onkyo_connection.internal == "connected" && state.onkyo_inputs.internal == "netzwerk"
|
||||
},
|
||||
{
|
||||
type: "section",
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
"babel-core": "^6.25.0",
|
||||
"babel-eslint": "^8.0.1",
|
||||
"babel-loader": "^7.1.1",
|
||||
"babel-plugin-transform-class-properties": "^6.24.1",
|
||||
"babel-preset-react": "^6.24.1",
|
||||
"clean-webpack-plugin": "^0.1.17",
|
||||
"css-loader": "^0.28.7",
|
||||
|
|
|
|||
|
|
@ -87,6 +87,9 @@ class App extends React.Component<AppProps & Classes, AppState> {
|
|||
}
|
||||
|
||||
changeState(topic: string, value: any) {
|
||||
// this.receiveMessage(this.props.config.topics[topic].state, String(this.props.config.topics[topic].values[value] || value));
|
||||
// return;
|
||||
//
|
||||
const rawTopic = this.props.config.topics[topic].command;
|
||||
if (rawTopic == null) {
|
||||
return;
|
||||
|
|
|
|||
176
src/components/UiItemList/UiItem.js
Normal file
176
src/components/UiItemList/UiItem.js
Normal file
|
|
@ -0,0 +1,176 @@
|
|||
// @flow
|
||||
import React from "react";
|
||||
import _ from "lodash";
|
||||
import {
|
||||
ListItem,
|
||||
ListItemIcon,
|
||||
ListItemSecondaryAction,
|
||||
ListItemText,
|
||||
ListSubheader
|
||||
} from "material-ui/List";
|
||||
import Switch from "material-ui/Switch";
|
||||
import { renderIcon } from "utils/parseIconName";
|
||||
import Input, { InputLabel } from "material-ui/Input";
|
||||
import { FormControl } from "material-ui/Form";
|
||||
import Select from "material-ui/Select";
|
||||
import { MenuItem } from "material-ui/Menu";
|
||||
import Button from "material-ui/Button";
|
||||
|
||||
import keyOf from "utils/keyOf";
|
||||
|
||||
type UiItemProps<I> = {
|
||||
item: I,
|
||||
state: State,
|
||||
onChangeState: (topic: string, nextState: any) => void
|
||||
};
|
||||
|
||||
export default class UiItem<I> extends React.Component<UiItemProps<I>> {
|
||||
constructor(props: UiItemProps<I>) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
runPrimaryAction() {
|
||||
|
||||
}
|
||||
|
||||
changeState(next: any) {
|
||||
if (this.props.item.topic == null) {
|
||||
throw new Error(
|
||||
`Undefined topic in ${control.type} "${control.text}"`
|
||||
);
|
||||
}
|
||||
this.props.onChangeState(this.props.item.topic, next);
|
||||
}
|
||||
|
||||
getValue() {
|
||||
const topic: string = this.props.item.topic || "";
|
||||
const value = this.props.state[topic];
|
||||
if (value == null) {
|
||||
throw new Error(
|
||||
`Unknown topic "${control.topic}" in ${control.type} "${control.text}"`
|
||||
);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
isEnabled() {
|
||||
const enableCondition = this.props.item.enableCondition;
|
||||
if (enableCondition == null) {
|
||||
return true;
|
||||
} else {
|
||||
const value = this.getValue();
|
||||
return enableCondition(
|
||||
value.internal || value.actual, value.actual, this.props.state);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export class Toggle extends UiItem<UIToggle> {
|
||||
isToggled = () => {
|
||||
const value = this.getValue();
|
||||
const control = this.props.item;
|
||||
const isChecked = control.toggled || ((i) => i === (control.on || "on"));
|
||||
const checked = isChecked(
|
||||
value.internal || value.actual, value.actual, this.props.state);
|
||||
return checked;
|
||||
}
|
||||
|
||||
runPrimaryAction = () => {
|
||||
if (this.isEnabled()) {
|
||||
const control = this.props.item;
|
||||
const toggled = this.isToggled();
|
||||
const next = toggled ? (control.off || "off") : (control.on || "on");
|
||||
this.changeState(next);
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return [
|
||||
<ListItemText key="label" primary={this.props.item.text} />,
|
||||
<ListItemSecondaryAction key="action">
|
||||
<Switch label={this.props.item.text}
|
||||
checked={this.isToggled()}
|
||||
onChange={this.runPrimaryAction}
|
||||
disabled={!this.isEnabled()} />
|
||||
</ListItemSecondaryAction>
|
||||
];
|
||||
}
|
||||
}
|
||||
|
||||
export class DropDown extends UiItem<UIDropDown> {
|
||||
runPrimaryAction = (next?: any) => {
|
||||
if (this.isEnabled()) {
|
||||
const control = this.props.item;
|
||||
const keys = _.keys(control.options);
|
||||
const value = this.getValue();
|
||||
const valueIndex = keyOf(keys, value);
|
||||
if (next == null) {
|
||||
this.changeState(keys[(valueIndex + 1) % keys.length]);
|
||||
} else {
|
||||
this.changeState(next);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
const control = this.props.item;
|
||||
const value = this.getValue();
|
||||
const id = `${control.topic}-${control.name}`;
|
||||
const options = control.options;
|
||||
if (options == null) {
|
||||
throw new Error(
|
||||
`Parameter "options" missing for ${control.type} "${control.text}"`
|
||||
);
|
||||
}
|
||||
return (
|
||||
<FormControl>
|
||||
<InputLabel htmlFor={id}>{control.text}</InputLabel>
|
||||
<Select value={value.internal || value.actual}
|
||||
onChange={(event) => this.runPrimaryAction(event.target.value)}
|
||||
disabled={!this.isEnabled()}
|
||||
input={<Input id={id} />}
|
||||
>
|
||||
{_.map(options, (v, k) => <MenuItem value={k} key={k}>{v}</MenuItem>)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class Link extends UiItem<UILink> {
|
||||
runPrimaryAction = () => {
|
||||
const control = this.props.item;
|
||||
if (control.link == null) {
|
||||
throw new Error(
|
||||
`Parameter "link" missing for ${control.type} "${control.text}"`
|
||||
);
|
||||
}
|
||||
if (this.isEnabled()) {
|
||||
window.open(control.link, "_blank");
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<Button raised
|
||||
onClick={this.runPrimaryAction}
|
||||
color="primary"
|
||||
disabled={!this.isEnabled()}
|
||||
>
|
||||
{this.props.item.text}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class Section extends UiItem<UISection> {
|
||||
render() {
|
||||
return (
|
||||
<ListSubheader>{this.props.item.text}</ListSubheader>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -20,6 +20,8 @@ import Button from "material-ui/Button";
|
|||
import Slider from "material-ui-old/Slider";
|
||||
import MuiThemeProvider from "material-ui-old/styles/MuiThemeProvider";
|
||||
|
||||
import { Toggle, DropDown, Link, Section } from "./UiItem";
|
||||
|
||||
export type UiItemListProps = {
|
||||
controls: Array<ControlUI>,
|
||||
state: State,
|
||||
|
|
@ -54,16 +56,24 @@ export default class UiItemList extends React.Component<UiItemListProps> {
|
|||
renderControl(control: ControlUI) {
|
||||
switch (control.type) {
|
||||
case "toggle": {
|
||||
return this.renderToggle(control);
|
||||
return <Toggle item={control}
|
||||
state={this.props.state}
|
||||
onChangeState={this.props.onChangeState} />;
|
||||
}
|
||||
case "dropDown": {
|
||||
return this.renderDropDown(control);
|
||||
return <DropDown item={control}
|
||||
state={this.props.state}
|
||||
onChangeState={this.props.onChangeState} />;
|
||||
}
|
||||
case "section": {
|
||||
return this.renderSection(control);
|
||||
return <Section item={control}
|
||||
state={this.props.state}
|
||||
onChangeState={this.props.onChangeState} />;
|
||||
}
|
||||
case "link": {
|
||||
return this.renderLink(control);
|
||||
return <Link item={control}
|
||||
state={this.props.state}
|
||||
onChangeState={this.props.onChangeState} />;
|
||||
}
|
||||
case "slider": {
|
||||
return this.renderSlider(control);
|
||||
|
|
@ -13,32 +13,50 @@ declare type Topic = {
|
|||
};
|
||||
declare type Topics = Map<string,Topic>;
|
||||
|
||||
declare type ControlUI = {
|
||||
type: "toggle" | "dropDown" | "slider" | "section" | "link",
|
||||
declare type UIBase = {
|
||||
text: string,
|
||||
topic?: string,
|
||||
icon?: string,
|
||||
topic: string,
|
||||
icon?: string,
|
||||
enableCondition?: (internal: string, actual: any, state: State) => boolean
|
||||
}
|
||||
|
||||
enableCondition?: (internal: string, actual: any, state: State) => boolean,
|
||||
|
||||
// LINK optiona properties
|
||||
link?: string,
|
||||
|
||||
// TOGGLE optional properties
|
||||
on?: string, // on override for toggle
|
||||
off?: string, // off override for toggle
|
||||
declare type UIToggle = {
|
||||
type: "toggle",
|
||||
on?: string,
|
||||
off?: string,
|
||||
toggled?: (internal: string, actual: any, state: State) => boolean,
|
||||
} & UIBase;
|
||||
|
||||
// DROPDOWN optional properties
|
||||
options?: Map<string,any>, //options for dropDown
|
||||
renderValue?: (value: string) => string,
|
||||
declare type UIDropDown = {
|
||||
type: "dropDown",
|
||||
options: Map<string, any>,
|
||||
renderValue?: (value: string) => string
|
||||
} & UIBase;
|
||||
|
||||
// SLIDER optional properties
|
||||
declare type UISlider = {
|
||||
type: "slider",
|
||||
min?: number,
|
||||
max?: number,
|
||||
step?: number
|
||||
} & UIBase;
|
||||
|
||||
declare type UISection = {
|
||||
type: "section",
|
||||
text: string
|
||||
};
|
||||
|
||||
declare type UILink = {
|
||||
type: "link",
|
||||
link: string
|
||||
} & UIBase;
|
||||
|
||||
declare type ControlUI =
|
||||
UIToggle
|
||||
| UIDropDown
|
||||
| UISlider
|
||||
| UISection
|
||||
| UILink
|
||||
|
||||
declare type Control = {
|
||||
name: string,
|
||||
position: Array<number>,
|
||||
|
|
|
|||
13
yarn.lock
13
yarn.lock
|
|
@ -501,6 +501,10 @@ babel-plugin-syntax-async-functions@^6.8.0:
|
|||
version "6.13.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-async-functions/-/babel-plugin-syntax-async-functions-6.13.0.tgz#cad9cad1191b5ad634bf30ae0872391e0647be95"
|
||||
|
||||
babel-plugin-syntax-class-properties@^6.8.0:
|
||||
version "6.13.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-class-properties/-/babel-plugin-syntax-class-properties-6.13.0.tgz#d7eb23b79a317f8543962c505b827c7d6cac27de"
|
||||
|
||||
babel-plugin-syntax-exponentiation-operator@^6.8.0:
|
||||
version "6.13.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-syntax-exponentiation-operator/-/babel-plugin-syntax-exponentiation-operator-6.13.0.tgz#9ee7e8337290da95288201a6a57f4170317830de"
|
||||
|
|
@ -525,6 +529,15 @@ babel-plugin-transform-async-to-generator@^6.22.0:
|
|||
babel-plugin-syntax-async-functions "^6.8.0"
|
||||
babel-runtime "^6.22.0"
|
||||
|
||||
babel-plugin-transform-class-properties@^6.24.1:
|
||||
version "6.24.1"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-transform-class-properties/-/babel-plugin-transform-class-properties-6.24.1.tgz#6a79763ea61d33d36f37b611aa9def81a81b46ac"
|
||||
dependencies:
|
||||
babel-helper-function-name "^6.24.1"
|
||||
babel-plugin-syntax-class-properties "^6.8.0"
|
||||
babel-runtime "^6.22.0"
|
||||
babel-template "^6.24.1"
|
||||
|
||||
babel-plugin-transform-es2015-arrow-functions@^6.22.0:
|
||||
version "6.22.0"
|
||||
resolved "https://registry.yarnpkg.com/babel-plugin-transform-es2015-arrow-functions/-/babel-plugin-transform-es2015-arrow-functions-6.22.0.tgz#452692cb711d5f79dc7f85e440ce41b9f244d221"
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue