feat: support classnames and styles (#289)

* feat: support classnames and styles

* add test

* Update tests/Mentions.spec.tsx

* update to update to popupClassName

* fix

* update snap

Author: thinkasany

docs/examples/onScroll.tsx

@@ -8,7 +8,7 @@ export default () => (
     rows={3}
     defaultValue="Hello @ World @"
     onPopupScroll={console.log}
-    dropdownClassName="on-scroll"
+    popupClassName="on-scroll"
     open
     options={Array.from({ length: 1000 }).map((_, index) => ({
       value: `item-${index}`,

package.json

@@ -45,7 +45,7 @@
     ]
   },
   "dependencies": {
-    "@rc-component/input": "~1.0.0",
+    "@rc-component/input": "~1.0.1",
     "@rc-component/menu": "~1.0.0",
     "@rc-component/textarea": "~1.0.0",
     "@rc-component/trigger": "^3.0.0",

src/KeywordTrigger.tsx

@@ -50,7 +50,8 @@ interface KeywordTriggerProps {
   transitionName?: string;
   children?: React.ReactElement;
   getPopupContainer?: () => HTMLElement;
-  dropdownClassName?: string;
+  popupClassName?: string;
+  popupStyle?: React.CSSProperties;
 }
 
 const KeywordTrigger: FC<KeywordTriggerProps> = props => {
@@ -61,7 +62,8 @@ const KeywordTrigger: FC<KeywordTriggerProps> = props => {
     visible,
     transitionName,
     getPopupContainer,
-    dropdownClassName,
+    popupClassName,
+    popupStyle,
     direction,
     placement,
   } = props;
@@ -91,7 +93,8 @@ const KeywordTrigger: FC<KeywordTriggerProps> = props => {
       popupMotion={{ motionName: transitionName }}
       builtinPlacements={BUILT_IN_PLACEMENTS}
       getPopupContainer={getPopupContainer}
-      popupClassName={dropdownClassName}
+      popupClassName={popupClassName}
+      popupStyle={popupStyle}
     >
       {children}
     </Trigger>

src/Mentions.tsx

@@ -64,13 +64,19 @@ export interface MentionsProps extends BaseTextareaAttrs {
   onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
   onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
   getPopupContainer?: () => HTMLElement;
-  dropdownClassName?: string;
+  popupClassName?: string;
   /** @private Testing usage. Do not use in prod. It will not work as your expect. */
   open?: boolean;
   children?: React.ReactNode;
   options?: DataDrivenOptionProps[];
   classNames?: CommonInputProps['classNames'] & {
     mentions?: string;
+    textarea?: string;
+    popup?: string;
+  };
+  styles?: {
+    textarea?: React.CSSProperties;
+    popup?: React.CSSProperties;
   };
   onPopupScroll?: (event: React.UIEvent<HTMLDivElement>) => void;
 }
@@ -92,6 +98,8 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
       prefixCls,
       className,
       style,
+      classNames: mentionClassNames,
+      styles,
 
       // Misc
       prefix = '@',
@@ -123,7 +131,7 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
       placement,
       direction,
       getPopupContainer,
-      dropdownClassName,
+      popupClassName,
 
       rows = 1,
 
@@ -473,6 +481,8 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
         ref={containerRef}
       >
         <TextArea
+          classNames={{ textarea: mentionClassNames?.textarea }}
+          styles={{ textarea: styles?.textarea }}
           ref={textareaRef}
           value={mergedValue}
           {...restProps}
@@ -506,7 +516,11 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
                 options={mergedOptions}
                 visible
                 getPopupContainer={getPopupContainer}
-                dropdownClassName={dropdownClassName}
+                popupClassName={classNames(
+                  popupClassName,
+                  mentionClassNames?.popup,
+                )}
+                popupStyle={styles?.popup}
               >
                 <span>{mergedMeasurePrefix}</span>
               </KeywordTrigger>
@@ -530,7 +544,8 @@ const Mentions = forwardRef<MentionsRef, MentionsProps>(
       value: customValue,
       allowClear,
       onChange,
-      classNames: classes,
+      classNames: mentionsClassNames,
+      styles,
       className,
       disabled,
       onClear,
@@ -573,13 +588,15 @@ const Mentions = forwardRef<MentionsRef, MentionsProps>(
         allowClear={allowClear}
         handleReset={handleReset}
         className={className}
-        classNames={classes}
+        classNames={mentionsClassNames}
         disabled={disabled}
         ref={holderRef}
         onClear={onClear}
       >
         <InternalMentions
-          className={classes?.mentions}
+          className={mentionsClassNames?.mentions}
+          styles={styles}
+          classNames={mentionsClassNames}
           prefixCls={prefixCls}
           ref={mentionRef}
           onChange={triggerChange}

tests/Mentions.spec.tsx

@@ -258,15 +258,41 @@ describe('Mentions', () => {
     });
   });
 
-  it('dropdownClassName should work', () => {
+  it('popupClassName should work', () => {
     const { container, baseElement } = renderMentions({
-      dropdownClassName: 'my-dropdown',
+      popupClassName: 'my-dropdown',
     });
     simulateInput(container, '@');
     expect(
       baseElement.querySelector('.my-dropdown.rc-mentions-dropdown'),
     ).toBeTruthy();
   });
+  it('classNames and styles should work', () => {
+    const { container, baseElement } = renderMentions({
+      classNames: {
+        popup: 'test-popup',
+        textarea: 'test-textarea',
+      },
+      styles: {
+        popup: { background: 'red' },
+        textarea: { background: 'blue' },
+      },
+    });
+    simulateInput(container, '@');
+    expect(
+      baseElement.querySelector('.test-popup.rc-mentions-dropdown'),
+    ).toBeTruthy();
+    expect(
+      (
+        baseElement.querySelector(
+          '.test-popup.rc-mentions-dropdown',
+        ) as HTMLElement
+      ).style.background,
+    ).toBe('red');
+    const textarea = baseElement.querySelector('.rc-textarea');
+    expect(textarea).toHaveClass('test-textarea');
+    expect(textarea).toHaveStyle('background: blue');
+  });
 
   it('should support direction', () => {
     const { container, baseElement } = renderMentions({ direction: 'rtl' });

tests/__snapshots__/AllowClear.spec.tsx.snap

@@ -17,6 +17,7 @@ exports[`should support allowClear should not show icon if defaultValue is undef
   >
     <button
       class="rc-mentions-clear-icon rc-mentions-clear-icon-hidden"
+      tabindex="-1"
       type="button"
     >
       ✖
@@ -42,6 +43,7 @@ exports[`should support allowClear should not show icon if defaultValue is undef
   >
     <button
       class="rc-mentions-clear-icon rc-mentions-clear-icon-hidden"
+      tabindex="-1"
       type="button"
     >
       ✖
@@ -67,6 +69,7 @@ exports[`should support allowClear should not show icon if defaultValue is undef
   >
     <button
       class="rc-mentions-clear-icon rc-mentions-clear-icon-hidden"
+      tabindex="-1"
       type="button"
     >
       ✖
@@ -92,6 +95,7 @@ exports[`should support allowClear should not show icon if value is undefined, n
   >
     <button
       class="rc-mentions-clear-icon rc-mentions-clear-icon-hidden"
+      tabindex="-1"
       type="button"
     >
       ✖
@@ -117,6 +121,7 @@ exports[`should support allowClear should not show icon if value is undefined, n
   >
     <button
       class="rc-mentions-clear-icon rc-mentions-clear-icon-hidden"
+      tabindex="-1"
       type="button"
     >
       ✖
@@ -142,6 +147,7 @@ exports[`should support allowClear should not show icon if value is undefined, n
   >
     <button
       class="rc-mentions-clear-icon rc-mentions-clear-icon-hidden"
+      tabindex="-1"
       type="button"
     >
       ✖