Files
todo-baggins/src/components/input.rs
Matouš Volf b5e7ab5c48
All checks were successful
actionlint check / actionlint check (pull_request) Successful in 6s
conventional pull request title check / conventional pull request title check (pull_request) Successful in 3s
conventional commit messages check / conventional commit messages check (pull_request) Successful in 5s
dotenv-linter check / dotenv-linter check (pull_request) Successful in 12s
GitLeaks check / GitLeaks check (pull_request) Successful in 11s
hadolint check / hadolint check (pull_request) Successful in 28s
markdownlint check / markdownlint check (pull_request) Successful in 52s
Prettier check / Prettier check (pull_request) Successful in 36s
htmlhint check / htmlhint check (pull_request) Successful in 55s
checkov check / checkov check (pull_request) Successful in 1m15s
Stylelint check / Stylelint check (pull_request) Successful in 31s
yamllint check / yamllint check (pull_request) Successful in 29s
ShellCheck check / ShellCheck check (pull_request) Successful in 1m9s
Rust check / Rust check (pull_request) Successful in 22m2s
feat: UI overhaul
2026-01-28 23:04:29 +01:00

50 lines
1.8 KiB
Rust

use dioxus::prelude::*;
#[component]
pub(crate) fn Input(
class: Option<String>,
name: String,
r#type: String,
id: Option<String>,
#[props(extends = GlobalAttributes, extends = input)] attributes: Vec<Attribute>,
// TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/5271 gets resolved.
autofocus: Option<bool>,
// TODO: Remove this once https://github.com/DioxusLabs/dioxus/issues/4019 gets resolved.
oninput: Option<Callback<Event<FormData>>>,
onchange: Option<Callback<Event<FormData>>>,
) -> Element {
rsx! {
input {
class: format!(
/* `w-full` is required for the Chromium renderer to allow the input to shrink
properly. */
"pt-3 pb-2.25 w-full {} bg-gray-800-muted enabled:hover:bg-gray-800 enabled:focus:bg-gray-800 drop-shadow-[0_calc(0px_-_var(--spacing))_0_var(--color-gray-900-muted)] rounded-xl outline-0 {} transition-all duration-150 {}",
match r#type.as_str() {
"date" => "ps-3.25 pe-3",
_ => "px-4"
},
match r#type.as_str() {
"text" | "number" => "",
_ => "enabled:cursor-pointer"
},
class.unwrap_or("".to_owned())
),
name: name.clone(),
r#type,
id: id.unwrap_or(format!("input_{}", name)),
autofocus,
oninput: move |event| {
if let Some(oninput) = oninput {
oninput.call(event);
}
},
onchange: move |event| {
if let Some(onchange) = oninput {
onchange.call(event);
}
},
..attributes
}
}
}