cuz/lib/components/Category/Category.js

Front-end modular development kit.

'use strict';

var _objectWithoutProperties = require('babel-runtime/helpers/object-without-properties')['default'];

var _extends = require('babel-runtime/helpers/extends')['default'];

var _interopRequireDefault = require('babel-runtime/helpers/interop-require-default')['default'];

exports.__esModule = true;

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _Button = require('../Button');

var _Button2 = _interopRequireDefault(_Button);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _reactBootstrap = require('react-bootstrap');

var _CategoryGroup = require('./CategoryGroup');

var _CategoryGroup2 = _interopRequireDefault(_CategoryGroup);

var _CategoryItem = require('./CategoryItem');

var _CategoryItem2 = _interopRequireDefault(_CategoryItem);

function getChildLength(_x, _x2) {
  var _again = true;

  _function: while (_again) {
    var data = _x,
        length = _x2;
    _again = false;

    if (data[0].children === undefined) {
      return length;
    }
    _x = data[0].children;
    _x2 = length + 1;
    _again = true;
    continue _function;
  }
}

function getChild(_x3, _x4, _x5, _x6) {
  var _again2 = true;

  _function2: while (_again2) {
    var index = _x3,
        start = _x4,
        key = _x5,
        indexArray = _x6;
    _again2 = false;

    if (index < 1) {
      return key;
    }
    if (indexArray[start] === undefined) {
      indexArray[start] = 0;
    }
    _x3 = index - 1;
    _x4 = start + 1;
    _x5 = key[indexArray[start]].children;
    _x6 = indexArray;
    _again2 = true;
    continue _function2;
  }
}

var Category = _react2['default'].createClass({
  displayName: 'Category',

  propTypes: {
    children: _react2['default'].PropTypes.any,
    className: _react2['default'].PropTypes.string,
    confirmButton: _react2['default'].PropTypes.bool,
    cancelButton: _react2['default'].PropTypes.bool,
    onSelect: _react2['default'].PropTypes.func,
    onCancel: _react2['default'].PropTypes.func,
    onHover: _react2['default'].PropTypes.func,
    hide: _react2['default'].PropTypes.bool,
    open: _react2['default'].PropTypes.bool,
    triggerType: _react2['default'].PropTypes.string,
    confirmText: _react2['default'].PropTypes.string,
    cancelText: _react2['default'].PropTypes.string,
    data: _react2['default'].PropTypes.array
  },

  getDefaultProps: function getDefaultProps() {
    return {
      confirmButton: false,
      cancelButton: false,
      triggerType: 'click',
      confirmText: '确认',
      cancelText: '取消'
    };
  },

  getInitialState: function getInitialState() {
    return {
      selected: {},
      cateLevel: 0,
      indexArray: []
    };
  },

  onSelect: function onSelect(key, children, level, index, event) {
    var _props = this.props;
    var onSelect = _props.onSelect;
    var confirmButton = _props.confirmButton;
    var triggerType = _props.triggerType;

    var indexArray = this.state.indexArray.concat();
    indexArray[level] = index;
    if (triggerType === 'click') {
      this.setState({
        cateLevel: level + 1,
        indexArray: indexArray
      });
    }
    if (confirmButton) {
      this.setState({
        selected: {
          key: key,
          index: index,
          children: children,
          level: level,
          event: event
        }
      });
    } else {
      onSelect(key, children, level, index, event);
    }
  },

  onHover: function onHover(key, children, level, index, event) {
    var _props2 = this.props;
    var onHover = _props2.onHover;
    var triggerType = _props2.triggerType;

    var indexArray = this.state.indexArray.concat();
    indexArray[level] = index;
    if (triggerType === 'hover') {
      this.setState({
        cateLevel: level + 1,
        indexArray: indexArray
      });
    }
    if (onHover) {
      onHover(key, children, level, index, event);
    }
  },

  onConfirm: function onConfirm() {
    var _state$selected = this.state.selected;
    var key = _state$selected.key;
    var children = _state$selected.children;
    var level = _state$selected.level;
    var index = _state$selected.index;
    var event = _state$selected.event;
    var onSelect = this.props.onSelect;

    if (onSelect) {
      onSelect(key, children, level, index, event);
    }
  },

  onCancel: function onCancel() {
    var onCancel = this.props.onCancel;

    if (onCancel) {
      onCancel();
    }
  },

  renderGroup: function renderGroup(child, index) {
    var _props3 = this.props;
    var triggerType = _props3.triggerType;
    var onHover = _props3.onHover;

    return _react.cloneElement(child, {
      level: index,
      onSelect: this.onSelect,
      onHover: onHover,
      triggerType: triggerType
    });
  },

  renderItem: function renderItem(level) {
    var _this = this;

    var data = this.props.data;

    var child = getChild(level, 0, data, this.state.indexArray);
    var items = [];
    if (child) {
      child.map(function (item, num) {
        items.push(_react2['default'].createElement(
          _CategoryItem2['default'],
          {
            index: num,
            key: item.id,
            id: item.id,
            onSelect: _this.onSelect,
            child: item.children },
          item.name
        ));
      });
    }
    return items;
  },

  renderCategory: function renderCategory() {
    var category = [];
    var _props4 = this.props;
    var data = _props4.data;
    var open = _props4.open;

    var cateLevel = undefined;
    if (open) {
      cateLevel = getChildLength(data, 0);
    } else {
      cateLevel = this.state.cateLevel;
    }
    for (var index = 0; index <= cateLevel; index++) {
      category.push(_react2['default'].createElement(
        _CategoryGroup2['default'],
        {
          key: index,
          level: index,
          onSelect: this.onSelect,
          onHover: this.onHover,
          triggerType: this.props.triggerType },
        this.renderItem(index)
      ));
    }
    return category;
  },

  render: function render() {
    var _props5 = this.props;
    var className = _props5.className;
    var children = _props5.children;
    var confirmButton = _props5.confirmButton;
    var cancelButton = _props5.cancelButton;
    var hide = _props5.hide;
    var confirmText = _props5.confirmText;
    var cancelText = _props5.cancelText;
    var data = _props5.data;

    var props = _objectWithoutProperties(_props5, ['className', 'children', 'confirmButton', 'cancelButton', 'hide', 'confirmText', 'cancelText', 'data']);

    return _react2['default'].createElement(
      'div',
      { className: _classnames2['default']('category-container', { 'hide': hide }, className) },
      _react2['default'].createElement(
        'div',
        _extends({ className: _classnames2['default']('category', { 'has-button': confirmButton || cancelButton }) }, props),
        data === undefined ? _reactBootstrap.utils.ValidComponentChildren.map(this.props.children, this.renderGroup) : this.renderCategory()
      ),
      _react2['default'].createElement(
        'div',
        { className: 'category-footer' },
        confirmButton && _react2['default'].createElement(
          _Button2['default'],
          { bsStyle: 'primary', onClick: this.onConfirm, bsSize: 'small' },
          confirmText
        ),
        cancelButton && _react2['default'].createElement(
          _Button2['default'],
          { onClick: this.onCancel, bsSize: 'small' },
          cancelText
        )
      )
    );
  }
});

exports['default'] = Category;
module.exports = exports['default'];