From 864a1a738377b6b0ea9fbffb5ce4844354fa42c6 Mon Sep 17 00:00:00 2001 From: Jenny <32821331+jenny-s51@users.noreply.github.com> Date: Fri, 8 Nov 2024 13:37:34 -0500 Subject: [PATCH] feat(context menu): add prop to hide the context menu kebab Add demo option to hide kebab context menus (#14) add condition to contextSpace to fix label size add check to TaskPill --- .../src/demos/topologyPackageDemo/DemoNode.tsx | 1 + .../demos/topologyPackageDemo/OptionsContextBar.tsx | 11 +++++++++++ .../src/demos/topologyPackageDemo/generator.ts | 1 + packages/module/src/behavior/withContextMenu.tsx | 1 + packages/module/src/components/nodes/DefaultNode.tsx | 6 +++++- .../module/src/components/nodes/labels/NodeLabel.tsx | 6 ++++-- .../src/pipelines/components/nodes/TaskNode.tsx | 2 ++ .../src/pipelines/components/nodes/TaskPill.tsx | 6 ++++-- 8 files changed, 29 insertions(+), 5 deletions(-) diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx index 0010a90..2f12e70 100644 --- a/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx +++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/DemoNode.tsx @@ -180,6 +180,7 @@ const DemoNode: React.FunctionComponent = observer( showStatusDecorator={detailsLevel === ScaleDetailsLevel.high && options.showStatus} statusDecoratorTooltip={nodeElement.getNodeStatus()} onContextMenu={options.contextMenus ? onContextMenu : undefined} + hideContextMenuKebab={options.hideKebabMenu} onShowCreateConnector={detailsLevel !== ScaleDetailsLevel.low ? onShowCreateConnector : undefined} onHideCreateConnector={onHideCreateConnector} labelIcon={options.icons && LabelIcon && } diff --git a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx index 9a22fb7..aa35cb3 100644 --- a/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx +++ b/packages/demo-app-ts/src/demos/topologyPackageDemo/OptionsContextBar.tsx @@ -125,6 +125,17 @@ const OptionsContextBar: React.FC = observer(() => { > Context Menus + + options.setNodeOptions({ ...options.nodeOptions, hideKebabMenu: !options.nodeOptions.hideKebabMenu }) + } + > + Hide kebab for context menu + ['reference']; export interface WithContextMenuProps { onContextMenu?: (e: React.MouseEvent) => void; contextMenuOpen?: boolean; + hideContextMenuKebab?: boolean; } export const withContextMenu = diff --git a/packages/module/src/components/nodes/DefaultNode.tsx b/packages/module/src/components/nodes/DefaultNode.tsx index 2b933f6..61ab8b4 100644 --- a/packages/module/src/components/nodes/DefaultNode.tsx +++ b/packages/module/src/components/nodes/DefaultNode.tsx @@ -120,6 +120,8 @@ interface DefaultNodeProps { contextMenuOpen?: boolean; /** Flag indicating the label should move to the top layer when the node is hovered, set to `false` if you are already using TOP_LAYER on hover */ raiseLabelOnHover?: boolean; // TODO: Update default to be false, assume demo code will be followed + /** Hide context menu kebab for the node */ + hideContextMenuKebab?: boolean; } const SCALE_UP_TIME = 200; @@ -169,7 +171,8 @@ const DefaultNodeInner: React.FunctionComponent = observe onShowCreateConnector, onContextMenu, contextMenuOpen, - raiseLabelOnHover = true + raiseLabelOnHover = true, + hideContextMenuKebab }) => { const [hovered, hoverRef] = useHover(); const status = nodeStatus || element.getNodeStatus(); @@ -370,6 +373,7 @@ const DefaultNodeInner: React.FunctionComponent = observe badgeLocation={badgeLocation} onContextMenu={onContextMenu} contextMenuOpen={contextMenuOpen} + hideContextMenuKebab={hideContextMenuKebab} hover={isHover} labelIconClass={labelIconClass} labelIcon={labelIcon} diff --git a/packages/module/src/components/nodes/labels/NodeLabel.tsx b/packages/module/src/components/nodes/labels/NodeLabel.tsx index f6fef1f..a9e2d94 100644 --- a/packages/module/src/components/nodes/labels/NodeLabel.tsx +++ b/packages/module/src/components/nodes/labels/NodeLabel.tsx @@ -77,6 +77,7 @@ const NodeLabel: React.FunctionComponent = ({ dropTarget, onContextMenu, contextMenuOpen, + hideContextMenuKebab, actionIcon, actionIconClassName, onActionIconClick, @@ -124,7 +125,7 @@ const NodeLabel: React.FunctionComponent = ({ const height = Math.max(textSize.height, badgeSize?.height ?? 0) + paddingY * 2; const iconSpace = labelIconClass || labelIcon ? (height + paddingY * 0.5) / 2 : 0; const actionSpace = actionIcon && actionSize ? actionSize.width : 0; - const contextSpace = onContextMenu && contextSize ? contextSize.width : 0; + const contextSpace = !hideContextMenuKebab && onContextMenu && contextSize ? contextSize.width : 0; const primaryWidth = iconSpace + badgeSpace + paddingX + textSize.width + actionSpace + contextSpace + paddingX; const secondaryWidth = secondaryLabel && secondaryTextSize ? secondaryTextSize.width + 2 * paddingX : 0; const width = Math.max(primaryWidth, secondaryWidth); @@ -184,6 +185,7 @@ const NodeLabel: React.FunctionComponent = ({ labelIcon, actionIcon, actionSize, + hideContextMenuKebab, onContextMenu, contextSize, secondaryLabel, @@ -293,7 +295,7 @@ const NodeLabel: React.FunctionComponent = ({ /> )} - {textSize && onContextMenu && ( + {textSize && onContextMenu && !hideContextMenuKebab && ( <> void; /** Flag indicating that the context menu for the node is currently open */ contextMenuOpen?: boolean; + /** Hide context menu kebab for the node */ + hideContextMenuKebab?: boolean; /** Number of shadowed pills to show */ shadowCount?: number; /** Offset for each shadow */ diff --git a/packages/module/src/pipelines/components/nodes/TaskPill.tsx b/packages/module/src/pipelines/components/nodes/TaskPill.tsx index c2318db..7fb1f44 100644 --- a/packages/module/src/pipelines/components/nodes/TaskPill.tsx +++ b/packages/module/src/pipelines/components/nodes/TaskPill.tsx @@ -71,6 +71,7 @@ const TaskPill: React.FC = observer( hasWhenExpression = false, onContextMenu, contextMenuOpen, + hideContextMenuKebab, actionIcon, actionIconClassName, onActionIconClick, @@ -160,7 +161,7 @@ const TaskPill: React.FC = observer( const actionSpace = actionIcon && actionSize ? actionSize.width + paddingX : 0; const contextStartX = actionStartX + actionSpace; - const contextSpace = onContextMenu && contextSize ? contextSize.width + paddingX / 2 : 0; + const contextSpace = !hideContextMenuKebab && onContextMenu && contextSize ? contextSize.width + paddingX / 2 : 0; const pillWidth = contextStartX + contextSpace + paddingX / 2; @@ -198,6 +199,7 @@ const TaskPill: React.FC = observer( badge, actionIcon, actionSize, + hideContextMenuKebab, onContextMenu, contextSize, verticalLayout, @@ -429,7 +431,7 @@ const TaskPill: React.FC = observer( /> )} - {textSize && onContextMenu && ( + {textSize && onContextMenu && !hideContextMenuKebab && ( <>