mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

refacto dropdown v1>v2 in address input (#11549)

Browse Source 
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Etienne
2025-04-14 10:37:40 +02:00
committed by GitHub
parent 0de8140b3a
commit e2b2697fcc
14 changed files with 35 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
View File

@ -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 = ({
<DropdownComponentInstanceContext.Provider
value={{ instanceId: dropdownId }}
>
<DropdownScope dropdownScopeId={getScopeIdFromComponentId(dropdownId)}>
<DropdownScope dropdownScopeId={dropdownId}>
<>
{isDefined(clickableComponent) ? (
<StyledClickableComponent

3
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownContent.tsx
View File

@ -10,7 +10,6 @@ import { HotkeyEffect } from '@/ui/utilities/hotkey/components/HotkeyEffect';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled';
import {
@ -98,7 +97,7 @@ export const DropdownContent = ({
});
useInternalHotkeyScopeManagement({
dropdownScopeId: getScopeIdFromComponentId(dropdownId),
dropdownScopeId: dropdownId,
dropdownHotkeyScopeFromParent: hotkeyScope,
});

3
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdown.ts
View File

@ -6,7 +6,6 @@ import { useSetActiveDropdownFocusIdAndMemorizePrevious } from '@/ui/layout/drop
import { dropdownHotkeyComponentState } from '@/ui/layout/dropdown/states/dropdownHotkeyComponentState';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { getScopeIdOrUndefinedFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId';
import { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { useCallback } from 'react';
import { isDefined } from 'twenty-shared/utils';
@ -14,7 +13,7 @@ import { isDefined } from 'twenty-shared/utils';
export const useDropdown = (dropdownId?: string) => {
const { scopeId, isDropdownOpenState, dropdownPlacementState } =
useDropdownStates({
dropdownScopeId: getScopeIdOrUndefinedFromComponentId(dropdownId),
dropdownScopeId: dropdownId,
});
const { setActiveDropdownFocusIdAndMemorizePrevious } =

40
packages/twenty-front/src/modules/ui/layout/dropdown/hooks/useDropdownV2.ts
View File

@ -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();