Merge pull request #13 from thaw-ui/fix/upload-and-grid

Fix/upload and grid
This commit is contained in:
luoxiaozero 2023-11-13 11:16:24 +08:00 committed by GitHub
commit 2f800017c8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 26 additions and 16 deletions

View file

@ -69,7 +69,7 @@ pub fn GridPage() -> impl IntoView {
<GridItem>"7"</GridItem>
<GridItem>"123"</GridItem>
<GridItem>"123"</GridItem>
<GridItem span=2>"1234"</GridItem>
<GridItem column=2>"1234"</GridItem>
<GridItem>"567"</GridItem>
<GridItem>"567"</GridItem>
</Grid>
@ -85,7 +85,7 @@ pub fn GridPage() -> impl IntoView {
<GridItem>"7"</GridItem>
<GridItem>"123"</GridItem>
<GridItem>"123"</GridItem>
<GridItem span=2>"1234"</GridItem>
<GridItem column=2>"1234"</GridItem>
<GridItem >"567"</GridItem>
<GridItem >"567"</GridItem>
</Grid>

View file

@ -3,7 +3,7 @@ use leptos::*;
#[component]
pub fn GridItem(
#[prop(default = MaybeSignal::Static(1u16), into)] span: MaybeSignal<u16>,
#[prop(default = MaybeSignal::Static(1u16), into)] column: MaybeSignal<u16>,
#[prop(optional, into)] offset: MaybeSignal<i32>,
children: Children,
) -> impl IntoView {
@ -12,22 +12,22 @@ pub fn GridItem(
let style = create_memo(move |_| {
let mut style = String::new();
let offset = offset.get();
let span = i32::from(span.get());
let column = i32::from(column.get());
let x_gap = grid.x_gap.get();
if offset > 0 {
style.push_str(&format!(
"margin-left: calc((100% - {}px) / {} * {} + {}px);",
(span + offset - 1) * x_gap,
span + offset,
(column + offset - 1) * x_gap,
column + offset,
offset,
offset * x_gap
));
}
style.push_str(&format!(
"grid-column: span {} / span {};",
span + offset,
span + offset
column + offset,
column + offset
));
style

View file

@ -1,7 +1,7 @@
mod theme;
mod upload_dragger;
use crate::mount_style;
use crate::{mount_style, utils::add_event_listener};
use leptos::*;
pub use theme::UploadTheme;
pub use upload_dragger::UploadDragger;
@ -16,22 +16,32 @@ pub fn Upload(
) -> impl IntoView {
mount_style("upload", include_str!("./upload.css"));
let input_ref = create_node_ref::<html::Input>();
let trigger_ref = create_node_ref::<html::Div>();
trigger_ref.on_load(move |trigger_ref| {
let handle = add_event_listener(trigger_ref.into_any(), ev::click, move |_| {
if let Some(input_ref) = input_ref.get_untracked() {
input_ref.click();
}
});
on_cleanup(move || {
handle.remove();
});
});
let on_file_addition = move |files: FileList| {
if let Some(custom_request) = custom_request {
custom_request.call(files);
}
};
let input_ref = create_node_ref::<html::Input>();
let on_change = move |_| {
if let Some(input_ref) = input_ref.get_untracked() {
if let Some(files) = input_ref.files() {
on_file_addition(files);
}
}
};
let on_click = move |_| {
if let Some(input_ref) = input_ref.get_untracked() {
input_ref.click();
input_ref.set_value("");
}
};
@ -72,7 +82,7 @@ pub fn Upload(
/>
<div
class="thaw-upload__trigger"
on:click=on_click
ref=trigger_ref
on:drop=on_trigger_drop
on:dragover=on_trigger_dragover
on:dragenter=on_trigger_dragenter