From 9696f5269ddbc1ba090830f84cb17ac6624c777f Mon Sep 17 00:00:00 2001
From: Hassan Abouelela <hassan@hassanamr.com>
Date: Fri, 1 Jul 2022 13:41:48 +0400
Subject: Improve ErrorMessage Interface

Unify the string and element types on the interface to clarify they are
mutually exclusive.

Signed-off-by: Hassan Abouelela <hassan@hassanamr.com>
---
 src/components/ErrorMessage.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

(limited to 'src/components/ErrorMessage.tsx')

diff --git a/src/components/ErrorMessage.tsx b/src/components/ErrorMessage.tsx
index e6078ff..6151603 100644
--- a/src/components/ErrorMessage.tsx
+++ b/src/components/ErrorMessage.tsx
@@ -5,8 +5,7 @@ import {selectable} from "../commonStyles";
 
 interface ErrorMessageProps {
     show: boolean,
-    message: string,
-    innerElement?: JSX.Element,
+    content: string | JSX.Element,
 }
 
 export default function ErrorMessage(props: ErrorMessageProps): JSX.Element | null {
@@ -21,15 +20,17 @@ export default function ErrorMessage(props: ErrorMessageProps): JSX.Element | nu
       transition: opacity 200ms, visibility 200ms;
     `;
 
-    // These styles are not applied when inner element is explicitly set
+    // These styles are not applied when content is an element;
     const floatingStyles = css`
       position: absolute;
       z-index: -1;
     `;
 
+    const isString = typeof props.content === "string";
+
     return (
-        <div tabIndex={-1} css={[styles, selectable, props.innerElement ? null : floatingStyles]}>
-            {props.innerElement ? props.innerElement : props.message}
+        <div tabIndex={-1} css={[styles, selectable, isString ? floatingStyles : null]}>
+            {props.content}
         </div>
     );
 }
-- 
cgit v1.2.3