yylib-quick-mobile/source/yylib/tree/YYTreeSelect.js

yylib-quick-mobile

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _icon = require('antd-mobile/lib/icon');

var _icon2 = _interopRequireDefault(_icon);

var _list = require('antd-mobile/lib/list');

var _list2 = _interopRequireDefault(_list);

var _radio = require('antd-mobile/lib/radio');

var _radio2 = _interopRequireDefault(_radio);

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

require('antd-mobile/lib/icon/style/css');

require('antd-mobile/lib/list/style/css');

require('antd-mobile/lib/radio/style/css');

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _YYIcon = require('./../icon/YYIcon');

var _YYIcon2 = _interopRequireDefault(_YYIcon);

require('./tree.less');

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var RadioItem = _radio2.default.RadioItem;
var Item = _list2.default.Item;

var YYTreeSelect = function (_React$Component) {
  _inherits(YYTreeSelect, _React$Component);

  function YYTreeSelect() {
    _classCallCheck(this, YYTreeSelect);

    var _this = _possibleConstructorReturn(this, (YYTreeSelect.__proto__ || Object.getPrototypeOf(YYTreeSelect)).call(this));

    _this.state = {
      allData: [],
      selectItem: null
    };
    return _this;
  }

  _createClass(YYTreeSelect, [{
    key: 'componentDidMount',
    value: function componentDidMount() {
      if (this.props.RunInDesign) {
        this.setState({ allData: [{ id: 1, pid: "0", name: "嘉宏振兴大厦", open: true, isLeaf: false }, { id: 2, pid: "0", name: "嘉宏振兴大厦保安部", open: true, isLeaf: false }, { id: 3, pid: "2", name: "嘉宏振兴大厦行政部", open: true, isLeaf: true }] });
      }
    }
  }, {
    key: 'selectChange',
    value: function selectChange(item, event) {
      event.stopPropagation();
      this.setState({ selectItem: item });

      if (this.props.selectChange) {
        this.props.selectChange(item);
      }
    }
  }, {
    key: 'setData',
    value: function setData(Data) {
      if (Data && Data.constructor == Array) {
        this.setState({ allData: Data });
      } else {
        console.log("设置单选树的数据格式有误!");
      }
    }
  }, {
    key: '_getChildData',
    value: function _getChildData(item) {
      var _this2 = this;

      if (this.props.loadChildData) {
        var appendData = this.props.loadChildData(item, function (data) {
          if (data && data.constructor == Array) {
            var allData = _this2.state.allData;

            allData.map(function (node) {
              if (node.id == item.id) {
                node.open = !item.open;
              }
            });
            allData = allData.concat(data);
            _this2.setState({ allData: allData });
          } else {
            console.log("设置单选树子选项的数据格式有误");
          }
        });
      }
    }
  }, {
    key: '_clickItem',
    value: function _clickItem(item, event) {
      event.stopPropagation();
      if (!item.isLeaf) {
        var allData = this.state.allData;

        if (!allData.some(function (dateItem) {
          return dateItem.pid == item.id;
        })) {
          this._getChildData(item);
        } else {
          allData.map(function (node) {
            if (node.id == item.id) {
              node.open = !item.open;
            }
          });
          this.setState({ allData: allData });
        }
      }
    }
  }, {
    key: '_getTree',
    value: function _getTree(rootValue, show) {
      var _this3 = this;

      var list = this.state.allData;
      var className = this.props.className;

      var currentNode = [];
      list.map(function (item, index) {
        if (item.pid == rootValue) {
          var child = void 0;
          if (!item.isLeaf) {
            child = _this3._getTree(item.id, item.open);
          }
          var arrow = "";
          if (!item.isLeaf && !item.open) {
            arrow = "right";
          } else if (!item.isLeaf && item.open) {
            arrow = "down";
          }
          if (show) {
            var selected = _this3.state.selectItem && _this3.state.selectItem.id == item.id;
            var childIcons = !item.isLeaf ? "Org" : "Fill";
            currentNode.push(_react2.default.createElement(
              Item,
              { key: index },
              _react2.default.createElement(_icon2.default, { size: 'md', className: 'yy-lazy-tree-icon-openclose', type: arrow, color: '#C7C7CC', onClick: _this3._clickItem.bind(_this3, item) }),
              _react2.default.createElement(
                RadioItem,
                { checked: selected, className: selected ? "yy-lazy-tree-selectitem" : "",
                  onChange: _this3.selectChange.bind(_this3, item) },
                _react2.default.createElement(_YYIcon2.default, { type: childIcons, size: 'xxs', color: '#414655', style: { "marginRight": "10px" } }),
                item.name
              ),
              child
            ));
          }
        }
      });
      return currentNode;
    }
  }, {
    key: 'render',
    value: function render() {
      var _props = this.props,
          visible = _props.visible,
          className = _props.className;

      var wrapClz = (0, _classnames2.default)('yy-lazy-tree', !visible && 'hidden', className);
      return _react2.default.createElement(
        _list2.default,
        { className: wrapClz },
        this._getTree("0", true)
      );
    }
  }]);

  return YYTreeSelect;
}(_react2.default.Component);

YYTreeSelect.defaultProps = {
  visible: true
};
exports.default = YYTreeSelect;