ming-demo3/lib/components/basic/tag.js

mdf metaui web

"use strict";

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

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = 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 _row = _interopRequireDefault(require("./row"));

var _col = _interopRequireDefault(require("./col"));

var _refer = _interopRequireDefault(require("../refer"));

var _label = _interopRequireDefault(require("./label"));

var _SvgIcon = _interopRequireDefault(require("@mdf/metaui-web/lib/components/common/SvgIcon"));

var _listtag = _interopRequireDefault(require("./listtag"));

var Search = _baseui.Input.Search;
var TreeNode = _baseui.Tree.TreeNode;
process.env.__CLIENT__ && require("./tag.css");

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

  function TagControl(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, TagControl);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(TagControl).call(this, props));
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setDataSource", function (dataSource) {
      _this.setState({
        dataSource: dataSource
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSelect", function (selectedKeys, e) {
      if (_this.treeModel) _this.treeModel.select(selectedKeys);

      _this.setState({
        modalVisible: false
      });

      _this.referViewModel.execute('afterOkClick', _this.treeModel.getSelectedNodes());
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPopClick", function () {
      var disabled = _this.state.disabled;
      if (disabled) return;

      _this.setState({
        modalVisible: !_this.state.modalVisible
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onCheck", function (checkedKeys, e) {
      var bLinkage = _this.state.bLinkage;
      var checkKeys, halfCheckKeys;

      if (checkedKeys.checked) {
        checkKeys = checkedKeys.checked;
        halfCheckKeys = checkedKeys.halfChecked;
      } else {
        checkKeys = checkedKeys;
        halfCheckKeys = e.halfCheckedKeys;
      }

      if (bLinkage) _this.changeLinkage(checkKeys, halfCheckKeys, e);else _this.setState({
        checkedKeys: checkKeys,
        halfCheckedKeys: halfCheckKeys
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onButtonClick", function (e, type) {
      var _this$state = _this.state,
          checkedKeys = _this$state.checkedKeys,
          checkStrictly = _this$state.checkStrictly,
          keyField = _this$state.keyField;
      var keys = checkedKeys || [];

      if (checkStrictly === false) {
        keys = [];

        var nodes = _this.treeModel.getNodesByKeys(checkedKeys);

        nodes.forEach(function (item) {
          if (item.children) return;
          keys.push(item[keyField]);
        });
      }

      if (type == 'submit') {
        if (_this.treeModel) _this.treeModel.select(keys);

        _this.referViewModel.execute('afterOkClick', _this.treeModel.getSelectedNodes());
      }

      _this.setState({
        modalVisible: false
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onVisibleChange", function (visible) {
      var disabled = _this.state.disabled;
      if (disabled) return;

      _this.setState({
        modalVisible: visible
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSearchChange", function (e) {
      var value = e.target.value;
      var data = _this.state.dataSource;

      var loop = function loop(data) {
        return data.map(function (item) {
          if (item.name.indexOf(value) > -1) _this.expandedKeys.push(item.code);

          if (item.children) {
            loop(item.children);
          }
        });
      };

      if (value != '') loop(data);

      _this.setState({
        expandedKeys: _this.expandedKeys,
        searchValue: value,
        autoExpandParent: true
      });

      _this.expandedKeys = [];
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onExpand", function (expandedKeys, node) {
      _this.setState({
        expandedKeys: expandedKeys,
        autoExpandParent: false
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onLinkageChange", function (e) {
      _this.setState({
        "bLinkage": e.target.checked
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "changeLinkage", function (checkKeys, halfCheckKeys, e) {
      var key = e.node.props.eventKey;
      if (!_this.keyMap) _this.keyMap = _this.treeModel.get('keyMap');
      var node = _this.keyMap[key];
      if (e.checked) checkKeys.pop();
      checkKeys = _this.loopTreeNodes(node, checkKeys, e.checked);

      _this.setState({
        checkedKeys: checkKeys,
        halfCheckedKeys: halfCheckKeys
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "loopTreeNodes", function (node, checkKeys, bChecked) {
      if (bChecked) {
        checkKeys.push(node[_this.state.keyField]);
      } else {
        var keys = [];
        checkKeys.map(function (key, index) {
          if (key != node[_this.state.keyField]) keys.push(key);
        });
        checkKeys = keys;
      }

      if (node.children) {
        node.children.map(function (n) {
          checkKeys = _this.loopTreeNodes(n, checkKeys, bChecked);
        });
      }

      return checkKeys;
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onSearchClear", function () {
      _this.setState({
        searchValue: ''
      });
    });
    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "onPressEnter", function (e) {
      console.log(e);
    });
    var cStyle = props.cStyle;
    var config = null;

    if (cStyle) {
      try {
        config = JSON.parse(cStyle);
      } catch (e) {
        config = {};
      }
    }

    _this.state = Object.assign({
      bIsNull: props.bIsNull,
      onClose: props.onClose,
      ButtonName: '增加',
      closable: true,
      color: props.color || 'blue',
      refReturn: props.refReturn,
      bCanModify: props.bCanModify,
      readOnly: props.readOnly,
      checkedKeys: [],
      halfCheckedKeys: [],
      expandedKeys: [],
      searchValue: '',
      autoExpandParent: true,
      visible: !props.bHidden,
      bLinkage: false
    }, config);
    _this.buttonClick = _this.buttonClick.bind((0, _assertThisInitialized2["default"])(_this));
    _this.close = _this.close.bind((0, _assertThisInitialized2["default"])(_this));
    return _this;
  }

  (0, _createClass2["default"])(TagControl, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.model) this.props.model.addListener(this);
      if (this.props.focus) this.refs.input.refs.input.focus();
      this.setState({
        popWidth: this.input.offsetWidth,
        popLeft: this.input.offsetLeft
      });
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      if (this.props.model) this.props.model.addListener(this);
    }
  }, {
    key: "componentWillReceiveProps",
    value: function componentWillReceiveProps(nextProps) {
      if (!this.props.model && nextProps.model) nextProps.model.addListener(this);

      if (this.props.model && !nextProps.model) {
        this.props.model.removeListener(this);
      }

      this.setState({
        closable: nextProps.closable,
        color: nextProps.color,
        refReturn: nextProps.refReturn
      });
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.props.model) this.props.model.removeListener(this);
    }
  }, {
    key: "GetTagList",
    value: function GetTagList() {
      var Tagdata = this.props.tagData || this.state.value || [];
      var TagList = [];
      var _this$state2 = this.state,
          readOnly = _this$state2.readOnly,
          disabled = _this$state2.disabled,
          color = _this$state2.color;

      if (readOnly) {
        Tagdata.forEach(function (element) {
          TagList.push(element);
        });
        return TagList.join('; ');
      }

      Tagdata.forEach(function (element, index) {
        var _this2 = this;

        TagList.push(_react["default"].createElement(_baseui.Tag, {
          style: {
            "float": 'left'
          },
          key: index,
          closable: !disabled,
          color: color,
          onClose: function onClose(e) {
            return _this2.onClose(e, index);
          }
        }, element));
      }, this);
      return TagList;
    }
  }, {
    key: "onClose",
    value: function onClose(e, index) {
      if (this.props.model) {
        e.preventDefault();
        this.props.model.deleteItem(index);
        return;
      }

      if (this.props.onClose) {
        e.preventDefault();
        this.props.onClose(index);
        return;
      }
    }
  }, {
    key: "buttonClick",
    value: function buttonClick() {
      if (this.props.model) this.props.model.browse(this.state.displaymode === 'popover');
      if (this.props.referClikc) this.props.referClikc();
    }
  }, {
    key: "open",
    value: function open(e) {
      if (e.referType === 'Table' && this.state.displaymode === 'popover') this.referViewModel = e.vm;
      this.setState({
        referType: e.referType,
        vm: e.vm,
        modalVisible: true
      });

      if (e.referType === 'Tree') {
        this.referViewModel = e.vm;
        this.treeModel = e.vm.get('tree');
        this.treeModel.addListener(this);
      }
    }
  }, {
    key: "setListenerState",
    value: function setListenerState(params) {
      var value = params.value,
          keyField = params.keyField;
      delete params.value;
      var select = this.state.select;

      if (select && select.length) {
        var checkedKeys = [];
        select.forEach(function (item) {
          checkedKeys.push(item[keyField]);
        });
        params.checkedKeys = checkedKeys;
      }

      this.setState(params);
      if (value) this.setValue(value);
    }
  }, {
    key: "close",
    value: function close() {
      this.setState({
        modalVisible: false
      });
    }
  }, {
    key: "setValue",
    value: function setValue(value, propertyName) {
      if (propertyName === 'tree') return;
      this.setState({
        modalVisible: false,
        value: value
      });
    }
  }, {
    key: "validate",
    value: function validate(val) {
      this.setState({
        err: 'has-' + val.type,
        msg: val.message
      });
    }
  }, {
    key: "getPopControl",
    value: function getPopControl() {
      var dataSource = this.state.dataSource || [];
      var _this$state3 = this.state,
          titleField = _this$state3.titleField,
          keyField = _this$state3.keyField,
          childrenField = _this$state3.childrenField,
          multiple = _this$state3.multiple,
          disabled = _this$state3.disabled,
          value = _this$state3.value,
          modalVisible = _this$state3.modalVisible,
          searchValue = _this$state3.searchValue;

      var loop = function loop(data) {
        return data.map(function (item) {
          var title = item[titleField];

          if (item[childrenField]) {
            if (item.name.indexOf(searchValue) > -1 && searchValue != "") title = _react["default"].createElement("span", {
              style: {
                color: 'red'
              }
            }, title);
            return _react["default"].createElement(TreeNode, {
              data: item,
              value: item[keyField],
              title: title,
              key: item[keyField]
            }, loop(item[childrenField]));
          }

          if (item.name.indexOf(searchValue) > -1 && searchValue != "") title = _react["default"].createElement("span", {
            style: {
              color: 'red'
            }
          }, title);
          return _react["default"].createElement(TreeNode, {
            data: item,
            value: item[keyField],
            title: title,
            key: item[keyField],
            isLeaf: item.isLeaf,
            disabled: item.disabled
          });
        });
      };

      var treeNodes = loop(dataSource);
      return this.getPopContent(treeNodes, multiple);
    }
  }, {
    key: "getPopContent",
    value: function getPopContent(treeNodes, multiple) {
      var _this3 = this;

      if (multiple) {
        var _this$state4 = this.state,
            checkedKeys = _this$state4.checkedKeys,
            halfCheckedKeys = _this$state4.halfCheckedKeys,
            expandedKeys = _this$state4.expandedKeys,
            autoExpandParent = _this$state4.autoExpandParent,
            searchValue = _this$state4.searchValue,
            checkStrictly = _this$state4.checkStrictly,
            bLinkage = _this$state4.bLinkage;
        var treeProps = {};

        if (checkStrictly === false) {
          treeProps.checkStrictly = false;
          treeProps.checkedKeys = [].concat(checkedKeys);
        } else {
          treeProps.checkStrictly = true;
          var keys = [];

          if (checkedKeys && checkedKeys.length > 0) {
            keys = {
              checked: checkedKeys,
              halfChecked: halfCheckedKeys
            };
          }

          treeProps.checkedKeys = keys;
        }

        var _searchClearControl = searchValue.length ? _react["default"].createElement("span", {
          onClick: this.onSearchClear,
          className: "ant-select-selection__clear"
        }) : null;

        return _react["default"].createElement("div", null, _searchClearControl, _react["default"].createElement(Search, {
          onSearch: this.onSearch,
          onPressEnter: this.onPressEnter,
          value: searchValue,
          onChange: this.onSearchChange
        }), _react["default"].createElement(_baseui.Tree, (0, _extends2["default"])({
          checkable: true,
          onCheck: this.onCheck
        }, treeProps, {
          filterTreeNode: this.filterTreeNode,
          onExpand: this.onExpand,
          expandedKeys: expandedKeys,
          autoExpandParent: autoExpandParent
        }), treeNodes), _react["default"].createElement("div", {
          className: "filter-btn-1"
        }, _react["default"].createElement(_baseui.Checkbox, {
          checked: bLinkage,
          onChange: this.onLinkageChange
        }, "\u8054\u52A8\u4E0B\u7EA7"), _react["default"].createElement(_baseui.Button, {
          onClick: function onClick(e) {
            return _this3.onButtonClick(e, 'submit');
          },
          className: "ant-btn ant-btn-primary ant-btn-sm lf-margin"
        }, "\u786E\u5B9A"), _react["default"].createElement(_baseui.Button, {
          onClick: function onClick(e) {
            return _this3.onButtonClick(e, 'cancel');
          },
          className: "ant-btn ant-btn-default ant-btn-sm"
        }, "\u53D6\u6D88")));
      } else {
        var _this$state5 = this.state,
            _expandedKeys = _this$state5.expandedKeys,
            _autoExpandParent = _this$state5.autoExpandParent,
            _searchValue = _this$state5.searchValue;
        return _react["default"].createElement("div", {
          className: "listRefer"
        }, searchClearControl, _react["default"].createElement(Search, {
          onSearch: this.onSearch,
          onPressEnter: this.onPressEnter,
          value: _searchValue,
          onChange: this.onSearchChange
        }), _react["default"].createElement(_baseui.Tree, {
          onSelect: function onSelect(selectedKeys, e) {
            return _this3.onSelect(selectedKeys, e);
          },
          onExpand: this.onExpand,
          expandedKeys: _expandedKeys,
          autoExpandParent: _autoExpandParent
        }, treeNodes));
      }
    }
  }, {
    key: "render",
    value: function render() {
      var _this4 = this;

      var classNames = ['TagList'];
      var addIcon = 'canzhao';

      if (this.state.disabled) {
        classNames.push('tag-disabled');
        addIcon += '-disabled';
      }

      var className = classNames.join(' ');
      var TagList = this.GetTagList();
      var addTag = !this.state.readOnly ? _react["default"].createElement(_baseui.Button, {
        className: "tagBtn-add",
        size: "small",
        disabled: this.state.disabled,
        onClick: this.buttonClick
      }, _react["default"].createElement(_baseui.Icon, {
        type: addIcon
      })) : '';
      var bShowCaption = typeof this.props.cShowCaption == 'undefined' ? false : true;
      var tagSuffix = null;
      var _this$state6 = this.state,
          popWidth = _this$state6.popWidth,
          popLeft = _this$state6.popLeft;
      var extraProps = {};
      extraProps = {
        visible: this.state.modalVisible,
        overlayClassName: "uretail-pop",
        trigger: "click",
        placement: "bottom",
        arrowPointAtCenter: true
      };
      if (popWidth) extraProps.overlayStyle = {
        width: popWidth
      };
      var _style = {
        height: '28px',
        width: '100%'
      };

      var _content = _react["default"].createElement("div", {
        className: "tag-refer-icon-container"
      }, addTag);

      if (this.state.referType === 'Tree') tagSuffix = _react["default"].createElement(_baseui.Popover, (0, _extends2["default"])({}, extraProps, {
        content: this.getPopControl(),
        onClick: this.onPopClick,
        onVisibleChange: this.onVisibleChange
      }), _content);else if (this.state.referType === 'Table' && this.state.displaymode === 'popover') tagSuffix = _react["default"].createElement(_baseui.Popover, (0, _extends2["default"])({}, extraProps, {
        content: _react["default"].createElement(_listtag["default"], {
          viewModel: this.referViewModel,
          multiple: this.state.multiple,
          closePop: this.close,
          checkedArr: this.state.value
        }),
        onClick: this.onPopClick,
        onVisibleChange: this.onVisibleChange
      }), _content);else tagSuffix = addTag;
      var style = this.state.visible ? {} : {
        display: "none"
      };
      return !bShowCaption ? _react["default"].createElement(_row["default"], {
        className: "tag-refer"
      }, _react["default"].createElement("div", {
        className: className
      }, TagList), _react["default"].createElement(_baseui.Icon, {
        onClick: this.buttonClick,
        type: "search"
      }), _react["default"].createElement(_refer["default"], {
        visible: this.state.modalVisible,
        close: this.close,
        title: this.props.cShowCaption,
        model: this.state.vm,
        afterOkClick: this.props.afterOkClick,
        referType: this.state.referType
      })) : _react["default"].createElement(_row["default"], {
        className: "tag-refer tag-refer-01 ".concat(this.state.err),
        style: style
      }, _react["default"].createElement("div", {
        className: "p-v-5",
        style: {
          "float": 'left'
        }
      }, !this.state.readOnly && this.state.bIsNull === false ? _react["default"].createElement(_baseui.Icon, {
        type: "star"
      }) : "", this.props.cShowCaption), _react["default"].createElement("div", {
        className: className,
        ref: function ref(node) {
          return _this4.input = node;
        },
        role: "combobox",
        "aria-autocomplete": "list",
        "aria-haspopup": "true",
        tabindex: "0",
        "aria-expanded": "false"
      }, TagList, tagSuffix), _react["default"].createElement("div", {
        className: "ant-form-explain"
      }, this.state.msg), this.state.referType === 'Tree' || this.state.referType === 'Table' && this.state.displaymode === 'popover' ? null : _react["default"].createElement(_refer["default"], {
        visible: this.state.modalVisible,
        close: this.close,
        title: this.props.cShowCaption,
        model: this.state.vm,
        afterOkClick: this.props.afterOkClick,
        referType: this.state.referType
      }));
    }
  }]);
  return TagControl;
}(_react["default"].Component);

exports["default"] = TagControl;
//# sourceMappingURL=tag.js.map