// Dependencies
const React = require('react');
import builder from 'focus-core/component/builder';
const {reduce} = require('lodash/collection');

// Components

import Button from '../../components/button';
const SelectAction = require('../../common/select-action').component;

const actionContextualMixin = {

    /**
    * Display name.
    */
    displayName: 'ActionContextual',

    /**
    * Init default props.
    * @returns {object} Default props.
    */
    getDefaultProps() {
        return {
            buttonComponent: Button,
            operationList: [],
            operationParam: undefined
        };
    },
    /**
    * Init default state.
    * @returns {oject} Initial state.
    */
    getInitialState() {
        return {
            isSecondaryActionListExpanded: false // true if secondary actionList is expanded.
        };
    },

    /**
    * Handle contextual action on click.
    * @param {string} key Action key.
    * @return {function} action handler.
    */
    _handleAction(key) {
        const {operationList, operationParam} = this.props;
        return event => {
            event.preventDefault();
            event.stopPropagation();
            if (operationParam) {
                operationList[key].action(operationParam);
            } else {
                operationList[key].action();
            }
        };
    },


    /**
    * render the component.
    * @returns {JSX} Html code.
    */
    render() {
        const {operationList, operationParam, buttonComponent} = this.props;
        const {isSecondaryActionListExpanded} = this.state;
        const {primaryActionList, secondaryActionList} = reduce(operationList, (actionLists, operation, key) => {
            let {primaryActionList: primaryActions, secondaryActionList: secondaryActions} = actionLists;
            if (1 === operation.priority) {
                primaryActions.push(
                    <this.props.buttonComponent
                        handleOnClick={this._handleAction(key)}
                        icon={operation.icon}
                        iconLibrary={operation.iconLibrary}
                        key={key}
                        label={operation.label}
                        shape={operation.style && operation.style.shape || 'icon'}
                        style={operation.style || {}}
                        type='button'
                        {...this.props}
                        {...operation}
                        />
                );
            } else {
                secondaryActions.push(operation);
            }
            return actionLists;
        }, {primaryActionList: [], secondaryActionList: []}, this);
        return (
            <div className='list-action-contextual'>
                <span>{primaryActionList}</span>
                <SelectAction
                    isExpanded={isSecondaryActionListExpanded}
                    operationList={secondaryActionList}
                    operationParam={operationParam}
                    />
            </div>
        );
    }
};

module.exports = builder(actionContextualMixin);

@@ -13,20 +13,21 @@
 ies%0A
-cons
+impor
 t React 
 = re
@@ -26,26 +26,20 @@
 act 
-= require(
+from 
 'react'
-)
 ;%0Aim
@@ -92,33 +92,31 @@
 r';%0A
-cons
+impor
 t %7B
+ 
 reduce
-%7D = require(
+ %7D from 
 'lod
@@ -134,12 +134,10 @@
 ion'
-)
 ;%0A
-%0A
 // C
@@ -146,17 +146,16 @@
 ponents%0A
-%0A
 import B
@@ -192,21 +192,37 @@
 utton';%0A
-const
+import %7B component as
  SelectA
@@ -231,18 +231,15 @@
 ion 
-= require(
+%7D from 
 '../
@@ -266,19 +266,8 @@
 ion'
-).component
 ;%0A%0Ac
@@ -616,16 +616,17 @@
 %0A    %7D,%0A
+%0A
     /**%0A
@@ -1017,32 +1017,33 @@
 %0A        const %7B
+ 
 operationList, o
@@ -1055,16 +1055,17 @@
 ionParam
+ 
 %7D = this
@@ -1363,17 +1363,16 @@
     %7D,%0A%0A
-%0A
     /**%0A
@@ -1468,16 +1468,17 @@
  const %7B
+ 
 operatio
@@ -1515,16 +1515,17 @@
 omponent
+ 
 %7D = this
@@ -1547,16 +1547,17 @@
  const %7B
+ 
 isSecond
@@ -1577,16 +1577,17 @@
 Expanded
+ 
 %7D = this
@@ -1609,16 +1609,17 @@
  const %7B
+ 
 primaryA
@@ -1648,16 +1648,17 @@
 tionList
+ 
 %7D = redu
@@ -1727,16 +1727,17 @@
    let %7B
+ 
 primaryA
@@ -1800,16 +1800,17 @@
 yActions
+ 
 %7D = acti
@@ -2449,28 +2449,24 @@
 .operation%7D%0A
-    
             
@@ -2468,32 +2468,32 @@
              /%3E%0A
+
                 
@@ -2624,16 +2624,17 @@
     %7D, %7B
+ 
 primaryA
@@ -2671,16 +2671,17 @@
 List: %5B%5D
+ 
 %7D, this)
@@ -3002,20 +3002,16 @@
 nParam%7D%0A
-    
         
@@ -3013,32 +3013,32 @@
              /%3E%0A
+
             %3C/di
@@ -3065,22 +3065,34 @@
 %7D;%0A%0A
-module.exports
+const %7B component, mixin %7D
  = b
@@ -3118,12 +3118,78 @@
 tualMixin);%0A
+export %7B component, mixin %7D;%0Aexport default %7B component, mixin %7D;%0A

clean list/action-contextual