@@ -2,6 +2,7 @@ import type {Placement} from '@floating-ui/core';
22import {
33 autoUpdate ,
44 flip ,
5+ limitShift ,
56 shift ,
67 size ,
78 useFloating ,
@@ -10,21 +11,34 @@ import {useState} from 'react';
1011
1112import { allPlacements } from '../utils/allPlacements' ;
1213import { Controls } from '../utils/Controls' ;
14+ import { useResize } from '../utils/useResize' ;
1315import { useScroll } from '../utils/useScroll' ;
1416
17+ type ShiftOrder = 'none' | 'before' | 'after' ;
18+ const SHIFT_ORDERS : ShiftOrder [ ] = [ 'none' , 'before' , 'after' ] ;
19+
1520export function Size ( ) {
1621 const [ rtl , setRtl ] = useState ( false ) ;
1722 const [ placement , setPlacement ] = useState < Placement > ( 'bottom' ) ;
18- const [ addFlipShift , setAddFlipShift ] = useState ( false ) ;
23+ const [ addFlip , setAddFlip ] = useState ( false ) ;
24+ const [ addShift , setAddShift ] = useState < ShiftOrder > ( 'none' ) ;
25+ const [ shiftCrossAxis , setShiftCrossAxis ] = useState ( false ) ;
26+ const [ shiftLimiter , setShiftLimiter ] = useState ( false ) ;
1927
2028 const hasEdgeAlignment = placement . includes ( '-' ) ;
2129
30+ const shiftOptions = {
31+ padding : 10 ,
32+ crossAxis : shiftCrossAxis ,
33+ limiter : shiftLimiter ? limitShift ( { offset : 50 } ) : undefined ,
34+ } ;
35+
2236 const { x, y, strategy, update, refs} = useFloating ( {
2337 placement,
2438 whileElementsMounted : autoUpdate ,
2539 middleware : [
26- addFlipShift && flip ( { padding : 10 } ) ,
27- addFlipShift && ! hasEdgeAlignment && shift ( { padding : 10 } ) ,
40+ addFlip && flip ( { padding : 10 } ) ,
41+ addShift === 'before' && shift ( shiftOptions ) ,
2842 size ( {
2943 apply ( { availableHeight, availableWidth, elements} ) {
3044 Object . assign ( elements . floating . style , {
@@ -34,19 +48,20 @@ export function Size() {
3448 } ,
3549 padding : 10 ,
3650 } ) ,
37- addFlipShift && hasEdgeAlignment && shift ( { padding : 10 } ) ,
51+ addShift === 'after' && shift ( shiftOptions ) ,
3852 ] ,
3953 } ) ;
4054
4155 const { scrollRef, indicator} = useScroll ( { refs, update, rtl} ) ;
56+ useResize ( scrollRef , update ) ;
4257
4358 return (
4459 < >
4560 < h1 > Size</ h1 >
4661 < p > </ p >
4762 < div className = "container" style = { { direction : rtl ? 'rtl' : 'ltr' } } >
4863 < div
49- className = "scroll"
64+ className = "scroll resize "
5065 data-x
5166 style = { { position : 'relative' } }
5267 ref = { scrollRef }
@@ -64,8 +79,13 @@ export function Size() {
6479 left : x ?? '' ,
6580 width : 400 ,
6681 height : 300 ,
67- ...( addFlipShift && {
68- width : 600 ,
82+ ...( addShift !== 'none' && {
83+ width :
84+ addShift === 'before' && shiftCrossAxis
85+ ? 100
86+ : addShift === 'before' && hasEdgeAlignment
87+ ? 360
88+ : 600 ,
6989 height : 600 ,
7090 } ) ,
7191 } }
@@ -107,21 +127,73 @@ export function Size() {
107127 ) ) }
108128 </ Controls >
109129
110- < h2 > Add flip and shift </ h2 >
130+ < h2 > Add flip</ h2 >
111131 < Controls >
112132 { [ true , false ] . map ( ( bool ) => (
113133 < button
114134 key = { String ( bool ) }
115- data-testid = { `flipshift -${ bool } }
116- onClick = { ( ) => setAddFlipShift ( bool ) }
135+ data-testid = { `flip -${ bool } }
136+ onClick = { ( ) => setAddFlip ( bool ) }
117137 style = { {
118- backgroundColor : addFlipShift === bool ? 'black' : '' ,
138+ backgroundColor : addFlip === bool ? 'black' : '' ,
119139 } }
120140 >
121141 { String ( bool ) }
122142 </ button >
123143 ) ) }
124144 </ Controls >
145+
146+ < h2 > Add shift</ h2 >
147+ < Controls >
148+ { SHIFT_ORDERS . map ( ( str ) => (
149+ < button
150+ key = { str }
151+ data-testid = { `shift-${ str } }
152+ onClick = { ( ) => setAddShift ( str ) }
153+ style = { {
154+ backgroundColor : addShift === str ? 'black' : '' ,
155+ } }
156+ >
157+ { str }
158+ </ button >
159+ ) ) }
160+ </ Controls >
161+
162+ { addShift !== 'none' && (
163+ < >
164+ < h3 > shift.crossAxis</ h3 >
165+ < Controls >
166+ { [ true , false ] . map ( ( bool ) => (
167+ < button
168+ key = { String ( bool ) }
169+ data-testid = { `shift.crossAxis-${ bool } }
170+ onClick = { ( ) => setShiftCrossAxis ( bool ) }
171+ style = { {
172+ backgroundColor : shiftCrossAxis === bool ? 'black' : '' ,
173+ } }
174+ >
175+ { String ( bool ) }
176+ </ button >
177+ ) ) }
178+ </ Controls >
179+
180+ < h3 > shift.limiter</ h3 >
181+ < Controls >
182+ { [ true , false ] . map ( ( bool ) => (
183+ < button
184+ key = { String ( bool ) }
185+ data-testid = { `shift.limiter-${ bool } }
186+ onClick = { ( ) => setShiftLimiter ( bool ) }
187+ style = { {
188+ backgroundColor : shiftLimiter === bool ? 'black' : '' ,
189+ } }
190+ >
191+ { String ( bool ) }
192+ </ button >
193+ ) ) }
194+ </ Controls >
195+ </ >
196+ ) }
125197 </ >
126198 ) ;
127199}
0 commit comments