perspective_viewer/components/form/
optional_field.rs

1// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
2// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
3// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
4// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
5// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
6// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
7// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
8// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
9// ┃ This file is part of the Perspective library, distributed under the terms ┃
10// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
11// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
12
13use yew::{Callback, Children, Html, MouseEvent, Properties, classes, function_component, html};
14
15#[derive(Properties, PartialEq)]
16pub struct OptionalFieldProps {
17    pub label: String,
18    pub on_check: Callback<MouseEvent>,
19    pub checked: bool,
20    pub children: Children,
21
22    #[prop_or(String::from("section"))]
23    pub class: String,
24
25    #[prop_or_default]
26    pub disabled: bool,
27}
28
29#[function_component(OptionalField)]
30pub fn optional_field(props: &OptionalFieldProps) -> Html {
31    html! {
32        <>
33            <label id={format!("{}-label", props.label)} />
34            <div
35                class={classes!(props.class.clone(), props.checked.then_some("is-default-value"))}
36            >
37                { props.children.clone() }
38                if props.checked {
39                    <span
40                        class="reset-default-style"
41                        onclick={props.on_check.clone()}
42                        id={format!("{}-checkbox", props.label)}
43                    />
44                } else {
45                    <span
46                        class="reset-default-style-disabled"
47                        id={format!("{}-checkbox", props.label)}
48                    />
49                }
50            </div>
51        </>
52    }
53}