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

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

import _extends from "@babel/runtime/helpers/extends";
import _Nav from "@alifd/next/es/nav";
import _Button from "@alifd/next/es/button";
import _Icon from "@alifd/next/es/icon";
import React from 'react';
import DragLayoutCanvas from '../drag-panel';
import GridBackground from '../grid-background';
import './HorizontalEditor.scss';

function HorizontalEditor(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,
      request = props.request,
      addNewTab = props.addNewTab,
      layoutProps = props.layoutProps,
      customGetComRequire = props.customGetComRequire;
  var currentConfig = appPageConfig === null || appPageConfig === void 0 ? void 0 : appPageConfig.configs[tabSelectedIndex];

  var _ref = (currentConfig === null || currentConfig === void 0 ? void 0 : currentConfig.layoutConfig) || {
    cols: null
  },
      cols = _ref.cols;

  var sizeX = cols && 100 / cols;
  var sizeY = 4 * 12;
  return /*#__PURE__*/React.createElement("div", {
    className: "HorizontalEditor-wrap"
  }, /*#__PURE__*/React.createElement("div", {
    className: "nav-parent"
  }, /*#__PURE__*/React.createElement("div", {
    className: "nav-background"
  }, /*#__PURE__*/React.createElement(_Nav, {
    className: "horizon-nav",
    style: {
      minWidth: 'unset'
    },
    direction: "ver",
    type: "normal",
    onSelect: function onSelect(selectedKeys) {
      var key = selectedKeys[0];
      onTabChange({
        tabSelectedIndex: key,
        currentPageConfig: appPageConfig.configs[key],
        selected: undefined
      });
    },
    selectedKeys: [tabSelectedIndex]
  }, appPageConfig.configs.map(function (item, index) {
    return /*#__PURE__*/React.createElement(_Nav.Item, {
      key: index
    }, /*#__PURE__*/React.createElement("div", {
      className: "horizon-nav-item"
    }, /*#__PURE__*/React.createElement(_Button, {
      text: true,
      onClick: function onClick(e) {
        e.stopPropagation();
        onClose(index);
      }
    }, /*#__PURE__*/React.createElement(_Icon, {
      type: "close"
    })), /*#__PURE__*/React.createElement(_Icon, {
      type: item.icon
    }), item.pageName));
  })), /*#__PURE__*/React.createElement("div", {
    className: "add-btn"
  }, /*#__PURE__*/React.createElement(_Button, {
    text: true,
    onClick: function onClick() {
      addNewTab();
    }
  }, /*#__PURE__*/React.createElement(_Icon, {
    type: "add"
  }))))), /*#__PURE__*/React.createElement("div", {
    className: "creater-canvas",
    onClick: function onClick() {
      onClickBlank();
    }
  }, /*#__PURE__*/React.createElement("div", {
    className: "creater-canvas-content horizon-view-content"
  }, /*#__PURE__*/React.createElement(GridBackground, {
    line1Color: "#DCDEE3",
    line1Size: "1px",
    line2Color: "#E6E7EB",
    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: currentConfig,
    selectedId: selected,
    onSelect: function onSelect(id) {
      onWidgetSelect(id);
    },
    isEdit: isEdit,
    onChange: function onChange(widgets) {
      _onChange(_extends({}, currentConfig, {
        widgets: widgets
      }));
    },
    pageProps: pageProps,
    request: request,
    jumpto: jumpto,
    customGetComRequire: customGetComRequire
  }))));
}

export default HorizontalEditor;