【Framer】営業防止！フォームで文字数制限し、ボタンを押せなくする方法！

import { Override } from "framer"
import { useState, useEffect, useRef } from "react"

const MAX_LENGTH = 10

let setDisabledState: (v: boolean) => void

// ✅ Textareaのロジック + スタイル制御
export function TextareaOverride(): Override {
    const ref = useRef<HTMLTextAreaElement>(null)
    const [isOverLimit, setIsOverLimit] = useState(false)
    setDisabledState = setIsOverLimit

    useEffect(() => {
        const el = ref.current
        if (!el) return

        const handleInput = (e: any) => {
            const value = e.target.value
            const over = value.length > MAX_LENGTH
            setIsOverLimit(over)

            el.style.border = over ? "2px solid red" : ""
            el.style.backgroundColor = over ? "#ffecec" : ""
        }

        el.addEventListener("input", handleInput)
        return () => el.removeEventListener("input", handleInput)
    }, [])

    return {
        ref,
    }
}

// ✅ Buttonのスタイル制御（そのまま流用）
export function ButtonOverride(): Override {
    const [isDisabled, setIsDisabled] = useState(false)
    setDisabledState = setIsDisabled

    return {
        whileTap: isDisabled ? {} : { scale: 0.95 },
        style: {
            opacity: isDisabled ? 0.5 : 1,
            pointerEvents: isDisabled ? "none" : "auto",
            width: "100%",
        },
    }
}