feat: add dropdownClassName (#91)

* feat: add dropdownClassName

* chore: code clean

examples/basic.js

@@ -28,7 +28,6 @@ class Demo extends React.Component {
           defaultValue="Hello World"
           onSelect={this.onSelect}
           onFocus={this.onFocus}
-          onBlur={this.onBlur}
         >
           <Option value="light">Light</Option>
           <Option value="bamboo">Bamboo</Option>

src/KeywordTrigger.tsx

@@ -4,6 +4,7 @@ import DropdownMenu from './DropdownMenu';
 import { OptionProps } from './Option';
 
 import { Placement, Direction } from './Mentions';
+import classNames from 'classnames';
 
 const BUILT_IN_PLACEMENTS = {
   bottomRight: {
@@ -50,10 +51,11 @@ interface KeywordTriggerProps {
   transitionName?: string;
   children?: React.ReactElement;
   getPopupContainer?: () => HTMLElement;
+  dropdownClassName?: string;
 }
 
 class KeywordTrigger extends React.Component<KeywordTriggerProps, {}> {
-  public getDropdownPrefix = () => `${this.props.prefixCls}-dropdown`;
+  public getDropdownPrefix = () => classNames(`${this.props.prefixCls}-dropdown`, this.props.dropdownClassName);
 
   public getDropdownElement = () => {
     const { options } = this.props;

src/Mentions.tsx

@@ -43,6 +43,7 @@ export interface MentionsProps extends BaseTextareaAttrs {
   onFocus?: React.FocusEventHandler<HTMLTextAreaElement>;
   onBlur?: React.FocusEventHandler<HTMLTextAreaElement>;
   getPopupContainer?: () => HTMLElement;
+  dropdownClassName?: string;
 }
 interface MentionsState {
   value: string;
@@ -363,6 +364,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
       autoFocus,
       notFoundContent,
       getPopupContainer,
+      dropdownClassName,
       ...restProps
     } = this.props;
 
@@ -416,6 +418,7 @@ class Mentions extends React.Component<MentionsProps, MentionsState> {
                 options={options}
                 visible
                 getPopupContainer={getPopupContainer}
+                dropdownClassName={dropdownClassName}
               >
                 <span>{measurePrefix}</span>
               </KeywordTrigger>

tests/Mentions.spec.jsx

@@ -158,4 +158,10 @@ describe('Mentions', () => {
       ).toBe('Cat');
     });
   });
+
+  it('dropdownClassName should work', () => {
+    const wrapper = createMentions({ dropdownClassName: 'my-dropdown' });
+    simulateInput(wrapper, '@');
+    expect(wrapper.find('.my-dropdown').length).toBeTruthy();
+  });
 });