feat: classNames (#205)

* fix: className should be always on root element

* feat: add classNames

* chore: fix

* chore: fix lint

Author: MadCcc

package.json

@@ -48,9 +48,9 @@
     "@babel/runtime": "^7.22.5",
     "@rc-component/trigger": "^1.5.0",
     "classnames": "^2.2.6",
-    "rc-input": "~1.3.5",
+    "rc-input": "~1.4.0",
     "rc-menu": "~9.12.0",
-    "rc-textarea": "~1.5.0",
+    "rc-textarea": "~1.6.1",
     "rc-util": "^5.34.1"
   },
   "devDependencies": {

src/Mentions.tsx

@@ -23,7 +23,7 @@ import {
 
 type BaseTextareaAttrs = Omit<
   TextAreaProps,
-  'prefix' | 'onChange' | 'onSelect' | 'showCount'
+  'prefix' | 'onChange' | 'onSelect' | 'showCount' | 'classNames'
 >;
 
 export type Placement = 'top' | 'bottom';
@@ -59,6 +59,10 @@ export interface MentionsProps extends BaseTextareaAttrs {
   open?: boolean;
   children?: React.ReactNode;
   options?: DataDrivenOptionProps[];
+  classNames?: {
+    mentions?: string;
+    affixWrapper?: string;
+  };
 }
 
 export interface MentionsRef {
@@ -480,11 +484,12 @@ const Mentions = forwardRef<MentionsRef, MentionsProps>(
     {
       suffix,
       prefixCls = 'rc-mentions',
-      classes,
       defaultValue,
       value: customValue,
       allowClear,
       onChange,
+      classNames: classes,
+      className,
       ...rest
     },
     ref,
@@ -508,21 +513,22 @@ const Mentions = forwardRef<MentionsRef, MentionsProps>(
 
     return (
       <BaseInput
-        inputElement={
-          <InternalMentions
-            prefixCls={prefixCls}
-            ref={ref}
-            onChange={triggerChange}
-            {...rest}
-          />
-        }
         suffix={suffix}
         prefixCls={prefixCls}
-        classes={classes}
         value={mergedValue}
         allowClear={allowClear}
         handleReset={handleReset}
-      />
+        className={className}
+        classNames={classes}
+      >
+        <InternalMentions
+          className={classes?.mentions}
+          prefixCls={prefixCls}
+          ref={ref}
+          onChange={triggerChange}
+          {...rest}
+        />
+      </BaseInput>
     );
   },
 ) as React.ForwardRefExoticComponent<

tests/Mentions.spec.tsx

@@ -264,4 +264,14 @@ describe('Mentions', () => {
     const { container } = render(createMentions({ ref }));
     expect(ref.current.textarea).toBe(container.querySelector('textarea'));
   });
+
+  it('className should always on the root element', () => {
+    const ref = createRef<MentionsRef>();
+    const { container, rerender } = render(
+      createMentions({ ref, className: 'test-cls' }),
+    );
+    expect(container.firstChild).toHaveClass('test-cls');
+    rerender(createMentions({ ref, className: 'test-cls', suffix: '123' }));
+    expect(container.firstChild).toHaveClass('test-cls');
+  });
 });