From mboxrd@z Thu Jan 1 00:00:00 1970 Return-Path: Received: from firstgate.proxmox.com (firstgate.proxmox.com [212.224.123.68]) by lore.proxmox.com (Postfix) with ESMTPS id 4F7A31FF163 for ; Thu, 19 Dec 2024 12:01:48 +0100 (CET) Received: from firstgate.proxmox.com (localhost [127.0.0.1]) by firstgate.proxmox.com (Proxmox) with ESMTP id 914332161; Thu, 19 Dec 2024 12:01:48 +0100 (CET) From: Shannon Sterz To: pdm-devel@lists.proxmox.com Date: Thu, 19 Dec 2024 12:00:59 +0100 Message-Id: <20241219110059.166895-3-s.sterz@proxmox.com> X-Mailer: git-send-email 2.39.5 In-Reply-To: <20241219110059.166895-1-s.sterz@proxmox.com> References: <20241219110059.166895-1-s.sterz@proxmox.com> MIME-Version: 1.0 X-SPAM-LEVEL: Spam detection results: 0 AWL -0.037 Adjusted score from AWL reputation of From: address BAYES_00 -1.9 Bayes spam probability is 0 to 1% DMARC_MISSING 0.1 Missing DMARC policy KAM_DMARC_STATUS 0.01 Test Rule for DKIM or SPF Failure with Strict Alignment RCVD_IN_VALIDITY_CERTIFIED_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. RCVD_IN_VALIDITY_RPBL_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. RCVD_IN_VALIDITY_SAFE_BLOCKED 0.001 ADMINISTRATOR NOTICE: The query to Validity was blocked. See https://knowledge.validity.com/hc/en-us/articles/20961730681243 for more information. SPF_HELO_NONE 0.001 SPF: HELO does not publish an SPF Record SPF_PASS -0.001 SPF: sender matches SPF record Subject: [pdm-devel] [PATCH yew-widget-toolkit] widget: confirm_dialog: refactor to use message box X-BeenThere: pdm-devel@lists.proxmox.com X-Mailman-Version: 2.1.29 Precedence: list List-Id: Proxmox Datacenter Manager development discussion List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Reply-To: Proxmox Datacenter Manager development discussion Content-Type: text/plain; charset="us-ascii" Content-Transfer-Encoding: 7bit Errors-To: pdm-devel-bounces@lists.proxmox.com Sender: "pdm-devel" this allows using an icon next to the message and generally simplifies the code. Signed-off-by: Shannon Sterz --- src/widget/confirm_dialog.rs | 100 ++++++++++++++++------------------- 1 file changed, 47 insertions(+), 53 deletions(-) diff --git a/src/widget/confirm_dialog.rs b/src/widget/confirm_dialog.rs index 64ce5105..1c84952b 100644 --- a/src/widget/confirm_dialog.rs +++ b/src/widget/confirm_dialog.rs @@ -1,50 +1,64 @@ use std::rc::Rc; -use crate::props::{ContainerBuilder, CssPaddingBuilder, EventSubscriber, WidgetBuilder}; -use crate::widget::{Button, Container, Dialog, Toolbar}; use html::{IntoEventCallback, IntoPropValue}; use pwt_macros::builder; -use wasm_bindgen::JsCast; use yew::prelude::*; use yew::virtual_dom::{VComp, VNode}; +use crate::tr; + +use super::MessageBox; + #[derive(Clone, PartialEq, Properties)] #[builder] +/// A dialog that can be used to let users confirm an action before it is taken. pub struct ConfirmDialog { + /// The title of the dialog. #[prop_or_default] #[builder(IntoPropValue, into_prop_value)] pub title: AttrValue, - #[prop_or_default] + /// A message that conveys what will be confirmed. + #[prop_or(html!(tr!("Confirm this action?")))] #[builder(IntoPropValue, into_prop_value)] - pub confirm_text: AttrValue, + pub confirm_message: Html, - #[prop_or_default] - #[builder(IntoPropValue, into_prop_value)] - pub confirm_message: AttrValue, + /// An icon that will be shown in the dialogs message. + #[prop_or("fa fa-exclamation-triangle".into())] + #[builder(Into, into)] + pub icon_class: Classes, - #[builder_cb(IntoEventCallback, into_event_callback, ())] + /// A callback for an action that needs to be confirmed by the user. #[prop_or_default] + #[builder_cb(IntoEventCallback, into_event_callback, ())] pub on_confirm: Option>, - #[builder_cb(IntoEventCallback, into_event_callback, ())] + /// A callback that will trigger if the user dismisses the action. #[prop_or_default] - pub on_close: Option>, - #[builder_cb(IntoEventCallback, into_event_callback, ())] + pub on_dismiss: Option>, + + /// A callback that will trigger if the dialog is closed, regardless of whether the action was + /// confirmed or not. #[prop_or_default] - pub on_done: Option>, + #[builder_cb(IntoEventCallback, into_event_callback, ())] + pub on_close: Option>, } impl ConfirmDialog { - pub fn new() -> Self { - yew::props!(Self {}) + pub fn new(title: impl Into, confirm_message: impl Into) -> Self { + yew::props!(Self { + title: title.into(), + confirm_message: Some(html! {confirm_message.into()}) + }) } } impl Default for ConfirmDialog { fn default() -> Self { - Self::new() + yew::props!(Self { + title: tr!("Confirm"), + }) } } @@ -71,46 +85,26 @@ impl Component for PwtConfirmDialog { fn view(&self, ctx: &Context) -> Html { let props = ctx.props(); - Dialog::new(props.title.clone()) - .with_child( - Container::new() - .padding(4) - .class("pwt-d-felx pwt-flex-direction-column") - .with_child(props.confirm_message.clone()), - ) - .with_child(Toolbar::new().with_flex_spacer().with_child( - Button::new(props.confirm_text.clone()).onclick({ - let on_confirm = props.on_confirm.clone(); - let on_done = props.on_done.clone(); - - move |e: MouseEvent| { - let event = e.unchecked_into::(); - event.prevent_default(); - - if let Some(on_confirm) = &on_confirm { - on_confirm.emit(()); - } - - if let Some(on_done) = &on_done { - on_done.emit(()); - } - } - }), - )) - .on_close({ - let on_close = props.on_close.clone(); - let on_done = props.on_done.clone(); - - move |()| { - if let Some(on_close) = &on_close { - on_close.emit(()); + let on_confirm = props.on_confirm.clone(); + let on_dismiss = props.on_dismiss.clone(); + let on_close = props.on_close.clone(); + + MessageBox::new(props.title.clone(), props.confirm_message.clone()) + .buttons(super::MessageBoxButtons::YesNo) + .icon_class(props.icon_class.clone()) + .on_close(ctx.link().callback(move |confirm| { + if confirm { + if let Some(on_confirm) = &on_confirm { + on_confirm.emit(()); } + } else if let Some(on_dismiss) = &on_dismiss { + on_dismiss.emit(()); + } - if let Some(on_done) = &on_done { - on_done.emit(()); - } + if let Some(on_close) = &on_close { + on_close.emit(()); } - }) + })) .into() } } -- 2.39.5 _______________________________________________ pdm-devel mailing list pdm-devel@lists.proxmox.com https://lists.proxmox.com/cgi-bin/mailman/listinfo/pdm-devel