-
- {visiblePluginList.map((item, idx) => {
+
+ {list.map(
+ (item): React.ReactElement => {
const Comp = this.editor.components[item.pluginKey];
return (
);
- })}
-
+ }
+ )}
+
+ );
+ };
+
+ renderPanels = (list: PluginConfig[], height: string): React.ReactNode => {
+ return list.map(
+ (item): React.ReactElement => {
+ const Comp = this.editor.components[item.pluginKey];
+ return (
+
+
+
+ );
+ }
+ );
+ };
+
+ render(): React.ReactNode {
+ const tabList = this.areaManager.getVisiblePluginList('TabPanel');
+ const panelList = this.areaManager.getVisiblePluginList('Panel');
+ if (isEmpty(panelList) && isEmpty(tabList)) {
+ return null;
+ } else if (tabList.length === 1) {
+ panelList.unshift(tabList[0]);
+ tabList.splice(0, 1);
+ }
+ const height = `${Math.floor(100 / (panelList.length + (tabList.length > 0 ? 1 : 0)))}%`;
+ return (
+
+ {this.renderTabPanels(tabList, height)}
+ {this.renderPanels(panelList, height)}
);
}
diff --git a/packages/editor/src/skeleton/layouts/TopArea/index.scss b/packages/editor/src/skeleton/layouts/TopArea/index.scss
index 98af961da..a22456894 100644
--- a/packages/editor/src/skeleton/layouts/TopArea/index.scss
+++ b/packages/editor/src/skeleton/layouts/TopArea/index.scss
@@ -3,24 +3,28 @@
top: 0;
left: 0;
width: 100%;
- height: 48px;
- background-color: #ffffff;
- border-bottom: 1px solid #e8ebee;
+ height: 50px;
+ background-color: $card-background;
+ border-bottom: 2px solid $color-line1-1;
user-select: none;
.divider {
max-width: 0;
- margin: 8px 12px;
- height: 30px;
- border-right: 1px solid rgba(191, 191, 191, 0.3);
+ margin: 12px 16px;
+ height: 24px;
+ border-right: 1px solid $color-line1-2;
}
.next-col {
text-align: center;
}
+ .left-area {
+ padding: 0 16px;
+ }
.right-area {
position: absolute;
right: 12px;
top: 0;
+ padding: 0 16px;
height: 100%;
- background: #ffffff;
+ background: $card-background;
}
}
diff --git a/packages/editor/src/skeleton/layouts/TopArea/index.tsx b/packages/editor/src/skeleton/layouts/TopArea/index.tsx
index df8828a9d..d6b33453c 100644
--- a/packages/editor/src/skeleton/layouts/TopArea/index.tsx
+++ b/packages/editor/src/skeleton/layouts/TopArea/index.tsx
@@ -16,6 +16,7 @@ export default class TopArea extends PureComponent
{
static displayName = 'LowcodeTopArea';
private areaManager: AreaManager;
+
private editor: Editor;
constructor(props) {
@@ -24,10 +25,11 @@ export default class TopArea extends PureComponent {
this.areaManager = new AreaManager(props.editor, 'topArea');
}
- componentDidMount() {
+ componentDidMount(): void {
this.editor.on('skeleton.update', this.handleSkeletonUpdate);
}
- componentWillUnmount() {
+
+ componentWillUnmount(): void {
this.editor.off('skeleton.update', this.handleSkeletonUpdate);
}
@@ -38,31 +40,33 @@ export default class TopArea extends PureComponent {
}
};
- renderPluginList = (list: Array = []): Array => {
- return list.map((item, idx) => {
- const isDivider = item.type === 'Divider';
- return (
-
- {!isDivider && (
-
- )}
-
- );
- });
+ renderPluginList = (list: PluginConfig[] = []): React.ReactElement[] => {
+ return list.map(
+ (item, idx): React.ReactElement => {
+ const isDivider = item.type === 'Divider';
+ return (
+
+ {!isDivider && (
+
+ )}
+
+ );
+ }
+ );
};
- render() {
- const leftList: Array = [];
- const rightList: Array = [];
+ render(): React.ReactNode {
+ const leftList: PluginConfig[] = [];
+ const rightList: PluginConfig[] = [];
const visiblePluginList = this.areaManager.getVisiblePluginList();
- visiblePluginList.forEach(item => {
+ visiblePluginList.forEach((item): void => {
const align = item.props && item.props.align === 'right' ? 'right' : 'left';
// 分隔符不允许相邻
if (item.type === 'Divider') {