ssc-refer/es/refer/ReferList.react.js

React refer component for SSC 3.0

'use strict';

import _extends from 'babel-runtime/helpers/extends';
import { pick, filter } from 'lodash';
import React, { PropTypes } from 'react';

import List from './List.react';
import ListItem from './ListItem.react';

import { Breadcrumb } from 'react-bootstrap';

var ReferList = React.createClass({
  displayName: 'ReferList',

  /**
   * In addition to the propTypes below, the following props are automatically
   * passed down by `Typeahead`:
   *
   *  - labelKey
   *  - onPaginate
   *  - options
   *  - paginate
   *  - text
   */
  propTypes: {
    /**
     * Provides the ability to specify a prefix before the user-entered text to
     * indicate that the selection will be new. No-op unless `allowNew={true}`.
     */
    newSelectionPrefix: PropTypes.string,
    /**
     * Provides a hook for customized rendering of menu item contents.
     */
    renderMenuItemChildren: PropTypes.func
  },

  getDefaultProps: function getDefaultProps() {
    return {
      newSelectionPrefix: 'New selection: '
    };
  },
  getInitialState: function getInitialState() {
    var options = this.props.options;

    var defaultNav = filter(options, { "isLeaf": "false", pid: "" });
    var defaultContent = filter(options, function (item) {
      return true;
    });

    return {
      navList: defaultNav,
      contentList: defaultContent
    };
  },
  render: function render() {
    var menuProps = pick(this.props, ['align', 'className', 'dropup', 'emptyLabel', 'maxHeight', 'onPaginate', 'paginate', 'paginationText', 'style']);

    return React.createElement(
      List,
      menuProps,
      this._renderNavBar(this.state.navList),
      this.state.contentList.map(this._renderListItem)
    );
  },
  _renderNavBar: function _renderNavBar(dataList) {
    var _this = this;

    var navBar = React.createElement(
      Breadcrumb,
      null,
      dataList.map(function (item) {
        return React.createElement(
          Breadcrumb.Item,
          { href: 'javascript:void(0)', onClick: _this._handleChangeStatus },
          item.name
        );
      })
    );

    return navBar;
  },
  _renderListItem: function _renderListItem(option, idx) {
    var _props = this.props,
        labelKey = _props.labelKey,
        renderMenuItemChildren = _props.renderMenuItemChildren;


    var menuItemProps = {
      disabled: option.disabled,
      key: idx,
      option: option,
      position: idx,
      className: 'col-md-6 openLi',
      labelKey: labelKey
    };

    return renderMenuItemChildren ? React.createElement(
      ListItem,
      menuItemProps,
      renderMenuItemChildren(option, this.props, idx)
    ) : React.createElement(
      ListItem,
      _extends({ changeStatus: this._handleChangeStatus }, menuItemProps),
      option
    );
  },
  _handleChangeStatus: function _handleChangeStatus(option) {
    this._changeNav(option);
    this._changelist(option);
  },
  _changeNav: function _changeNav(option) {
    var navList = this.state.navList;
    navList.push(option);
    this.setState({
      navList: navList
    });
  },
  _changelist: function _changelist(option) {
    var options = this.props.options;

    var currentList = filter(options, function (item) {
      return item.pid === option.id;
    });
    this.setState({
      contentList: currentList
    });
  }
});

export default ReferList;