From 6d7a267e39019aec7fac4aad2d9bbd50a517dbd3 Mon Sep 17 00:00:00 2001 From: Aleksei Chichenkov <39502310+DanSylvest@users.noreply.github.com> Date: Sun, 4 May 2025 13:43:59 +0300 Subject: [PATCH] fix(Map): Change design for tags (#358) Co-authored-by: achichenkov --- .../js/hooks/Mapper/common-styles/fixes.scss | 13 +++ .../hooks/useTagMenu/index.ts | 2 +- .../hooks/useTagMenu/useTagMenu.ts | 68 ------------- .../hooks/useTagMenu/useTagMenu.tsx | 95 +++++++++++++++++++ .../SolarSystemNodeDefault.tsx | 7 +- 5 files changed, 115 insertions(+), 70 deletions(-) delete mode 100644 assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.ts create mode 100644 assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.tsx diff --git a/assets/js/hooks/Mapper/common-styles/fixes.scss b/assets/js/hooks/Mapper/common-styles/fixes.scss index 03d0be14..8a23afa6 100644 --- a/assets/js/hooks/Mapper/common-styles/fixes.scss +++ b/assets/js/hooks/Mapper/common-styles/fixes.scss @@ -185,3 +185,16 @@ .p-datatable .p-datatable-tbody > tr.p-highlight { background: initial; } + +.suppress-menu-behaviour { + pointer-events: none; + + .p-menuitem-content { + pointer-events: initial; + background-color: initial !important; + } + .p-menuitem-content:hover { + background-color: initial !important; + } +} + diff --git a/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/index.ts b/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/index.ts index 7ed8fcad..59207777 100644 --- a/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/index.ts +++ b/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/index.ts @@ -1 +1 @@ -export * from './useTagMenu.ts'; +export * from './useTagMenu.tsx'; diff --git a/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.ts b/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.ts deleted file mode 100644 index 771dc163..00000000 --- a/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.ts +++ /dev/null @@ -1,68 +0,0 @@ -import { MenuItem } from 'primereact/menuitem'; -import { PrimeIcons } from 'primereact/api'; -import { useCallback, useRef } from 'react'; -import { SolarSystemRawType } from '@/hooks/Mapper/types'; -import { getSystemById } from '@/hooks/Mapper/helpers'; -import clsx from 'clsx'; -import { GRADIENT_MENU_ACTIVE_CLASSES } from '@/hooks/Mapper/constants.ts'; - -const AVAILABLE_LETTERS = ['A', 'B', 'C', 'D', 'E', 'F', 'X', 'Y', 'Z']; -const AVAILABLE_NUMBERS = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9']; - -export const useTagMenu = ( - systems: SolarSystemRawType[], - systemId: string | undefined, - onSystemTag: (val?: string) => void, -): (() => MenuItem) => { - const ref = useRef({ onSystemTag, systems, systemId }); - ref.current = { onSystemTag, systems, systemId }; - - return useCallback(() => { - const { onSystemTag, systemId, systems } = ref.current; - const system = systemId ? getSystemById(systems, systemId) : undefined; - - const isSelectedLetters = AVAILABLE_LETTERS.includes(system?.tag ?? ''); - const isSelectedNumbers = AVAILABLE_NUMBERS.includes(system?.tag ?? ''); - - const menuItem: MenuItem = { - label: 'Tag', - icon: PrimeIcons.HASHTAG, - className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: isSelectedLetters || isSelectedNumbers }), - items: [ - ...(system?.tag !== '' && system?.tag !== null - ? [ - { - label: 'Clear', - icon: PrimeIcons.BAN, - command: () => onSystemTag(), - }, - ] - : []), - { - label: 'Letter', - icon: PrimeIcons.TAGS, - className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: isSelectedLetters }), - items: AVAILABLE_LETTERS.map(x => ({ - label: x, - icon: PrimeIcons.TAG, - command: () => onSystemTag(x), - className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: system?.tag === x }), - })), - }, - { - label: 'Digit', - icon: PrimeIcons.TAGS, - className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: isSelectedNumbers }), - items: AVAILABLE_NUMBERS.map(x => ({ - label: x, - icon: PrimeIcons.TAG, - command: () => onSystemTag(x), - className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: system?.tag === x }), - })), - }, - ], - }; - - return menuItem; - }, []); -}; diff --git a/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.tsx b/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.tsx new file mode 100644 index 00000000..4670b7d3 --- /dev/null +++ b/assets/js/hooks/Mapper/components/contexts/ContextMenuSystem/hooks/useTagMenu/useTagMenu.tsx @@ -0,0 +1,95 @@ +import { MenuItem } from 'primereact/menuitem'; +import { PrimeIcons } from 'primereact/api'; +import { useCallback, useRef } from 'react'; +import { SolarSystemRawType } from '@/hooks/Mapper/types'; +import { getSystemById } from '@/hooks/Mapper/helpers'; +import clsx from 'clsx'; +import { GRADIENT_MENU_ACTIVE_CLASSES } from '@/hooks/Mapper/constants.ts'; +import { LayoutEventBlocker } from '@/hooks/Mapper/components/ui-kit'; +import { Button } from 'primereact/button'; + +const AVAILABLE_TAGS = [ + 'A', + 'B', + 'C', + 'D', + 'E', + 'F', + 'G', + 'H', + 'I', + 'X', + 'Y', + 'Z', + '0', + '1', + '2', + '3', + '4', + '5', + '6', + '7', + '8', + '9', +]; + +export const useTagMenu = ( + systems: SolarSystemRawType[], + systemId: string | undefined, + onSystemTag: (val?: string) => void, +): (() => MenuItem) => { + const ref = useRef({ onSystemTag, systems, systemId }); + ref.current = { onSystemTag, systems, systemId }; + + return useCallback(() => { + const { onSystemTag, systemId, systems } = ref.current; + const system = systemId ? getSystemById(systems, systemId) : undefined; + + const isSelectedTag = AVAILABLE_TAGS.includes(system?.tag ?? ''); + + const menuItem: MenuItem = { + label: 'Tag', + icon: PrimeIcons.HASHTAG, + className: clsx({ [GRADIENT_MENU_ACTIVE_CLASSES]: isSelectedTag }), + items: [ + { + label: 'Digit', + icon: PrimeIcons.TAGS, + className: '!h-[128px] suppress-menu-behaviour', + template: () => { + return ( + +
+ {AVAILABLE_TAGS.map(x => ( + + ))} + +
+ + ); + }, + }, + ], + }; + + return menuItem; + }, []); +}; diff --git a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.tsx b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.tsx index 4b21b7e9..2e2a381a 100644 --- a/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.tsx +++ b/assets/js/hooks/Mapper/components/map/components/SolarSystemNode/SolarSystemNodeDefault.tsx @@ -16,6 +16,7 @@ import { LocalCounter } from './SolarSystemLocalCounter'; import { KillsCounter } from './SolarSystemKillsCounter'; import { TooltipSize } from '@/hooks/Mapper/components/ui-kit/WdTooltipWrapper/utils.ts'; import { TooltipPosition, WdTooltipWrapper } from '@/hooks/Mapper/components/ui-kit'; +import { Tag } from 'primereact/tag'; // let render = 0; export const SolarSystemNodeDefault = memo((props: NodeProps) => { @@ -89,7 +90,11 @@ export const SolarSystemNodeDefault = memo((props: NodeProps {nodeVars.tag != null && nodeVars.tag !== '' && ( -
{nodeVars.tag}
+ )}