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

Fix Icon Lazy Loading (#2984)

Browse Source 
Fix Icon picker
This commit is contained in:
Charles Bochet
2023-12-14 12:13:02 +01:00
committed by GitHub
parent ed2cd408bf
commit 8916dee352
33 changed files with 4366 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,10 +2,10 @@ import styled from '@emotion/styled';
import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
import { validateMetadataLabel } from '@/object-metadata/utils/validateMetadataLabel';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { IconPicker } from '@/ui/input/components/IconPicker';
import { Select } from '@/ui/input/components/Select';
import { TextInput } from '@/ui/input/components/TextInput';
import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
import { Field } from '~/generated-metadata/graphql';
import { relationTypes } from '../constants/relationTypes';
@ -56,7 +56,7 @@ export const SettingsObjectFieldRelationForm = ({
onChange,
values,
}: SettingsObjectFieldRelationFormProps) => {
const { icons } = useLazyLoadIcons();
const { getIcon } = useIcons();
const { objectMetadataItems, findObjectMetadataItemById } =
useObjectMetadataItemForSettings();
@ -92,9 +92,7 @@ export const SettingsObjectFieldRelationForm = ({
options={objectMetadataItems.map((objectMetadataItem) => ({
label: objectMetadataItem.labelPlural,
value: objectMetadataItem.id,
Icon: objectMetadataItem.icon
? icons[objectMetadataItem.icon]
: undefined,
Icon: getIcon(objectMetadataItem.icon),
}))}
onChange={(value) => onChange({ objectMetadataId: value })}
/>

7
packages/twenty-front/src/modules/settings/data-model/hooks/useFieldPreview.ts
View File

@ -1,5 +1,5 @@
import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { Field, FieldMetadataType } from '~/generated-metadata/graphql';
import { settingsFieldMetadataTypes } from '../constants/settingsFieldMetadataTypes';
@ -22,8 +22,9 @@ export const useFieldPreview = ({
const { findObjectMetadataItemById } = useObjectMetadataItemForSettings();
const objectMetadataItem = findObjectMetadataItemById(objectMetadataId);
const { Icon: ObjectIcon } = useLazyLoadIcon(objectMetadataItem?.icon ?? '');
const { Icon: FieldIcon } = useLazyLoadIcon(fieldMetadata.icon ?? '');
const { getIcon } = useIcons();
const ObjectIcon = getIcon(objectMetadataItem?.icon);
const FieldIcon = getIcon(fieldMetadata.icon);
const fieldName = fieldMetadata.id
? objectMetadataItem?.fields.find(({ id }) => id === fieldMetadata.id)?.name

5
packages/twenty-front/src/modules/settings/data-model/new-object/components/SettingsAvailableStandardObjectItemTableRow.tsx
View File

@ -2,8 +2,8 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { Checkbox } from '@/ui/input/components/Checkbox';
import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
@ -41,7 +41,8 @@ export const SettingsAvailableStandardObjectItemTableRow = ({
}: SettingsAvailableStandardObjectItemTableRowProps) => {
const theme = useTheme();
const { Icon } = useLazyLoadIcon(objectItem.icon ?? '');
const { getIcon } = useIcons();
const Icon = getIcon(objectItem.icon);
return (
<StyledAvailableStandardObjectTableRow

5
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectAboutSection.tsx
View File

@ -2,10 +2,10 @@ import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconArchive, IconDotsVertical, IconPencil } from '@/ui/display/icon';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { Tag } from '@/ui/display/tag/components/Tag';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
import { Card } from '@/ui/layout/card/components/Card';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
@ -53,7 +53,8 @@ export const SettingsAboutSection = ({
onEdit,
}: SettingsAboutSectionProps) => {
const theme = useTheme();
const { Icon } = useLazyLoadIcon(iconKey);
const { getIcon } = useIcons();
const Icon = getIcon(iconKey);
const { closeDropdown } = useDropdown({ dropdownScopeId });

5
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectFieldItemTableRow.tsx
View File

@ -6,7 +6,7 @@ import styled from '@emotion/styled';
import { useRelationMetadata } from '@/object-metadata/hooks/useRelationMetadata';
import { FieldMetadataItem } from '@/object-metadata/types/FieldMetadataItem';
import { getObjectSlug } from '@/object-metadata/utils/getObjectSlug';
import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
@ -39,7 +39,8 @@ export const SettingsObjectFieldItemTableRow = ({
fieldMetadataItem: fieldMetadataItem,
}: SettingsObjectFieldItemTableRowProps) => {
const theme = useTheme();
const { Icon } = useLazyLoadIcon(fieldMetadataItem.icon ?? '');
const { getIcon } = useIcons();
const Icon = getIcon(fieldMetadataItem.icon);
const navigate = useNavigate();
// TODO: parse with zod and merge types with FieldType (create a subset of FieldType for example)

5
packages/twenty-front/src/modules/settings/data-model/object-details/components/SettingsObjectItemTableRow.tsx
View File

@ -4,8 +4,8 @@ import styled from '@emotion/styled';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { Tag } from '@/ui/display/tag/components/Tag';
import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
import { TableCell } from '@/ui/layout/table/components/TableCell';
import { TableRow } from '@/ui/layout/table/components/TableRow';
@ -40,7 +40,8 @@ export const SettingsObjectItemTableRow = ({
objectNameSingular: objectItem.nameSingular,
});
const { Icon } = useLazyLoadIcon(objectItem.icon ?? '');
const { getIcon } = useIcons();
const Icon = getIcon(objectItem.icon);
return (
<StyledObjectTableRow key={objectItem.namePlural} onClick={onClick}>

5
packages/twenty-front/src/modules/settings/data-model/object-edit/SettingsObjectIconSection.tsx
View File

@ -1,9 +1,9 @@
import styled from '@emotion/styled';
import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import { H2Title } from '@/ui/display/typography/components/H2Title';
import { IconPicker } from '@/ui/input/components/IconPicker';
import { useLazyLoadIcon } from '@/ui/input/hooks/useLazyLoadIcon';
import { Section } from '@/ui/layout/section/components/Section';
import ArrowRight from '../assets/ArrowRight.svg';
@ -36,7 +36,8 @@ export const SettingsObjectIconSection = ({
label,
onChange,
}: SettingsObjectIconSectionProps) => {
const { Icon } = useLazyLoadIcon(iconKey);
const { getIcon } = useIcons();
const Icon = getIcon(iconKey);
return (
<Section>

3
packages/twenty-front/src/modules/settings/data-model/objects/SettingsObjectDisabledMenuDropDown.tsx
View File

@ -1,6 +1,5 @@
import { IconDotsVertical } from '@/ui/display/icon';
import { IconArchiveOff, IconDotsVertical } from '@/ui/display/icon';
import { LightIconButton } from '@/ui/input/button/components/LightIconButton';
import { IconArchiveOff } from '@/ui/input/constants/icons';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenu } from '@/ui/layout/dropdown/components/DropdownMenu';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';