add list examples

found a bug in the layout though...

Author: rmorshea

docs/source/adding-interactivity/dangers-of-mutability/_examples/list_insert.py

@@ -0,0 +1,25 @@
+from idom import component, html, run, use_state
+
+
+@component
+def ArtistList():
+    artist_to_add, set_artist_to_add = use_state("")
+    artists, set_artists = use_state([])
+
+    def handle_change(event):
+        set_artist_to_add(event["target"]["value"])
+
+    def handle_click(event):
+        if artist_to_add not in artists:
+            set_artists([*artists, artist_to_add])
+            set_artist_to_add("")
+
+    return html.div(
+        html.h1("Inspiring sculptors:"),
+        html.input({"value": artist_to_add, "onChange": handle_change}),
+        html.button({"onClick": handle_click}, "add"),
+        html.ul([html.li(name, key=name) for name in artists]),
+    )
+
+
+run(ArtistList)

docs/source/adding-interactivity/dangers-of-mutability/_examples/list_re_order.py

@@ -0,0 +1,24 @@
+from idom import component, html, run, use_state
+
+
+@component
+def ArtistList():
+    artists, set_artists = use_state(
+        ["Marta Colvin Andrade", "Lamidi Olonade Fakeye", "Louise Nevelson"]
+    )
+
+    def handle_sort_click(event):
+        set(list(sorted(set_artists)))
+
+    def handle_reverse_click(event):
+        set(list(reversed(set_artists)))
+
+    return html.div(
+        html.h1("Inspiring sculptors:"),
+        html.button({"onClick": handle_sort_click}, "sort"),
+        html.button({"onClick": handle_reverse_click}, "reverse"),
+        html.ul([html.li(name, key=name) for name in artists]),
+    )
+
+
+run(ArtistList)

docs/source/adding-interactivity/dangers-of-mutability/_examples/list_remove.py

@@ -0,0 +1,42 @@
+from idom import component, html, run, use_state
+
+
+@component
+def ArtistList():
+    artist_to_add, set_artist_to_add = use_state("")
+    artists, set_artists = use_state(
+        ["Marta Colvin Andrade", "Lamidi Olonade Fakeye", "Louise Nevelson"]
+    )
+
+    def handle_change(event):
+        set_artist_to_add(event["target"]["value"])
+
+    def handle_add_click(event):
+        if artist_to_add not in artists:
+            set_artists([*artists, artist_to_add])
+            set_artist_to_add("")
+
+    def make_handle_delete_click(index):
+        def handle_click(event):
+            set_artists(artists[:index] + artists[index + 1 :])
+
+        return handle_click
+
+    return html.div(
+        html.h1("Inspiring sculptors:"),
+        html.input({"value": artist_to_add, "onChange": handle_change}),
+        html.button({"onClick": handle_add_click}, "add"),
+        html.ul(
+            [
+                html.li(
+                    name,
+                    html.button({"onClick": make_handle_delete_click(index)}, "delete"),
+                    key=name,
+                )
+                for index, name in enumerate(artists)
+            ]
+        ),
+    )
+
+
+run(ArtistList)

docs/source/adding-interactivity/dangers-of-mutability/_examples/list_replace.py

@@ -0,0 +1,27 @@
+from idom import component, html, run, use_state
+
+
+@component
+def CounterList():
+    counters, set_counters = use_state([0, 0, 0])
+
+    def make_increment_click_handler(index):
+        def handle_click(event):
+            new_value = counters[index] + 1
+            set_counters(counters[:index] + [new_value] + counters[index + 1 :])
+
+        return handle_click
+
+    return html.ul(
+        [
+            html.li(
+                count,
+                html.button({"onClick": make_increment_click_handler(index)}, "+1"),
+                key=index,
+            )
+            for index, count in enumerate(counters)
+        ]
+    )
+
+
+run(CounterList)

docs/source/adding-interactivity/dangers-of-mutability/index.rst

@@ -254,18 +254,6 @@ Working with Lists
 
 Below are some ways to update lists without mutating them:
 
-.. card:: Replacing Items
-    :link: replacing-list-items
-    :link-type: ref
-
-    Avoid using item  or slice assignment. Instead try the strategies below:
-
-    .. code-block::
-
-        l[:index] + [value] + l[index + 1:]
-
-        l[:start] + values + l[end + 1:]
-
 .. card:: Inserting Items
     :link: inserting-list-items
     :link-type: ref
@@ -293,6 +281,17 @@ Below are some ways to update lists without mutating them:
 
         l[:index - 1] + l[index:]
 
+.. card:: Replacing Items
+    :link: replacing-list-items
+    :link-type: ref
+
+    Avoid using item  or slice assignment. Instead try the strategies below:
+
+    .. code-block::
+
+        l[:index] + [value] + l[index + 1:]
+
+        l[:start] + values + l[end + 1:]
 
 ..card:: Re-ordering Items
     :link: re-ordering-list-items
@@ -308,30 +307,6 @@ Below are some ways to update lists without mutating them:
         list(reversed(l))
 
 
-.. _replacing-list-items:
-
-Replacing List Items
-....................
-
-.. grid:: 1 1 1 2
-
-    .. grid-item-card:: :bdg-danger:`Avoid`
-
-        .. code-block::
-
-            l[index] = value
-
-            l[start:end] = values
-
-    .. grid-item-card:: :bdg-info:`Prefer`
-
-        .. code-block::
-
-            l[:index] + [value] + l[index + 1:]
-
-            l[:start] + values + l[end + 1:]
-
-
 .. _inserting-list-items:
 
 Inserting List Items
@@ -361,6 +336,8 @@ Inserting List Items
 
             l[:index] + [value] + l[index:]
 
+.. idom:: _examples/list_insert
+
 
 .. _removing-list-items:
 
@@ -383,6 +360,34 @@ Removing List Items
 
             l[:index - 1] + l[index:]
 
+.. idom:: _examples/list_remove
+
+
+.. _replacing-list-items:
+
+Replacing List Items
+....................
+
+.. grid:: 1 1 1 2
+
+    .. grid-item-card:: :bdg-danger:`Avoid`
+
+        .. code-block::
+
+            l[index] = value
+
+            l[start:end] = values
+
+    .. grid-item-card:: :bdg-info:`Prefer`
+
+        .. code-block::
+
+            l[:index] + [value] + l[index + 1:]
+
+            l[:start] + values + l[end + 1:]
+
+.. idom:: _examples/list_replace
+
 
 .. _re-ordering-list-items:
 
@@ -407,6 +412,8 @@ Re-ordering List Items
 
             list(reversed(l))
 
+.. idom:: _examples/list_re_order
+
 
 Working with Sets
 -----------------

noxfile.py

@@ -116,7 +116,7 @@ def docs(session: Session) -> None:
         "html",
         "docs/source",
         "docs/build",
-        env=get_idom_script_env(),
+        env={**os.environ, **get_idom_script_env()},
     )