Skip to content

Commit

Permalink
add-resize-handle
Browse files Browse the repository at this point in the history
增加侧边栏拖拽调整宽度
  • Loading branch information
ioahc committed Nov 14, 2024
1 parent 03d9fcd commit 2443e6b
Show file tree
Hide file tree
Showing 2 changed files with 40 additions and 1 deletion.
8 changes: 7 additions & 1 deletion src/App.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ import { Minus, Maximize2, X, Palette, InfoIcon } from 'lucide-react';
import { ColorCard } from './components/ColorCard';
import { Controls } from './components/Controls';
import { getColorName } from './utils/colorNames';
import { ResizeHandle } from './components/ResizeHandle';

interface ColorData {
name: string;
Expand All @@ -18,6 +19,7 @@ function App() {
const [selectedColorIndex, setSelectedColorIndex] = useState<number | null>(null);
const [isPopoverVisible, setIsPopoverVisible] = useState(false);
const [colorMode, setColorMode] = useState<'none' | 'hsl' | 'rgb' | 'hex'>('none');
const [asideWidth, setAsideWidth] = useState(420);

const defaultColors: ColorData[] = [
{ name: 'Red', value: 'hsl(0, 100%, 50%)' },
Expand Down Expand Up @@ -193,7 +195,10 @@ function App() {
</header>

<div className="flex pt-[72px] h-screen">
<aside className="sticky top-[72px] min-w-[420px] max-w-[600px] w-[30vw] h-[calc(100vh-72px)] overflow-y-auto p-6">
<aside
className="sticky top-[72px] min-w-[420px] max-w-[600px] w-[30vw] h-[calc(100vh-72px)] overflow-y-auto p-6"
style={{ width: asideWidth }}
>
<div className="space-y-6">
<div className="bg-white p-4 rounded-lg shadow-sm">
<div className="flex items-center justify-between mb-4">
Expand Down Expand Up @@ -276,6 +281,7 @@ function App() {
setFontSize={setFontSize}
/>
</div>
<ResizeHandle onResize={setAsideWidth} />
</aside>

<main className="flex-1 p-6">
Expand Down
33 changes: 33 additions & 0 deletions src/components/ResizeHandle.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { useCallback, useEffect } from 'react';

Check failure on line 1 in src/components/ResizeHandle.tsx

View workflow job for this annotation

GitHub Actions / build-and-deploy

'useEffect' is declared but its value is never read.

interface ResizeHandleProps {
onResize: (width: number) => void;
}

export const ResizeHandle: React.FC<ResizeHandleProps> = ({ onResize }) => {
const handleDrag = useCallback((e: MouseEvent) => {
const width = e.clientX;
if (width >= 420 && width <= 600) {
onResize(width);
}
}, [onResize]);

const handleDragEnd = useCallback(() => {
document.removeEventListener('mousemove', handleDrag);
document.removeEventListener('mouseup', handleDragEnd);
document.body.style.cursor = 'default';
}, [handleDrag]);

const startResize = useCallback(() => {
document.addEventListener('mousemove', handleDrag);
document.addEventListener('mouseup', handleDragEnd);
document.body.style.cursor = 'ew-resize';
}, [handleDrag, handleDragEnd]);

return (
<div
className="absolute right-0 top-0 w-1 h-full cursor-ew-resize hover:bg-blue-500/50 transition-colors"
onMouseDown={startResize}
/>
);
};

0 comments on commit 2443e6b

Please sign in to comment.