From e2b2697fcc9a0699659b533a5f1a58c57a93cc79 Mon Sep 17 00:00:00 2001 From: Etienne <45695613+etiennejouan@users.noreply.github.com> Date: Mon, 14 Apr 2025 10:37:40 +0200 Subject: [PATCH] refacto dropdown v1>v2 in address input (#11549) Co-authored-by: Charles Bochet --- .../record-board/components/RecordBoard.tsx | 3 +- .../field/input/components/AddressInput.tsx | 6 --- .../layout/dropdown/components/Dropdown.tsx | 3 +- .../dropdown/components/DropdownContent.tsx | 3 +- .../ui/layout/dropdown/hooks/useDropdown.ts | 3 +- .../ui/layout/dropdown/hooks/useDropdownV2.ts | 40 ++++++++++++------- .../hooks/useClickOustideListenerStates.ts | 3 +- .../utils/getScopeIdFromComponentId.ts | 2 - .../getScopeIdOrUndefinedFromComponentId.ts | 4 -- .../useExtractedComponentFamilyStateV2.ts | 3 +- .../hooks/useRecoilComponentFamilyValue.ts | 3 +- .../hooks/useRecoilComponentState.ts | 3 +- .../hooks/useRecoilComponentValue.ts | 3 +- .../hooks/useSetRecoilComponentState.ts | 3 +- 14 files changed, 35 insertions(+), 47 deletions(-) delete mode 100644 packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId.ts delete mode 100644 packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId.ts diff --git a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx index aac8012ac..bf9db0711 100644 --- a/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx +++ b/packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx @@ -26,7 +26,6 @@ import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; -import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId'; import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2'; @@ -216,7 +215,7 @@ export const RecordBoard = () => { return ( {}} onFieldsChange={() => {}} > diff --git a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx index 0279d7efb..dff3441e3 100644 --- a/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx +++ b/packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx @@ -7,7 +7,6 @@ import { FieldAddressValue } from '@/object-record/record-field/types/FieldMetad import { CountrySelect } from '@/ui/input/components/internal/country/components/CountrySelect'; import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId'; import { TextInputV2 } from '@/ui/input/components/TextInputV2'; -import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown'; import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; @@ -92,10 +91,6 @@ export const AddressInput = ({ const [focusPosition, setFocusPosition] = useState('addressStreet1'); - const { closeDropdown: closeCountryDropdown } = useDropdown( - SELECT_COUNTRY_DROPDOWN_ID, - ); - const wrapperRef = useRef(null); const getChangeHandler = @@ -193,7 +188,6 @@ export const AddressInput = ({ event.stopImmediatePropagation(); - closeCountryDropdown(); onClickOutside?.(event, internalValue); }, enabled: isDefined(onClickOutside), diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx index dae210843..60ede3ed6 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx @@ -7,7 +7,6 @@ import { dropdownMaxHeightComponentState } from '@/ui/layout/dropdown/states/int import { dropdownMaxWidthComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxWidthComponentState'; import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; -import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId'; import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2'; import styled from '@emotion/styled'; import { @@ -150,7 +149,7 @@ export const Dropdown = ({ - + <> {isDefined(clickableComponent) ? ( { const { scopeId, isDropdownOpenState, dropdownPlacementState } = useDropdownStates({ - dropdownScopeId: getScopeIdOrUndefinedFromComponentId(dropdownId), + dropdownScopeId: dropdownId, }); const { setActiveDropdownFocusIdAndMemorizePrevious } = diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdownV2.ts b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdownV2.ts index be0764caf..e35b2e435 100644 --- a/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdownV2.ts +++ b/packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdownV2.ts @@ -1,10 +1,10 @@ import { useRecoilCallback } from 'recoil'; +import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId'; import { dropdownHotkeyComponentState } from '@/ui/layout/dropdown/states/dropdownHotkeyComponentState'; import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; -import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId'; import { isDefined } from 'twenty-shared/utils'; export const useDropdownV2 = () => { @@ -13,26 +13,36 @@ export const useDropdownV2 = () => { goBackToPreviousHotkeyScope, } = usePreviousHotkeyScope(); - const closeDropdown = useRecoilCallback( - ({ set }) => - (specificComponentId: string) => { - const scopeId = getScopeIdFromComponentId(specificComponentId); + const { goBackToPreviousDropdownFocusId } = + useGoBackToPreviousDropdownFocusId(); - goBackToPreviousHotkeyScope(); - set( - isDropdownOpenComponentState({ - scopeId, - }), - false, - ); + const closeDropdown = useRecoilCallback( + ({ set, snapshot }) => + (specificComponentId: string) => { + const scopeId = specificComponentId; + + const isDropdownOpen = snapshot + .getLoadable(isDropdownOpenComponentState({ scopeId })) + .getValue(); + + if (isDropdownOpen) { + goBackToPreviousHotkeyScope(); + goBackToPreviousDropdownFocusId(); + set( + isDropdownOpenComponentState({ + scopeId, + }), + false, + ); + } }, - [goBackToPreviousHotkeyScope], + [goBackToPreviousHotkeyScope, goBackToPreviousDropdownFocusId], ); const openDropdown = useRecoilCallback( ({ set, snapshot }) => (specificComponentId: string, customHotkeyScope?: HotkeyScope) => { - const scopeId = getScopeIdFromComponentId(specificComponentId); + const scopeId = specificComponentId; const dropdownHotkeyScope = snapshot .getLoadable(dropdownHotkeyComponentState({ scopeId })) @@ -63,7 +73,7 @@ export const useDropdownV2 = () => { const toggleDropdown = useRecoilCallback( ({ snapshot }) => (specificComponentId: string, customHotkeyScope?: HotkeyScope) => { - const scopeId = getScopeIdFromComponentId(specificComponentId); + const scopeId = specificComponentId; const isDropdownOpen = snapshot .getLoadable(isDropdownOpenComponentState({ scopeId })) .getValue(); diff --git a/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOustideListenerStates.ts b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOustideListenerStates.ts index 26e7ebca3..2cc0ea918 100644 --- a/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOustideListenerStates.ts +++ b/packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOustideListenerStates.ts @@ -2,11 +2,10 @@ import { clickOutsideListenerCallbacksComponentState } from '@/ui/utilities/poin import { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState'; import { clickOutsideListenerIsMouseDownInsideComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState'; import { clickOutsideListenerMouseDownHappenedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerMouseDownHappenedComponentState'; -import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId'; import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState'; export const useClickOustideListenerStates = (componentId: string) => { - const scopeId = getScopeIdFromComponentId(componentId); + const scopeId = componentId; return { scopeId, diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId.ts deleted file mode 100644 index bc5ce6e96..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId.ts +++ /dev/null @@ -1,2 +0,0 @@ -export const getScopeIdFromComponentId = (componentId: string) => - `${componentId}`; diff --git a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId.ts b/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId.ts deleted file mode 100644 index 3892e6afd..000000000 --- a/packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId.ts +++ /dev/null @@ -1,4 +0,0 @@ -import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId'; - -export const getScopeIdOrUndefinedFromComponentId = (componentId?: string) => - componentId ? getScopeIdFromComponentId(componentId) : undefined; diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useExtractedComponentFamilyStateV2.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useExtractedComponentFamilyStateV2.ts index 8bf347a2b..f5f05e49e 100644 --- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useExtractedComponentFamilyStateV2.ts +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useExtractedComponentFamilyStateV2.ts @@ -1,5 +1,4 @@ import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; -import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId'; import { ComponentFamilyState } from '@/ui/utilities/state/component-state/types/ComponentFamilyState'; import { SerializableParam } from 'recoil'; @@ -22,7 +21,7 @@ export const useExtractedComponentFamilyStateV2 = < const internalScopeId = useAvailableScopeIdOrThrow( componentContext, - getScopeIdOrUndefinedFromComponentId(componentId), + componentId, ); const extractedComponentFamilyState = (familyKey: FamilyKey) => diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue.ts index 58af1dc02..12654b0a5 100644 --- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue.ts +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue.ts @@ -1,7 +1,6 @@ import { SerializableParam, useRecoilValue } from 'recoil'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; -import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId'; import { ComponentFamilyState } from '@/ui/utilities/state/component-state/types/ComponentFamilyState'; export const useRecoilComponentFamilyValue = < @@ -24,7 +23,7 @@ export const useRecoilComponentFamilyValue = < const internalComponentId = useAvailableScopeIdOrThrow( componentContext, - getScopeIdOrUndefinedFromComponentId(componentId), + componentId, ); return useRecoilValue( diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentState.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentState.ts index c0bd5e9d5..5c02f4df3 100644 --- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentState.ts +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentState.ts @@ -1,5 +1,4 @@ import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; -import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId'; import { RecoilComponentState } from '@/ui/utilities/state/component-state/types/RecoilComponentState'; import { useRecoilState } from 'recoil'; @@ -19,7 +18,7 @@ export const useRecoilComponentState = ( const internalComponentId = useAvailableScopeIdOrThrow( componentContext, - getScopeIdOrUndefinedFromComponentId(componentId), + componentId, ); return useRecoilState( diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentValue.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentValue.ts index efaa56de1..ed76e246d 100644 --- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentValue.ts +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentValue.ts @@ -1,7 +1,6 @@ import { useRecoilValue } from 'recoil'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; -import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId'; import { RecoilComponentState } from '@/ui/utilities/state/component-state/types/RecoilComponentState'; export const useRecoilComponentValue = ( @@ -20,7 +19,7 @@ export const useRecoilComponentValue = ( const internalComponentId = useAvailableScopeIdOrThrow( componentContext, - getScopeIdOrUndefinedFromComponentId(componentId), + componentId, ); return useRecoilValue( diff --git a/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useSetRecoilComponentState.ts b/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useSetRecoilComponentState.ts index 9e1ca49a4..c66380137 100644 --- a/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useSetRecoilComponentState.ts +++ b/packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useSetRecoilComponentState.ts @@ -1,7 +1,6 @@ import { useSetRecoilState } from 'recoil'; import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; -import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId'; import { RecoilComponentState } from '@/ui/utilities/state/component-state/types/RecoilComponentState'; export const useSetRecoilComponentState = ( @@ -20,7 +19,7 @@ export const useSetRecoilComponentState = ( const internalComponentId = useAvailableScopeIdOrThrow( componentContext, - getScopeIdOrUndefinedFromComponentId(componentId), + componentId, ); return useSetRecoilState(