qc-iaaSystem/src/components/InputName/index.tsx

import { txtLength } from "@/utils/utils"
import { Button, Input, Space } from "antd"
import { TextAreaProps } from "antd/lib/input/TextArea"
import React, { useEffect, useState } from "react"
import './index.less'

interface Props extends TextAreaProps {
    length?: number
    isCurrent?: Array<'素材名称' | '落地页名' | '文案'>
}
/**
 * 广告名称 设置 组件
 * @returns 
 */
const InputName: React.FC<Props> = ({ isCurrent, value, onChange, length, ...props }) => {

    /******************************/
    const [status, setStatus] = useState<{ status?: string }>({})
    /******************************/

    useEffect(() => {
        if (length && txtLength(value as any) > length) {
            setStatus({ status: 'error' })
        } else {
            setStatus({})
        }
    }, [value])

    /** 插入通配符 */
    const insertMatching = (matching: string) => {
        onChange?.(value + `-${matching}` as any)
    }

    return <Space direction="vertical" size={0}>
        <Space align="end">
            <Input.TextArea value={value} {...props} onChange={(e) => {
                onChange?.(e)
            }} />
            {length && <span style={Object.keys(status).length > 0 ? { color: 'red' } : {}}>{txtLength(value as any)}/{length}</span>}
        </Space>
        {isCurrent && isCurrent?.length > 0 && <div className="matching">
            <span>通配符：</span>
            <Space>
                {isCurrent.includes('素材名称') && <Button type="link" onClick={() => insertMatching('<素材名称>')} style={{ padding: 0 }} disabled={value?.toString()?.includes('<素材名称>')}>+素材名称</Button>}
                {isCurrent.includes('落地页名') && <Button type="link" onClick={() => insertMatching('<落地页名>')} style={{ padding: 0 }} disabled={value?.toString()?.includes('<落地页名>')}>+落地页名</Button>}
                {isCurrent.includes('文案') && <Button type="link" onClick={() => insertMatching('<文案>')} style={{ padding: 0 }} disabled={value?.toString()?.includes('<文案>')}>+文案(前5个文字)</Button>}
            </Space>
        </div>}
        
    </Space>
}

export default React.memo(InputName)