chore: wrapper also has oor cls (#50)

react-component · Sep 27, 2023 · 7595a5f · 7595a5f
1 parent f667c38
commit 7595a5f
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 2 deletions.
diff --git a/src/Input.tsx b/src/Input.tsx
@@ -149,6 +149,9 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     }
   };
 
+  // ====================== Input =======================
+  const outOfRangeCls = isOutOfRange && `${prefixCls}-out-of-range`;
+
   const getInputElement = () => {
     // Fix https://fb.me/react-unknown-prop
     const otherProps = omit(
@@ -186,7 +189,6 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
           prefixCls,
           {
             [`${prefixCls}-disabled`]: disabled,
-            [`${prefixCls}-out-of-range`]: isOutOfRange,
           },
           classNames?.input,
         )}
@@ -246,7 +248,7 @@ const Input = forwardRef<InputRef, InputProps>((props, ref) => {
     <BaseInput
       {...rest}
       prefixCls={prefixCls}
-      className={className}
+      className={clsx(className, outOfRangeCls)}
       inputElement={getInputElement()}
       handleReset={handleReset}
       value={formatValue}

diff --git a/tests/count.test.tsx b/tests/count.test.tsx
@@ -82,4 +82,33 @@ describe('Input.Count', () => {
     expect(container.querySelector('input')?.value).toEqual('🔥');
     expect(onCompositionEnd).toHaveBeenCalled();
   });
+
+  describe('cls', () => {
+    it('raw', () => {
+      const { container } = render(
+        <Input
+          count={{
+            max: 3,
+          }}
+          defaultValue="bamboo"
+        />,
+      );
+
+      expect(container.querySelector('.rc-input-out-of-range')).toBeTruthy();
+    });
+
+    it('wrapper', () => {
+      const { container } = render(
+        <Input
+          count={{
+            max: 3,
+            show: true,
+          }}
+          defaultValue="bamboo"
+        />,
+      );
+
+      expect(container.querySelector('.rc-input-out-of-range')).toBeTruthy();
+    });
+  });
 });