@designbasekorea/ui 0.1.28 → 0.1.29

package/dist/index.esm.js

@@ -9628,81 +9628,104 @@ const Skeleton = forwardRef(({ variant = 'text', size = 'm', width, height, anim
 });
 Skeleton.displayName = 'Skeleton';
 
-const SplitView = ({ direction = 'horizontal', mode = 'ratio', initialSplit = 0.5, firstSize = 200, minSize = 100, maxSize, splitterSize = 4, splitterColor, splitterHoverColor, first, second, fullWidth = false, fullHeight = false, className, }) => {
-    const [split, setSplit] = useState(initialSplit);
-    const [isDragging, setIsDragging] = useState(false);
+const SplitView = ({ direction = 'horizontal', mode = 'ratio', panels, splitterSize = 4, splitterColor, splitterHoverColor, fullWidth = false, fullHeight = false, className, 
+// Legacy props
+first, second, initialSplit = 0.5, firstSize = 200, minSize = 100, maxSize, }) => {
+    // Legacy mode: first/second props를 panels로 변환
+    const effectivePanels = panels || [
+        {
+            content: first,
+            size: mode === 'fixed' ? firstSize : initialSplit,
+            minSize,
+            maxSize,
+            resizable: true,
+        },
+        {
+            content: second,
+            resizable: false, // 마지막 패널은 flex로 채움
+        },
+    ];
+    // 각 패널의 현재 크기 상태
+    const [panelSizes, setPanelSizes] = useState(() => effectivePanels.map((panel, index) => {
+        if (panel.size !== undefined)
+            return panel.size;
+        if (mode === 'ratio')
+            return 1 / effectivePanels.length;
+        return 200; // 기본 고정 크기
+    }));
+    const [draggingIndex, setDraggingIndex] = useState(null);
     const containerRef = useRef(null);
-    const splitterRef = useRef(null);
-    // 분할 비율 또는 고정 크기 계산
-    const getSplitValue = useCallback(() => {
-        if (mode === 'fixed') {
-            return firstSize;
-        }
-        return Math.max(0, Math.min(1, split)) * 100;
-    }, [mode, split, firstSize]);
     // 드래그 시작
-    const handleMouseDown = useCallback((e) => {
+    const handleMouseDown = useCallback((index) => (e) => {
         e.preventDefault();
-        setIsDragging(true);
+        setDraggingIndex(index);
         document.body.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
         document.body.style.userSelect = 'none';
     }, [direction]);
     // 드래그 중
     const handleMouseMove = useCallback((e) => {
-        if (!isDragging || !containerRef.current)
+        if (draggingIndex === null || !containerRef.current)
             return;
         const containerRect = containerRef.current.getBoundingClientRect();
-        let newSplit;
+        const panel = effectivePanels[draggingIndex];
+        let newSize;
         if (direction === 'horizontal') {
             const containerWidth = containerRect.width;
             const mouseX = e.clientX - containerRect.left;
+            // 이전 패널들의 총 크기 계산
+            let offsetX = 0;
+            for (let i = 0; i < draggingIndex; i++) {
+                const size = panelSizes[i];
+                offsetX += mode === 'fixed' ? size : (size * containerWidth);
+                offsetX += splitterSize; // 분할선 크기 추가
+            }
+            const rawSize = mouseX - offsetX;
             if (mode === 'fixed') {
-                // 고정 크기 모드: 픽셀 값으로 설정
-                newSplit = Math.max(minSize, Math.min(maxSize || containerWidth - minSize, mouseX));
-                setSplit(newSplit);
+                newSize = Math.max(panel.minSize || 0, Math.min(panel.maxSize || containerWidth, rawSize));
             }
             else {
-                // 비율 모드: 0-1 값으로 설정
-                newSplit = mouseX / containerWidth;
-                // 최소/최대 크기 제한
-                if (minSize || maxSize) {
-                    const minSplit = minSize ? minSize / containerWidth : 0;
-                    const maxSplit = maxSize ? maxSize / containerWidth : 1;
-                    newSplit = Math.max(minSplit, Math.min(maxSplit, newSplit));
-                }
-                setSplit(newSplit);
+                newSize = rawSize / containerWidth;
+                const minSplit = panel.minSize ? panel.minSize / containerWidth : 0;
+                const maxSplit = panel.maxSize ? panel.maxSize / containerWidth : 1;
+                newSize = Math.max(minSplit, Math.min(maxSplit, newSize));
             }
         }
         else {
             const containerHeight = containerRect.height;
             const mouseY = e.clientY - containerRect.top;
+            // 이전 패널들의 총 크기 계산
+            let offsetY = 0;
+            for (let i = 0; i < draggingIndex; i++) {
+                const size = panelSizes[i];
+                offsetY += mode === 'fixed' ? size : (size * containerHeight);
+                offsetY += splitterSize; // 분할선 크기 추가
+            }
+            const rawSize = mouseY - offsetY;
             if (mode === 'fixed') {
-                // 고정 크기 모드: 픽셀 값으로 설정
-                newSplit = Math.max(minSize, Math.min(maxSize || containerHeight - minSize, mouseY));
-                setSplit(newSplit);
+                newSize = Math.max(panel.minSize || 0, Math.min(panel.maxSize || containerHeight, rawSize));
             }
             else {
-                // 비율 모드: 0-1 값으로 설정
-                newSplit = mouseY / containerHeight;
-                // 최소/최대 크기 제한
-                if (minSize || maxSize) {
-                    const minSplit = minSize ? minSize / containerHeight : 0;
-                    const maxSplit = maxSize ? maxSize / containerHeight : 1;
-                    newSplit = Math.max(minSplit, Math.min(maxSplit, newSplit));
-                }
-                setSplit(newSplit);
+                newSize = rawSize / containerHeight;
+                const minSplit = panel.minSize ? panel.minSize / containerHeight : 0;
+                const maxSplit = panel.maxSize ? panel.maxSize / containerHeight : 1;
+                newSize = Math.max(minSplit, Math.min(maxSplit, newSize));
             }
         }
-    }, [isDragging, direction, mode, minSize, maxSize]);
+        setPanelSizes(prev => {
+            const next = [...prev];
+            next[draggingIndex] = newSize;
+            return next;
+        });
+    }, [draggingIndex, direction, mode, splitterSize, panelSizes, effectivePanels]);
     // 드래그 종료
     const handleMouseUp = useCallback(() => {
-        setIsDragging(false);
+        setDraggingIndex(null);
         document.body.style.cursor = '';
         document.body.style.userSelect = '';
     }, []);
     // 이벤트 리스너 등록/해제
     useEffect(() => {
-        if (isDragging) {
+        if (draggingIndex !== null) {
             document.addEventListener('mousemove', handleMouseMove);
             document.addEventListener('mouseup', handleMouseUp);
         }
@@ -9710,20 +9733,41 @@ const SplitView = ({ direction = 'horizontal', mode = 'ratio', initialSplit = 0.
             document.removeEventListener('mousemove', handleMouseMove);
             document.removeEventListener('mouseup', handleMouseUp);
         };
-    }, [isDragging, handleMouseMove, handleMouseUp]);
+    }, [draggingIndex, handleMouseMove, handleMouseUp]);
     const classes = clsx('designbase-split-view', `designbase-split-view--direction-${direction}`, `designbase-split-view--mode-${mode}`, {
         'designbase-split-view--full-width': fullWidth,
         'designbase-split-view--full-height': fullHeight,
-        'designbase-split-view--dragging': isDragging,
+        'designbase-split-view--dragging': draggingIndex !== null,
     }, className);
-    const splitterClasses = clsx('designbase-split-view__splitter', `designbase-split-view__splitter--direction-${direction}`);
     const style = {
-        '--split-value': mode === 'fixed' ? `${getSplitValue()}px` : `${getSplitValue()}%`,
         '--splitter-size': `${splitterSize}px`,
         '--splitter-color': splitterColor,
         '--splitter-hover-color': splitterHoverColor,
     };
-    return (jsxs("div", { ref: containerRef, className: classes, style: style, children: [jsx("div", { className: "designbase-split-view__first", children: first }), jsx("div", { ref: splitterRef, className: splitterClasses, onMouseDown: handleMouseDown }), jsx("div", { className: "designbase-split-view__second", children: second })] }));
+    return (jsx("div", { ref: containerRef, className: classes, style: style, children: effectivePanels.map((panel, index) => {
+            const size = panelSizes[index];
+            const isLast = index === effectivePanels.length - 1;
+            const isResizable = panel.resizable !== false && !isLast;
+            const panelStyle = {};
+            if (!isLast) {
+                if (direction === 'horizontal') {
+                    panelStyle.width = mode === 'fixed' ? `${size}px` : `${size * 100}%`;
+                    panelStyle.flexShrink = 0;
+                }
+                else {
+                    panelStyle.height = mode === 'fixed' ? `${size}px` : `${size * 100}%`;
+                    panelStyle.flexShrink = 0;
+                }
+            }
+            else {
+                panelStyle.flex = 1;
+            }
+            return (jsxs(React.Fragment, { children: [jsx("div", { className: clsx('designbase-split-view__panel', panel.className), style: panelStyle, children: panel.content }), !isLast && (jsx("div", { className: clsx('designbase-split-view__splitter', `designbase-split-view__splitter--direction-${direction}`, { 'designbase-split-view__splitter--disabled': !isResizable }), onMouseDown: isResizable ? handleMouseDown(index) : undefined, style: {
+                            cursor: isResizable
+                                ? direction === 'horizontal' ? 'col-resize' : 'row-resize'
+                                : 'default',
+                        } }))] }, index));
+        }) }));
 };
 
 const Stack = ({ direction = 'vertical', alignment = 'start', justify = 'start', spacing = 'md', fullWidth = false, fullHeight = false, wrap = false, className, children, }) => {