Disambiguate expressions in rsx by requiring curlies
This commit is contained in:
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} }
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -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,
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -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}%)",
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -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}",
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user