update more examples
This commit is contained in:
1 parent
094012b07d
commit
e6a11f50dd
4 files changed
+22
-23
No files matched your search
@@ -167,7 +167,6 @@ impl<'b> VirtualDom {
|
|||||||
) {
|
) {
|
||||||
// Replace components that have different render fns
|
// Replace components that have different render fns
|
||||||
if left.render_fn != right.render_fn {
|
if left.render_fn != right.render_fn {
|
||||||
dbg!(&left, &right);
|
|
||||||
let created = self.create_component_node(right_template, right, idx);
|
let created = self.create_component_node(right_template, right, idx);
|
||||||
let head = unsafe {
|
let head = unsafe {
|
||||||
self.scopes[left.scope.get().unwrap().0]
|
self.scopes[left.scope.get().unwrap().0]
|
||||||
@@ -407,7 +406,7 @@ impl<'b> VirtualDom {
|
|||||||
debug_assert!(!new.is_empty());
|
debug_assert!(!new.is_empty());
|
||||||
debug_assert!(!old.is_empty());
|
debug_assert!(!old.is_empty());
|
||||||
|
|
||||||
match dbg!(old.len().cmp(&new.len())) {
|
match old.len().cmp(&new.len()) {
|
||||||
Ordering::Greater => self.remove_nodes(&old[new.len()..]),
|
Ordering::Greater => self.remove_nodes(&old[new.len()..]),
|
||||||
Ordering::Less => self.create_and_insert_after(&new[old.len()..], old.last().unwrap()),
|
Ordering::Less => self.create_and_insert_after(&new[old.len()..], old.last().unwrap()),
|
||||||
Ordering::Equal => {}
|
Ordering::Equal => {}
|
||||||
|
|||||||
@@ -23,12 +23,12 @@ fn Button(cx: Scope<ButtonProps>) -> Element {
|
|||||||
|
|
||||||
cx.render(rsx! {
|
cx.render(rsx! {
|
||||||
div{
|
div{
|
||||||
width: "100%",
|
width: "20px",
|
||||||
height: "100%",
|
height: "5px",
|
||||||
background_color: "{color}",
|
background_color: "{color}",
|
||||||
tabindex: "{cx.props.layer}",
|
tabindex: "{cx.props.layer}",
|
||||||
onkeydown: |e| {
|
onkeydown: |e| {
|
||||||
if let Code::Space = e.data.code() {
|
if let Code::Space = e.inner().code() {
|
||||||
toggle.modify(|f| !f);
|
toggle.modify(|f| !f);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -60,7 +60,7 @@ fn app(cx: Scope) -> Element {
|
|||||||
height: "100%",
|
height: "100%",
|
||||||
|
|
||||||
(1..8).map(|y|
|
(1..8).map(|y|
|
||||||
cx.render(rsx!{
|
rsx!{
|
||||||
div{
|
div{
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flex_direction: "row",
|
flex_direction: "row",
|
||||||
@@ -68,26 +68,26 @@ fn app(cx: Scope) -> Element {
|
|||||||
height: "100%",
|
height: "100%",
|
||||||
(1..8).map(|x|{
|
(1..8).map(|x|{
|
||||||
if (x + y) % 2 == 0{
|
if (x + y) % 2 == 0{
|
||||||
cx.render(rsx!{
|
rsx!{
|
||||||
div{
|
div{
|
||||||
width: "100%",
|
width: "20px",
|
||||||
height: "100%",
|
height: "5px",
|
||||||
background_color: "rgb(100, 100, 100)",
|
background_color: "rgb(100, 100, 100)",
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
else{
|
else{
|
||||||
let layer = (x + y) % 3;
|
let layer = (x + y) % 3;
|
||||||
cx.render(rsx!{
|
rsx!{
|
||||||
Button{
|
Button{
|
||||||
color_offset: x * y,
|
color_offset: x * y,
|
||||||
layer: layer as u16,
|
layer: layer as u16,
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ fn app(cx: Scope) -> Element {
|
|||||||
(0..=steps).map(|x|
|
(0..=steps).map(|x|
|
||||||
{
|
{
|
||||||
let hue = x as f32*360.0/steps as f32;
|
let hue = x as f32*360.0/steps as f32;
|
||||||
cx.render(rsx! {
|
rsx! {
|
||||||
div{
|
div{
|
||||||
width: "100%",
|
width: "100%",
|
||||||
height: "100%",
|
height: "100%",
|
||||||
@@ -25,7 +25,7 @@ fn app(cx: Scope) -> Element {
|
|||||||
(0..=steps).map(|y|
|
(0..=steps).map(|y|
|
||||||
{
|
{
|
||||||
let alpha = y as f32*100.0/steps as f32;
|
let alpha = y as f32*100.0/steps as f32;
|
||||||
cx.render(rsx! {
|
rsx! {
|
||||||
div {
|
div {
|
||||||
left: "{x}px",
|
left: "{x}px",
|
||||||
top: "{y}px",
|
top: "{y}px",
|
||||||
@@ -33,11 +33,11 @@ fn app(cx: Scope) -> Element {
|
|||||||
height: "100%",
|
height: "100%",
|
||||||
background_color: "hsl({hue}, 100%, 50%, {alpha}%)",
|
background_color: "hsl({hue}, 100%, 50%, {alpha}%)",
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
})
|
}
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,13 +11,13 @@ fn app(cx: Scope) -> Element {
|
|||||||
height: "100%",
|
height: "100%",
|
||||||
flex_direction: "column",
|
flex_direction: "column",
|
||||||
background_color: "black",
|
background_color: "black",
|
||||||
// margin_right: "10px",
|
margin_right: "10px",
|
||||||
|
|
||||||
div {
|
div {
|
||||||
width: "70%",
|
width: "70%",
|
||||||
height: "70%",
|
height: "70%",
|
||||||
background_color: "green",
|
background_color: "green",
|
||||||
// margin_left: "4px",
|
margin_left: "4px",
|
||||||
|
|
||||||
div {
|
div {
|
||||||
width: "100%",
|
width: "100%",
|
||||||
@@ -34,10 +34,10 @@ fn app(cx: Scope) -> Element {
|
|||||||
align_items: "center",
|
align_items: "center",
|
||||||
flex_direction: "column",
|
flex_direction: "column",
|
||||||
|
|
||||||
// padding_top: "2px",
|
padding_top: "2px",
|
||||||
// padding_bottom: "2px",
|
padding_bottom: "2px",
|
||||||
// padding_left: "4px",
|
padding_left: "4px",
|
||||||
// padding_right: "4px",
|
padding_right: "4px",
|
||||||
|
|
||||||
"[A]"
|
"[A]"
|
||||||
"[A]"
|
"[A]"
|
||||||
|
|||||||
Reference in new issue
Block a user