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

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

import _Tab from "@alifd/next/es/tab";
import _extends from "@babel/runtime/helpers/extends";
import _Button from "@alifd/next/es/button";
import React, { useState } from 'react';
import ReactDOM from 'react-dom';
import PropTypes from 'prop-types';
import { isAvailableArray } from '@riil-frontend/utils';
import DragLayoutCanvas from '../drag-panel';
import { dispatchResizeEvent, findComPageByPageId, findComPageByType } from '../util';
import './MultiLayoutView.scss';
import { LAYOUT_TYPE } from '../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 = useState(),
      parentDOM = _useState[0],
      setParentDOM = _useState[1];

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

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

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

  var _useState2 = 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 = findComPageByPageId(appPageConfig, url.tabKey),
          tabIndex = _findComPageByPageId.fixIndex;

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

    if (isTabSelf) {
      var _findComPageByType2 = 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.createElement("div", {
      className: "editor-render-ver"
    }, /*#__PURE__*/React.createElement(_Button, {
      className: "editor-render-ver-btn",
      type: isActive ? 'primary' : 'normal'
    }, record.title), isActive ? /*#__PURE__*/React.createElement("div", {
      className: "editor-render-ver-active-bar"
    }) : null);
  };

  return /*#__PURE__*/React.createElement(React.Fragment, null, hasData ? /*#__PURE__*/React.createElement(_Tab, {
    ref: function ref(node) {
      var dom = ReactDOM.findDOMNode(node);
      dom && setParentDOM(dom.lastChild);
    },
    shape: layoutType === LAYOUT_TYPE.horizontal ? 'pure' : 'wrapped',
    tabPosition: layoutType === LAYOUT_TYPE.horizontal ? 'top' : 'left',
    tabRender: layoutType === LAYOUT_TYPE.horizontal ? null : verRender,
    defaultActiveKey: fixIndex == -1 ? 0 : fixIndex,
    activeKey: currentKey,
    className: layoutType === LAYOUT_TYPE.horizontal ? 'MultiLayoutView-hor' : 'MultiLayoutView-ver',
    onChange: function onChange(key) {
      setCurrentKey(key);
      dispatchResizeEvent();
    },
    unmountInactiveTabs: true
  }, appPageConfig.configs.map(function (item, index) {
    return /*#__PURE__*/React.createElement(_Tab.Item, {
      title: item.pageName,
      key: index
    }, /*#__PURE__*/React.createElement(DragLayoutCanvas, {
      hideComList: hideComList,
      parentDOM: parentDOM,
      pageConfig: item,
      isEdit: false,
      pageProps: pageProps,
      request: request,
      jumpto: _jumpto,
      onChange: function onChange(widgets) {
        _onChange(_extends({}, item, {
          widgets: widgets
        }));
      },
      customGetComRequire: customGetComRequire,
      comDict: comDict,
      appConfig: appPageConfig
    }));
  })) : null);
}

MultiLayoutView.propTypes = {
  /**
   * 模板数据
   */
  appPageConfig: PropTypes.object,

  /**
   * 页面参数
   */
  pageProps: PropTypes.object,

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