Cleanup flow types and fix eslint errors
This commit is contained in:
parent
ef41de4349
commit
c1ed43ee6c
4 changed files with 118 additions and 147 deletions
|
|
@ -21,7 +21,7 @@ type UiItemProps<I> = {
|
|||
onChangeState: (topic: string, nextState: any) => void
|
||||
};
|
||||
|
||||
export default class UiItem<I> extends React.Component<UiItemProps<I>> {
|
||||
export default class UiItem<I:Object> extends React.Component<UiItemProps<I>> {
|
||||
constructor(props: UiItemProps<I>) {
|
||||
super(props);
|
||||
}
|
||||
|
|
@ -30,48 +30,79 @@ export default class UiItem<I> extends React.Component<UiItemProps<I>> {
|
|||
|
||||
}
|
||||
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
|
||||
/*
|
||||
* TODO: The type system can't really check if the enableCondition is of
|
||||
* any function type or if it is a TopicDependentOption or a
|
||||
* StateDependentOption. This should be fixed.
|
||||
*/
|
||||
isEnabled() {
|
||||
if (Object.keys(this.props.item).includes("enableCondition") &&
|
||||
typeof this.props.item.enableCondition == "function") {
|
||||
const enableCondition = this.props.item.enableCondition;
|
||||
const state = this.props.state;
|
||||
const internals = _.mapValues(state, (x) => x.internal);
|
||||
const actuals = _.mapValues(state, (x) => x.actual);
|
||||
return enableCondition(internals, actuals, state);
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class UiControl<I: UIControl> extends UiItem<I> {
|
||||
constructor(props: UiItemProps<I>) {
|
||||
super(props);
|
||||
}
|
||||
|
||||
changeState(next: any) {
|
||||
if (this.props.item.topic == null) {
|
||||
throw new Error(
|
||||
`Undefined topic in ${this.props.item.type} "${this.props.item.text}"`
|
||||
`Missing topic in ${this.props.item.type} "${this.props.item.text}"`
|
||||
);
|
||||
}
|
||||
this.props.onChangeState(this.props.item.topic, next);
|
||||
}
|
||||
|
||||
getValue() {
|
||||
const topic: string = this.props.item.topic || "";
|
||||
const control = this.props.item;
|
||||
const topic: string = control.topic || "";
|
||||
const value = this.props.state[topic];
|
||||
if (value == null) {
|
||||
const control = this.props.item;
|
||||
if (topic === "") {
|
||||
throw new Error(
|
||||
`Missing topic in ${control.type} "${control.text}"`
|
||||
);
|
||||
}
|
||||
throw new Error(
|
||||
`Unknown topic "${control.topic}" in ${control.type} "${control.text}"`
|
||||
`Unknown topic "${topic}" in ${control.type} "${control.text}"`
|
||||
);
|
||||
}
|
||||
return value;
|
||||
}
|
||||
|
||||
isEnabled() {
|
||||
const enableCondition = this.props.item.enableCondition;
|
||||
if (enableCondition == null) {
|
||||
return true;
|
||||
} else {
|
||||
if (Object.keys(this.props.item).includes("enableCondition") &&
|
||||
typeof this.props.item.enableCondition == "function") {
|
||||
const enableCondition = this.props.item.enableCondition;
|
||||
const value = this.getValue();
|
||||
return enableCondition(
|
||||
value.internal || value.actual, value.actual, this.props.state);
|
||||
} else {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
export class Toggle extends UiItem<UIToggle> {
|
||||
export class Toggle extends UiControl<UIToggle> {
|
||||
isToggled = () => {
|
||||
const value = this.getValue();
|
||||
const control = this.props.item;
|
||||
const isChecked = control.toggled || ((i) => i === (control.on || "on"));
|
||||
const isChecked = control.toggled ||
|
||||
((i, _a, _s) => i === (control.on || "on"));
|
||||
const checked = isChecked(
|
||||
value.internal || value.actual, value.actual, this.props.state);
|
||||
return checked;
|
||||
|
|
@ -99,7 +130,7 @@ export class Toggle extends UiItem<UIToggle> {
|
|||
}
|
||||
}
|
||||
|
||||
export class DropDown extends UiItem<UIDropDown> {
|
||||
export class DropDown extends UiControl<UIDropDown> {
|
||||
runPrimaryAction = (next?: any) => {
|
||||
if (this.isEnabled()) {
|
||||
const control = this.props.item;
|
||||
|
|
@ -117,7 +148,7 @@ export class DropDown extends UiItem<UIDropDown> {
|
|||
render() {
|
||||
const control = this.props.item;
|
||||
const value = this.getValue();
|
||||
const id = `${control.topic}-${control.name}`;
|
||||
const id = `${control.topic}-${control.text}`;
|
||||
const options = control.options;
|
||||
if (options == null) {
|
||||
throw new Error(
|
||||
|
|
@ -173,7 +204,7 @@ export class Section extends UiItem<UISection> {
|
|||
}
|
||||
}
|
||||
|
||||
export class Text extends UiItem<UIText> {
|
||||
export class Text extends UiControl<UIText> {
|
||||
render() {
|
||||
return [
|
||||
<ListItemText key="label" primary={this.props.item.text} />,
|
||||
|
|
|
|||
|
|
@ -5,16 +5,9 @@ import {
|
|||
ListItem,
|
||||
ListItemIcon,
|
||||
ListItemSecondaryAction,
|
||||
ListItemText,
|
||||
ListSubheader
|
||||
ListItemText
|
||||
} 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";
|
||||
|
||||
// TODO: Use something else
|
||||
import Slider from "material-ui-old/Slider";
|
||||
|
|
@ -57,31 +50,31 @@ export default class UiItemList extends React.Component<UiItemListProps> {
|
|||
switch (control.type) {
|
||||
case "toggle": {
|
||||
return <Toggle item={control}
|
||||
state={this.props.state}
|
||||
onChangeState={this.props.onChangeState} />;
|
||||
state={this.props.state}
|
||||
onChangeState={this.props.onChangeState} />;
|
||||
}
|
||||
case "dropDown": {
|
||||
return <DropDown item={control}
|
||||
state={this.props.state}
|
||||
onChangeState={this.props.onChangeState} />;
|
||||
state={this.props.state}
|
||||
onChangeState={this.props.onChangeState} />;
|
||||
}
|
||||
case "section": {
|
||||
return <Section item={control}
|
||||
state={this.props.state}
|
||||
onChangeState={this.props.onChangeState} />;
|
||||
state={this.props.state}
|
||||
onChangeState={this.props.onChangeState} />;
|
||||
}
|
||||
case "link": {
|
||||
return <Link item={control}
|
||||
state={this.props.state}
|
||||
onChangeState={this.props.onChangeState} />;
|
||||
state={this.props.state}
|
||||
onChangeState={this.props.onChangeState} />;
|
||||
}
|
||||
case "slider": {
|
||||
return this.renderSlider(control);
|
||||
}
|
||||
case "text": {
|
||||
return <Text item={control}
|
||||
state={this.props.state}
|
||||
onChangeState={this.props.onChangeState} />;
|
||||
state={this.props.state}
|
||||
onChangeState={this.props.onChangeState} />;
|
||||
}
|
||||
default: {
|
||||
throw new Error(
|
||||
|
|
@ -91,18 +84,7 @@ export default class UiItemList extends React.Component<UiItemListProps> {
|
|||
}
|
||||
}
|
||||
|
||||
isEnabled(control: ControlUI) {
|
||||
const enableCondition = control.enableCondition;
|
||||
if (enableCondition == null) {
|
||||
return true;
|
||||
} else {
|
||||
const value = this.getValue(control);
|
||||
return enableCondition(
|
||||
value.internal || value.actual, value.actual, this.props.state);
|
||||
}
|
||||
}
|
||||
|
||||
getValue(control: ControlUI) {
|
||||
getValue(control: UIControl) {
|
||||
const value = this.props.state[control.topic];
|
||||
if (value == null) {
|
||||
throw new Error(
|
||||
|
|
@ -112,77 +94,7 @@ export default class UiItemList extends React.Component<UiItemListProps> {
|
|||
return value;
|
||||
}
|
||||
|
||||
toggleSwitch(control: ControlUI, newState: boolean) {
|
||||
this.props.onChangeState(control.topic,
|
||||
newState ? (control.on || "on") : (control.off || "off"));
|
||||
}
|
||||
|
||||
renderToggle(control: ControlUI) {
|
||||
const value = this.getValue(control);
|
||||
const isToggled = control.toggled || ((i) => i === (control.on || "on"));
|
||||
const checked = isToggled(
|
||||
value.internal || value.actual, value.actual, this.props.state);
|
||||
return [
|
||||
<ListItemText key="label" primary={control.text} />,
|
||||
<ListItemSecondaryAction key="action">
|
||||
<Switch label={control.text}
|
||||
checked={checked}
|
||||
onChange={(_event, state) => this.toggleSwitch(control, state)}
|
||||
disabled={!this.isEnabled(control)} />
|
||||
</ListItemSecondaryAction>
|
||||
];
|
||||
}
|
||||
|
||||
changeDropDown(control: ControlUI, newState: string) {
|
||||
this.props.onChangeState(control.topic, newState);
|
||||
}
|
||||
|
||||
renderDropDown(control: ControlUI) {
|
||||
const value = this.getValue(control);
|
||||
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.changeDropDown(control, event.target.value)}
|
||||
disabled={!this.isEnabled(control)}
|
||||
input={<Input id={id} />}
|
||||
>
|
||||
{_.map(options, (v, k) => <MenuItem value={k} key={k}>{v}</MenuItem>)}
|
||||
</Select>
|
||||
</FormControl>
|
||||
);
|
||||
}
|
||||
|
||||
renderSection(control: ControlUI) {
|
||||
return (
|
||||
<ListSubheader key={control.text}>{control.text}</ListSubheader>
|
||||
);
|
||||
}
|
||||
|
||||
renderLink(control: ControlUI) {
|
||||
if (control.link == null) {
|
||||
throw new Error(
|
||||
`Parameter "link" missing for ${control.type} "${control.text}"`
|
||||
);
|
||||
}
|
||||
return (
|
||||
<Button raised
|
||||
onClick={() => window.open(control.link, "_blank")}
|
||||
color="primary"
|
||||
>
|
||||
{control.text}
|
||||
</Button>
|
||||
);
|
||||
}
|
||||
|
||||
renderSlider(control: ControlUI) {
|
||||
renderSlider(control: UISlider) {
|
||||
const value = this.getValue(control);
|
||||
return [
|
||||
<ListItemText primary={control.text} key="text" />,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue