Ling0925
/
buster
mirror of https://github.com/buster-so/buster.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Update AppSplitter.tsx

This commit is contained in:
Nate Kelley 2025-01-22 17:50:04 -07:00
parent 0ef19744d7
commit 77184a4f49
No known key found for this signature in database
GPG Key ID: FD90372AB8D98B4F
1 changed files with 20 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
web/src/components/layout/AppSplitter/AppSplitter.tsx
View File

@ -123,10 +123,16 @@ export const AppSplitter = forwardRef<
}, [preserveSide]); }, [preserveSide]);
const setSplitSizes = useMemoizedFn((newSizes: (number | string)[]) => { const setSplitSizes = useMemoizedFn((newSizes: (number | string)[]) => {
setSizes(newSizes); // Convert all sizes to percentage strings
const percentageSizes = newSizes.map((size) =>
typeof size === 'number' ? `${size * 100}%` : size
);
setSizes(percentageSizes);
if (preserveSide) { if (preserveSide) {
const key = createAutoSaveId(autoSaveId); const key = createAutoSaveId(autoSaveId);
const sizesString = preserveSide === 'left' ? [newSizes[0], 'auto'] : ['auto', newSizes[1]]; const sizesString =
preserveSide === 'left' ? [percentageSizes[0], 'auto'] : ['auto', percentageSizes[1]];
Cookies.set(key, JSON.stringify(sizesString), { expires: 365 }); Cookies.set(key, JSON.stringify(sizesString), { expires: 365 });
} }
}); });
@ -136,26 +142,29 @@ export const AppSplitter = forwardRef<
const leftPanelSize = _sizes[0]; const leftPanelSize = _sizes[0];
const rightPanelSize = _sizes[1]; const rightPanelSize = _sizes[1];
const currentSize = side === 'left' ? leftPanelSize : rightPanelSize; const currentSize = side === 'left' ? leftPanelSize : rightPanelSize;
console.log(_sizes); const isNumeric = typeof leftPanelSize === 'number';
// Convert percentage strings to numbers // Convert current size to number
const currentSizeNumber = parseFloat(String(currentSize).replace('%', '')); const currentSizeNumber = isNumeric
? ((currentSize as number) / (Number(leftPanelSize) + Number(rightPanelSize))) * 100
: parseFloat(String(currentSize).replace('%', ''));
// Convert target width to number (always in percentage scale)
const targetSizeNumber = parseFloat(width.replace('%', '')); const targetSizeNumber = parseFloat(width.replace('%', ''));
const NUMBER_OF_STEPS = 30;
const stepDuration = (duration * 1000) / NUMBER_OF_STEPS;
const startTime = performance.now(); const NUMBER_OF_STEPS = 24;
const stepDuration = (duration * 1000) / NUMBER_OF_STEPS;
for (let i = 0; i < NUMBER_OF_STEPS + 1; i++) { for (let i = 0; i < NUMBER_OF_STEPS + 1; i++) {
await new Promise((resolve) => await new Promise((resolve) =>
setTimeout(() => { setTimeout(() => {
const progress = i / NUMBER_OF_STEPS; // 0 to 1 const progress = i / NUMBER_OF_STEPS;
const easedProgress = easeInOutCubic(progress); const easedProgress = easeInOutCubic(progress);
const newSizeNumber = const newSizeNumber =
currentSizeNumber + (targetSizeNumber - currentSizeNumber) * easedProgress; currentSizeNumber + (targetSizeNumber - currentSizeNumber) * easedProgress;
const newSize = `${newSizeNumber}%`;
// Calculate the other side's size to maintain 100% total // Always use percentage strings
const newSize = `${newSizeNumber}%`;
const otherSize = `${100 - newSizeNumber}%`; const otherSize = `${100 - newSizeNumber}%`;
// Update both sides // Update both sides