jsx import { CSSObject , jsx } from '@emotion/core' ; import type { Property } from 'csstype' ; import React from 'react' ; import { COLOR } from '../Identity' ; import type { Theme } from '../Layout' ; import type { TextProps } from '../Text' ; import { filterProps } from '../util' ; export interface TextAreaProps < T = HTMLTextAreaElement > extends TextProps < T > { markInvalid ? : boolean ; placeholderTextTransform ? : Property . TextTransform ; } export const textAreaStyle = ( theme , { markInvalid = false , placeholderTextTransform = 'none' , disabled = false } ) => { const placeholderStyle = { color : theme . Input . placeholderColor , fontSize : '11px' , textTransform : placeholderTextTransform , } ; return { '&::-moz-placeholder' : { ... placeholderStyle , opacity : 1 , } , '&::-ms-input-placeholder' : { ... placeholderStyle , } , '&::-webkit-input-placeholder' : { ... placeholderStyle , } , '&:focus' : { boxShadow : `0 0 0 1px ${ COLOR . BLUE }` , } , '&:invalid' : ! markInvalid ? { boxShadow : `0 0 0 1px ${ COLOR . GRAY }` , } : { } , background : disabled ? theme . Input . backgroundColorDisabled : theme . Input . backgroundColor , border : 'none' , borderRadius : '4px' , boxShadow : markInvalid ? `0 0 0 1px ${ COLOR . RED }` : `0 0 0 1px ${ COLOR . GRAY }` , caretColor : COLOR . BLUE , color : theme . general . color , fontWeight : 300 , lineHeight : '24px' , margin : '0 0 16px' , outline : 'none' , padding : '16px 16px' , resize : 'none' , width : '100%' , } ; } ; export const TEXTAREA_CLASSNAME = 'textarea' ; const filterTextAreaProps = ( props ) => filterProps ( props , [ 'markInvalid' , 'placeholderTextTransform' ] ) ; export const TextArea = React . forwardRef < HTMLTextAreaElement , TextAreaProps < HTMLTextAreaElement > > ( ( props , ref ) => ( < textarea className = { TEXTAREA_CLASSNAME } css = { theme => textAreaStyle ( theme , props ) } ref = { ref } { ... filterTextAreaProps ( props ) } />));