Detach Widget from setValue impl

ui/index.js

@@ -119,6 +119,23 @@ class App extends Component {
     });
   }
 
+  /**
+   * Set the specified config value.
+   * @param {string} name
+   * @param {*} value
+   */
+  setValue = async (name, value) => {
+    /** @type {Promise<void>} */
+    let uiTimeout;
+    await scheduleOp(context => {
+      // This is terrible, yes... but some configs return too quickly before they're actually updated.
+      // We want to wait some time before updating the UI in that case, but not block subsequent ops.
+      uiTimeout = new Promise(resolve => setTimeout(resolve, 800));
+      return context.setConfigValue(name, value);
+    });
+    await uiTimeout;
+  };
+
   render(/** @type {App['props']} */ props, /** @type {App['state']} */ state) {
     switch (state.type) {
       case 'CameraPicker':
@@ -150,7 +167,7 @@ class App extends Component {
               'form',
               { class: 'pure-form pure-form-aligned' },
               h(CaptureButton, null),
-              h(Widget, { config: state.config })
+              h(Widget, { config: state.config, setValue: this.setValue })
             )
           )
         );

ui/widget.js

@@ -1,11 +1,10 @@
 import { h, Component, createRef } from 'preact';
-import { scheduleOp } from './ops.js';
 
 /** @typedef {import('../libapi.mjs').Config} Config */
 
 /**
  *
- * @extends Component<{ config: Config }>
+ * @extends Component<{ config: Config, setValue: (name: string, value: any) => Promise<void> }>
  */
 export class Widget extends Component {
   state = { inProgress: false };
@@ -34,28 +33,18 @@ export class Widget extends Component {
 
   handleChange = async e => {
     this.setState({ inProgress: true });
-
-    let value = e.target[this.getValueProp(true)];
-
     try {
-      /** @type {Promise<void>} */
-      let uiTimeout;
-      await scheduleOp(context => {
-        // This is terrible, yes... but some configs return too quickly before they're actually updated.
-        // We want to wait some time before updating the UI in that case, but not block subsequent ops.
-        uiTimeout = new Promise(resolve => setTimeout(resolve, 800));
-        return context.setConfigValue(this.props.config.name, value);
-      });
-      await uiTimeout;
-    } catch (e) {
-      console.error(e);
+      await this.props.setValue(
+        this.props.config.name,
+        e.target[this.getValueProp(true)]
+      );
+    } finally {
+      this.setState({ inProgress: false });
     }
-
-    this.setState({ inProgress: false });
   };
 
   render(
-    /** @type {Widget['props']} */ { config },
+    /** @type {Widget['props']} */ { config, setValue },
     /** @type {Widget['state']} */ { inProgress }
   ) {
     let { label, name } = config;
@@ -66,7 +55,7 @@ export class Widget extends Component {
         { id },
         h('legend', {}, label),
         Object.values(config.children).map(config =>
-          h(Widget, { key: config.name, config })
+          h(Widget, { key: config.name, config, setValue })
         )
       );
     }