@@ -4,33 +4,56 @@ import { initialState, isHorizontalSpace, isVerticalSpace } from 'src/Globals/Ut
44import { ISpaceContext , updateSpace , removeSpace , registerSpace , createSpaceContext } from 'src/Globals/ISpaceContext' ;
55import { SpaceLayerContext , SpaceContext } from 'src/Globals/Contexts' ;
66import { ResizeSensor } from 'css-element-queries' ;
7- import { throttle } from 'src/Globals/Throttle' ;
87
98export const useSpace = ( props : AllProps , divElementRef : React . MutableRefObject < HTMLElement | undefined > ) => {
109
11- const [ state , changeState ] = React . useState < IState > ( initialState ( props ) ) ;
12- const [ currentSize , setCurrentSize ] = React . useState < ISize | null > ( null ) ;
13- const resizeSensor = React . useRef < ResizeSensor > ( ) ;
14- const onRemove = React . useRef < ( ( ) => void ) > ( ) ;
15-
16- const setState = ( stateDelta : Partial < IState > ) => changeState ( prev => ( { ...prev , ...stateDelta } ) ) ;
17-
1810 const parentContext = React . useContext ( SpaceContext ) as ISpaceContext ;
1911
2012 if ( ! parentContext ) {
2113 throw new Error ( "No top-level space: There must be a <ViewPort /> or <Fixed /> ancestor space" ) ;
2214 }
2315
16+ const [ state , changeState ] = React . useState < IState > ( initialState ( props ) ) ;
17+ const [ currentSize , setCurrentSize ] = React . useState < ISize | null > ( null ) ;
18+ const resizeSensor = React . useRef < ResizeSensor > ( ) ;
19+ const onRemove = React . useRef < ( ( ) => void ) > ( ) ;
20+ const setState = ( stateDelta : Partial < IState > ) => changeState ( prev => ( { ...prev , ...stateDelta } ) ) ;
2421 const layerContext = React . useContext ( SpaceLayerContext ) ;
2522 const currentZIndex = props . zIndex || layerContext || 0 ;
2623
24+ const updateCurrentSize = React . useCallback ( ( ) => {
25+ if ( divElementRef . current ) {
26+ const rect = divElementRef . current . getBoundingClientRect ( ) ;
27+ setCurrentSize ( {
28+ width : rect . width ,
29+ height : rect . height
30+ } ) ;
31+ }
32+ } , [ ] ) ;
33+
34+ const space =
35+ registerSpace (
36+ parentContext ,
37+ {
38+ id : state . id ,
39+ zIndex : currentZIndex ,
40+ order : props . order === undefined ? 1 : props . order ,
41+ anchorType : props . anchor ,
42+ anchorSize : props . anchorSize || 0 ,
43+ adjustedSize : 0 ,
44+ adjustedLeft : 0 ,
45+ adjustedTop : 0 ,
46+ width : props . anchor && isHorizontalSpace ( props . anchor ) ? props . anchorSize || 0 : props . width ,
47+ height : props . anchor && isVerticalSpace ( props . anchor ) ? props . anchorSize || 0 : props . height
48+ }
49+ ) ;
50+
51+ React . useEffect ( ( ) => {
52+ setCurrentSize ( null ) ;
53+ } , [ parentContext . children . length ] ) ;
54+
2755 // Deal with property changes to size / zIndex / anchoring
2856 React . useEffect ( ( ) => {
29- setCurrentSize ( prev => ( {
30- parsedSize : typeof props . anchorSize === "string" ? 0 : props . anchorSize as number | undefined ,
31- width : prev ? prev . width : 0 ,
32- height : prev ? prev . height : 0
33- } ) ) ;
3457 updateSpace (
3558 parentContext ,
3659 state . id ,
@@ -43,11 +66,6 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
4366 } , [ props . anchorSize ] ) ;
4467
4568 React . useEffect ( ( ) => {
46- setCurrentSize ( prev => ( {
47- parsedSize : typeof props . anchorSize === "string" ? 0 : props . anchorSize as number | undefined ,
48- width : prev ? prev . width : 0 ,
49- height : prev ? prev . height : 0
50- } ) ) ;
5169 updateSpace (
5270 parentContext ,
5371 state . id ,
@@ -71,51 +89,24 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
7189 }
7290 ) ;
7391 } , [ currentZIndex ] ) ;
74-
75- const space =
76- registerSpace (
77- parentContext ,
78- {
79- id : state . id ,
80- zIndex : currentZIndex ,
81- order : props . order === undefined ? 1 : props . order ,
82- anchorType : props . anchor ,
83- size : props . anchorSize || 0 ,
84- adjustedSize : 0 ,
85- adjustedLeft : 0 ,
86- adjustedTop : 0 ,
87- width : props . anchor && isHorizontalSpace ( props . anchor ) ? props . anchorSize || 0 : props . width ,
88- height : props . anchor && isVerticalSpace ( props . anchor ) ? props . anchorSize || 0 : props . height
89- }
90- ) ;
9192
9293 // Setup / cleanup
93- const determineCurrentSize = React . useCallback ( throttle ( ( ) => {
94- if ( divElementRef . current ) {
95- const currentRect = divElementRef . current . getBoundingClientRect ( ) ;
96- setCurrentSize ( {
97- parsedSize : ( isHorizontalSpace ( props . anchor ) ? currentRect . width : currentRect . height ) ,
98- width : currentRect . width ,
99- height : currentRect . height
100- } ) ;
101- }
102- } , 200 ) , [ ] ) ;
10394
10495 React . useEffect ( ( ) => {
10596 if ( divElementRef . current ) {
10697 if ( props . trackSize ) {
10798 resizeSensor . current = new ResizeSensor (
10899 divElementRef . current ,
109- ( size ) => setCurrentSize ( {
110- parsedSize : ( isHorizontalSpace ( props . anchor ) ? size . width : size . height ) ,
100+ ( size ) => setCurrentSize ( {
111101 width : size . width ,
112102 height : size . height
113103 } )
114104 ) ;
115105 }
116- determineCurrentSize ( ) ;
117106 }
118107
108+ updateCurrentSize ( ) ;
109+
119110 const cleanup = ( ) => {
120111 resizeSensor . current && resizeSensor . current . detach ( ) ;
121112 onRemove . current && onRemove . current ( ) ;
@@ -124,9 +115,16 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
124115 return cleanup ;
125116 } , [ ] ) ;
126117
127- onRemove . current = ( ) => {
118+ React . useEffect ( ( ) => {
119+ if ( ! currentSize )
120+ {
121+ updateCurrentSize ( ) ;
122+ }
123+ } )
124+
125+ onRemove . current = React . useCallback ( ( ) => {
128126 removeSpace ( parentContext , state . id ) ;
129- }
127+ } , [ ] ) ;
130128
131129 const currentContext =
132130 createSpaceContext (
@@ -138,8 +136,8 @@ export const useSpace = (props: AllProps, divElementRef: React.MutableRefObject<
138136
139137 return {
140138 space,
141- currentSize,
142139 parentContext,
143- currentContext
140+ currentContext,
141+ currentSize : currentSize || { width : 0 , height : 0 }
144142 }
145143}
0 commit comments