def Gallery():
index, set_index = hooks.use_state(0)
def handle_click(event):
set_index(index + 1)
bounded_index = index % len(sculpture_data)
sculpture = sculpture_data[bounded_index]
alt = sculpture["alt"]
artist = sculpture["artist"]
description = sculpture["description"]
name = sculpture["name"]
url = sculpture["url"]
return html.div(
html.button({"onClick": handle_click}, "Next"),
html.h2(name, " by ", artist),
html.p(f"({bounded_index + 1} of {len(sculpture_data)})"),
html.img({
"src": url,
"alt": alt,
"style": {
"height": "200px"
}
}),
html.p(description),
)
def DoNotChangePages():
return html.div(
html.p("Normally clicking this link would take you to a new page"),
html.a(
{
"onClick": event(lambda event: None, prevent_default=True),
"href": "https://google.com",
},
"https://google.com",
),
)
def Gallery():
index, set_index = hooks.use_state(0)
show_more, set_show_more = hooks.use_state(False)
def handle_next_click(event):
set_index(index + 1)
def handle_more_click(event):
set_show_more(not show_more)
bounded_index = index % len(sculpture_data)
sculpture = sculpture_data[bounded_index]
alt = sculpture["alt"]
artist = sculpture["artist"]
description = sculpture["description"]
name = sculpture["name"]
url = sculpture["url"]
return html.div(
html.button({"onClick": handle_next_click}, "Next"),
html.h2(name, " by ", artist),
html.p(f"({bounded_index + 1} or {len(sculpture_data)})"),
html.img({
"src": url,
"alt": alt,
"style": {
"height": "200px"
}
}),
html.div(
html.button(
{"onClick": handle_more_click},
f"{'Show' if show_more else 'Hide'} details",
),
(html.p(description) if show_more else ""),
),
)
def Form():
person, set_person = use_state({
"first_name": "Barbara",
"last_name": "Hepworth",
"email": "*****@*****.**",
})
def handle_first_name_change(event):
set_person({**person, "first_name": event["target"]["value"]})
def handle_last_name_change(event):
set_person({**person, "last_name": event["target"]["value"]})
def handle_email_change(event):
set_person({**person, "email": event["target"]["value"]})
return html.div(
html.label(
"First name: ",
html.input(
{
"value": person["first_name"],
"onChange": handle_first_name_change
}, ),
),
html.label(
"First name: ",
html.input(
{
"value": person["last_name"],
"onChange": handle_last_name_change
}, ),
),
html.label(
"First name: ",
html.input(
{
"value": person["email"],
"onChange": handle_email_change
}, ),
),
html.p(
f"{person['first_name']} {person['last_name']} {person['email']}"),
)
def SyncedInputs():
value, set_value = hooks.use_state("")
return html.p(
Input("First input", value, set_value),
Input("Second input", value, set_value),
)
def GoodComponent():
return html.p("This component rendered successfuly")
def FilterableList():
value, set_value = hooks.use_state("")
return html.p(Search(value, set_value), html.hr(), Table(value, set_value))