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 InputProps < T = HTMLInputElement > extends TextProps < T > { markInvalid ? : boolean ; placeholderTextTransform ? : Property . TextTransform ; } export const inputStyle = ( 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:not(:focus)' : ! 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 , height : '56px' , lineHeight : '24px' , margin : '0 0 16px' , outline : 'none' , padding : '0 16px' , width : '100%' , } ; } ; export const INPUT_CLASSNAME = 'wireinput' ; const filterInputProps = ( props ) => filterProps ( props , [ 'markInvalid' , 'placeholderTextTransform' ] ) ; export const Input = React . forwardRef < HTMLInputElement , InputProps < HTMLInputElement > > ( ( { type , ... props } , ref ) => { return ( < input className = { INPUT_CLASSNAME } css = { theme => inputStyle ( theme , props ) } ref = { ref } type = { type } { ... filterInputProps ( props ) } />); } ) ;