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

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

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports["default"] = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _nav = _interopRequireDefault(require("@alifd/next/lib/nav"));

var _button = _interopRequireDefault(require("@alifd/next/lib/button"));

var _icon = _interopRequireDefault(require("@alifd/next/lib/icon"));

var _react = _interopRequireDefault(require("react"));

var _dragPanel = _interopRequireDefault(require("../drag-panel"));

var _gridBackground = _interopRequireDefault(require("../grid-background"));

require("./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["default"].createElement("div", {
    className: "HorizontalEditor-wrap"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "nav-parent"
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "nav-background"
  }, /*#__PURE__*/_react["default"].createElement(_nav["default"], {
    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["default"].createElement(_nav["default"].Item, {
      key: index
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "horizon-nav-item"
    }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
      text: true,
      onClick: function onClick(e) {
        e.stopPropagation();
        onClose(index);
      }
    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      type: "close"
    })), /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      type: item.icon
    }), item.pageName));
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: "add-btn"
  }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
    text: true,
    onClick: function onClick() {
      addNewTab();
    }
  }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
    type: "add"
  }))))), /*#__PURE__*/_react["default"].createElement("div", {
    className: "creater-canvas",
    onClick: function onClick() {
      onClickBlank();
    }
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: "creater-canvas-content horizon-view-content"
  }, /*#__PURE__*/_react["default"].createElement(_gridBackground["default"], {
    line1Color: "#DCDEE3",
    line1Size: "1px",
    line2Color: "#E6E7EB",
    line2Size: "1px",
    line1W: sizeX + "%",
    line1H: sizeY + "px",
    line2W: sizeX / 4 + "%",
    line2H: sizeY / 4 + "px"
  }), /*#__PURE__*/_react["default"].createElement(_dragPanel["default"], {
    layoutProps: (0, _extends2["default"])({
      droppingItem: droppingItem,
      isDroppable: isDroppable && isEdit
    }, layoutProps),
    pageConfig: currentConfig,
    selectedId: selected,
    onSelect: function onSelect(id) {
      onWidgetSelect(id);
    },
    isEdit: isEdit,
    onChange: function onChange(widgets) {
      _onChange((0, _extends2["default"])({}, currentConfig, {
        widgets: widgets
      }));
    },
    pageProps: pageProps,
    request: request,
    jumpto: jumpto,
    customGetComRequire: customGetComRequire
  }))));
}

var _default = HorizontalEditor;
exports["default"] = _default;