aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/ErrorMessage.tsx
diff options
context:
space:
mode:
authorGravatar Hassan Abouelela <[email protected]>2022-07-01 13:41:48 +0400
committerGravatar Hassan Abouelela <[email protected]>2022-07-01 13:41:48 +0400
commit9696f5269ddbc1ba090830f84cb17ac6624c777f (patch)
tree8e761de37294f336c7f6207cee7c9e54fae0f86b /src/components/ErrorMessage.tsx
parentStyle Changes (diff)
Improve ErrorMessage Interface
Unify the string and element types on the interface to clarify they are mutually exclusive. Signed-off-by: Hassan Abouelela <[email protected]>
Diffstat (limited to 'src/components/ErrorMessage.tsx')
-rw-r--r--src/components/ErrorMessage.tsx11
1 files changed, 6 insertions, 5 deletions
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>
);
}