From dd0754073c2b52b6773c93e07fe85c74392447c5 Mon Sep 17 00:00:00 2001
From: Adrien <me@adrien.run>
Date: Sun, 10 Mar 2024 11:11:39 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20TextField=20component?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/_base.scss                 |  5 +++-
 src/components/mod.rs          |  1 +
 src/components/text_field.rs   | 45 ++++++++++++++++++++++++++++++++++
 src/components/text_field.scss | 25 +++++++++++++++++++
 4 files changed, 75 insertions(+), 1 deletion(-)
 create mode 100644 src/components/text_field.rs
 create mode 100644 src/components/text_field.scss

diff --git a/src/_base.scss b/src/_base.scss
index 28d5acd..39a96e9 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -51,13 +51,16 @@ $color-ternary-70: #8B0046;
 $color-ternary-60: #720033;
 $color-ternary-50: #5A0022;
 
+$color-critical: #C91B13;
+$color-warning: #FFA316;
+$color-success: #4AAB79;
+
 $border-default-color: $greyscale-90;
 $border-big-width: 4px;
 $border-big: solid $border-big-width $border-default-color;
 $border-normal-width: 2px;
 $border-normal: solid $border-normal-width $border-default-color;
 
-
 $form-max-height: 1024px;
 $form-aspect-ratio: 1/1.618;
 
diff --git a/src/components/mod.rs b/src/components/mod.rs
index 857ab74..79358f3 100644
--- a/src/components/mod.rs
+++ b/src/components/mod.rs
@@ -8,4 +8,5 @@ pub mod loading;
 pub mod login;
 pub mod main_window;
 pub mod spinner;
+pub mod text_field;
 pub mod wallpaper;
diff --git a/src/components/text_field.rs b/src/components/text_field.rs
new file mode 100644
index 0000000..632c3c5
--- /dev/null
+++ b/src/components/text_field.rs
@@ -0,0 +1,45 @@
+use dioxus::prelude::*;
+
+turf::style_sheet!("src/components/text_field.scss");
+
+#[derive(Props)]
+pub struct TextFieldProps<'a> {
+    id: Option<&'a str>,
+    oninput: Option<EventHandler<'a, Event<FormData>>>,
+    placeholder: Option<&'a str>,
+    r#type: Option<&'a str>,
+    value: Option<&'a str>,
+    #[props(default = true)]
+    is_value_valid: bool,
+}
+
+pub fn TextField<'a>(cx: Scope<'a, TextFieldProps<'a>>) -> Element<'a> {
+    let classes = [
+        ClassName::ROOT,
+        if !cx.props.is_value_valid {
+            ClassName::INVALID_DATA
+        } else {
+            ""
+        },
+    ]
+    .join(" ");
+
+    cx.render(rsx! {
+        style { STYLE_SHEET },
+
+        input {
+            class: "{classes}",
+
+            id: cx.props.id.unwrap_or(""),
+
+            oninput: move |evt| {
+                if let Some(cb) = &cx.props.oninput {
+                    cb.call(evt);
+                }
+            },
+            r#type: cx.props.r#type,
+            placeholder: cx.props.placeholder,
+            value: cx.props.value,
+        }
+    })
+}
diff --git a/src/components/text_field.scss b/src/components/text_field.scss
new file mode 100644
index 0000000..75ba6c5
--- /dev/null
+++ b/src/components/text_field.scss
@@ -0,0 +1,25 @@
+@import "../_base.scss"
+
+.root {
+    $horizontal-padding: 1vw;
+
+    padding-left: $horizontal-padding;
+    padding-right: $horizontal-padding;
+    padding-top: 0px;
+    padding-bottom: 0px;
+
+    height: calc(100% - (2 * ($border-normal-width)));
+    width: calc(100% - (2 * ($border-normal-width + $horizontal-padding)));
+
+    margin: 0;
+
+    border: $border-normal;
+    border-color: $color-primary-90;
+    border-radius: $border-radius;
+
+    font-size: 2vh;
+
+    &.invalid-data {
+        border-color: $color-critical;
+    }
+}