fix: TextareaコンポーネントのmaxLength属性をlimitLength属性に変更

kufu · Apr 25, 2024 · dd1b7da · dd1b7da
1 parent 38997c1
commit dd1b7da
Showing 1 changed file with 8 additions and 6 deletions.
diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
@@ -28,6 +28,8 @@ type Props = {
   maxRows?: number
   /** 行数の初期値。省略した場合は2 */
   rows?: number
+  /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */
+  limiLength?: number
   /** コンポーネント内の文言を変更するための関数を設定 */
   decorators?: DecoratorsType<'beforeMaxLengthCount' | 'afterMaxLengthCount'>
   /**
@@ -87,7 +89,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
   (
     {
       autoFocus,
-      maxLength,
+      limiLength,
       width,
       className,
       autoResize = false,
@@ -165,26 +167,26 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
           style: { width: typeof width === 'number' ? `${width}px` : width },
         },
         counterStyle: counter(),
-        counterTextStyle: counterText({ error: !!(maxLength && maxLength - count <= 0) }),
+        counterTextStyle: counterText({ error: !!(limiLength && limiLength - count <= 0) }),
       }
-    }, [className, count, error, maxLength, width])
+    }, [className, count, error, limiLength, width])
 
     return (
       <>
         {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
         <textarea
           {...props}
           {...textareaStyleProps}
-          {...(maxLength ? { onKeyUp: handleKeyup } : {})}
+          {...(limiLength ? { onKeyUp: handleKeyup } : {})}
           ref={textareaRef}
           aria-invalid={error || undefined}
           rows={interimRows}
           onInput={handleInput}
         />
-        {maxLength && (
+        {limiLength && (
           <span className={counterStyle}>
             {beforeMaxLengthCount}
-            <span className={counterTextStyle}>{maxLength - count}</span>
+            <span className={counterTextStyle}>{limiLength - count}</span>
             {afterMaxLengthCount}
           </span>
         )}