feat: Input & TextArea support count (ant-design#45140)

* docs: init * chore: update example * test: update test * docs: update doc * chore: fix lint * chore: update limit
ammar-knowledge · Oct 10, 2023 · 6af1d95 · 6af1d95
1 parent 0202598
commit 6af1d95
Show file tree

Hide file tree

Showing 14 changed files with 367 additions and 296 deletions.
diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx
@@ -1,17 +1,18 @@
+import * as React from 'react';
+import { forwardRef } from 'react';
 import CloseCircleFilled from '@ant-design/icons/CloseCircleFilled';
 import classNames from 'classnames';
 import type { BaseInputProps } from 'rc-input/lib/interface';
 import type { TextAreaRef as RcTextAreaRef } from 'rc-textarea';
 import RcTextArea from 'rc-textarea';
 import type { TextAreaProps as RcTextAreaProps } from 'rc-textarea/lib/interface';
-import * as React from 'react';
-import { forwardRef } from 'react';
+
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import { ConfigContext } from '../config-provider';
 import DisabledContext from '../config-provider/DisabledContext';
-import type { SizeType } from '../config-provider/SizeContext';
 import useSize from '../config-provider/hooks/useSize';
+import type { SizeType } from '../config-provider/SizeContext';
 import { FormItemInputContext } from '../form/context';
 import type { InputFocusOptions } from './Input';
 import { triggerFocus } from './Input';
@@ -38,7 +39,6 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
     disabled: customDisabled,
     status: customStatus,
     allowClear,
-    showCount,
     classNames: classes,
     rootClassName,
     className,
@@ -99,7 +99,7 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
             [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
             [`${prefixCls}-affix-wrapper-sm`]: mergedSize === 'small',
             [`${prefixCls}-affix-wrapper-lg`]: mergedSize === 'large',
-            [`${prefixCls}-textarea-show-count`]: showCount,
+            [`${prefixCls}-textarea-show-count`]: props.showCount || props.count?.show,
           },
           getStatusClassNames(`${prefixCls}-affix-wrapper`, mergedStatus),
           hashId,
@@ -120,7 +120,6 @@ const TextArea = forwardRef<TextAreaRef, TextAreaProps>((props, ref) => {
       }}
       prefixCls={prefixCls}
       suffix={hasFeedback && <span className={`${prefixCls}-textarea-suffix`}>{feedbackIcon}</span>}
-      showCount={showCount}
       ref={innerRef}
     />,
   );

diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -602,6 +602,91 @@ exports[`renders components/input/demo/addon.tsx extend context correctly 1`] =
 
 exports[`renders components/input/demo/addon.tsx extend context correctly 2`] = `[]`;
 
+exports[`renders components/input/demo/advance-count.tsx extend context correctly 1`] = `
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-vertical"
+  style="gap: 16px;"
+>
+  <div>
+    <h5
+      class="ant-typography"
+    >
+      Exceed Max
+    </h5>
+    <span
+      class="ant-input-affix-wrapper ant-input-out-of-range"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value="Hello, antd!"
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <span
+          class="ant-input-show-count-suffix"
+        >
+          12 / 10
+        </span>
+      </span>
+    </span>
+  </div>
+  <div>
+    <h5
+      class="ant-typography"
+    >
+      Emoji count as length 1
+    </h5>
+    <span
+      class="ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value="🔥🔥🔥"
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <span
+          class="ant-input-show-count-suffix"
+        >
+          3
+        </span>
+      </span>
+    </span>
+  </div>
+  <div>
+    <h5
+      class="ant-typography"
+    >
+      Not exceed max
+    </h5>
+    <span
+      class="ant-input-affix-wrapper"
+    >
+      <input
+        class="ant-input"
+        type="text"
+        value="🔥 antd"
+      />
+      <span
+        class="ant-input-suffix"
+      >
+        <span
+          class="ant-input-show-count-suffix"
+        >
+          6 / 6
+        </span>
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`renders components/input/demo/advance-count.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/input/demo/align.tsx extend context correctly 1`] = `
 Array [
   <div
@@ -10347,7 +10432,10 @@ Array [
 exports[`renders components/input/demo/search-input-loading.tsx extend context correctly 2`] = `[]`;
 
 exports[`renders components/input/demo/show-count.tsx extend context correctly 1`] = `
-Array [
+<div
+  class="ant-flex ant-flex-align-stretch ant-flex-vertical"
+  style="gap: 32px;"
+>
   <span
     class="ant-input-affix-wrapper"
   >
@@ -10366,15 +10454,14 @@ Array [
         0 / 20
       </span>
     </span>
-  </span>,
-  <br />,
-  <br />,
+  </span>
   <span
     class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
     data-count="0 / 100"
   >
     <textarea
       class="ant-input"
+      placeholder="can resize"
     />
     <span
       class="ant-input-suffix"
@@ -10385,8 +10472,28 @@ Array [
         0 / 100
       </span>
     </span>
-  </span>,
-]
+  </span>
+  <span
+    class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
+    data-count="0 / 100"
+    style="height: 120px; resize: none;"
+  >
+    <textarea
+      class="ant-input"
+      placeholder="disable resize"
+      style="resize: none;"
+    />
+    <span
+      class="ant-input-suffix"
+    >
+      <span
+        class="ant-input-data-count"
+      >
+        0 / 100
+      </span>
+    </span>
+  </span>
+</div>
 `;
 
 exports[`renders components/input/demo/show-count.tsx extend context correctly 2`] = `[]`;
@@ -10689,52 +10796,6 @@ Array [
 
 exports[`renders components/input/demo/textarea-resize.tsx extend context correctly 2`] = `[]`;
 
-exports[`renders components/input/demo/textarea-show-count.tsx extend context correctly 1`] = `
-Array [
-  <span
-    class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
-    data-count="0 / 100"
-    style="height: 120px; margin-bottom: 24px;"
-  >
-    <textarea
-      class="ant-input"
-      placeholder="can resize"
-    />
-    <span
-      class="ant-input-suffix"
-    >
-      <span
-        class="ant-input-data-count"
-      >
-        0 / 100
-      </span>
-    </span>
-  </span>,
-  <span
-    class="ant-input-affix-wrapper ant-input-textarea-affix-wrapper ant-input-textarea-show-count ant-input-show-count"
-    data-count="0 / 100"
-    style="height: 120px; resize: none;"
-  >
-    <textarea
-      class="ant-input"
-      placeholder="disable resize"
-      style="resize: none;"
-    />
-    <span
-      class="ant-input-suffix"
-    >
-      <span
-        class="ant-input-data-count"
-      >
-        0 / 100
-      </span>
-    </span>
-  </span>,
-]
-`;
-
-exports[`renders components/input/demo/textarea-show-count.tsx extend context correctly 2`] = `[]`;
-
 exports[`renders components/input/demo/tooltip.tsx extend context correctly 1`] = `
 Array [
   <input