Skip to main content

perspective_viewer/ui/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
15use crate::ui::form::intl_label::IntlLabel;
16
17#[derive(Properties, PartialEq)]
18pub struct OptionalFieldProps {
19    pub checked: bool,
20    pub children: Children,
21    pub label: String,
22    pub on_check: Callback<MouseEvent>,
23
24    #[prop_or(String::from("section"))]
25    pub class: String,
26
27    #[prop_or_default]
28    pub disabled: bool,
29}
30
31#[function_component(OptionalField)]
32pub fn optional_field(props: &OptionalFieldProps) -> Html {
33    html! {
34        <>
35            <IntlLabel name={props.label.clone()} />
36            <div
37                class={classes!(props.class.clone(), props.checked.then_some("is-default-value"))}
38            >
39                { props.children.clone() }
40                if props.checked {
41                    <span
42                        class="reset-default-style"
43                        onclick={props.on_check.clone()}
44                        id={format!("{}-checkbox", props.label)}
45                    />
46                } else {
47                    <span
48                        class="reset-default-style-disabled"
49                        id={format!("{}-checkbox", props.label)}
50                    />
51                }
52            </div>
53        </>
54    }
55}