toeverything/AFFiNE
1
1
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2024-12-24 19:02:28 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor: add content to be selectable and remove swipe gesture (#3923)

Browse Source 
Co-authored-by: JimmFly <yangjinfei001@gmail.com>
This commit is contained in:
Alex Yang 2023-08-23 13:22:15 -05:00 committed by GitHub
parent 4a003878e2
commit 301f3219e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 18 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
packages/component/src/components/notification-center/index.css.ts
View File

@ -2,25 +2,7 @@
// License on the MIT
// https://github.com/emilkowalski/sonner/blob/5cb703edc108a23fd74979235c2f3c4005edd2a7/src/styles.css
import {
globalStyle,
keyframes,
style,
styleVariants,
} from '@vanilla-extract/css';
const swipeOut = keyframes({
'0%': {
transform:
'translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount)))',
opacity: 1,
},
'100%': {
transform:
'translateY(calc(var(--lift) * var(--offset) + var(--swipe-amount) + var(--lift) * -100%))',
opacity: 0,
},
});
import { globalStyle, style, styleVariants } from '@vanilla-extract/css';
export const notificationCenterViewportStyle = style({
position: 'fixed',
@ -62,16 +44,7 @@ export const notificationStyle = style({
opacity: '0 !important',
pointerEvents: 'none',
},
'&[data-swiping=true]::before': {
content: '""',
position: 'absolute',
left: '0',
right: '0',
top: '50%',
height: '100%',
transform: 'scaleY(3) translateY(-50%)',
},
'&[data-swiping=false][data-removed=true]::before': {
'&[data-removed=true]::before': {
content: '""',
position: 'absolute',
inset: '0',
@ -98,38 +71,29 @@ export const notificationStyle = style({
'--y': 'translateY(calc(var(--lift) * var(--offset)))',
},
},
'&[data-removed=true][data-front=true][data-swipe-out=false]': {
'&[data-removed=true][data-front=true]': {
opacity: 0,
vars: {
'--y': 'translateY(calc(var(--lift) * -100%))',
},
},
'&[data-removed=true][data-front=false][data-swipe-out=false][data-expanded=true]':
{
opacity: 0,
vars: {
'--y':
'translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%))',
},
'&[data-removed=true][data-front=false][data-expanded=true]': {
opacity: 0,
vars: {
'--y':
'translateY(calc(var(--lift) * var(--offset) + var(--lift) * -100%))',
},
'&[data-removed=true][data-front=false][data-swipe-out=false][data-expanded=false] ':
{
transition: 'transform 500ms, opacity 200ms',
opacity: 0,
vars: {
'--y': 'translateY(40%)',
},
},
'&[data-removed=true][data-front=false][data-expanded=false] ': {
transition: 'transform 500ms, opacity 200ms',
opacity: 0,
vars: {
'--y': 'translateY(40%)',
},
},
'&[data-removed=true][data-front=false]::before ': {
height: 'calc(var(--initial-height) + 20%)',
},
'&[data-swiping=true]': {
transform: 'var(--y) translateY(var(--swipe-amount, 0px))',
transition: 'none',
},
'&[data-swipe-out=true]': {
animation: `${swipeOut} 0.3s ease-in-out forwards`,
},
},
vars: {
'--y': 'translateY(100%)',

49
packages/component/src/components/notification-center/index.tsx
View File

@ -73,8 +73,6 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
// const setNotificationRemoveAnimation = useSetAtom(notificationRemoveAnimationAtom);
const [mounted, setMounted] = useState<boolean>(false);
const [removed, setRemoved] = useState<boolean>(false);
const [swiping, setSwiping] = useState<boolean>(false);
const [swipeOut, setSwipeOut] = useState<boolean>(false);
const [offsetBeforeRemove, setOffsetBeforeRemove] = useState<number>(0);
const [initialHeight, setInitialHeight] = useState<number>(0);
const [animationKey, setAnimationKey] = useState(0);
@ -93,7 +91,6 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
);
const duration = notification.timeout || 3000;
const offset = useRef(0);
const pointerStartYRef = useRef<number | null>(null);
const notificationsHeightBefore = useMemo(() => {
return heights.reduce((prev, curr, reducerIndex) => {
@ -235,8 +232,6 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
data-visible={isVisible}
data-index={index}
data-front={isFront}
data-swiping={swiping}
data-swipe-out={swipeOut}
data-expanded={expand}
onMouseEnter={() => {
setExpand(true);
@ -247,6 +242,8 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
onMouseLeave={() => {
setExpand(false);
}}
onSwipeEnd={event => event.preventDefault()}
onSwipeMove={event => event.preventDefault()}
style={
{
'--index': index,
@ -254,49 +251,9 @@ function NotificationCard(props: NotificationCardProps): ReactElement {
'--z-index': notifications.length - index,
'--offset': `${removed ? offsetBeforeRemove : offset.current}px`,
'--initial-height': `${initialHeight}px`,
userSelect: 'auto',
} as React.CSSProperties
}
onPointerDown={event => {
setOffsetBeforeRemove(offset.current);
(event.target as HTMLElement).setPointerCapture(event.pointerId);
if ((event.target as HTMLElement).tagName === 'BUTTON') return;
setSwiping(true);
pointerStartYRef.current = event.clientY;
}}
onPointerUp={() => {
if (swipeOut) return;
const swipeAmount = Number(
notificationRef.current?.style
.getPropertyValue('--swipe-amount')
.replace('px', '') || 0
);
if (Math.abs(swipeAmount) >= 20) {
setOffsetBeforeRemove(offset.current);
onClickRemove();
setSwipeOut(true);
return;
}
notificationRef.current?.style.setProperty('--swipe-amount', '0px');
pointerStartYRef.current = null;
setSwiping(false);
}}
onPointerMove={event => {
if (!pointerStartYRef.current) return;
const yPosition = event.clientY - pointerStartYRef.current;
const isAllowedToSwipe = yPosition > 0;
if (!isAllowedToSwipe) {
notificationRef.current?.style.setProperty('--swipe-amount', '0px');
return;
}
notificationRef.current?.style.setProperty(
'--swipe-amount',
`${yPosition}px`
);
}}
>
<div
className={clsx({