Flex components

examples/hello_world.rs

@@ -10,7 +10,12 @@ fn App(cx: &Arc<Context>) -> View {
     rsx! {
         // redraw is important because the effects won't be applied
         impl size_auto, center, redraw
-        Card { content: "Hello World".to_string() }
+        FlexRow {
+            impl size_auto, redraw
+            Card { content: "One".to_string() }
+            impl size_auto, redraw
+            Card { content: "Two".to_string() }
+        }
     }
     .view(&cx)
 }

src/component/components/flex.rs

@@ -0,0 +1,51 @@
+use crate::component_prelude::*;
+
+#[component]
+pub fn FlexRow(cx: &Arc<Context>, children: Rsx) -> View {
+    children.generate_children(&cx);
+
+    Arc::new({
+        let cx = cx.clone();
+        move |ctx| {
+            for (child, view_wrapper) in cx.get_children() {
+                let view = child.get_view();
+
+                if let Some(view_wrapper) = view_wrapper {
+                    let mut ctx2 = ctx.clone();
+
+                    view_wrapper(&mut ctx2, view);
+
+                    ctx.drawing.append(&mut ctx2.drawing);
+                    ctx.area.y += ctx2.allocated.height;
+                } else {
+                    ctx.draw_view(ctx.area.clone(), view);
+                }
+            }
+        }
+    })
+}
+
+#[component]
+pub fn FlexColumn(cx: &Arc<Context>, children: Rsx) -> View {
+    children.generate_children(&cx);
+
+    Arc::new({
+        let cx = cx.clone();
+        move |ctx| {
+            for (child, view_wrapper) in cx.get_children() {
+                let view = child.get_view();
+
+                if let Some(view_wrapper) = view_wrapper {
+                    let mut ctx2 = ctx.clone();
+
+                    view_wrapper(&mut ctx2, view);
+
+                    ctx.drawing.append(&mut ctx2.drawing);
+                    ctx.area.x += ctx2.allocated.width;
+                } else {
+                    ctx.draw_view(ctx.area.clone(), view);
+                }
+            }
+        }
+    })
+}

src/component/components/mod.rs

@@ -0,0 +1,3 @@
+mod flex;
+
+pub use flex::*;

src/component/context.rs

@@ -15,9 +15,9 @@ use access_cell::AccessCell;
 use crate::{
     component::EventHandler,
     engine::{Command, CommandExecutor},
-    render::DrawContext,
     hooks::{use_effect, HookDependency},
-    View,
+    render::DrawContext,
+    View, ViewWrapper,
 };
 
 use super::{scope::Scope, Component, ComponentImpl};
@@ -216,6 +216,16 @@ impl Context {
         self.scopes.lock().unwrap().push(scope);
     }
 
+    /// Gets the children
+    pub fn get_children(self: &Arc<Self>) -> Vec<(Arc<Context>, Option<ViewWrapper>)> {
+        self.scopes
+            .lock()
+            .unwrap()
+            .iter()
+            .flat_map(|s| s.children.lock().unwrap().clone())
+            .collect::<Vec<_>>()
+    }
+
     /// Renders all child components to the draw context
     pub fn draw_children(self: &Arc<Self>, ctx: &mut DrawContext) {
         for scope in self.scopes.lock().unwrap().iter() {

src/component/mod.rs

@@ -4,6 +4,7 @@
 //! Components are reusable units of UI that can manage their own state
 //! and respond to events.
 
+pub mod components;
 pub mod context;
 pub mod scope;
 

src/lib.rs

@@ -48,6 +48,12 @@ pub mod render;
 pub mod view_plugins;
 
 pub mod prelude {
+    //! Prelude module - Re-exports commonly used items for convenience
+    pub use crate::component::components::*;
+    pub use crate::component_prelude::*;
+}
+
+pub mod component_prelude {
     //! Prelude module - Re-exports commonly used items for convenience
     pub use crate::component::{context::*, scope::*, *};
     pub use crate::engine::*;