first release - 0.1.0

AircastDev · Dec 19, 2020 · c26bd46 · c26bd46
commit c26bd46
Show file tree

Hide file tree

Showing 7 changed files with 397 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+target/
+dist/
+Cargo.lock
diff --git a/Cargo.toml b/Cargo.toml
@@ -0,0 +1,19 @@
+[package]
+name = "yew-virtual-scroller"
+version = "0.1.0"
+authors = ["James Birtles <[email protected]>"]
+edition = "2018"
+description = "A Yew component for virtual scrolling / scroll windowing"
+license = "MIT OR Apache-2.0"
+readme = "README.md"
+repository = "https://github.com/AircastDev/yew-virtual-scroller"
+keywords = ["yew", "component", "windowing"]
+categories = ["wasm"]
+
+[dependencies]
+web-sys = { version = "0.3", features = ["Element", "DomRect"] }
+yew = "0.17"
+yew-component-size = "0.1"
+
+[dev-dependencies]
+wee_alloc = "0.4"
diff --git a/README.md b/README.md
@@ -0,0 +1,59 @@
+# yew-virtual-scroller
+
+![Crates.io](https://img.shields.io/crates/l/yew-virtual-scroller) ![Crates.io](https://img.shields.io/crates/v/yew-virtual-scroller)
+
+A Yew component for virtual scrolling / scroll windowing -- Only renders the visible content into the dom.
+
+## Example:
+```rust
+struct MyItem { value: usize }
+
+impl From<MyItem> for yew::Html {
+    fn from(item: MyItem) -> Self {
+        html! {
+            // Each item must be the same height.
+            <div key={item.value} style="height: 32px;">
+                {format!("Item: {}", item.value)}
+            </div>
+        }
+    }
+}
+
+fn view(&self) -> yew::Html {
+    // Items is wrapped with an Rc to avoid cloning large lists.
+    let items = Rc::clone(&self.items);
+    html! {
+        <div>
+            <style>{"
+                /* Scroller should be constrained in some way so it can scroll */
+                .scroller {
+                    height: 600px;
+                }
+            "}</style>
+
+            <VirtualScroller<MyItem>
+                items={items}
+                row_height={32.0}
+                class=Classes::from("scroller")
+            />
+        </div>
+    }
+}
+```
+
+## License
+
+Licensed under either of
+
+ * Apache License, Version 2.0
+   ([LICENSE-APACHE](LICENSE-APACHE) or http://www.apache.org/licenses/LICENSE-2.0)
+ * MIT license
+   ([LICENSE-MIT](LICENSE-MIT) or http://opensource.org/licenses/MIT)
+
+at your option.
+
+## Contribution
+
+Unless you explicitly state otherwise, any contribution intentionally submitted
+for inclusion in the work by you, as defined in the Apache-2.0 license, shall be
+dual licensed as above, without any additional terms or conditions.
diff --git a/examples/basic/Cargo.toml b/examples/basic/Cargo.toml
@@ -0,0 +1,10 @@
+[package]
+name = "yew-virtual-scroller-example"
+version = "0.1.0"
+authors = ["James Birtles <[email protected]>"]
+edition = "2018"
+
+[dependencies]
+yew = "0.17"
+wee_alloc = "0.4"
+yew-virtual-scroller = { path = "../../" }
diff --git a/examples/basic/index.html b/examples/basic/index.html
@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <meta charset="utf-8" />
+    <title>Yew Virtual Scroller</title>
+</head>
+
+</html>
diff --git a/examples/basic/src/main.rs b/examples/basic/src/main.rs
@@ -0,0 +1,74 @@
+use std::rc::Rc;
+use yew::prelude::*;
+use yew_virtual_scroller::VirtualScroller;
+
+#[global_allocator]
+static ALLOC: wee_alloc::WeeAlloc = wee_alloc::WeeAlloc::INIT;
+
+struct Example {
+    items: Rc<Vec<ExampleItem>>,
+}
+
+impl Component for Example {
+    type Message = ();
+    type Properties = ();
+
+    fn create(_: Self::Properties, _: ComponentLink<Self>) -> Self {
+        Self {
+            items: Rc::new((1..20000).map(ExampleItem::new).collect()),
+        }
+    }
+
+    fn update(&mut self, _msg: Self::Message) -> ShouldRender {
+        true
+    }
+
+    fn change(&mut self, _props: Self::Properties) -> ShouldRender {
+        false
+    }
+
+    fn view(&self) -> Html {
+        let items = Rc::clone(&self.items);
+        html! {
+            <div>
+                <style>{"
+                    .scroller {
+                        height: 600px;
+                    }
+
+                    .list-item {
+                        height: 32px;
+                    }
+                "}</style>
+
+                <h1>{"Yew Virtual Scroller Example"}</h1>
+                <VirtualScroller<ExampleItem> items={items} row_height={32.0} class=Classes::from("scroller") />
+            </div>
+        }
+    }
+}
+
+#[derive(Debug, Clone, PartialEq)]
+struct ExampleItem {
+    value: usize,
+}
+
+impl ExampleItem {
+    pub fn new(value: usize) -> Self {
+        ExampleItem { value }
+    }
+}
+
+impl From<ExampleItem> for yew::Html {
+    fn from(item: ExampleItem) -> Self {
+        html! {
+            <div key={item.value} class="list-item">
+                {format!("Item: {}", item.value)}
+            </div>
+        }
+    }
+}
+
+pub fn main() {
+    App::<Example>::new().mount_to_body();
+}