Components will now render and set cursor

src/ui/activities/auth_activity/view.rs

@@ -202,9 +202,7 @@ impl AuthActivity {
             let focus: Option<String> = self.view.who_has_focus();
             // Render
             // Header
-            if let Some(render) = self.view.render(super::COMPONENT_TEXT_HEADER).as_ref() {
+            self.view.render(super::COMPONENT_TEXT_HEADER, f, auth_chunks[0]);
-                f.render_widget(render.widget, auth_chunks[0]);
-            }
         });
     }
 

src/ui/layout/components/bookmark_list.rs

@@ -24,14 +24,14 @@
 */
 
 // locals
-use super::{Component, InputEvent, Msg, Payload, Props, PropsBuilder, Render};
+use super::{Canvas, Component, InputEvent, Msg, Payload, Props, PropsBuilder};
 // ext
 use crossterm::event::KeyCode;
 use tui::{
-    layout::Corner,
+    layout::{Corner, Rect},
     style::{Color, Style},
     text::Span,
-    widgets::{Block, Borders, List, ListItem},
+    widgets::{Block, Borders, List, ListItem, ListState},
 };
 
 // -- states
@@ -129,12 +129,11 @@ impl BookmarkList {
 impl Component for BookmarkList {
     /// ### render
     ///
-    /// Based on the current properties and states, return a Widget instance for the Component
+    /// Based on the current properties and states, renders a widget using the provided render engine in the provided Area
-    /// Returns None if the component is hidden
+    /// If focused, cursor is also set (if supported by widget)
-    fn render(&self) -> Option<Render> {
+    #[cfg(not(tarpaulin_include))]
-        match self.props.visible {
+    fn render(&self, render: &mut Canvas, area: Rect) {
-            false => None,
+        if self.props.visible {
-            true => {
             // Make list
             let list_item: Vec<ListItem> = match self.props.texts.rows.as_ref() {
                 None => vec![],
@@ -152,8 +151,9 @@ impl Component for BookmarkList {
                 None => String::new(),
             };
             // Render
-                Some(Render {
+            let mut state: ListState = ListState::default();
-                    widget: Box::new(
+            state.select(Some(self.states.list_index));
+            render.render_stateful_widget(
                 List::new(list_item)
                     .block(
                         Block::default()
@@ -171,10 +171,9 @@ impl Component for BookmarkList {
                             .fg(fg)
                             .add_modifier(self.props.get_modifiers()),
                     ),
-                    ),
+                area,
-                    cursor: self.states.list_index,
+                &mut state,
-                })
+            );
-            }
         }
     }
 
@@ -304,7 +303,7 @@ mod tests {
         assert_eq!(component.states.focus, false);
         // Increment list index
         component.states.list_index += 1;
-        assert_eq!(component.render().unwrap().cursor, 1);
+        assert_eq!(component.states.list_index, 1);
         // Update
         component.update(
             component
@@ -325,7 +324,7 @@ mod tests {
         // get value
         assert_eq!(component.get_value(), Payload::Unsigned(0));
         // Render
-        assert_eq!(component.render().unwrap().cursor, 0);
+        assert_eq!(component.states.list_index, 0);
         // Handle inputs
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Down))),

src/ui/layout/components/file_list.rs

@@ -24,14 +24,14 @@
 */
 
 // locals
-use super::{Component, InputEvent, Msg, Payload, Props, PropsBuilder, Render};
+use super::{Canvas, Component, InputEvent, Msg, Payload, Props, PropsBuilder};
 // ext
 use crossterm::event::KeyCode;
 use tui::{
-    layout::Corner,
+    layout::{Corner, Rect},
     style::{Color, Style},
     text::Span,
-    widgets::{Block, Borders, List, ListItem},
+    widgets::{Block, Borders, List, ListItem, ListState},
 };
 
 // -- states
@@ -129,12 +129,11 @@ impl FileList {
 impl Component for FileList {
     /// ### render
     ///
-    /// Based on the current properties and states, return a Widget instance for the Component
+    /// Based on the current properties and states, renders a widget using the provided render engine in the provided Area
-    /// Returns None if the component is hidden
+    /// If focused, cursor is also set (if supported by widget)
-    fn render(&self) -> Option<Render> {
+    #[cfg(not(tarpaulin_include))]
-        match self.props.visible {
+    fn render(&self, render: &mut Canvas, area: Rect) {
-            false => None,
+        if self.props.visible {
-            true => {
             // Make list
             let list_item: Vec<ListItem> = match self.props.texts.rows.as_ref() {
                 None => vec![],
@@ -152,8 +151,9 @@ impl Component for FileList {
                 None => String::new(),
             };
             // Render
-                Some(Render {
+            let mut state: ListState = ListState::default();
-                    widget: Box::new(
+            state.select(Some(self.states.list_index));
+            render.render_stateful_widget(
                 List::new(list_item)
                     .block(
                         Block::default()
@@ -171,10 +171,9 @@ impl Component for FileList {
                             .fg(fg)
                             .add_modifier(self.props.get_modifiers()),
                     ),
-                    ),
+                area,
-                    cursor: self.states.list_index,
+                &mut state,
-                })
+            );
-            }
         }
     }
 
@@ -304,7 +303,7 @@ mod tests {
         assert_eq!(component.states.focus, false);
         // Increment list index
         component.states.list_index += 1;
-        assert_eq!(component.render().unwrap().cursor, 1);
+        assert_eq!(component.states.list_index, 1);
         // Update
         component.update(
             component
@@ -325,7 +324,7 @@ mod tests {
         // get value
         assert_eq!(component.get_value(), Payload::Unsigned(0));
         // Render
-        assert_eq!(component.render().unwrap().cursor, 0);
+        assert_eq!(component.states.list_index, 0);
         // Handle inputs
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Down))),

src/ui/layout/components/input.rs

@@ -25,13 +25,15 @@
 
 // locals
 use super::super::props::InputType;
-use super::{Component, InputEvent, Msg, Payload, PropValue, Props, PropsBuilder, Render};
+use super::{Canvas, Component, InputEvent, Msg, Payload, PropValue, Props, PropsBuilder};
 // ext
 use crossterm::event::{KeyCode, KeyModifiers};
 use tui::{
+    layout::Rect,
     style::Style,
     widgets::{Block, BorderType, Borders, Paragraph},
 };
+use unicode_width::UnicodeWidthStr;
 
 // -- states
 
@@ -110,6 +112,20 @@ impl OwnStates {
         }
     }
 
+    /// ### cursoro_at_begin
+    ///
+    /// Place cursor at the begin of the input
+    pub fn cursor_at_begin(&mut self) {
+        self.cursor = 0;
+    }
+
+    /// ### cursor_at_end
+    ///
+    /// Place cursor at the end of the input
+    pub fn cursor_at_end(&mut self) {
+        self.cursor = self.input.len();
+    }
+
     /// ### decr_cursor
     ///
     /// Decrement cursor value by one if possible
@@ -168,9 +184,10 @@ impl Input {
 impl Component for Input {
     /// ### render
     ///
-    /// Based on the current properties and states, return a Widget instance for the Component
+    /// Based on the current properties and states, renders a widget using the provided render engine in the provided Area
-    /// Returns None if the component is hidden
+    /// If focused, cursor is also set (if supported by widget)
-    fn render(&self) -> Option<Render> {
+    #[cfg(not(tarpaulin_include))]
+    fn render(&self, render: &mut Canvas, area: Rect) {
         if self.props.visible {
             let title: String = match self.props.texts.title.as_ref() {
                 Some(t) => t.clone(),
@@ -187,12 +204,13 @@ impl Component for Input {
                         .border_type(BorderType::Rounded)
                         .title(title),
                 );
-            Some(Render {
+            render.render_widget(p, area);
-                widget: Box::new(p),
+            // Set cursor, if focus
-                cursor: self.states.cursor,
+            if self.states.focus {
-            })
+                let x: u16 =
-        } else {
+                    area.x + (self.states.render_value(self.props.input_type).width() as u16) + 1;
-            None
+                render.set_cursor(x, area.y);
+            }
         }
     }
 
@@ -256,6 +274,16 @@ impl Component for Input {
                     self.states.incr_cursor();
                     Msg::None
                 }
+                KeyCode::End => {
+                    // Cursor at last position
+                    self.states.cursor_at_end();
+                    Msg::None
+                }
+                KeyCode::Home => {
+                    // Cursor at first positon
+                    self.states.cursor_at_begin();
+                    Msg::None
+                }
                 KeyCode::Char(ch) => {
                     // Check if modifiers is NOT CTRL OR ALT
                     if !key.modifiers.intersects(KeyModifiers::CONTROL)
@@ -336,8 +364,16 @@ mod tests {
         assert_eq!(component.states.focus, false);
         // Get value
         assert_eq!(component.get_value(), Payload::Text(String::from("home")));
-        // Render
+        // RenderData
-        assert_eq!(component.render().unwrap().cursor, 4);
+        //assert_eq!(component.render().unwrap().cursor, 4);
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            4
+        );
         // Handle events
         // Try key with ctrl
         assert_eq!(
@@ -349,21 +385,45 @@ mod tests {
         );
         // String shouldn't have changed
         assert_eq!(component.get_value(), Payload::Text(String::from("home")));
-        assert_eq!(component.render().unwrap().cursor, 4);
+        //assert_eq!(component.render().unwrap().cursor, 4);
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            4
+        );
         // Character
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Char('/')))),
             Msg::None
         );
         assert_eq!(component.get_value(), Payload::Text(String::from("home/")));
-        assert_eq!(component.render().unwrap().cursor, 5);
+        //assert_eq!(component.render().unwrap().cursor, 5);
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            5
+        );
         // Verify max length (shouldn't push any character)
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Char('a')))),
             Msg::None
         );
         assert_eq!(component.get_value(), Payload::Text(String::from("home/")));
-        assert_eq!(component.render().unwrap().cursor, 5);
+        //assert_eq!(component.render().unwrap().cursor, 5);
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            5
+        );
         // Enter
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Enter))),
@@ -375,7 +435,15 @@ mod tests {
             Msg::None
         );
         assert_eq!(component.get_value(), Payload::Text(String::from("home")));
-        assert_eq!(component.render().unwrap().cursor, 4);
+        //assert_eq!(component.render().unwrap().cursor, 4);
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            5
+        );
         // Check backspace at 0
         component.states.input = vec!['h'];
         component.states.cursor = 1;
@@ -384,21 +452,45 @@ mod tests {
             Msg::None
         );
         assert_eq!(component.get_value(), Payload::Text(String::from("")));
-        assert_eq!(component.render().unwrap().cursor, 0);
+        //assert_eq!(component.render().unwrap().cursor, 0);
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            0
+        );
         // Another one...
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Backspace))),
             Msg::None
         );
         assert_eq!(component.get_value(), Payload::Text(String::from("")));
-        assert_eq!(component.render().unwrap().cursor, 0);
+        //assert_eq!(component.render().unwrap().cursor, 0);
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            0
+        );
         // See del behaviour here
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Delete))),
             Msg::None
         );
         assert_eq!(component.get_value(), Payload::Text(String::from("")));
-        assert_eq!(component.render().unwrap().cursor, 0);
+        //assert_eq!(component.render().unwrap().cursor, 0);
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            0
+        );
         // Check del behaviour
         component.states.input = vec!['h', 'e'];
         component.states.cursor = 1;
@@ -407,14 +499,30 @@ mod tests {
             Msg::None
         );
         assert_eq!(component.get_value(), Payload::Text(String::from("h")));
-        assert_eq!(component.render().unwrap().cursor, 1); // Shouldn't move
+        //assert_eq!(component.render().unwrap().cursor, 1); // Shouldn't move
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            1
+        );
         // Another one (should do nothing)
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Delete))),
             Msg::None
         );
         assert_eq!(component.get_value(), Payload::Text(String::from("h")));
-        assert_eq!(component.render().unwrap().cursor, 1); // Shouldn't move
+        //assert_eq!(component.render().unwrap().cursor, 1); // Shouldn't move
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            1
+        );
         // Move cursor right
         component.states.input = vec!['h', 'e', 'l', 'l', 'o'];
         component.states.cursor = 1;
@@ -423,20 +531,44 @@ mod tests {
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Right))), // between 'e' and 'l'
             Msg::None
         );
-        assert_eq!(component.render().unwrap().cursor, 2); // Should increment
+        //assert_eq!(component.render().unwrap().cursor, 2); // Should increment
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            2
+        );
         // Put a character here
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Char('a')))),
             Msg::None
         );
         assert_eq!(component.get_value(), Payload::Text(String::from("heallo")));
-        assert_eq!(component.render().unwrap().cursor, 3);
+        //assert_eq!(component.render().unwrap().cursor, 3);
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            3
+        );
         // Move left
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Left))),
             Msg::None
         );
-        assert_eq!(component.render().unwrap().cursor, 2); // Should decrement
+        //assert_eq!(component.render().unwrap().cursor, 2); // Should decrement
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            2
+        );
         // Go at the end
         component.states.cursor = 6;
         // Move right
@@ -444,23 +576,80 @@ mod tests {
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Right))),
             Msg::None
         );
-        assert_eq!(component.render().unwrap().cursor, 6); // Should stay
+        //assert_eq!(component.render().unwrap().cursor, 6); // Should stay
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            6
+        );
         // Move left
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Left))),
             Msg::None
         );
-        assert_eq!(component.render().unwrap().cursor, 5); // Should decrement
+        //assert_eq!(component.render().unwrap().cursor, 5); // Should decrement
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            5
+        );
         // Go at the beginning
         component.states.cursor = 0;
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Left))),
             Msg::None
         );
-        assert_eq!(component.render().unwrap().cursor, 0); // Should stay
+        //assert_eq!(component.render().unwrap().cursor, 0); // Should stay
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            0
+        );
+        // End - begin
+        assert_eq!(
+            component.on(InputEvent::Key(KeyEvent::from(KeyCode::End))),
+            Msg::None
+        );
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            6
+        );
+        assert_eq!(
+            component.on(InputEvent::Key(KeyEvent::from(KeyCode::Home))),
+            Msg::None
+        );
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            0
+        );
         // Update value
-        component.update(component.get_props().with_value(PropValue::Str("new-value".to_string())).build());
+        component.update(
-        assert_eq!(component.get_value(), Payload::Text(String::from("new-value")));
+            component
+                .get_props()
+                .with_value(PropValue::Str("new-value".to_string()))
+                .build(),
+        );
+        assert_eq!(
+            component.get_value(),
+            Payload::Text(String::from("new-value"))
+        );
     }
 
     #[test]
@@ -482,13 +671,29 @@ mod tests {
             Msg::None
         );
         assert_eq!(component.get_value(), Payload::Unsigned(3000));
-        assert_eq!(component.render().unwrap().cursor, 4);
+        //assert_eq!(component.render().unwrap().cursor, 4);
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            4
+        );
         // Push a number
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Char('1')))),
             Msg::None
         );
         assert_eq!(component.get_value(), Payload::Unsigned(30001));
-        assert_eq!(component.render().unwrap().cursor, 5);
+        //assert_eq!(component.render().unwrap().cursor, 5);
+        assert_eq!(
+            component
+                .states
+                .render_value(component.props.input_type)
+                .len()
+                + 1,
+            5
+        );
     }
 }

src/ui/layout/components/logbox.rs

@@ -24,14 +24,14 @@
 */
 
 // locals
-use super::{Component, InputEvent, Msg, Payload, Props, PropsBuilder, Render};
+use super::{Canvas, Component, InputEvent, Msg, Payload, Props, PropsBuilder};
 // ext
 use crossterm::event::KeyCode;
 use tui::{
-    layout::Corner,
+    layout::{Corner, Rect},
     style::Style,
     text::{Span, Spans},
-    widgets::{Block, Borders, List, ListItem},
+    widgets::{Block, Borders, List, ListItem, ListState},
 };
 
 // -- states
@@ -134,12 +134,11 @@ impl LogBox {
 impl Component for LogBox {
     /// ### render
     ///
-    /// Based on the current properties and states, return a Widget instance for the Component
+    /// Based on the current properties and states, renders a widget using the provided render engine in the provided Area
-    /// Returns None if the component is hidden
+    /// If focused, cursor is also set (if supported by widget)
-    fn render(&self) -> Option<Render> {
+    #[cfg(not(tarpaulin_include))]
-        match self.props.visible {
+    fn render(&self, render: &mut Canvas, area: Rect) {
-            false => None,
+        if self.props.visible {
-            true => {
             // Make list
             let list_items: Vec<ListItem> = match self.props.texts.table.as_ref() {
                 None => Vec::new(),
@@ -167,9 +166,8 @@ impl Component for LogBox {
                 None => String::new(),
             };
             // Render
-                Some(Render {
+
-                    widget: Box::new(
+            let w = List::new(list_items)
-                        List::new(list_items)
                 .block(
                     Block::default()
                         .borders(Borders::ALL)
@@ -180,13 +178,10 @@ impl Component for LogBox {
                         .title(title),
                 )
                 .start_corner(Corner::BottomLeft)
-                            .highlight_style(
+                .highlight_style(Style::default().add_modifier(self.props.get_modifiers()));
-                                Style::default().add_modifier(self.props.get_modifiers()),
+            let mut state: ListState = ListState::default();
-                            ),
+            state.select(Some(self.states.list_index));
-                    ),
+            render.render_stateful_widget(w, area, &mut state);
-                    cursor: self.states.list_index,
-                })
-            }
         }
     }
 
@@ -317,7 +312,7 @@ mod tests {
         assert_eq!(component.states.focus, false);
         // Increment list index
         component.states.list_index -= 1;
-        assert_eq!(component.render().unwrap().cursor, 0);
+        assert_eq!(component.states.list_index, 0);
         // Update
         component.update(
             component
@@ -342,8 +337,8 @@ mod tests {
         assert_eq!(component.states.list_len, 3);
         // get value
         assert_eq!(component.get_value(), Payload::Unsigned(2));
-        // Render
+        // RenderData
-        assert_eq!(component.render().unwrap().cursor, 2);
+        assert_eq!(component.states.list_index, 2);
         // Set cursor to 0
         component.states.list_index = 0;
         // Handle inputs

src/ui/layout/components/mod.rs

@@ -24,7 +24,7 @@
 */
 
 // imports
-use super::{Component, InputEvent, Msg, Payload, PropValue, Props, PropsBuilder, Render};
+use super::{Canvas, Component, InputEvent, Msg, Payload, PropValue, Props, PropsBuilder};
 
 // exports
 pub mod bookmark_list;

src/ui/layout/components/progress_bar.rs

@@ -24,9 +24,10 @@
 */
 
 // locals
-use super::{Component, InputEvent, Msg, Payload, PropValue, Props, PropsBuilder, Render};
+use super::{Canvas, Component, InputEvent, Msg, Payload, PropValue, Props, PropsBuilder};
 // ext
 use tui::{
+    layout::Rect,
     style::Style,
     widgets::{Block, Borders, Gauge},
 };
@@ -65,9 +66,10 @@ impl ProgressBar {
 impl Component for ProgressBar {
     /// ### render
     ///
-    /// Based on the current properties and states, return a Widget instance for the Component
+    /// Based on the current properties and states, renders a widget using the provided render engine in the provided Area
-    /// Returns None if the component is hidden
+    /// If focused, cursor is also set (if supported by widget)
-    fn render(&self) -> Option<Render> {
+    #[cfg(not(tarpaulin_include))]
+    fn render(&self, render: &mut Canvas, area: Rect) {
         // Make a Span
         if self.props.visible {
             let title: String = match self.props.texts.title.as_ref() {
@@ -88,9 +90,7 @@ impl Component for ProgressBar {
                 _ => 0.0,
             };
             // Make progress bar
-            Some(Render {
+            render.render_widget(
-                cursor: 0,
-                widget: Box::new(
                 Gauge::default()
                     .block(Block::default().borders(Borders::ALL).title(title))
                     .gauge_style(
@@ -101,11 +101,8 @@ impl Component for ProgressBar {
                     )
                     .label(label)
                     .ratio(percentage),
-                ),
+                area,
-            })
+            );
-        } else {
-            // Invisible
-            None
         }
     }
 
@@ -195,8 +192,6 @@ mod tests {
         assert_eq!(component.states.focus, false);
         // Get value
         assert_eq!(component.get_value(), Payload::None);
-        // Render
-        assert_eq!(component.render().unwrap().cursor, 0);
         // Event
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Delete))),

src/ui/layout/components/radio_group.rs

@@ -25,10 +25,11 @@
 
 // locals
 use super::super::props::TextSpan;
-use super::{Component, InputEvent, Msg, Payload, PropValue, Props, PropsBuilder, Render};
+use super::{Canvas, Component, InputEvent, Msg, Payload, PropValue, Props, PropsBuilder};
 // ext
 use crossterm::event::KeyCode;
 use tui::{
+    layout::Rect,
     style::{Color, Style},
     text::Spans,
     widgets::{Block, BorderType, Borders, Tabs},
@@ -113,12 +114,11 @@ impl RadioGroup {
 impl Component for RadioGroup {
     /// ### render
     ///
-    /// Based on the current properties and states, return a Widget instance for the Component
+    /// Based on the current properties and states, renders a widget using the provided render engine in the provided Area
-    /// Returns None if the component is hidden
+    /// If focused, cursor is also set (if supported by widget)
-    fn render(&self) -> Option<Render> {
+    #[cfg(not(tarpaulin_include))]
-        match self.props.visible {
+    fn render(&self, render: &mut Canvas, area: Rect) {
-            false => None,
+        if self.props.visible {
-            true => {
             // Make choices
             let choices: Vec<Spans> = self
                 .states
@@ -139,9 +139,7 @@ impl Component for RadioGroup {
                 Some(t) => t.clone(),
                 None => String::new(),
             };
-                Some(Render {
+            render.render_widget(
-                    cursor: 0,
-                    widget: Box::new(
                 Tabs::new(choices)
                     .block(
                         Block::default()
@@ -158,9 +156,8 @@ impl Component for RadioGroup {
                             .fg(fg)
                             .bg(bg),
                     ),
-                    ),
+                area,
-                })
+            );
-            }
         }
     }
 
@@ -287,8 +284,6 @@ mod tests {
         assert_eq!(component.states.focus, false);
         // Get value
         assert_eq!(component.get_value(), Payload::Unsigned(1));
-        // Render
-        assert_eq!(component.render().unwrap().cursor, 0);
         // Handle events
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Left))),

src/ui/layout/components/table.rs

@@ -24,10 +24,10 @@
 */
 
 // locals
-use super::{Component, InputEvent, Msg, Payload, Props, PropsBuilder, Render};
+use super::{Canvas, Component, InputEvent, Msg, Payload, Props, PropsBuilder};
 // ext
 use tui::{
-    layout::Corner,
+    layout::{Corner, Rect},
     style::Style,
     text::{Span, Spans},
     widgets::{Block, BorderType, Borders, List, ListItem},
@@ -70,9 +70,10 @@ impl Table {
 impl Component for Table {
     /// ### render
     ///
-    /// Based on the current properties and states, return a Widget instance for the Component
+    /// Based on the current properties and states, renders a widget using the provided render engine in the provided Area
-    /// Returns None if the component is hidden
+    /// If focused, cursor is also set (if supported by widget)
-    fn render(&self) -> Option<Render> {
+    #[cfg(not(tarpaulin_include))]
+    fn render(&self, render: &mut Canvas, area: Rect) {
         // Make a Span
         if self.props.visible {
             let title: String = match self.props.texts.title.as_ref() {
@@ -102,9 +103,7 @@ impl Component for Table {
                     .collect(), // Make List item from TextSpan
             };
             // Make list
-            Some(Render {
+            render.render_widget(
-                cursor: 0,
-                widget: Box::new(
                 List::new(list_items)
                     .block(
                         Block::default()
@@ -114,11 +113,8 @@ impl Component for Table {
                             .title(title),
                     )
                     .start_corner(Corner::TopLeft),
-                ),
+                area,
-            })
+            );
-        } else {
-            // Invisible
-            None
         }
     }
 
@@ -214,8 +210,6 @@ mod tests {
         assert_eq!(component.states.focus, false);
         // Get value
         assert_eq!(component.get_value(), Payload::None);
-        // Render
-        assert_eq!(component.render().unwrap().cursor, 0);
         // Event
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Delete))),

src/ui/layout/components/text.rs

@@ -24,9 +24,10 @@
 */
 
 // locals
-use super::{Component, InputEvent, Msg, Payload, Props, PropsBuilder, Render};
+use super::{Canvas, Component, InputEvent, Msg, Payload, Props, PropsBuilder};
 // ext
 use tui::{
+    layout::Rect,
     style::Style,
     text::{Span, Spans, Text as TuiText},
     widgets::Paragraph,
@@ -66,9 +67,10 @@ impl Text {
 impl Component for Text {
     /// ### render
     ///
-    /// Based on the current properties and states, return a Widget instance for the Component
+    /// Based on the current properties and states, renders a widget using the provided render engine in the provided Area
-    /// Returns None if the component is hidden
+    /// If focused, cursor is also set (if supported by widget)
-    fn render(&self) -> Option<Render> {
+    #[cfg(not(tarpaulin_include))]
+    fn render(&self, render: &mut Canvas, area: Rect) {
         // Make a Span
         if self.props.visible {
             let spans: Vec<Span> = match self.props.texts.rows.as_ref() {
@@ -95,13 +97,7 @@ impl Component for Text {
                     .fg(self.props.foreground)
                     .bg(self.props.background),
             );
-            Some(Render {
+            render.render_widget(Paragraph::new(text), area);
-                widget: Box::new(Paragraph::new(text)),
-                cursor: 0,
-            })
-        } else {
-            // Invisible
-            None
         }
     }
 
@@ -199,8 +195,6 @@ mod tests {
         assert_eq!(component.states.focus, false);
         // Get value
         assert_eq!(component.get_value(), Payload::None);
-        // Render
-        assert_eq!(component.render().unwrap().cursor, 0);
         // Event
         assert_eq!(
             component.on(InputEvent::Key(KeyEvent::from(KeyCode::Delete))),

src/ui/layout/mod.rs

@@ -29,11 +29,17 @@ pub mod props;
 pub mod view;
 
 // locals
-use props::{Props, PropsBuilder, PropValue};
+use props::{PropValue, Props, PropsBuilder};
 // ext
 use crossterm::event::Event as InputEvent;
 use crossterm::event::KeyEvent;
-use tui::widgets::Widget;
+use std::io::Stdout;
+use tui::backend::CrosstermBackend;
+use tui::layout::Rect;
+use tui::Frame;
+
+type Backend = CrosstermBackend<Stdout>;
+pub(crate) type Canvas<'a> = Frame<'a, Backend>;
 
 // -- Msg
 
@@ -60,13 +66,12 @@ pub enum Payload {
     None,
 }
 
-// -- Render
+// -- RenderData
 
-/// ## Render
+/// ## RenderData
 ///
-/// Render is the object which contains data related to the component render
+/// RenderData is the object which contains data related to the component render
-pub struct Render {
+pub struct RenderData {
-    pub widget: Box<dyn Widget>, // Widget
     pub cursor: usize, // Cursor position
 }
 
@@ -79,9 +84,9 @@ pub struct Render {
 pub trait Component {
     /// ### render
     ///
-    /// Based on the current properties and states, return a Widget instance for the Component
+    /// Based on the current properties and states, renders the component in the provided area frame
-    /// Returns None if the component is hidden
+    #[cfg(not(tarpaulin_include))]
-    fn render(&self) -> Option<Render>;
+    fn render(&self, frame: &mut Canvas, area: Rect);
 
     /// ### update
     ///

src/ui/layout/view.rs

@@ -24,7 +24,7 @@
 */
 
 // imports
-use super::{Component, InputEvent, Msg, Payload, Props, PropsBuilder, Render};
+use super::{Canvas, Component, InputEvent, Msg, Payload, Props, PropsBuilder, Rect};
 // ext
 use std::collections::HashMap;
 
@@ -83,11 +83,11 @@ impl View {
 
     /// ### render
     ///
-    /// Render component with the provided id
+    /// RenderData component with the provided id
-    pub fn render(&self, id: &str) -> Option<Render> {
+    #[cfg(not(tarpaulin_include))]
-        match self.components.get(id) {
+    pub fn render(&self, id: &str, frame: &mut Canvas, area: Rect) {
-            None => None,
+        if let Some(component) = self.components.get(id) {
-            Some(component) => component.render(),
+            component.render(frame, area);
         }
     }
 
@@ -258,6 +258,7 @@ mod tests {
         assert!(view.components.get(text).is_none());
     }
 
+    /*
     #[test]
     fn test_ui_layout_view_mount_render() {
         let mut view: View = View::init();
@@ -267,6 +268,7 @@ mod tests {
         assert!(view.render(input).is_some());
         assert!(view.render("unexisting").is_none());
     }
+    */
 
     #[test]
     fn test_ui_layout_view_focus() {