testeranto
Version:
the AI powered BDD test framework for typescript projects
116 lines (115 loc) • 4.69 kB
JavaScript
import React, { useState, useRef, useEffect } from 'react';
export const Drawer = ({ position, isOpen, zIndex, onBringToFront, title, children }) => {
const [size, setSize] = useState(position === 'bottom' ? 200 : 300);
const [isResizing, setIsResizing] = useState(false);
const [dragStart, setDragStart] = useState({ x: 0, y: 0, size: 0 });
const drawerRef = useRef(null);
const handleMouseDown = (e) => {
setIsResizing(true);
setDragStart({
x: e.clientX,
y: e.clientY,
size: size
});
onBringToFront();
e.preventDefault();
};
useEffect(() => {
const handleMouseMove = (e) => {
if (!isResizing)
return;
switch (position) {
case 'left':
setSize(Math.max(40, Math.min(window.innerWidth - 100, dragStart.size + (e.clientX - dragStart.x))));
break;
case 'right':
setSize(Math.max(40, Math.min(window.innerWidth - 100, dragStart.size - (e.clientX - dragStart.x))));
break;
case 'bottom':
setSize(Math.max(40, Math.min(window.innerHeight - 100, dragStart.size - (e.clientY - dragStart.y))));
break;
}
};
const handleMouseUp = () => {
setIsResizing(false);
};
if (isResizing) {
window.addEventListener('mousemove', handleMouseMove);
window.addEventListener('mouseup', handleMouseUp);
document.body.style.cursor = position === 'bottom' ? 'ns-resize' : 'ew-resize';
document.body.style.userSelect = 'none';
}
return () => {
window.removeEventListener('mousemove', handleMouseMove);
window.removeEventListener('mouseup', handleMouseUp);
document.body.style.cursor = '';
document.body.style.userSelect = '';
};
}, [isResizing, dragStart, position]);
const getPositionStyles = () => {
switch (position) {
case 'left':
return {
top: 0,
left: 0,
height: '100%',
width: `${size}px`,
transform: 'none'
};
case 'right':
return {
top: 0,
right: 0,
height: '100%',
width: `${size}px`,
transform: 'none'
};
case 'bottom':
return {
bottom: 0,
left: 0,
width: '100%',
height: `${size}px`,
transform: 'none'
};
default:
return {};
}
};
// Determine which edge to show the drag handle based on position
const getDragEdgeStyle = () => {
switch (position) {
case 'left':
return {
right: '0',
top: '0',
height: '100%',
width: '8px',
cursor: 'ew-resize'
};
case 'right':
return {
left: '0',
top: '0',
height: '100%',
width: '8px',
cursor: 'ew-resize'
};
case 'bottom':
return {
top: '0',
left: '0',
width: '100%',
height: '8px',
cursor: 'ns-resize'
};
default:
return {};
}
};
return (React.createElement("div", { ref: drawerRef, className: `position-absolute bg-light border ${isResizing ? 'user-select-none' : ''}`, style: Object.assign(Object.assign({}, getPositionStyles()), { zIndex, transition: isResizing ? 'none' : 'all 0.3s ease', overflow: 'hidden' }) },
React.createElement("div", { className: "d-flex justify-content-between align-items-center p-2 border-bottom bg-white", onMouseDown: () => onBringToFront(), style: { cursor: 'move' } },
React.createElement("span", null, title)),
React.createElement("div", { className: "h-100", style: { overflow: 'auto' } }, children),
React.createElement("div", { style: Object.assign(Object.assign({ position: 'absolute' }, getDragEdgeStyle()), { backgroundColor: 'rgba(0, 0, 0, 0.2)' }), onMouseDown: handleMouseDown, className: "drag-edge" })));
};