feat(view-manager): add context-menu

alibaba · Jan 9, 2024 · 9304e75 · 9304e75
1 parent 53125b8
commit 9304e75
Show file tree

Hide file tree

Showing 4 changed files with 161 additions and 166 deletions.
diff --git a/packages/plugin-view-manager-pane/package.json b/packages/plugin-view-manager-pane/package.json
@@ -18,7 +18,7 @@
     "editor"
   ],
   "dependencies": {
-    "@alilc/lowcode-types": "^1.0.0",
+    "@alilc/lowcode-types": "^1.3.0-beta.3",
     "@alilc/lowcode-utils": "^1.0.0",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"

diff --git a/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx b/packages/plugin-view-manager-pane/src/components/resourceTree/index.tsx
@@ -152,69 +152,31 @@ function ResourceGroup(
     );
   }
 
+  const ContextMenu = props.pluginContext?.commonUI.ContextMenu || React.Fragment;
+
   return (
     <div
       className="resource-tree-group"
       data-depth={props.depth}
     >
-      <div
-        className="resource-tree-group-wrap"
-        onContextMenu={(e) => {
-          e.preventDefault();
-          e.stopPropagation();
-          setVisible(!visible);
-        }}
-        ref={ref}
+      <ContextMenu
+        menus={props.options?.customResourceGroupMenuItemActions?.(props.pluginContext!, resourceArr) || []}
       >
-        <div
-          className={`resource-tree-expand ${expanded ? 'expanded' : ''}`}
-          onClick={() => {
-            setExpanded(!expanded);
-          }}
-        >
-          <IconArrowRight />
-        </div>
-        <div className="resource-tree-group-icon">
-          <FileIcon />
+        <div className='resource-tree-group-wrap'>
+          <div
+            className={`resource-tree-expand ${expanded ? 'expanded' : ''}`}
+            onClick={() => {
+              setExpanded(!expanded);
+            }}
+          >
+            <IconArrowRight />
+          </div>
+          <div className="resource-tree-group-icon">
+            <FileIcon />
+          </div>
+          <div className="resource-tree-group-title">{props.categoryName}</div>
         </div>
-        <div className="resource-tree-group-title">{props.categoryName}</div>
-        {
-          [intl('view_manager.components.resourceTree.Page'), intl('view_manager.components.resourceTree.Component')].includes(props.categoryName) ? (
-            <Popup
-              v2
-              visible={visible}
-              target={ref?.current}
-              onRequestClose={() => {
-                setVisible(false);
-              }}
-              safeNode={ref?.current}
-              placement="br"
-              className="view-pane-popup"
-            >
-              <Menu openMode="single">
-                <Item
-                  onClick={(e) => {
-                    if (
-                      props.categoryName ===
-                      intl('view_manager.components.resourceTree.Page')
-                    ) {
-                      props.options.onAddPage?.();
-                    } else {
-                      props.options.onAddComponent?.();
-                    }
-                  }}
-                >
-                  {intl('view_manager.components.resourceTree.CreateItem', {
-                    categoryName: props.categoryName === intl('view_manager.components.resourceTree.Page')
-                    ? intl('view_manager.components.resourceTree.Page')
-                    : intl('view_manager.components.resourceTree.Component'),
-                  })}
-                </Item>
-              </Menu>
-            </Popup>
-          ) : null
-        }
-      </div>
+      </ContextMenu>
       {expanded && (
         <div className="resource-tree-children">
           {resourceArr.map((d) => (
@@ -267,111 +229,109 @@ function ResourceItem(props: {
     disabled,
     tips,
   } = props.resource?.config || {};
+  const ContextMenu = props.pluginContext?.commonUI.ContextMenu || React.Fragment;
 
   const context = (
-    <div
-      ref={ref}
-      className={`resource-tree-group-node ${
-        disabled
-          ? 'resource-tree-group-disabled'
-          : ''
-      } ${props.activeId === props.resource?.options.id || props.activeId === props.resource?.id ? 'active' : ''}`}
-      onContextMenu={(e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        setShowBehaviors(!showBehaviors);
-      }}
-      data-depth={props.depth}
-    >
+    <ContextMenu menus={props.options?.customResourceMenuItemActions?.(props.pluginContext!, props.resource!) || []}>
       <div
-        onClick={() => {
-          if (disabled) {
-            return;
-          }
-          props.resource && props.pluginContext?.workspace.openEditorWindow(props.resource);
-        }}
-        className="resource-tree-title"
-        style={style}
+        ref={ref}
+        className={`resource-tree-group-node ${
+          disabled
+            ? 'resource-tree-group-disabled'
+            : ''
+        } ${props.activeId === props.resource?.options.id || props.activeId === props.resource?.id ? 'active' : ''}`}
+        data-depth={props.depth}
       >
-        {props.resource?.options.modified ? (
-          <Balloon
-            v2
-            trigger={<div className='resource-tree-group-item-modified-wrap'><div className="resource-tree-group-item-modified"></div></div>}
-            triggerType="hover"
-            align='bl'
-            title=""
-          >
-            {props.resource.options.modifiedTips}
-          </Balloon>
-        ) : null}
+        <div
+          onClick={() => {
+            if (disabled) {
+              return;
+            }
+            props.resource && props.pluginContext?.workspace.openEditorWindow(props.resource);
+          }}
+          className="resource-tree-title"
+          style={style}
+        >
+          {props.resource?.options.modified ? (
+            <Balloon
+              v2
+              trigger={<div className='resource-tree-group-item-modified-wrap'><div className="resource-tree-group-item-modified"></div></div>}
+              triggerType="hover"
+              align='bl'
+              title=""
+            >
+              {props.resource.options.modifiedTips}
+            </Balloon>
+          ) : null}
 
-        {((children && children.length) || null) && (
-          <div
-            className={`resource-tree-expand ${expanded ? 'expanded' : ''}`}
-            onClick={(e) => {
-              setExpanded(!expanded);
-              e.stopPropagation();
-              e.preventDefault();
-            }}
-          >
-            <IconArrowRight />
-          </div>
-        )}
+          {((children && children.length) || null) && (
+            <div
+              className={`resource-tree-expand ${expanded ? 'expanded' : ''}`}
+              onClick={(e) => {
+                setExpanded(!expanded);
+                e.stopPropagation();
+                e.preventDefault();
+              }}
+            >
+              <IconArrowRight />
+            </div>
+          )}
 
-        <div className="resource-tree-group-item-icon">
-          {PropsIcon && <PropsIcon />}
-        </div>
-        <div className="resource-tree-group-title-label">
-          {props.resource?.options?.label || props.resource?.title}
+          <div className="resource-tree-group-item-icon">
+            {PropsIcon && <PropsIcon />}
+          </div>
+          <div className="resource-tree-group-title-label">
+            {props.resource?.options?.label || props.resource?.title}
 
-          {
-            props.resource?.options?.slug ||
-            props.resource?.options?.componentName ? (
-              <span className="resource-tree-group-item-code">
-                ({ props.resource.options?.slug || props.resource.options?.componentName })
-              </span>
-            ) : null
-          }
-        </div>
+            {
+              props.resource?.options?.slug ||
+              props.resource?.options?.componentName ? (
+                <span className="resource-tree-group-item-code">
+                  ({ props.resource.options?.slug || props.resource.options?.componentName })
+                </span>
+              ) : null
+            }
+          </div>
 
 
-        <div className="resource-tree-group-item-behaviors">
-          {Behaviors &&
-          (props.resource?.config as any)?.disableBehaviors !== true ? (
-            <Behaviors
-              showBehaviors={showBehaviors}
-              resource={props.resource}
-              onVisibleChange={(visible: boolean) => {
-                setShowBehaviors(visible);
-              }}
-              safeNode={ref?.current}
-            />
-          ) : null}
+          <div className="resource-tree-group-item-behaviors">
+            {Behaviors &&
+            (props.resource?.config as any)?.disableBehaviors !== true ? (
+              <Behaviors
+                showBehaviors={showBehaviors}
+                resource={props.resource}
+                onVisibleChange={(visible: boolean) => {
+                  setShowBehaviors(visible);
+                }}
+                safeNode={ref?.current}
+              />
+            ) : null}
+          </div>
         </div>
-      </div>
 
-      {
-        expanded && children?.length ? (
-          <div className='resource-tree-children'>
-            {
-              props.children?.map((child) => (
-                <ResourceItem
-                  children={child.children}
-                  icon={child.icon}
-                  key={child.id}
-                  activeId={props.activeId}
-                  resource={child}
-                  behaviors={props.behaviors}
-                  options={props.options}
-                  pluginContext={props.pluginContext}
-                  depth={props.depth + 1}
-                />
-              ))
-            }
-          </div>
-        ) : null
-      }
-    </div>
+        {
+          expanded && children?.length ? (
+            <div className='resource-tree-children'>
+              {
+                props.children?.map((child) => (
+                  <ResourceItem
+                    children={child.children}
+                    icon={child.icon}
+                    key={child.id}
+                    activeId={props.activeId}
+                    resource={child}
+                    behaviors={props.behaviors}
+                    options={props.options}
+                    pluginContext={props.pluginContext}
+                    depth={props.depth + 1}
+                  />
+                ))
+              }
+            </div>
+          ) : null
+        }
+      </div>
+    </ContextMenu>
   );
 
   if (tips) {

diff --git a/packages/plugin-view-manager-pane/src/index.tsx b/packages/plugin-view-manager-pane/src/index.tsx
@@ -3,6 +3,7 @@ import {
   IPublicModelPluginContext,
   IPublicModelResource,
   IPublicTypeSkeletonConfig,
+  IPublicTypeContextMenuAction,
 } from '@alilc/lowcode-types';
 import Icon from './icon';
 import { Pane } from './pane';
@@ -35,6 +36,21 @@ export interface IOptions {
   showIconText?: boolean;
 
   skeletonConfig?: IPublicTypeSkeletonConfig;
+
+  /**
+   * 右键资源项，菜单项
+   */
+  customResourceMenuItemActions?: (ctx: IPublicModelPluginContext, resource: IPublicModelResource) => IPublicTypeContextMenuAction[];
+
+  /**
+   * 右键其他区域，菜单项
+   */
+  customDefaultResourceMenuItemActions?: (ctx: IPublicModelPluginContext) => IPublicTypeContextMenuAction[];
+
+  /**
+   * 右键菜单项组，菜单项
+   */
+  customResourceGroupMenuItemActions?: (ctx: IPublicModelPluginContext, resources: IPublicModelResource[]) => IPublicTypeContextMenuAction[];
 }
 
 const ViewManagerPane = (
@@ -144,6 +160,21 @@ ViewManagerPane.meta = {
         key: 'skeletonConfig',
         type: 'object',
         description: '',
+      },
+      {
+        key: 'customResourceMenuItemActions',
+        type: 'function',
+        describe: '右键资源项，菜单项',
+      },
+      {
+        key: 'customDefaultResourceMenuItemActions',
+        type: 'function',
+        describe: '右键面板，菜单项',
+      },
+      {
+        key: 'customResourceGroupMenuItemActions',
+        type: 'function',
+        describe: '右键菜单项组，菜单项',
       }
     ],
   },

diff --git a/packages/plugin-view-manager-pane/src/pane.tsx b/packages/plugin-view-manager-pane/src/pane.tsx
@@ -12,25 +12,29 @@ export function Pane(props: {
     props.options?.init?.(props.pluginContext);
   }, []);
 
+  const ContextMenu = props.pluginContext.commonUI.ContextMenu || React.Fragment;
+
   return (
-    <div
-      className="workspace-view-pane"
-    >
+    <ContextMenu menus={props.options?.customDefaultResourceMenuItemActions?.(props.pluginContext) || []}>
       <div
-        className="workspace-view-pane-content"
-        onClick={(e) => {
-          e.stopPropagation();
-        }}
+        className="workspace-view-pane"
       >
-        <ResourcePaneContent
-          defaultExpandAll={true}
-          pluginContext={props.pluginContext}
-          behaviors={(behaviorsProps: any) => {
-            return <Behaviors {...behaviorsProps} options={props.options} />;
+        <div
+          className="workspace-view-pane-content"
+          onClick={(e) => {
+            e.stopPropagation();
           }}
-          options={props.options}
-        />
+        >
+          <ResourcePaneContent
+            defaultExpandAll={true}
+            pluginContext={props.pluginContext}
+            behaviors={(behaviorsProps: any) => {
+              return <Behaviors {...behaviorsProps} options={props.options} />;
+            }}
+            options={props.options}
+          />
+        </div>
       </div>
-    </div>
+    </ContextMenu>
   );
 }