twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-24 04:23:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix for view switcher default icon display (#7029)

Browse Source 
Fixes #6947 (View switcher default icon display)

---------

Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
Vinod Rathod 2024-10-10 13:42:17 +05:30 committed by GitHub
parent b6b7d0e665
commit 97ab0481e4
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 19 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,5 +1,5 @@
import { useMemo, useState } from 'react';
import styled from '@emotion/styled';
import { useMemo, useState } from 'react';
import { useRecoilValue } from 'recoil';
import { IconApps, IconComponent, useIcons } from 'twenty-ui';
@ -147,6 +147,8 @@ export const IconPicker = ({
[matchingSearchIconKeys],
);
const icon = selectedIconKey ? getIcon(selectedIconKey) : IconApps;
return (
<div className={className}>
<Dropdown
@ -160,7 +162,7 @@ export const IconPicker = ({
: `(no icon selected)`
}`}
disabled={disabled}
Icon={selectedIconKey ? getIcon(selectedIconKey) : IconApps}
Icon={icon}
variant={variant}
/>
}

12
packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx
View File

@ -30,6 +30,7 @@ import { viewPickerIsPersistingComponentState } from '@/views/view-picker/states
import { viewPickerKanbanFieldMetadataIdComponentState } from '@/views/view-picker/states/viewPickerKanbanFieldMetadataIdComponentState';
import { viewPickerSelectedIconComponentState } from '@/views/view-picker/states/viewPickerSelectedIconComponentState';
import { viewPickerTypeComponentState } from '@/views/view-picker/states/viewPickerTypeComponentState';
import { useState } from 'react';
const StyledNoKanbanFieldAvailableContainer = styled.div`
color: ${({ theme }) => theme.font.color.light};
@ -41,6 +42,7 @@ const StyledNoKanbanFieldAvailableContainer = styled.div`
export const ViewPickerContentCreateMode = () => {
const { setViewPickerMode } = useViewPickerMode();
const [hasManuallySelectedIcon, setHasManuallySelectedIcon] = useState(false);
const [viewPickerInputName, setViewPickerInputName] =
useRecoilComponentStateV2(viewPickerInputNameComponentState);
@ -87,9 +89,17 @@ export const ViewPickerContentCreateMode = () => {
ViewsHotkeyScope.ListDropdown,
);
const defaultIcon =
viewPickerType === ViewType.Kanban ? 'IconLayoutKanban' : 'IconTable';
const selectedIcon = hasManuallySelectedIcon
? viewPickerSelectedIcon
: defaultIcon;
const onIconChange = ({ iconKey }: { iconKey: string }) => {
setViewPickerIsDirty(true);
setViewPickerSelectedIcon(iconKey);
setHasManuallySelectedIcon(true);
};
const handleClose = async () => {
@ -106,7 +116,7 @@ export const ViewPickerContentCreateMode = () => {
<ViewPickerIconAndNameContainer>
<IconPicker
onChange={onIconChange}
selectedIconKey={viewPickerSelectedIcon}
selectedIconKey={selectedIcon}
disableBlur
onClose={() => setHotkeyScope(ViewsHotkeyScope.ListDropdown)}
/>

5
packages/twenty-ui/src/display/icon/hooks/useIcons.ts
View File

@ -12,7 +12,10 @@ export const useIcons = () => {
};
const getIcon = (iconKey?: string | null) => {
if (!iconKey) return defaultIcon;
if (!iconKey) {
return defaultIcon;
}
return icons[iconKey] ?? defaultIcon;
};