From 3fb25557ddce7db8749d97650dcc576ef100d9e2 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 remove hideContextMenuKebab from withContextMenuProps add hideContextMenuKebab to NodeLabelProps to fix error --- .../src/demos/topologyPackageDemo/DemoNode.tsx | 1 + .../demos/topologyPackageDemo/OptionsContextBar.tsx | 11 +++++++++++ .../src/demos/topologyPackageDemo/generator.ts | 1 + packages/module/src/components/nodes/DefaultNode.tsx | 6 +++++- .../module/src/components/nodes/labels/NodeLabel.tsx | 7 +++++-- .../src/pipelines/components/nodes/TaskNode.tsx | 2 ++ .../src/pipelines/components/nodes/TaskPill.tsx | 6 ++++-- 7 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 0010a906..2f12e70a 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 9a22fb7e..aa35cb3a 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 + = 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 f6fef1fb..1eb6c71b 100644 --- a/packages/module/src/components/nodes/labels/NodeLabel.tsx +++ b/packages/module/src/components/nodes/labels/NodeLabel.tsx @@ -43,6 +43,7 @@ export type NodeLabelProps = { badgeBorderColor?: string; badgeClassName?: string; badgeLocation?: BadgeLocation; + hideContextMenuKebab?: boolean; } & Partial; /** @@ -77,6 +78,7 @@ const NodeLabel: React.FunctionComponent = ({ dropTarget, onContextMenu, contextMenuOpen, + hideContextMenuKebab, actionIcon, actionIconClassName, onActionIconClick, @@ -124,7 +126,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 +186,7 @@ const NodeLabel: React.FunctionComponent = ({ labelIcon, actionIcon, actionSize, + hideContextMenuKebab, onContextMenu, contextSize, secondaryLabel, @@ -293,7 +296,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 c2318db3..7fb1f441 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 && ( <>