admin/twenty
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/object-record/record-board/components/RecordBoard.tsx
View File

@ -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 (
<RecordBoardScope
recordBoardScopeId={getScopeIdFromComponentId(recordBoardId)}
recordBoardScopeId={recordBoardId}
onColumnsChange={() => {}}
onFieldsChange={() => {}}
>

6
packages/twenty-front/src/modules/ui/field/input/components/AddressInput.tsx
View File

@ -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<keyof FieldAddressDraftValue>('addressStreet1');
const { closeDropdown: closeCountryDropdown } = useDropdown(
SELECT_COUNTRY_DROPDOWN_ID,
);
const wrapperRef = useRef<HTMLDivElement>(null);
const getChangeHandler =
@ -193,7 +188,6 @@ export const AddressInput = ({
event.stopImmediatePropagation();
closeCountryDropdown();
onClickOutside?.(event, internalValue);
},
enabled: isDefined(onClickOutside),

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

3
packages/twenty-front/src/modules/ui/utilities/pointer-event/hooks/useClickOustideListenerStates.ts
View File

@ -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,

2
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId.ts
View File

@ -1,2 +0,0 @@
export const getScopeIdFromComponentId = (componentId: string) =>
`${componentId}`;

4
packages/twenty-front/src/modules/ui/utilities/recoil-scope/utils/getScopeIdOrUndefinedFromComponentId.ts
View File

@ -1,4 +0,0 @@
import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
export const getScopeIdOrUndefinedFromComponentId = (componentId?: string) =>
componentId ? getScopeIdFromComponentId(componentId) : undefined;

3
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useExtractedComponentFamilyStateV2.ts
View File

@ -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) =>

3
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValue.ts
View File

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

3
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentState.ts
View File

@ -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 = <StateType>(
const internalComponentId = useAvailableScopeIdOrThrow(
componentContext,
getScopeIdOrUndefinedFromComponentId(componentId),
componentId,
);
return useRecoilState(

3
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useRecoilComponentValue.ts
View File

@ -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 = <StateType>(
@ -20,7 +19,7 @@ export const useRecoilComponentValue = <StateType>(
const internalComponentId = useAvailableScopeIdOrThrow(
componentContext,
getScopeIdOrUndefinedFromComponentId(componentId),
componentId,
);
return useRecoilValue(

3
packages/twenty-front/src/modules/ui/utilities/state/component-state/hooks/useSetRecoilComponentState.ts
View File

@ -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 = <StateType>(
@ -20,7 +19,7 @@ export const useSetRecoilComponentState = <StateType>(
const internalComponentId = useAvailableScopeIdOrThrow(
componentContext,
getScopeIdOrUndefinedFromComponentId(componentId),
componentId,
);
return useSetRecoilState(