Improve position dropdown and update click handlers to ignore new datepicker
This commit is contained in:
parent
b1bd8993a6
commit
2c27ef8294
6 changed files with 17 additions and 7 deletions
|
@ -1,5 +1,6 @@
|
||||||
const ignoredClasses = [
|
const ignoredClasses = [
|
||||||
".flatpickr-calendar",
|
".flatpickr-calendar",
|
||||||
|
".spectrum-Calendar",
|
||||||
".spectrum-Popover",
|
".spectrum-Popover",
|
||||||
".download-js-link",
|
".download-js-link",
|
||||||
]
|
]
|
||||||
|
|
|
@ -41,6 +41,8 @@ export default function positionDropdown(element, opts) {
|
||||||
offset: opts.offset,
|
offset: opts.offset,
|
||||||
})
|
})
|
||||||
} else {
|
} else {
|
||||||
|
const renderHeight = maxHeight || elementBounds.height
|
||||||
|
|
||||||
// Determine vertical styles
|
// Determine vertical styles
|
||||||
const topSpace = anchorBounds.top
|
const topSpace = anchorBounds.top
|
||||||
const bottomSpace = window.innerHeight - anchorBounds.bottom
|
const bottomSpace = window.innerHeight - anchorBounds.bottom
|
||||||
|
@ -52,11 +54,11 @@ export default function positionDropdown(element, opts) {
|
||||||
styles.top = window.innerHeight - elementBounds.height
|
styles.top = window.innerHeight - elementBounds.height
|
||||||
}
|
}
|
||||||
} else if (
|
} else if (
|
||||||
window.innerHeight - anchorBounds.bottom < (maxHeight || 100) &&
|
window.innerHeight - anchorBounds.bottom < renderHeight + offset &&
|
||||||
topSpace - bottomSpace > 100
|
topSpace - bottomSpace > 100
|
||||||
) {
|
) {
|
||||||
styles.top = anchorBounds.top - elementBounds.height - offset
|
styles.top = anchorBounds.top - renderHeight - offset
|
||||||
styles.maxHeight = maxHeight || 240
|
styles.maxHeight = maxHeight
|
||||||
} else {
|
} else {
|
||||||
styles.top = anchorBounds.bottom + offset
|
styles.top = anchorBounds.bottom + offset
|
||||||
styles.maxHeight =
|
styles.maxHeight =
|
||||||
|
|
|
@ -3,12 +3,13 @@
|
||||||
|
|
||||||
export let anchor
|
export let anchor
|
||||||
export let disabled
|
export let disabled
|
||||||
|
export let readonly
|
||||||
export let error
|
export let error
|
||||||
export let focused
|
export let focused
|
||||||
export let placeholder
|
export let placeholder
|
||||||
export let id
|
export let id
|
||||||
export let value
|
export let value
|
||||||
export let icon = "Calendar"
|
export let icon
|
||||||
export let enableTime
|
export let enableTime
|
||||||
export let timeOnly
|
export let timeOnly
|
||||||
|
|
||||||
|
@ -32,11 +33,11 @@
|
||||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||||
<div
|
<div
|
||||||
bind:this={anchor}
|
bind:this={anchor}
|
||||||
class:is-disabled={disabled}
|
class:is-disabled={disabled || readonly}
|
||||||
class:is-invalid={!!error}
|
class:is-invalid={!!error}
|
||||||
class="spectrum-InputGroup spectrum-Datepicker"
|
class="spectrum-InputGroup spectrum-Datepicker"
|
||||||
class:is-focused={focused}
|
class:is-focused={focused}
|
||||||
aria-readonly="false"
|
aria-readonly={readonly}
|
||||||
aria-required="false"
|
aria-required="false"
|
||||||
aria-haspopup="true"
|
aria-haspopup="true"
|
||||||
on:click
|
on:click
|
||||||
|
@ -57,6 +58,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
<input
|
<input
|
||||||
{disabled}
|
{disabled}
|
||||||
|
{readonly}
|
||||||
data-input
|
data-input
|
||||||
type="text"
|
type="text"
|
||||||
class="spectrum-Textfield-input spectrum-InputGroup-input"
|
class="spectrum-Textfield-input spectrum-InputGroup-input"
|
||||||
|
|
|
@ -13,6 +13,7 @@
|
||||||
|
|
||||||
export let id = null
|
export let id = null
|
||||||
export let disabled = false
|
export let disabled = false
|
||||||
|
export let readonly = false
|
||||||
export let error = null
|
export let error = null
|
||||||
export let enableTime = true
|
export let enableTime = true
|
||||||
export let value = null
|
export let value = null
|
||||||
|
@ -108,6 +109,7 @@
|
||||||
<DateTimeInput
|
<DateTimeInput
|
||||||
bind:anchor
|
bind:anchor
|
||||||
{disabled}
|
{disabled}
|
||||||
|
{readonly}
|
||||||
{error}
|
{error}
|
||||||
{placeholder}
|
{placeholder}
|
||||||
{id}
|
{id}
|
||||||
|
@ -125,8 +127,9 @@
|
||||||
on:close
|
on:close
|
||||||
on:open={onOpen}
|
on:open={onOpen}
|
||||||
on:close={onClose}
|
on:close={onClose}
|
||||||
{anchor}
|
|
||||||
portalTarget={appendTo}
|
portalTarget={appendTo}
|
||||||
|
maxHeight={null}
|
||||||
|
{anchor}
|
||||||
{align}
|
{align}
|
||||||
>
|
>
|
||||||
{#if isOpen}
|
{#if isOpen}
|
||||||
|
|
|
@ -155,6 +155,7 @@
|
||||||
useAnchorWidth={!autoWidth}
|
useAnchorWidth={!autoWidth}
|
||||||
maxWidth={autoWidth ? 400 : null}
|
maxWidth={autoWidth ? 400 : null}
|
||||||
customHeight={customPopoverHeight}
|
customHeight={customPopoverHeight}
|
||||||
|
maxHeight={240}
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="popover-content"
|
class="popover-content"
|
||||||
|
|
|
@ -20,6 +20,7 @@
|
||||||
|
|
||||||
const ignoredOriginSelectors = [
|
const ignoredOriginSelectors = [
|
||||||
".spectrum-Modal",
|
".spectrum-Modal",
|
||||||
|
".spectrum-Calendar",
|
||||||
"#builder-side-panel-container",
|
"#builder-side-panel-container",
|
||||||
"[data-grid-ignore]",
|
"[data-grid-ignore]",
|
||||||
]
|
]
|
||||||
|
|
Loading…
Reference in a new issue