positioner
v4.15.0arrow_drop_down
Snapshot report for src/positioner/test/index.js
The actual snapshot is saved in index.js.snap.
Generated by AVA.
All positions work
Snapshot 1
[
{
position: 'top',
rect: {
bottom: 144,
height: 100,
left: 225,
right: 325,
top: 44,
width: 100,
},
transformOrigin: '50px 100px ',
},
{
position: 'top-left',
rect: {
bottom: 144,
height: 100,
left: 250,
right: 350,
top: 44,
width: 100,
},
transformOrigin: '25px 100px ',
},
{
position: 'top-right',
rect: {
bottom: 144,
height: 100,
left: 100,
right: 200,
top: 44,
width: 100,
},
transformOrigin: '175px 100px ',
},
{
position: 'bottom',
rect: {
bottom: 226,
height: 100,
left: 225,
right: 325,
top: 126,
width: 100,
},
transformOrigin: '50px 0px ',
},
{
position: 'bottom-left',
rect: {
bottom: 226,
height: 100,
left: 250,
right: 350,
top: 126,
width: 100,
},
transformOrigin: '25px 0px ',
},
{
position: 'bottom-right',
rect: {
bottom: 226,
height: 100,
left: 100,
right: 200,
top: 126,
width: 100,
},
transformOrigin: '175px 0px ',
},
{
position: 'left',
rect: {
bottom: 215,
height: 100,
left: 144,
right: 244,
top: 115,
width: 100,
},
transformOrigin: '100px 50px',
},
{
position: 'right',
rect: {
bottom: 215,
height: 100,
left: 206,
right: 306,
top: 115,
width: 100,
},
transformOrigin: '0px 50px',
},
]
It pushes the rect to the right if overflowing on the left side
Snapshot 1
{
position: 'bottom',
rect: {
bottom: 136,
height: 110,
left: 8,
right: 258,
top: 26,
width: 250,
},
transformOrigin: '27px 0px ',
}
Position.BOTTOM repositions to the top
Snapshot 1
{
position: 'top',
rect: {
bottom: 284,
height: 250,
left: 225,
right: 325,
top: 34,
width: 100,
},
transformOrigin: '50px 250px ',
}
Position.LEFT and Position.RIGHT will use the side with the most space
Snapshot 1
{
position: 'right',
rect: {
bottom: 215,
height: 100,
left: 42,
right: 292,
top: 115,
width: 250,
},
transformOrigin: '0px 50px',
}
Position.LEFT repositions to the right
Snapshot 1
{
position: 'right',
rect: {
bottom: 215,
height: 100,
left: 206,
right: 556,
top: 115,
width: 350,
},
transformOrigin: '0px 50px',
}
Position.RIGHT repositions to the left
Snapshot 1
{
position: 'left',
rect: {
bottom: 215,
height: 100,
left: 544,
right: 794,
top: 115,
width: 250,
},
transformOrigin: '250px 50px',
}
Position.TOP repositions to the bottom
Snapshot 1
{
position: 'bottom',
rect: {
bottom: 376,
height: 250,
left: 225,
right: 191,
top: -8,
width: 100,
},
transformOrigin: '50px 0px ',
}
| Name | Type | Default value | Description |
|---|---|---|---|
position | Position.TOP | Position.TOP_LEFT | Position.TOP_RIGHT | Position.BOTTOM | Position.BOTTOM_LEFT | Position.BOTTOM_RIGHT | Position.LEFT | Position.RIGHT | Position.BOTTOM | The position the element that is being positioned is on. Smart positioning might override this. |
isShown | bool | When true, show the element being positioned. | |
children (required) | function | Function that returns the element being positioned. | |
innerRef | function | () => {} | Function that returns the ref of the element being positioned. |
bodyOffset | number | 6 | The minimum distance from the body to the element being positioned. |
targetOffset | number | 6 | The minimum distance from the target to the element being positioned. |
target (required) | function | Function that should return a node for the target. ({ getRef: () -> Ref, isShown: Bool }) -> React Node | |
initialScale | number | 0.9 | Initial scale of the element being positioned. |
animationDuration | number | 300 | Duration of the animation. |
onCloseComplete | function | () => {} | Function that will be called when the exit transition is complete. |
onOpenComplete | function | () => {} | Function that will be called when the enter transition is complete. |