mirror of
https://github.com/adoyle0/thaw.git
synced 2025-02-02 08:34:15 -05:00
Merge pull request #13 from thaw-ui/fix/upload-and-grid
Fix/upload and grid
This commit is contained in:
commit
2f800017c8
3 changed files with 26 additions and 16 deletions
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Add table
Reference in a new issue