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

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

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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

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

var _tab = _interopRequireDefault(require("@alifd/next/lib/tab"));

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

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

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

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

var _EditableTabPane = _interopRequireDefault(require("./EditableTabPane"));

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

require("./VerticalEditor.scss");

var _gridBackground = _interopRequireDefault(require("../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 = (0, _react.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 (0, _extends2["default"])({}, item, {
          pageName: pageName
        });
      } else {
        return item;
      }
    });
    onAppChange((0, _extends2["default"])({}, 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["default"].createElement("div", {
      key: key
    }, /*#__PURE__*/_react["default"].createElement(_EditableTabPane["default"], {
      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["default"].createElement("div", {
    className: "VerticalEditor-wrap"
  }, /*#__PURE__*/_react["default"].createElement(_tab["default"], {
    className: "VerticalEditor-wrap-tab",
    onChange: function onChange(key) {
      onTabChange({
        tabSelectedIndex: key,
        currentPageConfig: appPageConfig.configs[key],
        selected: undefined
      });
    },
    tabRender: tabRender,
    activeKey: tabSelectedIndex,
    extra: /*#__PURE__*/_react["default"].createElement(_button["default"], {
      text: true,
      title: "\u6DFB\u52A0\u9875\u7B7E",
      onClick: function onClick() {
        addNewTab();
        setIsNewTab(true);
      }
    }, /*#__PURE__*/_react["default"].createElement(_icon["default"], {
      type: "add"
    }))
  }, appPageConfig.configs.map(function (item, index) {
    var cols = item.layoutConfig.cols;
    var sizeX = 100 / cols;
    var sizeY = 32;
    return /*#__PURE__*/_react["default"].createElement(_tab["default"].Item, {
      title: item.pageName,
      key: index,
      closeable: true
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "creater-canvas",
      onClick: function onClick() {
        onClickBlank();
      }
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "creater-canvas-content"
    }, /*#__PURE__*/_react["default"].createElement(_gridBackground["default"], {
      line1Color: "#DCDEE3",
      line1Size: "1px",
      line2Color: "#eeeeee",
      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: item,
      selectedId: selected,
      onSelect: function onSelect(id) {
        onWidgetSelect(id);
      },
      isEdit: isEdit,
      onChange: function onChange(widgets) {
        _onChange((0, _extends2["default"])({}, item, {
          widgets: widgets
        }));
      },
      pageProps: pageProps,
      request: request,
      jumpto: jumpto,
      customGetComRequire: customGetComRequire
    }))));
  })));
}

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