Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Scrollable fixed dropdowns container minor refactor #9159

Merged
merged 3 commits into from
Dec 20, 2024
Merged

Scrollable fixed dropdowns container minor refactor #9159

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
881da10
refact
ehconitin Dec 20, 2024
df5928a
lint
ehconitin Dec 20, 2024
353d2e0
Fixed dropdown id that weren't consistent through re-renders due to v4()
lucasbordeau Dec 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions packages/twenty-front/src/modules/action-menu/components/RecordIndexActionMenuDropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,3 @@
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';

import { PositionType } from '../types/PositionType';

import { actionMenuEntriesComponentSelector } from '@/action-menu/states/actionMenuEntriesComponentSelector';
import { ActionMenuComponentInstanceContext } from '@/action-menu/states/contexts/ActionMenuComponentInstanceContext';
import { recordIndexActionMenuDropdownPositionComponentState } from '@/action-menu/states/recordIndexActionMenuDropdownPositionComponentState';
Expand All @@ -13,7 +8,10 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { useAvailableComponentInstanceIdOrThrow } from '@/ui/utilities/state/component-state/hooks/useAvailableComponentInstanceIdOrThrow';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import { extractComponentState } from '@/ui/utilities/state/component-state/utils/extractComponentState';
import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { MenuItem } from 'twenty-ui';
import { PositionType } from '../types/PositionType';

type StyledContainerProps = {
position: PositionType;
Expand Down
1 change: 1 addition & 0 deletions ...ty-front/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,7 @@ export const FavoriteFolderPicker = ({
toggleFolderSelection={toggleFolderSelection}
/>
</DropdownMenuItemsContainer>
<DropdownMenuSeparator />
<FavoriteFolderPickerFooter dropdownId={dropdownId} />
</DropdownMenu>
);
Expand Down
35 changes: 13 additions & 22 deletions ...nt/src/modules/favorites/favorite-folder-picker/components/FavoriteFolderPickerFooter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,9 @@ import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useNavigationSection } from '@/ui/navigation/navigation-drawer/hooks/useNavigationSection';
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilState, useSetRecoilState } from 'recoil';
import { IconPlus, MenuItem } from 'twenty-ui';

const StyledFooter = styled.div`
border-bottom-left-radius: ${({ theme }) => theme.border.radius.md};
border-bottom-right-radius: ${({ theme }) => theme.border.radius.md};
border-top: 1px solid ${({ theme }) => theme.border.color.light};
`;

export const FavoriteFolderPickerFooter = ({
dropdownId,
}: {
Expand All @@ -30,20 +23,18 @@ export const FavoriteFolderPickerFooter = ({
const { closeDropdown } = useDropdown(dropdownId);

return (
<StyledFooter>
<DropdownMenuItemsContainer>
<MenuItem
className="add-folder"
onClick={() => {
setIsNavigationDrawerExpanded(true);
openNavigationSection();
setIsFavoriteFolderCreating(true);
closeDropdown();
}}
text="Add folder"
LeftIcon={() => <IconPlus size={theme.icon.size.md} />}
/>
</DropdownMenuItemsContainer>
</StyledFooter>
<DropdownMenuItemsContainer scrollable={false}>
<MenuItem
className="add-folder"
onClick={() => {
setIsNavigationDrawerExpanded(true);
openNavigationSection();
setIsFavoriteFolderCreating(true);
closeDropdown();
}}
text="Add folder"
LeftIcon={() => <IconPlus size={theme.icon.size.md} />}
/>
</DropdownMenuItemsContainer>
);
};
2 changes: 1 addition & 1 deletion ...s/object-record/object-options-dropdown/components/ObjectOptionsDropdownFieldsContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ export const ObjectOptionsDropdownFieldsContent = () => {
showDragGrip={true}
/>
<DropdownMenuSeparator />
<DropdownMenuItemsContainer withoutScrollWrapper>
<DropdownMenuItemsContainer scrollable={false}>
<MenuItemNavigate
onClick={() => onContentChange('hiddenFields')}
LeftIcon={IconEyeOff}
Expand Down
2 changes: 1 addition & 1 deletion ...ct-record/object-options-dropdown/components/ObjectOptionsDropdownHiddenFieldsContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ export const ObjectOptionsDropdownHiddenFieldsContent = () => {
closeDropdown();
}}
>
<DropdownMenuItemsContainer withoutScrollWrapper>
<DropdownMenuItemsContainer scrollable={false}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: scrollable={false} is only needed for single menu items that don't require scrolling. Consider removing this prop since it's redundant here - the container will never need to scroll with just one menu item.

<MenuItem LeftIcon={IconSettings} text="Edit Fields" />
</DropdownMenuItemsContainer>
</UndecoratedLink>
Expand Down
4 changes: 2 additions & 2 deletions ...les/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ export const ObjectOptionsDropdownMenuContent = () => {
{/** TODO: Should be removed when view settings contains more options */}
{viewType === ViewType.Kanban && (
<>
<DropdownMenuItemsContainer withoutScrollWrapper>
<DropdownMenuItemsContainer scrollable={false}>
<MenuItem
onClick={() => onContentChange('viewSettings')}
LeftIcon={IconLayout}
Expand All @@ -109,7 +109,7 @@ export const ObjectOptionsDropdownMenuContent = () => {
<DropdownMenuSeparator />
</>
)}
<DropdownMenuItemsContainer withoutScrollWrapper>
<DropdownMenuItemsContainer scrollable={false}>
<MenuItem
onClick={() => onContentChange('fields')}
LeftIcon={IconTag}
Expand Down
2 changes: 1 addition & 1 deletion ...record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ export const RecordTableHeaderPlusButtonContent = () => {
))}
</DropdownMenuItemsContainer>
<DropdownMenuSeparator />
<DropdownMenuItemsContainer withoutScrollWrapper>
<DropdownMenuItemsContainer scrollable={false}>
<UndecoratedLink
fullWidth
to={`/settings/objects/${getObjectSlug(objectMetadataItem)}`}
Expand Down
4 changes: 2 additions & 2 deletions ...s/twenty-front/src/modules/object-record/relation-picker/components/MultiRecordSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,7 +144,7 @@ export const MultiRecordSelect = ({
{dropdownPlacement?.includes('end') && (
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style: duplicate code structure between end and start placement branches. Consider extracting into a shared function to reduce code duplication

<>
{isDefined(onCreate) && (
<DropdownMenuItemsContainer>
<DropdownMenuItemsContainer scrollable={false}>
{createNewButton}
</DropdownMenuItemsContainer>
)}
Expand Down Expand Up @@ -181,7 +181,7 @@ export const MultiRecordSelect = ({
<DropdownMenuSeparator />
)}
{isDefined(onCreate) && (
<DropdownMenuItemsContainer withoutScrollWrapper>
<DropdownMenuItemsContainer scrollable={false}>
{createNewButton}
</DropdownMenuItemsContainer>
)}
Expand Down
4 changes: 2 additions & 2 deletions ...odules/object-record/relation-picker/components/SingleRecordSelectMenuItemsWithSearch.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ export const SingleRecordSelectMenuItemsWithSearch = ({
<>
{dropdownPlacement?.includes('end') && (
<>
<DropdownMenuItemsContainer>
<DropdownMenuItemsContainer scrollable={false}>
{createNewButton}
</DropdownMenuItemsContainer>
{records.recordsToSelect.length > 0 && <DropdownMenuSeparator />}
Expand Down Expand Up @@ -117,7 +117,7 @@ export const SingleRecordSelectMenuItemsWithSearch = ({
<DropdownMenuSeparator />
)}
{isDefined(onCreate) && (
<DropdownMenuItemsContainer>
<DropdownMenuItemsContainer scrollable={false}>
{createNewButton}
</DropdownMenuItemsContainer>
)}
Expand Down
53 changes: 23 additions & 30 deletions ...s/data-model/fields/forms/select/components/SettingsDataModelFieldSelectFormOptionRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useMemo } from 'react';
import {
ColorSample,
IconCheck,
Expand All @@ -21,7 +20,6 @@ import {
MenuItem,
MenuItemSelectColor,
} from 'twenty-ui';
import { v4 } from 'uuid';
import { computeOptionValueFromLabel } from '~/pages/settings/data-model/utils/compute-option-value-from-label.utils';

type SettingsDataModelFieldSelectFormOptionRowProps = {
Expand Down Expand Up @@ -81,17 +79,14 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
}: SettingsDataModelFieldSelectFormOptionRowProps) => {
const theme = useTheme();

const dropdownIds = useMemo(() => {
const baseScopeId = `select-field-option-row-${v4()}`;
return {
color: `${baseScopeId}-color`,
actions: `${baseScopeId}-actions`,
};
}, []);
const SELECT_COLOR_DROPDOWN_ID = 'select-color-dropdown';
const SELECT_ACTIONS_DROPDOWN_ID = 'select-actions-dropdown';

const { closeDropdown: closeColorDropdown } = useDropdown(dropdownIds.color);
const { closeDropdown: closeColorDropdown } = useDropdown(
SELECT_COLOR_DROPDOWN_ID,
);
const { closeDropdown: closeActionsDropdown } = useDropdown(
dropdownIds.actions,
SELECT_ACTIONS_DROPDOWN_ID,
);

const handleInputEnter = () => {
Expand Down Expand Up @@ -120,28 +115,26 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
/>
</AdvancedSettingsWrapper>
<Dropdown
dropdownId={dropdownIds.color}
dropdownId={SELECT_COLOR_DROPDOWN_ID}
dropdownPlacement="bottom-start"
dropdownHotkeyScope={{
scope: dropdownIds.color,
scope: SELECT_COLOR_DROPDOWN_ID,
}}
clickableComponent={<StyledColorSample colorName={option.color} />}
dropdownComponents={
<DropdownMenu>
<DropdownMenuItemsContainer>
{MAIN_COLOR_NAMES.map((colorName) => (
<MenuItemSelectColor
key={colorName}
onClick={() => {
onChange({ ...option, color: colorName });
closeColorDropdown();
}}
color={colorName}
selected={colorName === option.color}
/>
))}
</DropdownMenuItemsContainer>
</DropdownMenu>
<DropdownMenuItemsContainer>
{MAIN_COLOR_NAMES.map((colorName) => (
<MenuItemSelectColor
key={colorName}
onClick={() => {
onChange({ ...option, color: colorName });
closeColorDropdown();
}}
color={colorName}
selected={colorName === option.color}
/>
))}
</DropdownMenuItemsContainer>
}
/>
<StyledOptionInput
Expand All @@ -165,10 +158,10 @@ export const SettingsDataModelFieldSelectFormOptionRow = ({
autoSelectOnMount={isNewRow}
/>
<Dropdown
dropdownId={dropdownIds.actions}
dropdownId={SELECT_ACTIONS_DROPDOWN_ID}
dropdownPlacement="right-start"
dropdownHotkeyScope={{
scope: dropdownIds.actions,
scope: SELECT_ACTIONS_DROPDOWN_ID,
}}
clickableComponent={
<StyledLightIconButton accent="tertiary" Icon={IconDotsVertical} />
Expand Down
28 changes: 13 additions & 15 deletions ...t/src/modules/settings/data-model/object-details/components/SettingsObjectSummaryCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
import { SettingsDataModelObjectTypeTag } from '@/settings/data-model/objects/components/SettingsDataModelObjectTypeTag';
import { getObjectTypeLabel } from '@/settings/data-model/utils/getObjectTypeLabel';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';

Expand Down Expand Up @@ -86,21 +85,20 @@ export const SettingsObjectSummaryCard = ({
accent="tertiary"
/>
}
dropdownMenuWidth={160}
dropdownComponents={
<DropdownMenu width="160px">
<DropdownMenuItemsContainer>
<MenuItem
text="Edit"
LeftIcon={IconPencil}
onClick={handleEdit}
/>
<MenuItem
text="Deactivate"
LeftIcon={IconArchive}
onClick={handleDeactivate}
/>
</DropdownMenuItemsContainer>
</DropdownMenu>
<DropdownMenuItemsContainer>
<MenuItem
text="Edit"
LeftIcon={IconPencil}
onClick={handleEdit}
/>
<MenuItem
text="Deactivate"
LeftIcon={IconArchive}
onClick={handleDeactivate}
/>
</DropdownMenuItemsContainer>
}
dropdownHotkeyScope={{
scope: dropdownId,
Expand Down
23 changes: 10 additions & 13 deletions ...tions/database-connection/components/SettingsIntegrationDatabaseConnectionSummaryCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import { SettingsSummaryCard } from '@/settings/components/SettingsSummaryCard';
import { SettingsIntegrationDatabaseConnectionSyncStatus } from '@/settings/integrations/database-connection/components/SettingsIntegrationDatabaseConnectionSyncStatus';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import styled from '@emotion/styled';
import {
Expand Down Expand Up @@ -64,18 +63,16 @@ export const SettingsIntegrationDatabaseConnectionSummaryCard = ({
<LightIconButton Icon={IconDotsVertical} accent="tertiary" />
}
dropdownComponents={
<DropdownMenu>
<DropdownMenuItemsContainer>
<MenuItem
LeftIcon={IconTrash}
text="Remove"
onClick={onRemove}
/>
<UndecoratedLink to="./edit">
<MenuItem LeftIcon={IconPencil} text="Edit" />
</UndecoratedLink>
</DropdownMenuItemsContainer>
</DropdownMenu>
<DropdownMenuItemsContainer>
<MenuItem
LeftIcon={IconTrash}
text="Remove"
onClick={onRemove}
/>
<UndecoratedLink to="./edit">
<MenuItem LeftIcon={IconPencil} text="Edit" />
</UndecoratedLink>
</DropdownMenuItemsContainer>
}
/>
</>
Expand Down
2 changes: 1 addition & 1 deletion packages/twenty-front/src/modules/ui/input/components/Select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export const Select = <Value extends SelectValue>({
<DropdownMenuSeparator />
)}
{!!callToActionButton && (
<DropdownMenuItemsContainer hasMaxHeight withoutScrollWrapper>
<DropdownMenuItemsContainer hasMaxHeight scrollable={false}>
<MenuItem
onClick={callToActionButton.onClick}
LeftIcon={callToActionButton.Icon}
Expand Down
6 changes: 3 additions & 3 deletions ...ges/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,16 +38,16 @@ export const DropdownMenuItemsContainer = ({
children,
hasMaxHeight,
className,
withoutScrollWrapper,
scrollable = true,
}: {
children: React.ReactNode;
hasMaxHeight?: boolean;
className?: string;
withoutScrollWrapper?: boolean;
scrollable?: boolean;
}) => {
const id = useId();

return withoutScrollWrapper === true ? (
return scrollable !== true ? (
<StyledDropdownMenuItemsExternalContainer
hasMaxHeight={hasMaxHeight}
className={className}
Expand Down
Loading
Loading