Disambiguate expressions in rsx by requiring curlies

This commit is contained in:
Jonathan Kelley committed 2024-01-10 19:33:34 -08:00
1 parent 663296ae45
commit d9b84f9f8f
53 files changed
+399 -373

No files matched your search

@@ -71,7 +71,7 @@ fn app(cx: Scope) -> Element {
"Hover, click, type or scroll to see the info down below"
}
div { width: "80%", height: "50%", flex_direction: "column", events_rendered }
div { width: "80%", height: "50%", flex_direction: "column", {events_rendered} }
}
})
}
+23 -33
View File
@@ -27,26 +27,25 @@ fn Button(cx: Scope<ButtonProps>) -> Element {
height: "100%",
background_color: "{color}",
tabindex: "{cx.props.layer}",
onkeydown: |e| {
onkeydown: move |e| {
if let Code::Space = e.inner().code() {
toggle.modify(|f| !f);
}
},
onclick: |_| {
onclick: move |_| {
toggle.modify(|f| !f);
},
onmouseenter: |_|{
onmouseenter: move |_| {
hovered.set(true);
},
onmouseleave: |_|{
onmouseleave: move |_|{
hovered.set(false);
},
justify_content: "center",
align_items: "center",
display: "flex",
flex_direction: "column",
p{"tabindex: {cx.props.layer}"}
p{ "tabindex: {cx.props.layer}" }
}
})
}
@@ -58,37 +57,28 @@ fn app(cx: Scope) -> Element {
flex_direction: "column",
width: "100%",
height: "100%",
(1..8).map(|y|
rsx!{
div{
display: "flex",
flex_direction: "row",
width: "100%",
height: "100%",
(1..8).map(|x|{
if (x + y) % 2 == 0{
rsx!{
div{
width: "100%",
height: "100%",
background_color: "rgb(100, 100, 100)",
}
}
for y in 1..8 {
div {
display: "flex",
flex_direction: "row",
width: "100%",
height: "100%",
for x in 1..8 {
if (x + y) % 2 == 0 {
div {
width: "100%",
height: "100%",
background_color: "rgb(100, 100, 100)",
}
else{
let layer = (x + y) % 3;
rsx!{
Button{
color_offset: x * y,
layer: layer as u16,
}
}
} else {
Button {
color_offset: x * y,
layer: ((x + y) % 3) as u16,
}
})
}
}
}
)
}
}
})
}
+15 -22
View File
@@ -14,32 +14,25 @@ fn app(cx: Scope) -> Element {
width: "100%",
height: "100%",
flex_direction: "column",
(0..=steps).map(|x|
{
let hue = x as f32*360.0/steps as f32;
rsx! {
div{
width: "100%",
height: "100%",
flex_direction: "row",
(0..=steps).map(|y|
{
let alpha = y as f32*100.0/steps as f32;
rsx! {
div {
left: "{x}px",
top: "{y}px",
width: "10%",
height: "100%",
background_color: "hsl({hue}, 100%, 50%, {alpha}%)",
}
}
for x in 0..=steps {
div { width: "100%", height: "100%", flex_direction: "row",
for y in 0..=steps {
{
let hue = x as f32*360.0/steps as f32;
let alpha = y as f32*100.0/steps as f32;
rsx! {
div {
left: "{x}px",
top: "{y}px",
width: "10%",
height: "100%",
background_color: "hsl({hue}, 100%, 50%, {alpha}%)",
}
)
}
}
}
}
)
}
}
})
}
+2 -2
View File
@@ -19,9 +19,9 @@ fn app(cx: Scope) -> Element {
ul {
flex_direction: "column",
padding_left: "3px",
(0..10).map(|i| rsx!(
for i in 0..10 {
"> hello {i}"
))
}
}
}
})
@@ -71,32 +71,28 @@ fn Grid(cx: Scope<GridProps>) -> Element {
width: "100%",
height: "100%",
flex_direction: "column",
(0..size).map(|x|
{
rsx! {
div{
width: "100%",
height: "100%",
flex_direction: "row",
(0..size).map(|y|
{
let alpha = y as f32*100.0/size as f32 + counts.read()[x*size + y] as f32;
let key = format!("{}-{}", x, y);
rsx! {
Box {
x: x,
y: y,
alpha: 100.0,
hue: alpha,
key: "{key}",
}
}
for x in 0..size {
div{
width: "100%",
height: "100%",
flex_direction: "row",
for y in 0..size {
{
let alpha = y as f32*100.0/size as f32 + counts.read()[x*size + y] as f32;
let key = format!("{}-{}", x, y);
rsx! {
Box {
x: x,
y: y,
alpha: 100.0,
hue: alpha,
key: "{key}",
}
)
}
}
}
}
)
}
}
}
}