feat: TextareaをspanでラップすることでStackコンポーネントなどでラップした場合、意図しない余白が設定されないように変更

kufu · Apr 25, 2024 · 36f1cb2 · 36f1cb2
1 parent 1c726b2
commit 36f1cb2
Show file tree

Hide file tree

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

diff --git a/src/components/Textarea/Textarea.tsx b/src/components/Textarea/Textarea.tsx
@@ -29,7 +29,7 @@ type Props = {
   /** 行数の初期値。省略した場合は2 */
   rows?: number
   /** 入力可能な最大文字数。あと何文字入力できるかの表示が追加される。html的なvalidateは発生しない */
-  limiLength?: number
+  limitLength?: number
   /** コンポーネント内の文言を変更するための関数を設定 */
   decorators?: DecoratorsType<'beforeMaxLengthCount' | 'afterMaxLengthCount'>
   /**
@@ -89,7 +89,7 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
   (
     {
       autoFocus,
-      limiLength,
+      limitLength,
       width,
       className,
       autoResize = false,
@@ -130,9 +130,15 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
       }
     }, [autoFocus])
 
-    const handleKeyup = useCallback((event: React.KeyboardEvent<HTMLTextAreaElement>) => {
-      setCount(getStringLength(event.currentTarget.value))
-    }, [])
+    const onKeyUp = useMemo(
+      () =>
+        limitLength
+          ? (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+              setCount(getStringLength(event.currentTarget.value))
+            }
+          : undefined,
+      [limitLength],
+    )
     const handleInput = useCallback(
       (e: React.ChangeEvent<HTMLTextAreaElement>) => {
         if (!autoResize) {
@@ -167,30 +173,34 @@ export const Textarea = forwardRef<HTMLTextAreaElement, Props & ElementProps>(
           style: { width: typeof width === 'number' ? `${width}px` : width },
         },
         counterStyle: counter(),
-        counterTextStyle: counterText({ error: !!(limiLength && limiLength - count <= 0) }),
+        counterTextStyle: counterText({ error: !!(limitLength && limitLength - count <= 0) }),
       }
-    }, [className, count, error, limiLength, width])
-
-    return (
-      <>
-        {/* eslint-disable-next-line smarthr/a11y-input-has-name-attribute */}
-        <textarea
-          {...props}
-          {...textareaStyleProps}
-          {...(limiLength ? { onKeyUp: handleKeyup } : {})}
-          ref={textareaRef}
-          aria-invalid={error || undefined}
-          rows={interimRows}
-          onInput={handleInput}
-        />
-        {limiLength && (
-          <span className={counterStyle}>
-            {beforeMaxLengthCount}
-            <span className={counterTextStyle}>{limiLength - count}</span>
-            {afterMaxLengthCount}
-          </span>
-        )}
-      </>
+    }, [className, count, error, limitLength, width])
+
+    const body = (
+      // eslint-disable-next-line smarthr/a11y-input-has-name-attribute
+      <textarea
+        {...props}
+        {...textareaStyleProps}
+        onKeyUp={onKeyUp}
+        ref={textareaRef}
+        aria-invalid={error || undefined}
+        rows={interimRows}
+        onInput={handleInput}
+      />
+    )
+
+    return limitLength ? (
+      <span>
+        {body}
+        <span className={counterStyle}>
+          {beforeMaxLengthCount}
+          <span className={counterTextStyle}>{limitLength - count}</span>
+          {afterMaxLengthCount}
+        </span>
+      </span>
+    ) : (
+      body
     )
   },
 )