react-resize-demo 2.0.2 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +28 -0
- package/README.md +5 -0
- package/dist/components/ResizeHandle/index.js +1 -91
- package/dist/components/ResizeHandle/index.js.map +1 -1
- package/dist/components/ResizePanel/index.js +1 -32
- package/dist/components/ResizePanel/index.js.map +1 -1
- package/dist/components/ResizePanelGroup/index.js +1 -60
- package/dist/components/ResizePanelGroup/index.js.map +1 -1
- package/dist/components/shared/context.js +1 -34
- package/dist/components/shared/context.js.map +1 -1
- package/dist/esm/components/ResizeHandle/index.js +1 -89
- package/dist/esm/components/ResizeHandle/index.js.map +1 -1
- package/dist/esm/components/ResizePanel/index.js +1 -30
- package/dist/esm/components/ResizePanel/index.js.map +1 -1
- package/dist/esm/components/ResizePanelGroup/index.js +1 -58
- package/dist/esm/components/ResizePanelGroup/index.js.map +1 -1
- package/dist/esm/components/shared/context.js +1 -31
- package/dist/esm/components/shared/context.js.map +1 -1
- package/dist/esm/index.js +1 -5
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/utils/resizeAble.js +1 -426
- package/dist/esm/utils/resizeAble.js.map +1 -1
- package/dist/esm/utils/virtualNode.js +1 -163
- package/dist/esm/utils/virtualNode.js.map +1 -1
- package/dist/index.js +1 -14
- package/dist/index.js.map +1 -1
- package/dist/utils/resizeAble.js +1 -430
- package/dist/utils/resizeAble.js.map +1 -1
- package/dist/utils/virtualNode.js +1 -167
- package/dist/utils/virtualNode.js.map +1 -1
- package/package.json +134 -134
package/CHANGELOG.md
CHANGED
|
@@ -5,6 +5,34 @@
|
|
|
5
5
|
格式基于 [Keep a Changelog](https://keepachangelog.com/zh-CN/1.0.0/),
|
|
6
6
|
版本号遵循 [Semantic Versioning](https://semver.org/lang/zh-CN/)。
|
|
7
7
|
|
|
8
|
+
## [2.0.3] - 2026-01-10
|
|
9
|
+
|
|
10
|
+
### 🚀 性能优化
|
|
11
|
+
|
|
12
|
+
- **代码压缩**
|
|
13
|
+
- 集成 `@rollup/plugin-terser` 进行代码压缩
|
|
14
|
+
- 自动移除 debugger 语句和注释
|
|
15
|
+
- 变量名压缩,减小打包体积
|
|
16
|
+
- 保留 source map 支持调试
|
|
17
|
+
|
|
18
|
+
- **Tree-shaking 增强**
|
|
19
|
+
- 配置更激进的 tree-shaking 策略
|
|
20
|
+
- 使用 `smallest` 预设优化未使用代码移除
|
|
21
|
+
- 优化代码生成,使用 const 绑定提升 tree-shaking 效果
|
|
22
|
+
- 确保按需导入时只打包实际使用的代码
|
|
23
|
+
|
|
24
|
+
### 📦 构建优化
|
|
25
|
+
|
|
26
|
+
- **打包配置优化**
|
|
27
|
+
- 参考 Ant Design 的打包实践优化配置
|
|
28
|
+
- 确保所有模块都正确支持 tree-shaking
|
|
29
|
+
- 优化构建产物结构
|
|
30
|
+
|
|
31
|
+
### 📚 文档
|
|
32
|
+
|
|
33
|
+
- 新增 `OPTIMIZATION.md` 文档,详细记录性能优化项
|
|
34
|
+
- 更新项目结构规范文档
|
|
35
|
+
|
|
8
36
|
## [2.0.0] - 2026-01-10
|
|
9
37
|
|
|
10
38
|
### 🎉 重大版本更新
|
package/README.md
CHANGED
|
@@ -14,6 +14,7 @@
|
|
|
14
14
|
- ✅ **TypeScript**:完整的 TypeScript 类型支持
|
|
15
15
|
- ✅ **模块化架构**:清晰的目录结构,支持按需导入
|
|
16
16
|
- ✅ **Tree-shaking**:支持 Tree-shaking,减少打包体积
|
|
17
|
+
- ✅ **代码压缩**:自动压缩代码,优化打包体积
|
|
17
18
|
|
|
18
19
|
## 📦 安装
|
|
19
20
|
|
|
@@ -339,6 +340,10 @@ import { ResizablePanel } from 'react-resize-demo/components/ResizePanel';
|
|
|
339
340
|
|
|
340
341
|
查看 [CHANGELOG.md](./CHANGELOG.md) 了解详细的版本变更历史。
|
|
341
342
|
|
|
343
|
+
## ⚡ 性能优化
|
|
344
|
+
|
|
345
|
+
查看 [OPTIMIZATION.md](./OPTIMIZATION.md) 了解详细的性能优化措施和配置。
|
|
346
|
+
|
|
342
347
|
## 📄 License
|
|
343
348
|
|
|
344
349
|
MIT
|
|
@@ -1,92 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var resizeAble = require('../../utils/resizeAble.js');
|
|
6
|
-
var context = require('../shared/context.js');
|
|
7
|
-
|
|
8
|
-
const ResizeHandle = ({ prePanelIndex, nextPanelIndex, direction, }) => {
|
|
9
|
-
const handleRef = React.useRef(null);
|
|
10
|
-
const coreInstanceRef = React.useRef(null);
|
|
11
|
-
const { getPanelInfo, panelCount, virtualConfig } = context.useResizableContext();
|
|
12
|
-
React.useEffect(() => {
|
|
13
|
-
// 确保所需的面板索引都已注册
|
|
14
|
-
// 需要确保 nextPanelIndex 对应的面板已经注册(因为索引从0开始,所以需要 >= nextPanelIndex + 1)
|
|
15
|
-
if (panelCount <= nextPanelIndex || !handleRef.current) {
|
|
16
|
-
return;
|
|
17
|
-
}
|
|
18
|
-
const prePanelInfo = getPanelInfo(prePanelIndex);
|
|
19
|
-
const nextPanelInfo = getPanelInfo(nextPanelIndex);
|
|
20
|
-
if (!prePanelInfo || !nextPanelInfo)
|
|
21
|
-
return;
|
|
22
|
-
// 获取拖拽器的尺寸
|
|
23
|
-
const handleSize = handleRef.current
|
|
24
|
-
? (direction === 'horizontal'
|
|
25
|
-
? handleRef.current.offsetWidth
|
|
26
|
-
: handleRef.current.offsetHeight)
|
|
27
|
-
: (direction === 'horizontal' ? 10 : 10); // 默认10px
|
|
28
|
-
coreInstanceRef.current = new resizeAble.default({
|
|
29
|
-
prePanelEl: prePanelInfo.panelEl,
|
|
30
|
-
nextPanelEl: nextPanelInfo.panelEl,
|
|
31
|
-
getPanelInfo,
|
|
32
|
-
prePanelIndex,
|
|
33
|
-
nextPanelIndex,
|
|
34
|
-
direction,
|
|
35
|
-
virtualEnabled: virtualConfig.enabled || false,
|
|
36
|
-
virtualConfig: {
|
|
37
|
-
style: virtualConfig.style,
|
|
38
|
-
className: virtualConfig.className,
|
|
39
|
-
},
|
|
40
|
-
handleSize, // 传递拖拽器尺寸
|
|
41
|
-
});
|
|
42
|
-
// 将拖拽器的开始/移动/结束事件绑定至核心类
|
|
43
|
-
const handleEl = handleRef.current;
|
|
44
|
-
let isResizing = false;
|
|
45
|
-
let startPos = 0;
|
|
46
|
-
const startResize = (e) => {
|
|
47
|
-
e.preventDefault();
|
|
48
|
-
isResizing = true;
|
|
49
|
-
startPos = direction === 'horizontal' ? e.clientX : e.clientY;
|
|
50
|
-
if (coreInstanceRef.current) {
|
|
51
|
-
coreInstanceRef.current.startResize();
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
const onResizeMove = (e) => {
|
|
55
|
-
if (!isResizing || !coreInstanceRef.current)
|
|
56
|
-
return;
|
|
57
|
-
const currentPos = direction === 'horizontal' ? e.clientX : e.clientY;
|
|
58
|
-
const delta = currentPos - startPos;
|
|
59
|
-
coreInstanceRef.current.onResize(delta);
|
|
60
|
-
};
|
|
61
|
-
const endResize = () => {
|
|
62
|
-
if (isResizing && coreInstanceRef.current) {
|
|
63
|
-
isResizing = false;
|
|
64
|
-
coreInstanceRef.current.endResize();
|
|
65
|
-
}
|
|
66
|
-
};
|
|
67
|
-
handleEl.addEventListener('mousedown', startResize);
|
|
68
|
-
document.addEventListener('mousemove', onResizeMove);
|
|
69
|
-
document.addEventListener('mouseup', endResize);
|
|
70
|
-
return () => {
|
|
71
|
-
handleEl.removeEventListener('mousedown', startResize);
|
|
72
|
-
document.removeEventListener('mousemove', onResizeMove);
|
|
73
|
-
document.removeEventListener('mouseup', endResize);
|
|
74
|
-
if (coreInstanceRef.current) {
|
|
75
|
-
coreInstanceRef.current.destroy();
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
}, [prePanelIndex, nextPanelIndex, direction, getPanelInfo, panelCount, virtualConfig]);
|
|
79
|
-
const isHorizontal = direction === 'horizontal';
|
|
80
|
-
return (jsxRuntime.jsx("div", { ref: handleRef, style: {
|
|
81
|
-
position: 'relative',
|
|
82
|
-
width: isHorizontal ? '10px' : '100%',
|
|
83
|
-
height: isHorizontal ? '100%' : '10px',
|
|
84
|
-
backgroundColor: '#000',
|
|
85
|
-
cursor: isHorizontal ? 'ew-resize' : 'ns-resize',
|
|
86
|
-
zIndex: 1000,
|
|
87
|
-
flexShrink: 0,
|
|
88
|
-
} }));
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
exports.ResizeHandle = ResizeHandle;
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),n=require("react"),t=require("../../utils/resizeAble.js"),r=require("../shared/context.js");exports.ResizeHandle=({prePanelIndex:s,nextPanelIndex:o,direction:u})=>{const i=n.useRef(null),l=n.useRef(null),{getPanelInfo:c,panelCount:a,virtualConfig:d}=r.useResizableContext();n.useEffect(()=>{if(a<=o||!i.current)return;const e=c(s),n=c(o);if(!e||!n)return;const r=i.current?"horizontal"===u?i.current.offsetWidth:i.current.offsetHeight:10;l.current=new t.default({prePanelEl:e.panelEl,nextPanelEl:n.panelEl,getPanelInfo:c,prePanelIndex:s,nextPanelIndex:o,direction:u,virtualEnabled:d.enabled||!1,virtualConfig:{style:d.style,className:d.className},handleSize:r});const f=i.current;let m=!1,v=0;const x=e=>{e.preventDefault(),m=!0,v="horizontal"===u?e.clientX:e.clientY,l.current&&l.current.startResize()},z=e=>{if(!m||!l.current)return;const n=("horizontal"===u?e.clientX:e.clientY)-v;l.current.onResize(n)},p=()=>{m&&l.current&&(m=!1,l.current.endResize())};return f.addEventListener("mousedown",x),document.addEventListener("mousemove",z),document.addEventListener("mouseup",p),()=>{f.removeEventListener("mousedown",x),document.removeEventListener("mousemove",z),document.removeEventListener("mouseup",p),l.current&&l.current.destroy()}},[s,o,u,c,a,d]);const f="horizontal"===u;return e.jsx("div",{ref:i,style:{position:"relative",width:f?"10px":"100%",height:f?"100%":"10px",backgroundColor:"#000",cursor:f?"ew-resize":"ns-resize",zIndex:1e3,flexShrink:0}})};
|
|
92
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/ResizeHandle/index.tsx"],"sourcesContent":[null],"names":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/ResizeHandle/index.tsx"],"sourcesContent":[null],"names":["prePanelIndex","nextPanelIndex","direction","handleRef","useRef","coreInstanceRef","getPanelInfo","panelCount","virtualConfig","useResizableContext","useEffect","current","prePanelInfo","nextPanelInfo","handleSize","offsetWidth","offsetHeight","ResizeAbleCore","prePanelEl","panelEl","nextPanelEl","virtualEnabled","enabled","style","className","handleEl","isResizing","startPos","startResize","e","preventDefault","clientX","clientY","onResizeMove","delta","onResize","endResize","addEventListener","document","removeEventListener","destroy","isHorizontal","_jsx","ref","position","width","height","backgroundColor","cursor","zIndex","flexShrink"],"mappings":"mKAeyD,EACrDA,gBACAC,iBACAC,gBAEA,MAAMC,EAAYC,EAAAA,OAAuB,MACnCC,EAAkBD,EAAAA,OAAmD,OACrEE,aAAEA,EAAYC,WAAEA,EAAUC,cAAEA,GAAkBC,EAAAA,sBAEpDC,EAAAA,UAAU,KAGN,GAAIH,GAAcN,IAAmBE,EAAUQ,QAC3C,OAGJ,MAAMC,EAAeN,EAAaN,GAC5Ba,EAAgBP,EAAaL,GACnC,IAAIW,IAAiBC,EAAe,OAGpC,MAAMC,EAAaX,EAAUQ,QACR,eAAdT,EACGC,EAAUQ,QAAQI,YAClBZ,EAAUQ,QAAQK,aACQ,GAEpCX,EAAgBM,QAAU,IAAIM,UAAe,CACzCC,WAAYN,EAAaO,QACzBC,YAAaP,EAAcM,QAC3Bb,eACAN,gBACAC,iBACAC,YACAmB,eAAgBb,EAAcc,UAAW,EACzCd,cAAe,CACXe,MAAOf,EAAce,MACrBC,UAAWhB,EAAcgB,WAE7BV,eAIJ,MAAMW,EAAWtB,EAAUQ,QAC3B,IAAIe,GAAa,EACbC,EAAW,EAEf,MAAMC,EAAeC,IACjBA,EAAEC,iBACFJ,GAAa,EACbC,EAAyB,eAAdzB,EAA6B2B,EAAEE,QAAUF,EAAEG,QAClD3B,EAAgBM,SAChBN,EAAgBM,QAAQiB,eAI1BK,EAAgBJ,IAClB,IAAIH,IAAerB,EAAgBM,QAAS,OAC5C,MACMuB,GAD2B,eAAdhC,EAA6B2B,EAAEE,QAAUF,EAAEG,SACnCL,EAC3BtB,EAAgBM,QAAQwB,SAASD,IAG/BE,EAAY,KACXV,GAAcrB,EAAgBM,UAC7Be,GAAa,EACbrB,EAAgBM,QAAQyB,cAQhC,OAJAX,EAASY,iBAAiB,YAAaT,GACvCU,SAASD,iBAAiB,YAAaJ,GACvCK,SAASD,iBAAiB,UAAWD,GAE9B,KACHX,EAASc,oBAAoB,YAAaX,GAC1CU,SAASC,oBAAoB,YAAaN,GAC1CK,SAASC,oBAAoB,UAAWH,GACrC/B,EAAgBM,SACfN,EAAgBM,QAAQ6B,YAGjC,CAACxC,EAAeC,EAAgBC,EAAWI,EAAcC,EAAYC,IAExE,MAAMiC,EAA6B,eAAdvC,EACrB,OACIwC,EAAAA,IAAA,MAAA,CACIC,IAAKxC,EACLoB,MAAO,CACHqB,SAAU,WACVC,MAAOJ,EAAe,OAAS,OAC/BK,OAAQL,EAAe,OAAS,OAChCM,gBAAiB,OACjBC,OAAQP,EAAe,YAAc,YACrCQ,OAAQ,IACRC,WAAY"}
|
|
@@ -1,33 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var context = require('../shared/context.js');
|
|
6
|
-
|
|
7
|
-
const ResizePanel = ({ children, minSize = 100,
|
|
8
|
-
// onResize, // 暂时未使用,保留以备将来使用
|
|
9
|
-
}) => {
|
|
10
|
-
const panelRef = React.useRef(null);
|
|
11
|
-
const panelIndexRef = React.useRef(-1);
|
|
12
|
-
const { registerPanel, unregisterPanel, direction } = context.useResizableContext();
|
|
13
|
-
React.useEffect(() => {
|
|
14
|
-
if (!panelRef.current)
|
|
15
|
-
return;
|
|
16
|
-
const panelEl = panelRef.current;
|
|
17
|
-
panelIndexRef.current = registerPanel(panelEl, minSize);
|
|
18
|
-
return () => {
|
|
19
|
-
unregisterPanel(panelEl);
|
|
20
|
-
};
|
|
21
|
-
}, [minSize, registerPanel, unregisterPanel]);
|
|
22
|
-
return (jsxRuntime.jsx("div", { ref: panelRef, style: {
|
|
23
|
-
flex: 1,
|
|
24
|
-
minWidth: direction === 'horizontal' ? minSize : undefined,
|
|
25
|
-
minHeight: direction === 'vertical' ? minSize : undefined,
|
|
26
|
-
width: 'auto',
|
|
27
|
-
overflow: 'hidden',
|
|
28
|
-
position: 'relative',
|
|
29
|
-
}, children: jsxRuntime.jsx("div", { style: { height: '100%', padding: 16 }, children: children }) }));
|
|
30
|
-
};
|
|
31
|
-
|
|
32
|
-
exports.ResizePanel = ResizePanel;
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),r=require("react"),i=require("../shared/context.js");exports.ResizePanel=({children:t,minSize:n=100})=>{const s=r.useRef(null),u=r.useRef(-1),{registerPanel:c,unregisterPanel:l,direction:o}=i.useResizableContext();return r.useEffect(()=>{if(!s.current)return;const e=s.current;return u.current=c(e,n),()=>{l(e)}},[n,c,l]),e.jsx("div",{ref:s,style:{flex:1,minWidth:"horizontal"===o?n:void 0,minHeight:"vertical"===o?n:void 0,width:"auto",overflow:"hidden",position:"relative"},children:e.jsx("div",{style:{height:"100%",padding:16},children:t})})};
|
|
33
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/ResizePanel/index.tsx"],"sourcesContent":[null],"names":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/ResizePanel/index.tsx"],"sourcesContent":[null],"names":["children","minSize","panelRef","useRef","panelIndexRef","registerPanel","unregisterPanel","direction","useResizableContext","useEffect","current","panelEl","_jsx","ref","style","flex","minWidth","undefined","minHeight","width","overflow","position","height","padding"],"mappings":"2HAauD,EACnDA,WACAC,UAAU,QAGV,MAAMC,EAAWC,EAAAA,OAAuB,MAClCC,EAAgBD,EAAAA,YAChBE,cAAEA,EAAaC,gBAAEA,EAAeC,UAAEA,GAAcC,EAAAA,sBAWtD,OATAC,EAAAA,UAAU,KACN,IAAIP,EAASQ,QAAS,OACtB,MAAMC,EAAUT,EAASQ,QAEzB,OADAN,EAAcM,QAAUL,EAAcM,EAASV,GACxC,KACHK,EAAgBK,KAErB,CAACV,EAASI,EAAeC,IAGxBM,EAAAA,IAAA,MAAA,CACIC,IAAKX,EACLY,MAAO,CACHC,KAAM,EACNC,SAAwB,eAAdT,EAA6BN,OAAUgB,EACjDC,UAAyB,aAAdX,EAA2BN,OAAUgB,EAChDE,MAAO,OACPC,SAAU,SACVC,SAAU,YACbrB,SAEDY,EAAAA,WAAKE,MAAO,CAACQ,OAAQ,OAAQC,QAAS,IAAGvB,SACpCA"}
|
|
@@ -1,61 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
-
var React = require('react');
|
|
5
|
-
var context = require('../shared/context.js');
|
|
6
|
-
var index = require('../ResizeHandle/index.js');
|
|
7
|
-
|
|
8
|
-
const ResizePanelGroup = ({ children, direction = 'horizontal', style, virtual = false, virtualConfig = {}, }) => {
|
|
9
|
-
const panelInfos = React.useRef([]);
|
|
10
|
-
const [panelCount, setPanelCount] = React.useState(0);
|
|
11
|
-
const registerPanel = React.useCallback((panelEl, minSize) => {
|
|
12
|
-
const index = panelInfos.current.length;
|
|
13
|
-
panelInfos.current.push({ panelEl, minSize });
|
|
14
|
-
setPanelCount(panelInfos.current.length);
|
|
15
|
-
return index;
|
|
16
|
-
}, []);
|
|
17
|
-
const unregisterPanel = React.useCallback((panelEl) => {
|
|
18
|
-
panelInfos.current = panelInfos.current.filter(info => info.panelEl !== panelEl);
|
|
19
|
-
setPanelCount(panelInfos.current.length);
|
|
20
|
-
}, []);
|
|
21
|
-
const getPanelInfo = React.useCallback((index) => {
|
|
22
|
-
return panelInfos.current[index] || null;
|
|
23
|
-
}, []);
|
|
24
|
-
const getPanelIndex = React.useCallback((panelEl) => {
|
|
25
|
-
return panelInfos.current.findIndex(info => info.panelEl === panelEl);
|
|
26
|
-
}, []);
|
|
27
|
-
const childrenArray = React.Children.toArray(children);
|
|
28
|
-
const panelsWithHandles = [];
|
|
29
|
-
childrenArray.forEach((child, index$1) => {
|
|
30
|
-
panelsWithHandles.push(child);
|
|
31
|
-
// 在面板之间插入拖拽器(最后一个面板后不插入)
|
|
32
|
-
if (index$1 < childrenArray.length - 1) {
|
|
33
|
-
panelsWithHandles.push(jsxRuntime.jsx(index.ResizeHandle, { prePanelIndex: index$1, nextPanelIndex: index$1 + 1, direction: direction }, `handle-${index$1}`));
|
|
34
|
-
}
|
|
35
|
-
});
|
|
36
|
-
// 合并虚拟化配置
|
|
37
|
-
const mergedVirtualConfig = {
|
|
38
|
-
enabled: virtual,
|
|
39
|
-
...virtualConfig,
|
|
40
|
-
};
|
|
41
|
-
const contextValue = {
|
|
42
|
-
panelCount: panelCount,
|
|
43
|
-
registerPanel,
|
|
44
|
-
unregisterPanel,
|
|
45
|
-
getPanelInfo,
|
|
46
|
-
getPanelIndex,
|
|
47
|
-
direction,
|
|
48
|
-
panelInfos: panelInfos.current,
|
|
49
|
-
virtualConfig: mergedVirtualConfig,
|
|
50
|
-
};
|
|
51
|
-
return (jsxRuntime.jsx(context.ResizableContext.Provider, { value: contextValue, children: jsxRuntime.jsx("div", { style: {
|
|
52
|
-
display: 'flex',
|
|
53
|
-
flexDirection: direction === 'horizontal' ? 'row' : 'column',
|
|
54
|
-
height: '100%',
|
|
55
|
-
position: 'relative', // 为虚拟节点定位提供参考
|
|
56
|
-
...style,
|
|
57
|
-
}, children: panelsWithHandles }) }));
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
exports.ResizePanelGroup = ResizePanelGroup;
|
|
1
|
+
"use strict";const e=require("react/jsx-runtime"),n=require("react"),r=require("../shared/context.js"),t=require("../ResizeHandle/index.js");exports.ResizePanelGroup=({children:l,direction:i="horizontal",style:a,virtual:u=!1,virtualConfig:s={}})=>{const c=n.useRef([]),[o,d]=n.useState(0),h=n.useCallback((e,n)=>{const r=c.current.length;return c.current.push({panelEl:e,minSize:n}),d(c.current.length),r},[]),x=n.useCallback(e=>{c.current=c.current.filter(n=>n.panelEl!==e),d(c.current.length)},[]),p=n.useCallback(e=>c.current[e]||null,[]),g=n.useCallback(e=>c.current.findIndex(n=>n.panelEl===e),[]),f=n.Children.toArray(l),C=[];f.forEach((n,r)=>{C.push(n),r<f.length-1&&C.push(e.jsx(t.ResizeHandle,{prePanelIndex:r,nextPanelIndex:r+1,direction:i},`handle-${r}`))});const P={enabled:u,...s},v={panelCount:o,registerPanel:h,unregisterPanel:x,getPanelInfo:p,getPanelIndex:g,direction:i,panelInfos:c.current,virtualConfig:P};return e.jsx(r.ResizableContext.Provider,{value:v,children:e.jsx("div",{style:{display:"flex",flexDirection:"horizontal"===i?"row":"column",height:"100%",position:"relative",...a},children:C})})};
|
|
61
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../src/components/ResizePanelGroup/index.tsx"],"sourcesContent":[null],"names":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../src/components/ResizePanelGroup/index.tsx"],"sourcesContent":[null],"names":["children","direction","style","virtual","virtualConfig","panelInfos","useRef","panelCount","setPanelCount","useState","registerPanel","useCallback","panelEl","minSize","index","current","length","push","unregisterPanel","filter","info","getPanelInfo","getPanelIndex","findIndex","childrenArray","React","Children","toArray","panelsWithHandles","forEach","child","_jsx","ResizeHandle","prePanelIndex","nextPanelIndex","mergedVirtualConfig","enabled","contextValue","ResizableContext","Provider","value","display","flexDirection","height","position"],"mappings":"sKAiBiE,EAC7DA,WACAC,YAAY,aACZC,QACAC,WAAU,EACVC,gBAAgB,CAAA,MAEhB,MAAMC,EAAaC,EAAAA,OAAoB,KAChCC,EAAYC,GAAiBC,EAAAA,SAAS,GAEvCC,EAAgBC,EAAAA,YAAY,CAACC,EAAsBC,KACrD,MAAMC,EAAQT,EAAWU,QAAQC,OAGjC,OAFAX,EAAWU,QAAQE,KAAK,CAAEL,UAASC,YACnCL,EAAcH,EAAWU,QAAQC,QAC1BF,GACR,IAEGI,EAAkBP,cAAaC,IACjCP,EAAWU,QAAUV,EAAWU,QAAQI,OAAOC,GAAQA,EAAKR,UAAYA,GACxEJ,EAAcH,EAAWU,QAAQC,SAClC,IAEGK,EAAeV,cAAaG,GACvBT,EAAWU,QAAQD,IAAU,KACrC,IAEGQ,EAAgBX,cAAaC,GACxBP,EAAWU,QAAQQ,UAAUH,GAAQA,EAAKR,UAAYA,GAC9D,IAEGY,EAAgBC,EAAMC,SAASC,QAAQ3B,GACvC4B,EAAuC,GAE7CJ,EAAcK,QAAQ,CAACC,EAAOhB,KAC1Bc,EAAkBX,KAAKa,GAGnBhB,EAAQU,EAAcR,OAAS,GAC/BY,EAAkBX,KACdc,EAAAA,IAACC,EAAAA,cAEGC,cAAenB,EACfoB,eAAgBpB,EAAQ,EACxBb,UAAWA,GAHN,UAAUa,QAU/B,MAAMqB,EAAqC,CACvCC,QAASjC,KACNC,GAGDiC,EAAsC,CACxC9B,WAAYA,EACZG,gBACAQ,kBACAG,eACAC,gBACArB,YACAI,WAAYA,EAAWU,QACvBX,cAAe+B,GAGnB,OACIJ,MAACO,EAAAA,iBAAiBC,SAAQ,CAACC,MAAOH,EAAYrC,SAC1C+B,EAAAA,IAAA,MAAA,CAAK7B,MAAO,CACJuC,QAAS,OACTC,cAA6B,eAAdzC,EAA6B,MAAQ,SACpD0C,OAAQ,OACRC,SAAU,cACP1C,GACVF,SACI4B"}
|
|
@@ -1,35 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var React = require('react');
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Resizable Context 默认值
|
|
7
|
-
*/
|
|
8
|
-
const defaultContextValue = {
|
|
9
|
-
panelCount: 0,
|
|
10
|
-
registerPanel: () => 0,
|
|
11
|
-
unregisterPanel: () => { },
|
|
12
|
-
getPanelInfo: () => null,
|
|
13
|
-
getPanelIndex: () => -1,
|
|
14
|
-
direction: 'horizontal',
|
|
15
|
-
panelInfos: [],
|
|
16
|
-
virtualConfig: { enabled: false },
|
|
17
|
-
};
|
|
18
|
-
/**
|
|
19
|
-
* Resizable Context
|
|
20
|
-
*/
|
|
21
|
-
const ResizableContext = React.createContext(defaultContextValue);
|
|
22
|
-
/**
|
|
23
|
-
* 使用 Resizable Context 的 Hook
|
|
24
|
-
*/
|
|
25
|
-
const useResizableContext = () => {
|
|
26
|
-
const context = React.useContext(ResizableContext);
|
|
27
|
-
if (!context) {
|
|
28
|
-
throw new Error('useResizableContext must be used within ResizablePanelGroup');
|
|
29
|
-
}
|
|
30
|
-
return context;
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
exports.ResizableContext = ResizableContext;
|
|
34
|
-
exports.useResizableContext = useResizableContext;
|
|
1
|
+
"use strict";const e=require("react"),t=e.createContext({panelCount:0,registerPanel:()=>0,unregisterPanel:()=>{},getPanelInfo:()=>null,getPanelIndex:()=>-1,direction:"horizontal",panelInfos:[],virtualConfig:{enabled:!1}});exports.ResizableContext=t,exports.useResizableContext=()=>{const n=e.useContext(t);if(!n)throw new Error("useResizableContext must be used within ResizablePanelGroup");return n};
|
|
35
2
|
//# sourceMappingURL=context.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"context.js","sources":["../../../src/components/shared/context.tsx"],"sourcesContent":[null],"names":[
|
|
1
|
+
{"version":3,"file":"context.js","sources":["../../../src/components/shared/context.tsx"],"sourcesContent":[null],"names":["ResizableContext","React","createContext","panelCount","registerPanel","unregisterPanel","getPanelInfo","getPanelIndex","direction","panelInfos","virtualConfig","enabled","context","useContext","Error"],"mappings":"sCAkCaA,EAAmBC,EAAMC,cAda,CAC/CC,WAAY,EACZC,cAAe,IAAM,EACrBC,gBAAiB,OACjBC,aAAc,IAAM,KACpBC,cAAe,KAAM,EACrBC,UAAW,aACXC,WAAY,GACZC,cAAe,CAAEC,SAAS,4DAWK,KAC/B,MAAMC,EAAUX,EAAMY,WAAWb,GACjC,IAAKY,EACD,MAAM,IAAIE,MAAM,+DAEpB,OAAOF"}
|
|
@@ -1,90 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useRef, useEffect } from 'react';
|
|
3
|
-
import ResizeAbleCore from '../../utils/resizeAble.js';
|
|
4
|
-
import { useResizableContext } from '../shared/context.js';
|
|
5
|
-
|
|
6
|
-
const ResizeHandle = ({ prePanelIndex, nextPanelIndex, direction, }) => {
|
|
7
|
-
const handleRef = useRef(null);
|
|
8
|
-
const coreInstanceRef = useRef(null);
|
|
9
|
-
const { getPanelInfo, panelCount, virtualConfig } = useResizableContext();
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
// 确保所需的面板索引都已注册
|
|
12
|
-
// 需要确保 nextPanelIndex 对应的面板已经注册(因为索引从0开始,所以需要 >= nextPanelIndex + 1)
|
|
13
|
-
if (panelCount <= nextPanelIndex || !handleRef.current) {
|
|
14
|
-
return;
|
|
15
|
-
}
|
|
16
|
-
const prePanelInfo = getPanelInfo(prePanelIndex);
|
|
17
|
-
const nextPanelInfo = getPanelInfo(nextPanelIndex);
|
|
18
|
-
if (!prePanelInfo || !nextPanelInfo)
|
|
19
|
-
return;
|
|
20
|
-
// 获取拖拽器的尺寸
|
|
21
|
-
const handleSize = handleRef.current
|
|
22
|
-
? (direction === 'horizontal'
|
|
23
|
-
? handleRef.current.offsetWidth
|
|
24
|
-
: handleRef.current.offsetHeight)
|
|
25
|
-
: (direction === 'horizontal' ? 10 : 10); // 默认10px
|
|
26
|
-
coreInstanceRef.current = new ResizeAbleCore({
|
|
27
|
-
prePanelEl: prePanelInfo.panelEl,
|
|
28
|
-
nextPanelEl: nextPanelInfo.panelEl,
|
|
29
|
-
getPanelInfo,
|
|
30
|
-
prePanelIndex,
|
|
31
|
-
nextPanelIndex,
|
|
32
|
-
direction,
|
|
33
|
-
virtualEnabled: virtualConfig.enabled || false,
|
|
34
|
-
virtualConfig: {
|
|
35
|
-
style: virtualConfig.style,
|
|
36
|
-
className: virtualConfig.className,
|
|
37
|
-
},
|
|
38
|
-
handleSize, // 传递拖拽器尺寸
|
|
39
|
-
});
|
|
40
|
-
// 将拖拽器的开始/移动/结束事件绑定至核心类
|
|
41
|
-
const handleEl = handleRef.current;
|
|
42
|
-
let isResizing = false;
|
|
43
|
-
let startPos = 0;
|
|
44
|
-
const startResize = (e) => {
|
|
45
|
-
e.preventDefault();
|
|
46
|
-
isResizing = true;
|
|
47
|
-
startPos = direction === 'horizontal' ? e.clientX : e.clientY;
|
|
48
|
-
if (coreInstanceRef.current) {
|
|
49
|
-
coreInstanceRef.current.startResize();
|
|
50
|
-
}
|
|
51
|
-
};
|
|
52
|
-
const onResizeMove = (e) => {
|
|
53
|
-
if (!isResizing || !coreInstanceRef.current)
|
|
54
|
-
return;
|
|
55
|
-
const currentPos = direction === 'horizontal' ? e.clientX : e.clientY;
|
|
56
|
-
const delta = currentPos - startPos;
|
|
57
|
-
coreInstanceRef.current.onResize(delta);
|
|
58
|
-
};
|
|
59
|
-
const endResize = () => {
|
|
60
|
-
if (isResizing && coreInstanceRef.current) {
|
|
61
|
-
isResizing = false;
|
|
62
|
-
coreInstanceRef.current.endResize();
|
|
63
|
-
}
|
|
64
|
-
};
|
|
65
|
-
handleEl.addEventListener('mousedown', startResize);
|
|
66
|
-
document.addEventListener('mousemove', onResizeMove);
|
|
67
|
-
document.addEventListener('mouseup', endResize);
|
|
68
|
-
return () => {
|
|
69
|
-
handleEl.removeEventListener('mousedown', startResize);
|
|
70
|
-
document.removeEventListener('mousemove', onResizeMove);
|
|
71
|
-
document.removeEventListener('mouseup', endResize);
|
|
72
|
-
if (coreInstanceRef.current) {
|
|
73
|
-
coreInstanceRef.current.destroy();
|
|
74
|
-
}
|
|
75
|
-
};
|
|
76
|
-
}, [prePanelIndex, nextPanelIndex, direction, getPanelInfo, panelCount, virtualConfig]);
|
|
77
|
-
const isHorizontal = direction === 'horizontal';
|
|
78
|
-
return (jsx("div", { ref: handleRef, style: {
|
|
79
|
-
position: 'relative',
|
|
80
|
-
width: isHorizontal ? '10px' : '100%',
|
|
81
|
-
height: isHorizontal ? '100%' : '10px',
|
|
82
|
-
backgroundColor: '#000',
|
|
83
|
-
cursor: isHorizontal ? 'ew-resize' : 'ns-resize',
|
|
84
|
-
zIndex: 1000,
|
|
85
|
-
flexShrink: 0,
|
|
86
|
-
} }));
|
|
87
|
-
};
|
|
88
|
-
|
|
89
|
-
export { ResizeHandle };
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import{useRef as n,useEffect as t}from"react";import r from"../../utils/resizeAble.js";import{useResizableContext as o}from"../shared/context.js";const i=({prePanelIndex:i,nextPanelIndex:l,direction:s})=>{const u=n(null),c=n(null),{getPanelInfo:a,panelCount:d,virtualConfig:m}=o();t(()=>{if(d<=l||!u.current)return;const e=a(i),n=a(l);if(!e||!n)return;const t=u.current?"horizontal"===s?u.current.offsetWidth:u.current.offsetHeight:10;c.current=new r({prePanelEl:e.panelEl,nextPanelEl:n.panelEl,getPanelInfo:a,prePanelIndex:i,nextPanelIndex:l,direction:s,virtualEnabled:m.enabled||!1,virtualConfig:{style:m.style,className:m.className},handleSize:t});const o=u.current;let f=!1,p=0;const v=e=>{e.preventDefault(),f=!0,p="horizontal"===s?e.clientX:e.clientY,c.current&&c.current.startResize()},x=e=>{if(!f||!c.current)return;const n=("horizontal"===s?e.clientX:e.clientY)-p;c.current.onResize(n)},h=()=>{f&&c.current&&(f=!1,c.current.endResize())};return o.addEventListener("mousedown",v),document.addEventListener("mousemove",x),document.addEventListener("mouseup",h),()=>{o.removeEventListener("mousedown",v),document.removeEventListener("mousemove",x),document.removeEventListener("mouseup",h),c.current&&c.current.destroy()}},[i,l,s,a,d,m]);const f="horizontal"===s;return e("div",{ref:u,style:{position:"relative",width:f?"10px":"100%",height:f?"100%":"10px",backgroundColor:"#000",cursor:f?"ew-resize":"ns-resize",zIndex:1e3,flexShrink:0}})};export{i as ResizeHandle};
|
|
90
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/ResizeHandle/index.tsx"],"sourcesContent":[null],"names":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/ResizeHandle/index.tsx"],"sourcesContent":[null],"names":["ResizeHandle","prePanelIndex","nextPanelIndex","direction","handleRef","useRef","coreInstanceRef","getPanelInfo","panelCount","virtualConfig","useResizableContext","useEffect","current","prePanelInfo","nextPanelInfo","handleSize","offsetWidth","offsetHeight","ResizeAbleCore","prePanelEl","panelEl","nextPanelEl","virtualEnabled","enabled","style","className","handleEl","isResizing","startPos","startResize","e","preventDefault","clientX","clientY","onResizeMove","delta","onResize","endResize","addEventListener","document","removeEventListener","destroy","isHorizontal","_jsx","ref","position","width","height","backgroundColor","cursor","zIndex","flexShrink"],"mappings":"0LAeO,MAAMA,EAA4C,EACrDC,gBACAC,iBACAC,gBAEA,MAAMC,EAAYC,EAAuB,MACnCC,EAAkBD,EAAmD,OACrEE,aAAEA,EAAYC,WAAEA,EAAUC,cAAEA,GAAkBC,IAEpDC,EAAU,KAGN,GAAIH,GAAcN,IAAmBE,EAAUQ,QAC3C,OAGJ,MAAMC,EAAeN,EAAaN,GAC5Ba,EAAgBP,EAAaL,GACnC,IAAIW,IAAiBC,EAAe,OAGpC,MAAMC,EAAaX,EAAUQ,QACR,eAAdT,EACGC,EAAUQ,QAAQI,YAClBZ,EAAUQ,QAAQK,aACQ,GAEpCX,EAAgBM,QAAU,IAAIM,EAAe,CACzCC,WAAYN,EAAaO,QACzBC,YAAaP,EAAcM,QAC3Bb,eACAN,gBACAC,iBACAC,YACAmB,eAAgBb,EAAcc,UAAW,EACzCd,cAAe,CACXe,MAAOf,EAAce,MACrBC,UAAWhB,EAAcgB,WAE7BV,eAIJ,MAAMW,EAAWtB,EAAUQ,QAC3B,IAAIe,GAAa,EACbC,EAAW,EAEf,MAAMC,EAAeC,IACjBA,EAAEC,iBACFJ,GAAa,EACbC,EAAyB,eAAdzB,EAA6B2B,EAAEE,QAAUF,EAAEG,QAClD3B,EAAgBM,SAChBN,EAAgBM,QAAQiB,eAI1BK,EAAgBJ,IAClB,IAAIH,IAAerB,EAAgBM,QAAS,OAC5C,MACMuB,GAD2B,eAAdhC,EAA6B2B,EAAEE,QAAUF,EAAEG,SACnCL,EAC3BtB,EAAgBM,QAAQwB,SAASD,IAG/BE,EAAY,KACXV,GAAcrB,EAAgBM,UAC7Be,GAAa,EACbrB,EAAgBM,QAAQyB,cAQhC,OAJAX,EAASY,iBAAiB,YAAaT,GACvCU,SAASD,iBAAiB,YAAaJ,GACvCK,SAASD,iBAAiB,UAAWD,GAE9B,KACHX,EAASc,oBAAoB,YAAaX,GAC1CU,SAASC,oBAAoB,YAAaN,GAC1CK,SAASC,oBAAoB,UAAWH,GACrC/B,EAAgBM,SACfN,EAAgBM,QAAQ6B,YAGjC,CAACxC,EAAeC,EAAgBC,EAAWI,EAAcC,EAAYC,IAExE,MAAMiC,EAA6B,eAAdvC,EACrB,OACIwC,EAAA,MAAA,CACIC,IAAKxC,EACLoB,MAAO,CACHqB,SAAU,WACVC,MAAOJ,EAAe,OAAS,OAC/BK,OAAQL,EAAe,OAAS,OAChCM,gBAAiB,OACjBC,OAAQP,EAAe,YAAc,YACrCQ,OAAQ,IACRC,WAAY"}
|
|
@@ -1,31 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import { useRef, useEffect } from 'react';
|
|
3
|
-
import { useResizableContext } from '../shared/context.js';
|
|
4
|
-
|
|
5
|
-
const ResizePanel = ({ children, minSize = 100,
|
|
6
|
-
// onResize, // 暂时未使用,保留以备将来使用
|
|
7
|
-
}) => {
|
|
8
|
-
const panelRef = useRef(null);
|
|
9
|
-
const panelIndexRef = useRef(-1);
|
|
10
|
-
const { registerPanel, unregisterPanel, direction } = useResizableContext();
|
|
11
|
-
useEffect(() => {
|
|
12
|
-
if (!panelRef.current)
|
|
13
|
-
return;
|
|
14
|
-
const panelEl = panelRef.current;
|
|
15
|
-
panelIndexRef.current = registerPanel(panelEl, minSize);
|
|
16
|
-
return () => {
|
|
17
|
-
unregisterPanel(panelEl);
|
|
18
|
-
};
|
|
19
|
-
}, [minSize, registerPanel, unregisterPanel]);
|
|
20
|
-
return (jsx("div", { ref: panelRef, style: {
|
|
21
|
-
flex: 1,
|
|
22
|
-
minWidth: direction === 'horizontal' ? minSize : undefined,
|
|
23
|
-
minHeight: direction === 'vertical' ? minSize : undefined,
|
|
24
|
-
width: 'auto',
|
|
25
|
-
overflow: 'hidden',
|
|
26
|
-
position: 'relative',
|
|
27
|
-
}, children: jsx("div", { style: { height: '100%', padding: 16 }, children: children }) }));
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
export { ResizePanel };
|
|
1
|
+
import{jsx as r}from"react/jsx-runtime";import{useRef as e,useEffect as t}from"react";import{useResizableContext as i}from"../shared/context.js";const n=({children:n,minSize:o=100})=>{const d=e(null),c=e(-1),{registerPanel:l,unregisterPanel:h,direction:s}=i();return t(()=>{if(!d.current)return;const r=d.current;return c.current=l(r,o),()=>{h(r)}},[o,l,h]),r("div",{ref:d,style:{flex:1,minWidth:"horizontal"===s?o:void 0,minHeight:"vertical"===s?o:void 0,width:"auto",overflow:"hidden",position:"relative"},children:r("div",{style:{height:"100%",padding:16},children:n})})};export{n as ResizePanel};
|
|
31
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/ResizePanel/index.tsx"],"sourcesContent":[null],"names":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/ResizePanel/index.tsx"],"sourcesContent":[null],"names":["ResizePanel","children","minSize","panelRef","useRef","panelIndexRef","registerPanel","unregisterPanel","direction","useResizableContext","useEffect","current","panelEl","_jsx","ref","style","flex","minWidth","undefined","minHeight","width","overflow","position","height","padding"],"mappings":"iJAaO,MAAMA,EAA0C,EACnDC,WACAC,UAAU,QAGV,MAAMC,EAAWC,EAAuB,MAClCC,EAAgBD,OAChBE,cAAEA,EAAaC,gBAAEA,EAAeC,UAAEA,GAAcC,IAWtD,OATAC,EAAU,KACN,IAAIP,EAASQ,QAAS,OACtB,MAAMC,EAAUT,EAASQ,QAEzB,OADAN,EAAcM,QAAUL,EAAcM,EAASV,GACxC,KACHK,EAAgBK,KAErB,CAACV,EAASI,EAAeC,IAGxBM,EAAA,MAAA,CACIC,IAAKX,EACLY,MAAO,CACHC,KAAM,EACNC,SAAwB,eAAdT,EAA6BN,OAAUgB,EACjDC,UAAyB,aAAdX,EAA2BN,OAAUgB,EAChDE,MAAO,OACPC,SAAU,SACVC,SAAU,YACbrB,SAEDY,SAAKE,MAAO,CAACQ,OAAQ,OAAQC,QAAS,IAAGvB,SACpCA"}
|
|
@@ -1,59 +1,2 @@
|
|
|
1
|
-
import
|
|
2
|
-
import React, { useRef, useState, useCallback } from 'react';
|
|
3
|
-
import { ResizableContext } from '../shared/context.js';
|
|
4
|
-
import { ResizeHandle } from '../ResizeHandle/index.js';
|
|
5
|
-
|
|
6
|
-
const ResizePanelGroup = ({ children, direction = 'horizontal', style, virtual = false, virtualConfig = {}, }) => {
|
|
7
|
-
const panelInfos = useRef([]);
|
|
8
|
-
const [panelCount, setPanelCount] = useState(0);
|
|
9
|
-
const registerPanel = useCallback((panelEl, minSize) => {
|
|
10
|
-
const index = panelInfos.current.length;
|
|
11
|
-
panelInfos.current.push({ panelEl, minSize });
|
|
12
|
-
setPanelCount(panelInfos.current.length);
|
|
13
|
-
return index;
|
|
14
|
-
}, []);
|
|
15
|
-
const unregisterPanel = useCallback((panelEl) => {
|
|
16
|
-
panelInfos.current = panelInfos.current.filter(info => info.panelEl !== panelEl);
|
|
17
|
-
setPanelCount(panelInfos.current.length);
|
|
18
|
-
}, []);
|
|
19
|
-
const getPanelInfo = useCallback((index) => {
|
|
20
|
-
return panelInfos.current[index] || null;
|
|
21
|
-
}, []);
|
|
22
|
-
const getPanelIndex = useCallback((panelEl) => {
|
|
23
|
-
return panelInfos.current.findIndex(info => info.panelEl === panelEl);
|
|
24
|
-
}, []);
|
|
25
|
-
const childrenArray = React.Children.toArray(children);
|
|
26
|
-
const panelsWithHandles = [];
|
|
27
|
-
childrenArray.forEach((child, index) => {
|
|
28
|
-
panelsWithHandles.push(child);
|
|
29
|
-
// 在面板之间插入拖拽器(最后一个面板后不插入)
|
|
30
|
-
if (index < childrenArray.length - 1) {
|
|
31
|
-
panelsWithHandles.push(jsx(ResizeHandle, { prePanelIndex: index, nextPanelIndex: index + 1, direction: direction }, `handle-${index}`));
|
|
32
|
-
}
|
|
33
|
-
});
|
|
34
|
-
// 合并虚拟化配置
|
|
35
|
-
const mergedVirtualConfig = {
|
|
36
|
-
enabled: virtual,
|
|
37
|
-
...virtualConfig,
|
|
38
|
-
};
|
|
39
|
-
const contextValue = {
|
|
40
|
-
panelCount: panelCount,
|
|
41
|
-
registerPanel,
|
|
42
|
-
unregisterPanel,
|
|
43
|
-
getPanelInfo,
|
|
44
|
-
getPanelIndex,
|
|
45
|
-
direction,
|
|
46
|
-
panelInfos: panelInfos.current,
|
|
47
|
-
virtualConfig: mergedVirtualConfig,
|
|
48
|
-
};
|
|
49
|
-
return (jsx(ResizableContext.Provider, { value: contextValue, children: jsx("div", { style: {
|
|
50
|
-
display: 'flex',
|
|
51
|
-
flexDirection: direction === 'horizontal' ? 'row' : 'column',
|
|
52
|
-
height: '100%',
|
|
53
|
-
position: 'relative', // 为虚拟节点定位提供参考
|
|
54
|
-
...style,
|
|
55
|
-
}, children: panelsWithHandles }) }));
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
export { ResizePanelGroup };
|
|
1
|
+
import{jsx as e}from"react/jsx-runtime";import n,{useRef as r,useState as t,useCallback as l}from"react";import{ResizableContext as i}from"../shared/context.js";import{ResizeHandle as o}from"../ResizeHandle/index.js";const a=({children:a,direction:c="horizontal",style:u,virtual:d=!1,virtualConfig:s={}})=>{const h=r([]),[p,f]=t(0),g=l((e,n)=>{const r=h.current.length;return h.current.push({panelEl:e,minSize:n}),f(h.current.length),r},[]),m=l(e=>{h.current=h.current.filter(n=>n.panelEl!==e),f(h.current.length)},[]),x=l(e=>h.current[e]||null,[]),v=l(e=>h.current.findIndex(n=>n.panelEl===e),[]),P=n.Children.toArray(a),I=[];P.forEach((n,r)=>{I.push(n),r<P.length-1&&I.push(e(o,{prePanelIndex:r,nextPanelIndex:r+1,direction:c},`handle-${r}`))});const y={enabled:d,...s},z={panelCount:p,registerPanel:g,unregisterPanel:m,getPanelInfo:x,getPanelIndex:v,direction:c,panelInfos:h.current,virtualConfig:y};return e(i.Provider,{value:z,children:e("div",{style:{display:"flex",flexDirection:"horizontal"===c?"row":"column",height:"100%",position:"relative",...u},children:I})})};export{a as ResizePanelGroup};
|
|
59
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../../../src/components/ResizePanelGroup/index.tsx"],"sourcesContent":[null],"names":["
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../../../src/components/ResizePanelGroup/index.tsx"],"sourcesContent":[null],"names":["ResizePanelGroup","children","direction","style","virtual","virtualConfig","panelInfos","useRef","panelCount","setPanelCount","useState","registerPanel","useCallback","panelEl","minSize","index","current","length","push","unregisterPanel","filter","info","getPanelInfo","getPanelIndex","findIndex","childrenArray","React","Children","toArray","panelsWithHandles","forEach","child","_jsx","ResizeHandle","prePanelIndex","nextPanelIndex","mergedVirtualConfig","enabled","contextValue","ResizableContext","Provider","value","display","flexDirection","height","position"],"mappings":"+NAiBaA,EAAoD,EAC7DC,WACAC,YAAY,aACZC,QACAC,WAAU,EACVC,gBAAgB,CAAA,MAEhB,MAAMC,EAAaC,EAAoB,KAChCC,EAAYC,GAAiBC,EAAS,GAEvCC,EAAgBC,EAAY,CAACC,EAAsBC,KACrD,MAAMC,EAAQT,EAAWU,QAAQC,OAGjC,OAFAX,EAAWU,QAAQE,KAAK,CAAEL,UAASC,YACnCL,EAAcH,EAAWU,QAAQC,QAC1BF,GACR,IAEGI,EAAkBP,EAAaC,IACjCP,EAAWU,QAAUV,EAAWU,QAAQI,OAAOC,GAAQA,EAAKR,UAAYA,GACxEJ,EAAcH,EAAWU,QAAQC,SAClC,IAEGK,EAAeV,EAAaG,GACvBT,EAAWU,QAAQD,IAAU,KACrC,IAEGQ,EAAgBX,EAAaC,GACxBP,EAAWU,QAAQQ,UAAUH,GAAQA,EAAKR,UAAYA,GAC9D,IAEGY,EAAgBC,EAAMC,SAASC,QAAQ3B,GACvC4B,EAAuC,GAE7CJ,EAAcK,QAAQ,CAACC,EAAOhB,KAC1Bc,EAAkBX,KAAKa,GAGnBhB,EAAQU,EAAcR,OAAS,GAC/BY,EAAkBX,KACdc,EAACC,GAEGC,cAAenB,EACfoB,eAAgBpB,EAAQ,EACxBb,UAAWA,GAHN,UAAUa,QAU/B,MAAMqB,EAAqC,CACvCC,QAASjC,KACNC,GAGDiC,EAAsC,CACxC9B,WAAYA,EACZG,gBACAQ,kBACAG,eACAC,gBACArB,YACAI,WAAYA,EAAWU,QACvBX,cAAe+B,GAGnB,OACIJ,EAACO,EAAiBC,SAAQ,CAACC,MAAOH,EAAYrC,SAC1C+B,EAAA,MAAA,CAAK7B,MAAO,CACJuC,QAAS,OACTC,cAA6B,eAAdzC,EAA6B,MAAQ,SACpD0C,OAAQ,OACRC,SAAU,cACP1C,GACVF,SACI4B"}
|