yew-duskmoon 0.8.2

DuskMoon, a Yew component libaray.
Documentation 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113

use yew::prelude::*;
use yew::virtual_dom::AttrValue;

use super::variants;

#[derive(Properties, Clone, PartialEq)]
pub struct FileUploadProps {
    #[prop_or_default]
    pub class: Classes,
    #[prop_or_default]
    pub children: Children,
    #[prop_or_default]
    pub variant: Option<String>,
    #[prop_or_default]
    pub id: AttrValue,
    #[prop_or_default]
    pub name: AttrValue,
    #[prop_or_default]
    pub accept: AttrValue,
    #[prop_or_default]
    pub multiple: bool,
    #[prop_or_default]
    pub disabled: bool,
    #[prop_or(AttrValue::from("Upload files"))]
    pub title: AttrValue,
    #[prop_or(AttrValue::from("Drag files here or"))]
    pub subtitle: AttrValue,
    #[prop_or(AttrValue::from("browse from your device"))]
    pub browse_label: AttrValue,
    #[prop_or_default]
    pub onchange: Callback<Event>,
}

#[function_component(FileUpload)]
pub fn file_upload(props: &FileUploadProps) -> Html {
    let mut classes = classes!("file-upload");
    if let Some(variant) = &props.variant {
        classes.push(format!("file-upload-{}", variant));
    }
    classes.push(props.class.clone());

    let mut dropzone_classes = classes!("file-upload-dropzone");
    if props.disabled {
        dropzone_classes.push("disabled");
    }

    let dropzone_style = variants::style(
        props.variant.as_deref(),
        "color: var(--component-color, var(--color-primary)); border-color: var(--component-color, var(--color-primary)); background: color-mix(in oklch, var(--component-container, var(--color-surface-container)) 36%, var(--color-surface));",
    );
    let title_style = variants::style(
        props.variant.as_deref(),
        "color: var(--component-color, var(--color-primary));",
    );
    let subtitle_style = variants::style(
        props.variant.as_deref(),
        "color: color-mix(in oklch, var(--component-color, var(--dm-paper)) 58%, var(--dm-paper));",
    );

    html! {
        <div class={classes}>
            <label class={dropzone_classes} style={dropzone_style}>
                <input
                    id={optional_attr(&props.id)}
                    class="file-upload-input"
                    type="file"
                    name={props.name.clone()}
                    accept={props.accept.clone()}
                    multiple={props.multiple}
                    disabled={props.disabled}
                    onchange={props.onchange.clone()}
                />
                <span class="file-upload-icon" aria-hidden="true">{ "File" }</span>
                <div class="file-upload-text">
                    {
                        if props.children.is_empty() {
                            html! {
                                <>
                                    <div class="file-upload-title" style={title_style}>{ props.title.clone() }</div>
                                    <div class="file-upload-subtitle" style={subtitle_style}>
                                        { props.subtitle.clone() }
                                        {
                                            if props.browse_label.is_empty() {
                                                html! {}
                                            } else {
                                                html! {
                                                    <>
                                                        { " " }
                                                        <span class="file-upload-browse">{ props.browse_label.clone() }</span>
                                                    </>
                                                }
                                            }
                                        }
                                    </div>
                                </>
                            }
                        } else {
                            html! { <>{ for props.children.iter() }</> }
                        }
                    }
                </div>
            </label>
        </div>
    }
}

fn optional_attr(value: &AttrValue) -> Option<AttrValue> {
    if value.is_empty() {
        None
    } else {
        Some(value.clone())
    }
}