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