diff options
author | 2022-07-01 13:41:48 +0400 | |
---|---|---|
committer | 2022-07-01 13:41:48 +0400 | |
commit | 9696f5269ddbc1ba090830f84cb17ac6624c777f (patch) | |
tree | 8e761de37294f336c7f6207cee7c9e54fae0f86b /src/components/ErrorMessage.tsx | |
parent | Style 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.tsx | 11 |
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> ); } |