@riil-frontend/component-page-creater/es/components/view-layout/VerticalLayoutView.js

page creater 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 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, findComPageByType } from '../util';
import './VerticalLayoutView.scss';

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

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

  var hasData = appPageConfig && isAvailableArray(appPageConfig.configs);
  var tabByComType = 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 (isTabSelf) {
      var _findComPageByType2 = findComPageByType(appPageConfig, url),
          tabIndex = _findComPageByType2.fixIndex;

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

  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);
    },
    defaultActiveKey: fixIndex == -1 ? 0 : fixIndex,
    activeKey: currentKey,
    className: 'VerticalLayoutView',
    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
    }));
  })) : null);
}

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

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

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