var builder = require('focus').component.builder;
var React = require('react');
var Img = require('../img').component;
var Icon = require('../icon').component;

var selectActionMixin = {

    /**
     * Display name.
     */
    displayName: 'select-action',
    /**
     * Default props.
     * @returns {object} Defauilt props.
     */
    getDefaultProps: function () {
        return {
            operationList: [],
            style: 'dots-three-vertical'
        };
    },
    /**
     * Handle action on selected item.
     * @param {function} action Action to call
     * @returns {function} Function called when item is selected.
     * @private
     */
    _handleAction: function (action) {
        return (event)=> {
            if (event) {
                event.preventDefault();
            }
            if (this.props.operationParam) {
                action(this.props.operationParam);
            } else {
                action();
            }
        };
    },

    /**
     * Generate the list of actions.
     * @param {object} operationList List of operations.
     * @returns {Array} List of action in li component.
     * @private
     */
    _getList: function (operationList) {
        var liList = [];
        for (var key in operationList) {
            var operation = operationList[key];

            liList.push(<li key={key} onClick={this._handleAction(operation.action)} className={operation.style}><a
                href="javascript:void(0)">{operation.label}</a></li>);
            if (operation.childOperationList) {
                var subKey = 'sub_' + key;
                liList.push(<li key={subKey}>
                    <ul>{this._getList(operation.childOperationList)}</ul>
                </li>);
            }
        }
        return liList;
    },
    _dropdownToggleClickHandler: function () {
        React.findDOMNode(this.refs['dropdown-toggle']).click();
    },
    /**
     * Render the component.
     * @returns  {XML} Htm code.
     */
    render: function renderSelectAcion() {
        if (this.props.operationList.length == 0) {
            return <div/>;
        }
        var liList = this._getList(this.props.operationList);
        return (
            <div className="select-action btn btn-fab btn-default">
                <Icon onClick={this._dropdownToggleClickHandler} name='ellipsis-v'/>
                <div className="dropdown-toggle" data-toggle="dropdown" ref='dropdown-toggle'/>
                <ul className="dropdown-menu">{liList}</ul>
            </div>
        );
    }
};

module.exports = builder(selectActionMixin);

@@ -430,35 +430,25 @@
     
-style: 'dots-three-vertical
+icon: 'ellipsis-v
 '%0A  
@@ -2261,31 +2261,8 @@
 ult%22
-%3E%0A                %3CIcon
  onC
@@ -2304,27 +2304,8 @@
 ler%7D
- name='ellipsis-v'/
 %3E%0A  
@@ -2311,35 +2311,33 @@
                %3C
-div
+a
  className=%22drop
@@ -2393,17 +2393,66 @@
 -toggle'
-/
+%3E%3Ci className=%7B%60fa fa-$%7Bthis.props.icon%7D%60%7D%3E%3C/i%3E%3C/a
 %3E%0A      

Fix bad click behaviour, add icon prop