ming-demo3/lib/components/meta/SearchTree.js

mdf metaui web

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = exports.SearchTreeControl = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _react = _interopRequireDefault(require("react"));

var _baseui = require("@mdf/baseui");

var TreeNode = _baseui.Tree.TreeNode;
var Option = _baseui.Select.Option;

var SearchTreeControl = function (_React$Component) {
  (0, _inherits2["default"])(SearchTreeControl, _React$Component);

  function SearchTreeControl(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, SearchTreeControl);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(SearchTreeControl).call(this, props));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onCheck", function (checkedKeys) {
      if (_this.props.model) _this.props.model.check(checkedKeys);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSearch", function () {
      var _this$state = _this.state,
          searchValue = _this$state.searchValue,
          dataSource = _this$state.dataSource,
          keyField = _this$state.keyField,
          titleField = _this$state.titleField;
      var _ids = [];
      dataSource.forEach(function (v) {
        if (v[titleField] === searchValue) {
          _ids.unshift(v[keyField]);
        }
      });

      if (_ids[0]) {
        _this.setState({
          selectedKeys: _ids
        });
      }

      _this.searchSelect(_ids[0]);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleSearchClick", function (e) {
      _this.flag = true;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleTreeClick", function (e) {
      _this.flag = true;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "handleClick", function (e) {
      if (_this.flag) {
        _this.flag = false;
        return;
      }

      _this.onSelect([]);
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "clearSearchValue", function () {
      _this.setState({
        searchValue: ''
      });
    });
    var filterProps = ['name'];
    var placeholder = null;
    var substractHeight = 0;

    if (props.config) {
      var config = null;

      try {
        config = JSON.parse(_this.props.config);
      } catch (e) {
        config = {};
      }

      if (cb.utils.isArray(config.filters)) filterProps = config.filters;
      if (config.placeholder) placeholder = config.placeholder;
      if (config.substractHeight) substractHeight = config.substractHeight;
    }

    _this.state = {
      multiple: _this.props.multiple || false,
      checkable: _this.props.checkable || false,
      expandAll: _this.props.expandAll || false,
      keyField: _this.props.keyField || 'key',
      titleField: _this.props.titleField || 'title',
      childrenField: _this.props.childrenField || 'children',
      expandedKeys: _this.props.expandedKeys || [],
      buttonGroup: _this.props.buttonGroup || [{
        type: 'edit-disabled'
      }],
      visible: !props.bHidden,
      autoExpandParent: false,
      selectedKeys: [],
      checkedKeys: [],
      dataSource: [],
      optionData: [],
      renderFlag: true,
      searchValue: '',
      selectKey: '',
      filterProps: filterProps,
      placeholder: placeholder || "请输入关键字",
      substractHeight: substractHeight
    };
    _this.selectDataSource = [];
    return _this;
  }

  (0, _createClass2["default"])(SearchTreeControl, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.model) this.props.model.addListener(this);
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      if (this.props.model) this.props.model.addListener(this);
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      var childrenField = this.state.childrenField;
      if (!nextProps.dataSource || this.props.id === nextProps.id) return;
      var states = {
        dataSource: nextProps.dataSource,
        optionData: nextProps.dataSource
      };

      if (this.state.expandAll) {
        var keyField = this.state.keyField;
        var expandedKeys = [];

        var loop = function loop(data) {
          return data.map(function (item) {
            expandedKeys.push(item[keyField]);
            if (item[childrenField]) loop(item[childrenField]);
          });
        };

        loop(nextProps.dataSource);
        states.expandedKeys = expandedKeys;
      }

      this.setState(states);
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.props.model) this.props.model.removeListener(this);
    }
  }, {
    key: "onSelect",
    value: function onSelect(selectedKeys, e) {
      if (this.props.onSelect) this.props.onSelect(selectedKeys, e);
      if (this.props.model) this.props.model.select(selectedKeys);
    }
  }, {
    key: "onExpand",
    value: function onExpand(expandedKeys, e) {
      if (e) {
        this.setState({
          expandedKeys: expandedKeys,
          autoExpandParent: false
        });
      } else {
        this.setState({
          expandedKeys: expandedKeys,
          autoExpandParent: true
        });
      }
    }
  }, {
    key: "searchSelect",
    value: function searchSelect(value, option) {
      var _this$state2 = this.state,
          selectData = _this$state2.selectData,
          expandedKeys = _this$state2.expandedKeys;
      var currentData = selectData.find(function (item) {
        return item.id == value;
      });
      var newExpandedKeys = [].concat(expandedKeys);

      if (currentData && currentData.parent) {
        var expandedKey = currentData.parent.toString();
        if (newExpandedKeys.indexOf(expandedKey) === -1) newExpandedKeys.push(expandedKey);
      }

      this.onExpand(newExpandedKeys);
      this.onSelect([value]);
    }
  }, {
    key: "fetch",
    value: function fetch(value, callback) {
      var dataSource = this.selectDataSource;
      var filterProps = this.state.filterProps;
      var data = [];

      if (!dataSource) {
        console.log("search Tree fetch of dataSource is null ! ");
        return;
      }

      dataSource.forEach(function (ele) {
        filterProps.forEach(function (field) {
          if (ele[field].toString().indexOf(value) < 0) return;
          data.push(ele);
        });
      });
      callback(data);
    }
  }, {
    key: "getSelectData",
    value: function getSelectData(data, parent) {
      var childrenField = this.props.childrenField;
      data.forEach(function (ele) {
        var item = {
          parent: parent
        };

        for (var attr in ele) {
          if (attr === childrenField) continue;
          item[attr] = ele[attr];
        }

        this.selectDataSource.push(item);

        if (ele.children) {
          this.getSelectData(ele.children, ele.id);
        }
      }, this);
    }
  }, {
    key: "onSearch",
    value: function onSearch(value) {
      var _this2 = this;

      this.setState({
        searchValue: value
      });
      this.fetch(value, function (selectData) {
        return _this2.setState({
          selectData: selectData
        });
      });
    }
  }, {
    key: "getSearchOptions",
    value: function getSearchOptions() {
      var searchValue = this.state.searchValue;
      if (searchValue == '') return;
      var selectData = this.state.selectData;
      var options = [];
      selectData.forEach(function (ele) {
        options.push(_react["default"].createElement(Option, {
          key: ele[this.state.keyField]
        }, ele[this.state.titleField]));
      }, this);
      return options;
    }
  }, {
    key: "setDataSource",
    value: function setDataSource(dataSource) {
      this.selectDataSource = [];
      this.getSelectData(dataSource);
      this.setState({
        dataSource: dataSource,
        checkedKeys: []
      });
    }
  }, {
    key: "onActionClick",
    value: function onActionClick(e, id) {
      e.stopPropagation();
    }
  }, {
    key: "render",
    value: function render() {
      var _this3 = this;

      var titleField = this.state.titleField;
      var keyField = this.state.keyField;
      var childrenField = this.state.childrenField;

      var loop = function loop(data) {
        return data.map(function (item) {
          var buttonGroup = _this3.state.buttonGroup.map(function (element) {
            return _react["default"].createElement(_baseui.Icon, {
              type: element.type,
              onClick: function onClick(e) {
                return _this3.onActionClick(e, item.id);
              }
            });
          });

          var title = _react["default"].createElement("span", null, item[titleField]);

          var selectable = cb.utils.getBooleanValue(item.selectable) === false ? false : true;

          if (item[childrenField]) {
            return _react["default"].createElement(TreeNode, {
              data: item,
              title: title,
              key: item[keyField],
              selectable: selectable
            }, loop(item[childrenField]));
          }

          return _react["default"].createElement(TreeNode, {
            data: item,
            title: title,
            key: item[keyField],
            isLeaf: item.isLeaf,
            disabled: item.disabled,
            selectable: selectable
          });
        });
      };

      var treeNodes = loop(this.state.dataSource);
      var treeProps = {
        multiple: this.state.multiple,
        checkable: this.state.checkable,
        expandedKeys: this.state.expandedKeys,
        selectedKeys: this.state.selectedKeys,
        checkedKeys: this.state.checkedKeys,
        autoExpandParent: this.state.autoExpandParent
      };

      if (treeProps.selectedKeys.length) {
        treeProps.selectedKeys = treeProps.selectedKeys.map(function (v) {
          return v + '';
        });
      }

      var style = this.state.visible ? {} : {
        display: "none"
      };
      var options = this.getSearchOptions();
      var height = (this.props.height || document.body.clientHeight) - this.state.substractHeight;
      var tree3style = {};
      if (this.props.parentType == 'TreeTable') tree3style.height = height - 44;
      return _react["default"].createElement("div", {
        onClick: this.handleClick,
        className: "bg-white border-r",
        style: {
          width: '240px',
          height: height
        }
      }, _react["default"].createElement("div", {
        onClick: this.handleSearchClick,
        className: "search-tree-2"
      }, this.state.searchValue ? _react["default"].createElement(_baseui.Icon, {
        type: "close-circle",
        onClick: this.clearSearchValue,
        style: {
          cursor: "pointer"
        }
      }) : null, _react["default"].createElement(_baseui.Button, {
        icon: "search",
        onClick: function onClick() {
          _this3.handleSearch();
        }
      }), _react["default"].createElement(_baseui.Select, {
        placeholder: this.state.placeholder,
        mode: "combobox",
        value: this.state.searchValue,
        notFoundContent: "\u554A\u54E6\uFF01\u6CA1\u6B64\u8282\u70B9\u54E6\uFF01",
        onSelect: function onSelect(value, option) {
          return _this3.searchSelect(value, option);
        },
        onSearch: function onSearch(value) {
          return _this3.onSearch(value);
        },
        defaultActiveFirstOption: false,
        showArrow: false,
        filterOption: false,
        onChange: this.handleChange,
        dropdownMatchSelectWidth: false
      }, options)), _react["default"].createElement("div", {
        style: tree3style,
        onClick: this.handleTreeClick,
        className: "search-tree-3 edit"
      }, _react["default"].createElement(_baseui.Tree, (0, _extends2["default"])({
        key: treeNodes.length,
        style: style,
        onExpand: function onExpand(expandedKeys, e) {
          return _this3.onExpand(expandedKeys, e);
        },
        onSelect: function onSelect(selectedKeys, e) {
          return _this3.onSelect(selectedKeys, e);
        },
        onCheck: this.onCheck
      }, treeProps), treeNodes)));
    }
  }]);
  return SearchTreeControl;
}(_react["default"].Component);

exports.SearchTreeControl = SearchTreeControl;
;
var _default = SearchTreeControl;
exports["default"] = _default;
//# sourceMappingURL=SearchTree.js.map