content: import React from 'react';
  import {BaseMixin, ElementaryMixin, SectionMixin, Tools} from './../../common/common.js';
  
  
  import './item-list.less';
  
  export default React.createClass({
  
    //@@viewOn:mixins
    mixins: [
      BaseMixin,
      ElementaryMixin,
  
      SectionMixin
    ],
    //@@viewOff:mixins
  
    //@@viewOn:statics
    statics: {
      tagName: "UU5.Forms.ItemList",
      classNames: {
        main: "uu5-forms-item-list",
        header: "uu5-forms-item-list-header",
        body: "uu5-forms-item-list-body",
        footer: "uu5-forms-item-list-footer",
        selectedItem: "uu5-forms-item-list-selected uu5-common-bg"
      },
      defaults: {
        childTagName: 'UU5.Forms.Select.option'
      }
    },
    //@@viewOff:statics
  
    //@@viewOn:propTypes
    propTypes: {
      allowTags: React.PropTypes.array
    },
    //@@viewOff:propTypes
  
    //@@viewOn:getDefaultProps
    getDefaultProps: function () {
      return {
        allowTags: []
      };
    },
    //@@viewOff:getDefaultProps
  
    //@@viewOn:standardComponentLifeCycle
    //@@viewOff:standardComponentLifeCycle
  
    //@@viewOn:interface
    changeValue (index, e, setStateCallback) {
      if (typeof this.props.onChange === 'function') {
        this.props.onChange({value: index, event: e, component: this, setStateCallback: setStateCallback});
      }
    },
    //@@viewOff:interface
  
    //@@viewOn:overridingMethods
    shouldChildRender_: function (child) {
      var childTagName = Tools.getChildTagName(child);
      var childTagNames = this.props.allowTags.concat(this.getDefault().childTagName);
      return childTagNames.indexOf(childTagName) > -1;
    },
  
    expandChildProps_: function (child, i) {
      var props = Tools.mergeDeep({}, child.props);
  
      if (this.props.value && this.props.value.indexOf(i) > -1) {
        props.selected = true;
        props.className = props.className ? props.className + ' ' + this.getClassName().selectedItem : this.getClassName().selectedItem;
        props.colorSchema = 'info';
      }
  
      props.mainAttrs = props.mainAttrs || {};
      props.mainAttrs.id = this.getId() + '-item-' + i;
  
  
      var childOnClick = props.onClick;
      props.onClick = (opt) => {
        this.changeValue(opt.value, opt.event, childOnClick);
      };
  
      return props;
    },
    //@@viewOff:overridingMethods
  
    //@@viewOn:componentSpecificHelpers
    _getHeader(){
      let result;
      if(this.props.header) {
        result = <div className={this.getClassName().header}>
          {this.getHeader()}
        </div>;
      }
      return result;
    },
  
    _getFooter(){
      let result;
      if(this.props.footer) {
        result = <div className={this.getClassName().footer}>
          {this.getFooter()}
        </div>;
      }
      return result;
    },
    //@@viewOff:componentSpecificHelpers
  
    //@@viewOn:render
    render: function () {
      return (
        <div {...this.getMainAttrs()}>
          {this._getHeader()}
          <div className={this.getClassName().body}>
            {this.getChildren()}
          </div>
          {this._getFooter()}
        </div>
      );
    }
    //@@viewOn:render
  });