Add support for honouring original popover height in position dropdown utility
This commit is contained in:
parent
80cbd70687
commit
f08562e0e4
|
@ -19,6 +19,7 @@ export default function positionDropdown(element, opts) {
|
||||||
useAnchorWidth,
|
useAnchorWidth,
|
||||||
offset = 5,
|
offset = 5,
|
||||||
customUpdate,
|
customUpdate,
|
||||||
|
noShrink,
|
||||||
} = opts
|
} = opts
|
||||||
if (!anchor) {
|
if (!anchor) {
|
||||||
return
|
return
|
||||||
|
@ -82,6 +83,11 @@ export default function positionDropdown(element, opts) {
|
||||||
} else {
|
} else {
|
||||||
styles.left = anchorBounds.left
|
styles.left = anchorBounds.left
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Remove max height restriction if we don't want to shrink
|
||||||
|
if (noShrink) {
|
||||||
|
delete styles.maxHeight
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Apply styles
|
// Apply styles
|
||||||
|
|
|
@ -25,6 +25,7 @@
|
||||||
export let handlePostionUpdate
|
export let handlePostionUpdate
|
||||||
export let showPopover = true
|
export let showPopover = true
|
||||||
export let clickOutsideOverride = false
|
export let clickOutsideOverride = false
|
||||||
|
export let noShrink = false
|
||||||
|
|
||||||
$: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
|
$: target = portalTarget || getContext(Context.PopoverRoot) || ".spectrum"
|
||||||
|
|
||||||
|
@ -91,6 +92,7 @@
|
||||||
useAnchorWidth,
|
useAnchorWidth,
|
||||||
offset,
|
offset,
|
||||||
customUpdate: handlePostionUpdate,
|
customUpdate: handlePostionUpdate,
|
||||||
|
noShrink,
|
||||||
}}
|
}}
|
||||||
use:clickOutside={{
|
use:clickOutside={{
|
||||||
callback: dismissible ? handleOutsideClick : () => {},
|
callback: dismissible ? handleOutsideClick : () => {},
|
||||||
|
|
|
@ -101,7 +101,8 @@
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.wrapper {
|
.wrapper {
|
||||||
flex: 0 0 100px;
|
padding-top: 400px;
|
||||||
|
flex: 0 0 400px;
|
||||||
margin: -28px -40px -40px -40px;
|
margin: -28px -40px -40px -40px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
|
@ -8,7 +8,6 @@
|
||||||
} from "../lib/constants"
|
} from "../lib/constants"
|
||||||
|
|
||||||
export let anchor
|
export let anchor
|
||||||
export let invertX
|
|
||||||
export let minWidth = PopoverMinWidth
|
export let minWidth = PopoverMinWidth
|
||||||
export let maxWidth = PopoverMaxWidth
|
export let maxWidth = PopoverMaxWidth
|
||||||
export let maxHeight = PopoverMaxHeight
|
export let maxHeight = PopoverMaxHeight
|
||||||
|
@ -21,7 +20,7 @@
|
||||||
$: style = buildStyles(minWidth, maxWidth, maxHeight)
|
$: style = buildStyles(minWidth, maxWidth, maxHeight)
|
||||||
|
|
||||||
const buildStyles = (minWidth, maxWidth, maxHeight) => {
|
const buildStyles = (minWidth, maxWidth, maxHeight) => {
|
||||||
let style = ""
|
let style = "min-height: 100px;"
|
||||||
if (minWidth != null) {
|
if (minWidth != null) {
|
||||||
style += `min-width: ${minWidth}px;`
|
style += `min-width: ${minWidth}px;`
|
||||||
}
|
}
|
||||||
|
@ -39,6 +38,7 @@
|
||||||
{open}
|
{open}
|
||||||
{anchor}
|
{anchor}
|
||||||
{align}
|
{align}
|
||||||
|
noShrink
|
||||||
portalTarget="#{gridID} .grid-popover-container"
|
portalTarget="#{gridID} .grid-popover-container"
|
||||||
offset={0}
|
offset={0}
|
||||||
>
|
>
|
||||||
|
|
Loading…
Reference in New Issue