feat: Add live mode to rating #16

h2oai · Jul 4, 2022 · 7c801bf · 7c801bf
1 parent 2431d53
commit 7c801bf
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 1 deletion.
diff --git a/docs/rating.md b/docs/rating.md
@@ -88,3 +88,21 @@ view(f'Your rating was {stars} stars.')
 
 
 ![Screenshot](assets/screenshots/rating_range.png)
+
+
+## Handle changes immediately
+
+Set `live=True` to handle changes immediately.
+
+
+```py
+stars = 3
+while True:
+    stars = view(
+        box('Rate your experience', mode='rating', value=stars, live=True),
+        f'Your rating was {stars} stars.'
+    )
+```
+
+
+![Screenshot](assets/screenshots/rating_live.png)
diff --git a/py/pkg/docs/rating.py b/py/pkg/docs/rating.py
@@ -62,3 +62,14 @@ def rating_min_max(view: View):  # height 2
 def rating_range(view: View):  # height 2
     stars = view(box('Rate your experience', mode='rating', value=3, range=(0, 10)))
     view(f'Your rating was {stars} stars.')
+
+
+# ## Handle changes immediately
+# Set `live=True` to handle changes immediately.
+def rating_live(view: View):  # height 2
+    stars = 3
+    while True:
+        stars = view(
+            box('Rate your experience', mode='rating', value=stars, live=True),
+            f'Your rating was {stars} stars.'
+        )
diff --git a/web/src/rating.tsx b/web/src/rating.tsx
@@ -20,12 +20,13 @@ import { BoxProps, make } from './ui';
 
 export const Rating = make(({ box }: BoxProps) => {
   const
-    { context, text, placeholder, min, max, value } = box,
+    { context, text, placeholder, min, max, value, live } = box,
     allowZeroStars = isN(min) && min <= 0,
     defaultRating = toN(value) ?? (allowZeroStars ? 0 : 1),
     onChange = (event: React.FormEvent<HTMLElement>, rating?: number) => {
       if (rating === undefined) return
       context.record(rating)
+      if (live) context.commit()
     },
     render = () => {
       return (