Replaced useDropdown calls by useCloseDropdown, useOpenDropdown and useToggleDropdown (#12958)
This PR replaces the many calls of useDropdown by the new standalone hooks : useCloseDropdown, useOpenDropdown and useToggleDropdown. This will allow to remove useDropdown and then the dropdown recoil component state v1. A big round of QA has been made, with some bugs caught along the way. Closes https://github.com/twentyhq/core-team-issues/issues/1155 Closes https://github.com/twentyhq/core-team-issues/issues/618 ## QA Component|Status|Comment |---|---|---| CurrentWorkspaceMemberFavorites|Ok| FavoriteFolderPickerFooter|Ok| AdvancedFilterAddFilterRuleSelect|Ok| AdvancedFilterRecordFilterGroupOptionsDropdown|Ok| AdvancedFilterRecordFilterOperandSelectContent|Ok| AdvancedFilterRecordFilterOptionsDropdown|Ok| useAdvancedFilterFieldSelectDropdown|Ok| ObjectFilterDropdownBooleanSelect|Ok| ObjectFilterDropdownOptionSelect|Ok| ObjectOptionsDropdown|Ok| ObjectOptionsDropdownLayoutContent|Ok| ObjectSortDropdownButton|Ok| useCloseSortDropdown|Ok| FormDateTimeFieldInput|Ok|Bug detected, cannot select a month or a year, see issue https://github.com/twentyhq/twenty/issues/12922 FormSingleRecordPicker|Ok| MultiItemFieldMenuItem|Ok| RecordDetailRelationRecordsListItem|Ok| RecordDetailRelationSection|Ok| RecordDetailRelationSectionDropdownToMany|Ok| RecordDetailRelationSectionDropdownToOne|Ok| RecordTableColumnAggregateFooterDropdownSubmenuContent|Ok| RecordTableColumnAggregateFooterAggregateOperationMenuItems|Ok| RecordTableColumnAggregateFooterMenuContent|Ok| RecordTableColumnAggregateFooterValueCell|Ok| RecordTableColumnHeadDropdownMenu|Ok| RecordTableHeaderPlusButtonContent|Ok| useTriggerActionMenuDropdown|Ok| MultipleSelectDropdown|Ok| RecordBoardColumnHeaderAggregateDropdownButton|Ok| SettingsDataModelFieldSelectFormOptionRow|Ok| SettingsDataModelNewFieldBreadcrumbDropDown|Ok| SettingsObjectFieldActiveActionDropdown|Ok| SettingsObjectFieldInactiveActionDropdown|Ok| SettingsObjectInactiveMenuDropDown|Ok| SettingsSecurityApprovedAccessDomainRowDropdownMenu|Couldn’t test| SettingsSecuritySSORowDropdownMenu|Couldn’t test| SettingsAccountsRowDropdownMenu|Ok| SettingsRoleAssignment|Ok| SettingsServerlessFunctionTabEnvironmentVariableTableRow|Couldn’t test| MatchColumnToFieldSelect|Ok| SubMatchingSelectDropdownButton|Ok|Removed conflicting duplicate open dropdown SubMatchingSelectRowRightDropdown|Ok| CurrencyPickerDropdownButton|Ok| IconPicker|Ok| DateTimePicker|Ok| PhoneCountryPickerDropdownButton|OK| Select|Ok| Dropdown|Ok|Not QAing all dropdowns in the app because the ones of this QA are enough to show up that Dropdown is behaving correctly on a lot of use cases DropdownMenuInnerSelect|Ok| TabList|Ok|Removed onClickOutside called in dropdown clickable component, validated with Raph who recently worked on this DateInput|Ok| MultiWorkspaceDropdownDefaultComponents|Ok| AdvancedFilterChip|Ok| EditableFilterDropdownButton|Ok| UpdateViewButtonGroup|Ok| ViewBarDetailsAddFilterButton|Ok| ViewBarFilterButton|Ok| ViewBarFilterDropdown|Ok| ViewBarFilterDropdownAdvancedFilterButton|Ok| ViewPickerDropdown|Ok| ViewPickerListContent|Ok| ViewPickerOptionDropdown|Ok| WorkflowEditTriggerDatabaseEventForm|Ok| WorkflowVariablesDropdownWorkflowStepItems|Ok| AttachmentDropdown|Ok| SupportDropdown|Ok| Co-authored-by: Charles Bochet <charlesBochet@users.noreply.github.com> Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
@@ -7,7 +7,7 @@ import {
|
||||
MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
|
||||
MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
|
||||
} from '@/ui/input/components/internal/date/components/InternalDatePicker';
|
||||
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
|
||||
import { useCloseDropdown } from '@/ui/layout/dropdown/hooks/useCloseDropdown';
|
||||
import { currentHotkeyScopeState } from '@/ui/utilities/hotkey/states/internal/currentHotkeyScopeState';
|
||||
import { useRecoilCallback } from 'recoil';
|
||||
import { Nullable } from 'twenty-ui/utilities';
|
||||
@@ -61,23 +61,19 @@ export const DateInput = ({
|
||||
onSubmit?.(newDate);
|
||||
};
|
||||
|
||||
const { closeDropdown: closeDropdownMonthSelect } = useDropdown(
|
||||
MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID,
|
||||
);
|
||||
const { closeDropdown: closeDropdownYearSelect } = useDropdown(
|
||||
MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID,
|
||||
);
|
||||
const { closeDropdown: closeDropdownMonthSelect } = useCloseDropdown();
|
||||
const { closeDropdown: closeDropdownYearSelect } = useCloseDropdown();
|
||||
|
||||
const handleEnter = () => {
|
||||
closeDropdownYearSelect();
|
||||
closeDropdownMonthSelect();
|
||||
closeDropdownYearSelect(MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID);
|
||||
closeDropdownMonthSelect(MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID);
|
||||
|
||||
onEnter(internalValue);
|
||||
};
|
||||
|
||||
const handleEscape = () => {
|
||||
closeDropdownYearSelect();
|
||||
closeDropdownMonthSelect();
|
||||
closeDropdownYearSelect(MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID);
|
||||
closeDropdownMonthSelect(MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID);
|
||||
|
||||
onEscape(internalValue);
|
||||
};
|
||||
@@ -90,8 +86,8 @@ export const DateInput = ({
|
||||
.getValue();
|
||||
|
||||
if (hotkeyScope?.scope === TableHotkeyScope.CellEditMode) {
|
||||
closeDropdownYearSelect();
|
||||
closeDropdownMonthSelect();
|
||||
closeDropdownYearSelect(MONTH_AND_YEAR_DROPDOWN_YEAR_SELECT_ID);
|
||||
closeDropdownMonthSelect(MONTH_AND_YEAR_DROPDOWN_MONTH_SELECT_ID);
|
||||
onEscape(internalValue);
|
||||
onClickOutside(event, internalValue);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user