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

kufu · Apr 26, 2024 · 4bec5a4 · 4bec5a4
1 parent 38997c1
commit 4bec5a4
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 11 deletions.
diff --git a/src/components/Textarea/Textarea.stories.tsx b/src/components/Textarea/Textarea.stories.tsx
@@ -46,14 +46,18 @@ const Template: StoryFn = () => {
       </li>
       <li>
         <FormControl title="最大文字数 (defaultValue)">
-          <Textarea name="max_length_with_default_value" maxLength={140} defaultValue="message👌" />
+          <Textarea
+            name="max_length_with_default_value"
+            maxLetters={140}
+            defaultValue="message👌"
+          />
         </FormControl>
       </li>
       <li>
         <FormControl title="最大文字数 (value)">
           <Textarea
             name="max_length_with_value"
-            maxLength={140}
+            maxLetters={140}
             value={value}
             onChange={onChangeValue}
           />
@@ -63,7 +67,7 @@ const Template: StoryFn = () => {
         <FormControl title="最大文字数 (value)">
           <Textarea
             name="max_length_with_value_over"
-            maxLength={4}
+            maxLetters={4}
             value={value}
             onChange={onChangeValue}
           />
@@ -73,11 +77,11 @@ const Template: StoryFn = () => {
         <FormControl title="最大文字数 (decorators)">
           <Textarea
             name="max_length_with_value_and_decorators"
-            maxLength={140}
+            maxLetters={140}
             value={value}
             onChange={onChangeValue}
             decorators={{
-              beforeMaxLengthCount: (txt) => `entry limit(${txt})`,
+              beforeMaxLengthCount: (txt) => `entry maxLetters(${txt})`,
               afterMaxLengthCount: (txt) => ` characters(${txt})`,
             }}
           />

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は発生しない */
+  maxLetters?: number
   /** コンポーネント内の文言を変更するための関数を設定 */
   decorators?: DecoratorsType<'beforeMaxLengthCount' | 'afterMaxLengthCount'>
   /**
@@ -87,7 +89,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
   (
     {
       autoFocus,
-      maxLength,
+      maxLetters,
       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: !!(maxLetters && maxLetters - count <= 0) }),
       }
-    }, [className, count, error, maxLength, width])
+    }, [className, count, error, maxLetters, width])
 
     return (
       <>
         {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
         <textarea
           {...props}
           {...textareaStyleProps}
-          {...(maxLength ? { onKeyUp: handleKeyup } : {})}
+          {...(maxLetters ? { onKeyUp: handleKeyup } : {})}
           ref={textareaRef}
           aria-invalid={error || undefined}
           rows={interimRows}
           onInput={handleInput}
         />
-        {maxLength && (
+        {maxLetters && (
           <span className={counterStyle}>
             {beforeMaxLengthCount}
-            <span className={counterTextStyle}>{maxLength - count}</span>
+            <span className={counterTextStyle}>{maxLetters - count}</span>
             {afterMaxLengthCount}
           </span>
         )}