From 2d7c77048609f97e0b94d7cb0d8c859a95e07285 Mon Sep 17 00:00:00 2001
From: ks129 <45097959+ks129@users.noreply.github.com>
Date: Mon, 18 Jan 2021 17:58:01 +0200
Subject: Implement validation to ShortText component

---
 src/components/InputTypes/ShortText.tsx | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

(limited to 'src')

diff --git a/src/components/InputTypes/ShortText.tsx b/src/components/InputTypes/ShortText.tsx
index d34bd01..5509a45 100644
--- a/src/components/InputTypes/ShortText.tsx
+++ b/src/components/InputTypes/ShortText.tsx
@@ -1,13 +1,18 @@
 /** @jsx jsx */
 import { jsx } from "@emotion/react";
-import React, { ChangeEvent } from "react";
-import { textInputs } from "../../commonStyles";
+import React, { ChangeEvent, FocusEvent } from "react";
+import { textInputs, invalidStyles } from "../../commonStyles";
 
 interface ShortTextProps {
     handler: (event: ChangeEvent<HTMLInputElement>) => void,
-    required: boolean
+    blurHandler: (event: FocusEvent<HTMLInputElement>) => void,
+    valid: boolean
 }
 
 export default function ShortText(props: ShortTextProps): JSX.Element {
-    return <input type="text" css={textInputs} placeholder="Enter Text..." onChange={props.handler}/>;
+    return (
+        <div css={invalidStyles}>
+            <input type="text" css={textInputs} placeholder="Enter Text..." onChange={props.handler} onBlur={props.blurHandler} className={!props.valid ? "invalid-box" : ""}/>
+        </div>
+    );
 }
-- 
cgit v1.2.3