[ISSUE #1984]♻️Develop SearchInputWidget for tui🚀

rocketmq-tui/src/rocketmq_tui_app.rs

@@ -28,14 +28,20 @@
 use ratatui::Frame;
 use tokio_stream::StreamExt;
 
+use crate::ui::search_input_widget::SearchInputWidget;
+
 #[derive(Default)]
 pub struct RocketmqTuiApp {
     should_quit: bool,
+    search_input: SearchInputWidget,
 }
 
 impl RocketmqTuiApp {
     pub fn new() -> Self {
-        Self { should_quit: false }
+        Self {
+            should_quit: false,
+            search_input: Default::default(),
+        }
     }
 
     pub fn should_quit(&self) -> bool {
@@ -115,12 +121,7 @@
         let command_args = middle_right_chunks[1];
         let execute_command_result = middle_right_chunks[2];
 
-        frame.render_widget(
-            Block::default()
-                .borders(ratatui::widgets::Borders::ALL)
-                .title("Search"),
-            search,
-        );
+        frame.render_widget(&self.search_input, search);
         frame.render_widget(
             Block::default()
                 .borders(ratatui::widgets::Borders::ALL)

rocketmq-tui/src/ui.rs

@@ -14,4 +14,4 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-mod search_input_widget;
+pub(crate) mod search_input_widget;

rocketmq-tui/src/ui/search_input_widget.rs

@@ -14,12 +14,95 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
+use crossterm::event::KeyCode;
 use ratatui::buffer::Buffer;
 use ratatui::layout::Rect;
+use ratatui::style::Color;
+use ratatui::style::Style;
+use ratatui::text::Line;
+use ratatui::text::Span;
+use ratatui::widgets::Block;
+use ratatui::widgets::Paragraph;
 use ratatui::widgets::Widget;
 
-pub(crate) struct SearchInputWidget;
+#[derive(Default)]
+pub(crate) struct SearchInputWidget {
+    // Whether the widget is focused
+    focused: bool,
 
-impl Widget for &mut SearchInputWidget {
-    fn render(self, area: Rect, buf: &mut Buffer) {}
+    // The input string
+    input: String,
+}
+
+impl SearchInputWidget {
+    pub fn new() -> Self {
+        Self {
+            focused: false,
+            input: String::new(),
+        }
+    }
+
+    pub fn set_input(&mut self, input: String) {
+        self.input = input;
+    }
+
+    pub fn get_input(&self) -> &str {
+        &self.input
+    }
+
+    pub fn get_input_mut(&mut self) -> &mut String {
+        &mut self.input
+    }
+
+    pub fn set_focus(&mut self, focused: bool) {
+        self.focused = focused;
+    }
+
+    pub fn is_focused(&self) -> bool {
+        self.focused
+    }
+
+    pub fn handle_key_event(&mut self, key: KeyCode) {
+        match key {
+            KeyCode::Char(c) => {
+                self.input.push(c);
+            }
+            KeyCode::Backspace => {
+                self.input.pop();
+            }
+            KeyCode::Enter => {
+                // Do nothing
+            }
+            _ => {}
+        }
+    }
+}
+
+impl Widget for &SearchInputWidget {
+    fn render(self, area: Rect, buf: &mut Buffer) {
+        let style = if self.focused {
+            Style::default().fg(Color::Yellow).bg(Color::Black)
+        } else {
+            Style::default().fg(Color::White).bg(Color::Black)
+        };
+
+        let block = Block::default()
+            .borders(ratatui::widgets::Borders::ALL)
+            .title("Search[Press s/S to focus]")
+            .border_style(style);
+        block.render(area, buf);
+
+        let inner_area = Rect {
+            x: area.x + 1,
+            y: area.y + 1,
+            width: area.width - 2,
+            height: area.height - 2,
+        };
+
+        let paragraph = Paragraph::new(Line::from(Span::styled(
+            self.input.as_str(),
+            Style::default().fg(Color::White).bg(Color::Black),
+        )));
+        paragraph.render(inner_area, buf);
+    }
 }