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

mdf metaui web

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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 = _interopRequireWildcard(require("react"));

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

var _basic = require("../basic");

var MetaComponents = _interopRequireWildcard(require("./index"));

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

var affixTarget = null;

var CardHeaderControl = function (_Component) {
  (0, _inherits2["default"])(CardHeaderControl, _Component);

  function CardHeaderControl(props) {
    var _this;

    (0, _classCallCheck2["default"])(this, CardHeaderControl);
    _this = (0, _possibleConstructorReturn2["default"])(this, (0, _getPrototypeOf2["default"])(CardHeaderControl).call(this, props));
    _this.state = {
      hide: false
    };
    _this.leftToolbar = null;
    _this.rightToolbar = null;
    _this.mainTitle = null;
    _this.statusBar = null;
    _this.processGroup = null;
    _this.visibleMap = {
      left: props.model.getParams().menuId ? false : true,
      right: true
    };
    return _this;
  }

  (0, _createClass2["default"])(CardHeaderControl, [{
    key: "componentDidMount",
    value: function componentDidMount() {
      this.height = (0, _reactDom.findDOMNode)(this.refs.CardHeader) ? (0, _reactDom.findDOMNode)(this.refs.CardHeader).clientHeight : 0;
      if (this.height) this.props.model.execute('cardHeaderHeightUpdate', this.height);
    }
  }, {
    key: "handleVisibleChange",
    value: function handleVisibleChange(align, visible) {
      this.visibleMap[align] = visible;
      var hide = false;

      if (this.leftToolbar && this.rightToolbar) {
        if (!this.visibleMap.left && !this.visibleMap.right) hide = true;
      } else {
        if (this.leftToolbar) {
          if (!this.visibleMap.left) hide = true;
        }

        if (this.rightToolbar) {
          if (!this.visibleMap.right) hide = true;
        }
      }

      if (hide) {
        if (this.mainTitle || this.statusBar || this.processGroup) hide = false;
      }

      this.setState({
        hide: hide
      });
    }
  }, {
    key: "getMetaContainer",
    value: function getMetaContainer(container) {
      var _this2 = this;

      var model = this.props.model;
      var containerType = container.cControlType && container.cControlType.trim().toLocaleLowerCase();

      switch (containerType) {
        case 'toolbar':
          var align = container.cAlign === 'right' ? 'right' : 'left';
          if (!this.visibleMap[align]) break;

          var toolbar = _react["default"].createElement(MetaComponents.Toolbar, {
            align: container.cAlign,
            controls: container.controls,
            model: model,
            onVisibleChange: function onVisibleChange(visible) {
              return _this2.handleVisibleChange(align, visible);
            },
            delay: true
          });

          align === 'right' ? this.rightToolbar = toolbar : this.leftToolbar = toolbar;
          break;

        case 'maintitle':
          break;
          this.mainTitle = _react["default"].createElement(MetaComponents.MainTitle, {
            key: containerType,
            controls: container.controls,
            viewModel: model
          });
          break;

        case 'statusbar':
          this.statusBar = _react["default"].createElement(MetaComponents.StatusBar, {
            key: containerType,
            viewModel: model
          });
          break;

        case 'processgroup':
          this.processGroup = _react["default"].createElement(MetaComponents.ProcessGroup, {
            key: containerType,
            viewModel: model
          });
          break;
      }
    }
  }, {
    key: "getHeader",
    value: function getHeader() {
      var _this3 = this;

      this.props.meta.containers.forEach(function (container) {
        _this3.getMetaContainer(container);
      });
      var toolbar = null;

      if (this.leftToolbar && this.rightToolbar) {
        toolbar = _react["default"].createElement(_basic.Row, {
          key: "toolbar"
        }, _react["default"].createElement("div", {
          style: {
            "float": 'left'
          },
          className: "list-header-left-toolbar"
        }, this.leftToolbar), _react["default"].createElement("div", {
          style: {
            "float": 'right'
          },
          className: "list-header-right-toolbar"
        }, this.rightToolbar));
      } else {
        if (this.leftToolbar) toolbar = _react["default"].createElement("div", {
          className: "list-header-left-toolbar"
        }, this.leftToolbar);
        if (this.rightToolbar) toolbar = _react["default"].createElement("div", {
          className: "list-header-right-toolbar"
        }, this.rightToolbar);
      }

      return [toolbar, this.mainTitle, this.statusBar, this.processGroup];
    }
  }, {
    key: "componentDidMount",
    value: function componentDidMount() {}
  }, {
    key: "componentWillUnmount",
    value: function componentWillUnmount() {
      if (process.env.__CLIENT__ == true) {
        if (affixTarget) {
          affixTarget.style.overflowY = 'auto';
        }
      }
    }
  }, {
    key: "render",
    value: function render() {
      if (!this.props.meta.containers) return null;

      if (process.env.__CLIENT__ == true) {
        affixTarget = window.document.querySelector('.ant-tabs-tabpane-active');

        if (affixTarget) {
          affixTarget.style.overflowY = 'scroll';
        }
      }

      var controls = this.getHeader();
      var className = this.state.hide ? 'hide' : 'list-top-toolbar';

      if (process.env.__THEMETYPE__ == 'ncc') {
        return _react["default"].createElement(_baseui.Affix, {
          className: "cardHeader",
          offsetTop: 0,
          target: function target() {
            return affixTarget;
          }
        }, _react["default"].createElement("div", {
          ref: "CardHeader",
          className: className
        }, controls));
      } else {
        return _react["default"].createElement("div", {
          ref: "CardHeader",
          className: className
        }, controls);
      }
    }
  }]);
  return CardHeaderControl;
}(_react.Component);

exports["default"] = CardHeaderControl;
//# sourceMappingURL=CardHeader.js.map