webview: Invoke blur on call hide method for WebView and update example. (#321)

crates/story/src/webview_story.rs

@@ -1,6 +1,6 @@
 use gpui::{
-    div, ClickEvent, FocusHandle, FocusableView, ParentElement as _, Render, Styled as _, View,
-    ViewContext, VisualContext as _, WindowContext,
+    div, px, ClickEvent, FocusHandle, FocusableView, IntoElement, ParentElement as _, Render,
+    Styled as _, View, ViewContext, VisualContext as _, WindowContext,
 };
 use ui::{
     button::Button,
@@ -9,7 +9,7 @@ use ui::{
     theme::ActiveTheme,
     v_flex,
     webview::WebView,
-    IconName,
+    ContextModal, Placement,
 };
 
 pub struct WebViewStory {
@@ -79,6 +79,7 @@ impl WebViewStory {
         self.webview.update(cx, |webview, _| webview.hide())
     }
 
+    #[allow(unused)]
     fn go_back(&mut self, _: &ClickEvent, cx: &mut ViewContext<Self>) {
         self.webview.update(cx, |webview, _| {
             webview.back().unwrap();
@@ -93,28 +94,54 @@ impl FocusableView for WebViewStory {
 }
 
 impl Render for WebViewStory {
-    fn render(&mut self, cx: &mut gpui::ViewContext<Self>) -> impl gpui::IntoElement {
-        v_flex()
-            .p_2()
-            .gap_3()
-            .size_full()
-            .child(
-                h_flex()
-                    .gap_2()
-                    .items_center()
-                    .child(
-                        Button::new("go-back")
-                            .icon(IconName::ArrowLeft)
-                            .on_click(cx.listener(Self::go_back)),
-                    )
-                    .child(self.address_input.clone()),
-            )
-            .child(
-                div()
-                    .size_full()
-                    .border_1()
-                    .border_color(cx.theme().border)
-                    .child(self.webview.clone()),
-            )
+    fn render(&mut self, cx: &mut ViewContext<Self>) -> impl IntoElement {
+        let webview = self.webview.clone();
+        let address_input = self.address_input.clone();
+        div().child(
+            Button::new("show-webview")
+                .label("Open WebView")
+                .on_click(cx.listener(move |_, _: &ClickEvent, cx| {
+                    let webview = webview.clone();
+                    let address_input = address_input.clone();
+
+                    cx.open_drawer(move |this, cx| {
+                        webview.update(cx, |view, _| {
+                            view.show();
+                        });
+
+                        let webview1 = webview.clone();
+                        this.size(px(640.))
+                            .title("WebView")
+                            .placement(Placement::Bottom)
+                            .child(
+                                v_flex()
+                                    .p_2()
+                                    .gap_3()
+                                    .size_full()
+                                    .child(
+                                        h_flex()
+                                            .gap_2()
+                                            .items_center()
+                                            .child(address_input.clone()),
+                                    )
+                                    .child(
+                                        div()
+                                            .flex_1()
+                                            .border_1()
+                                            .h(gpui::px(400.))
+                                            .border_color(cx.theme().border)
+                                            .child(webview.clone()),
+                                    ),
+                            )
+                            .on_close({
+                                move |_, cx| {
+                                    webview1.update(cx, |view, _| {
+                                        view.hide();
+                                    });
+                                }
+                            })
+                    });
+                })),
+        )
     }
 }

crates/ui/src/webview.rs

@@ -20,6 +20,12 @@ pub struct WebView {
     visible: bool,
 }
 
+impl Drop for WebView {
+    fn drop(&mut self) {
+        self.hide();
+    }
+}
+
 impl WebView {
     pub fn new(cx: &mut WindowContext, webview: wry::WebView) -> Self {
         let _ = webview.set_bounds(Rect::default());
@@ -36,7 +42,8 @@ impl WebView {
     }
 
     pub fn hide(&mut self) {
-        let _ = self.webview.set_visible(false);
+        _ = self.webview.blur();
+        _ = self.webview.set_visible(false);
     }
 
     pub fn visible(&self) -> bool {