import React, { useEffect, useState } from 'react';

import { Input } from 'antd';

const LargeScreenLayerInput: React.FC<IInput> = (props) => {

  const {value='',changeValue}=props

  const [inputValue,setInputValue]=useState(value);

  useEffect(()=>{
 setInputValue(value)
  },[value])

  return (
      <Input
        size="small"
        value={inputValue}
        maxLength={30}
        autoFocus
        onBlur={(e) => {
          changeValue?.('blur',e.target.value)
        }}
        onPressEnter={(e) => {
          e.preventDefault();
          e.stopPropagation();
          changeValue?.('blur',e.target.value)
        }}
        onChange={(e) => {
          // if(e.target.value)
          setInputValue(e.target.value)
          changeValue?.('change',e.target.value)
        }}
      />
  );
};

export default LargeScreenLayerInput;

export interface IInput{
  value?:string;
  autofocus?:boolean
  changeValue?:Function
}