@hhgtech/hhg-components
Version:
Hello Health Group common components
43 lines (37 loc) • 1.59 kB
JavaScript
import React__default from 'react';
import styled from '@emotion/styled';
import { L as Label } from './index-cf3c860d.js';
import { theme } from './miscTheme.js';
const StyledTextArea = styled.div `
textarea {
width: 100%;
height: var(--textarea-height, 116px);
padding: 1rem;
border: 1px solid ${theme.colors.gray200};
border-radius: 6px;
color: ${theme.colors.gray800};
font-size: 14px;
resize: none;
&:focus {
box-shadow: 0px 0px 2px 2px #91caff;
}
&::placeholder {
color: ${theme.colors.gray500};
}
&:disabled {
background-color: ${theme.colors.neutral50};
cursor: not-allowed;
}
}
`;
/**
* @deprecated Consider to use at '@hhgtech/hhg-components/mantine'
*/
const TextArea = React__default.forwardRef(({ height, placeholder, labelText, labelColor, id, name, onChange, value, className, onKeyPress, disabled = false, }, ref) => {
return (React__default.createElement(StyledTextArea, { className: className, style: { ['--textarea-height']: height || '116px' } },
labelText && (React__default.createElement(Label, { size: "label2", style: { color: labelColor || '#595959' }, htmlFor: id }, labelText)),
React__default.createElement("textarea", { name: name, ref: ref, placeholder: placeholder, id: id, onChange: (e) => onChange && onChange(e.target.value),
// eslint-disable-next-line @typescript-eslint/no-explicit-any
onKeyPress: (e) => onKeyPress && onKeyPress(e), value: value, disabled: disabled })));
});
export { TextArea as T };