@riil-frontend/component-page-config/lib/components/edit-layout/MultiEditors.js

page config 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _box = _interopRequireDefault(require("@alifd/next/lib/box"));

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

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

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

require("./MultiEditors.scss");

var _util = require("../util");

var _constant = require("../constant");

var _componentFooterLayout = _interopRequireDefault(require("@riil-frontend/component-footer-layout"));

var _componentAddDataGroup = _interopRequireDefault(require("@riil-frontend/component-add-data-group"));

var _EditTabDrawer = _interopRequireDefault(require("./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 = (0, _react.useState)(false),
      isNewTab = _useState[0],
      setIsNewTab = _useState[1];

  var _useState2 = (0, _react.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["default"].createElement("div", {
      className: "editor-render-ver"
    }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
      className: "editor-render-ver-btn",
      type: isActive ? 'primary' : 'normal'
    }, record.title), isActive ? /*#__PURE__*/_react["default"].createElement("div", {
      className: "editor-render-ver-active-bar"
    }) : null);
  };

  return /*#__PURE__*/_react["default"].createElement("div", {
    className: "MultiEditors-wrap"
  }, /*#__PURE__*/_react["default"].createElement(_tab["default"], {
    className: layoutType === _constant.LAYOUT_TYPE.horizontal ? 'VerticalEditor-wrap-tab-hor' : 'VerticalEditor-wrap-tab-ver',
    shape: layoutType === _constant.LAYOUT_TYPE.horizontal ? 'pure' : 'wrapped',
    tabPosition: layoutType === _constant.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 === _constant.LAYOUT_TYPE.horizontal ? null : verRender,
    activeKey: tabSelectedIndex,
    extra: /*#__PURE__*/_react["default"].createElement(_box["default"], {
      direction: "row",
      justify: "center",
      className: "tab-extra-render"
    }, /*#__PURE__*/_react["default"].createElement(_button["default"], {
      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 = (0, _util.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["default"].createElement(_tab["default"].Item, {
      title: item.pageName,
      key: item.pageId
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: "creater-canvas " + item.pageId,
      onClick: function onClick() {
        onClickBlank();
      },
      style: {
        overflowY: 'scroll'
      }
    }, /*#__PURE__*/_react["default"].createElement(_dragPanel["default"], {
      style: item.layoutConfig.isShowGrid ? style : null,
      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,
      comDict: comDict,
      tabKey: item.pageId,
      appConfig: appPageConfig
    })));
  })), drawerVisible ? /*#__PURE__*/_react["default"].createElement(_EditTabDrawer["default"], {
    visible: drawerVisible,
    onClose: function onClose() {
      setDrawerVisible(false);
    },
    onOk: function onOk(app) {
      onAppChange(app);
    },
    appPageConfig: appPageConfig
  }) : null);
}

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