89e11b4626
# Introduction closes #10196 Initially fixing the `Account Owner` record field value should not be clickable and redirects on current page bug. This has been fixed computing whereas the current filed is a workspace member dynamically rendering a stale Chip components instead of an interactive one ## Refactor Refactored the `AvatarChip` `to` props logic to be scoped to lower level scope `Chip`. Now we have `LinkChip` `Chip`, `LinkAvatarChip` and `AvatarChip` all exported from twenty-ui. The caller has to determine which one to call from the design system ## New rule regarding chip links As discussed with @charlesBochet and @FelixMalfait A chip link will now ***always*** have `to` defined. ( and optionally an `onClick` ). `ChipLinks` cannot be used as buttons anymore ## Factorization Deleted the `RecordIndexRecordChip.tsx` file ( aka `RecordIdentifierChip` component ) that was duplicating some logic, refactored the `RecordChip` in order to handle what was covered by `RecordIdentifierChip` ## Conclusion As always any suggestions are more than welcomed ! Took few opinionated decision/refactor regarding nested long ternaries rendering `ReactNode` elements ## Misc https://github.com/user-attachments/assets/8ef11fb2-7ba6-4e96-bd59-b0be5a425156 --------- Co-authored-by: Mohammed Razak <mohammedrazak2001@gmail.com> Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
75 lines
1.8 KiB
TypeScript
75 lines
1.8 KiB
TypeScript
import { useTheme } from '@emotion/react';
|
|
import styled from '@emotion/styled';
|
|
import { Avatar } from '@ui/display/avatar/components/Avatar';
|
|
import { AvatarType } from '@ui/display/avatar/types/AvatarType';
|
|
import { IconComponent } from '@ui/display/icon/types/IconComponent';
|
|
import { isDefined } from 'twenty-shared';
|
|
import { Nullable } from 'vitest';
|
|
|
|
const StyledInvertedIconContainer = styled.div<{ backgroundColor: string }>`
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 4px;
|
|
background-color: ${({ backgroundColor }) => backgroundColor};
|
|
`;
|
|
|
|
export type AvatarChipsLeftComponentProps = {
|
|
name: string;
|
|
avatarUrl?: string;
|
|
avatarType?: Nullable<AvatarType>;
|
|
LeftIcon?: IconComponent;
|
|
LeftIconColor?: string;
|
|
isIconInverted?: boolean;
|
|
placeholderColorSeed?: string;
|
|
};
|
|
|
|
export const AvatarChipsLeftComponent: React.FC<
|
|
AvatarChipsLeftComponentProps
|
|
> = ({
|
|
LeftIcon,
|
|
placeholderColorSeed,
|
|
avatarType,
|
|
avatarUrl,
|
|
name,
|
|
isIconInverted = false,
|
|
LeftIconColor,
|
|
}) => {
|
|
const theme = useTheme();
|
|
if (!isDefined(LeftIcon)) {
|
|
return (
|
|
<Avatar
|
|
avatarUrl={avatarUrl}
|
|
placeholderColorSeed={placeholderColorSeed}
|
|
placeholder={name}
|
|
size="sm"
|
|
type={avatarType}
|
|
/>
|
|
);
|
|
}
|
|
|
|
if (isIconInverted) {
|
|
return (
|
|
<StyledInvertedIconContainer
|
|
backgroundColor={theme.background.invertedSecondary}
|
|
>
|
|
<LeftIcon
|
|
color="white"
|
|
size={theme.icon.size.md}
|
|
stroke={theme.icon.stroke.sm}
|
|
/>
|
|
</StyledInvertedIconContainer>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<LeftIcon
|
|
size={theme.icon.size.md}
|
|
stroke={theme.icon.stroke.sm}
|
|
color={LeftIconColor || 'currentColor'}
|
|
/>
|
|
);
|
|
};
|