switch svg and button default to static (lapce#584)

* switch svg and button default to static

* fix linux/clippy

* fix tests

* button view as child, svg update method

* fix linux

* rename

README.md

@@ -19,26 +19,22 @@ _The project is still maturing. We will make occasional breaking changes and add
 ```rust
 use floem::{
     reactive::create_signal,
-    views::{label, ButtonClass, Decorators},
+    views::{button, label, Decorators},
     IntoView,
 };
 
 fn app_view() -> impl IntoView {
     // Create a reactive signal with a counter value, defaulting to 0
-    let (counter, set_counter) = create_signal(0);
+    let (counter, mut set_counter) = create_signal(0);
 
     // Create a vertical layout
     (
         // The counter value updates automatically, thanks to reactivity
-        label(move || format!("Value: {}", counter.get())),
+        label(move || format!("Value: {counter}")),
         // Create a horizontal layout
         (
-            "Increment".class(ButtonClass).on_click_stop(move |_| {
-                set_counter.update(|value| *value += 1);
-            }),
-            "Decrement".class(ButtonClass).on_click_stop(move |_| {
-                set_counter.update(|value| *value -= 1);
-            }),
+            button("Increment").action(move || set_counter += 1),
+            button("Decrement").action(move || set_counter -= 1),
         ),
     ).style(|s| s.flex_col())
 }

examples/counter-simple/src/main.rs

@@ -1,25 +1,21 @@
 use floem::{
-    reactive::{create_signal, SignalGet, SignalUpdate},
-    views::{label, ButtonClass, Decorators},
+    reactive::create_signal,
+    views::{button, label, Decorators},
     IntoView,
 };
 
 fn app_view() -> impl IntoView {
     // Create a reactive signal with a counter value, defaulting to 0
-    let (counter, set_counter) = create_signal(0);
+    let (counter, mut set_counter) = create_signal(0);
 
     // Create a vertical layout
     (
         // The counter value updates automatically, thanks to reactivity
-        label(move || format!("Value: {}", counter.get())),
+        label(move || format!("Value: {counter}")),
         // Create a horizontal layout
         (
-            "Increment".class(ButtonClass).on_click_stop(move |_| {
-                set_counter.update(|value| *value += 1);
-            }),
-            "Decrement".class(ButtonClass).on_click_stop(move |_| {
-                set_counter.update(|value| *value -= 1);
-            }),
+            button("Increment").action(move || set_counter += 1),
+            button("Decrement").action(move || set_counter -= 1),
         ),
     )
         .style(|s| s.flex_col())

examples/dyn-container/src/main.rs

@@ -36,9 +36,7 @@ fn app_view() -> impl IntoView {
     let view = create_rw_signal(ViewSwitcher::One);
 
     v_stack((
-        button(|| "Switch views").on_click_stop(move |_| {
-            view.update(|which| which.toggle());
-        }),
+        button("Switch views").action(move || view.update(|which| which.toggle())),
         dyn_container(move || view.get(), move |which| which.view(view))
             .style(|s| s.border(1).border_radius(5)),
     ))
@@ -59,9 +57,7 @@ fn view_one() -> impl IntoView {
 fn view_two(view: RwSignal<ViewSwitcher>) -> impl IntoView {
     v_stack((
         "Another view",
-        button(|| "Switch back").on_click_stop(move |_| {
-            view.set(ViewSwitcher::One);
-        }),
+        button("Switch back").action(move || view.set(ViewSwitcher::One)),
     ))
     .style(|s| {
         s.column_gap(10.0)

examples/editor/src/main.rs

@@ -50,14 +50,14 @@ fn app_view() -> impl IntoView {
         editor_a,
         editor_b,
         stack((
-            button(|| "Clear").on_click_stop(move |_| {
+            button("Clear").action(move || {
                 doc.edit_single(
                     Selection::region(0, doc.text().len()),
                     "",
                     EditType::DeleteSelection,
                 );
             }),
-            button(|| "Flip Gutter").on_click_stop(move |_| {
+            button("Flip Gutter").action(move || {
                 hide_gutter_a.update(|hide| *hide = !*hide);
                 hide_gutter_b.update(|hide| *hide = !*hide);
             }),

examples/files/src/main.rs

@@ -8,7 +8,7 @@ use floem::{
 
 fn app_view() -> impl IntoView {
     let view = h_stack((
-        button(|| "Select file").on_click_cont(|_| {
+        button("Select file").on_click_cont(|_| {
             open_file(
                 FileDialogOptions::new()
                     .force_starting_directory("/")
@@ -24,7 +24,7 @@ fn app_view() -> impl IntoView {
                 },
             );
         }),
-        button(|| "Select multiple files").on_click_cont(|_| {
+        button("Select multiple files").on_click_cont(|_| {
             open_file(
                 FileDialogOptions::new()
                     .multi_selection()
@@ -40,7 +40,7 @@ fn app_view() -> impl IntoView {
                 },
             );
         }),
-        button(|| "Select folder").on_click_cont(|_| {
+        button("Select folder").on_click_cont(|_| {
             open_file(
                 FileDialogOptions::new()
                     .select_directories()
@@ -52,7 +52,7 @@ fn app_view() -> impl IntoView {
                 },
             );
         }),
-        button(|| "Select multiple folder").on_click_cont(|_| {
+        button("Select multiple folder").on_click_cont(|_| {
             open_file(
                 FileDialogOptions::new()
                     .select_directories()
@@ -65,7 +65,7 @@ fn app_view() -> impl IntoView {
                 },
             );
         }),
-        button(|| "Save file").on_click_cont(|_| {
+        button("Save file").on_click_cont(|_| {
             save_as(
                 FileDialogOptions::new()
                     .default_name("floem.file")

examples/flight_booker/src/main.rs

@@ -77,11 +77,11 @@ pub fn app_view() -> impl IntoView {
         .style(move |s| s.apply_if(!return_date_is_valid(), |s| s.background(Color::RED)))
         .disabled(move || !return_text_is_enabled());
 
-    let book_button = button(|| "Book")
+    let book_button = button("Book")
         .disabled(move || {
             !(dates_are_chronological() && start_date_is_valid() && return_date_is_valid())
         })
-        .on_click_stop(move |_| did_booking.set(true));
+        .action(move || did_booking.set(true));
 
     let success_message = dyn_container(
         move || (did_booking.get(), flight_mode.get()),

examples/layout/src/main.rs

@@ -27,7 +27,7 @@ fn app_view() -> impl IntoView {
         label(move || String::from("Static layouts"))
             .style(|s| s.font_size(30.0).margin_bottom(15.0)),
         list_item(String::from("Left sidebar"), move || {
-            button(|| "Open").on_click_stop(|_| {
+            button("Open").action(|| {
                 new_window(
                     |_| left_sidebar::left_sidebar_view(),
                     Some(
@@ -39,7 +39,7 @@ fn app_view() -> impl IntoView {
             })
         }),
         list_item(String::from("Right sidebar"), move || {
-            button(|| "Open").on_click_stop(|_| {
+            button("Open").action(|| {
                 new_window(
                     |_| right_sidebar::right_sidebar_view(),
                     Some(
@@ -51,7 +51,7 @@ fn app_view() -> impl IntoView {
             })
         }),
         list_item(String::from("Holy grail"), move || {
-            button(|| "Open").on_click_stop(|_| {
+            button("Open").action(|| {
                 new_window(
                     |_| holy_grail::holy_grail_view(),
                     Some(
@@ -65,7 +65,7 @@ fn app_view() -> impl IntoView {
         label(move || String::from("Interactive layouts"))
             .style(|s| s.font_size(30.0).margin_top(15.0).margin_bottom(15.0)),
         list_item(String::from("Tab navigation"), move || {
-            button(|| "Open").on_click_stop(|_| {
+            button("Open").action(|| {
                 new_window(
                     |_| tab_navigation::tab_navigation_view(),
                     Some(
@@ -77,7 +77,7 @@ fn app_view() -> impl IntoView {
             })
         }),
         list_item(String::from("Draggable sidebar"), move || {
-            button(|| "Open").on_click_stop(|_| {
+            button("Open").action(|| {
                 new_window(
                     |_| draggable_sidebar::draggable_sidebar_view(),
                     Some(

examples/syntax-editor/src/main.rs

@@ -228,14 +228,14 @@ mod tests {
     let view = stack((
         editor,
         stack((
-            button(|| "Clear").on_click_stop(move |_| {
+            button("Clear").action(move || {
                 doc.edit_single(
                     Selection::region(0, doc.text().len()),
                     "",
                     EditType::DeleteSelection,
                 );
             }),
-            button(|| "Gutter").on_click_stop(move |_| {
+            button("Gutter").action(move || {
                 hide_gutter.update(|hide| *hide = !*hide);
             }),
         ))

examples/timer/src/main.rs

@@ -54,7 +54,7 @@ fn app_view() -> impl IntoView {
     );
     let elapsed_time_bar = gauge(progress);
 
-    let reset_button = button(|| "Reset").on_click_stop(move |_| elapsed_time.set(Duration::ZERO));
+    let reset_button = button("Reset").action(move || elapsed_time.set(Duration::ZERO));
 
     let view = v_stack((
         stack((text("Elapsed Time: "), elapsed_time_bar)).style(|s| s.justify_between()),

examples/tokio-timer/src/main.rs

@@ -51,7 +51,7 @@ fn app_view() -> impl IntoView {
     );
     let elapsed_time_bar = gauge(progress);
 
-    let reset_button = button(|| "Reset").on_click_stop(move |_| started_at.set(Instant::now()));
+    let reset_button = button("Reset").action(move || started_at.set(Instant::now()));
 
     let view = v_stack((
         stack((text("Elapsed Time: "), elapsed_time_bar)).style(|s| s.justify_between()),

examples/view-transition/src/main.rs

@@ -45,9 +45,7 @@ fn app_view() -> impl IntoView {
     let state = RwSignal::new(ViewSwitcher::One);
 
     v_stack((
-        button(|| "Switch views").on_click_stop(move |_| {
-            state.update(|which| which.toggle());
-        }),
+        button("Switch views").action(move || state.update(|which| which.toggle())),
         h_stack((
             dyn_container(move || state.get(), move |which| which.view(state)),
             empty()
@@ -74,9 +72,7 @@ fn app_view() -> impl IntoView {
 fn view_two(view: RwSignal<ViewSwitcher>) -> impl IntoView {
     v_stack((
         "Another view",
-        button(|| "Switch back").on_click_stop(move |_| {
-            view.set(ViewSwitcher::One);
-        }),
+        button("Switch back").action(move || view.set(ViewSwitcher::One)),
     ))
     .style(|s| {
         s.column_gap(10.0)

examples/view-transition/src/music_player.rs

@@ -69,8 +69,8 @@ impl PlayPause {
     }
     fn view(&self) -> AnyView {
         match self {
-            PlayPause::Play => svg(|| svg::PLAY.to_string()).into_any(),
-            PlayPause::Pause => svg(|| svg::PAUSE.to_string()).into_any(),
+            PlayPause::Play => svg(svg::PLAY).into_any(),
+            PlayPause::Pause => svg(svg::PAUSE).into_any(),
         }
         .animation(|a| Animation::scale_effect(a).run_on_remove(false))
     }
@@ -80,7 +80,7 @@ pub fn music_player() -> impl IntoView {
     let song_info = RwSignal::new(SongInfo::default());
 
     let now_playing = h_stack((
-        svg(|| svg::MUSIC.to_string()).style(|s| s.color(MUSIC_ICON)),
+        svg(svg::MUSIC).style(|s| s.color(MUSIC_ICON)),
         "Now Playing".style(|s| s.font_weight(Weight::MEDIUM)),
     ))
     .style(|s| s.gap(5).items_center());
@@ -93,9 +93,9 @@ pub fn music_player() -> impl IntoView {
     .on_click_stop(move |_| play_pause_state.update(|which| which.toggle()));
 
     let media_buttons = h_stack((
-        container(svg(|| svg::BACKWARD.to_string())).class(ButtonClass),
+        container(svg(svg::BACKWARD)).class(ButtonClass),
         play_pause_button,
-        container(svg(|| svg::BACKWARD.to_string())).class(ButtonClass),
+        container(svg(svg::BACKWARD)).class(ButtonClass),
     ))
     .style(|s| {
         s.align_self(Some(floem::taffy::AlignItems::Center))

examples/widget-gallery/src/buttons.rs

@@ -11,15 +11,11 @@ pub fn button_view() -> impl IntoView {
     form({
         (
             form_item("Basic Button:".to_string(), 120.0, || {
-                button(|| "Click me").on_click_stop(|_| {
-                    println!("Button clicked");
-                })
+                button("Click me").action(|| println!("Button clicked"))
             }),
             form_item("Styled Button:".to_string(), 120.0, || {
-                button(|| "Click me")
-                    .on_click_stop(|_| {
-                        println!("Button clicked");
-                    })
+                button("Click me")
+                    .action(|| println!("Button clicked"))
                     .style(|s| {
                         s.border(1.0)
                             .border_radius(10.0)
@@ -34,12 +30,12 @@ pub fn button_view() -> impl IntoView {
                     })
             }),
             form_item("Disabled Button:".to_string(), 120.0, || {
-                button(|| "Click me").disabled(|| true).on_click_stop(|_| {
-                    println!("Button clicked");
-                })
+                button("Click me")
+                    .disabled(|| true)
+                    .action(|| println!("Button clicked"))
             }),
             form_item("Secondary click button:".to_string(), 120.0, || {
-                button(|| "Right click me").on_secondary_click_stop(|_| {
+                button("Right click me").on_secondary_click_stop(|_| {
                     println!("Secondary mouse button click.");
                 })
             }),

examples/widget-gallery/src/clipboard.rs

@@ -13,21 +13,21 @@ pub fn clipboard_view() -> impl IntoView {
     form({
         (
             form_item("Simple copy".to_string(), 120.0, move || {
-                button(|| "Copy the answer").on_click_stop(move |_| {
+                button("Copy the answer").action(move || {
                     let _ = Clipboard::set_contents("42".to_string());
                 })
             }),
             form_item("Copy from input".to_string(), 120.0, move || {
                 h_stack((
                     text_input(text1).keyboard_navigatable(),
-                    button(|| "Copy").on_click_stop(move |_| {
+                    button("Copy").action(move || {
                         let _ = Clipboard::set_contents(text1.get());
                     }),
                 ))
             }),
             form_item("Get clipboard".to_string(), 120.0, move || {
                 v_stack((
-                    button(|| "Get clipboard").on_click_stop(move |_| {
+                    button("Get clipboard").action(move || {
                         if let Ok(content) = Clipboard::get_contents() {
                             text2.set(content);
                         }

examples/widget-gallery/src/dropdown.rs

@@ -32,10 +32,7 @@ pub fn dropdown_view() -> impl IntoView {
     let main_drop_view = move |item| {
         stack((
             label(move || item),
-            container(
-                svg(|| String::from(CHEVRON_DOWN)).style(|s| s.size(12, 12).color(Color::BLACK)),
-            )
-            .style(|s| {
+            container(svg(CHEVRON_DOWN).style(|s| s.size(12, 12).color(Color::BLACK))).style(|s| {
                 s.items_center()
                     .padding(3.)
                     .border_radius(7.pct())

examples/widget-gallery/src/images.rs

@@ -23,10 +23,10 @@ pub fn img_view() -> impl IntoView {
                 img(move || ferris_png.to_vec()).style(|s| s.width(230.px()).height(153.px()))
             }),
             form_item("SVG(from file):".to_string(), 120.0, move || {
-                svg(move || ferris_svg.to_string()).style(|s| s.width(230.px()).height(153.px()))
+                svg(ferris_svg).style(|s| s.width(230.px()).height(153.px()))
             }),
             form_item("SVG(from string):".to_string(), 120.0, move || {
-                svg(move || svg_str.to_string()).style(|s| s.width(100.px()).height(100.px()))
+                svg(svg_str).style(|s| s.width(100.px()).height(100.px()))
             }),
             form_item("JPG:".to_string(), 120.0, move || {
                 img(move || sunflower.to_vec())

examples/widget-gallery/src/lists.rs

@@ -109,11 +109,11 @@ fn enhanced_list() -> impl IntoView {
 }
 
 fn h_buttons_from_iter() -> impl IntoView {
-    let button_iter = (0..3).map(|i| button(move || format!("Button {}", i)));
+    let button_iter = (0..3).map(|i| button(format!("Button {i}")));
     h_stack_from_iter(button_iter)
 }
 
 fn v_buttons_from_iter() -> impl IntoView {
-    let button_iter = (0..3).map(|i| button(move || format!("Button {}", i)));
+    let button_iter = (0..3).map(|i| button(format!("Button {i}")));
     v_stack_from_iter(button_iter)
 }