Feat/add opportunity (#1267)

* Renamed AuthAutoRouter * Moved RecoilScope * Refactored old WithTopBarContainer to make it less transclusive * Created new add opportunity button and refactored DropdownButton * Added tests * Update front/src/modules/companies/components/CompanyProgressPicker.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/companies/components/CompanyProgressPicker.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/companies/components/CompanyProgressPicker.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/companies/components/CompanyProgressPicker.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/ui/dropdown/components/DropdownButton.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/ui/dropdown/components/DropdownButton.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/ui/dropdown/components/DropdownButton.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/modules/ui/layout/components/PageHeader.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Update front/src/pages/opportunities/Opportunities.tsx Co-authored-by: Thaïs <guigon.thais@gmail.com> * Fix lint * Fix lint --------- Co-authored-by: Charles Bochet <charles@twenty.com> Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com> Co-authored-by: Thaïs <guigon.thais@gmail.com>
2023-08-23 18:57:08 +02:00
parent 74ab0142c7
commit 64cef963bc
23 changed files with 696 additions and 97 deletions
--- a/front/src/modules/ui/dropdown/components/DropdownButton.tsx
+++ b/front/src/modules/ui/dropdown/components/DropdownButton.tsx
@ -0,0 +1,58 @@
+import { Keys } from 'react-hotkeys-hook';
+import styled from '@emotion/styled';
+import { flip, offset, useFloating } from '@floating-ui/react';
+
+import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
+
+import { useDropdownButton } from '../hooks/useDropdownButton';
+
+import { HotkeyEffect } from './HotkeyEffect';
+
+const StyledContainer = styled.div`
+  position: relative;
+  z-index: 100;
+`;
+
+type OwnProps = {
+  buttonComponents: JSX.Element | JSX.Element[];
+  dropdownComponents: JSX.Element | JSX.Element[];
+  hotkey?: {
+    key: Keys;
+    scope: string;
+  };
+  dropdownScopeToSet?: HotkeyScope;
+};
+
+export function DropdownButton({
+  buttonComponents,
+  dropdownComponents,
+  hotkey,
+  dropdownScopeToSet,
+}: OwnProps) {
+  const { isDropdownButtonOpen, toggleDropdownButton } = useDropdownButton();
+
+  const { refs, floatingStyles } = useFloating({
+    placement: 'bottom-end',
+    middleware: [flip(), offset()],
+  });
+
+  function handleButtonClick() {
+    toggleDropdownButton(dropdownScopeToSet);
+  }
+
+  return (
+    <StyledContainer>
+      {hotkey && (
+        <HotkeyEffect hotkey={hotkey} onHotkeyTriggered={handleButtonClick} />
+      )}
+      <div ref={refs.setReference} onClick={handleButtonClick}>
+        {buttonComponents}
+      </div>
+      {isDropdownButtonOpen && (
+        <div ref={refs.setFloating} style={floatingStyles}>
+          {dropdownComponents}
+        </div>
+      )}
+    </StyledContainer>
+  );
+}