add class to modal (#206)

* add class to modal * add class to modal * add closable option to modal
thaw-ui · Jun 10, 2024 · a9f02ed · a9f02ed
1 parent cb37d9c
commit a9f02ed
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 9 deletions.
diff --git a/demo_markdown/docs/modal/mod.md b/demo_markdown/docs/modal/mod.md
@@ -15,12 +15,14 @@ view! {
 
 | Name           | Type                  | Default              | Description                                 |
 | -------------- | --------------------- | -------------------- | ------------------------------------------- |
+| class          | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the modal element. |
 | show           | `Model<bool>`         |                      | Whether to show modal.                      |
 | title          | `MaybeSignal<String>` | `Default::default()` | Modal title.                                |
 | width          | `MaybeSignal<String>` | `600px`              | Modal width.                                |
 | z_index        | `MaybeSignal<i16>`    | `2000`               | z-index of the modal.                       |
 | mask_closeable | `MaybeSignal<bool>`   | `true`               | Whether to emit hide event when click mask. |
 | close_on_esc   | `bool`                | `true`               | Whether to close modal on Esc is pressed.   |
+| closable       | `bool`                | `true`               | Whether to display the close button.        |
 | children       | `Children`            |                      | Modal's content.                            |
 
 ### Modal Slots

diff --git a/thaw/src/modal/mod.rs b/thaw/src/modal/mod.rs
@@ -1,7 +1,7 @@
 use crate::{Card, CardFooter, CardHeader, CardHeaderExtra, Icon, Scrollbar, ScrollbarRef};
 use leptos::*;
-use thaw_components::{CSSTransition, FocusTrap, OptionComp, Teleport};
-use thaw_utils::{mount_style, use_click_position, ComponentRef, Model};
+use thaw_components::{CSSTransition, FocusTrap, If, OptionComp, Teleport, Then};
+use thaw_utils::{class_list, mount_style, use_click_position, ComponentRef, Model, OptionalProp};
 
 #[slot]
 pub struct ModalFooter {
@@ -13,11 +13,13 @@ pub fn Modal(
     #[prop(into)] show: Model<bool>,
     #[prop(default = true.into(), into)] mask_closeable: MaybeSignal<bool>,
     #[prop(default = true, into)] close_on_esc: bool,
+    #[prop(default = true, into)] closable: bool,
     #[prop(default = 2000.into(), into)] z_index: MaybeSignal<i16>,
     #[prop(default = MaybeSignal::Static("600px".to_string()), into)] width: MaybeSignal<String>,
     #[prop(optional, into)] title: MaybeSignal<String>,
     children: Children,
     #[prop(optional)] modal_footer: Option<ModalFooter>,
+    #[prop(optional, into)] class: OptionalProp<MaybeSignal<String>>,
 ) -> impl IntoView {
     mount_style("modal", include_str!("./modal.css"));
 
@@ -80,6 +82,7 @@ pub fn Modal(
                                 String::from("display: none")
                             }
                         })
+
                         comp_ref=scrollbar_ref
                     >
                         <CSSTransition
@@ -106,7 +109,9 @@ pub fn Modal(
                             let:display
                         >
                             <div
-                                class="thaw-modal-body"
+                                class=class_list![
+                                    "thaw-modal-body", class.map(| c | move || c.get())
+                                ]
                                 ref=modal_ref
                                 role="dialog"
                                 aria-modal="true"
@@ -117,12 +122,16 @@ pub fn Modal(
                                         <span class="thaw-model-title">{move || title.get()}</span>
                                     </CardHeader>
                                     <CardHeaderExtra slot>
-                                        <span
-                                            style="cursor: pointer;"
-                                            on:click=move |_| show.set(false)
-                                        >
-                                            <Icon icon=icondata_ai::AiCloseOutlined/>
-                                        </span>
+                                        <If cond=closable>
+                                            <Then slot>
+                                                <span
+                                                    style="cursor: pointer;"
+                                                    on:click=move |_| show.set(false)
+                                                >
+                                                    <Icon icon=icondata_ai::AiCloseOutlined/>
+                                                </span>
+                                            </Then>
+                                        </If>
                                     </CardHeaderExtra>
                                     {children()}
                                     <CardFooter slot if_=modal_footer.is_some()>