Skip to content

Commit bb1038c

Browse files
rmorshearmorshea
committed
modify vdom interface usage
1 parent 18daa75 commit bb1038c

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

55 files changed

+223
-346
lines changed

‎docs/examples.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ def Wrapper():
122122
def PrintView():
123123
text, set_text = idom.hooks.use_state(print_buffer.getvalue())
124124
print_buffer.set_callback(set_text)
125-
return idom.html.pre({"class": "printout"}, text) if text else idom.html.div()
125+
return idom.html.pre(text, class_="printout") if text else idom.html.div()
126126

127127
return Wrapper()
128128

‎docs/source/guides/adding-interactivity/components-with-state/_examples/adding_state_variable/main.py

+2-2
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,10 @@ def handle_click(event):
2525
url = sculpture["url"]
2626

2727
return html.div(
28-
html.button({"onClick": handle_click}, "Next"),
28+
html.button("Next", on_click=handle_click),
2929
html.h2(name, " by ", artist),
3030
html.p(f"({bounded_index + 1} of {len(sculpture_data)})"),
31-
html.img({"src": url, "alt": alt, "style": {"height": "200px"}}),
31+
html.img(src=url, alt=alt, style={"height": "200px"}),
3232
html.p(description),
3333
)
3434

‎docs/source/guides/adding-interactivity/components-with-state/_examples/isolated_state/main.py

+7-7
Original file line numberDiff line numberDiff line change
@@ -29,25 +29,25 @@ def handle_more_click(event):
2929
url = sculpture["url"]
3030

3131
return html.div(
32-
html.button({"onClick": handle_next_click}, "Next"),
32+
html.button("Next", on_click=handle_next_click),
3333
html.h2(name, " by ", artist),
3434
html.p(f"({bounded_index + 1} or {len(sculpture_data)})"),
35-
html.img({"src": url, "alt": alt, "style": {"height": "200px"}}),
35+
html.img(src=url, alt=alt, style={"height": "200px"}),
3636
html.div(
3737
html.button(
38-
{"onClick": handle_more_click},
39-
f"{'Show' if show_more else 'Hide'} details",
38+
f"{('Show' if show_more else 'Hide')} details",
39+
on_click=handle_more_click,
4040
),
41-
(html.p(description) if show_more else ""),
41+
html.p(description) if show_more else "",
4242
),
4343
)
4444

4545

4646
@component
4747
def App():
4848
return html.div(
49-
html.section({"style": {"width": "50%", "float": "left"}}, Gallery()),
50-
html.section({"style": {"width": "50%", "float": "left"}}, Gallery()),
49+
html.section(Gallery(), style={"width": "50%", "float": "left"}),
50+
html.section(Gallery(), style={"width": "50%", "float": "left"}),
5151
)
5252

5353

‎docs/source/guides/adding-interactivity/components-with-state/_examples/multiple_state_variables/main.py

+5-5
Original file line numberDiff line numberDiff line change
@@ -29,16 +29,16 @@ def handle_more_click(event):
2929
url = sculpture["url"]
3030

3131
return html.div(
32-
html.button({"onClick": handle_next_click}, "Next"),
32+
html.button("Next", on_click=handle_next_click),
3333
html.h2(name, " by ", artist),
3434
html.p(f"({bounded_index + 1} or {len(sculpture_data)})"),
35-
html.img({"src": url, "alt": alt, "style": {"height": "200px"}}),
35+
html.img(src=url, alt=alt, style={"height": "200px"}),
3636
html.div(
3737
html.button(
38-
{"onClick": handle_more_click},
39-
f"{'Show' if show_more else 'Hide'} details",
38+
f"{('Show' if show_more else 'Hide')} details",
39+
on_click=handle_more_click,
4040
),
41-
(html.p(description) if show_more else ""),
41+
html.p(description) if show_more else "",
4242
),
4343
)
4444

‎docs/source/guides/adding-interactivity/components-with-state/_examples/when_variables_are_not_enough/main.py

+2-2
Original file line numberDiff line numberDiff line change
@@ -31,10 +31,10 @@ def handle_click(event):
3131
url = sculpture["url"]
3232

3333
return html.div(
34-
html.button({"onClick": handle_click}, "Next"),
34+
html.button("Next", on_click=handle_click),
3535
html.h2(name, " by ", artist),
3636
html.p(f"({bounded_index + 1} or {len(sculpture_data)})"),
37-
html.img({"src": url, "alt": alt, "style": {"height": "200px"}}),
37+
html.img(src=url, alt=alt, style={"height": "200px"}),
3838
html.p(description),
3939
)
4040

‎docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/dict_remove.py

+5-11
Original file line numberDiff line numberDiff line change
@@ -26,31 +26,25 @@ def handle_click(event):
2626
return handle_click
2727

2828
return html.div(
29-
html.button({"onClick": handle_add_click}, "add term"),
29+
html.button("add term", on_click=handle_add_click),
3030
html.label(
31-
"Term: ",
32-
html.input({"value": term_to_add, "onChange": handle_term_to_add_change}),
31+
"Term: ", html.input(value=term_to_add, on_change=handle_term_to_add_change)
3332
),
3433
html.label(
3534
"Definition: ",
3635
html.input(
37-
{
38-
"value": definition_to_add,
39-
"onChange": handle_definition_to_add_change,
40-
}
36+
value=definition_to_add, on_change=handle_definition_to_add_change
4137
),
4238
),
4339
html.hr(),
4440
[
4541
html.div(
46-
html.button(
47-
{"onClick": make_delete_click_handler(term)}, "delete term"
48-
),
42+
html.button("delete term", on_click=make_delete_click_handler(term)),
4943
html.dt(term),
5044
html.dd(definition),
5145
key=term,
5246
)
53-
for term, definition in all_terms.items()
47+
for (term, definition) in all_terms.items()
5448
],
5549
)
5650

‎docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/dict_update.py

+3-10
Original file line numberDiff line numberDiff line change
@@ -23,21 +23,14 @@ def handle_email_change(event):
2323
return html.div(
2424
html.label(
2525
"First name: ",
26-
html.input(
27-
{"value": person["first_name"], "onChange": handle_first_name_change},
28-
),
26+
html.input(value=person["first_name"], on_change=handle_first_name_change),
2927
),
3028
html.label(
3129
"Last name: ",
32-
html.input(
33-
{"value": person["last_name"], "onChange": handle_last_name_change},
34-
),
30+
html.input(value=person["last_name"], on_change=handle_last_name_change),
3531
),
3632
html.label(
37-
"Email: ",
38-
html.input(
39-
{"value": person["email"], "onChange": handle_email_change},
40-
),
33+
"Email: ", html.input(value=person["email"], on_change=handle_email_change)
4134
),
4235
html.p(f"{person['first_name']} {person['last_name']} {person['email']}"),
4336
)

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ def handle_click(event):
1616

1717
return html.div(
1818
html.h1("Inspiring sculptors:"),
19-
html.input({"value": artist_to_add, "onChange": handle_change}),
20-
html.button({"onClick": handle_click}, "add"),
19+
html.input(value=artist_to_add, on_change=handle_change),
20+
html.button("add", on_click=handle_click),
2121
html.ul([html.li(name, key=name) for name in artists]),
2222
)
2323

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ def handle_reverse_click(event):
1515

1616
return html.div(
1717
html.h1("Inspiring sculptors:"),
18-
html.button({"onClick": handle_sort_click}, "sort"),
19-
html.button({"onClick": handle_reverse_click}, "reverse"),
18+
html.button("sort", on_click=handle_sort_click),
19+
html.button("reverse", on_click=handle_reverse_click),
2020
html.ul([html.li(name, key=name) for name in artists]),
2121
)
2222

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

+4-4
Original file line numberDiff line numberDiff line change
@@ -24,16 +24,16 @@ def handle_click(event):
2424

2525
return html.div(
2626
html.h1("Inspiring sculptors:"),
27-
html.input({"value": artist_to_add, "onChange": handle_change}),
28-
html.button({"onClick": handle_add_click}, "add"),
27+
html.input(value=artist_to_add, on_change=handle_change),
28+
html.button("add", on_click=handle_add_click),
2929
html.ul(
3030
[
3131
html.li(
3232
name,
33-
html.button({"onClick": make_handle_delete_click(index)}, "delete"),
33+
html.button("delete", on_click=make_handle_delete_click(index)),
3434
key=name,
3535
)
36-
for index, name in enumerate(artists)
36+
for (index, name) in enumerate(artists)
3737
]
3838
),
3939
)

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ def handle_click(event):
1616
[
1717
html.li(
1818
count,
19-
html.button({"onClick": make_increment_click_handler(index)}, "+1"),
19+
html.button("+1", on_click=make_increment_click_handler(index)),
2020
key=index,
2121
)
22-
for index, count in enumerate(counters)
22+
for (index, count) in enumerate(counters)
2323
]
2424
)
2525

‎docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/moving_dot.py

+16-20
Original file line numberDiff line numberDiff line change
@@ -16,29 +16,25 @@ async def handle_pointer_move(event):
1616
)
1717

1818
return html.div(
19-
{
20-
"onPointerMove": handle_pointer_move,
21-
"style": {
22-
"position": "relative",
23-
"height": "200px",
24-
"width": "100%",
25-
"backgroundColor": "white",
26-
},
27-
},
2819
html.div(
29-
{
30-
"style": {
31-
"position": "absolute",
32-
"backgroundColor": "red",
33-
"borderRadius": "50%",
34-
"width": "20px",
35-
"height": "20px",
36-
"left": "-10px",
37-
"top": "-10px",
38-
"transform": f"translate({position['x']}px, {position['y']}px)",
39-
},
20+
style={
21+
"position": "absolute",
22+
"backgroundColor": "red",
23+
"borderRadius": "50%",
24+
"width": "20px",
25+
"height": "20px",
26+
"left": "-10px",
27+
"top": "-10px",
28+
"transform": f"translate({position['x']}px, {position['y']}px)",
4029
}
4130
),
31+
on_pointer_move=handle_pointer_move,
32+
style={
33+
"position": "relative",
34+
"height": "200px",
35+
"width": "100%",
36+
"backgroundColor": "white",
37+
},
4238
)
4339

4440

‎docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/moving_dot_broken.py

+16-20
Original file line numberDiff line numberDiff line change
@@ -14,29 +14,25 @@ def handle_pointer_move(event):
1414
position["y"] = event["clientY"] - outer_div_bounds["y"]
1515

1616
return html.div(
17-
{
18-
"onPointerMove": handle_pointer_move,
19-
"style": {
20-
"position": "relative",
21-
"height": "200px",
22-
"width": "100%",
23-
"backgroundColor": "white",
24-
},
25-
},
2617
html.div(
27-
{
28-
"style": {
29-
"position": "absolute",
30-
"backgroundColor": "red",
31-
"borderRadius": "50%",
32-
"width": "20px",
33-
"height": "20px",
34-
"left": "-10px",
35-
"top": "-10px",
36-
"transform": f"translate({position['x']}px, {position['y']}px)",
37-
},
18+
style={
19+
"position": "absolute",
20+
"backgroundColor": "red",
21+
"borderRadius": "50%",
22+
"width": "20px",
23+
"height": "20px",
24+
"left": "-10px",
25+
"top": "-10px",
26+
"transform": f"translate({position['x']}px, {position['y']}px)",
3827
}
3928
),
29+
on_pointer_move=handle_pointer_move,
30+
style={
31+
"position": "relative",
32+
"height": "200px",
33+
"width": "100%",
34+
"backgroundColor": "white",
35+
},
4036
)
4137

4238

‎docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/set_remove.py

+11-13
Original file line numberDiff line numberDiff line change
@@ -16,25 +16,23 @@ def handle_click(event):
1616
return handle_click
1717

1818
return html.div(
19-
{"style": {"display": "flex", "flex-direction": "row"}},
2019
[
2120
html.div(
22-
{
23-
"onClick": make_handle_click(index),
24-
"style": {
25-
"height": "30px",
26-
"width": "30px",
27-
"backgroundColor": (
28-
"black" if index in selected_indices else "white"
29-
),
30-
"outline": "1px solid grey",
31-
"cursor": "pointer",
32-
},
33-
},
3421
key=index,
22+
on_click=make_handle_click(index),
23+
style={
24+
"height": "30px",
25+
"width": "30px",
26+
"backgroundColor": "black"
27+
if index in selected_indices
28+
else "white",
29+
"outline": "1px solid grey",
30+
"cursor": "pointer",
31+
},
3532
)
3633
for index in range(line_size)
3734
],
35+
style={"display": "flex", "flex-direction": "row"},
3836
)
3937

4038

‎docs/source/guides/adding-interactivity/dangers-of-mutability/_examples/set_update.py

+11-13
Original file line numberDiff line numberDiff line change
@@ -13,25 +13,23 @@ def handle_click(event):
1313
return handle_click
1414

1515
return html.div(
16-
{"style": {"display": "flex", "flex-direction": "row"}},
1716
[
1817
html.div(
19-
{
20-
"onClick": make_handle_click(index),
21-
"style": {
22-
"height": "30px",
23-
"width": "30px",
24-
"backgroundColor": (
25-
"black" if index in selected_indices else "white"
26-
),
27-
"outline": "1px solid grey",
28-
"cursor": "pointer",
29-
},
30-
},
3118
key=index,
19+
on_click=make_handle_click(index),
20+
style={
21+
"height": "30px",
22+
"width": "30px",
23+
"backgroundColor": "black"
24+
if index in selected_indices
25+
else "white",
26+
"outline": "1px solid grey",
27+
"cursor": "pointer",
28+
},
3229
)
3330
for index in range(line_size)
3431
],
32+
style={"display": "flex", "flex-direction": "row"},
3533
)
3634

3735

‎docs/source/guides/adding-interactivity/multiple-state-updates/_examples/delay_before_count_updater.py

+1-4
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,7 @@ async def handle_click(event):
1111
await asyncio.sleep(3)
1212
set_number(lambda old_number: old_number + 1)
1313

14-
return html.div(
15-
html.h1(number),
16-
html.button({"onClick": handle_click}, "Increment"),
17-
)
14+
return html.div(html.h1(number), html.button("Increment", on_click=handle_click))
1815

1916

2017
run(Counter)

‎docs/source/guides/adding-interactivity/multiple-state-updates/_examples/delay_before_set_count.py

+1-4
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,7 @@ async def handle_click(event):
1111
await asyncio.sleep(3)
1212
set_number(number + 1)
1313

14-
return html.div(
15-
html.h1(number),
16-
html.button({"onClick": handle_click}, "Increment"),
17-
)
14+
return html.div(html.h1(number), html.button("Increment", on_click=handle_click))
1815

1916

2017
run(Counter)

0 commit comments

Comments
 (0)