From e5cf1b2f9e841d4e28e5d3128a7a525903718374 Mon Sep 17 00:00:00 2001 From: uwap Date: Sun, 8 Jul 2018 21:52:13 +0200 Subject: [PATCH] Debounce all outgoing ui events (Also Fixes 44) --- config/rzl.js | 45 ++++++++++------------------- src/components/UiItemList/UiItem.js | 16 ++++++---- src/config/flowtypes.js | 3 +- 3 files changed, 27 insertions(+), 37 deletions(-) diff --git a/config/rzl.js b/config/rzl.js index 03a8f07..e287a85 100644 --- a/config/rzl.js +++ b/config/rzl.js @@ -759,8 +759,7 @@ const config : Config = { max: 100, text: "Helligkeit", icon: mdi("brightness-7"), - topic: "kitchen_light_brightness", - delayedApply: true + topic: "kitchen_light_brightness" }, { type: "slider", @@ -768,8 +767,7 @@ const config : Config = { max: 100, text: "Farbtemperatur", icon: mdi("weather-sunset-down"), - topic: "kitchen_light_color", - delayedApply: true + topic: "kitchen_light_color" }, { type: "section", @@ -781,8 +779,7 @@ const config : Config = { max: 100, text: "Helligkeit", icon: mdi("brightness-7"), - topic: floalt.brightness("65537"), - delayedApply: true + topic: floalt.brightness("65537") }, { type: "slider", @@ -790,8 +787,7 @@ const config : Config = { max: 100, text: "Farbtemperatur", icon: mdi("weather-sunset-down"), - topic: floalt.color("65537"), - delayedApply: true + topic: floalt.color("65537") }, { type: "section", @@ -803,8 +799,7 @@ const config : Config = { max: 100, text: "Helligkeit", icon: mdi("brightness-7"), - topic: floalt.brightness("65538"), - delayedApply: true + topic: floalt.brightness("65538") }, { type: "slider", @@ -812,8 +807,7 @@ const config : Config = { max: 100, text: "Farbtemperatur", icon: mdi("weather-sunset-down"), - topic: floalt.color("65538"), - delayedApply: true + topic: floalt.color("65538") }, { type: "section", @@ -825,8 +819,7 @@ const config : Config = { max: 100, text: "Helligkeit", icon: mdi("brightness-7"), - topic: floalt.brightness("65539"), - delayedApply: true + topic: floalt.brightness("65539") }, { type: "slider", @@ -834,8 +827,7 @@ const config : Config = { max: 100, text: "Farbtemperatur", icon: mdi("weather-sunset-down"), - topic: floalt.color("65539"), - delayedApply: true + topic: floalt.color("65539") }, { type: "section", @@ -847,8 +839,7 @@ const config : Config = { max: 100, text: "Helligkeit", icon: mdi("brightness-7"), - topic: floalt.brightness("65540"), - delayedApply: true + topic: floalt.brightness("65540") }, { type: "slider", @@ -856,8 +847,7 @@ const config : Config = { max: 100, text: "Farbtemperatur", icon: mdi("weather-sunset-down"), - topic: floalt.color("65540"), - delayedApply: true + topic: floalt.color("65540") } ] }, @@ -881,8 +871,7 @@ const config : Config = { max: 100, text: "Helligkeit", icon: mdi("brightness-7"), - topic: "kitchen_sink_light_brightness", - delayedApply: true + topic: "kitchen_sink_light_brightness" } ] }, @@ -901,8 +890,7 @@ const config : Config = { max: 100, text: "Helligkeit", icon: mdi("brightness-7"), - topic: floalt.brightness("65544"), - delayedApply: true + topic: floalt.brightness("65544") }, { type: "slider", @@ -910,8 +898,7 @@ const config : Config = { max: 100, text: "Farbtemperatur", icon: mdi("weather-sunset-down"), - topic: floalt.color("65544"), - delayedApply: true + topic: floalt.color("65544") }, { type: "section", @@ -923,8 +910,7 @@ const config : Config = { max: 100, text: "Helligkeit", icon: mdi("brightness-7"), - topic: floalt.brightness("65543"), - delayedApply: true + topic: floalt.brightness("65543") }, { type: "slider", @@ -932,8 +918,7 @@ const config : Config = { max: 100, text: "Farbtemperatur", icon: mdi("weather-sunset-down"), - topic: floalt.color("65543"), - delayedApply: true + topic: floalt.color("65543") } ] }, diff --git a/src/components/UiItemList/UiItem.js b/src/components/UiItemList/UiItem.js index aadfd83..6ba7a1e 100644 --- a/src/components/UiItemList/UiItem.js +++ b/src/components/UiItemList/UiItem.js @@ -2,6 +2,7 @@ import React from "react"; import keys from "lodash/keys"; import map from "lodash/map"; +import debounce from "lodash/debounce"; import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction"; import ListItemText from "@material-ui/core/ListItemText"; import ListSubheader from "@material-ui/core/ListSubheader"; @@ -71,9 +72,15 @@ export class UiControl extends UiItem { `Missing topic in ${this.props.item.type} "${this.props.item.text}"` ); } - this.props.onChangeState(this.props.item.topic, next); + this.debouncedChange(next); } + debouncedChange = debounce((next: string) => + this.props.onChangeState(this.props.item.topic, next), 50, { + leading: true, + trailing: true + }); + getValue() { const control = this.props.item; const topic: string = control.topic || ""; @@ -181,10 +188,9 @@ export class Slider extends UiControl { value={parseFloat(this.getValue())} min={this.props.item.min || 0} max={this.props.item.max || 0} step={this.props.item.step || 1} - onChange={(e, v) => - this.props.item.delayedApply || this.runPrimaryAction(e, v)} - onDragEnd={this.runPrimaryAction} - disabled={!this.isEnabled()} /> + onChange={this.runPrimaryAction} + disabled={!this.isEnabled()} + style={{marginLeft: 40}} /> ]; } } diff --git a/src/config/flowtypes.js b/src/config/flowtypes.js index 6cccf3f..c6b43db 100644 --- a/src/config/flowtypes.js +++ b/src/config/flowtypes.js @@ -55,8 +55,7 @@ export type UISlider = $ReadOnly<{| enableCondition?: (s: State) => boolean, min?: number, max?: number, - step?: number, - delayedApply?: boolean + step?: number |}>; export type UISection = $ReadOnly<{|