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

mdf metaui web

"use strict";

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

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

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 _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

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

var _reactDom = require("react-dom");

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

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

var _classnames = _interopRequireDefault(require("classnames"));

var DropdownButton = _baseui.Dropdown.Button;
var SubMenu = _baseui.Menu.SubMenu;
var MenuItem = _baseui.Menu.Item;

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

  function DropdownButtonControl(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, DropdownButtonControl);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(DropdownButtonControl).call(this, props));
    var cStyle = props.cStyle,
        cParameter = props.cParameter;
    var config = null;

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

    _this.state = Object.assign({
      data: props.controls || [],
      visible: !props.bHidden
    }, config);
    var keyMap = {};

    _this.recursive(_this.state.data, function (key, value) {
      keyMap[key] = value;
    });

    _this.keyMap = keyMap;
    return _this;
  }

  (0, _createClass2["default"])(DropdownButtonControl, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      if (this.props.model) {
        this.props.model.addListener(this);
        this.recursive(this.state.data, function (key) {
          var model = this.props.model.getParent().get(key);
          if (model) model.addListener(this);
        });
      }
    }
  }, {
    key: "setListenerState",
    value: function setListenerState(params) {
      if (params.cItemName === this.props.cItemName) {
        this.setState(params);
      } else {
        var item = this.keyMap[params.cItemName];

        if (item) {
          item.visible = params.visible;
          item.disabled = params.disabled;
          item.readOnly = params.readOnly;
        }

        this.setState({
          data: this.state.data
        });
      }
    }
  }, {
    key: "componentDidUpdate",
    value: function componentDidUpdate() {
      if (this.props.model) {
        this.props.model.addListener(this);
        this.recursive(this.state.data, function (key) {
          var model = this.props.model.getParent().get(key);
          if (model) model.addListener(this);
        });
      }
    }
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (this.props.model) {
        this.props.model.removeListener(this);
        this.recursive(this.state.data, function (key) {
          var model = this.props.model.getParent().get(key);
          if (model) model.removeListener(this);
        });
      }
    }
  }, {
    key: "recursive",
    value: function recursive(data, callback) {
      data.forEach(function (item) {
        callback.call(this, item.cItemName, item);
        if (item.children) this.recursive(item.children, callback);
      }, this);
    }
  }, {
    key: "setDisabled",
    value: function setDisabled(value, propertyName) {
      if (propertyName === this.props.cItemName) {
        this.setState({
          disabled: value
        });
      } else {
        var item = this.keyMap[propertyName];
        if (item) item.disabled = value;
        this.setState({
          data: this.state.data
        });
      }
    }
  }, {
    key: "setVisible",
    value: function setVisible(value, propertyName) {
      if (propertyName === this.props.cItemName) {
        this.setState({
          visible: value
        });
        if (this.props.onVisibleChange) this.props.onVisibleChange(value);
      } else {
        var item = this.keyMap[propertyName];
        if (item) item.visible = value;
        this.setState({
          data: this.state.data
        });
      }
    }
  }, {
    key: "handleButtonClick",
    value: function handleButtonClick(e) {
      if (this.props.model) this.props.model.fireEvent('click');
    }
  }, {
    key: "handleMenuClick",
    value: function handleMenuClick(e) {
      if (this.props.model) {
        var model = this.props.model.getParent().get(e.key);
        if (model) model.fireEvent('click');
      }
    }
  }, {
    key: "isEcsuite",
    value: function isEcsuite() {
      return this.props.isEcsuite ? true : false;
    }
  }, {
    key: "render",
    value: function render() {
      var _this2 = this;

      var self = this;
      self.preIsVisibleItem = false;

      var loop = function loop(data) {
        return data.map(function (item) {
          var style = item.visible === false ? {
            display: "none"
          } : {};

          if (item.children) {
            if (item.visible !== false) self.preIsVisibleItem = true;
            return _react["default"].createElement(SubMenu, {
              style: style,
              key: item.cItemName,
              title: item.cCaption
            }, loop(item.children));
          } else if (item.cControlType == "spliter") {
            if (self.preIsVisibleItem == false) return undefined;else return _react["default"].createElement(_baseui.Menu.Divider, null);
          } else {
            if (item.visible !== false) self.preIsVisibleItem = true;
            return _react["default"].createElement(MenuItem, {
              style: style,
              key: item.cItemName,
              disabled: item.disabled
            }, item.cCaption);
          }
        });
      };

      var menu = _react["default"].createElement(_baseui.Menu, {
        onClick: function onClick(e) {
          return _this2.handleMenuClick(e);
        },
        className: this.props.classname ? this.props.classname + "_Menus" : ""
      }, loop(this.state.data));

      if (this.state.displaymode !== 'button') {
        var icon = this.props.iStyle === 1 ? null : this.props.icon;
        var text = this.props.iStyle === 2 ? null : this.props.value;
        var iconCom = icon ? _react["default"].createElement(_SvgIcon["default"], {
          className: "icon-" + icon,
          type: icon + (this.state.disabled ? "-disabled" : "")
        }) : null;

        var _className = (0, _classnames["default"])(this.props.classname, {
          hide: !this.state.visible
        });

        return _react["default"].createElement(_baseui.Dropdown, {
          overlay: menu,
          getPopupContainer: function getPopupContainer() {
            return _this2.isEcsuite() ? document.getElementById(_this2.props.Toolbar_Ecsuite_ID) : document.body;
          },
          mouseEnterDelay: this.isEcsuite() ? 0.5 : undefined
        }, _react["default"].createElement(_baseui.Button, {
          className: _className,
          disabled: this.state.disabled,
          type: this.state.type
        }, iconCom, text, _react["default"].createElement(_baseui.Icon, {
          type: "down"
        })));
      }

      var className = this.props.classname || "";

      if (className) {
        className = className + "_Menus";
      }

      if (this.state.action == "add") className = className + "  ToolBar_isAddButton";
      var style = this.state.visible ? {
        verticalAlign: 'bottom',
        "float": 'left'
      } : {
        verticalAlign: 'bottom',
        display: "none"
      };

      var control = _react["default"].createElement(DropdownButton, {
        className: className,
        style: style,
        ref: "button",
        onClick: function onClick(e) {
          return _this2.handleButtonClick(e);
        },
        overlay: menu,
        type: "ghost"
      }, this.props.value);

      if (this.state.visible) return control;else return null;
    }
  }]);
  return DropdownButtonControl;
}(_react["default"].Component);

exports["default"] = DropdownButtonControl;
;
//# sourceMappingURL=dropdownbutton.js.map