Migrate to twenty-ui - layout/animated-placeholder (#7794)
This PR was created by [GitStart](https://gitstart.com/) to address the requirements from this ticket: [TWNTY-7531](https://clients.gitstart.com/twenty/5449/tickets/TWNTY-7531). --- ### Description - Migrate the `animated-placeholder` to `twenty-ui` and update all imports.\ \ Fixes twentyhq/private-issues#87 Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com> Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-app[bot]
committed by
GitHub
GitHub
parent
bf0a059751
commit
dfcf3ef879
@ -1,110 +0,0 @@
|
||||
import { useTheme } from '@emotion/react';
|
||||
import styled from '@emotion/styled';
|
||||
import { animate, motion, useMotionValue, useTransform } from 'framer-motion';
|
||||
import { useEffect } from 'react';
|
||||
|
||||
import { BACKGROUND } from '@/ui/layout/animated-placeholder/constants/Background';
|
||||
import { DARK_BACKGROUND } from '@/ui/layout/animated-placeholder/constants/DarkBackground';
|
||||
import { DARK_MOVING_IMAGE } from '@/ui/layout/animated-placeholder/constants/DarkMovingImage';
|
||||
import { MOVING_IMAGE } from '@/ui/layout/animated-placeholder/constants/MovingImage';
|
||||
|
||||
const StyledContainer = styled.div`
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
interface StyledImageProps {
|
||||
type: string;
|
||||
}
|
||||
|
||||
const StyledBackgroundImage = styled.img<StyledImageProps>`
|
||||
max-height: ${({ type }) =>
|
||||
type === 'error500' || type === 'error404' ? '245px' : '160px'};
|
||||
max-width: ${({ type }) =>
|
||||
type === 'error500' || type === 'error404' ? '245px' : '160px'};
|
||||
`;
|
||||
|
||||
const StyledMovingImage = styled(motion.img)<StyledImageProps>`
|
||||
position: absolute;
|
||||
max-width: ${({ type }) =>
|
||||
type === 'error500' || type === 'error404' ? '185px' : '130px'};
|
||||
max-height: ${({ type }) =>
|
||||
type === 'error500' || type === 'error404' ? '185px' : '130px'};
|
||||
z-index: 2;
|
||||
`;
|
||||
|
||||
export type AnimatedPlaceholderType =
|
||||
| keyof typeof BACKGROUND
|
||||
| keyof typeof MOVING_IMAGE;
|
||||
|
||||
interface AnimatedPlaceholderProps {
|
||||
type: AnimatedPlaceholderType;
|
||||
}
|
||||
|
||||
const AnimatedPlaceholder = ({ type }: AnimatedPlaceholderProps) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const x = useMotionValue(window.innerWidth / 2);
|
||||
const y = useMotionValue(window.innerHeight / 2);
|
||||
|
||||
const translateX = useTransform(x, [0, window.innerWidth], [-2, 2]);
|
||||
const translateY = useTransform(y, [0, window.innerHeight], [-2, 2]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleMove = (event: MouseEvent | TouchEvent) => {
|
||||
const clientX =
|
||||
'touches' in event ? event.touches[0].clientX : event.clientX;
|
||||
const clientY =
|
||||
'touches' in event ? event.touches[0].clientY : event.clientY;
|
||||
|
||||
x.set(clientX);
|
||||
y.set(clientY);
|
||||
};
|
||||
|
||||
const handleLeave = () => {
|
||||
animate(x, window.innerWidth / 2, {
|
||||
type: 'spring',
|
||||
stiffness: 100,
|
||||
damping: 10,
|
||||
});
|
||||
animate(y, window.innerHeight / 2, {
|
||||
type: 'spring',
|
||||
stiffness: 100,
|
||||
damping: 10,
|
||||
});
|
||||
};
|
||||
|
||||
window.addEventListener('mousemove', handleMove);
|
||||
window.addEventListener('touchmove', handleMove);
|
||||
window.document.addEventListener('mouseleave', handleLeave);
|
||||
|
||||
return () => {
|
||||
window.removeEventListener('mousemove', handleMove);
|
||||
window.removeEventListener('touchmove', handleMove);
|
||||
window.document.removeEventListener('mouseleave', handleLeave);
|
||||
};
|
||||
}, [x, y]);
|
||||
|
||||
return (
|
||||
<StyledContainer>
|
||||
<StyledBackgroundImage
|
||||
src={theme.name === 'dark' ? DARK_BACKGROUND[type] : BACKGROUND[type]}
|
||||
alt="Background"
|
||||
type={type}
|
||||
/>
|
||||
<StyledMovingImage
|
||||
src={
|
||||
theme.name === 'dark' ? DARK_MOVING_IMAGE[type] : MOVING_IMAGE[type]
|
||||
}
|
||||
alt="Moving"
|
||||
style={{ translateX, translateY }}
|
||||
transition={{ type: 'spring', stiffness: 100, damping: 10 }}
|
||||
type={type}
|
||||
/>
|
||||
</StyledContainer>
|
||||
);
|
||||
};
|
||||
|
||||
export default AnimatedPlaceholder;
|
||||
@ -1,55 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
import { motion } from 'framer-motion';
|
||||
|
||||
const StyledEmptyContainer = styled(motion.div)`
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.spacing(6)};
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
export { StyledEmptyContainer as AnimatedPlaceholderEmptyContainer };
|
||||
|
||||
export const EMPTY_PLACEHOLDER_TRANSITION_PROPS = {
|
||||
initial: { opacity: 0 },
|
||||
animate: { opacity: 1 },
|
||||
transition: {
|
||||
duration: 0.15,
|
||||
},
|
||||
};
|
||||
|
||||
const StyledEmptyTextContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.spacing(2)};
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export { StyledEmptyTextContainer as AnimatedPlaceholderEmptyTextContainer };
|
||||
|
||||
const StyledEmptyTitle = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
font-size: ${({ theme }) => theme.font.size.lg};
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
`;
|
||||
|
||||
export { StyledEmptyTitle as AnimatedPlaceholderEmptyTitle };
|
||||
|
||||
const StyledEmptySubTitle = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
font-size: ${({ theme }) => theme.font.size.sm};
|
||||
font-weight: ${({ theme }) => theme.font.weight.regular};
|
||||
line-height: ${({ theme }) => theme.text.lineHeight.lg};
|
||||
max-height: 2.8em;
|
||||
overflow: hidden;
|
||||
width: 50%;
|
||||
`;
|
||||
|
||||
export { StyledEmptySubTitle as AnimatedPlaceholderEmptySubTitle };
|
||||
@ -1,46 +0,0 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
const StyledErrorContainer = styled.div`
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.spacing(8)};
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
`;
|
||||
|
||||
export { StyledErrorContainer as AnimatedPlaceholderErrorContainer };
|
||||
|
||||
const StyledErrorTextContainer = styled.div`
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: ${({ theme }) => theme.spacing(4)};
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
export { StyledErrorTextContainer as AnimatedPlaceholderErrorTextContainer };
|
||||
|
||||
const StyledErrorTitle = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.primary};
|
||||
font-size: ${({ theme }) => theme.font.size.xl};
|
||||
font-weight: ${({ theme }) => theme.font.weight.semiBold};
|
||||
line-height: ${({ theme }) => theme.text.lineHeight.lg};
|
||||
`;
|
||||
|
||||
export { StyledErrorTitle as AnimatedPlaceholderErrorTitle };
|
||||
|
||||
const StyledErrorSubTitle = styled.div`
|
||||
color: ${({ theme }) => theme.font.color.tertiary};
|
||||
font-size: ${({ theme }) => theme.font.size.xs};
|
||||
font-weight: ${({ theme }) => theme.font.weight.regular};
|
||||
line-height: ${({ theme }) => theme.text.lineHeight.md};
|
||||
max-height: 2.4em;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
export { StyledErrorSubTitle as AnimatedPlaceholderErrorSubTitle };
|
||||
@ -1,16 +0,0 @@
|
||||
export const BACKGROUND: Record<string, string> = {
|
||||
noFile: '/images/placeholders/background/no_file_bg.png',
|
||||
noNote: '/images/placeholders/background/no_note_bg.png',
|
||||
noRecord: '/images/placeholders/background/no_record_bg.png',
|
||||
noMatchRecord: '/images/placeholders/background/no_match_record_bg.png',
|
||||
noTask: '/images/placeholders/background/no_task_bg.png',
|
||||
errorIndex: '/images/placeholders/background/error_index_bg.png',
|
||||
emptyTimeline: '/images/placeholders/background/empty_timeline_bg.png',
|
||||
loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
|
||||
loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
|
||||
emptyFunctions: '/images/placeholders/background/empty_functions_bg.png',
|
||||
emptyInbox: '/images/placeholders/background/empty_inbox_bg.png',
|
||||
error404: '/images/placeholders/background/404_bg.png',
|
||||
error500: '/images/placeholders/background/500_bg.png',
|
||||
noDeletedRecord: '/images/placeholders/background/no_deleted_record_bg.png',
|
||||
};
|
||||
@ -1,17 +0,0 @@
|
||||
export const DARK_BACKGROUND: Record<string, string> = {
|
||||
noFile: '/images/placeholders/dark-background/no_file_bg.png',
|
||||
noNote: '/images/placeholders/dark-background/no_note_bg.png',
|
||||
noRecord: '/images/placeholders/dark-background/no_record_bg.png',
|
||||
noMatchRecord: '/images/placeholders/dark-background/no_match_record_bg.png',
|
||||
noTask: '/images/placeholders/dark-background/no_task_bg.png',
|
||||
errorIndex: '/images/placeholders/dark-background/error_index_bg.png',
|
||||
emptyTimeline: '/images/placeholders/dark-background/empty_timeline_bg.png',
|
||||
emptyInbox: '/images/placeholders/dark-background/empty_inbox_bg.png',
|
||||
error404: '/images/placeholders/dark-background/404_bg.png',
|
||||
error500: '/images/placeholders/dark-background/500_bg.png',
|
||||
loadingMessages: '/images/placeholders/background/loading_messages_bg.png',
|
||||
loadingAccounts: '/images/placeholders/background/loading_accounts_bg.png',
|
||||
emptyFunctions: '/images/placeholders/dark-background/empty_functions_bg.png',
|
||||
noDeletedRecord:
|
||||
'/images/placeholders/dark-background/no_deleted_record_bg.png',
|
||||
};
|
||||
@ -1,17 +0,0 @@
|
||||
export const DARK_MOVING_IMAGE: Record<string, string> = {
|
||||
noFile: '/images/placeholders/dark-moving-image/no_file.png',
|
||||
noNote: '/images/placeholders/dark-moving-image/no_note.png',
|
||||
noRecord: '/images/placeholders/dark-moving-image/no_record.png',
|
||||
noMatchRecord: '/images/placeholders/dark-moving-image/no_match_record.png',
|
||||
noTask: '/images/placeholders/dark-moving-image/no_task.png',
|
||||
errorIndex: '/images/placeholders/dark-moving-image/error_index.png',
|
||||
emptyTimeline: '/images/placeholders/dark-moving-image/empty_timeline.png',
|
||||
emptyInbox: '/images/placeholders/dark-moving-image/empty_inbox.png',
|
||||
error404: '/images/placeholders/dark-moving-image/404.png',
|
||||
error500: '/images/placeholders/dark-moving-image/500.png',
|
||||
loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
|
||||
loadingAccounts: '/images/placeholders/moving-image/loading_accounts.png',
|
||||
emptyFunctions: '/images/placeholders/dark-moving-image/empty_functions.png',
|
||||
noDeletedRecord:
|
||||
'/images/placeholders/dark-moving-image/no_deleted_record.png',
|
||||
};
|
||||
@ -1,16 +0,0 @@
|
||||
export const MOVING_IMAGE: Record<string, string> = {
|
||||
noFile: '/images/placeholders/moving-image/no_file.png',
|
||||
noNote: '/images/placeholders/moving-image/no_note.png',
|
||||
noRecord: '/images/placeholders/moving-image/no_record.png',
|
||||
noMatchRecord: '/images/placeholders/moving-image/no_match_record.png',
|
||||
noTask: '/images/placeholders/moving-image/no_task.png',
|
||||
errorIndex: '/images/placeholders/moving-image/error_index.png',
|
||||
emptyTimeline: '/images/placeholders/moving-image/empty_timeline.png',
|
||||
loadingMessages: '/images/placeholders/moving-image/loading_messages.png',
|
||||
loadingAccounts: '/images/placeholders/moving-image/loading_accounts.png',
|
||||
emptyFunctions: '/images/placeholders/moving-image/empty_functions.png',
|
||||
emptyInbox: '/images/placeholders/moving-image/empty_inbox.png',
|
||||
error404: '/images/placeholders/moving-image/404.png',
|
||||
error500: '/images/placeholders/moving-image/500.png',
|
||||
noDeletedRecord: '/images/placeholders/moving-image/no_deleted_record.png',
|
||||
};
|
||||
Reference in New Issue
Block a user