Merge pull request #397 from Budibase/bugfix/select-overflow-clipping

OptionSelect - Fix for Overflow Clipping
This commit is contained in:
Conor_Mack 2020-06-29 15:38:08 +01:00 committed by GitHub
commit b565c940f2
3 changed files with 90 additions and 61 deletions

View File

@ -70,6 +70,7 @@
"safe-buffer": "^5.1.2",
"shortid": "^2.2.8",
"string_decoder": "^1.2.0",
"svelte-portal": "^0.1.0",
"svelte-simple-modal": "^0.4.2",
"uikit": "^3.1.7"
},

View File

@ -1,16 +1,27 @@
<script>
import {onMount} from "svelte"
import PropertyGroup from "./PropertyGroup.svelte"
import FlatButtonGroup from "./FlatButtonGroup.svelte"
export let panelDefinition = {}
export let componentInstance = {}
export let componentDefinition = {}
export let onStyleChanged = () => {}
let selectedCategory = "normal"
let propGroup = null
const getProperties = name => panelDefinition[name]
onMount(() => {
// if(propGroup) {
// propGroup.addEventListener("scroll", function(e){
// console.log("I SCROLLED", e.target.scrollTop)
// })
// }
})
function onChange(category) {
selectedCategory = category
}
@ -31,7 +42,7 @@
</div>
<div class="positioned-wrapper">
<div class="design-view-property-groups">
<div bind:this={propGroup} class="design-view-property-groups">
{#if propertyGroupNames.length > 0}
{#each propertyGroupNames as groupName}
<PropertyGroup

View File

@ -1,5 +1,6 @@
<script>
import { onMount, beforeUpdate } from "svelte"
import { onMount, beforeUpdate, afterUpdate } from "svelte"
import Portal from "svelte-portal"
import { buildStyle } from "../../helpers.js"
export let options = []
export let value = ""
@ -12,69 +13,80 @@
let selectMenu
let icon
let selectYPosition = null
let availableSpace = 0
let selectAnchor = null;
let dimensions = {top: 0, bottom: 0, left: 0}
let positionSide = "top"
let maxHeight = null
let menuHeight
let maxHeight = 0
let scrollTop = 0;
let containerEl = null;
const handleStyleBind = value =>
!!styleBindingProperty ? { style: `${styleBindingProperty}: ${value}` } : {}
onMount(() => {
if (select) {
select.addEventListener("keydown", addSelectKeyEvents)
select.addEventListener("keydown", handleEnter)
}
return () => {
select.removeEventListener("keydown", addSelectKeyEvents)
select.removeEventListener("keydown", handleEnter)
}
})
function checkPosition() {
const { bottom, top: spaceAbove } = select.getBoundingClientRect()
function handleEscape(e) {
if(open && e.key === "Escape") {
toggleSelect(false)
}
}
function getDimensions() {
const { bottom, top: spaceAbove, left } = selectAnchor.getBoundingClientRect()
const spaceBelow = window.innerHeight - bottom
let y;
if (spaceAbove > spaceBelow) {
positionSide = "bottom"
maxHeight = `${spaceAbove.toFixed(0) - 20}px`
maxHeight = spaceAbove - 20
y = (window.innerHeight - spaceAbove)
} else {
positionSide = "top"
maxHeight = `${spaceBelow.toFixed(0) - 20}px`
y = bottom
maxHeight = spaceBelow - 20
}
dimensions = {[positionSide]: y, left}
}
function addSelectKeyEvents(e) {
if (e.key === "Enter") {
if (!open) {
function handleEnter(e) {
if (!open && e.key === "Enter") {
toggleSelect(true)
}
} else if (e.key === "Escape") {
if (open) {
toggleSelect(false)
}
}
}
}
function toggleSelect(isOpen) {
checkPosition()
getDimensions()
if (isOpen) {
icon.style.transform = "rotate(180deg)"
icon.style.transform = "rotate(180deg)"
} else {
icon.style.transform = "rotate(0deg)"
}
open = isOpen
}
function handleClick(val) {
value = val
onChange(value)
}
$: menuStyle = buildStyle({
"max-height": maxHeight,
"max-height": `${maxHeight.toFixed(0)}px`,
"transform-origin": `center ${positionSide}`,
[positionSide]: "32px",
[positionSide]: `${dimensions[positionSide]}px`,
"left": `${dimensions.left.toFixed(0)}px`,
})
$: isOptionsObject = options.every(o => typeof o === "object")
@ -83,6 +95,10 @@
? options.find(o => o.value === value)
: {}
$: if(open && selectMenu) {
selectMenu.focus()
}
$: displayLabel =
selectedOption && selectedOption.label ? selectedOption.label : value || ""
</script>
@ -92,45 +108,49 @@
bind:this={select}
class="bb-select-container"
on:click={() => toggleSelect(!open)}>
<div class="bb-select-anchor selected">
<div bind:this={selectAnchor} class="bb-select-anchor selected">
<span>{displayLabel}</span>
<i bind:this={icon} class="ri-arrow-down-s-fill" />
</div>
<div
bind:this={selectMenu}
style={menuStyle}
class="bb-select-menu"
class:open>
<ul>
{#if isOptionsObject}
{#each options as { value: v, label }}
<li
{...handleStyleBind(v)}
on:click|self={handleClick(v)}
class:selected={value === v}>
{label}
</li>
{/each}
{:else}
{#each options as v}
<li
{...handleStyleBind(v)}
on:click|self={handleClick(v)}
class:selected={value === v}>
{v}
</li>
{/each}
{/if}
</ul>
</div>
{#if open}
<Portal>
<div
tabindex="0"
class:open
bind:this={selectMenu}
style={menuStyle}
on:keydown={handleEscape}
class="bb-select-menu">
<ul>
{#if isOptionsObject}
{#each options as { value: v, label }}
<li
{...handleStyleBind(v)}
on:click|self={handleClick(v)}
class:selected={value === v}>
{label}
</li>
{/each}
{:else}
{#each options as v}
<li
{...handleStyleBind(v)}
on:click|self={handleClick(v)}
class:selected={value === v}>
{v}
</li>
{/each}
{/if}
</ul>
</div>
<div on:click|self={() => toggleSelect(false)} class="overlay" />
</Portal>
{/if}
</div>
{#if open}
<div on:click|self={() => toggleSelect(false)} class="overlay" />
{/if}
<style>
.overlay {
position: absolute;
position: fixed;
top: 0;
bottom: 0;
right: 0;
@ -139,7 +159,6 @@
}
.bb-select-container {
position: relative;
outline: none;
width: 160px;
height: 36px;
@ -180,6 +199,7 @@
.bb-select-menu {
position: absolute;
display: flex;
outline: none;
box-sizing: border-box;
flex-direction: column;
opacity: 0;
@ -190,9 +210,6 @@
height: fit-content !important;
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px;
border-right: 1px solid var(--grey-4);
border-left: 1px solid var(--grey-4);
border-bottom: 1px solid var(--grey-4);
background-color: var(--grey-2);
transform: scale(0);
transition: opacity 0.13s linear, transform 0.12s cubic-bezier(0, 0, 0.2, 1);