import React , { useState , useMemo , ChangeEvent } from 'react' ; import styles from './styles.less' ; interface Props { value ? : string ; name : string ; onChange : Function ; type : string ; onEnter ? : Function ; } const Component = ( { value , name , onChange , type = 'text' , onEnter } ) => { const [ isFocus , setFoucus ] = useState ( ! ! value ) ; const nameStyle = useMemo ( ( ) => { const style = { } ; style . transform = `translate3d(${ isFocus ? '0px' : '10px' }, ${ isFocus ? '-18px' : '0' }, 0)` ; return style ; } , [ isFocus ] ) ; const onInsert = ( e ) => { onChange ( e . target . value ) ; } ; const onKeyDown = ( e ) => { onChange ( e ?. target ?. value ) ; if ( e ?. keyCode === 13 ) { onEnter ( ) ; } } ; return ( < div className = { styles . inputItem } > < span className = { styles . name } style = { nameStyle } > { name } < /span> < div className = { styles . inputWrap } > < input onFocus = { ( ) => setFoucus ( true ) } onBlur = { ( ) => setFoucus ( ! ! value ) } value = { value } onKeyDown = { ( e ) => onKeyDown ( e ) } onChange = { ( e ) => onInsert ( e ) } type = { type } / > < /div> < /div>); } ; export default Component ;