Skip to content

Commit 21413a1

Browse files
ArchmongerArchmonger
committed
Fix everthing besides the challenges
1 parent 77ff916 commit 21413a1

10 files changed

+831
-849
lines changed

‎docs/examples/managing_state/alt_stateful_picture_component.py

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,27 +9,27 @@ def picture():
99
if is_active:
1010
return html.div(
1111
{
12-
"class_name": "background",
13-
"on_click": lambda event: set_is_active(False),
12+
"className": "background",
13+
"onClick": lambda event: set_is_active(False),
1414
},
1515
html.img(
1616
{
17-
"on_click": event(stop_propagation=True),
18-
"class_name": "picture picture--active",
17+
"onClick": event(stop_propagation=True),
18+
"className": "picture picture--active",
1919
"alt": "Rainbow houses in Kampung Pelangi, Indonesia",
2020
"src": "https://i.imgur.com/5qwVYb1.jpeg",
2121
}
2222
),
2323
)
2424
else:
2525
return html.div(
26-
{"class_name": "background background--active"},
26+
{"className": "background background--active"},
2727
html.img(
2828
{
29-
"on_click": event(
29+
"onClick": event(
3030
lambda event: set_is_active(True), stop_propagation=True
3131
),
32-
"class_name": "picture",
32+
"className": "picture",
3333
"alt": "Rainbow houses in Kampung Pelangi, Indonesia",
3434
"src": "https://i.imgur.com/5qwVYb1.jpeg",
3535
}

‎docs/examples/managing_state/basic_form_component.py

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,11 @@
66
def form(status="empty"):
77
if status == "success":
88
return html.h1("That's right!")
9-
else:
10-
return html._(
11-
html.h2("City quiz"),
12-
html.p(
13-
"In which city is there a billboard that turns air into drinkable water?"
14-
),
15-
html.form(html.textarea(), html.br(), html.button("Submit")),
16-
)
9+
10+
return html.fragment(
11+
html.h2("City quiz"),
12+
html.p(
13+
"In which city is there a billboard that turns air into drinkable water?"
14+
),
15+
html.form(html.textarea(), html.br(), html.button("Submit")),
16+
)

‎docs/examples/managing_state/conditional_form_component.py

Lines changed: 19 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,30 @@
66
def error(status):
77
if status == "error":
88
return html.p(
9-
{"class_name": "error"}, "Good guess but a wrong answer. Try again!"
9+
{"className": "error"}, "Good guess but a wrong answer. Try again!"
1010
)
11-
else:
12-
return ""
11+
12+
return ""
1313

1414

1515
@component
1616
def form(status="empty"):
17-
# Try status="submitting", "error", "success"
17+
# Try "submitting", "error", "success":
1818
if status == "success":
1919
return html.h1("That's right!")
20-
else:
21-
return html._(
22-
html.h2("City quiz"),
23-
html.p(
24-
"In which city is there a billboard that turns air into \
25-
drinkable water?"
26-
),
27-
html.form(
28-
html.textarea(
29-
{"disabled": "True" if status == "submitting" else "False"}
30-
),
31-
html.br(),
32-
html.button(
33-
{
34-
"disabled": (
35-
True if status in ["empty", "submitting"] else "False"
36-
)
37-
},
38-
"Submit",
39-
),
40-
error(status),
20+
21+
return html.fragment(
22+
html.h2("City quiz"),
23+
html.p(
24+
"In which city is there a billboard that turns air into drinkable water?"
25+
),
26+
html.form(
27+
html.textarea({"disabled": "True" if status == "submitting" else "False"}),
28+
html.br(),
29+
html.button(
30+
{"disabled": (True if status in ["empty", "submitting"] else "False")},
31+
"Submit",
4132
),
42-
)
33+
error(status),
34+
),
35+
)

‎docs/examples/managing_state/multiple_form_components.py

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
1+
# start
12
from conditional_form_component import form
23

34
from reactpy import component, html
45

56

6-
# start
77
@component
88
def item(status):
99
return html.section(html.h4("Form", status, ":"), form(status))
@@ -12,5 +12,4 @@ def item(status):
1212
@component
1313
def app():
1414
statuses = ["empty", "typing", "submitting", "success", "error"]
15-
status_list = [item(status) for status in statuses]
16-
return html._(status_list)
15+
return html.fragment([item(status) for status in statuses])

‎docs/examples/managing_state/picture_component.py

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,10 @@
55
@component
66
def picture():
77
return html.div(
8-
{"class_name": "background background--active"},
8+
{"className": "background background--active"},
99
html.img(
1010
{
11-
"class_name": "picture",
11+
"className": "picture",
1212
"alt": "Rainbow houses in Kampung Pelangi, Indonesia",
1313
"src": "https://i.imgur.com/5qwVYb1.jpeg",
1414
}

‎docs/examples/managing_state/stateful_form_component.py

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ async def submit_form(*args):
1212
def error_msg(error):
1313
if error:
1414
return html.p(
15-
{"class_name": "error"}, "Good guess but a wrong answer. Try again!"
15+
{"className": "error"}, "Good guess but a wrong answer. Try again!"
1616
)
1717
else:
1818
return ""
@@ -41,18 +41,17 @@ def handle_textarea_change(event):
4141
if status == "success":
4242
return html.h1("That's right!")
4343
else:
44-
return html._(
44+
return html.fragment(
4545
html.h2("City quiz"),
4646
html.p(
47-
"In which city is there a billboard \
48-
that turns air into drinkable water?"
47+
"In which city is there a billboard that turns air into drinkable water?"
4948
),
5049
html.form(
51-
{"on_submit": handle_submit},
50+
{"onSubmit": handle_submit},
5251
html.textarea(
5352
{
5453
"value": answer,
55-
"on_change": handle_textarea_change,
54+
"onChange": handle_textarea_change,
5655
"disabled": (True if status == "submitting" else "False"),
5756
}
5857
),

‎docs/examples/managing_state/stateful_picture_component.py

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,24 +5,24 @@
55
@component
66
def picture():
77
is_active, set_is_active = hooks.use_state(False)
8-
background_class_name = "background"
9-
picture_class_name = "picture"
8+
background_className = "background"
9+
picture_className = "picture"
1010

1111
if is_active:
12-
picture_class_name += " picture--active"
12+
picture_className += " picture--active"
1313
else:
14-
background_class_name += " background--active"
14+
background_className += " background--active"
1515

1616
@event(stop_propagation=True)
1717
def handle_click(event):
1818
set_is_active(True)
1919

2020
return html.div(
21-
{"class_name": background_class_name, "on_click": set_is_active(False)},
21+
{"className": background_className, "onClick": set_is_active(False)},
2222
html.img(
2323
{
24-
"on_click": handle_click,
25-
"class_name": picture_class_name,
24+
"onClick": handle_click,
25+
"className": picture_className,
2626
"alt": "Rainbow houses in Kampung Pelangi, Indonesia",
2727
"src": "https://i.imgur.com/5qwVYb1.jpeg",
2828
}

‎docs/mkdocs.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ nav:
3434
- Updating Objects in State 🚧: learn/updating-objects-in-state.md
3535
- Updating Arrays in State 🚧: learn/updating-arrays-in-state.md
3636
- Managing State:
37-
- Reacting to Input with State 🚧: learn/reacting-to-input-with-state.md
37+
- Reacting to Input with State: learn/reacting-to-input-with-state.md
3838
- Choosing the State Structure 🚧: learn/choosing-the-state-structure.md
3939
- Sharing State Between Components 🚧: learn/sharing-state-between-components.md
4040
- Preserving and Resetting State 🚧: learn/preserving-and-resetting-state.md

‎docs/src/assets/css/code.css

Lines changed: 54 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,111 +1,114 @@
11
:root {
2-
--code-max-height: 17.25rem;
3-
--md-code-backdrop: rgba(0, 0, 0, 0) 0px 0px 0px 0px,
4-
rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.03) 0px 0.8px 2px 0px,
5-
rgba(0, 0, 0, 0.047) 0px 2.7px 6.7px 0px,
6-
rgba(0, 0, 0, 0.08) 0px 12px 30px 0px;
2+
--code-max-height: 17.25rem;
3+
--md-code-backdrop: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.03) 0px 0.8px 2px 0px, rgba(0, 0, 0, 0.047) 0px 2.7px 6.7px 0px, rgba(0, 0, 0, 0.08) 0px 12px 30px 0px;
74
}
85
[data-md-color-scheme="slate"] {
9-
--md-code-hl-color: #ffffcf1c;
10-
--md-code-bg-color: #16181d;
11-
--md-code-hl-comment-color: hsla(var(--md-hue), 75%, 90%, 0.43);
12-
--code-tab-color: rgb(52, 58, 70);
13-
--md-code-hl-name-color: #aadafc;
14-
--md-code-hl-string-color: hsl(21 49% 63% / 1);
15-
--md-code-hl-keyword-color: hsl(289.67deg 35% 60%);
16-
--md-code-hl-constant-color: hsl(213.91deg 68% 61%);
17-
--md-code-hl-number-color: #bfd9ab;
18-
--func-and-decorator-color: #dcdcae;
19-
--module-import-color: #60c4ac;
6+
--md-code-hl-color: #ffffcf1c;
7+
--md-code-bg-color: #16181d;
8+
--md-code-hl-comment-color: hsla(var(--md-hue), 75%, 90%, 0.43);
9+
--code-tab-color: rgb(52, 58, 70);
10+
--md-code-hl-name-color: #aadafc;
11+
--md-code-hl-string-color: hsl(21 49% 63% / 1);
12+
--md-code-hl-keyword-color: hsl(289.67deg 35% 60%);
13+
--md-code-hl-constant-color: hsl(213.91deg 68% 61%);
14+
--md-code-hl-number-color: #bfd9ab;
15+
--func-and-decorator-color: #dcdcae;
16+
--module-import-color: #60c4ac;
2017
}
2118
[data-md-color-scheme="default"] {
22-
--md-code-hl-color: #ffffcf1c;
23-
--md-code-bg-color: rgba(208, 211, 220, 0.4);
24-
--md-code-fg-color: rgb(64, 71, 86);
25-
--code-tab-color: #fff;
26-
--func-and-decorator-color: var(--md-code-hl-function-color);
27-
--module-import-color: #e153e5;
19+
--md-code-hl-color: #ffffcf1c;
20+
--md-code-bg-color: rgba(208, 211, 220, 0.4);
21+
--md-code-fg-color: rgb(64, 71, 86);
22+
--code-tab-color: #fff;
23+
--func-and-decorator-color: var(--md-code-hl-function-color);
24+
--module-import-color: #e153e5;
2825
}
2926
[data-md-color-scheme="default"] .md-typeset .highlight > pre > code,
3027
[data-md-color-scheme="default"] .md-typeset .highlight > table.highlighttable {
31-
--md-code-bg-color: #fff;
28+
--md-code-bg-color: #fff;
3229
}
3330

3431
/* All code blocks */
3532
.md-typeset pre > code {
36-
max-height: var(--code-max-height);
33+
max-height: var(--code-max-height);
3734
}
3835

3936
/* Code blocks with no line number */
4037
.md-typeset .highlight > pre > code {
41-
border-radius: 16px;
42-
max-height: var(--code-max-height);
43-
box-shadow: var(--md-code-backdrop);
38+
border-radius: 16px;
39+
max-height: var(--code-max-height);
40+
box-shadow: var(--md-code-backdrop);
4441
}
4542

4643
/* Code blocks with line numbers */
4744
.md-typeset .highlighttable .linenos {
48-
max-height: var(--code-max-height);
49-
overflow: hidden;
45+
max-height: var(--code-max-height);
46+
overflow: hidden;
5047
}
5148
.md-typeset .highlighttable {
52-
box-shadow: var(--md-code-backdrop);
53-
border-radius: 8px;
54-
overflow: hidden;
49+
box-shadow: var(--md-code-backdrop);
50+
border-radius: 8px;
51+
overflow: hidden;
5552
}
5653

5754
/* Tabbed code blocks */
5855
.md-typeset .tabbed-set {
59-
box-shadow: var(--md-code-backdrop);
60-
border-radius: 8px;
61-
overflow: hidden;
62-
border: 1px solid var(--md-default-fg-color--lightest);
56+
box-shadow: var(--md-code-backdrop);
57+
border-radius: 8px;
58+
overflow: hidden;
59+
border: 1px solid var(--md-default-fg-color--lightest);
6360
}
6461
.md-typeset .tabbed-set .tabbed-block {
65-
overflow: hidden;
62+
overflow: hidden;
6663
}
6764
.js .md-typeset .tabbed-set .tabbed-labels {
68-
background: var(--code-tab-color);
69-
margin: 0;
70-
padding-left: 0.8rem;
65+
background: var(--code-tab-color);
66+
margin: 0;
67+
padding-left: 0.8rem;
7168
}
7269
.md-typeset .tabbed-set .tabbed-labels > label {
73-
font-weight: 400;
74-
font-size: 0.7rem;
75-
padding-top: 0.55em;
76-
padding-bottom: 0.35em;
70+
font-weight: 400;
71+
font-size: 0.7rem;
72+
padding-top: 0.55em;
73+
padding-bottom: 0.35em;
7774
}
7875
.md-typeset .tabbed-set .highlighttable {
79-
border-radius: 0;
76+
border-radius: 0;
8077
}
8178

82-
/* Code hightlighting colors */
79+
/* Code highlighting colors */
8380

8481
/* Module imports */
8582
.highlight .nc,
8683
.highlight .ne,
8784
.highlight .nn,
8885
.highlight .nv {
89-
color: var(--module-import-color);
86+
color: var(--module-import-color);
9087
}
9188

9289
/* Function def name and decorator */
9390
.highlight .nd,
9491
.highlight .nf {
95-
color: var(--func-and-decorator-color);
92+
color: var(--func-and-decorator-color);
9693
}
9794

9895
/* None type */
9996
.highlight .kc {
100-
color: var(--md-code-hl-constant-color);
97+
color: var(--md-code-hl-constant-color);
10198
}
10299

103100
/* Keywords such as def and return */
104101
.highlight .k {
105-
color: var(--md-code-hl-constant-color);
102+
color: var(--md-code-hl-constant-color);
106103
}
107104

108105
/* HTML tags */
109106
.highlight .nt {
110-
color: var(--md-code-hl-constant-color);
107+
color: var(--md-code-hl-constant-color);
108+
}
109+
110+
/* Code blocks that are challenges */
111+
.challenge {
112+
padding: 0.1rem 1rem 0.6rem 1rem;
113+
background: var(--code-tab-color);
111114
}

0 commit comments

Comments
 (0)