4a4e65fe4a
# Introduction closes https://github.com/twentyhq/core-team-issues/issues/591 Same than for `twenty-shared` made in https://github.com/twentyhq/twenty/pull/11083. ## TODO - [x] Manual migrate twenty-website twenty-ui imports ## What's next: - Generate barrel and migration script factorization within own package + tests - Refactoring using preconstruct ? TimeBox - Lint circular dependencies - Lint import from barrel and forbid them ### Preconstruct We need custom rollup plugins addition, but preconstruct does not expose its rollup configuration. It might be possible to handle this using the babel overrides. But was a big tunnel. We could give it a try afterwards ! ( allowing cjs interop and stuff like that ) Stuck to vite lib app Closed related PRs: - https://github.com/twentyhq/twenty/pull/11294 - https://github.com/twentyhq/twenty/pull/11203
87 lines
2.7 KiB
TypeScript
87 lines
2.7 KiB
TypeScript
import { currentUserState } from '@/auth/states/currentUserState';
|
|
import { useIsSettingsPage } from '@/navigation/hooks/useIsSettingsPage';
|
|
import { useIsPrefetchLoading } from '@/prefetch/hooks/useIsPrefetchLoading';
|
|
import { NavigationDrawerSectionTitleSkeletonLoader } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerSectionTitleSkeletonLoader';
|
|
import { isNavigationDrawerExpandedState } from '@/ui/navigation/states/isNavigationDrawerExpanded';
|
|
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
|
|
import styled from '@emotion/styled';
|
|
import React from 'react';
|
|
import { useRecoilValue } from 'recoil';
|
|
import { isDefined } from 'twenty-shared/utils';
|
|
import { Label } from 'twenty-ui/display';
|
|
|
|
const StyledTitle = styled.div`
|
|
align-items: center;
|
|
border-radius: ${({ theme }) => theme.border.radius.sm};
|
|
display: flex;
|
|
height: ${({ theme }) => theme.spacing(5)};
|
|
padding-left: ${({ theme }) => theme.spacing(1)};
|
|
padding-right: ${({ theme }) => theme.spacing(0.5)};
|
|
padding-top: ${({ theme }) => theme.spacing(1)};
|
|
padding-bottom: ${({ theme }) => theme.spacing(1)};
|
|
justify-content: space-between;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
background-color: ${({ theme }) => theme.background.transparent.light};
|
|
}
|
|
`;
|
|
|
|
const StyledLabelContainer = styled.div`
|
|
flex-grow: 1;
|
|
`;
|
|
|
|
type StyledRightIconProps = {
|
|
isMobile: boolean;
|
|
};
|
|
|
|
const StyledRightIcon = styled.div<StyledRightIconProps>`
|
|
cursor: pointer;
|
|
opacity: ${({ isMobile }) => (isMobile ? 1 : 0)};
|
|
|
|
.section-title-container:hover & {
|
|
opacity: 1;
|
|
}
|
|
`;
|
|
|
|
type NavigationDrawerSectionTitleProps = {
|
|
onClick?: () => void;
|
|
label: string;
|
|
rightIcon?: React.ReactNode;
|
|
};
|
|
|
|
export const NavigationDrawerSectionTitle = ({
|
|
onClick,
|
|
label,
|
|
rightIcon,
|
|
}: NavigationDrawerSectionTitleProps) => {
|
|
const isMobile = useIsMobile();
|
|
const isNavigationDrawerExpanded = useRecoilValue(
|
|
isNavigationDrawerExpandedState,
|
|
);
|
|
const isSettingsPage = useIsSettingsPage();
|
|
const currentUser = useRecoilValue(currentUserState);
|
|
const loading = useIsPrefetchLoading();
|
|
const handleTitleClick = (e: React.MouseEvent<HTMLDivElement>) => {
|
|
e.stopPropagation();
|
|
if (isDefined(onClick) && (isNavigationDrawerExpanded || isSettingsPage)) {
|
|
onClick();
|
|
}
|
|
};
|
|
|
|
if (loading && isDefined(currentUser)) {
|
|
return <NavigationDrawerSectionTitleSkeletonLoader />;
|
|
}
|
|
|
|
return (
|
|
<StyledTitle className="section-title-container">
|
|
<StyledLabelContainer onClick={handleTitleClick}>
|
|
<Label>{label}</Label>
|
|
</StyledLabelContainer>
|
|
{rightIcon && (
|
|
<StyledRightIcon isMobile={isMobile}>{rightIcon}</StyledRightIcon>
|
|
)}
|
|
</StyledTitle>
|
|
);
|
|
};
|