@riil-frontend/component-page-config/es/components/edit-layout/MultiEditors.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 _Box from "@alifd/next/es/box";
import _Button from "@alifd/next/es/button";
import React, { useState, useEffect } from 'react';
import DragLayoutCanvas from '../drag-panel';
import './MultiEditors.scss';
import { getGridBackgroundStyle } from '../util';
import { LAYOUT_TYPE } from '../constant';
import FooterLayout from '@riil-frontend/component-footer-layout';
import AddDataGroup from '@riil-frontend/component-add-data-group';
import EditTabDrawer from './EditTabDrawer';

function MultiEditors(props) {
  var onTabChange = props.onTabChange,
      tabSelectedIndex = props.tabSelectedIndex,
      appPageConfig = props.appPageConfig,
      onClickBlank = props.onClickBlank,
      selected = props.selected,
      droppingItem = props.droppingItem,
      isDroppable = props.isDroppable,
      isEdit = props.isEdit,
      _onChange = props.onChange,
      onWidgetSelect = props.onWidgetSelect,
      pageProps = props.pageProps,
      jumpto = props.jumpto,
      onClose = props.onClose,
      onAppChange = props.onAppChange,
      request = props.request,
      addNewTab = props.addNewTab,
      layoutProps = props.layoutProps,
      customGetComRequire = props.customGetComRequire,
      comDict = props.comDict;
  var layoutType = appPageConfig.layoutType,
      configs = appPageConfig.configs;

  var _useState = useState(false),
      isNewTab = _useState[0],
      setIsNewTab = _useState[1];

  var _useState2 = useState(false),
      drawerVisible = _useState2[0],
      setDrawerVisible = _useState2[1];
  /**
   * 自定义tab页签
   * @param {string} key - 条目key值
   * @param {object} record  - 数据属性对象
   */


  var verRender = function verRender(key, record) {
    var isActive = key === tabSelectedIndex;
    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("div", {
    className: "MultiEditors-wrap"
  }, /*#__PURE__*/React.createElement(_Tab, {
    className: layoutType === LAYOUT_TYPE.horizontal ? 'VerticalEditor-wrap-tab-hor' : 'VerticalEditor-wrap-tab-ver',
    shape: layoutType === LAYOUT_TYPE.horizontal ? 'pure' : 'wrapped',
    tabPosition: layoutType === LAYOUT_TYPE.horizontal ? 'top' : 'left',
    onChange: function onChange(key) {
      onTabChange({
        tabSelectedIndex: key,
        currentPageConfig: configs.find(function (ele) {
          return ele.pageId === key;
        }),
        selected: undefined
      });
    },
    tabRender: layoutType === LAYOUT_TYPE.horizontal ? null : verRender,
    activeKey: tabSelectedIndex,
    extra: /*#__PURE__*/React.createElement(_Box, {
      direction: "row",
      justify: "center",
      className: "tab-extra-render"
    }, /*#__PURE__*/React.createElement(_Button, {
      style: {
        margin: 8
      },
      onClick: function onClick() {
        setDrawerVisible(true); // addNewTab();
        // setIsNewTab(true);
      },
      type: "primary"
    }, "\u7F16\u8F91\u9875\u7B7E"))
  }, configs.map(function (item, index) {
    var _item$layoutConfig = item.layoutConfig,
        cols = _item$layoutConfig.cols,
        rowHeight = _item$layoutConfig.rowHeight;
    var sizeX = 100 / cols;
    var sizeY = rowHeight;
    var style = getGridBackgroundStyle({
      line1Color: '#DCDEE3',
      line1Size: '1px',
      line2Color: '#eeeeee',
      line2Size: '1px',
      line1W: sizeX + "%",
      line1H: sizeY + "px",
      line2W: sizeX / 4 + "%",
      line2H: sizeY / 4 + "px"
    }, false);
    return /*#__PURE__*/React.createElement(_Tab.Item, {
      title: item.pageName,
      key: item.pageId
    }, /*#__PURE__*/React.createElement("div", {
      className: "creater-canvas " + item.pageId,
      onClick: function onClick() {
        onClickBlank();
      },
      style: {
        overflowY: 'scroll'
      }
    }, /*#__PURE__*/React.createElement(DragLayoutCanvas, {
      style: item.layoutConfig.isShowGrid ? style : null,
      layoutProps: _extends({
        droppingItem: droppingItem,
        isDroppable: isDroppable && isEdit
      }, layoutProps),
      pageConfig: item,
      selectedId: selected,
      onSelect: function onSelect(id) {
        onWidgetSelect(id);
      },
      isEdit: isEdit,
      onChange: function onChange(widgets) {
        _onChange(_extends({}, item, {
          widgets: widgets
        }));
      },
      pageProps: pageProps,
      request: request,
      jumpto: jumpto,
      customGetComRequire: customGetComRequire,
      comDict: comDict,
      tabKey: item.pageId,
      appConfig: appPageConfig
    })));
  })), drawerVisible ? /*#__PURE__*/React.createElement(EditTabDrawer, {
    visible: drawerVisible,
    onClose: function onClose() {
      setDrawerVisible(false);
    },
    onOk: function onOk(app) {
      onAppChange(app);
    },
    appPageConfig: appPageConfig
  }) : null);
}

export default MultiEditors;