blob: 9dcd5be2a73db75d51ac3e7e6151ab1e00b5383d (
plain) (
tree)
|
|
import React from "react";
import styled from "styled-components";
const Container = styled.div`
page-break-inside: avoid;
`;
const Label = styled.label`
font-weight: bold;
min-width: 14rem;
display: inline-block;
`;
const ErrorableTextArea = styled.textarea<{ hasError: boolean }>`
box-shadow: ${({ hasError }) => (hasError ? "0 0 2px red" : "none")};
font-family: monospace;
font-family: monospace;
width: 100%;
min-height: 64ex;
resize: vertical;
`;
const ErrorMessage = styled.p`
font-weight: bold;
color: red;
min-height: 1.5em;
`;
interface Props extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
error?: string;
label: string;
onValueChange?: (name: string, value: string) => void;
}
const TextArea: React.FC<Props> = (props) => {
const onChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
if (props.onValueChange) {
props.onValueChange(e.target.name, e.target.value);
}
};
const hasError = typeof props.error !== "undefined" && props.error !== "";
const pp = { ...props };
delete pp.onValueChange;
return (
<Container>
<Label htmlFor={props.id}>{props.label}</Label>
<ErrorableTextArea hasError={hasError} onChange={onChange} {...pp} />
{hasError ? (
<ErrorMessage role="alert">{props.error}</ErrorMessage>
) : null}
</Container>
);
};
export default TextArea;
|