diff options
| -rw-r--r-- | src/components/ErrorMessage.tsx | 11 | ||||
| -rw-r--r-- | src/components/Question.tsx | 4 |
2 files changed, 8 insertions, 7 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> ); } diff --git a/src/components/Question.tsx b/src/components/Question.tsx index b42ea09..d4883ec 100644 --- a/src/components/Question.tsx +++ b/src/components/Question.tsx @@ -252,7 +252,7 @@ class RenderedQuestion extends React.Component<QuestionProp> { } const element = <div css={css`white-space: pre-wrap; word-wrap: break-word;`}>{inner}</div>; - return <ErrorMessage show={!valid} message={""} innerElement={element}/>; + return <ErrorMessage show={!valid} content={element}/>; } render(): JSX.Element { @@ -323,7 +323,7 @@ class RenderedQuestion extends React.Component<QuestionProp> { // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-ignore const message: string = this.props.public_state.get("error"); - error = <ErrorMessage show={!valid} message={message}/>; + error = <ErrorMessage show={!valid} content={message}/>; } return <div ref={this.props.scroll_ref}> |