Thinking in React

Author: Archmonger

docs/examples/css/thinking_in_react/add_inverse_data_flow.css

@@ -0,0 +1,14 @@
+body {
+    padding: 5px;
+}
+label {
+    display: block;
+    margin-top: 5px;
+    margin-bottom: 5px;
+}
+th {
+    padding: 4px;
+}
+td {
+    padding: 2px;
+}

docs/examples/python/thinking_in_react/add_inverse_data_flow.py

@@ -0,0 +1,121 @@
+from reactpy import component, html, use_state
+
+
+# start
+@component
+def filterable_product_table(products):
+    filter_text, set_filter_text = use_state("")
+    in_stock_only, set_in_stock_only = use_state(False)
+
+    return html.div(
+        search_bar(
+            filter_text=filter_text,
+            in_stock_only=in_stock_only,
+            set_filter_text=set_filter_text,
+            set_in_stock_only=set_in_stock_only,
+        ),
+        product_table(
+            products=products, filter_text=filter_text, in_stock_only=in_stock_only
+        ),
+    )
+
+
+@component
+def product_category_row(category):
+    return html.tr(
+        html.th({"colspan": 2}, category),
+    )
+
+
+@component
+def product_row(product):
+    if product["stocked"]:
+        name = product["name"]
+    else:
+        name = html.span({"style": {"color": "red"}}, product["name"])
+
+    return html.tr(
+        html.td(name),
+        html.td(product["price"]),
+    )
+
+
+@component
+def product_table(products, filter_text, in_stock_only):
+    rows = []
+    last_category = None
+
+    for product in products:
+        if filter_text.lower() not in product["name"].lower():
+            continue
+        if in_stock_only and not product["stocked"]:
+            continue
+        if product["category"] != last_category:
+            rows.append(
+                product_category_row(product["category"], key=product["category"])
+            )
+        rows.append(product_row(product, key=product["name"]))
+        last_category = product["category"]
+
+    return html.table(
+        html.thead(
+            html.tr(
+                html.th("Name"),
+                html.th("Price"),
+            ),
+        ),
+        html.tbody(rows),
+    )
+
+
+@component
+def search_bar(filter_text, in_stock_only, set_filter_text, set_in_stock_only):
+    return html.form(
+        html.input(
+            {
+                "type": "text",
+                "value": filter_text,
+                "placeholder": "Search...",
+                "on_change": lambda event: set_filter_text(event["target"]["value"]),
+            }
+        ),
+        html.label(
+            html.input(
+                {
+                    "type": "checkbox",
+                    "checked": in_stock_only,
+                    "on_change": lambda event: set_in_stock_only(
+                        event["target"]["checked"]
+                    ),
+                }
+            ),
+            "Only show products in stock",
+        ),
+    )
+
+
+PRODUCTS = [
+    {"category": "Fruits", "price": "$1", "stocked": True, "name": "Apple"},
+    {"category": "Fruits", "price": "$1", "stocked": True, "name": "Dragonfruit"},
+    {"category": "Fruits", "price": "$2", "stocked": False, "name": "Passionfruit"},
+    {"category": "Vegetables", "price": "$2", "stocked": True, "name": "Spinach"},
+    {"category": "Vegetables", "price": "$4", "stocked": False, "name": "Pumpkin"},
+    {"category": "Vegetables", "price": "$1", "stocked": True, "name": "Peas"},
+]
+
+
+@component
+def app():
+    return filterable_product_table(PRODUCTS)
+
+
+# end
+if __name__ == "__main__":
+    from reactpy import run
+    from reactpy.utils import _read_docs_css
+
+    @component
+    def styled_app():
+        return html._(html.style(_read_docs_css()), app())
+
+    run(styled_app)

docs/examples/python/thinking_in_react/event_handlers.py

@@ -0,0 +1,18 @@
+from reactpy import html
+
+filter_text = ""
+
+
+def set_filter_text(value):
+    ...
+
+
+# start
+html.input(
+    {
+        "type": "text",
+        "value": filter_text,
+        "placeholder": "Search...",
+        "on_change": lambda event: set_filter_text(event["target"]["value"]),
+    }
+)

docs/examples/python/thinking_in_react/set_state_props.py

@@ -0,0 +1,32 @@
+# function filterable_product_table({ products }) {
+#   const [filter_text, set_filter_text] = use_state('');
+#   const [in_stock_only, set_in_stock_only] = use_state(false);
+
+#   return (
+#     <div>
+#       <search_bar
+#         filter_text={filter_text}
+#         in_stock_only={in_stock_only}
+#         on_filter_text_change={set_filter_text}
+#         on_in_stock_only_change={set_in_stock_only} />
+
+from reactpy import component, hooks, html
+
+
+def search_bar(**_kws):
+    ...
+
+# start
+@component
+def filterable_product_table(products):
+    filter_text, set_filter_text = hooks.use_state("")
+    in_stock_only, set_in_stock_only = hooks.use_state(False)
+
+    return html.div(
+        search_bar(
+            filter_text=filter_text,
+            in_stock_only=in_stock_only,
+            set_filter_text=set_filter_text,
+            set_in_stock_only=set_in_stock_only
+        )
+    )