Merge pull request #105 from Detaysoft/dropdown-item-icon

Dropdown item icon

Author: abdurrahmanekr

README.md

@@ -412,12 +412,27 @@ import { Dropdown } from 'react-chat-elements'
         text: 'Dropdown',
     }}
     items={[
-        'merhaba',
-        'lorem',
-        'ipsum',
-        'dolor',
-        'sit',
-        'amet',
+        {
+            icon: {
+                component: icon,
+                float: 'left',
+                color: 'red',
+                size: 22,
+            },
+            text: 'lorem'
+        },
+        {
+            icon: {
+                component: icon,
+                float: 'left',
+                color: 'purple',
+                size: 22,
+            },
+            text: 'ipsum'
+        },
+        {
+            text: 'dolor'
+        },
     ]}/>
 ```
 

example/App.js

@@ -18,6 +18,8 @@ import FaSearch from 'react-icons/lib/fa/search';
 import FaComments from 'react-icons/lib/fa/comments';
 import FaClose from 'react-icons/lib/fa/close';
 import FaMenu from 'react-icons/lib/md/more-vert';
+import FaSquare from 'react-icons/lib/md/crop-square';
+
 import {
     format,
 } from 'timeago.js';
@@ -133,6 +135,7 @@ export class App extends Component {
                     dropdownMenu: (
                         <Dropdown
                             animationPosition="norteast"
+                            title='Dropdown Title'
                             buttonProps={{
                                 type: "transparent",
                                 color: "#cecece",
@@ -142,9 +145,33 @@ export class App extends Component {
                                 }
                             }}
                             items={[
-                                'Menu Item1',
-                                'Menu Item2',
-                                'Menu Item3',
+                                {
+                                    icon: {
+                                        component: <FaSquare />,
+                                        float: 'left',
+                                        color: 'red',
+                                        size: 22,
+                                    },
+                                    text: 'Menu Item'
+                                },
+                                {
+                                    icon: {
+                                        component: <FaSquare/>,
+                                        float: 'left',
+                                        color: 'purple',
+                                        size: 22,
+                                    },
+                                    text: 'Menu Item'
+                                },
+                                {
+                                    icon: {
+                                        component: <FaSquare/>,
+                                        float: 'left',
+                                        color: 'yellow',
+                                        size: 22,
+                                    },
+                                    text: 'Menu Item'
+                                },
                             ]} />
                     ),
                 };

src/Dropdown/Dropdown.css

@@ -18,6 +18,12 @@
     z-index: 99999;
 }
 
+.rce-dropdown-title {
+    font-size: 14px;
+    color: '#000';
+    font-weight: 500;
+}
+
 .rce-dropdown.dropdown-show{
     animation: dropdown-scaling 0.2s ease forwards;
     display: flex;

src/Dropdown/Dropdown.js

@@ -36,10 +36,27 @@ export class Dropdown extends Component {
                         { 'dropdown-show': this.state.show === true })}>
 
                         <ul>
+                            {
+                                this.props.title &&
+                                <span className='rce-dropdown-title'>{this.props.title}</span>
+                            }
                             {
                                 this.props.items.map((x, i) => (
                                     <li key={i} onMouseDown={(e) => this.props.onSelect(i)}>
-                                        <a>{x}</a>
+                                        {
+                                            x instanceof Object ?
+                                                x.icon ?
+                                                    <span className='rce-button-icon--container'>
+                                                        {(x.icon.float === 'right' || !x.icon.float) && <a>{x.text}</a>}
+
+                                                        <span style={{ float: x.icon.float, color: x.icon.color, fontSize: x.icon.size || 12 }} className={classNames('rce-button-icon', x.icon.className)}>{x.icon.component}</span>
+
+                                                        {x.icon.float === 'left' && <a>{x.text}</a>}
+                                                    </span>
+                                                    : <a>{x.text}</a>
+                                            :
+                                            <a>{x}</a>
+                                        }
                                     </li>
                                 ))
                             }