starred/yaak-mountain-loop
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-03-18 07:23:51 +01:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Animate sidebar transition

Browse Source
This commit is contained in:
Gregory Schier
2023-03-25 21:31:52 -07:00
parent ae4a43f406
commit e3ef29bdfd
5 changed files with 80 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src-web/components/RequestResponse.tsx
View File

@@ -1,9 +1,8 @@
import useResizeObserver from '@react-hook/resize-observer';
import classnames from 'classnames';
import type { CSSProperties, MouseEvent as ReactMouseEvent } from 'react';
import React, { memo, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
import { useWindowSize } from 'react-use';
import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
import { useKeyValue } from '../hooks/useKeyValue';
import { useSidebarDisplay } from '../hooks/useSidebarDisplay';
import { clamp } from '../lib/clamp';
import { RequestPane } from './RequestPane';
import { ResizeHandle } from './ResizeHandle';
@@ -19,7 +18,7 @@ const drag = { gridArea: 'drag' };
const DEFAULT = 0.5;
const MIN_WIDTH_PX = 10;
const MIN_HEIGHT_PX = 100;
const MIN_HEIGHT_PX = 30;
const STACK_VERTICAL_WIDTH = 600;
export const RequestResponse = memo(function RequestResponse({ style }: Props) {
@@ -34,13 +33,9 @@ export const RequestResponse = memo(function RequestResponse({ style }: Props) {
null,
);
const windowSize = useWindowSize();
const sidebar = useSidebarDisplay();
useLayoutEffect(() => {
if (!containerRef.current) return;
const { width } = containerRef.current.getBoundingClientRect();
setVertical(width < STACK_VERTICAL_WIDTH);
}, [containerRef.current, windowSize, sidebar.width, sidebar.hidden]);
useResizeObserver(containerRef, ({ contentRect }) => {
setVertical(contentRect.width < STACK_VERTICAL_WIDTH);
});
const styles = useMemo<CSSProperties>(
() => ({