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 { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener'; import { useClickOutsideListener } from '@/ui/utilities/pointer-event/hooks/useClickOutsideListener';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; 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 { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2'; import { useRecoilComponentCallbackStateV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackStateV2';
import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2'; import { useRecoilComponentFamilyValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentFamilyValueV2';
@ -216,7 +215,7 @@ export const RecordBoard = () => {
return ( return (
<RecordBoardScope <RecordBoardScope
recordBoardScopeId={getScopeIdFromComponentId(recordBoardId)} recordBoardScopeId={recordBoardId}
onColumnsChange={() => {}} onColumnsChange={() => {}}
onFieldsChange={() => {}} 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 { CountrySelect } from '@/ui/input/components/internal/country/components/CountrySelect';
import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId'; import { SELECT_COUNTRY_DROPDOWN_ID } from '@/ui/input/components/internal/country/constants/SelectCountryDropdownId';
import { TextInputV2 } from '@/ui/input/components/TextInputV2'; import { TextInputV2 } from '@/ui/input/components/TextInputV2';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState'; import { activeDropdownFocusIdState } from '@/ui/layout/dropdown/states/activeDropdownFocusIdState';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys'; import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside';
@ -92,10 +91,6 @@ export const AddressInput = ({
const [focusPosition, setFocusPosition] = const [focusPosition, setFocusPosition] =
useState<keyof FieldAddressDraftValue>('addressStreet1'); useState<keyof FieldAddressDraftValue>('addressStreet1');
const { closeDropdown: closeCountryDropdown } = useDropdown(
SELECT_COUNTRY_DROPDOWN_ID,
);
const wrapperRef = useRef<HTMLDivElement>(null); const wrapperRef = useRef<HTMLDivElement>(null);
const getChangeHandler = const getChangeHandler =
@ -193,7 +188,6 @@ export const AddressInput = ({
event.stopImmediatePropagation(); event.stopImmediatePropagation();
closeCountryDropdown();
onClickOutside?.(event, internalValue); onClickOutside?.(event, internalValue);
}, },
enabled: isDefined(onClickOutside), 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 { dropdownMaxWidthComponentState } from '@/ui/layout/dropdown/states/internal/dropdownMaxWidthComponentState';
import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset'; import { DropdownOffset } from '@/ui/layout/dropdown/types/DropdownOffset';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; 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 { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { import {
@ -150,7 +149,7 @@ export const Dropdown = ({
<DropdownComponentInstanceContext.Provider <DropdownComponentInstanceContext.Provider
value={{ instanceId: dropdownId }} value={{ instanceId: dropdownId }}
> >
<DropdownScope dropdownScopeId={getScopeIdFromComponentId(dropdownId)}> <DropdownScope dropdownScopeId={dropdownId}>
<> <>
{isDefined(clickableComponent) ? ( {isDefined(clickableComponent) ? (
<StyledClickableComponent <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 { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; 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 { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { import {
@ -98,7 +97,7 @@ export const DropdownContent = ({
}); });
useInternalHotkeyScopeManagement({ useInternalHotkeyScopeManagement({
dropdownScopeId: getScopeIdFromComponentId(dropdownId), dropdownScopeId: dropdownId,
dropdownHotkeyScopeFromParent: hotkeyScope, 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 { dropdownHotkeyComponentState } from '@/ui/layout/dropdown/states/dropdownHotkeyComponentState';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; 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 { getSnapshotValue } from '@/ui/utilities/recoil-scope/utils/getSnapshotValue';
import { useCallback } from 'react'; import { useCallback } from 'react';
import { isDefined } from 'twenty-shared/utils'; import { isDefined } from 'twenty-shared/utils';
@ -14,7 +13,7 @@ import { isDefined } from 'twenty-shared/utils';
export const useDropdown = (dropdownId?: string) => { export const useDropdown = (dropdownId?: string) => {
const { scopeId, isDropdownOpenState, dropdownPlacementState } = const { scopeId, isDropdownOpenState, dropdownPlacementState } =
useDropdownStates({ useDropdownStates({
dropdownScopeId: getScopeIdOrUndefinedFromComponentId(dropdownId), dropdownScopeId: dropdownId,
}); });
const { setActiveDropdownFocusIdAndMemorizePrevious } = 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 { useRecoilCallback } from 'recoil';
import { useGoBackToPreviousDropdownFocusId } from '@/ui/layout/dropdown/hooks/useGoBackToPreviousDropdownFocusId';
import { dropdownHotkeyComponentState } from '@/ui/layout/dropdown/states/dropdownHotkeyComponentState'; import { dropdownHotkeyComponentState } from '@/ui/layout/dropdown/states/dropdownHotkeyComponentState';
import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState'; import { isDropdownOpenComponentState } from '@/ui/layout/dropdown/states/isDropdownOpenComponentState';
import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope'; import { usePreviousHotkeyScope } from '@/ui/utilities/hotkey/hooks/usePreviousHotkeyScope';
import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope'; import { HotkeyScope } from '@/ui/utilities/hotkey/types/HotkeyScope';
import { getScopeIdFromComponentId } from '@/ui/utilities/recoil-scope/utils/getScopeIdFromComponentId';
import { isDefined } from 'twenty-shared/utils'; import { isDefined } from 'twenty-shared/utils';
export const useDropdownV2 = () => { export const useDropdownV2 = () => {
@ -13,26 +13,36 @@ export const useDropdownV2 = () => {
goBackToPreviousHotkeyScope, goBackToPreviousHotkeyScope,
} = usePreviousHotkeyScope(); } = usePreviousHotkeyScope();
const closeDropdown = useRecoilCallback( const { goBackToPreviousDropdownFocusId } =
({ set }) => useGoBackToPreviousDropdownFocusId();
(specificComponentId: string) => {
const scopeId = getScopeIdFromComponentId(specificComponentId);
goBackToPreviousHotkeyScope(); const closeDropdown = useRecoilCallback(
set( ({ set, snapshot }) =>
isDropdownOpenComponentState({ (specificComponentId: string) => {
scopeId, const scopeId = specificComponentId;
}),
false, const isDropdownOpen = snapshot
); .getLoadable(isDropdownOpenComponentState({ scopeId }))
.getValue();
if (isDropdownOpen) {
goBackToPreviousHotkeyScope();
goBackToPreviousDropdownFocusId();
set(
isDropdownOpenComponentState({
scopeId,
}),
false,
);
}
}, },
[goBackToPreviousHotkeyScope], [goBackToPreviousHotkeyScope, goBackToPreviousDropdownFocusId],
); );
const openDropdown = useRecoilCallback( const openDropdown = useRecoilCallback(
({ set, snapshot }) => ({ set, snapshot }) =>
(specificComponentId: string, customHotkeyScope?: HotkeyScope) => { (specificComponentId: string, customHotkeyScope?: HotkeyScope) => {
const scopeId = getScopeIdFromComponentId(specificComponentId); const scopeId = specificComponentId;
const dropdownHotkeyScope = snapshot const dropdownHotkeyScope = snapshot
.getLoadable(dropdownHotkeyComponentState({ scopeId })) .getLoadable(dropdownHotkeyComponentState({ scopeId }))
@ -63,7 +73,7 @@ export const useDropdownV2 = () => {
const toggleDropdown = useRecoilCallback( const toggleDropdown = useRecoilCallback(
({ snapshot }) => ({ snapshot }) =>
(specificComponentId: string, customHotkeyScope?: HotkeyScope) => { (specificComponentId: string, customHotkeyScope?: HotkeyScope) => {
const scopeId = getScopeIdFromComponentId(specificComponentId); const scopeId = specificComponentId;
const isDropdownOpen = snapshot const isDropdownOpen = snapshot
.getLoadable(isDropdownOpenComponentState({ scopeId })) .getLoadable(isDropdownOpenComponentState({ scopeId }))
.getValue(); .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 { clickOutsideListenerIsActivatedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsActivatedComponentState';
import { clickOutsideListenerIsMouseDownInsideComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState'; import { clickOutsideListenerIsMouseDownInsideComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerIsMouseDownInsideComponentState';
import { clickOutsideListenerMouseDownHappenedComponentState } from '@/ui/utilities/pointer-event/states/clickOutsideListenerMouseDownHappenedComponentState'; 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'; import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
export const useClickOustideListenerStates = (componentId: string) => { export const useClickOustideListenerStates = (componentId: string) => {
const scopeId = getScopeIdFromComponentId(componentId); const scopeId = componentId;
return { return {
scopeId, 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 { 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 { ComponentFamilyState } from '@/ui/utilities/state/component-state/types/ComponentFamilyState';
import { SerializableParam } from 'recoil'; import { SerializableParam } from 'recoil';
@ -22,7 +21,7 @@ export const useExtractedComponentFamilyStateV2 = <
const internalScopeId = useAvailableScopeIdOrThrow( const internalScopeId = useAvailableScopeIdOrThrow(
componentContext, componentContext,
getScopeIdOrUndefinedFromComponentId(componentId), componentId,
); );
const extractedComponentFamilyState = (familyKey: FamilyKey) => 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 { SerializableParam, useRecoilValue } from 'recoil';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; 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 { ComponentFamilyState } from '@/ui/utilities/state/component-state/types/ComponentFamilyState';
export const useRecoilComponentFamilyValue = < export const useRecoilComponentFamilyValue = <
@ -24,7 +23,7 @@ export const useRecoilComponentFamilyValue = <
const internalComponentId = useAvailableScopeIdOrThrow( const internalComponentId = useAvailableScopeIdOrThrow(
componentContext, componentContext,
getScopeIdOrUndefinedFromComponentId(componentId), componentId,
); );
return useRecoilValue( 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 { 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 { RecoilComponentState } from '@/ui/utilities/state/component-state/types/RecoilComponentState';
import { useRecoilState } from 'recoil'; import { useRecoilState } from 'recoil';
@ -19,7 +18,7 @@ export const useRecoilComponentState = <StateType>(
const internalComponentId = useAvailableScopeIdOrThrow( const internalComponentId = useAvailableScopeIdOrThrow(
componentContext, componentContext,
getScopeIdOrUndefinedFromComponentId(componentId), componentId,
); );
return useRecoilState( 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 { useRecoilValue } from 'recoil';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; 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 { RecoilComponentState } from '@/ui/utilities/state/component-state/types/RecoilComponentState';
export const useRecoilComponentValue = <StateType>( export const useRecoilComponentValue = <StateType>(
@ -20,7 +19,7 @@ export const useRecoilComponentValue = <StateType>(
const internalComponentId = useAvailableScopeIdOrThrow( const internalComponentId = useAvailableScopeIdOrThrow(
componentContext, componentContext,
getScopeIdOrUndefinedFromComponentId(componentId), componentId,
); );
return useRecoilValue( 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 { useSetRecoilState } from 'recoil';
import { useAvailableScopeIdOrThrow } from '@/ui/utilities/recoil-scope/scopes-internal/hooks/useAvailableScopeId'; 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 { RecoilComponentState } from '@/ui/utilities/state/component-state/types/RecoilComponentState';
export const useSetRecoilComponentState = <StateType>( export const useSetRecoilComponentState = <StateType>(
@ -20,7 +19,7 @@ export const useSetRecoilComponentState = <StateType>(
const internalComponentId = useAvailableScopeIdOrThrow( const internalComponentId = useAvailableScopeIdOrThrow(
componentContext, componentContext,
getScopeIdOrUndefinedFromComponentId(componentId), componentId,
); );
return useSetRecoilState( return useSetRecoilState(