Skip to content

Commit 23002d8

Browse files
liujupingJackLian
liujuping
authored and
JackLian
committed
feat(view-manager): add context menus
1 parent 291e0a5 commit 23002d8

File tree

7 files changed

+193
-346
lines changed

7 files changed

+193
-346
lines changed

‎packages/plugin-view-manager-pane/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
"editor"
1919
],
2020
"dependencies": {
21-
"@alilc/lowcode-types": "^1.0.0",
21+
"@alilc/lowcode-types": "^1.3.0",
2222
"@alilc/lowcode-utils": "^1.0.0",
2323
"react": "^16.8.1",
2424
"react-dom": "^16.8.1"

‎packages/plugin-view-manager-pane/src/components/addFile/behaviors.tsx‎

Lines changed: 14 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,105 +1,31 @@
11
import React from 'react';
2-
import { Overlay, Menu } from '@alifd/next';
3-
import { IPublicModelResource } from '@alilc/lowcode-types';
2+
import { IPublicModelPluginContext, IPublicModelResource } from '@alilc/lowcode-types';
43
import { OthersIcon } from '../resourceTree/icon';
54
import { IOptions } from '../..';
6-
import { intl } from '../../locale';
7-
8-
const { Item } = Menu;
9-
const { Popup } = Overlay;
105

116
export function Behaviors(props: {
7+
pluginContext: IPublicModelPluginContext;
128
resource: IPublicModelResource;
139
options: IOptions;
14-
showBehaviors: boolean;
15-
onVisibleChange: any;
1610
safeNode: any;
1711
}) {
18-
const { description, name } = props.resource;
19-
let behaviors = [];
20-
if (name === 'lowcode') {
21-
props.options?.onEditComponent && behaviors.push('edit');
22-
props.options?.onCopyComponent && behaviors.push('copy');
23-
props.options?.onDeleteComponent && behaviors.push('delete');
24-
} else if (name === 'page') {
25-
props.options?.onEditPage && behaviors.push('edit');
26-
props.options?.onCopyPage && behaviors.push('copy');
27-
props.options?.onDeletePage && behaviors.push('delete');
28-
}
12+
const menus = (props.options?.resourceContextMenuActions?.(props.pluginContext, props.resource) || []).filter(d => !d.condition || d.condition && d.condition());
13+
const ContextMenu = props.pluginContext.commonUI?.ContextMenu || React.Fragment;
2914

30-
if (!behaviors.length) {
15+
if (!menus.length) {
3116
return null;
3217
}
3318

3419
return (
35-
<Popup
36-
v2
37-
trigger={
38-
<div
39-
className="resource-tree-group-item-behaviors-trigger"
40-
onClick={(e) => {
41-
e.stopPropagation();
42-
e.preventDefault();
43-
}}
44-
>
45-
<OthersIcon />
46-
</div>
47-
}
48-
triggerType="click"
49-
align="bl"
50-
className="view-pane-popup"
51-
visible={props.showBehaviors}
52-
safeNode={props.safeNode}
53-
onVisibleChange={props.onVisibleChange}
20+
<div
21+
className="resource-tree-group-item-behaviors-trigger"
22+
onClick={(e) => {
23+
e.stopPropagation();
24+
e.preventDefault();
25+
ContextMenu.create(menus, e);
26+
}}
5427
>
55-
<Menu openMode="single">
56-
{behaviors.map((d) => {
57-
let text, handleLowcodeClick: any, handlePageClick: any;
58-
switch (d) {
59-
case 'edit':
60-
text = intl(
61-
'view_manager.components.addFile.behaviors.DescriptionSettings',
62-
{ description: description }
63-
);
64-
handleLowcodeClick = props.options?.onEditComponent;
65-
handlePageClick = props.options?.onEditPage;
66-
break;
67-
case 'copy':
68-
text = intl(
69-
'view_manager.components.addFile.behaviors.CopyDescription',
70-
{ description: description }
71-
);
72-
handleLowcodeClick = props.options?.onCopyComponent;
73-
handlePageClick = props.options?.onCopyPage;
74-
break;
75-
case 'delete':
76-
text = intl(
77-
'view_manager.components.addFile.behaviors.DeleteDescription',
78-
{ description: description }
79-
);
80-
handleLowcodeClick = props.options?.onDeleteComponent;
81-
handlePageClick = props.options?.onDeletePage;
82-
break;
83-
}
84-
85-
return (
86-
<Item
87-
onClick={(e) => {
88-
e.stopPropagation();
89-
e.preventDefault();
90-
props.onVisibleChange(false);
91-
if (name === 'lowcode') {
92-
handleLowcodeClick?.(props.resource);
93-
} else {
94-
handlePageClick?.(props.resource);
95-
}
96-
}}
97-
>
98-
{text}
99-
</Item>
100-
);
101-
})}
102-
</Menu>
103-
</Popup>
28+
<OthersIcon />
29+
</div>
10430
);
10531
}

‎packages/plugin-view-manager-pane/src/components/addFile/index.tsx‎

Lines changed: 13 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,30 @@
1-
import { Overlay, Menu } from '@alifd/next';
21
import * as React from 'react';
32
import { observer } from 'mobx-react';
3+
import { IPublicModelPluginContext } from '@alilc/lowcode-types';
44
import { AddIcon } from '../../icon';
55
import { IOptions } from '../..';
6-
76
import './index.scss';
8-
import { intl } from '../../locale';
9-
10-
const { Popup } = Overlay;
11-
const { Item } = Menu;
127

13-
function AddFileComponent(props: { options: IOptions }) {
8+
function AddFileComponent(props: { options: IOptions, pluginContext: IPublicModelPluginContext }) {
149
if (props.options?.renderAddFileComponent && typeof props.options.renderAddFileComponent === 'function') {
1510
return props.options.renderAddFileComponent();
1611
}
1712

18-
if (!props.options?.onAddPage && !props.options?.onAddComponent) {
13+
const menus = props.options?.contextMenuActions?.(props.pluginContext);
14+
15+
if (!menus || !menus.length) {
1916
return null;
2017
}
2118

22-
return (
23-
<>
24-
<Popup
25-
v2
26-
trigger={
27-
<span className='add-file-icon-wrap'>
28-
<AddIcon />
29-
</span>
30-
}
31-
triggerType="click"
32-
align="bl"
33-
className="view-pane-popup"
34-
>
35-
<Menu openMode="single">
36-
{props.options.onAddPage ? (
37-
<Item
38-
onClick={(e) => {
39-
props.options.onAddPage?.();
40-
}}
41-
>
42-
{intl('view_manager.components.addFile.CreatePage')}
43-
</Item>
44-
) : null}
19+
const ContextMenu = props.pluginContext?.commonUI?.ContextMenu || React.Fragment;
4520

46-
{props.options.onAddComponent ? (
47-
<Item
48-
onClick={(e) => {
49-
props.options.onAddComponent?.();
50-
}}
51-
>
52-
{intl('view_manager.components.addFile.CreateAComponent')}
53-
</Item>
54-
) : null}
55-
</Menu>
56-
</Popup>
57-
</>
58-
);
21+
return (
22+
<span onClick={(e) => {
23+
ContextMenu.create(menus, e)
24+
}} className='add-file-icon-wrap'>
25+
<AddIcon />
26+
</span>
27+
)
5928
}
6029

6130
export const AddFile = observer(AddFileComponent);

‎packages/plugin-view-manager-pane/src/components/resourceTree/index.scss‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,11 @@
2525
display: flex;
2626
align-items: center;
2727
height: 30px;
28+
cursor: pointer;
29+
30+
&:hover {
31+
background-color: var(--color-block-background-light, #f7f8fa);
32+
}
2833
}
2934

3035
&-expand {

0 commit comments

Comments
 (0)