@riil-frontend/component-page-config/lib/components/view-layout/MultiLayoutView.js

page config components,include components list,component attribute panel and page canvas

"use strict";

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

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

exports.__esModule = true;
exports["default"] = void 0;

var _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));

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

var _button = _interopRequireDefault(require("@alifd/next/lib/button"));

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

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

var _propTypes = _interopRequireDefault(require("prop-types"));

var _utils = require("@riil-frontend/utils");

var _dragPanel = _interopRequireDefault(require("../drag-panel"));

var _util = require("../util");

require("./MultiLayoutView.scss");

var _constant = require("../constant");

function MultiLayoutView(props) {
  var appPageConfig = props.appPageConfig,
      pageProps = props.pageProps,
      _onChange = props.onChange,
      jumpto = props.jumpto,
      request = props.request,
      customGetComRequire = props.customGetComRequire,
      hideComList = props.hideComList,
      comDict = props.comDict;
  var layoutType = appPageConfig.layoutType;

  var _useState = (0, _react.useState)(),
      parentDOM = _useState[0],
      setParentDOM = _useState[1];

  var hasData = appPageConfig && (0, _utils.isAvailableArray)(appPageConfig.configs);
  var tabByComType = pageProps === null || pageProps === void 0 ? void 0 : pageProps.tabByComType;

  var _findComPageByType = (0, _util.findComPageByType)(appPageConfig, tabByComType),
      fixIndex = _findComPageByType.fixIndex;

  fixIndex = fixIndex == -1 ? 0 : fixIndex;

  var _useState2 = (0, _react.useState)(fixIndex),
      currentKey = _useState2[0],
      setCurrentKey = _useState2[1];

  var _jumpto = function _jumpto(url, isTabSelf) {
    if (isTabSelf === void 0) {
      isTabSelf = false;
    }

    if (typeof url === 'object' && url.tabKey) {
      var _findComPageByPageId = (0, _util.findComPageByPageId)(appPageConfig, url.tabKey),
          tabIndex = _findComPageByPageId.fixIndex;

      tabIndex = tabIndex == -1 ? 0 : tabIndex;
      setCurrentKey(tabIndex);
      return;
    }

    if (isTabSelf) {
      var _findComPageByType2 = (0, _util.findComPageByType)(appPageConfig, url),
          _tabIndex = _findComPageByType2.fixIndex;

      _tabIndex = _tabIndex == -1 ? 0 : _tabIndex;
      setCurrentKey(_tabIndex);
    } else {
      jumpto(url);
    }
  };

  var verRender = function verRender(key, record) {
    var isActive = key.toString() === currentKey.toString();
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: "editor-render-ver"
    }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
      className: "editor-render-ver-btn",
      type: isActive ? 'primary' : 'normal'
    }, record.title), isActive ? /*#__PURE__*/_react["default"].createElement("div", {
      className: "editor-render-ver-active-bar"
    }) : null);
  };

  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, hasData ? /*#__PURE__*/_react["default"].createElement(_tab["default"], {
    ref: function ref(node) {
      var dom = _reactDom["default"].findDOMNode(node);

      dom && setParentDOM(dom.lastChild);
    },
    shape: layoutType === _constant.LAYOUT_TYPE.horizontal ? 'pure' : 'wrapped',
    tabPosition: layoutType === _constant.LAYOUT_TYPE.horizontal ? 'top' : 'left',
    tabRender: layoutType === _constant.LAYOUT_TYPE.horizontal ? null : verRender,
    defaultActiveKey: fixIndex == -1 ? 0 : fixIndex,
    activeKey: currentKey,
    className: layoutType === _constant.LAYOUT_TYPE.horizontal ? 'MultiLayoutView-hor' : 'MultiLayoutView-ver',
    onChange: function onChange(key) {
      setCurrentKey(key);
      (0, _util.dispatchResizeEvent)();
    },
    unmountInactiveTabs: true
  }, appPageConfig.configs.map(function (item, index) {
    return /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
      title: item.pageName,
      key: index
    }, /*#__PURE__*/_react["default"].createElement(_dragPanel["default"], {
      hideComList: hideComList,
      parentDOM: parentDOM,
      pageConfig: item,
      isEdit: false,
      pageProps: pageProps,
      request: request,
      jumpto: _jumpto,
      onChange: function onChange(widgets) {
        _onChange((0, _extends2["default"])({}, item, {
          widgets: widgets
        }));
      },
      customGetComRequire: customGetComRequire,
      comDict: comDict,
      appConfig: appPageConfig
    }));
  })) : null);
}

MultiLayoutView.propTypes = {
  /**
   * 模板数据
   */
  appPageConfig: _propTypes["default"].object,

  /**
   * 页面参数
   */
  pageProps: _propTypes["default"].object,

  /**
   * 页面配置触发回调
   */
  onChange: _propTypes["default"].func,
  jumpto: _propTypes["default"].func,
  request: _propTypes["default"].any,
  customGetComRequire: _propTypes["default"].func,
  hideComList: _propTypes["default"].array
};
MultiLayoutView.defaultProps = {
  hideComList: []
};
var _default = MultiLayoutView;
exports["default"] = _default;