Jayden/AFFiNE-Mirror
1
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-02-14 13:25:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

remove some timer

Browse Source
This commit is contained in:
EYHN
2024-09-26 20:33:44 +08:00
parent 1d8b1aa978
commit 5c836df730
12 changed files with 124 additions and 233 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/frontend/component/src/components/resize-panel/resize-panel.css.ts
View File

@@ -16,26 +16,28 @@ export const root = style({
width: panelWidthVar,
minWidth: panelWidthVar,
height: '100%',
zIndex: 4,
transform: 'translateX(0)',
maxWidth: '50%',
selectors: {
'&[data-is-floating="true"]': {
position: 'absolute',
width: `calc(${panelWidthVar})`,
zIndex: 4,
},
'&[data-open="true"]': {
maxWidth: '50%',
},
'&[data-open="false"][data-handle-position="right"]': {
marginLeft: `calc(${panelWidthVar} * -1)`,
},
'&[data-open="false"][data-handle-position="left"]': {
marginRight: `calc(${panelWidthVar} * -1)`,
},
'&[data-enable-animation="true"][data-is-floating="false"]': {
transition: `margin-left ${animationTimeout} .05s, margin-right ${animationTimeout} .05s, width ${animationTimeout} .05s,background ${animationTimeout} .05s,scale ${animationTimeout} .05s`,
},
'&[data-enable-animation="true"][data-is-floating="true"]': {
transition: 'margin-left 0.5s cubic-bezier(0.22,1,0.36,1)',
'&[data-open="false"][data-handle-position="right"],&[data-is-floating="true"][data-handle-position="right"]':
{
marginLeft: `calc(${panelWidthVar} * -1)`,
},
'&[data-open="false"][data-handle-position="left"],&[data-is-floating="true"][data-handle-position="left"]':
{
marginRight: `calc(${panelWidthVar} * -1)`,
},
'&[data-open="true"][data-handle-position="right"][data-is-floating="true"]':
{
transform: `translateX(${panelWidthVar})`,
},
'&[data-open="true"][data-handle-position="left"][data-is-floating="true"]':
{
transform: `translateX(-${panelWidthVar})`,
},
'&[data-enable-animation="true"]': {
transition: `margin-left ${animationTimeout}, margin-right ${animationTimeout}, transform ${animationTimeout}, background ${animationTimeout}`,
},
'&[data-transition-state="exited"]': {
// avoid focus on hidden panel

23
packages/frontend/component/src/components/resize-panel/resize-panel.tsx
View File

@@ -1,13 +1,6 @@
import { assignInlineVars } from '@vanilla-extract/dynamic';
import clsx from 'clsx';
import {
forwardRef,
useCallback,
useEffect,
useLayoutEffect,
useRef,
useState,
} from 'react';
import { forwardRef, useCallback, useLayoutEffect, useRef } from 'react';
import { useTransition } from 'react-transition-state';
import * as styles from './resize-panel.css';
@@ -129,17 +122,6 @@ const ResizeHandle = ({
);
};
// delay initial animation to avoid flickering
function useEnableAnimation() {
const [enable, setEnable] = useState(false);
useEffect(() => {
window.setTimeout(() => {
setEnable(true);
}, 500);
}, []);
return enable;
}
const animationTimeout = 300;
export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
@@ -152,7 +134,7 @@ export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
maxWidth,
width,
floating,
enableAnimation: _enableAnimation = true,
enableAnimation = true,
open,
unmountOnExit,
onOpen,
@@ -165,7 +147,6 @@ export const ResizePanel = forwardRef<HTMLDivElement, ResizePanelProps>(
},
ref
) {
const enableAnimation = useEnableAnimation() && _enableAnimation;
const safeWidth = Math.min(maxWidth, Math.max(minWidth, width));
const [{ status }, toggle] = useTransition({
timeout: animationTimeout,