Refactor and fixes dropdown bugs (#8807)

Fixes https://github.com/twentyhq/twenty/issues/8788 Fixes https://github.com/twentyhq/twenty/issues/8793 Fixes https://github.com/twentyhq/twenty/issues/8791 Fixes https://github.com/twentyhq/twenty/issues/8890 Fixes https://github.com/twentyhq/twenty/issues/8893 - [x] Also : Icon buttons under dropdown are visible without blur : ![Capture d’écran du 2024-11-29 15-09-53](https://github.com/user-attachments/assets/f563333d-4e43-4ded-acc7-62e116004ed9) - [x] Also : <img width="237" alt="image" src="https://github.com/user-attachments/assets/e4c70936-beff-4481-89cb-0a32a36e0ee2"> - [x] Also : <img width="335" alt="image" src="https://github.com/user-attachments/assets/5be60395-6baf-49eb-8d40-197add049e20"> - [x] Also : <img width="287" alt="image" src="https://github.com/user-attachments/assets/a317561f-7986-4d70-a1c0-deee4f4e268a"> - Button create new without padding - Container is expanding - [x] Also : <img width="303" alt="image" src="https://github.com/user-attachments/assets/09f8a27f-91db-4191-acdc-aaaeedaf6da5"> - [x] Also : <img width="133" alt="image" src="https://github.com/user-attachments/assets/fe17b32e-f7a4-46c4-8040-239eaf8198e8"> Font is cut at bottom ? - [x] Also : <img width="385" alt="image" src="https://github.com/user-attachments/assets/7bab2092-2936-4112-a2ee-d32d6737e304"> The component should flip and not resize in this situation - [x] Also : <img width="244" alt="image" src="https://github.com/user-attachments/assets/5384f49a-71f9-4638-a60c-158cc8c83f81"> - [x] Also : ![image](https://github.com/user-attachments/assets/9cd1f43a-df59-401e-9a41-bdb8e93ebe58)
2024-12-06 15:27:48 +01:00
parent 14b7bcf262
commit a9cb20f317
87 changed files with 1201 additions and 1192 deletions
--- a/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerContainer.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/right-drawer/components/RightDrawerContainer.tsx
@ -0,0 +1,83 @@
+import { RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID } from '@/ui/layout/right-drawer/constants/RightDrawerClickOutsideListener';
+import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
+import { isRightDrawerMinimizedState } from '@/ui/layout/right-drawer/states/isRightDrawerMinimizedState';
+import { isRightDrawerOpenState } from '@/ui/layout/right-drawer/states/isRightDrawerOpenState';
+import { rightDrawerCloseEventState } from '@/ui/layout/right-drawer/states/rightDrawerCloseEventsState';
+import { RightDrawerHotkeyScope } from '@/ui/layout/right-drawer/types/RightDrawerHotkeyScope';
+import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
+import {
+  ClickOutsideMode,
+  useListenClickOutside,
+} from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
+import { workflowReactFlowRefState } from '@/workflow/states/workflowReactFlowRefState';
+import styled from '@emotion/styled';
+import { useRef } from 'react';
+import { useRecoilCallback, useRecoilValue } from 'recoil';
+import { Key } from 'ts-key-enum';
+
+const StyledRightDrawerPage = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+`;
+
+export const RightDrawerContainer = ({
+  children,
+}: {
+  children: React.ReactNode;
+}) => {
+  const rightDrawerRef = useRef<HTMLDivElement>(null);
+
+  const isRightDrawerOpen = useRecoilValue(isRightDrawerOpenState);
+
+  const isRightDrawerMinimized = useRecoilValue(isRightDrawerMinimizedState);
+
+  const { closeRightDrawer } = useRightDrawer();
+
+  const workflowReactFlowRef = useRecoilValue(workflowReactFlowRefState);
+
+  useListenClickOutside({
+    refs: [
+      rightDrawerRef,
+      ...(workflowReactFlowRef ? [workflowReactFlowRef] : []),
+    ],
+    listenerId: RIGHT_DRAWER_CLICK_OUTSIDE_LISTENER_ID,
+    callback: useRecoilCallback(
+      ({ snapshot, set }) =>
+        (event) => {
+          const isRightDrawerOpen = snapshot
+            .getLoadable(isRightDrawerOpenState)
+            .getValue();
+          const isRightDrawerMinimized = snapshot
+            .getLoadable(isRightDrawerMinimizedState)
+            .getValue();
+
+          if (isRightDrawerOpen && !isRightDrawerMinimized) {
+            set(rightDrawerCloseEventState, event);
+
+            closeRightDrawer();
+          }
+        },
+      [closeRightDrawer],
+    ),
+    mode: ClickOutsideMode.comparePixels,
+  });
+
+  useScopedHotkeys(
+    [Key.Escape],
+    () => {
+      if (isRightDrawerOpen && !isRightDrawerMinimized) {
+        closeRightDrawer();
+      }
+    },
+    RightDrawerHotkeyScope.RightDrawer,
+    [isRightDrawerOpen, isRightDrawerMinimized],
+  );
+
+  return (
+    <StyledRightDrawerPage ref={rightDrawerRef}>
+      {children}
+    </StyledRightDrawerPage>
+  );
+};