admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Migrate dropdown to scope map (#3338)

Browse Source 
* Migrate dropdown to scope map

* Run lintr

* Move Dropdown Scope internally

* Fix

* Fix lint

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Thomas Trompette
2024-01-10 15:46:37 +01:00
committed by GitHub
parent fbf7496fab
commit 2713285a0f
47 changed files with 803 additions and 881 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldRelationForm.tsx
View File

@ -105,7 +105,7 @@ export const SettingsObjectFieldRelationForm = ({
<StyledInputsContainer>
<IconPicker
disabled={disableFieldEdition}
dropdownScopeId="field-destination-icon-picker"
dropdownId="field-destination-icon-picker"
selectedIconKey={values.field.icon || undefined}
onChange={(value) =>
onChange({

149
packages/twenty-front/src/modules/settings/data-model/components/SettingsObjectFieldSelectFormOptionRow.tsx
View File

@ -17,7 +17,6 @@ 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';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor';
import { mainColorNames } from '@/ui/theme/constants/colors';
@ -63,16 +62,14 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
}: SettingsObjectFieldSelectFormOptionRowProps) => {
const theme = useTheme();
const dropdownScopeIds = useMemo(() => {
const dropdownIds = useMemo(() => {
const baseScopeId = `select-field-option-row-${v4()}`;
return { color: `${baseScopeId}-color`, actions: `${baseScopeId}-actions` };
}, []);
const { closeDropdown: closeColorDropdown } = useDropdown(
dropdownScopeIds.color,
);
const { closeDropdown: closeColorDropdown } = useDropdown(dropdownIds.color);
const { closeDropdown: closeActionsDropdown } = useDropdown(
dropdownScopeIds.actions,
dropdownIds.actions,
);
return (
@ -82,82 +79,80 @@ export const SettingsObjectFieldSelectFormOptionRow = ({
stroke={theme.icon.stroke.sm}
color={theme.font.color.extraLight}
/>
<DropdownScope dropdownScopeId={dropdownScopeIds.color}>
<Dropdown
dropdownPlacement="bottom-start"
dropdownHotkeyScope={{
scope: dropdownScopeIds.color,
}}
clickableComponent={<StyledColorSample colorName={option.color} />}
dropdownComponents={
<DropdownMenu>
<DropdownMenuItemsContainer>
{mainColorNames.map((colorName) => (
<MenuItemSelectColor
key={colorName}
onClick={() => {
onChange({ ...option, color: colorName });
closeColorDropdown();
}}
color={colorName}
selected={colorName === option.color}
/>
))}
</DropdownMenuItemsContainer>
</DropdownMenu>
}
/>
</DropdownScope>
<Dropdown
dropdownId={dropdownIds.color}
dropdownPlacement="bottom-start"
dropdownHotkeyScope={{
scope: dropdownIds.color,
}}
clickableComponent={<StyledColorSample colorName={option.color} />}
dropdownComponents={
<DropdownMenu>
<DropdownMenuItemsContainer>
{mainColorNames.map((colorName) => (
<MenuItemSelectColor
key={colorName}
onClick={() => {
onChange({ ...option, color: colorName });
closeColorDropdown();
}}
color={colorName}
selected={colorName === option.color}
/>
))}
</DropdownMenuItemsContainer>
</DropdownMenu>
}
/>
<StyledOptionInput
value={option.label}
onChange={(label) => onChange({ ...option, label })}
RightIcon={isDefault ? IconCheck : undefined}
/>
<DropdownScope dropdownScopeId={dropdownScopeIds.actions}>
<Dropdown
dropdownPlacement="right-start"
dropdownHotkeyScope={{
scope: dropdownScopeIds.actions,
}}
clickableComponent={<LightIconButton Icon={IconDotsVertical} />}
dropdownComponents={
<DropdownMenu>
<DropdownMenuItemsContainer>
{isDefault ? (
<MenuItem
LeftIcon={IconX}
text="Remove as default"
onClick={() => {
onChange({ ...option, isDefault: false });
closeActionsDropdown();
}}
/>
) : (
<MenuItem
LeftIcon={IconCheck}
text="Set as default"
onClick={() => {
onChange({ ...option, isDefault: true });
closeActionsDropdown();
}}
/>
)}
{!!onRemove && (
<MenuItem
accent="danger"
LeftIcon={IconTrash}
text="Remove option"
onClick={() => {
onRemove();
closeActionsDropdown();
}}
/>
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
}
/>
</DropdownScope>
<Dropdown
dropdownId={dropdownIds.actions}
dropdownPlacement="right-start"
dropdownHotkeyScope={{
scope: dropdownIds.actions,
}}
clickableComponent={<LightIconButton Icon={IconDotsVertical} />}
dropdownComponents={
<DropdownMenu>
<DropdownMenuItemsContainer>
{isDefault ? (
<MenuItem
LeftIcon={IconX}
text="Remove as default"
onClick={() => {
onChange({ ...option, isDefault: false });
closeActionsDropdown();
}}
/>
) : (
<MenuItem
LeftIcon={IconCheck}
text="Set as default"
onClick={() => {
onChange({ ...option, isDefault: true });
closeActionsDropdown();
}}
/>
)}
{!!onRemove && (
<MenuItem
accent="danger"
LeftIcon={IconTrash}
text="Remove option"
onClick={() => {
onRemove();
closeActionsDropdown();
}}
/>
)}
</DropdownMenuItemsContainer>
</DropdownMenu>
}
/>
</StyledRow>
);
};