feat(DropdownItem): Add support for .dropdown-item-text (reactstrap#1971

) * feat(DropdownItem): Add support for .dropdown-item-text * fix missing semicolon
kyle-brygga-io · Oct 7, 2020 · c41b172 · c41b172
1 parent d937d78
commit c41b172
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 6 deletions.
diff --git a/docs/lib/Components/DropdownsPage.js b/docs/lib/Components/DropdownsPage.js
@@ -110,7 +110,8 @@ DropdownItem.propTypes = {
   onClick: PropTypes.func,
   className: PropTypes.string,
   cssModule: PropTypes.object,
-  toggle: PropTypes.bool // default: true
+  toggle: PropTypes.bool, // default: true
+  text: PropTypes.bool
 };`}
           </PrismCode>
         </pre>
@@ -172,6 +173,12 @@ DropdownItem.propTypes = {
 {'<DropdownItem disabled>Action</DropdownItem>'}
           </PrismCode>
         </pre>
+        <SectionTitle>Plaintext Menu Items</SectionTitle>
+        <pre>
+          <PrismCode className="language-jsx">
+{'<DropdownItem text>Dropdown item text</DropdownItem>'}
+          </PrismCode>
+        </pre>
         <SectionTitle>Sizing</SectionTitle>
         <div className="docs-example">
           <div>

diff --git a/docs/lib/examples/Dropdown.js b/docs/lib/examples/Dropdown.js
@@ -14,6 +14,7 @@ const Example = (props) => {
       <DropdownMenu>
         <DropdownItem header>Header</DropdownItem>
         <DropdownItem>Some Action</DropdownItem>
+        <DropdownItem text>Dropdown Item Text</DropdownItem>
         <DropdownItem disabled>Action (disabled)</DropdownItem>
         <DropdownItem divider />
         <DropdownItem>Foo Action</DropdownItem>

diff --git a/src/DropdownItem.js b/src/DropdownItem.js
@@ -14,7 +14,8 @@ const propTypes = {
   onClick: PropTypes.func,
   className: PropTypes.string,
   cssModule: PropTypes.object,
-  toggle: PropTypes.bool
+  toggle: PropTypes.bool,
+  text: PropTypes.bool
 };
 
 const defaultProps = {
@@ -31,7 +32,8 @@ class DropdownItem extends React.Component {
   }
 
   onClick(e) {
-    if (this.props.disabled || this.props.header || this.props.divider) {
+    const { disabled, header, divider, text } = this.props;
+    if (disabled || header || divider || text) {
       e.preventDefault();
       return;
     }
@@ -46,7 +48,8 @@ class DropdownItem extends React.Component {
   }
 
   getTabIndex() {
-    if (this.props.disabled || this.props.header || this.props.divider) {
+    const { disabled, header, divider, text } = this.props;
+    if (disabled || header || divider || text) {
       return '-1';
     }
 
@@ -63,16 +66,18 @@ class DropdownItem extends React.Component {
       tag: Tag,
       header,
       active,
+      text,
       ...props } = omit(this.props, ['toggle']);
 
     const classes = mapToCssModules(classNames(
       className,
       {
         disabled: props.disabled,
-        'dropdown-item': !divider && !header,
+        'dropdown-item': !divider && !header && !text,
         active: active,
         'dropdown-header': header,
-        'dropdown-divider': divider
+        'dropdown-divider': divider,
+        'dropdown-item-text': text
       }
     ), cssModule);
 
@@ -83,6 +88,8 @@ class DropdownItem extends React.Component {
         Tag = 'div';
       } else if (props.href) {
         Tag = 'a';
+      } else if (text) {
+        Tag = 'span';
       }
     }
 

diff --git a/src/__tests__/DropdownItem.spec.js b/src/__tests__/DropdownItem.spec.js
@@ -64,6 +64,14 @@ describe('DropdownItem', () => {
     expect(wrapper.text()).toBe('Home');
   });
 
+  it('should render dropdown item text', () => {
+    const wrapper = mount(<DropdownItem text>text</DropdownItem>);
+
+    expect(wrapper.find('span').hostNodes().length).toBe(1);
+    expect(wrapper.find('span').hostNodes().hasClass('dropdown-item-text')).toBe(true);
+    expect(wrapper.text()).toBe('text');
+  });
+
   describe('header', () => {
     it('should render h6 tag heading', () => {
       const wrapper = mount(<DropdownItem header>Heading</DropdownItem>);