set land card with dropdown styled

src/app/common/component/dropdown/dropdown-component.js

@@ -1,48 +1,70 @@
 import React, { PropTypes } from 'react'
 import { Dropdown, MenuItem } from 'react-bootstrap'
 import LucioleComponent from './../../core/abstract/luciole-component'
-import MainLangToggle from './main-lang-toggle-component'
-import MainLangMenu from './main-lang-menu-component'
+import LuDropdownToggle from './dropdown-toggle-component'
+import LuDropdownMenu from './dropdown-menu-component'
 
 /**
  * LuDropDown Component
  * A component to manage dropdown lists
  */
 class LuDropDown extends LucioleComponent {
 
+  /**
+   * Create a new LuDropDown component
+   * @param  {Object} props The component properties
+   * @param  {Object} context The app context
+   */
+  /* istanbul ignore next */
+  constructor (props, context) {
+    super(props, context)
+    this._bindThisToMethods('getMenuItems')
+  }
+
   /**
    * Render the component
    * @return {Object} React component tree
    */
   render () {
+    const menuItemList = this.getMenuItems()
     return (
-      <Dropdown open={this.props.open} onToggle={this.props.onToggle}
-        className={this.props.dropdownClass}>
-        <MainLangToggle bsRole='toggle'>
-          {this.props.children}
-        </MainLangToggle>
-        <MainLangMenu bsRole='menu'>
-          <MenuItem onSelect={this.onSelect} eventKey='FR'>FR</MenuItem>
-          <MenuItem onSelect={this.onSelect} eventKey='EN'>EN</MenuItem>
-          <MenuItem onSelect={this.onSelect} eventKey='DE'>DE</MenuItem>
-        </MainLangMenu>
-      </Dropdown>
+      <div className={this.props.containerClass}>
+        <Dropdown open={this.props.open}
+          onToggle={this.props.onToggle}
+          className={this.props.dropdownClass} id={this.props.id} >
+          <LuDropdownToggle bsRole='toggle'>
+            {this.props.children}
+          </LuDropdownToggle>
+          <LuDropdownMenu bsRole='menu' listClass={this.props.listClass} >
+            {menuItemList}
+          </LuDropdownMenu>
+        </Dropdown>
+      </div>
     )
   }
+
+  getMenuItems () {
+    const itemList = []
+    this.props.choices.forEach((choice, index) => {
+      itemList.push(<MenuItem key={index} onSelect={this.props.onSelect} eventKey={choice.key}>{choice.label}</MenuItem>)
+    })
+    return itemList
+  }
 }
 
 /**
  * The component properties' types
  * @type {Object}
  */
 LuDropDown.propTypes = {
-  containerClass: PropTypes.string,
-  listClass: PropTypes.string,
-  open: PropTypes.boolean.isRequired,
+  id: PropTypes.string.isRequired,
+  open: PropTypes.bool.isRequired,
   choices: PropTypes.array.isRequired,
   currSelected: PropTypes.string.isRequired,
-  onSelect: PropTypes.func,
-  onToggle: PropTypes.func
+  onToggle: PropTypes.func.isRequired,
+  onSelect: PropTypes.func.isRequired,
+  containerClass: PropTypes.string,
+  listClass: PropTypes.string
 }
 
 /**

src/app/common/component/dropdown/dropdown-menu-component.js

@@ -0,0 +1,35 @@
+import React, { PropTypes } from 'react'
+import LucioleComponent from './../../core/abstract/luciole-component'
+
+/**
+ * LuDropdownMenu Component
+ */
+class LuDropdownMenu extends LucioleComponent {
+
+  /**
+   * Render the component
+   * @return {Object} React component tree
+   */
+  render () {
+    return (
+      <div className='dropdown-menu'>
+        <ul className={this.props.listClass}>
+           {this.props.children}
+        </ul>
+      </div>
+    )
+  }
+}
+
+/**
+ * The component properties' types
+ * @type {Object}
+ */
+LuDropdownMenu.propTypes = {
+  listClass: PropTypes.string
+}
+
+/**
+ * Export the component
+ */
+export default LuDropdownMenu

src/app/common/component/dropdown/dropdown-toggle-component.js

@@ -0,0 +1,47 @@
+import React from 'react'
+import LucioleComponent from './../../core/abstract/luciole-component'
+
+/**
+ * LuDropdownToggle Component
+ */
+class LuDropdownToggle extends LucioleComponent {
+
+  /**
+   * Create a new LuDropdownToggle component
+   * @param  {Object} props The component properties
+   * @param  {Object} context The app context
+   */
+  /* istanbul ignore next */
+  constructor (props, context) {
+    super(props, context)
+    this._bindThisToMethods('handleClick')
+  }
+
+  handleClick (e) {
+    e.preventDefault()
+    this.props.onClick(e)
+  }
+
+  /**
+   * Render the component
+   * @return {Object} React component tree
+   */
+  render () {
+    return (
+      <div onClick={this.handleClick}>
+        {this.props.children}
+      </div>
+    )
+  }
+}
+
+/**
+ * The component properties' types
+ * @type {Object}
+ */
+LuDropdownToggle.propTypes = {}
+
+/**
+ * Export the component
+ */
+export default LuDropdownToggle

src/app/module/main/component/main-lang-card-component.js

@@ -1,49 +1,45 @@
 import React, { PropTypes } from 'react'
-import FontAwesome from 'react-fontawesome'
-import { Dropdown, MenuItem } from 'react-bootstrap'
 import LucioleComponent from './../../../common/core/abstract/luciole-component'
-import MainLangToggle from './main-lang-toggle-component'
-import MainLangMenu from './main-lang-menu-component'
+import LuDropDown from './../../../common/component/dropdown/dropdown-component'
+import FontAwesome from 'react-fontawesome'
+
 /**
  * MainLangCard Component
  */
 class MainLangCard extends LucioleComponent {
 
   constructor (props, context) {
     super(props, context)
-    this._bindThisToMethods('handleClick', 'onToggle')
-    this.defaultOpen = false
-    this.isopen = !!this.defaultOpen
+    this._bindThisToMethods('handleClick', 'handleToogle')
   }
 
   handleClick (key) {
     console.log('got his', key)
-    this.isopen = false
   }
 
-  onToggle () {
-    this.isopen = true
+  handleToogle () {
+    console.log('open/close')
   }
 
   /**
    * Render the component
    * @return {Object} React component tree
    */
   render () {
+    const choices = [
+      {key: '1', label: 'FR'},
+      {key: '2', label: 'DE'},
+      {key: '3', label: 'FE'},
+      {key: '4', label: 'DDF4'}
+    ]
     return (
-      <Dropdown open={true} onToggle={this.onToggle}
-        id='dropdown-custom-menu' className='hand-over main-lang-card'>
-        <MainLangToggle bsRole='toggle'>
-          <FontAwesome name='globe' />
-          <p className='lang-style'>{this.props.currentLang}</p>
-          <FontAwesome name='angle-down' />
-        </MainLangToggle>
-        <MainLangMenu bsRole='menu'>
-          <MenuItem className='myitemremovethis' onSelect={this.handleClick} eventKey='FR'>FR</MenuItem>
-          <MenuItem onSelect={this.handleClick} eventKey='EN'>EN</MenuItem>
-          <MenuItem onSelect={this.handleClick} eventKey='DE'>DE</MenuItem>
-        </MainLangMenu>
-      </Dropdown>
+      <LuDropDown open id='myid' choices={choices} currSelected='curr'
+        containerClass='hand-over main-lang-card' listClass='dpd-lang-list'
+        onToggle={this.handleToogle} onSelect={this.handleClick}>
+        <FontAwesome name='globe' />
+        <p className='lang-style'>{this.props.currentLang}</p>
+        <FontAwesome name='angle-down' />
+      </LuDropDown>
     )
   }
 }

src/app/module/main/container/main-container.js

@@ -1,6 +1,6 @@
 import React, { PropTypes } from 'react'
 import { connect } from 'react-redux'
-import {bindActionCreators} from 'redux'
+import { bindActionCreators } from 'redux'
 import SidebarActions from './../../sidebar/action/sidebar-action'
 import MainPageSidebarBurger from './../component/main-sidebar-burger-component'
 import MainPageUserCard from './../component/main-user-card-component'

src/styles/app-container.scss

@@ -84,16 +84,30 @@ $app-text-font: 'Play', serif;
 * DROPDOWN
 * *****************************/
 .dropdown-menu{
-  background-color: $app-button-hover-color;
+  background-color: $sidebar-second-bg-color;
   min-width: 100% !important;
 }
 
-.mylistremovethis{
-}
-
-.myitemremovethis{
-  background-color: red;
-  &:hover{
-    background-color: $app-button-bg-color;
+.dpd-lang-list{
+  list-style-type: none;
+  padding: 10px 10px 0 0;
+  width: 100% !important;
+  li{
+    width: 100%;
+    margin-left: 5px;
+    a{
+      text-decoration: none !important;
+      margin: 0px;
+      display: block;
+      width: 100%;
+      height: 100%;
+      &:hover{
+        color:$app-text-third-color;
+      }
+    }
+    &:hover{
+      background-color: $sidebar-primary-bg-color;
+      color: red;
+    }
   }
 }