@alilc/lowcode-editor-skeleton/es/layouts/sub-top-area.js

alibaba lowcode editor skeleton

import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
var _class, _class2;
import { Component, Fragment } from 'react';
import classNames from 'classnames';
import { observer } from '@alilc/lowcode-editor-core';
var SubTopArea = observer(_class2 = /*#__PURE__*/function (_Component2) {
  function SubTopArea() {
    return _Component2.apply(this, arguments) || this;
  }
  _inheritsLoose(SubTopArea, _Component2);
  var _proto2 = SubTopArea.prototype;
  _proto2.render = function render() {
    var _this$props2 = this.props,
      area = _this$props2.area,
      itemClassName = _this$props2.itemClassName;
    if (area.isEmpty()) {
      return null;
    }
    return /*#__PURE__*/React.createElement("div", {
      className: classNames('lc-workspace-sub-top-area lc-sub-top-area engine-actionpane', {
        'lc-area-visible': area.visible
      })
    }, /*#__PURE__*/React.createElement(Contents, {
      area: area,
      itemClassName: itemClassName
    }));
  };
  return SubTopArea;
}(Component)) || _class2;
export { SubTopArea as default };
var Contents = observer(_class = /*#__PURE__*/function (_Component) {
  function Contents() {
    return _Component.apply(this, arguments) || this;
  }
  _inheritsLoose(Contents, _Component);
  var _proto = Contents.prototype;
  _proto.render = function render() {
    var _this$props = this.props,
      area = _this$props.area,
      itemClassName = _this$props.itemClassName;
    var left = [];
    var center = [];
    var right = [];
    area.container.items.slice().sort(function (a, b) {
      var _a$config, _b$config;
      var index1 = ((_a$config = a.config) === null || _a$config === void 0 ? void 0 : _a$config.index) || 0;
      var index2 = ((_b$config = b.config) === null || _b$config === void 0 ? void 0 : _b$config.index) || 0;
      return index1 === index2 ? 0 : index1 > index2 ? 1 : -1;
    }).forEach(function (item) {
      var content = /*#__PURE__*/React.createElement("div", {
        className: itemClassName || '',
        key: "top-area-" + item.name
      }, item.content);
      if (item.align === 'center') {
        center.push(content);
      } else if (item.align === 'left') {
        left.push(content);
      } else {
        right.push(content);
      }
    });
    var children = [];
    if (left && left.length) {
      children.push(/*#__PURE__*/React.createElement("div", {
        className: "lc-workspace-sub-top-area-left lc-sub-top-area-left"
      }, left));
    }
    if (center && center.length) {
      children.push(/*#__PURE__*/React.createElement("div", {
        className: "lc-workspace-sub-top-area-center lc-sub-top-area-center"
      }, center));
    }
    if (right && right.length) {
      children.push(/*#__PURE__*/React.createElement("div", {
        className: "lc-workspace-sub-top-area-right lc-sub-top-area-right"
      }, right));
    }
    return /*#__PURE__*/React.createElement(Fragment, null, children);
  };
  return Contents;
}(Component)) || _class;