import { Input, Space } from 'antd'
import React, { useCallback } from 'react'
import style from './index.less'
type Props = {
    maxLength?: any,//最大长度
    rules: { reg: any },//正则
    callback: (value: string) => void,//回调函数
    labelWidth?: number,//label宽
    inputWidth?: number,//input宽
    labelName?: any,//label名称
    errorMsg?: string//提示文字
    defaultValue?: string
}
const RegExpInput = (props: Props) => {
    const ref: any = React.createRef()
    /**菜单名称输入 */
    const handelInput = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
        let value = e.target.value
        props.callback(value)
    }, [])
    return <Space>
        <label>{props?.labelName}</label>
        <div className={style.input_box} style={props?.inputWidth ? { width: props.inputWidth } : undefined}>
            <Input
                ref={ref}
                onChange={handelInput}
                maxLength={props?.maxLength}
                defaultValue={props.defaultValue}
                style={{ ...props?.inputWidth ? { width: props?.inputWidth } : {} }}
            />
            <span className={style.msg}>{props?.errorMsg}</span>
        </div>
    </Space>
}
export default RegExpInput