diff --git a/examples/basic.js b/examples/basic.js index 5d5eb6c..4beca48 100644 --- a/examples/basic.js +++ b/examples/basic.js @@ -28,7 +28,6 @@ class Demo extends React.Component { defaultValue="Hello World" onSelect={this.onSelect} onFocus={this.onFocus} - onBlur={this.onBlur} > diff --git a/src/KeywordTrigger.tsx b/src/KeywordTrigger.tsx index 6de0152..48cab1b 100644 --- a/src/KeywordTrigger.tsx +++ b/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 { - public getDropdownPrefix = () => `${this.props.prefixCls}-dropdown`; + public getDropdownPrefix = () => classNames(`${this.props.prefixCls}-dropdown`, this.props.dropdownClassName); public getDropdownElement = () => { const { options } = this.props; diff --git a/src/Mentions.tsx b/src/Mentions.tsx index d9995ab..1769e66 100644 --- a/src/Mentions.tsx +++ b/src/Mentions.tsx @@ -43,6 +43,7 @@ export interface MentionsProps extends BaseTextareaAttrs { onFocus?: React.FocusEventHandler; onBlur?: React.FocusEventHandler; getPopupContainer?: () => HTMLElement; + dropdownClassName?: string; } interface MentionsState { value: string; @@ -363,6 +364,7 @@ class Mentions extends React.Component { autoFocus, notFoundContent, getPopupContainer, + dropdownClassName, ...restProps } = this.props; @@ -416,6 +418,7 @@ class Mentions extends React.Component { options={options} visible getPopupContainer={getPopupContainer} + dropdownClassName={dropdownClassName} > {measurePrefix} diff --git a/tests/Mentions.spec.jsx b/tests/Mentions.spec.jsx index 81496ba..4ba54dc 100644 --- a/tests/Mentions.spec.jsx +++ b/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(); + }); });