feat(components): add the dropdown component

Implement the [Bulma dropdown components][bd] as a [Yew][yew] component. Document them and their properties and add an example showcasing how how it's used. Update the module tree to include the dropdown module and document the new additions to the crate. [bd]: https://bulma.io/documentation/components/dropdown/ [yew]: https://yew.rs Fixes: #33 Signed-off-by: Filip Dutescu <[email protected]>
filipdutescu · Apr 27, 2023 · c103309 · c103309
1 parent 8e71e8b
commit c103309
Show file tree

Hide file tree

Showing 5 changed files with 1,332 additions and 0 deletions.
diff --git a/examples/components_dropdown/Cargo.toml b/examples/components_dropdown/Cargo.toml
@@ -0,0 +1,12 @@
+[package]
+name = "components_dropdown"
+version = "0.1.0"
+edition = "2021"
+authors = ["Filip Dutescu <[email protected]>"]
+license = "MIT OR Apache-2.0"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[dependencies]
+yew = { version = "0.20.0", features = ["csr"] }
+yew-and-bulma = { path = "../../yew-and-bulma" }
diff --git a/examples/components_dropdown/index.html b/examples/components_dropdown/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <title>Yew and Bulma - Dropdown</title>
+
+  <meta charset="utf-8" />
+  <meta name="author" content="Filip-Ioan Dutescu">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@latest/css/bulma.min.css" />
+  <link rel="stylesheet"
+    href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
+  <style>
+    .material-symbols-outlined {
+      font-variation-settings:
+        'FILL' 0,
+        'wght' 400,
+        'GRAD' 0,
+        'opsz' 48
+    }
+  </style>
+</head>
+
+<body></body>
+
+</html>
diff --git a/examples/components_dropdown/src/main.rs b/examples/components_dropdown/src/main.rs
@@ -0,0 +1,145 @@
+use yew::prelude::*;
+use yew_and_bulma::{
+    components::dropdown::{
+        Align, Dropdown, DropdownContent, DropdownDivider, DropdownItem, DropdownMenu,
+        DropdownTrigger,
+    },
+    elements::{block::Block, button::Button, icon::Icon},
+    layout::{container::Container, section::Section},
+};
+
+#[function_component(App)]
+fn app() -> Html {
+    let actives = use_state(|| vec![false, false, false]);
+    let no_actives = actives.len();
+    let onclicks: Vec<_> = (0..no_actives)
+        .map(|i| {
+            let actives = actives.clone();
+
+            Callback::from(move |_| {
+                let mut new_actives = Vec::with_capacity(no_actives);
+                for j in 0..no_actives {
+                    new_actives.push(
+                        actives
+                            .get(j)
+                            .map(|a| if j == i { !*a } else { *a })
+                            .unwrap_or(false),
+                    );
+                }
+
+                actives.set(new_actives);
+            })
+        })
+        .collect();
+
+    html! {
+        <Container>
+            <Section>
+                <Dropdown active={actives[0]} onclick={onclicks[0].clone()}>
+                    <DropdownTrigger>
+                        <Button>
+                            <span>{"Dropdown toggle"}</span>
+                            <Icon icon={html!{
+                                <span class="material-symbols-outlined">{"expand_more"}</span>
+                            }} />
+                        </Button>
+                    </DropdownTrigger>
+
+                    <DropdownMenu>
+                        <DropdownContent>
+                            <DropdownItem>{"One dropdown item"}</DropdownItem>
+                            <DropdownItem active=true>{"A different dropdown item"}</DropdownItem>
+                            <DropdownItem>{"Another dropdown item"}</DropdownItem>
+
+                            <DropdownDivider />
+
+                            <DropdownItem>{"A separate item"}</DropdownItem>
+                        </DropdownContent>
+                    </DropdownMenu>
+                </Dropdown>
+                <Block>{"The above is a normal pagination component, without anything special."}</Block>
+            </Section>
+
+            <Section>
+                <Block>
+                    <Dropdown hoverable=true>
+                        <DropdownTrigger>
+                            <Button>
+                                <span>{"Hoverable dropdown toggle"}</span>
+                                <Icon icon={html!{
+                                    <span class="material-symbols-outlined">{"expand_more"}</span>
+                                }} />
+                            </Button>
+                        </DropdownTrigger>
+
+                        <DropdownMenu>
+                            <DropdownContent>
+                                <DropdownItem>{"One dropdown item"}</DropdownItem>
+                                <DropdownItem active=true>{"A different dropdown item"}</DropdownItem>
+                                <DropdownItem>{"Another dropdown item"}</DropdownItem>
+
+                                <DropdownDivider />
+
+                                <DropdownItem>{"A separate item"}</DropdownItem>
+                            </DropdownContent>
+                        </DropdownMenu>
+                    </Dropdown>
+                </Block>
+                <Block>
+                    <Dropdown active={actives[1]} up=true onclick={onclicks[1].clone()}>
+                        <DropdownTrigger>
+                            <Button>
+                                <span>{"Dropup toggle"}</span>
+                                <Icon icon={html!{
+                                    <span class="material-symbols-outlined">{"expand_more"}</span>
+                                }} />
+                            </Button>
+                        </DropdownTrigger>
+
+                        <DropdownMenu>
+                            <DropdownContent>
+                                <DropdownItem>{"One dropdown item"}</DropdownItem>
+                                <DropdownItem active=true>{"A different dropdown item"}</DropdownItem>
+                                <DropdownItem>{"Another dropdown item"}</DropdownItem>
+
+                                <DropdownDivider />
+
+                                <DropdownItem>{"A separate item"}</DropdownItem>
+                            </DropdownContent>
+                        </DropdownMenu>
+                    </Dropdown>
+                </Block>
+                <Block>
+                    <Dropdown active={actives[2]} align={Align::Right} onclick={onclicks[2].clone()}>
+                        <DropdownTrigger>
+                            <Button>
+                                <span>{"Right-aligned dropdown toggle"}</span>
+                                <Icon icon={html!{
+                                    <span class="material-symbols-outlined">{"expand_more"}</span>
+                                }} />
+                            </Button>
+                        </DropdownTrigger>
+
+                        <DropdownMenu>
+                            <DropdownContent>
+                                <DropdownItem>{"One dropdown item"}</DropdownItem>
+                                <DropdownItem active=true>{"A different dropdown item"}</DropdownItem>
+                                <DropdownItem>{"Another dropdown item"}</DropdownItem>
+
+                                <DropdownDivider />
+
+                                <DropdownItem>{"A separate item"}</DropdownItem>
+                            </DropdownContent>
+                        </DropdownMenu>
+                    </Dropdown>
+                </Block>
+
+                <Block>{"The above are pagination with various modifiers."}</Block>
+            </Section>
+        </Container>
+    }
+}
+
+fn main() {
+    yew::Renderer::<App>::new().render();
+}