vh/termscp
1
0
Fork 0
mirror of https://github.com/veeso/termscp.git synced 2025-12-07 09:36:00 -08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Components will now render and set cursor

Browse Source
This commit is contained in:
veeso
2021-03-14 12:22:50 +01:00
parent 2e3dc7f7a5
commit 2b6f7e4868
12 changed files with 508 additions and 327 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/ui/activities/auth_activity/view.rs
View File

@@ -202,9 +202,7 @@ impl AuthActivity {
let focus: Option<String> = self.view.who_has_focus(); let focus: Option<String> = self.view.who_has_focus();
// Render // Render
// Header // 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]);
}
}); });
} }

99
src/ui/layout/components/bookmark_list.rs
View File

@@ -24,14 +24,14 @@
*/ */
// locals // locals
use super::{Component, InputEvent, Msg, Payload, Props, PropsBuilder, Render}; use super::{Canvas, Component, InputEvent, Msg, Payload, Props, PropsBuilder};
// ext // ext
use crossterm::event::KeyCode; use crossterm::event::KeyCode;
use tui::{ use tui::{
layout::Corner, layout::{Corner, Rect},
style::{Color, Style}, style::{Color, Style},
text::Span, text::Span,
widgets::{Block, Borders, List, ListItem}, widgets::{Block, Borders, List, ListItem, ListState},
}; };
// -- states // -- states
@@ -129,52 +129,51 @@ impl BookmarkList {
impl Component for BookmarkList { impl Component for BookmarkList {
/// ### render /// ### 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
// Make list let list_item: Vec<ListItem> = match self.props.texts.rows.as_ref() {
let list_item: Vec<ListItem> = match self.props.texts.rows.as_ref() { None => vec![],
None => vec![], Some(lines) => lines
Some(lines) => lines .iter()
.iter() .map(|line| ListItem::new(Span::from(line.content.to_string())))
.map(|line| ListItem::new(Span::from(line.content.to_string()))) .collect(),
.collect(), };
}; let (fg, bg): (Color, Color) = match self.states.focus {
let (fg, bg): (Color, Color) = match self.states.focus { true => (Color::Reset, self.props.background),
true => (Color::Reset, self.props.background), false => (Color::Reset, Color::Reset),
false => (Color::Reset, Color::Reset), };
}; let title: String = match self.props.texts.title.as_ref() {
let title: String = match self.props.texts.title.as_ref() { Some(t) => t.clone(),
Some(t) => t.clone(), None => String::new(),
None => String::new(), };
}; // Render
// Render let mut state: ListState = ListState::default();
Some(Render { state.select(Some(self.states.list_index));
widget: Box::new( render.render_stateful_widget(
List::new(list_item) List::new(list_item)
.block( .block(
Block::default() Block::default()
.borders(Borders::ALL) .borders(Borders::ALL)
.border_style(match self.states.focus { .border_style(match self.states.focus {
true => Style::default().fg(self.props.foreground), true => Style::default().fg(self.props.foreground),
false => Style::default(), false => Style::default(),
}) })
.title(title), .title(title),
) )
.start_corner(Corner::TopLeft) .start_corner(Corner::TopLeft)
.highlight_style( .highlight_style(
Style::default() Style::default()
.bg(bg) .bg(bg)
.fg(fg) .fg(fg)
.add_modifier(self.props.get_modifiers()), .add_modifier(self.props.get_modifiers()),
),
), ),
cursor: self.states.list_index, area,
}) &mut state,
} );
} }
} }
@@ -304,7 +303,7 @@ mod tests {
assert_eq!(component.states.focus, false); assert_eq!(component.states.focus, false);
// Increment list index // Increment list index
component.states.list_index += 1; component.states.list_index += 1;
assert_eq!(component.render().unwrap().cursor, 1); assert_eq!(component.states.list_index, 1);
// Update // Update
component.update( component.update(
component component
@@ -325,7 +324,7 @@ mod tests {
// get value // get value
assert_eq!(component.get_value(), Payload::Unsigned(0)); assert_eq!(component.get_value(), Payload::Unsigned(0));
// Render // Render
assert_eq!(component.render().unwrap().cursor, 0); assert_eq!(component.states.list_index, 0);
// Handle inputs // Handle inputs
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Down))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Down))),

99
src/ui/layout/components/file_list.rs
View File

@@ -24,14 +24,14 @@
*/ */
// locals // locals
use super::{Component, InputEvent, Msg, Payload, Props, PropsBuilder, Render}; use super::{Canvas, Component, InputEvent, Msg, Payload, Props, PropsBuilder};
// ext // ext
use crossterm::event::KeyCode; use crossterm::event::KeyCode;
use tui::{ use tui::{
layout::Corner, layout::{Corner, Rect},
style::{Color, Style}, style::{Color, Style},
text::Span, text::Span,
widgets::{Block, Borders, List, ListItem}, widgets::{Block, Borders, List, ListItem, ListState},
}; };
// -- states // -- states
@@ -129,52 +129,51 @@ impl FileList {
impl Component for FileList { impl Component for FileList {
/// ### render /// ### 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
// Make list let list_item: Vec<ListItem> = match self.props.texts.rows.as_ref() {
let list_item: Vec<ListItem> = match self.props.texts.rows.as_ref() { None => vec![],
None => vec![], Some(lines) => lines
Some(lines) => lines .iter()
.iter() .map(|line| ListItem::new(Span::from(line.content.to_string())))
.map(|line| ListItem::new(Span::from(line.content.to_string()))) .collect(),
.collect(), };
}; let (fg, bg): (Color, Color) = match self.states.focus {
let (fg, bg): (Color, Color) = match self.states.focus { true => (Color::Reset, self.props.background),
true => (Color::Reset, self.props.background), false => (self.props.foreground, Color::Reset),
false => (self.props.foreground, Color::Reset), };
}; let title: String = match self.props.texts.title.as_ref() {
let title: String = match self.props.texts.title.as_ref() { Some(t) => t.clone(),
Some(t) => t.clone(), None => String::new(),
None => String::new(), };
}; // Render
// Render let mut state: ListState = ListState::default();
Some(Render { state.select(Some(self.states.list_index));
widget: Box::new( render.render_stateful_widget(
List::new(list_item) List::new(list_item)
.block( .block(
Block::default() Block::default()
.borders(Borders::ALL) .borders(Borders::ALL)
.border_style(match self.states.focus { .border_style(match self.states.focus {
true => Style::default().fg(self.props.foreground), true => Style::default().fg(self.props.foreground),
false => Style::default(), false => Style::default(),
}) })
.title(title), .title(title),
) )
.start_corner(Corner::TopLeft) .start_corner(Corner::TopLeft)
.highlight_style( .highlight_style(
Style::default() Style::default()
.bg(bg) .bg(bg)
.fg(fg) .fg(fg)
.add_modifier(self.props.get_modifiers()), .add_modifier(self.props.get_modifiers()),
),
), ),
cursor: self.states.list_index, area,
}) &mut state,
} );
} }
} }
@@ -304,7 +303,7 @@ mod tests {
assert_eq!(component.states.focus, false); assert_eq!(component.states.focus, false);
// Increment list index // Increment list index
component.states.list_index += 1; component.states.list_index += 1;
assert_eq!(component.render().unwrap().cursor, 1); assert_eq!(component.states.list_index, 1);
// Update // Update
component.update( component.update(
component component
@@ -325,7 +324,7 @@ mod tests {
// get value // get value
assert_eq!(component.get_value(), Payload::Unsigned(0)); assert_eq!(component.get_value(), Payload::Unsigned(0));
// Render // Render
assert_eq!(component.render().unwrap().cursor, 0); assert_eq!(component.states.list_index, 0);
// Handle inputs // Handle inputs
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Down))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Down))),

279
src/ui/layout/components/input.rs
View File

@@ -25,13 +25,15 @@
// locals // locals
use super::super::props::InputType; 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 // ext
use crossterm::event::{KeyCode, KeyModifiers}; use crossterm::event::{KeyCode, KeyModifiers};
use tui::{ use tui::{
layout::Rect,
style::Style, style::Style,
widgets::{Block, BorderType, Borders, Paragraph}, widgets::{Block, BorderType, Borders, Paragraph},
}; };
use unicode_width::UnicodeWidthStr;
// -- states // -- 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 /// ### decr_cursor
/// ///
/// Decrement cursor value by one if possible /// Decrement cursor value by one if possible
@@ -168,9 +184,10 @@ impl Input {
impl Component for Input { impl Component for Input {
/// ### render /// ### 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 { if self.props.visible {
let title: String = match self.props.texts.title.as_ref() { let title: String = match self.props.texts.title.as_ref() {
Some(t) => t.clone(), Some(t) => t.clone(),
@@ -187,12 +204,13 @@ impl Component for Input {
.border_type(BorderType::Rounded) .border_type(BorderType::Rounded)
.title(title), .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(); self.states.incr_cursor();
Msg::None 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) => { KeyCode::Char(ch) => {
// Check if modifiers is NOT CTRL OR ALT // Check if modifiers is NOT CTRL OR ALT
if !key.modifiers.intersects(KeyModifiers::CONTROL) if !key.modifiers.intersects(KeyModifiers::CONTROL)
@@ -336,8 +364,16 @@ mod tests {
assert_eq!(component.states.focus, false); assert_eq!(component.states.focus, false);
// Get value // Get value
assert_eq!(component.get_value(), Payload::Text(String::from("home"))); 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 // Handle events
// Try key with ctrl // Try key with ctrl
assert_eq!( assert_eq!(
@@ -349,21 +385,45 @@ mod tests {
); );
// String shouldn't have changed // String shouldn't have changed
assert_eq!(component.get_value(), Payload::Text(String::from("home"))); 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 // Character
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Char('/')))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Char('/')))),
Msg::None Msg::None
); );
assert_eq!(component.get_value(), Payload::Text(String::from("home/"))); 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) // Verify max length (shouldn't push any character)
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Char('a')))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Char('a')))),
Msg::None Msg::None
); );
assert_eq!(component.get_value(), Payload::Text(String::from("home/"))); 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 // Enter
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Enter))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Enter))),
@@ -375,7 +435,15 @@ mod tests {
Msg::None Msg::None
); );
assert_eq!(component.get_value(), Payload::Text(String::from("home"))); 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 // Check backspace at 0
component.states.input = vec!['h']; component.states.input = vec!['h'];
component.states.cursor = 1; component.states.cursor = 1;
@@ -384,21 +452,45 @@ mod tests {
Msg::None Msg::None
); );
assert_eq!(component.get_value(), Payload::Text(String::from(""))); 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... // Another one...
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Backspace))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Backspace))),
Msg::None Msg::None
); );
assert_eq!(component.get_value(), Payload::Text(String::from(""))); 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 // See del behaviour here
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Delete))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Delete))),
Msg::None Msg::None
); );
assert_eq!(component.get_value(), Payload::Text(String::from(""))); 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 // Check del behaviour
component.states.input = vec!['h', 'e']; component.states.input = vec!['h', 'e'];
component.states.cursor = 1; component.states.cursor = 1;
@@ -407,15 +499,31 @@ mod tests {
Msg::None Msg::None
); );
assert_eq!(component.get_value(), Payload::Text(String::from("h"))); 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
// Another one (should do nothing) assert_eq!(
component
.states
.render_value(component.props.input_type)
.len()
+ 1,
1
);
// Another one (should do nothing)
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Delete))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Delete))),
Msg::None Msg::None
); );
assert_eq!(component.get_value(), Payload::Text(String::from("h"))); 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
// Move cursor right 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.input = vec!['h', 'e', 'l', 'l', 'o'];
component.states.cursor = 1; component.states.cursor = 1;
component.props.input_len = Some(16); // Let's change length component.props.input_len = Some(16); // Let's change length
@@ -423,44 +531,125 @@ mod tests {
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Right))), // between 'e' and 'l' component.on(InputEvent::Key(KeyEvent::from(KeyCode::Right))), // between 'e' and 'l'
Msg::None Msg::None
); );
assert_eq!(component.render().unwrap().cursor, 2); // Should increment //assert_eq!(component.render().unwrap().cursor, 2); // Should increment
// Put a character here assert_eq!(
component
.states
.render_value(component.props.input_type)
.len()
+ 1,
2
);
// Put a character here
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Char('a')))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Char('a')))),
Msg::None Msg::None
); );
assert_eq!(component.get_value(), Payload::Text(String::from("heallo"))); 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 // Move left
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Left))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Left))),
Msg::None Msg::None
); );
assert_eq!(component.render().unwrap().cursor, 2); // Should decrement //assert_eq!(component.render().unwrap().cursor, 2); // Should decrement
// Go at the end assert_eq!(
component
.states
.render_value(component.props.input_type)
.len()
+ 1,
2
);
// Go at the end
component.states.cursor = 6; component.states.cursor = 6;
// Move right // Move right
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Right))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Right))),
Msg::None Msg::None
); );
assert_eq!(component.render().unwrap().cursor, 6); // Should stay //assert_eq!(component.render().unwrap().cursor, 6); // Should stay
// Move left assert_eq!(
component
.states
.render_value(component.props.input_type)
.len()
+ 1,
6
);
// Move left
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Left))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Left))),
Msg::None Msg::None
); );
assert_eq!(component.render().unwrap().cursor, 5); // Should decrement //assert_eq!(component.render().unwrap().cursor, 5); // Should decrement
// Go at the beginning assert_eq!(
component
.states
.render_value(component.props.input_type)
.len()
+ 1,
5
);
// Go at the beginning
component.states.cursor = 0; component.states.cursor = 0;
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Left))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Left))),
Msg::None 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 // 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] #[test]
@@ -482,13 +671,29 @@ mod tests {
Msg::None Msg::None
); );
assert_eq!(component.get_value(), Payload::Unsigned(3000)); 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 // Push a number
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Char('1')))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Char('1')))),
Msg::None Msg::None
); );
assert_eq!(component.get_value(), Payload::Unsigned(30001)); 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
);
} }
} }

111
src/ui/layout/components/logbox.rs
View File

@@ -24,14 +24,14 @@
*/ */
// locals // locals
use super::{Component, InputEvent, Msg, Payload, Props, PropsBuilder, Render}; use super::{Canvas, Component, InputEvent, Msg, Payload, Props, PropsBuilder};
// ext // ext
use crossterm::event::KeyCode; use crossterm::event::KeyCode;
use tui::{ use tui::{
layout::Corner, layout::{Corner, Rect},
style::Style, style::Style,
text::{Span, Spans}, text::{Span, Spans},
widgets::{Block, Borders, List, ListItem}, widgets::{Block, Borders, List, ListItem, ListState},
}; };
// -- states // -- states
@@ -134,59 +134,54 @@ impl LogBox {
impl Component for LogBox { impl Component for LogBox {
/// ### render /// ### 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
// Make list let list_items: Vec<ListItem> = match self.props.texts.table.as_ref() {
let list_items: Vec<ListItem> = match self.props.texts.table.as_ref() { None => Vec::new(),
None => Vec::new(), Some(table) => table
Some(table) => table .iter()
.iter() .map(|row| {
.map(|row| { let columns: Vec<Span> = row
let columns: Vec<Span> = row .iter()
.iter() .map(|col| {
.map(|col| { Span::styled(
Span::styled( col.content.clone(),
col.content.clone(), Style::default()
Style::default() .add_modifier(col.get_modifiers())
.add_modifier(col.get_modifiers()) .fg(col.fg)
.fg(col.fg) .bg(col.bg),
.bg(col.bg), )
) })
}) .collect();
.collect(); ListItem::new(Spans::from(columns))
ListItem::new(Spans::from(columns)) })
.collect(), // Make List item from TextSpan
};
let title: String = match self.props.texts.title.as_ref() {
Some(t) => t.clone(),
None => String::new(),
};
// Render
let w = List::new(list_items)
.block(
Block::default()
.borders(Borders::ALL)
.border_style(match self.states.focus {
true => Style::default().fg(self.props.foreground),
false => Style::default(),
}) })
.collect(), // Make List item from TextSpan .title(title),
}; )
let title: String = match self.props.texts.title.as_ref() { .start_corner(Corner::BottomLeft)
Some(t) => t.clone(), .highlight_style(Style::default().add_modifier(self.props.get_modifiers()));
None => String::new(), let mut state: ListState = ListState::default();
}; state.select(Some(self.states.list_index));
// Render render.render_stateful_widget(w, area, &mut state);
Some(Render {
widget: Box::new(
List::new(list_items)
.block(
Block::default()
.borders(Borders::ALL)
.border_style(match self.states.focus {
true => Style::default().fg(self.props.foreground),
false => Style::default(),
})
.title(title),
)
.start_corner(Corner::BottomLeft)
.highlight_style(
Style::default().add_modifier(self.props.get_modifiers()),
),
),
cursor: self.states.list_index,
})
}
} }
} }
@@ -317,7 +312,7 @@ mod tests {
assert_eq!(component.states.focus, false); assert_eq!(component.states.focus, false);
// Increment list index // Increment list index
component.states.list_index -= 1; component.states.list_index -= 1;
assert_eq!(component.render().unwrap().cursor, 0); assert_eq!(component.states.list_index, 0);
// Update // Update
component.update( component.update(
component component
@@ -342,8 +337,8 @@ mod tests {
assert_eq!(component.states.list_len, 3); assert_eq!(component.states.list_len, 3);
// get value // get value
assert_eq!(component.get_value(), Payload::Unsigned(2)); 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 // Set cursor to 0
component.states.list_index = 0; component.states.list_index = 0;
// Handle inputs // Handle inputs

2
src/ui/layout/components/mod.rs
View File

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

43
src/ui/layout/components/progress_bar.rs
View File

@@ -24,9 +24,10 @@
*/ */
// locals // locals
use super::{Component, InputEvent, Msg, Payload, PropValue, Props, PropsBuilder, Render}; use super::{Canvas, Component, InputEvent, Msg, Payload, PropValue, Props, PropsBuilder};
// ext // ext
use tui::{ use tui::{
layout::Rect,
style::Style, style::Style,
widgets::{Block, Borders, Gauge}, widgets::{Block, Borders, Gauge},
}; };
@@ -65,9 +66,10 @@ impl ProgressBar {
impl Component for ProgressBar { impl Component for ProgressBar {
/// ### render /// ### 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 // Make a Span
if self.props.visible { if self.props.visible {
let title: String = match self.props.texts.title.as_ref() { let title: String = match self.props.texts.title.as_ref() {
@@ -88,24 +90,19 @@ impl Component for ProgressBar {
_ => 0.0, _ => 0.0,
}; };
// Make progress bar // Make progress bar
Some(Render { render.render_widget(
cursor: 0, Gauge::default()
widget: Box::new( .block(Block::default().borders(Borders::ALL).title(title))
Gauge::default() .gauge_style(
.block(Block::default().borders(Borders::ALL).title(title)) Style::default()
.gauge_style( .fg(self.props.foreground)
Style::default() .bg(self.props.background)
.fg(self.props.foreground) .add_modifier(self.props.get_modifiers()),
.bg(self.props.background) )
.add_modifier(self.props.get_modifiers()), .label(label)
) .ratio(percentage),
.label(label) area,
.ratio(percentage), );
),
})
} else {
// Invisible
None
} }
} }
@@ -195,8 +192,6 @@ mod tests {
assert_eq!(component.states.focus, false); assert_eq!(component.states.focus, false);
// Get value // Get value
assert_eq!(component.get_value(), Payload::None); assert_eq!(component.get_value(), Payload::None);
// Render
assert_eq!(component.render().unwrap().cursor, 0);
// Event // Event
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Delete))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Delete))),

95
src/ui/layout/components/radio_group.rs
View File

@@ -25,10 +25,11 @@
// locals // locals
use super::super::props::TextSpan; 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 // ext
use crossterm::event::KeyCode; use crossterm::event::KeyCode;
use tui::{ use tui::{
layout::Rect,
style::{Color, Style}, style::{Color, Style},
text::Spans, text::Spans,
widgets::{Block, BorderType, Borders, Tabs}, widgets::{Block, BorderType, Borders, Tabs},
@@ -113,54 +114,50 @@ impl RadioGroup {
impl Component for RadioGroup { impl Component for RadioGroup {
/// ### render /// ### 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
// Make choices let choices: Vec<Spans> = self
let choices: Vec<Spans> = self .states
.states .choices
.choices .iter()
.iter() .map(|x| Spans::from(x.clone()))
.map(|x| Spans::from(x.clone())) .collect();
.collect(); // Make colors
// Make colors let (bg, fg, block_fg): (Color, Color, Color) = match &self.states.focus {
let (bg, fg, block_fg): (Color, Color, Color) = match &self.states.focus { true => (
true => ( self.props.foreground,
self.props.foreground, self.props.background,
self.props.background, self.props.foreground,
self.props.foreground, ),
false => (Color::Reset, Color::Reset, Color::Reset),
};
let title: String = match &self.props.texts.title {
Some(t) => t.clone(),
None => String::new(),
};
render.render_widget(
Tabs::new(choices)
.block(
Block::default()
.borders(Borders::ALL)
.border_type(BorderType::Rounded)
.style(Style::default().fg(block_fg))
.title(title),
)
.select(self.states.choice)
.style(Style::default())
.highlight_style(
Style::default()
.add_modifier(self.props.get_modifiers())
.fg(fg)
.bg(bg),
), ),
false => (Color::Reset, Color::Reset, Color::Reset), area,
}; );
let title: String = match &self.props.texts.title {
Some(t) => t.clone(),
None => String::new(),
};
Some(Render {
cursor: 0,
widget: Box::new(
Tabs::new(choices)
.block(
Block::default()
.borders(Borders::ALL)
.border_type(BorderType::Rounded)
.style(Style::default().fg(block_fg))
.title(title),
)
.select(self.states.choice)
.style(Style::default())
.highlight_style(
Style::default()
.add_modifier(self.props.get_modifiers())
.fg(fg)
.bg(bg),
),
),
})
}
} }
} }
@@ -287,8 +284,6 @@ mod tests {
assert_eq!(component.states.focus, false); assert_eq!(component.states.focus, false);
// Get value // Get value
assert_eq!(component.get_value(), Payload::Unsigned(1)); assert_eq!(component.get_value(), Payload::Unsigned(1));
// Render
assert_eq!(component.render().unwrap().cursor, 0);
// Handle events // Handle events
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Left))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Left))),

42
src/ui/layout/components/table.rs
View File

@@ -24,10 +24,10 @@
*/ */
// locals // locals
use super::{Component, InputEvent, Msg, Payload, Props, PropsBuilder, Render}; use super::{Canvas, Component, InputEvent, Msg, Payload, Props, PropsBuilder};
// ext // ext
use tui::{ use tui::{
layout::Corner, layout::{Corner, Rect},
style::Style, style::Style,
text::{Span, Spans}, text::{Span, Spans},
widgets::{Block, BorderType, Borders, List, ListItem}, widgets::{Block, BorderType, Borders, List, ListItem},
@@ -70,9 +70,10 @@ impl Table {
impl Component for Table { impl Component for Table {
/// ### render /// ### 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 // Make a Span
if self.props.visible { if self.props.visible {
let title: String = match self.props.texts.title.as_ref() { let title: String = match self.props.texts.title.as_ref() {
@@ -102,23 +103,18 @@ impl Component for Table {
.collect(), // Make List item from TextSpan .collect(), // Make List item from TextSpan
}; };
// Make list // Make list
Some(Render { render.render_widget(
cursor: 0, List::new(list_items)
widget: Box::new( .block(
List::new(list_items) Block::default()
.block( .borders(Borders::ALL)
Block::default() .border_style(Style::default())
.borders(Borders::ALL) .border_type(BorderType::Rounded)
.border_style(Style::default()) .title(title),
.border_type(BorderType::Rounded) )
.title(title), .start_corner(Corner::TopLeft),
) area,
.start_corner(Corner::TopLeft), );
),
})
} else {
// Invisible
None
} }
} }
@@ -214,8 +210,6 @@ mod tests {
assert_eq!(component.states.focus, false); assert_eq!(component.states.focus, false);
// Get value // Get value
assert_eq!(component.get_value(), Payload::None); assert_eq!(component.get_value(), Payload::None);
// Render
assert_eq!(component.render().unwrap().cursor, 0);
// Event // Event
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Delete))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Delete))),

20
src/ui/layout/components/text.rs
View File

@@ -24,9 +24,10 @@
*/ */
// locals // locals
use super::{Component, InputEvent, Msg, Payload, Props, PropsBuilder, Render}; use super::{Canvas, Component, InputEvent, Msg, Payload, Props, PropsBuilder};
// ext // ext
use tui::{ use tui::{
layout::Rect,
style::Style, style::Style,
text::{Span, Spans, Text as TuiText}, text::{Span, Spans, Text as TuiText},
widgets::Paragraph, widgets::Paragraph,
@@ -66,9 +67,10 @@ impl Text {
impl Component for Text { impl Component for Text {
/// ### render /// ### 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 // Make a Span
if self.props.visible { if self.props.visible {
let spans: Vec<Span> = match self.props.texts.rows.as_ref() { let spans: Vec<Span> = match self.props.texts.rows.as_ref() {
@@ -95,13 +97,7 @@ impl Component for Text {
.fg(self.props.foreground) .fg(self.props.foreground)
.bg(self.props.background), .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); assert_eq!(component.states.focus, false);
// Get value // Get value
assert_eq!(component.get_value(), Payload::None); assert_eq!(component.get_value(), Payload::None);
// Render
assert_eq!(component.render().unwrap().cursor, 0);
// Event // Event
assert_eq!( assert_eq!(
component.on(InputEvent::Key(KeyEvent::from(KeyCode::Delete))), component.on(InputEvent::Key(KeyEvent::from(KeyCode::Delete))),

27
src/ui/layout/mod.rs
View File

@@ -29,11 +29,17 @@ pub mod props;
pub mod view; pub mod view;
// locals // locals
use props::{Props, PropsBuilder, PropValue}; use props::{PropValue, Props, PropsBuilder};
// ext // ext
use crossterm::event::Event as InputEvent; use crossterm::event::Event as InputEvent;
use crossterm::event::KeyEvent; 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 // -- Msg
@@ -60,14 +66,13 @@ pub enum Payload {
None, 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
pub cursor: usize, // Cursor position
} }
// -- Component // -- Component
@@ -79,9 +84,9 @@ pub struct Render {
pub trait Component { pub trait Component {
/// ### render /// ### 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 /// ### update
/// ///

14
src/ui/layout/view.rs
View File

@@ -24,7 +24,7 @@
*/ */
// imports // imports
use super::{Component, InputEvent, Msg, Payload, Props, PropsBuilder, Render}; use super::{Canvas, Component, InputEvent, Msg, Payload, Props, PropsBuilder, Rect};
// ext // ext
use std::collections::HashMap; use std::collections::HashMap;
@@ -83,11 +83,11 @@ impl View {
/// ### render /// ### 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()); assert!(view.components.get(text).is_none());
} }
/*
#[test] #[test]
fn test_ui_layout_view_mount_render() { fn test_ui_layout_view_mount_render() {
let mut view: View = View::init(); let mut view: View = View::init();
@@ -267,6 +268,7 @@ mod tests {
assert!(view.render(input).is_some()); assert!(view.render(input).is_some());
assert!(view.render("unexisting").is_none()); assert!(view.render("unexisting").is_none());
} }
*/
#[test] #[test]
fn test_ui_layout_view_focus() { fn test_ui_layout_view_focus() {