ming-demo3/lib/components/meta/NccSearchTree.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 _TreeToolbar = _interopRequireDefault(require("./TreeToolbar"));

var TreeNode = _baseui.Tree.TreeNode;

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), "getNewDataAndMain", function (data) {
      var _ref;

      return [(_ref = {}, (0, _defineProperty2["default"])(_ref, _this.state.keyField, 'main'), (0, _defineProperty2["default"])(_ref, _this.state.titleField, _this.props.title), (0, _defineProperty2["default"])(_ref, _this.state.childrenField, data), _ref)];
    });
    (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), "getSearchData", function (value, callback) {
      var dataSource = _this.state.dataSource;
      var newData = [];
      var self = (0, _assertThisInitialized2["default"])(_this);
      var titleField = _this.state.titleField;

      function loopData(list, level) {
        list.forEach(function (item, index) {
          if (item.children) {
            if (Array.isArray(titleField)) {
              titleField.map(function (title, index) {
                if (item[title].includes(value)) {
                  var newItem = cb.utils.extend([], item.children);
                  newItem.children = [];
                  newItem.children.push(loopSub(item.children));
                  newData.push(item);
                }
              });
            } else {
              if (item[titleField].includes(value)) {
                var newItem = cb.utils.extend([], item.children);
                newItem.children = [];
                newItem.children.push(loopSub(item.children));
                newData.push(item);
              }
            }
          } else {
            if (Array.isArray(titleField)) {
              titleField.map(function (title, index) {
                if (item[title].includes(value)) {
                  newData.push(item);
                }
              });
            } else {
              if (item[titleField].includes(value)) {
                newData.push(item);
              }
            }
          }
        });
      }

      function loopSub(list) {
        return list.map(function (item) {
          if (item.children) {
            if (Array.isArray(titleField)) {
              titleField.map(function (title, index) {
                if (item[title].includes(value)) {
                  var newItem = cb.utils.extend([], item.children);
                  newItem.children = [];
                  newItem.children.push(loopSub(item.children));
                  return newItem;
                }
              });
            } else {
              if (item[titleField].includes(value)) {
                var newItem = cb.utils.extend([], item.children);
                newItem.children = [];
                newItem.children.push(loopSub(item.children));
                return newItem;
              }
            }
          } else {
            if (Array.isArray(titleField)) {
              titleField.map(function (title, index) {
                if (item[title].includes(value)) {
                  return item;
                }
              });
            } else {
              if (item[titleField].includes(value)) {
                return item;
              }
            }
          }
        });
      }

      loopData(dataSource);
      _this.searchValue = value;
      callback(newData);
    });
    (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.searchValue = '';

      _this.setState({
        searchValue: '',
        filterData: _this.state.dataSource
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "renderTitleField", function (titleField, data, keyField) {
      var title = [];

      if (Array.isArray(titleField)) {
        if (data[keyField] === 'main') {
          title.push(_react["default"].createElement("span", null, data[titleField]));
        } else {
          titleField.map(function (item, index) {
            title.push(_react["default"].createElement("span", {
              style: {
                paddingRight: '2px'
              }
            }, data[item]));
          });
        }
      } else {
        title.push(_react["default"].createElement("span", null, data[titleField]));
      }

      return title;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onClick", function (model, item) {
      var keyField = _this.state.keyField;

      _this.props.model.select(item[keyField], model.getName());

      model.fireEvent('click');
    });
    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,
      filterData: [],
      readOnly: _this.props.readOnly || false,
      selectData: []
    };
    _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: "onSearch",
    value: function onSearch(value) {
      var _this2 = this;

      this.setState({
        searchValue: value
      });
      this.getSearchData(value, function (filterData) {
        return _this2.setState({
          filterData: filterData
        });
      });
    }
  }, {
    key: "setDataSource",
    value: function setDataSource(dataSource) {
      this.setState({
        dataSource: dataSource,
        filterData: [],
        searchValue: ""
      });
      this.searchValue = '';

      if (!this.state.expandedKeys.length) {
        this.setState({
          expandedKeys: ['main']
        });
      }
    }
  }, {
    key: "renderToolbar",
    value: function renderToolbar(data, main) {
      var _this3 = this;

      var _this$props = this.props,
          meta = _this$props.meta,
          vm = _this$props.vm;
      var readOnly = this.state.readOnly;
      var toolbar = null;
      meta.containers.map(function (item) {
        if (item.cControlType.trim().toLocaleLowerCase() === 'toolbar') {
          var controls = item.controls;

          if (main) {
            controls = item.controls.filter(function (item) {
              return item.cItemName === 'btnAdd';
            });
          }

          toolbar = _react["default"].createElement(_TreeToolbar["default"], {
            controls: controls,
            model: vm,
            disabled: readOnly,
            item: data,
            iconClick: _this3.onClick
          });
        }
      });
      return toolbar;
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      var _this$state3 = this.state,
          titleField = _this$state3.titleField,
          keyField = _this$state3.keyField,
          childrenField = _this$state3.childrenField,
          readOnly = _this$state3.readOnly;

      var loop = function loop(data) {
        return data.map(function (item) {
          if (item[childrenField]) {
            return _react["default"].createElement(TreeNode, {
              disabled: !readOnly,
              data: item,
              title: _react["default"].createElement("div", {
                className: "tree-title",
                onClick: readOnly ? function (e) {
                  _this4.onSelect(item[keyField], e);
                } : undefined
              }, _react["default"].createElement("span", {
                className: "refer-tree-switch iconfont "
              }), _this4.renderTitleField(titleField, item, keyField), item[keyField] === 'main' ? _this4.renderToolbar(item, true) : _this4.renderToolbar(item)),
              key: item[keyField]
            }, loop(item[childrenField]));
          }

          return _react["default"].createElement(TreeNode, {
            data: item,
            title: _react["default"].createElement("div", {
              className: "tree-title",
              onClick: readOnly ? function (e) {
                _this4.onSelect(item[keyField], e);
              } : undefined
            }, _react["default"].createElement("span", {
              className: "refer-tree-point"
            }), _this4.renderTitleField(titleField, item), _this4.renderToolbar(item)),
            key: item[keyField],
            isLeaf: item.isLeaf,
            disabled: !readOnly
          });
        });
      };

      var loopData = this.getNewDataAndMain(this.searchValue ? this.state.filterData : this.state.dataSource);
      var treeNodes = loop(loopData);
      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 height = this.props.height - this.state.substractHeight;
      var tree3style = {};
      return _react["default"].createElement("div", {
        className: "bg-white border-r",
        style: {
          height: height
        }
      }, _react["default"].createElement("div", {
        onClick: this.handleSearchClick,
        className: "search-tree-2"
      }, this.state.searchValue ? _react["default"].createElement(_baseui.Button, {
        icon: "close-circle",
        onClick: this.clearSearchValue,
        style: {
          cursor: "pointer",
          right: '10px'
        }
      }) : null, _react["default"].createElement(_baseui.Button, {
        icon: "search",
        onClick: function onClick() {
          _this4.handleSearch();
        },
        disabled: !readOnly
      }), _react["default"].createElement(_baseui.Select, {
        placeholder: this.state.placeholder,
        mode: "combobox",
        value: this.state.searchValue,
        onSearch: function onSearch(value) {
          return _this4.onSearch(value);
        },
        disabled: !readOnly
      })), _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 _this4.onExpand(expandedKeys, e);
        },
        onCheck: this.onCheck
      }, treeProps), treeNodes)));
    }
  }]);
  return SearchTreeControl;
}(_react["default"].Component);

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