react-resizable-panels 0.0.2 → 0.0.4
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 +13 -0
- package/README.md +4 -5
- package/dist/react-resizable-panels.d.ts +10 -10
- package/dist/react-resizable-panels.d.ts.map +1 -1
- package/dist/react-resizable-panels.js +132 -74
- package/dist/react-resizable-panels.js.map +1 -1
- package/dist/react-resizable-panels.module.js +130 -72
- package/dist/react-resizable-panels.module.js.map +1 -1
- package/package.json +4 -12
- package/src/Panel.tsx +23 -7
- package/src/PanelContexts.ts +5 -4
- package/src/PanelGroup.tsx +140 -60
- package/src/PanelResizeHandle.tsx +12 -7
- package/src/index.ts +1 -1
- package/src/types.ts +3 -4
- package/.proxyrc +0 -8
- package/dist/index.8be10522.js +0 -28334
- package/dist/index.8be10522.js.map +0 -1
- package/dist/index.d85b50e4.css +0 -95
- package/dist/index.d85b50e4.css.map +0 -1
- package/dist/index.html +0 -9
- package/tsconfig.json +0 -6
- package/website/demo.tsx +0 -140
- package/website/index.html +0 -9
- package/website/index.tsx +0 -12
- package/website/root.css +0 -15
- package/website/styles.module.css +0 -77
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
3
|
+
## 0.0.4
|
|
4
|
+
* [#8](https://github.com/bvaughn/react-resizable-panels/issues/8): Added optional `order` prop to `Panel` to improve conditional rendering.
|
|
5
|
+
|
|
6
|
+
## 0.0.3
|
|
7
|
+
* [#3](https://github.com/bvaughn/react-resizable-panels/issues/3): `Panel`s can be conditionally rendered within a group. `PanelGroup` will persist separate layouts for each combination of visible panels.
|
|
8
|
+
|
|
9
|
+
## 0.0.2
|
|
10
|
+
* Documentation-only update.
|
|
11
|
+
|
|
12
|
+
## 0.0.1
|
|
13
|
+
* Initial release.
|
package/README.md
CHANGED
|
@@ -1,8 +1,6 @@
|
|
|
1
1
|
# react-resizable-panels
|
|
2
2
|
React components for resizable panel groups/layouts
|
|
3
3
|
|
|
4
|
-
[Try a demo on Code Sandbox](https://codesandbox.io/s/react-panel-group-demo-ts9xqk)
|
|
5
|
-
|
|
6
4
|
```jsx
|
|
7
5
|
import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
|
|
8
6
|
|
|
@@ -29,7 +27,7 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
|
|
|
29
27
|
| `autoSaveId` | `?string` | Unique id used to auto-save group arrangement via `localStorage`
|
|
30
28
|
| `children` | `ReactNode[]` | Arbitrary React element(s)
|
|
31
29
|
| `className` | `?string` | Class name
|
|
32
|
-
| `direction` | `"horizontal"
|
|
30
|
+
| `direction` | `"horizontal" \| "vertical"` | Group orientation
|
|
33
31
|
| `height` | `number` | Height of group (in pixels)
|
|
34
32
|
| `width` | `number` | Width of group (in pixels)
|
|
35
33
|
|
|
@@ -41,6 +39,7 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
|
|
|
41
39
|
| `defaultSize` | `?number` | Initial size of panel (relative to other panels within the group)
|
|
42
40
|
| `id` | `string` | Panel id (must be unique within the current group)
|
|
43
41
|
| `minSize` | `?number` | Minum allowable size of panel (0.0 - 1.0)
|
|
42
|
+
| `order` | `?number` | Order of panel within group; required for groups with conditionally rendered panels
|
|
44
43
|
|
|
45
44
|
### `PanelResizeHandle`
|
|
46
45
|
| prop | type | description
|
|
@@ -48,5 +47,5 @@ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
|
|
|
48
47
|
| `children` | `?ReactNode` | Custom drag UI; can be any arbitrary React element(s)
|
|
49
48
|
| `className` | `?string` | Class name
|
|
50
49
|
| `disabled` | `?boolean` | Disable drag handle
|
|
51
|
-
| `panelAfter` | `
|
|
52
|
-
| `panelBefore` | `
|
|
50
|
+
| `panelAfter` | `string` | Id of panel after (below or to the right of) the drag handle
|
|
51
|
+
| `panelBefore` | `string` | Id of panel before (above or to the left of) the drag handle
|
|
@@ -1,28 +1,28 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
2
|
type Direction = "horizontal" | "vertical";
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
children: ReactNode;
|
|
3
|
+
export function Panel({ children, className, defaultSize, id, minSize, order, }: {
|
|
4
|
+
children?: ReactNode;
|
|
6
5
|
className?: string;
|
|
7
6
|
defaultSize?: number;
|
|
8
|
-
id:
|
|
7
|
+
id: string;
|
|
9
8
|
minSize?: number;
|
|
10
|
-
|
|
9
|
+
order?: number | null;
|
|
10
|
+
}): JSX.Element;
|
|
11
11
|
type Props = {
|
|
12
12
|
autoSaveId?: string;
|
|
13
|
-
children
|
|
13
|
+
children?: ReactNode[];
|
|
14
14
|
className?: string;
|
|
15
15
|
direction: Direction;
|
|
16
16
|
height: number;
|
|
17
17
|
width: number;
|
|
18
18
|
};
|
|
19
|
-
export function PanelGroup({ autoSaveId, children, className, direction, height, width }: Props):
|
|
19
|
+
export function PanelGroup({ autoSaveId, children, className, direction, height, width, }: Props): JSX.Element;
|
|
20
20
|
export function PanelResizeHandle({ children, className, disabled, panelAfter, panelBefore, }: {
|
|
21
21
|
children?: ReactNode;
|
|
22
22
|
className?: string;
|
|
23
23
|
disabled?: boolean;
|
|
24
|
-
panelAfter:
|
|
25
|
-
panelBefore:
|
|
26
|
-
}):
|
|
24
|
+
panelAfter: string;
|
|
25
|
+
panelBefore: string;
|
|
26
|
+
}): JSX.Element;
|
|
27
27
|
|
|
28
28
|
//# sourceMappingURL=react-resizable-panels.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":";AAAA,iBAAwB,YAAY,GAAG,UAAU,CAAC;
|
|
1
|
+
{"mappings":";AAAA,iBAAwB,YAAY,GAAG,UAAU,CAAC;AEOlD,sBAA8B,EAC5B,QAAe,EACf,SAAc,EACd,WAAiB,EACjB,EAAE,EACF,OAAa,EACb,KAAY,GACb,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CACvB,eAwCA;AC/CD,aAAa;IACX,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,SAAS,EAAE,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,EAAE,SAAS,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAQF,2BAAmC,EACjC,UAAU,EACV,QAAe,EACf,SAAc,EACd,SAAS,EACT,MAAM,EACN,KAAK,GACN,EAAE,KAAK,eA8LP;AC7ND,kCAA0C,EACxC,QAAe,EACf,SAAc,EACd,QAAgB,EAChB,UAAU,EACV,WAAW,GACZ,EAAE;IACD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;CACrB,eAoEA","sources":["packages/react-resizable-panels/src/src/types.ts","packages/react-resizable-panels/src/src/PanelContexts.ts","packages/react-resizable-panels/src/src/Panel.tsx","packages/react-resizable-panels/src/src/PanelGroup.tsx","packages/react-resizable-panels/src/src/PanelResizeHandle.tsx","packages/react-resizable-panels/src/src/index.ts","packages/react-resizable-panels/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,"import Panel from \"./Panel\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelGroup, PanelResizeHandle };\n"],"names":[],"version":3,"file":"react-resizable-panels.d.ts.map","sourceRoot":"../../../"}
|
|
@@ -1,101 +1,124 @@
|
|
|
1
|
-
var $
|
|
2
|
-
var $
|
|
1
|
+
var $b2QPe$reactjsxdevruntime = require("react/jsx-dev-runtime");
|
|
2
|
+
var $b2QPe$react = require("react");
|
|
3
3
|
|
|
4
4
|
function $parcel$export(e, n, v, s) {
|
|
5
5
|
Object.defineProperty(e, n, {get: v, set: s, enumerable: true, configurable: true});
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
$parcel$export(module.exports, "Panel", () => $
|
|
9
|
-
$parcel$export(module.exports, "PanelGroup", () => $
|
|
10
|
-
$parcel$export(module.exports, "PanelResizeHandle", () => $
|
|
8
|
+
$parcel$export(module.exports, "Panel", () => $6d390b7f2e6b107f$export$2e2bcd8739ae039);
|
|
9
|
+
$parcel$export(module.exports, "PanelGroup", () => $d428eaeef644efb2$export$2e2bcd8739ae039);
|
|
10
|
+
$parcel$export(module.exports, "PanelResizeHandle", () => $d578a49f00f1bdeb$export$2e2bcd8739ae039);
|
|
11
11
|
|
|
12
12
|
|
|
13
13
|
|
|
14
|
-
const $
|
|
14
|
+
const $3251d17c1c3bce6c$export$7d8c6d083caec74a = (0, $b2QPe$react.createContext)(null);
|
|
15
15
|
|
|
16
16
|
|
|
17
|
-
function $
|
|
18
|
-
const context = (0, $
|
|
17
|
+
function $6d390b7f2e6b107f$export$2e2bcd8739ae039({ children: children = null , className: className = "" , defaultSize: defaultSize = 0.1 , id: id , minSize: minSize = 0.1 , order: order = null }) {
|
|
18
|
+
const context = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
|
|
19
19
|
if (context === null) throw Error(`Panel components must be rendered within a PanelGroup container`);
|
|
20
|
-
|
|
21
|
-
|
|
20
|
+
if (minSize > defaultSize) {
|
|
21
|
+
console.error(`Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`);
|
|
22
|
+
defaultSize = minSize;
|
|
23
|
+
}
|
|
24
|
+
const { getPanelStyle: getPanelStyle , registerPanel: registerPanel , unregisterPanel: unregisterPanel } = context;
|
|
25
|
+
(0, $b2QPe$react.useLayoutEffect)(()=>{
|
|
22
26
|
const panel = {
|
|
23
27
|
defaultSize: defaultSize,
|
|
24
28
|
id: id,
|
|
25
|
-
minSize: minSize
|
|
29
|
+
minSize: minSize,
|
|
30
|
+
order: order
|
|
26
31
|
};
|
|
27
32
|
registerPanel(id, panel);
|
|
33
|
+
return ()=>{
|
|
34
|
+
unregisterPanel(id);
|
|
35
|
+
};
|
|
28
36
|
}, [
|
|
29
37
|
defaultSize,
|
|
38
|
+
id,
|
|
30
39
|
minSize,
|
|
40
|
+
order,
|
|
31
41
|
registerPanel,
|
|
32
|
-
|
|
42
|
+
unregisterPanel
|
|
33
43
|
]);
|
|
34
44
|
const style = getPanelStyle(id);
|
|
35
|
-
return /*#__PURE__*/ (0, $
|
|
45
|
+
return /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)("div", {
|
|
36
46
|
className: className,
|
|
37
47
|
style: style,
|
|
38
48
|
children: children
|
|
39
|
-
}
|
|
49
|
+
}, void 0, false, {
|
|
50
|
+
fileName: "packages/react-resizable-panels/src/Panel.tsx",
|
|
51
|
+
lineNumber: 58,
|
|
52
|
+
columnNumber: 5
|
|
53
|
+
}, this);
|
|
40
54
|
}
|
|
41
55
|
|
|
42
56
|
|
|
43
57
|
|
|
44
58
|
|
|
45
59
|
|
|
46
|
-
const $
|
|
47
|
-
function $
|
|
48
|
-
const
|
|
60
|
+
const $d428eaeef644efb2$var$PRECISION = 5;
|
|
61
|
+
function $d428eaeef644efb2$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , children: children = null , className: className = "" , direction: direction , height: height , width: width }) {
|
|
62
|
+
const [panels, setPanels] = (0, $b2QPe$react.useState)(new Map());
|
|
49
63
|
// 0-1 values representing the relative size of each panel.
|
|
50
|
-
const [sizes, setSizes] = (0, $
|
|
64
|
+
const [sizes, setSizes] = (0, $b2QPe$react.useState)([]);
|
|
51
65
|
// Store committed values to avoid unnecessarily re-running memoization/effects functions.
|
|
52
|
-
const committedValuesRef = (0, $
|
|
66
|
+
const committedValuesRef = (0, $b2QPe$react.useRef)({
|
|
53
67
|
direction: direction,
|
|
54
68
|
height: height,
|
|
69
|
+
panels: panels,
|
|
55
70
|
sizes: sizes,
|
|
56
71
|
width: width
|
|
57
72
|
});
|
|
58
|
-
(0, $
|
|
73
|
+
(0, $b2QPe$react.useLayoutEffect)(()=>{
|
|
59
74
|
committedValuesRef.current.direction = direction;
|
|
60
75
|
committedValuesRef.current.height = height;
|
|
76
|
+
committedValuesRef.current.panels = panels;
|
|
61
77
|
committedValuesRef.current.sizes = sizes;
|
|
62
78
|
committedValuesRef.current.width = width;
|
|
63
79
|
});
|
|
64
80
|
// Once all panels have registered themselves,
|
|
65
81
|
// Compute the initial sizes based on default weights.
|
|
66
82
|
// This assumes that panels register during initial mount (no conditional rendering)!
|
|
67
|
-
(0, $
|
|
68
|
-
const panels = panelsRef.current;
|
|
83
|
+
(0, $b2QPe$react.useLayoutEffect)(()=>{
|
|
69
84
|
const sizes = committedValuesRef.current.sizes;
|
|
70
|
-
if (sizes.length === panels.
|
|
85
|
+
if (sizes.length === panels.size) return;
|
|
86
|
+
// TODO [panels]
|
|
87
|
+
// Validate that the total minSize is <= 1.
|
|
71
88
|
// If this panel has been configured to persist sizing information,
|
|
72
89
|
// default size should be restored from local storage if possible.
|
|
73
90
|
let defaultSizes = undefined;
|
|
74
91
|
if (autoSaveId) try {
|
|
75
|
-
const value = localStorage.getItem(
|
|
92
|
+
const value = localStorage.getItem($d428eaeef644efb2$var$createLocalStorageKey(autoSaveId, panels));
|
|
76
93
|
if (value) defaultSizes = JSON.parse(value);
|
|
77
94
|
} catch (error) {}
|
|
78
|
-
if (
|
|
95
|
+
if (defaultSizes != null) setSizes(defaultSizes);
|
|
79
96
|
else {
|
|
80
|
-
const
|
|
97
|
+
const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
|
|
98
|
+
const totalWeight = panelsArray.reduce((weight, panel)=>{
|
|
81
99
|
return weight + panel.defaultSize;
|
|
82
100
|
}, 0);
|
|
83
|
-
setSizes(
|
|
101
|
+
setSizes(panelsArray.map((panel)=>panel.defaultSize / totalWeight));
|
|
84
102
|
}
|
|
85
103
|
}, [
|
|
86
|
-
autoSaveId
|
|
104
|
+
autoSaveId,
|
|
105
|
+
panels
|
|
87
106
|
]);
|
|
88
|
-
(0, $
|
|
89
|
-
if (autoSaveId
|
|
90
|
-
|
|
107
|
+
(0, $b2QPe$react.useEffect)(()=>{
|
|
108
|
+
if (autoSaveId) {
|
|
109
|
+
if (sizes.length === 0 || sizes.length !== panels.size) return;
|
|
110
|
+
// If this panel has been configured to persist sizing information, save sizes to local storage.
|
|
111
|
+
localStorage.setItem($d428eaeef644efb2$var$createLocalStorageKey(autoSaveId, panels), JSON.stringify(sizes));
|
|
112
|
+
}
|
|
91
113
|
}, [
|
|
92
114
|
autoSaveId,
|
|
115
|
+
panels,
|
|
93
116
|
sizes
|
|
94
117
|
]);
|
|
95
|
-
const getPanelStyle = (0, $
|
|
96
|
-
const panels =
|
|
97
|
-
const offset = $
|
|
98
|
-
const size = $
|
|
118
|
+
const getPanelStyle = (0, $b2QPe$react.useCallback)((id)=>{
|
|
119
|
+
const { panels: panels } = committedValuesRef.current;
|
|
120
|
+
const offset = $d428eaeef644efb2$var$getOffset(panels, id, direction, sizes, height, width);
|
|
121
|
+
const size = $d428eaeef644efb2$var$getSize(panels, id, direction, sizes, height, width);
|
|
99
122
|
if (direction === "horizontal") return {
|
|
100
123
|
height: "100%",
|
|
101
124
|
position: "absolute",
|
|
@@ -116,45 +139,66 @@ function $da932bb3fa0f399b$export$2e2bcd8739ae039({ autoSaveId: autoSaveId , chi
|
|
|
116
139
|
sizes,
|
|
117
140
|
width
|
|
118
141
|
]);
|
|
119
|
-
const registerPanel = (0, $
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
142
|
+
const registerPanel = (0, $b2QPe$react.useCallback)((id, panel)=>{
|
|
143
|
+
setPanels((prevPanels)=>{
|
|
144
|
+
if (prevPanels.has(id)) return prevPanels;
|
|
145
|
+
const nextPanels = new Map(prevPanels);
|
|
146
|
+
nextPanels.set(id, panel);
|
|
147
|
+
return nextPanels;
|
|
148
|
+
});
|
|
124
149
|
}, []);
|
|
125
|
-
const registerResizeHandle = (0, $
|
|
150
|
+
const registerResizeHandle = (0, $b2QPe$react.useCallback)((idBefore, idAfter)=>{
|
|
126
151
|
return (event)=>{
|
|
127
152
|
event.preventDefault();
|
|
128
|
-
const panels =
|
|
129
|
-
const { direction: direction , height: height , sizes: prevSizes , width: width } = committedValuesRef.current;
|
|
153
|
+
const { direction: direction , height: height , panels: panels , sizes: prevSizes , width: width } = committedValuesRef.current;
|
|
130
154
|
const isHorizontal = direction === "horizontal";
|
|
131
155
|
const movement = isHorizontal ? event.movementX : event.movementY;
|
|
132
156
|
const delta = isHorizontal ? movement / width : movement / height;
|
|
133
|
-
const nextSizes = $
|
|
157
|
+
const nextSizes = $d428eaeef644efb2$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes);
|
|
134
158
|
if (prevSizes !== nextSizes) setSizes(nextSizes);
|
|
135
159
|
};
|
|
160
|
+
// TODO [issues/5] Add to Map
|
|
161
|
+
}, []);
|
|
162
|
+
const unregisterPanel = (0, $b2QPe$react.useCallback)((id)=>{
|
|
163
|
+
setPanels((prevPanels)=>{
|
|
164
|
+
if (!prevPanels.has(id)) return prevPanels;
|
|
165
|
+
const nextPanels = new Map(prevPanels);
|
|
166
|
+
nextPanels.delete(id);
|
|
167
|
+
return nextPanels;
|
|
168
|
+
});
|
|
136
169
|
}, []);
|
|
137
|
-
const context = (0, $
|
|
170
|
+
const context = (0, $b2QPe$react.useMemo)(()=>({
|
|
138
171
|
direction: direction,
|
|
139
172
|
getPanelStyle: getPanelStyle,
|
|
140
173
|
registerPanel: registerPanel,
|
|
141
|
-
registerResizeHandle: registerResizeHandle
|
|
174
|
+
registerResizeHandle: registerResizeHandle,
|
|
175
|
+
unregisterPanel: unregisterPanel
|
|
142
176
|
}), [
|
|
143
177
|
direction,
|
|
144
178
|
getPanelStyle,
|
|
145
179
|
registerPanel,
|
|
146
|
-
registerResizeHandle
|
|
180
|
+
registerResizeHandle,
|
|
181
|
+
unregisterPanel
|
|
147
182
|
]);
|
|
148
|
-
return /*#__PURE__*/ (0, $
|
|
183
|
+
return /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a).Provider, {
|
|
149
184
|
value: context,
|
|
150
|
-
children: /*#__PURE__*/ (0, $
|
|
185
|
+
children: /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)("div", {
|
|
151
186
|
className: className,
|
|
152
187
|
children: children
|
|
153
|
-
}
|
|
154
|
-
|
|
188
|
+
}, void 0, false, {
|
|
189
|
+
fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
|
|
190
|
+
lineNumber: 224,
|
|
191
|
+
columnNumber: 7
|
|
192
|
+
}, this)
|
|
193
|
+
}, void 0, false, {
|
|
194
|
+
fileName: "packages/react-resizable-panels/src/PanelGroup.tsx",
|
|
195
|
+
lineNumber: 223,
|
|
196
|
+
columnNumber: 5
|
|
197
|
+
}, this);
|
|
155
198
|
}
|
|
156
|
-
function $
|
|
199
|
+
function $d428eaeef644efb2$var$adjustByDelta(panels, idBefore, idAfter, delta, prevSizes) {
|
|
157
200
|
if (delta === 0) return prevSizes;
|
|
201
|
+
const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
|
|
158
202
|
const nextSizes = prevSizes.concat();
|
|
159
203
|
let deltaApplied = 0;
|
|
160
204
|
// A resizing panel affects the panels before or after it.
|
|
@@ -165,20 +209,20 @@ function $da932bb3fa0f399b$var$adjustByDelta(panels, idBefore, idAfter, delta, p
|
|
|
165
209
|
// A positive delta means the panel immediately before the resizer should "expand".
|
|
166
210
|
// This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.
|
|
167
211
|
let pivotId = delta < 0 ? idBefore : idAfter;
|
|
168
|
-
let index =
|
|
212
|
+
let index = panelsArray.findIndex((panel)=>panel.id === pivotId);
|
|
169
213
|
while(true){
|
|
170
|
-
const panel =
|
|
214
|
+
const panel = panelsArray[index];
|
|
171
215
|
const prevSize = prevSizes[index];
|
|
172
216
|
const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);
|
|
173
217
|
if (prevSize !== nextSize) {
|
|
174
218
|
deltaApplied += prevSize - nextSize;
|
|
175
219
|
nextSizes[index] = nextSize;
|
|
176
|
-
if (deltaApplied.toPrecision($
|
|
220
|
+
if (deltaApplied.toPrecision($d428eaeef644efb2$var$PRECISION) >= delta.toPrecision($d428eaeef644efb2$var$PRECISION)) break;
|
|
177
221
|
}
|
|
178
222
|
if (delta < 0) {
|
|
179
223
|
if (--index < 0) break;
|
|
180
224
|
} else {
|
|
181
|
-
if (++index >=
|
|
225
|
+
if (++index >= panelsArray.length) break;
|
|
182
226
|
}
|
|
183
227
|
}
|
|
184
228
|
// If we were unable to resize any of the panels panels, return the previous state.
|
|
@@ -186,40 +230,50 @@ function $da932bb3fa0f399b$var$adjustByDelta(panels, idBefore, idAfter, delta, p
|
|
|
186
230
|
if (deltaApplied === 0) return prevSizes;
|
|
187
231
|
// Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.
|
|
188
232
|
pivotId = delta < 0 ? idAfter : idBefore;
|
|
189
|
-
index =
|
|
233
|
+
index = panelsArray.findIndex((panel)=>panel.id === pivotId);
|
|
190
234
|
nextSizes[index] = prevSizes[index] + deltaApplied;
|
|
191
235
|
return nextSizes;
|
|
192
236
|
}
|
|
193
|
-
function $
|
|
194
|
-
|
|
237
|
+
function $d428eaeef644efb2$var$createLocalStorageKey(autoSaveId, panels) {
|
|
238
|
+
const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
|
|
239
|
+
const panelIds = panelsArray.map((panel)=>panel.id);
|
|
240
|
+
return `PanelGroup:sizes:${autoSaveId}${panelIds.join("|")}`;
|
|
241
|
+
}
|
|
242
|
+
function $d428eaeef644efb2$var$getOffset(panels, id, direction, sizes, height, width) {
|
|
243
|
+
const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
|
|
244
|
+
let index = panelsArray.findIndex((panel)=>panel.id === id);
|
|
195
245
|
if (index < 0) return 0;
|
|
196
246
|
let scaledOffset = 0;
|
|
197
247
|
for(index = index - 1; index >= 0; index--){
|
|
198
|
-
const panel =
|
|
199
|
-
scaledOffset += $
|
|
248
|
+
const panel = panelsArray[index];
|
|
249
|
+
scaledOffset += $d428eaeef644efb2$var$getSize(panels, panel.id, direction, sizes, height, width);
|
|
200
250
|
}
|
|
201
251
|
return Math.round(scaledOffset);
|
|
202
252
|
}
|
|
203
|
-
function $
|
|
204
|
-
const
|
|
253
|
+
function $d428eaeef644efb2$var$getSize(panels, id, direction, sizes, height, width) {
|
|
254
|
+
const totalSize = direction === "horizontal" ? width : height;
|
|
255
|
+
if (panels.size === 1) return totalSize;
|
|
256
|
+
const panelsArray = $d428eaeef644efb2$var$panelsMapToSortedArray(panels);
|
|
257
|
+
const index = panelsArray.findIndex((panel)=>panel.id === id);
|
|
205
258
|
const size = sizes[index];
|
|
206
259
|
if (size == null) return 0;
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
260
|
+
return Math.round(size * totalSize);
|
|
261
|
+
}
|
|
262
|
+
function $d428eaeef644efb2$var$panelsMapToSortedArray(panels) {
|
|
263
|
+
return Array.from(panels.values()).sort((a, b)=>a.order - b.order);
|
|
210
264
|
}
|
|
211
265
|
|
|
212
266
|
|
|
213
267
|
|
|
214
268
|
|
|
215
269
|
|
|
216
|
-
function $
|
|
217
|
-
const context = (0, $
|
|
270
|
+
function $d578a49f00f1bdeb$export$2e2bcd8739ae039({ children: children = null , className: className = "" , disabled: disabled = false , panelAfter: panelAfter , panelBefore: panelBefore }) {
|
|
271
|
+
const context = (0, $b2QPe$react.useContext)((0, $3251d17c1c3bce6c$export$7d8c6d083caec74a));
|
|
218
272
|
if (context === null) throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);
|
|
219
273
|
const { direction: direction , registerResizeHandle: registerResizeHandle } = context;
|
|
220
|
-
const [resizeHandler, setResizeHandler] = (0, $
|
|
221
|
-
const [isDragging, setIsDragging] = (0, $
|
|
222
|
-
(0, $
|
|
274
|
+
const [resizeHandler, setResizeHandler] = (0, $b2QPe$react.useState)(null);
|
|
275
|
+
const [isDragging, setIsDragging] = (0, $b2QPe$react.useState)(false);
|
|
276
|
+
(0, $b2QPe$react.useEffect)(()=>{
|
|
223
277
|
if (disabled) setResizeHandler(null);
|
|
224
278
|
else setResizeHandler(()=>registerResizeHandle(panelBefore, panelAfter));
|
|
225
279
|
}, [
|
|
@@ -228,7 +282,7 @@ function $4eb88cfd3116c797$export$2e2bcd8739ae039({ children: children = null ,
|
|
|
228
282
|
panelBefore,
|
|
229
283
|
registerResizeHandle
|
|
230
284
|
]);
|
|
231
|
-
(0, $
|
|
285
|
+
(0, $b2QPe$react.useEffect)(()=>{
|
|
232
286
|
if (disabled || resizeHandler == null || !isDragging) return;
|
|
233
287
|
document.body.style.cursor = direction === "horizontal" ? "ew-resize" : "ns-resize";
|
|
234
288
|
const onMouseLeave = (_)=>{
|
|
@@ -255,7 +309,7 @@ function $4eb88cfd3116c797$export$2e2bcd8739ae039({ children: children = null ,
|
|
|
255
309
|
isDragging,
|
|
256
310
|
resizeHandler
|
|
257
311
|
]);
|
|
258
|
-
return /*#__PURE__*/ (0, $
|
|
312
|
+
return /*#__PURE__*/ (0, $b2QPe$reactjsxdevruntime.jsxDEV)("div", {
|
|
259
313
|
className: className,
|
|
260
314
|
onMouseDown: ()=>setIsDragging(true),
|
|
261
315
|
onMouseUp: ()=>setIsDragging(false),
|
|
@@ -263,7 +317,11 @@ function $4eb88cfd3116c797$export$2e2bcd8739ae039({ children: children = null ,
|
|
|
263
317
|
cursor: direction === "horizontal" ? "ew-resize" : "ns-resize"
|
|
264
318
|
},
|
|
265
319
|
children: children
|
|
266
|
-
}
|
|
320
|
+
}, void 0, false, {
|
|
321
|
+
fileName: "packages/react-resizable-panels/src/PanelResizeHandle.tsx",
|
|
322
|
+
lineNumber: 75,
|
|
323
|
+
columnNumber: 5
|
|
324
|
+
}, this);
|
|
267
325
|
}
|
|
268
326
|
|
|
269
327
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"mappings":"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","sources":["src/index.ts","src/Panel.tsx","src/PanelContexts.ts","src/PanelGroup.tsx","src/PanelResizeHandle.tsx"],"sourcesContent":["import Panel from \"./Panel\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelGroup, PanelResizeHandle };","import { ReactNode, useContext, useLayoutEffect } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { PanelId } from \"./types\";\n\n// TODO [panels]\n// Support min pixel size too.\n// PanelGroup should warn if total width is less min pixel widths.\nexport default function Panel({\n children,\n className = \"\",\n defaultSize = 0.1,\n id,\n minSize = 0.1,\n}: {\n children: ReactNode;\n className?: string;\n defaultSize?: number;\n id: PanelId;\n minSize?: number;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(`Panel components must be rendered within a PanelGroup container`);\n }\n\n const { getPanelStyle, registerPanel } = context;\n\n useLayoutEffect(() => {\n const panel = {\n defaultSize,\n id,\n minSize,\n };\n\n registerPanel(id, panel);\n }, [defaultSize, minSize, registerPanel, id]);\n\n const style = getPanelStyle(id);\n\n return (\n <div className={className} style={style}>\n {children}\n </div>\n );\n}\n","import { CSSProperties, createContext } from \"react\";\n\nimport { Panel, PanelId, ResizeHandler } from \"./types\";\n\nexport const PanelGroupContext = createContext<{\n direction: \"horizontal\" | \"vertical\";\n getPanelStyle: (id: PanelId) => CSSProperties;\n registerResizeHandle: (idBefore: PanelId, idAfter: PanelId) => ResizeHandler;\n registerPanel: (id: PanelId, panel: Panel) => void;\n} | null>(null);\n","import {\n CSSProperties,\n ReactNode,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { Direction, Panel, PanelId } from \"./types\";\n\ntype Props = {\n autoSaveId?: string;\n children: ReactNode[];\n className?: string;\n direction: Direction;\n height: number;\n width: number;\n};\n\nconst PRECISION = 5;\n\n// TODO [panels]\n// Within an active drag, remember original positions to refine more easily on expand.\n// Look at what the Chrome devtools Sources does.\n\nexport default function PanelGroup({ autoSaveId, children, className = \"\", direction, height, width }: Props) {\n const panelsRef = useRef<Panel[]>([]);\n\n // 0-1 values representing the relative size of each panel.\n const [sizes, setSizes] = useState<number[]>([]);\n\n // Store committed values to avoid unnecessarily re-running memoization/effects functions.\n const committedValuesRef = useRef<{\n direction: Direction;\n height: number;\n sizes: number[];\n width: number;\n }>({\n direction,\n height,\n sizes,\n width,\n });\n useLayoutEffect(() => {\n committedValuesRef.current.direction = direction;\n committedValuesRef.current.height = height;\n committedValuesRef.current.sizes = sizes;\n committedValuesRef.current.width = width;\n });\n\n // Once all panels have registered themselves,\n // Compute the initial sizes based on default weights.\n // This assumes that panels register during initial mount (no conditional rendering)!\n useLayoutEffect(() => {\n const panels = panelsRef.current;\n const sizes = committedValuesRef.current.sizes;\n if (sizes.length === panels.length) {\n return;\n }\n\n // If this panel has been configured to persist sizing information,\n // default size should be restored from local storage if possible.\n let defaultSizes: number[] | undefined = undefined;\n if (autoSaveId) {\n try {\n const value = localStorage.getItem(`PanelGroup:sizes:${autoSaveId}`);\n if (value) {\n defaultSizes = JSON.parse(value);\n }\n } catch (error) {}\n }\n\n if (sizes.length === 0 && defaultSizes != null && defaultSizes.length === panels.length) {\n setSizes(defaultSizes);\n } else {\n const totalWeight = panels.reduce((weight, panel) => {\n return weight + panel.defaultSize;\n }, 0);\n\n setSizes(panels.map(panel => panel.defaultSize / totalWeight));\n }\n }, [autoSaveId]);\n\n useEffect(() => {\n if (autoSaveId && sizes.length > 0) {\n // If this panel has been configured to persist sizing information, save sizes to local storage.\n localStorage.setItem(`PanelGroup:sizes:${autoSaveId}`, JSON.stringify(sizes));\n }\n }, [autoSaveId, sizes]);\n\n const getPanelStyle = useCallback(\n (id: PanelId): CSSProperties => {\n const panels = panelsRef.current;\n\n const offset = getOffset(panels, id, direction, sizes, height, width);\n const size = getSize(panels, id, direction, sizes, height, width);\n\n if (direction === \"horizontal\") {\n return {\n height: \"100%\",\n position: \"absolute\",\n left: offset,\n top: 0,\n width: size,\n };\n } else {\n return {\n height: size,\n position: \"absolute\",\n left: 0,\n top: offset,\n width: \"100%\",\n };\n }\n },\n [direction, height, sizes, width]\n );\n\n const registerPanel = useCallback((id: PanelId, panel: Panel) => {\n const panels = panelsRef.current;\n const index = panels.findIndex(panel => panel.id === id);\n if (index >= 0) {\n panels.splice(index, 1);\n }\n panels.push(panel);\n }, []);\n\n const registerResizeHandle = useCallback((idBefore: PanelId, idAfter: PanelId) => {\n return (event: MouseEvent) => {\n event.preventDefault();\n\n const panels = panelsRef.current;\n const { direction, height, sizes: prevSizes, width } = committedValuesRef.current;\n\n const isHorizontal = direction === \"horizontal\";\n const movement = isHorizontal ? event.movementX : event.movementY;\n const delta = isHorizontal ? movement / width : movement / height;\n\n const nextSizes = adjustByDelta(panels, idBefore, idAfter, delta, prevSizes);\n if (prevSizes !== nextSizes) {\n setSizes(nextSizes);\n }\n };\n }, []);\n\n const context = useMemo(\n () => ({\n direction,\n getPanelStyle,\n registerPanel,\n registerResizeHandle,\n }),\n [direction, getPanelStyle, registerPanel, registerResizeHandle]\n );\n\n return (\n <PanelGroupContext.Provider value={context}>\n <div className={className}>\n {children}\n </div>\n </PanelGroupContext.Provider>\n );\n}\n\nfunction adjustByDelta(\n panels: Panel[],\n idBefore: PanelId,\n idAfter: PanelId,\n delta: number,\n prevSizes: number[]\n): number[] {\n if (delta === 0) {\n return prevSizes;\n }\n\n const nextSizes = prevSizes.concat();\n\n let deltaApplied = 0;\n\n // A resizing panel affects the panels before or after it.\n //\n // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.\n // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.\n //\n // A positive delta means the panel immediately before the resizer should \"expand\".\n // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.\n let pivotId = delta < 0 ? idBefore : idAfter;\n let index = panels.findIndex(panel => panel.id === pivotId);\n while (true) {\n const panel = panels[index];\n const prevSize = prevSizes[index];\n const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);\n if (prevSize !== nextSize) {\n deltaApplied += prevSize - nextSize;\n\n nextSizes[index] = nextSize;\n\n if (deltaApplied.toPrecision(PRECISION) >= delta.toPrecision(PRECISION)) {\n break;\n }\n }\n\n if (delta < 0) {\n if (--index < 0) {\n break;\n }\n } else {\n if (++index >= panels.length) {\n break;\n }\n }\n }\n\n // If we were unable to resize any of the panels panels, return the previous state.\n // This will essentially bailout and ignore the \"mousemove\" event.\n if (deltaApplied === 0) {\n return prevSizes;\n }\n\n // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.\n pivotId = delta < 0 ? idAfter : idBefore;\n index = panels.findIndex(panel => panel.id === pivotId);\n nextSizes[index] = prevSizes[index] + deltaApplied;\n\n return nextSizes;\n}\n\nfunction getOffset(\n panels: Panel[],\n id: PanelId,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n let index = panels.findIndex(panel => panel.id === id);\n if (index < 0) {\n return 0;\n }\n\n let scaledOffset = 0;\n\n for (index = index - 1; index >= 0; index--) {\n const panel = panels[index];\n scaledOffset += getSize(panels, panel.id, direction, sizes, height, width);\n }\n\n return Math.round(scaledOffset);\n}\n\nfunction getSize(\n panels: Panel[],\n id: PanelId,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const index = panels.findIndex(panel => panel.id === id);\n const size = sizes[index];\n if (size == null) {\n return 0;\n }\n\n const totalSize = direction === \"horizontal\" ? width : height;\n\n if (panels.length === 1) {\n return totalSize;\n } else {\n return Math.round(size * totalSize);\n }\n}\n","import { ReactNode, useContext, useEffect, useState } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { PanelId, ResizeHandler } from \"./types\";\n\nexport default function PanelResizeHandle({\n children = null,\n className = \"\",\n disabled = false,\n panelAfter,\n panelBefore,\n}: {\n children?: ReactNode;\n className?: string;\n disabled?: boolean;\n panelAfter: PanelId;\n panelBefore: PanelId;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(`PanelResizeHandle components must be rendered within a PanelGroup container`);\n }\n\n const { direction, registerResizeHandle } = context;\n\n const [resizeHandler, setResizeHandler] = useState<ResizeHandler | null>(null);\n const [isDragging, setIsDragging] = useState(false);\n\n useEffect(() => {\n if (disabled) {\n setResizeHandler(null);\n } else {\n setResizeHandler(() => registerResizeHandle(panelBefore, panelAfter));\n }\n }, [disabled, panelAfter, panelBefore, registerResizeHandle]);\n\n useEffect(() => {\n if (disabled || resizeHandler == null || !isDragging) {\n return;\n }\n\n document.body.style.cursor = direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\";\n\n const onMouseLeave = (_: MouseEvent) => {\n setIsDragging(false);\n };\n\n const onMouseMove = (event: MouseEvent) => {\n resizeHandler(event);\n };\n\n const onMouseUp = (_: MouseEvent) => {\n setIsDragging(false);\n };\n\n document.body.addEventListener(\"mouseleave\", onMouseLeave);\n document.body.addEventListener(\"mousemove\", onMouseMove);\n document.body.addEventListener(\"mouseup\", onMouseUp);\n\n return () => {\n document.body.style.cursor = \"\";\n\n document.body.removeEventListener(\"mouseleave\", onMouseLeave);\n document.body.removeEventListener(\"mousemove\", onMouseMove);\n document.body.removeEventListener(\"mouseup\", onMouseUp);\n };\n }, [direction, disabled, isDragging, resizeHandler]);\n\n return (\n <div\n className={className}\n onMouseDown={() => setIsDragging(true)}\n onMouseUp={() => setIsDragging(false)}\n style={{\n cursor: direction === 'horizontal' ? 'ew-resize' : 'ns-resize'\n }}\n >\n {children}\n </div>\n );\n}\n"],"names":[],"version":3,"file":"react-resizable-panels.js.map"}
|
|
1
|
+
{"mappings":"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","sources":["packages/react-resizable-panels/src/index.ts","packages/react-resizable-panels/src/Panel.tsx","packages/react-resizable-panels/src/PanelContexts.ts","packages/react-resizable-panels/src/PanelGroup.tsx","packages/react-resizable-panels/src/PanelResizeHandle.tsx"],"sourcesContent":["import Panel from \"./Panel\";\nimport PanelGroup from \"./PanelGroup\";\nimport PanelResizeHandle from \"./PanelResizeHandle\";\n\nexport { Panel, PanelGroup, PanelResizeHandle };\n","import { ReactNode, useContext, useLayoutEffect } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\n\n// TODO [panels]\n// Support min pixel size too.\n// PanelGroup should warn if total width is less min pixel widths.\nexport default function Panel({\n children = null,\n className = \"\",\n defaultSize = 0.1,\n id,\n minSize = 0.1,\n order = null,\n}: {\n children?: ReactNode;\n className?: string;\n defaultSize?: number;\n id: string;\n minSize?: number;\n order?: number | null;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `Panel components must be rendered within a PanelGroup container`\n );\n }\n\n if (minSize > defaultSize) {\n console.error(\n `Panel minSize ${minSize} cannot be greater than defaultSize ${defaultSize}`\n );\n\n defaultSize = minSize;\n }\n\n const { getPanelStyle, registerPanel, unregisterPanel } = context;\n\n useLayoutEffect(() => {\n const panel = {\n defaultSize,\n id,\n minSize,\n order,\n };\n\n registerPanel(id, panel);\n\n return () => {\n unregisterPanel(id);\n };\n }, [defaultSize, id, minSize, order, registerPanel, unregisterPanel]);\n\n const style = getPanelStyle(id);\n\n return (\n <div className={className} style={style}>\n {children}\n </div>\n );\n}\n","import { CSSProperties, createContext } from \"react\";\n\nimport { PanelData, ResizeHandler } from \"./types\";\n\nexport const PanelGroupContext = createContext<{\n direction: \"horizontal\" | \"vertical\";\n getPanelStyle: (id: string) => CSSProperties;\n registerPanel: (id: string, panel: PanelData) => void;\n registerResizeHandle: (idBefore: string, idAfter: string) => ResizeHandler;\n unregisterPanel: (id: string) => void;\n} | null>(null);\n","import {\n CSSProperties,\n ReactNode,\n useCallback,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n useState,\n} from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { Direction, PanelData } from \"./types\";\n\ntype Props = {\n autoSaveId?: string;\n children?: ReactNode[];\n className?: string;\n direction: Direction;\n height: number;\n width: number;\n};\n\nconst PRECISION = 5;\n\n// TODO [panels]\n// Within an active drag, remember original positions to refine more easily on expand.\n// Look at what the Chrome devtools Sources does.\n\nexport default function PanelGroup({\n autoSaveId,\n children = null,\n className = \"\",\n direction,\n height,\n width,\n}: Props) {\n const [panels, setPanels] = useState<Map<string, PanelData>>(new Map());\n\n // 0-1 values representing the relative size of each panel.\n const [sizes, setSizes] = useState<number[]>([]);\n\n // Store committed values to avoid unnecessarily re-running memoization/effects functions.\n const committedValuesRef = useRef<{\n direction: Direction;\n height: number;\n panels: Map<string, PanelData>;\n sizes: number[];\n width: number;\n }>({\n direction,\n height,\n panels,\n sizes,\n width,\n });\n useLayoutEffect(() => {\n committedValuesRef.current.direction = direction;\n committedValuesRef.current.height = height;\n committedValuesRef.current.panels = panels;\n committedValuesRef.current.sizes = sizes;\n committedValuesRef.current.width = width;\n });\n\n // Once all panels have registered themselves,\n // Compute the initial sizes based on default weights.\n // This assumes that panels register during initial mount (no conditional rendering)!\n useLayoutEffect(() => {\n const sizes = committedValuesRef.current.sizes;\n if (sizes.length === panels.size) {\n return;\n }\n\n // TODO [panels]\n // Validate that the total minSize is <= 1.\n\n // If this panel has been configured to persist sizing information,\n // default size should be restored from local storage if possible.\n let defaultSizes: number[] | undefined = undefined;\n if (autoSaveId) {\n try {\n const value = localStorage.getItem(\n createLocalStorageKey(autoSaveId, panels)\n );\n if (value) {\n defaultSizes = JSON.parse(value);\n }\n } catch (error) {}\n }\n\n if (defaultSizes != null) {\n setSizes(defaultSizes);\n } else {\n const panelsArray = panelsMapToSortedArray(panels);\n const totalWeight = panelsArray.reduce((weight, panel) => {\n return weight + panel.defaultSize;\n }, 0);\n\n setSizes(panelsArray.map((panel) => panel.defaultSize / totalWeight));\n }\n }, [autoSaveId, panels]);\n\n useEffect(() => {\n if (autoSaveId) {\n if (sizes.length === 0 || sizes.length !== panels.size) {\n return;\n }\n\n // If this panel has been configured to persist sizing information, save sizes to local storage.\n localStorage.setItem(\n createLocalStorageKey(autoSaveId, panels),\n JSON.stringify(sizes)\n );\n }\n }, [autoSaveId, panels, sizes]);\n\n const getPanelStyle = useCallback(\n (id: string): CSSProperties => {\n const { panels } = committedValuesRef.current;\n\n const offset = getOffset(panels, id, direction, sizes, height, width);\n const size = getSize(panels, id, direction, sizes, height, width);\n\n if (direction === \"horizontal\") {\n return {\n height: \"100%\",\n position: \"absolute\",\n left: offset,\n top: 0,\n width: size,\n };\n } else {\n return {\n height: size,\n position: \"absolute\",\n left: 0,\n top: offset,\n width: \"100%\",\n };\n }\n },\n [direction, height, sizes, width]\n );\n\n const registerPanel = useCallback((id: string, panel: PanelData) => {\n setPanels((prevPanels) => {\n if (prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.set(id, panel);\n\n return nextPanels;\n });\n }, []);\n\n const registerResizeHandle = useCallback(\n (idBefore: string, idAfter: string) => {\n return (event: MouseEvent) => {\n event.preventDefault();\n\n const {\n direction,\n height,\n panels,\n sizes: prevSizes,\n width,\n } = committedValuesRef.current;\n\n const isHorizontal = direction === \"horizontal\";\n const movement = isHorizontal ? event.movementX : event.movementY;\n const delta = isHorizontal ? movement / width : movement / height;\n\n const nextSizes = adjustByDelta(\n panels,\n idBefore,\n idAfter,\n delta,\n prevSizes\n );\n if (prevSizes !== nextSizes) {\n setSizes(nextSizes);\n }\n };\n\n // TODO [issues/5] Add to Map\n },\n []\n );\n\n const unregisterPanel = useCallback((id: string) => {\n setPanels((prevPanels) => {\n if (!prevPanels.has(id)) {\n return prevPanels;\n }\n\n const nextPanels = new Map(prevPanels);\n nextPanels.delete(id);\n\n return nextPanels;\n });\n }, []);\n\n const context = useMemo(\n () => ({\n direction,\n getPanelStyle,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n }),\n [\n direction,\n getPanelStyle,\n registerPanel,\n registerResizeHandle,\n unregisterPanel,\n ]\n );\n\n return (\n <PanelGroupContext.Provider value={context}>\n <div className={className}>{children}</div>\n </PanelGroupContext.Provider>\n );\n}\n\nfunction adjustByDelta(\n panels: Map<string, PanelData>,\n idBefore: string,\n idAfter: string,\n delta: number,\n prevSizes: number[]\n): number[] {\n if (delta === 0) {\n return prevSizes;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const nextSizes = prevSizes.concat();\n\n let deltaApplied = 0;\n\n // A resizing panel affects the panels before or after it.\n //\n // A negative delta means the panel immediately after the resizer should grow/expand by decreasing its offset.\n // Other panels may also need to shrink/contract (and shift) to make room, depending on the min weights.\n //\n // A positive delta means the panel immediately before the resizer should \"expand\".\n // This is accomplished by shrinking/contracting (and shifting) one or more of the panels after the resizer.\n let pivotId = delta < 0 ? idBefore : idAfter;\n let index = panelsArray.findIndex((panel) => panel.id === pivotId);\n while (true) {\n const panel = panelsArray[index];\n const prevSize = prevSizes[index];\n const nextSize = Math.max(prevSize - Math.abs(delta), panel.minSize);\n if (prevSize !== nextSize) {\n deltaApplied += prevSize - nextSize;\n\n nextSizes[index] = nextSize;\n\n if (deltaApplied.toPrecision(PRECISION) >= delta.toPrecision(PRECISION)) {\n break;\n }\n }\n\n if (delta < 0) {\n if (--index < 0) {\n break;\n }\n } else {\n if (++index >= panelsArray.length) {\n break;\n }\n }\n }\n\n // If we were unable to resize any of the panels panels, return the previous state.\n // This will essentially bailout and ignore the \"mousemove\" event.\n if (deltaApplied === 0) {\n return prevSizes;\n }\n\n // Adjust the pivot panel before, but only by the amount that surrounding panels were able to shrink/contract.\n pivotId = delta < 0 ? idAfter : idBefore;\n index = panelsArray.findIndex((panel) => panel.id === pivotId);\n nextSizes[index] = prevSizes[index] + deltaApplied;\n\n return nextSizes;\n}\n\nfunction createLocalStorageKey(\n autoSaveId: string,\n panels: Map<string, PanelData>\n): string {\n const panelsArray = panelsMapToSortedArray(panels);\n const panelIds = panelsArray.map((panel) => panel.id);\n\n return `PanelGroup:sizes:${autoSaveId}${panelIds.join(\"|\")}`;\n}\n\nfunction getOffset(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const panelsArray = panelsMapToSortedArray(panels);\n\n let index = panelsArray.findIndex((panel) => panel.id === id);\n if (index < 0) {\n return 0;\n }\n\n let scaledOffset = 0;\n\n for (index = index - 1; index >= 0; index--) {\n const panel = panelsArray[index];\n scaledOffset += getSize(panels, panel.id, direction, sizes, height, width);\n }\n\n return Math.round(scaledOffset);\n}\n\nfunction getSize(\n panels: Map<string, PanelData>,\n id: string,\n direction: Direction,\n sizes: number[],\n height: number,\n width: number\n): number {\n const totalSize = direction === \"horizontal\" ? width : height;\n\n if (panels.size === 1) {\n return totalSize;\n }\n\n const panelsArray = panelsMapToSortedArray(panels);\n\n const index = panelsArray.findIndex((panel) => panel.id === id);\n const size = sizes[index];\n if (size == null) {\n return 0;\n }\n\n return Math.round(size * totalSize);\n}\n\nfunction panelsMapToSortedArray(panels: Map<string, PanelData>): PanelData[] {\n return Array.from(panels.values()).sort((a, b) => a.order - b.order);\n}\n","import { ReactNode, useContext, useEffect, useState } from \"react\";\n\nimport { PanelGroupContext } from \"./PanelContexts\";\nimport { ResizeHandler } from \"./types\";\n\nexport default function PanelResizeHandle({\n children = null,\n className = \"\",\n disabled = false,\n panelAfter,\n panelBefore,\n}: {\n children?: ReactNode;\n className?: string;\n disabled?: boolean;\n panelAfter: string;\n panelBefore: string;\n}) {\n const context = useContext(PanelGroupContext);\n if (context === null) {\n throw Error(\n `PanelResizeHandle components must be rendered within a PanelGroup container`\n );\n }\n\n const { direction, registerResizeHandle } = context;\n\n const [resizeHandler, setResizeHandler] = useState<ResizeHandler | null>(\n null\n );\n const [isDragging, setIsDragging] = useState(false);\n\n useEffect(() => {\n if (disabled) {\n setResizeHandler(null);\n } else {\n setResizeHandler(() => registerResizeHandle(panelBefore, panelAfter));\n }\n }, [disabled, panelAfter, panelBefore, registerResizeHandle]);\n\n useEffect(() => {\n if (disabled || resizeHandler == null || !isDragging) {\n return;\n }\n\n document.body.style.cursor =\n direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\";\n\n const onMouseLeave = (_: MouseEvent) => {\n setIsDragging(false);\n };\n\n const onMouseMove = (event: MouseEvent) => {\n resizeHandler(event);\n };\n\n const onMouseUp = (_: MouseEvent) => {\n setIsDragging(false);\n };\n\n document.body.addEventListener(\"mouseleave\", onMouseLeave);\n document.body.addEventListener(\"mousemove\", onMouseMove);\n document.body.addEventListener(\"mouseup\", onMouseUp);\n\n return () => {\n document.body.style.cursor = \"\";\n\n document.body.removeEventListener(\"mouseleave\", onMouseLeave);\n document.body.removeEventListener(\"mousemove\", onMouseMove);\n document.body.removeEventListener(\"mouseup\", onMouseUp);\n };\n }, [direction, disabled, isDragging, resizeHandler]);\n\n return (\n <div\n className={className}\n onMouseDown={() => setIsDragging(true)}\n onMouseUp={() => setIsDragging(false)}\n style={{\n cursor: direction === \"horizontal\" ? \"ew-resize\" : \"ns-resize\",\n }}\n >\n {children}\n </div>\n );\n}\n"],"names":[],"version":3,"file":"react-resizable-panels.js.map","sourceRoot":"../../../"}
|