yew-duskmoon 0.9.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
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131

use web_sys::HtmlTextAreaElement;
use yew::prelude::*;
use yew::virtual_dom::AttrValue;
use yew::TargetCast;

use super::dm_markdown::DmMarkdown;

#[derive(Clone, Copy, PartialEq, Eq)]
pub enum MarkdownInputView {
    Write,
    Preview,
}

#[derive(Properties, Clone, PartialEq)]
pub struct MarkdownInputProps {
    #[prop_or_default]
    pub class: Classes,
    #[prop_or_default]
    pub value: Option<AttrValue>,
    #[prop_or_default]
    pub default_value: AttrValue,
    #[prop_or_default]
    pub placeholder: AttrValue,
    #[prop_or_default]
    pub on_change: Callback<AttrValue>,
    #[prop_or_default]
    pub readonly: bool,
    #[prop_or_default]
    pub auto_size: bool,
    #[prop_or(true)]
    pub preview: bool,
    #[prop_or_default]
    pub variant: Option<String>,
}

#[function_component(MarkdownInput)]
pub fn markdown_input(props: &MarkdownInputProps) -> Html {
    let draft = use_state(|| props.default_value.clone());
    let active_view = use_state(|| MarkdownInputView::Write);
    let current_value = props.value.clone().unwrap_or_else(|| (*draft).clone());

    let onchange = {
        let draft = draft.clone();
        let on_change = props.on_change.clone();
        let controlled = props.value.is_some();

        Callback::from(move |event: InputEvent| {
            let textarea: HtmlTextAreaElement = event.target_unchecked_into();
            let next = AttrValue::from(textarea.value());
            if !controlled {
                draft.set(next.clone());
            }
            on_change.emit(next);
        })
    };

    let show_write = {
        let active_view = active_view.clone();
        Callback::from(move |_| active_view.set(MarkdownInputView::Write))
    };
    let show_preview = {
        let active_view = active_view.clone();
        Callback::from(move |_| active_view.set(MarkdownInputView::Preview))
    };

    let mut classes = classes!("markdown-input");
    if let Some(variant) = &props.variant {
        classes.push(format!("markdown-input-{}", variant));
    }
    classes.push(props.class.clone());

    let is_write = *active_view == MarkdownInputView::Write || !props.preview;

    html! {
        <div class={classes}>
            if props.preview {
                <div class="markdown-input-tabs" role="tablist" aria-label="Markdown editor mode">
                    <button
                        type="button"
                        class={classes!("markdown-input-tab", is_write.then_some("is-active"))}
                        role="tab"
                        aria-selected={is_write.to_string()}
                        onclick={show_write}
                    >
                        { "Write" }
                    </button>
                    <button
                        type="button"
                        class={classes!("markdown-input-tab", (!is_write).then_some("is-active"))}
                        role="tab"
                        aria-selected={(!is_write).to_string()}
                        onclick={show_preview}
                    >
                        { "Preview" }
                    </button>
                </div>
            }

            if is_write {
                <textarea
                    class={field_classes(props.auto_size)}
                    value={current_value.clone()}
                    placeholder={props.placeholder.clone()}
                    readonly={props.readonly}
                    aria-label="Markdown source"
                    oninput={onchange}
                />
            } else {
                <DmMarkdown class="markdown-input-preview" markdown={current_value} />
            }
        </div>
    }
}

fn field_classes(auto_size: bool) -> Classes {
    classes!(
        "markdown-input-field",
        auto_size.then_some("textarea-auto-resize"),
    )
}

#[cfg(test)]
mod tests {
    use super::field_classes;

    #[test]
    fn adds_auto_resize_class_only_when_enabled() {
        assert!(!field_classes(false).contains("textarea-auto-resize"));
        assert!(field_classes(true).contains("textarea-auto-resize"));
    }
}