feat: omg what a dumb mistake
This commit is contained in:
1 parent
4a0068f099
commit
f782e14211
15 files changed
+262
-131
No files matched your search
@@ -0,0 +1,71 @@
|
||||
//! Example: Coroutines!
|
||||
//! --------------------
|
||||
//!
|
||||
//! Coroutines are an awesome way to write concurrent code. Dioxus heavily leverages coroutines to make sense of complex
|
||||
//! ongoing asynchronous tasks. The async scheduler of Dioxus supports both single-threaded and multi-threaded coroutines,
|
||||
//! so you can drop in code to run across multiple threads without blocking the main thread.
|
||||
//!
|
||||
//! Dioxus cannot simply abstract away the threading model for the web, unfortunately. If you want to use "web threads"
|
||||
//! you either need to limit support for Chrome, or you need to use a Web Workers and message passing. This is easy enough
|
||||
//! to do in your own code, and doesn't require 1st-party support from Dioxus itself.
|
||||
//!
|
||||
//! UseState and friends work fine with coroutines, but coroutines might be easier to use with the Dirac global state
|
||||
//! management API. This lets you easily drive global state from a coroutine without having to subscribe to the state.
|
||||
//!
|
||||
//! For now, this example shows how to use coroutines used with use_state.
|
||||
//!
|
||||
//!
|
||||
//! ## What is a Couroutine?
|
||||
//!
|
||||
//! A coroutine is a function that can be paused and resumed. It can be paused internally through "await" or externally
|
||||
//! using the `TaskHandle` API. Within a coroutine, you may execute asynchonous code, that modifies values captured when
|
||||
//! the coroutine was initiated. `use_state` always returns the same setter, so you don't need to worry about
|
||||
|
||||
fn main() {
|
||||
dioxus::desktop::launch(App, |c| c);
|
||||
}
|
||||
|
||||
use dioxus::prelude::*;
|
||||
|
||||
static App: FC<()> = |cx| {
|
||||
let p1 = use_state(cx, || 0);
|
||||
let p2 = use_state(cx, || 0);
|
||||
|
||||
let (mut p1_async, mut p2_async) = (p1.for_async(), p2.for_async());
|
||||
let (p1_handle, _) = cx.use_task(|| async move {
|
||||
loop {
|
||||
*p1_async.get_mut() += 1;
|
||||
async_std::task::sleep(std::time::Duration::from_millis(75)).await;
|
||||
}
|
||||
});
|
||||
let (p2_handle, _) = cx.use_task(|| async move {
|
||||
loop {
|
||||
*p2_async.get_mut() += 1;
|
||||
async_std::task::sleep(std::time::Duration::from_millis(100)).await;
|
||||
}
|
||||
});
|
||||
|
||||
cx.render(rsx! {
|
||||
div { style: { width: "400px", height: "400px", position: "relative", background: "yellow" }
|
||||
button { "reset", onclick: move |_| {} }
|
||||
Horsey { pos: *p1, "horsey 1" }
|
||||
Horsey { pos: *p2, "horsey 2" }
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
#[derive(PartialEq, Props)]
|
||||
struct HorseyProps {
|
||||
pos: i32,
|
||||
}
|
||||
|
||||
static Horsey: FC<HorseyProps> = |cx| {
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
button { "pause" }
|
||||
div {
|
||||
{cx.children()}
|
||||
}
|
||||
}
|
||||
})
|
||||
};
|
||||
@@ -0,0 +1,113 @@
|
||||
//! Example: File Explorer
|
||||
//! -------------------------
|
||||
//!
|
||||
//! This is a fun little desktop application that lets you explore the file system.
|
||||
//!
|
||||
//! This example is interesting because it's mixing filesystem operations and GUI, which is typically hard for UI to do.
|
||||
|
||||
use dioxus::desktop::wry::application::dpi::LogicalSize;
|
||||
use dioxus::prelude::*;
|
||||
use std::fs::{self, DirEntry};
|
||||
|
||||
fn main() {
|
||||
env_logger::init();
|
||||
dioxus::desktop::launch(App, |c| {
|
||||
c.with_resizable(false)
|
||||
.with_inner_size(LogicalSize::new(800.0, 400.0))
|
||||
})
|
||||
.unwrap();
|
||||
}
|
||||
|
||||
static App: FC<()> = |cx| {
|
||||
let files = use_state(cx, || Files::new());
|
||||
|
||||
let file_list = files.path_names.iter().enumerate().map(|(dir_id, path)| {
|
||||
rsx! (
|
||||
li { a {"{path}", onclick: move |_| files.get_mut().enter_dir(dir_id), href: "#"} }
|
||||
)
|
||||
});
|
||||
|
||||
let err_disp = files.err.as_ref().map(|err| {
|
||||
rsx! {
|
||||
div {
|
||||
code {"{err}"}
|
||||
button {"x", onclick: move |_| files.get_mut().clear_err() }
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
let cur = files.current();
|
||||
cx.render(rsx! {
|
||||
div {
|
||||
h1 {"Files: "}
|
||||
h3 {"Cur dir: {cur}"}
|
||||
button { "go up", onclick: move |_| files.get_mut().go_up() }
|
||||
ol { {file_list} }
|
||||
{err_disp}
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
// right now, this gets cloned every time. It might be a bit better to use im_rc's collections instead
|
||||
#[derive(Clone)]
|
||||
struct Files {
|
||||
path_stack: Vec<String>,
|
||||
path_names: Vec<String>,
|
||||
err: Option<String>,
|
||||
}
|
||||
|
||||
impl Files {
|
||||
fn new() -> Self {
|
||||
let mut files = Self {
|
||||
path_stack: vec!["./".to_string()],
|
||||
path_names: vec![],
|
||||
err: None,
|
||||
};
|
||||
|
||||
files.reload_path_list();
|
||||
|
||||
files
|
||||
}
|
||||
|
||||
fn reload_path_list(&mut self) {
|
||||
let cur_path = self.path_stack.last().unwrap();
|
||||
let paths = match fs::read_dir(cur_path) {
|
||||
Ok(e) => e,
|
||||
Err(err) => {
|
||||
let err = format!("An error occured: {:?}", err);
|
||||
self.err = Some(err);
|
||||
self.path_stack.pop();
|
||||
return;
|
||||
}
|
||||
};
|
||||
|
||||
// clear the current state
|
||||
self.clear_err();
|
||||
self.path_names.clear();
|
||||
|
||||
for path in paths {
|
||||
self.path_names
|
||||
.push(path.unwrap().path().display().to_string());
|
||||
}
|
||||
}
|
||||
|
||||
fn go_up(&mut self) {
|
||||
if self.path_stack.len() > 1 {
|
||||
self.path_stack.pop();
|
||||
}
|
||||
self.reload_path_list();
|
||||
}
|
||||
|
||||
fn enter_dir(&mut self, dir_id: usize) {
|
||||
let path = &self.path_names[dir_id];
|
||||
self.path_stack.push(path.clone());
|
||||
self.reload_path_list();
|
||||
}
|
||||
|
||||
fn current(&self) -> &str {
|
||||
self.path_stack.last().unwrap()
|
||||
}
|
||||
fn clear_err(&mut self) {
|
||||
self.err = None;
|
||||
}
|
||||
}
|
||||
+7
-2
@@ -17,12 +17,17 @@
|
||||
|
||||
use dioxus::events::on::*;
|
||||
use dioxus::prelude::*;
|
||||
use dioxus_desktop::wry::application::dpi::LogicalSize;
|
||||
|
||||
const STYLE: &str = include_str!("./assets/calculator.css");
|
||||
fn main() {
|
||||
env_logger::init();
|
||||
dioxus::desktop::launch(App, |cfg| cfg.with_title("Calculator Demo"))
|
||||
.expect("failed to launch dioxus app");
|
||||
dioxus::desktop::launch(App, |cfg| {
|
||||
cfg.with_title("Calculator Demo")
|
||||
.with_resizable(false)
|
||||
.with_inner_size(LogicalSize::new(320.0, 530.0))
|
||||
})
|
||||
.expect("failed to launch dioxus app");
|
||||
}
|
||||
|
||||
static App: FC<()> = |cx| {
|
||||
|
||||
Reference in new issue
Block a user