@riil-frontend/component-page-creater/es/components/edit-layout/VerticalEditor.js

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

import _Tab from "@alifd/next/es/tab";
import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import { useState } from 'react';
import EditableTabPane from './EditableTabPane';
import DragLayoutCanvas from '../drag-panel';
import './VerticalEditor.scss';
import GridBackground from '../grid-background';

function VerticalEditor(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;

  var _useState = useState(false),
      isNewTab = _useState[0],
      setIsNewTab = _useState[1];
  /**
   * 名称被修改回调，触发配置变更方法
   * @param {string} key
   * @param {string} pageName
   */


  var onNameChange = function onNameChange(key, pageName) {
    var configs = appPageConfig.configs.map(function (item, index) {
      if (index == key) {
        return _extends({}, item, {
          pageName: pageName
        });
      } else {
        return item;
      }
    });
    onAppChange(_extends({}, appPageConfig, {
      configs: configs
    }));
  };
  /**
   * 自定义tab页签
   * @param {string} key - 条目key值
   * @param {object} param  - 数据属性对象
   * @param {string} param.title - tab名称
   * @param {boolean} param.closeable - 是否开启关闭按钮
   */


  var tabRender = function tabRender(key, record) {
    var title = record.title,
        closeable = record.closeable;
    var isLatest = appPageConfig.configs.length - 1 === Number(key) && isNewTab;
    return /*#__PURE__*/React.createElement("div", {
      key: key
    }, /*#__PURE__*/React.createElement(EditableTabPane, {
      isNewTab: isLatest,
      defaultTitle: title,
      closeable: closeable,
      onClose: function onClose() {
        _onClose(key);

        setIsNewTab(false);
      },
      onChange: function onChange(value) {
        onNameChange(key, value);
        setIsNewTab(false);
      },
      isEditModel: isEdit
    }));
  };

  return /*#__PURE__*/React.createElement("div", {
    className: "VerticalEditor-wrap"
  }, /*#__PURE__*/React.createElement(_Tab, {
    className: "VerticalEditor-wrap-tab",
    onChange: function onChange(key) {
      onTabChange({
        tabSelectedIndex: key,
        currentPageConfig: appPageConfig.configs[key],
        selected: undefined
      });
    },
    tabRender: tabRender,
    activeKey: tabSelectedIndex,
    extra: /*#__PURE__*/React.createElement(_Button, {
      text: true,
      title: "\u6DFB\u52A0\u9875\u7B7E",
      onClick: function onClick() {
        addNewTab();
        setIsNewTab(true);
      }
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: "add"
    }))
  }, appPageConfig.configs.map(function (item, index) {
    var cols = item.layoutConfig.cols;
    var sizeX = 100 / cols;
    var sizeY = 32;
    return /*#__PURE__*/React.createElement(_Tab.Item, {
      title: item.pageName,
      key: index,
      closeable: true
    }, /*#__PURE__*/React.createElement("div", {
      className: "creater-canvas",
      onClick: function onClick() {
        onClickBlank();
      }
    }, /*#__PURE__*/React.createElement("div", {
      className: "creater-canvas-content"
    }, /*#__PURE__*/React.createElement(GridBackground, {
      line1Color: "#DCDEE3",
      line1Size: "1px",
      line2Color: "#eeeeee",
      line2Size: "1px",
      line1W: sizeX + "%",
      line1H: sizeY + "px",
      line2W: sizeX / 4 + "%",
      line2H: sizeY / 4 + "px"
    }), /*#__PURE__*/React.createElement(DragLayoutCanvas, {
      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
    }))));
  })));
}

export default VerticalEditor;