@perspective-dev/viewer 4.0.0

package/src/rust/components/containers/trap_door_panel.rs

@@ -0,0 +1,50 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use yew::*;
+
+#[derive(Properties)]
+pub struct TrapDoorPanelProps {
+    pub id: Option<&'static str>,
+    pub class: Option<&'static str>,
+    pub children: Children,
+}
+
+impl PartialEq for TrapDoorPanelProps {
+    fn eq(&self, _other: &Self) -> bool {
+        false
+    }
+}
+
+/// A simple panel with an invisible inner `<div>` which stretches to fit the
+/// width of the container, but will not shrink (unless the state is reset).
+#[function_component(TrapDoorPanel)]
+pub fn trap_door_panel(props: &TrapDoorPanelProps) -> Html {
+    let sizer = use_node_ref();
+    let width = use_state_eq(|| 0.0);
+    use_effect_with((width.setter(), sizer.clone()), |(width, sizer)| {
+        width.set(
+            sizer
+                .cast::<web_sys::HtmlElement>()
+                .unwrap()
+                .get_bounding_client_rect()
+                .width(),
+        )
+    });
+
+    html! {
+        <div id={props.id} class={props.class} ref={sizer}>
+            { props.children.clone() }
+            <div class="scroll-panel-auto-width" style={format!("width:{}px", *width)} />
+        </div>
+    }
+}

package/src/rust/components/copy_dropdown.rs

@@ -0,0 +1,136 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use std::rc::Rc;
+
+use yew::prelude::*;
+
+use super::containers::dropdown_menu::*;
+use super::modal::*;
+use super::style::StyleProvider;
+use crate::model::*;
+use crate::renderer::*;
+use crate::utils::*;
+
+pub type CopyDropDownMenuMsg = DropDownMenuMsg;
+pub type CopyDropDownMenuItem = DropDownMenuItem<ExportFile>;
+
+#[derive(Properties, PartialEq)]
+pub struct CopyDropDownMenuProps {
+    pub renderer: Renderer,
+    pub callback: Callback<ExportFile>,
+    pub root: web_sys::HtmlElement,
+
+    #[prop_or_default]
+    weak_link: WeakScope<CopyDropDownMenu>,
+}
+
+pub struct CopyDropDownMenu {
+    _sub: Subscription,
+}
+
+impl ModalLink<CopyDropDownMenu> for CopyDropDownMenuProps {
+    fn weak_link(&self) -> &'_ WeakScope<CopyDropDownMenu> {
+        &self.weak_link
+    }
+}
+
+impl Component for CopyDropDownMenu {
+    type Message = CopyDropDownMenuMsg;
+    type Properties = CopyDropDownMenuProps;
+
+    fn view(&self, ctx: &Context<Self>) -> yew::virtual_dom::VNode {
+        let plugin = ctx.props().renderer.get_active_plugin().unwrap();
+        // let has_render = js_sys::Reflect::has(&plugin,
+        // js_intern::js_intern!("render")).unwrap();
+        let is_chart = plugin.name().as_str() != "Datagrid";
+        let has_selection = ctx.props().renderer.get_selection().is_some();
+        html! {
+            <StyleProvider root={ctx.props().root.clone()}>
+                <DropDownMenu<ExportFile>
+                    values={Rc::new(get_menu_items(is_chart, has_selection))}
+                    callback={&ctx.props().callback}
+                />
+            </StyleProvider>
+        }
+    }
+
+    fn update(&mut self, _ctx: &Context<Self>, _msg: Self::Message) -> bool {
+        true
+    }
+
+    fn create(ctx: &Context<Self>) -> Self {
+        ctx.set_modal_link();
+        let _sub = ctx
+            .props()
+            .renderer
+            .plugin_changed
+            .add_listener(ctx.link().callback(|_| ()));
+
+        Self { _sub }
+    }
+}
+
+fn get_menu_items(is_chart: bool, has_selection: bool) -> Vec<CopyDropDownMenuItem> {
+    let mut items = vec![
+        CopyDropDownMenuItem::OptGroup(
+            "Current View".into(),
+            if is_chart {
+                vec![
+                    ExportMethod::Csv.new_file("clipboard", is_chart),
+                    ExportMethod::Json.new_file("clipboard", is_chart),
+                    ExportMethod::Ndjson.new_file("clipboard", is_chart),
+                    ExportMethod::Plugin.new_file("clipboard", is_chart),
+                ]
+            } else {
+                vec![
+                    ExportMethod::Csv.new_file("clipboard", is_chart),
+                    ExportMethod::Json.new_file("clipboard", is_chart),
+                    ExportMethod::Ndjson.new_file("clipboard", is_chart),
+                ]
+            },
+        ),
+        CopyDropDownMenuItem::OptGroup("All".into(), vec![
+            ExportMethod::CsvAll.new_file("clipboard", is_chart),
+            ExportMethod::JsonAll.new_file("clipboard", is_chart),
+            ExportMethod::NdjsonAll.new_file("clipboard", is_chart),
+        ]),
+        CopyDropDownMenuItem::OptGroup("Config".into(), vec![
+            ExportMethod::JsonConfig.new_file("clipboard", is_chart),
+        ]),
+    ];
+
+    if has_selection {
+        items.insert(
+            0,
+            CopyDropDownMenuItem::OptGroup(
+                "Current Selection".into(),
+                if is_chart {
+                    vec![
+                        ExportMethod::CsvSelected.new_file("clipboard", is_chart),
+                        ExportMethod::JsonSelected.new_file("clipboard", is_chart),
+                        ExportMethod::NdjsonSelected.new_file("clipboard", is_chart),
+                    ]
+                } else {
+                    vec![
+                        ExportMethod::CsvSelected.new_file("clipboard", is_chart),
+                        ExportMethod::JsonSelected.new_file("clipboard", is_chart),
+                        ExportMethod::NdjsonSelected.new_file("clipboard", is_chart),
+                        ExportMethod::Plugin.new_file("clipboard", is_chart),
+                    ]
+                },
+            ),
+        )
+    }
+
+    items
+}

package/src/rust/components/datetime_column_style/custom.rs

@@ -0,0 +1,222 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use std::rc::Rc;
+
+use yew::prelude::*;
+
+use crate::components::form::number_field::NumberField;
+use crate::components::form::select_field::SelectValueField;
+use crate::components::modal::{ModalLink, SetModalLink};
+use crate::config::*;
+use crate::utils::WeakScope;
+
+pub enum DatetimeStyleCustomMsg {
+    FractionalSeconds(Option<f64>),
+    Year(CustomDatetimeFormat),
+    Month(CustomDatetimeFormat),
+    Day(CustomDatetimeFormat),
+    Weekday(CustomDatetimeFormat),
+    Hour(CustomDatetimeFormat),
+    Minute(CustomDatetimeFormat),
+    Second(CustomDatetimeFormat),
+    Hour12(bool),
+}
+
+#[derive(Properties)]
+pub struct DatetimeStyleCustomProps {
+    pub enable_time_config: bool,
+
+    pub config: CustomDatetimeStyleConfig,
+
+    #[prop_or_default]
+    pub on_change: Callback<CustomDatetimeStyleConfig>,
+
+    #[prop_or_default]
+    weak_link: WeakScope<DatetimeStyleCustom>,
+}
+
+impl ModalLink<DatetimeStyleCustom> for DatetimeStyleCustomProps {
+    fn weak_link(&self) -> &'_ WeakScope<DatetimeStyleCustom> {
+        &self.weak_link
+    }
+}
+
+impl PartialEq for DatetimeStyleCustomProps {
+    fn eq(&self, _other: &Self) -> bool {
+        false
+    }
+}
+
+/// The custom variation of the options parameter for `Intl.DatetimeFormat`.
+/// Complement to `DatetimeStyleSimple`.
+pub struct DatetimeStyleCustom {
+    config: CustomDatetimeStyleConfig,
+}
+
+impl DatetimeStyleCustom {
+    fn dispatch_config(&self, ctx: &Context<Self>) {
+        ctx.props().on_change.emit(self.config.clone());
+    }
+}
+
+impl Component for DatetimeStyleCustom {
+    type Message = DatetimeStyleCustomMsg;
+    type Properties = DatetimeStyleCustomProps;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        ctx.set_modal_link();
+        Self {
+            config: ctx.props().config.clone(),
+        }
+    }
+
+    // Always re-render when config changes.
+    fn changed(&mut self, ctx: &Context<Self>, _old: &Self::Properties) -> bool {
+        let mut new_config = ctx.props().config.clone();
+        if self.config != new_config {
+            std::mem::swap(&mut self.config, &mut new_config);
+            true
+        } else {
+            false
+        }
+    }
+
+    // TODO could be more conservative here with re-rendering
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            DatetimeStyleCustomMsg::Year(year) => {
+                self.config.year = year;
+                self.dispatch_config(ctx);
+                true
+            },
+            DatetimeStyleCustomMsg::Month(month) => {
+                self.config.month = month;
+                self.dispatch_config(ctx);
+                true
+            },
+            DatetimeStyleCustomMsg::Day(day) => {
+                self.config.day = day;
+                self.dispatch_config(ctx);
+                true
+            },
+            DatetimeStyleCustomMsg::Weekday(weekday) => {
+                self.config.weekday = weekday;
+                self.dispatch_config(ctx);
+                true
+            },
+            DatetimeStyleCustomMsg::Hour(hour) => {
+                self.config.hour = hour;
+                self.dispatch_config(ctx);
+                true
+            },
+            DatetimeStyleCustomMsg::Minute(minute) => {
+                self.config.minute = minute;
+                self.dispatch_config(ctx);
+                true
+            },
+            DatetimeStyleCustomMsg::Second(second) => {
+                self.config.second = second;
+                self.dispatch_config(ctx);
+                true
+            },
+            DatetimeStyleCustomMsg::FractionalSeconds(fractional) => {
+                self.config.fractional_seconds = fractional.unwrap_or_default().floor() as u32;
+                self.dispatch_config(ctx);
+                true
+            },
+            DatetimeStyleCustomMsg::Hour12(hour12) => {
+                self.config.hour12 = hour12;
+                self.dispatch_config(ctx);
+                true
+            },
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        let all_values = Rc::new(Vec::from(CustomDatetimeFormat::values()));
+        let number_values = Rc::new(Vec::from(CustomDatetimeFormat::values_1()));
+        let text_values = Rc::new(Vec::from(CustomDatetimeFormat::values_2()));
+        type SelectStrField = SelectValueField<&'static str>;
+        html! {
+            <>
+                if ctx.props().enable_time_config {
+                    <SelectValueField<CustomDatetimeFormat>
+                        label="year"
+                        values={number_values.clone()}
+                        default_value={CustomDatetimeFormat::TwoDigit}
+                        on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Year(x.unwrap_or(CustomDatetimeFormat::TwoDigit)))}
+                        current_value={self.config.year}
+                    />
+                    <SelectValueField<CustomDatetimeFormat>
+                        label="month"
+                        values={all_values.clone()}
+                        default_value={CustomDatetimeFormat::Numeric}
+                        on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Month(x.unwrap_or(CustomDatetimeFormat::Numeric)))}
+                        current_value={self.config.month}
+                    />
+                    <SelectValueField<CustomDatetimeFormat>
+                        label="day"
+                        values={number_values.clone()}
+                        default_value={CustomDatetimeFormat::Numeric}
+                        on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Day(x.unwrap_or(CustomDatetimeFormat::Numeric)))}
+                        current_value={self.config.day}
+                    />
+                    <SelectValueField<CustomDatetimeFormat>
+                        label="weekday"
+                        values={text_values.clone()}
+                        default_value={CustomDatetimeFormat::Disabled}
+                        on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Weekday(x.unwrap_or(CustomDatetimeFormat::Disabled)))}
+                        current_value={self.config.weekday}
+                    />
+                    <SelectValueField<CustomDatetimeFormat>
+                        label="hour"
+                        values={number_values.clone()}
+                        default_value={CustomDatetimeFormat::Numeric}
+                        on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Hour(x.unwrap_or(CustomDatetimeFormat::Numeric)))}
+                        current_value={self.config.hour}
+                    />
+                    <SelectValueField<CustomDatetimeFormat>
+                        label="minute"
+                        values={number_values.clone()}
+                        default_value={CustomDatetimeFormat::Numeric}
+                        on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Minute(x.unwrap_or(CustomDatetimeFormat::Numeric)))}
+                        current_value={self.config.minute}
+                    />
+                    <SelectValueField<CustomDatetimeFormat>
+                        label="second"
+                        values={number_values.clone()}
+                        default_value={CustomDatetimeFormat::Numeric}
+                        on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Second(x.unwrap_or(CustomDatetimeFormat::Numeric)))}
+                        current_value={self.config.second}
+                    />
+                    <NumberField
+                        label="fractional-seconds"
+                        min=0.
+                        max=3.
+                        step=1.
+                        default=0.
+                        current_value={self.config.fractional_seconds as f64}
+                        on_change={ctx.link().callback(DatetimeStyleCustomMsg::FractionalSeconds)}
+                    />
+                    <SelectStrField
+                        label="hours"
+                        values={Rc::new(vec!["12 Hour", "24 Hour"])}
+                        default_value="12 Hour"
+                        on_change={ctx.link().callback(|x: Option<_>| DatetimeStyleCustomMsg::Hour12(x != Some("24 Hour") ))}
+                        current_value={if self.config.hour12 { "12 Hour" } else { "24 Hour" }}
+                    />
+                }
+            </>
+        }
+    }
+}

package/src/rust/components/datetime_column_style/simple.rs

@@ -0,0 +1,122 @@
+// ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
+// ┃ ██████ ██████ ██████       █      █      █      █      █ █▄  ▀███ █       ┃
+// ┃ ▄▄▄▄▄█ █▄▄▄▄▄ ▄▄▄▄▄█  ▀▀▀▀▀█▀▀▀▀▀ █ ▀▀▀▀▀█ ████████▌▐███ ███▄  ▀█ █ ▀▀▀▀▀ ┃
+// ┃ █▀▀▀▀▀ █▀▀▀▀▀ █▀██▀▀ ▄▄▄▄▄ █ ▄▄▄▄▄█ ▄▄▄▄▄█ ████████▌▐███ █████▄   █ ▄▄▄▄▄ ┃
+// ┃ █      ██████ █  ▀█▄       █ ██████      █      ███▌▐███ ███████▄ █       ┃
+// ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫
+// ┃ Copyright (c) 2017, the Perspective Authors.                              ┃
+// ┃ ╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌╌ ┃
+// ┃ This file is part of the Perspective library, distributed under the terms ┃
+// ┃ of the [Apache License 2.0](https://www.apache.org/licenses/LICENSE-2.0). ┃
+// ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛
+
+use yew::prelude::*;
+
+use crate::components::form::select_field::SelectEnumField;
+use crate::components::modal::{ModalLink, SetModalLink};
+use crate::config::*;
+use crate::utils::WeakScope;
+
+pub enum DatetimeStyleSimpleMsg {
+    DateStyleChanged(Option<SimpleDatetimeFormat>),
+    TimeStyleChanged(Option<SimpleDatetimeFormat>),
+}
+
+#[derive(Properties)]
+pub struct DatetimeStyleSimpleProps {
+    pub enable_time_config: bool,
+
+    pub config: SimpleDatetimeStyleConfig,
+
+    #[prop_or_default]
+    pub on_change: Callback<SimpleDatetimeStyleConfig>,
+
+    #[prop_or_default]
+    weak_link: WeakScope<DatetimeStyleSimple>,
+}
+
+impl ModalLink<DatetimeStyleSimple> for DatetimeStyleSimpleProps {
+    fn weak_link(&self) -> &'_ WeakScope<DatetimeStyleSimple> {
+        &self.weak_link
+    }
+}
+
+impl PartialEq for DatetimeStyleSimpleProps {
+    fn eq(&self, _other: &Self) -> bool {
+        false
+    }
+}
+
+/// `DatetimeStyleSimple` represents the variation of the options parameter to
+/// `Intl.DatetimeFormat()` which supports `timeStyle` and `dateStyle`. These
+/// options are mutually exclusive with those of `DatetimeStyleCustom`, hence
+/// the two-struct model for this options parameter.
+pub struct DatetimeStyleSimple {
+    config: SimpleDatetimeStyleConfig,
+}
+
+impl DatetimeStyleSimple {
+    /// When this config has changed, we must signal the wrapper element.
+    fn dispatch_config(&self, ctx: &Context<Self>) {
+        ctx.props().on_change.emit(self.config.clone());
+    }
+}
+
+impl Component for DatetimeStyleSimple {
+    type Message = DatetimeStyleSimpleMsg;
+    type Properties = DatetimeStyleSimpleProps;
+
+    fn create(ctx: &Context<Self>) -> Self {
+        ctx.set_modal_link();
+        Self {
+            config: ctx.props().config.clone(),
+        }
+    }
+
+    // TODO could be more conservative here with re-rendering
+    fn update(&mut self, ctx: &Context<Self>, msg: Self::Message) -> bool {
+        match msg {
+            DatetimeStyleSimpleMsg::DateStyleChanged(format) => {
+                self.config.date_style = format.unwrap_or_default();
+                self.dispatch_config(ctx);
+                true
+            },
+            DatetimeStyleSimpleMsg::TimeStyleChanged(format) => {
+                self.config.time_style = format.unwrap_or_default();
+                self.dispatch_config(ctx);
+                true
+            },
+        }
+    }
+
+    // Always re-render when config changes.
+    fn changed(&mut self, ctx: &Context<Self>, _old: &Self::Properties) -> bool {
+        let mut new_config = ctx.props().config.clone();
+        if self.config != new_config {
+            std::mem::swap(&mut self.config, &mut new_config);
+            true
+        } else {
+            false
+        }
+    }
+
+    fn view(&self, ctx: &Context<Self>) -> Html {
+        html! {
+            <>
+                <SelectEnumField<SimpleDatetimeFormat>
+                    label="date-style"
+                    on_change={ctx.link().callback(DatetimeStyleSimpleMsg::DateStyleChanged)}
+                    current_value={self.config.date_style}
+                />
+                if ctx.props().enable_time_config {
+                    <SelectEnumField<SimpleDatetimeFormat>
+                        label="time-style"
+                        on_change={ctx.link().callback(DatetimeStyleSimpleMsg::TimeStyleChanged)}
+                        current_value={self.config.time_style}
+                        default_value={SimpleDatetimeFormat::Medium}
+                    />
+                }
+            </>
+        }
+    }
+}