Passing props.children into element!()?

[thehappycheese]

May I please have help! I see that inside the macro element!() the syntax #(<Iterable>) can be used to map data into elements but I cant figure out how to pass in props.children? I don't see it in any of the examples?

I am trying to make a button that supports hover styles; please see below code where I have hacked a long and ugly solution using ComponentUpdater::update_children(...)

• Basically I copy pasted the View component and the related implementations and prop types
• Renamed View to MyButton
• Add both use_terminal_events AND use_local_terminal_events
  1. turn hover off in global mouse move
  2. turn hover on in local mouse move
  3. (In that order... which I am assuming is consistent ¯_(ツ)_/¯ ?)
• Note I had to vendor iocraft source code to remove #[non_exhaustive] from CanvasTextStyle to be able to do this in user code 😟

The code works but ends up being a horrible hacky duplication of the View component this way. Any help to find a better way would be much appreciated :)

/// MyButton.rs
use iocraft_macros::with_layout_style_props;
use taffy::{LengthPercentage, Rect};
use iocraft::prelude::*;
use iocraft::{CanvasTextStyle};

#[with_layout_style_props]
#[derive(Default, Props)]
pub struct MyButtonProps <'a>{
    pub children: Vec<AnyElement<'a>>,
    on_click: HandlerMut<'static, ()>,
    has_focus: bool,
     /// The style of the border. By default, the view will have no border.
    pub border_style: BorderStyle,

    /// The color of the border.
    pub border_color: Option<Color>,

    /// color of the border when hovering
    pub border_color_hover: Option<Color>,

    /// The edges to render the border on. By default, the border will be rendered on all edges.
    pub border_edges: Option<Edges>,

    /// The color of the background.
    pub background_color: Option<Color>,
}

#[derive(Default)]
pub struct MyButton{
    border_style: BorderStyle,
    border_text_style: CanvasTextStyle,
    border_edges: Edges,
    background_color: Option<Color>,
}

impl Component for MyButton {
    type Props<'a> = MyButtonProps<'a>;
    fn new(_props: &Self::Props<'_>) -> Self {
        Self::default()
    }
    fn update(
            &mut self,
            props: &mut Self::Props<'_>,
            mut hooks: Hooks,
            updater: &mut ComponentUpdater,
        ) {
        let mut hovering = hooks.use_state(||false);
        hooks.use_terminal_events(move |event|match event {
            TerminalEvent::FullscreenMouse(FullscreenMouseEvent{
                kind:MouseEventKind::Moved,
                ..
            })=>{
                hovering.set(false);
            }
            _=>{}
        });
        hooks.use_local_terminal_events({
            let mut handler = props.on_click.take();
            let has_focus = props.has_focus;
            move |event| match event {
                TerminalEvent::FullscreenMouse(FullscreenMouseEvent{
                    kind: MouseEventKind::Moved,
                    ..
                })=>{
                    hovering.set(true);
                }
                TerminalEvent::FullscreenMouse(FullscreenMouseEvent {
                    kind: MouseEventKind::Down(_),
                    ..
                }) => {
                    handler(());
                }
                TerminalEvent::Key(KeyEvent { code, kind, .. })
                    if has_focus
                        && kind != KeyEventKind::Release
                        && (code == KeyCode::Enter || code == KeyCode::Char(' ')) =>
                {
                    handler(());
                }
                _ => {}
            }
        });

        self.border_style = props.border_style;
        self.border_text_style = CanvasTextStyle {
            color: if hovering.get() { props.border_color_hover} else {props.border_color},
            ..Default::default()
        };
        self.border_edges = props.border_edges.unwrap_or(Edges::all());
        self.background_color = props.background_color;
        let mut style: taffy::style::Style = props.layout_style().into();
        style.border = if self.border_style.is_none() {
            Rect::zero()
        } else {
            Rect {
                top: LengthPercentage::Length(if self.border_edges.contains(Edges::Top) {
                    1.0
                } else {
                    0.0
                }),
                bottom: LengthPercentage::Length(if self.border_edges.contains(Edges::Bottom) {
                    1.0
                } else {
                    0.0
                }),
                left: LengthPercentage::Length(if self.border_edges.contains(Edges::Left) {
                    1.0
                } else {
                    0.0
                }),
                right: LengthPercentage::Length(if self.border_edges.contains(Edges::Right) {
                    1.0
                } else {
                    0.0
                }),
            }
        };
        updater.set_layout_style(style);
        updater.update_children(props.children.iter_mut(), None);
    }

    fn draw(&mut self, drawer: &mut ComponentDrawer<'_>) {
        let layout = drawer.layout();

        let mut canvas = drawer.canvas();

        if let Some(color) = self.background_color {
            canvas.clear_text(
                0,
                0,
                layout.size.width as usize,
                layout.size.height as usize,
            );
            canvas.set_background_color(
                0,
                0,
                layout.size.width as usize,
                layout.size.height as usize,
                color,
            );
        }

        if let Some(border) = self.border_style.border_characters() {
            let left_border_size = if self.border_edges.contains(Edges::Left) {
                1
            } else {
                0
            };
            let right_border_size = if self.border_edges.contains(Edges::Right) {
                1
            } else {
                0
            };
            let top_border_size = if self.border_edges.contains(Edges::Top) {
                1
            } else {
                0
            };
            let bottom_border_size = if self.border_edges.contains(Edges::Bottom) {
                1
            } else {
                0
            };

            if self.border_edges.contains(Edges::Top) {
                if self.border_edges.contains(Edges::Left) {
                    canvas.set_text(0, 0, &border.top_left.to_string(), self.border_text_style);
                }

                let top = border
                    .top
                    .to_string()
                    .repeat(layout.size.width as usize - left_border_size - right_border_size);
                canvas.set_text(left_border_size as _, 0, &top, self.border_text_style);

                if self.border_edges.contains(Edges::Right) {
                    canvas.set_text(
                        layout.size.width as isize - 1,
                        0,
                        &border.top_right.to_string(),
                        self.border_text_style,
                    );
                }
            }

            for y in top_border_size..(layout.size.height as isize - bottom_border_size) {
                if self.border_edges.contains(Edges::Left) {
                    canvas.set_text(0, y, &border.left.to_string(), self.border_text_style);
                }
                if self.border_edges.contains(Edges::Right) {
                    canvas.set_text(
                        layout.size.width as isize - 1,
                        y,
                        &border.right.to_string(),
                        self.border_text_style,
                    );
                }
            }

            if self.border_edges.contains(Edges::Bottom) {
                if self.border_edges.contains(Edges::Left) {
                    canvas.set_text(
                        0,
                        layout.size.height as isize - 1,
                        &border.bottom_left.to_string(),
                        self.border_text_style,
                    );
                }

                let bottom = border
                    .bottom
                    .to_string()
                    .repeat(layout.size.width as usize - left_border_size - right_border_size);
                canvas.set_text(
                    left_border_size as _,
                    layout.size.height as isize - 1,
                    &bottom,
                    self.border_text_style,
                );

                if self.border_edges.contains(Edges::Right) {
                    canvas.set_text(
                        layout.size.width as isize - 1,
                        layout.size.height as isize - 1,
                        &border.bottom_right.to_string(),
                        self.border_text_style,
                    );
                }
            }
        }
    }
}

[ccbrown]

children is a special prop (similar to React). Anything you pass in between curly braces will be provided to a component via its children prop.

For example:

element!{
    MyComponent {
        MyChild
        MyOtherChild
    }
}

The MyChild and MyOtherChild elements will be passed to MyComponent via its children prop.

So for your use-case, you would do something like this:

use iocraft::prelude::*;

#[derive(Default, Props)]
struct HoverableProps<'a> {
    pub children: Vec<AnyElement<'a>>,
}

#[component]
fn Hoverable<'a>(mut hooks: Hooks, props: &mut HoverableProps<'a>) -> impl Into<AnyElement<'a>> {
    let mut has_mouse = hooks.use_state(|| false);

    hooks.use_terminal_events(move |event| match event {
        TerminalEvent::FullscreenMouse(FullscreenMouseEvent {
            kind: MouseEventKind::Moved,
            ..
        }) => {
            has_mouse.set(false);
        }
        _ => {}
    });

    hooks.use_local_terminal_events({
        move |event| match event {
            TerminalEvent::FullscreenMouse(FullscreenMouseEvent {
                kind: MouseEventKind::Moved,
                ..
            }) => {
                has_mouse.set(true);
            }
            _ => {}
        }
    });

    element! {
        View(
            width: 20,
            height: 5,
            align_items: AlignItems::Center,
            justify_content: JustifyContent::Center,
            background_color: if has_mouse.get() { Color::Green } else { Color::Blue },
        ) {
            #(&mut props.children)
        }
    }
}

#[component]
fn Example(mut hooks: Hooks) -> impl Into<AnyElement<'static>> {
    let (width, height) = hooks.use_terminal_size();
    let mut system = hooks.use_context_mut::<SystemContext>();
    let mut should_exit = hooks.use_state(|| false);

    hooks.use_terminal_events({
        move |event| match event {
            TerminalEvent::Key(KeyEvent { code, kind, .. }) if kind != KeyEventKind::Release => {
                match code {
                    KeyCode::Char('q') => should_exit.set(true),
                    _ => {}
                }
            }
            _ => {}
        }
    });

    if should_exit.get() {
        system.exit();
    }

    element! {
        View(
            width,
            height,
            background_color: Color::DarkGrey,
            border_style: BorderStyle::Double,
            border_color: Color::Blue,
            align_items: AlignItems::Center,
            justify_content: JustifyContent::Center,
        ) {
            Hoverable {
                Text(content: "Hover over me!")
            }
        }
    }
}

fn main() {
    smol::block_on(element!(Example).fullscreen()).unwrap();
}

The use_terminal_events / use_local_terminal_events trick works and should be reliable but will probably cause more re-renders than necessary. If you want to optimize that you would probably have to create a custom hook.

[thehappycheese]

Ahh damn all I was missing was ’&mut’ and it would have worked thank you so much for taking the time on such a detailed answer :) rust analyser is great but it sure makes difficult to read errors in macros sometimes. I will have to look into that custom hook