fix: Update form items client side if possible instead of recreate on data change. #150

Author: mturoci

py/examples/date_picker_trigger.py

@@ -2,18 +2,22 @@
 # To handle live changes to a date picker, enable the `trigger` attribute.
 # #form #date_picker #trigger
 # ---
+from typing import Optional
 from h2o_wave import main, app, Q, ui
 
 
+def get_form_items(value: Optional[str]):
+    return [
+        ui.text(f'date_trigger={value}'),
+        ui.date_picker(name='date_trigger', label='Pick a date', trigger=True),
+    ]
+
+
 @app('/demo')
 async def serve(q: Q):
     if not q.client.initialized:
-        q.page['example'] = ui.form_card(box='1 1 4 10', items=[
-            ui.text(f'date_trigger={q.args.date_trigger}'),
-            ui.date_picker(name='date_trigger', label='Pick a date', trigger=True),
-        ])
+        q.page['example'] = ui.form_card(box='1 1 4 10', items=get_form_items(None))
         q.client.initialized = True
     else:
-        q.page['example'].items[0].text.content = f'Selected date: {q.args.date_trigger}'
-        q.page['example'].items[1].date_picker.value = q.args.date_trigger
+        q.page['example'].items = get_form_items(q.args.date_trigger)
     await q.page.save()

py/examples/spinbox_trigger.py

@@ -9,7 +9,7 @@
 def get_form_items(value: Optional[float]):
     return [
         ui.text(f'spinbox_trigger={value}'),
-        ui.spinbox(name='spinbox_trigger', label='Pick a number', trigger=True, value=value),
+        ui.spinbox(name='spinbox_trigger', label='Pick a number', trigger=True),
     ]
 
 
@@ -18,7 +18,7 @@ async def serve(q: Q):
     if not q.client.initialized:
         q.page['example'] = ui.form_card(box='1 1 4 4', items=get_form_items(None))
         q.client.initialized = True
-    if q.args.spinbox_trigger:
+    if q.args.spinbox_trigger is not None:
         q.page['example'].items = get_form_items(q.args.spinbox_trigger)
 
     await q.page.save()

py/examples/table_filter_backend.py

@@ -35,8 +35,8 @@ def search_df(df: pd.DataFrame, term: str):
 @app('/demo')
 async def serve(q: Q):
     if not q.client.initialized:
-        q.page['form'] = ui.form_card(box='1 1 -1 11', items=[
-            ui.textbox(name='search', label='Search', placeholder='Enter a keyword...', trigger=True),
+        q.page['form'] = ui.form_card(box='1 1 -1 9', items=[
+            ui.textbox(name='search', label='Search address', placeholder='Enter a keyword...', trigger=True),
             ui.table(
                 name='issues',
                 columns=[ui.table_column(name=name, label=name) for name in column_names],
@@ -46,11 +46,9 @@ async def serve(q: Q):
         q.client.initialized = True
     else:
         items = q.page['form'].items
-        search_box = items[0].textbox
         table = items[1].table
         term: str = q.args.search
         term = term.strip() if term else ''
-        search_box.value = term
         table.rows = df_to_rows(search_df(addresses, term) if len(term) else addresses)
 
     await q.page.save()

py/examples/textbox_trigger.py

@@ -2,30 +2,39 @@
 # To handle live changes to a #textbox, enable the `trigger` attribute.
 # #form #trigger
 # ---
+from typing import Optional
 from h2o_wave import main, app, Q, ui
 
 
-def to_pig_latin(text: str):
-    if text is None:
-        return ''
-    words = text.lower().strip().split(" ")
-    text = []
+def to_pig_latin(text: Optional[str]):
+    if not text:
+        return '*Type in some text above to translate to Pig Latin!*'
+    words = text.lower().strip().split(' ')
+    texts = []
     for word in words:
         if word[0] in 'aeiou':
-            text.append(f'{word}yay')
+            texts.append(f'{word}yay')
         else:
             for letter in word:
                 if letter in 'aeiou':
-                    text.append(f'{word[word.index(letter):]}{word[:word.index(letter)]}ay')
+                    texts.append(f'{word[word.index(letter):]}{word[:word.index(letter)]}ay')
                     break
-    return " ".join(text)
+    return ' '.join(texts)
+
+
+def get_form_items(txt: Optional[str]):
+    return [
+        ui.textbox(name='text', label='English', multiline=True, trigger=True),
+        ui.label('Pig Latin'),
+        ui.text(to_pig_latin(txt)),
+    ]
 
 
 @app('/demo')
 async def serve(q: Q):
-    q.page['example'] = ui.form_card(box='1 1 4 10', items=[
-        ui.textbox(name='text', label='English', value=q.args.text or '', multiline=True, trigger=True),
-        ui.label('Pig Latin'),
-        ui.text(to_pig_latin(q.args.text) or '*Type in some text above to translate to Pig Latin!*'),
-    ])
+    if not q.client.initialized:
+        q.page['example'] = ui.form_card(box='1 1 4 10', items=get_form_items(None))
+        q.client.initialized = True
+    if q.args.text is not None:
+        q.page['example'].items = get_form_items(q.args.text)
     await q.page.save()

ui/.eslintrc.js

@@ -14,6 +14,7 @@ module.exports = {
     "plugin:@typescript-eslint/eslint-recommended",
     "plugin:@typescript-eslint/recommended",
     "plugin:react/recommended",
+    "plugin:react-hooks/recommended"
   ],
   "globals": {
     "Atomics": "readonly",