@@ -12,48 +12,30 @@ import { getPanelGroupElement, getResizeHandleElementsForGroup } from 'react-res
1212
1313type Direction = 'horizontal' | 'vertical' ;
1414
15- export type UsePanelOptions =
16- | {
17- id : string ;
18- /**
19- * The minimum size of the panel as a percentage.
20- */
21- minSize : number ;
22- /**
23- * The default size of the panel as a percentage.
24- */
25- defaultSize ?: number ;
26- /**
27- * The unit of the minSize
28- */
29- unit : 'percentages' ;
30- onCollapse ?: ( isCollapsed : boolean ) => void ;
31- }
32- | {
33- id : string ;
34- /**
35- * The minimum size of the panel in pixels.
36- */
37- minSize : number ;
38- /**
39- * The default size of the panel in pixels.
40- */
41- defaultSize ?: number ;
42- /**
43- * The unit of the minSize.
44- */
45- unit : 'pixels' ;
46- /**
47- * The direction of the panel group.
48- * This is required to accurately calculate the available space for the panel, minus the space taken by the handles.
49- */
50- panelGroupDirection : Direction ;
51- /**
52- * A ref to the panel group.
53- */
54- panelGroupRef : RefObject < ImperativePanelGroupHandle > ;
55- onCollapse ?: ( isCollapsed : boolean ) => void ;
56- } ;
15+ export type UsePanelOptions = {
16+ id : string ;
17+ /**
18+ * The minimum size of the panel in pixels.
19+ */
20+ minSize : number ;
21+ /**
22+ * The default size of the panel in pixels.
23+ */
24+ defaultSize ?: number ;
25+ /**
26+ * The direction of the panel group.
27+ * This is required to accurately calculate the available space for the panel, minus the space taken by the handles.
28+ */
29+ panelGroupDirection : Direction ;
30+ /**
31+ * A ref to the panel group.
32+ */
33+ imperativePanelGroupRef : RefObject < ImperativePanelGroupHandle > ;
34+ /**
35+ * Called when the board's collapsed state changes.
36+ */
37+ onCollapse ?: ( isCollapsed : boolean ) => void ;
38+ } ;
5739
5840export type UsePanelReturn = {
5941 /**
@@ -80,22 +62,28 @@ export type UsePanelReturn = {
8062 * Resize the panel to the given size in the same units as the minSize.
8163 */
8264 resize : ( size : number ) => void ;
65+ /**
66+ * The props to apply to the panel.
67+ */
8368 panelProps : Partial < PanelProps & { ref : RefObject < ImperativePanelHandle > } > ;
69+ /**
70+ * The props to apply to the resize handle.
71+ */
8472 resizeHandleProps : Partial < PanelResizeHandleProps > ;
8573} ;
8674
8775export const usePanel = ( arg : UsePanelOptions ) : UsePanelReturn => {
8876 const imperativePanelRef = useRef < ImperativePanelHandle > ( null ) ;
89- const [ _minSize , _setMinSize ] = useState < number > ( arg . unit === 'percentages' ? arg . minSize : 0 ) ;
90- const [ _defaultSize , _setDefaultSize ] = useState < number > ( arg . defaultSize ?? arg . minSize ) ;
77+ const [ _minSize , _setMinSize ] = useState < number > ( 0 ) ;
78+ const [ _defaultSize , _setDefaultSize ] = useState < number > ( 0 ) ;
9179
9280 // If the units are pixels, we need to calculate the min size as a percentage of the available space,
9381 // then resize the panel if it is too small.
9482 useLayoutEffect ( ( ) => {
95- if ( arg . unit === 'percentages' || ! arg . panelGroupRef . current ) {
83+ if ( ! arg . imperativePanelGroupRef . current ) {
9684 return ;
9785 }
98- const id = arg . panelGroupRef . current . getId ( ) ;
86+ const id = arg . imperativePanelGroupRef . current . getId ( ) ;
9987 const panelGroupElement = getPanelGroupElement ( id ) ;
10088 const panelGroupHandleElements = getResizeHandleElementsForGroup ( id ) ;
10189 if ( ! panelGroupElement ) {
@@ -106,7 +94,12 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
10694 return ;
10795 }
10896
109- const minSizePct = getSizeAsPercentage ( arg . minSize , arg . panelGroupRef , arg . panelGroupDirection ) ;
97+ const minSizePct = getSizeAsPercentage ( arg . minSize , arg . imperativePanelGroupRef , arg . panelGroupDirection ) ;
98+ const defaultSizePct = getSizeAsPercentage (
99+ arg . defaultSize || arg . minSize ,
100+ arg . imperativePanelGroupRef ,
101+ arg . panelGroupDirection
102+ ) ;
110103
111104 if ( minSizePct > 100 ) {
112105 // This can happen when the panel is hidden
@@ -115,8 +108,8 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
115108
116109 _setMinSize ( minSizePct ) ;
117110
118- if ( arg . defaultSize && arg . defaultSize > minSizePct ) {
119- _setDefaultSize ( arg . defaultSize ) ;
111+ if ( defaultSizePct && defaultSizePct > minSizePct ) {
112+ _setDefaultSize ( defaultSizePct ) ;
120113 } else {
121114 _setDefaultSize ( minSizePct ) ;
122115 }
@@ -181,14 +174,8 @@ export const usePanel = (arg: UsePanelOptions): UsePanelReturn => {
181174
182175 const resize = useCallback (
183176 ( size : number ) => {
184- // If we are using percentages, we can just resize to the given size
185- if ( arg . unit === 'percentages' ) {
186- imperativePanelRef . current ?. resize ( size ) ;
187- return ;
188- }
189-
190- // If we are using pixels, we need to calculate the size as a percentage of the available space
191- const sizeAsPct = getSizeAsPercentage ( size , arg . panelGroupRef , arg . panelGroupDirection ) ;
177+ // We need to calculate the size as a percentage of the available space
178+ const sizeAsPct = getSizeAsPercentage ( size , arg . imperativePanelGroupRef , arg . panelGroupDirection ) ;
192179 imperativePanelRef . current ?. resize ( sizeAsPct ) ;
193180 } ,
194181 [ arg ]
0 commit comments