mirror of
https://github.com/twentyhq/twenty
synced 2026-04-28 08:57:23 +00:00
2b77f598b2
This PR fixes many small bugs around the recent hotkey scope refactor. - Removed unused ActionBar files - Created components CommandMenuOpenContainer and KeyboardShortcutMenuOpenContent to avoid mounting listeners when not needed - Added DEFAULT_CELL_SCOPE where missing in some field inputs - Called setHotkeyScopeAndMemorizePreviousScope instead of setHotkeyScope in new useOpenFieldInputEditMode hook - Broke down RecordTableBodyUnselectEffect into multiple simpler effect components that are mounted only when needed to avoid listening for keyboard and clickoutside event - Re-implemented recently deleted table cell soft focus component logic into RecordTableCellDisplayMode - Created component selector isAtLeastOneTableRowSelectedSelector - Drill down hotkey scope when opening a dropdown - Improved debug logs
85 lines
2.7 KiB
TypeScript
85 lines
2.7 KiB
TypeScript
import { COMMAND_MENU_ANIMATION_VARIANTS } from '@/command-menu/constants/CommandMenuAnimationVariants';
|
|
import { useCommandMenu } from '@/command-menu/hooks/useCommandMenu';
|
|
import { useCommandMenuHotKeys } from '@/command-menu/hooks/useCommandMenuHotKeys';
|
|
import { CommandMenuAnimationVariant } from '@/command-menu/types/CommandMenuAnimationVariant';
|
|
import { CommandMenuHotkeyScope } from '@/command-menu/types/CommandMenuHotkeyScope';
|
|
import { RootStackingContextZIndices } from '@/ui/layout/constants/RootStackingContextZIndices';
|
|
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
|
|
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
|
|
import { useTheme } from '@emotion/react';
|
|
|
|
import styled from '@emotion/styled';
|
|
import { motion } from 'framer-motion';
|
|
import { useRef } from 'react';
|
|
import { useRecoilCallback } from 'recoil';
|
|
import { useIsMobile } from 'twenty-ui/utilities';
|
|
|
|
const StyledCommandMenu = styled(motion.div)`
|
|
background: ${({ theme }) => theme.background.primary};
|
|
border-left: 1px solid ${({ theme }) => theme.border.color.medium};
|
|
box-shadow: ${({ theme }) => theme.boxShadow.strong};
|
|
font-family: ${({ theme }) => theme.font.family};
|
|
height: 100%;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: fixed;
|
|
right: 0%;
|
|
top: 0%;
|
|
z-index: ${RootStackingContextZIndices.CommandMenu};
|
|
display: flex;
|
|
flex-direction: column;
|
|
`;
|
|
|
|
export const CommandMenuOpenContainer = ({
|
|
children,
|
|
}: React.PropsWithChildren) => {
|
|
const isMobile = useIsMobile();
|
|
|
|
const targetVariantForAnimation: CommandMenuAnimationVariant = isMobile
|
|
? 'fullScreen'
|
|
: 'normal';
|
|
|
|
const theme = useTheme();
|
|
|
|
const { closeCommandMenu } = useCommandMenu();
|
|
|
|
const commandMenuRef = useRef<HTMLDivElement>(null);
|
|
|
|
useCommandMenuHotKeys();
|
|
|
|
const handleClickOutside = useRecoilCallback(
|
|
({ snapshot }) =>
|
|
() => {
|
|
const hotkeyScope = snapshot
|
|
.getLoadable(currentHotkeyScopeState)
|
|
.getValue();
|
|
|
|
if (hotkeyScope?.scope === CommandMenuHotkeyScope.CommandMenuFocused) {
|
|
closeCommandMenu();
|
|
}
|
|
},
|
|
[closeCommandMenu],
|
|
);
|
|
|
|
useListenClickOutside({
|
|
refs: [commandMenuRef],
|
|
callback: handleClickOutside,
|
|
listenerId: 'COMMAND_MENU_LISTENER_ID',
|
|
excludeClassNames: ['page-header-command-menu-button'],
|
|
});
|
|
|
|
return (
|
|
<StyledCommandMenu
|
|
data-testid="command-menu"
|
|
ref={commandMenuRef}
|
|
className="command-menu"
|
|
animate={targetVariantForAnimation}
|
|
initial="closed"
|
|
exit="closed"
|
|
variants={COMMAND_MENU_ANIMATION_VARIANTS}
|
|
transition={{ duration: theme.animation.duration.normal }}
|
|
>
|
|
{children}
|
|
</StyledCommandMenu>
|
|
);
|
|
};
|