change how scroller does overflow, for sticky

fullcalendar · Apr 9, 2020 · a064aba · a064aba
1 parent ee26fb5
commit a064aba
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/packages-premium b/packages-premium
diff --git a/packages/core/src/scrollgrid/Scroller.tsx b/packages/core/src/scrollgrid/Scroller.tsx
@@ -3,7 +3,7 @@ import { BaseComponent, setRef } from '../vdom-util'
 import { CssDimValue, ScrollerLike } from './util'
 
 
-export type OverflowValue = 'auto' | 'hidden' | 'scroll'
+export type OverflowValue = 'auto' | 'hidden' | 'scroll' | 'visible'
 
 export interface ScrollerProps {
   overflowX: OverflowValue
@@ -18,6 +18,9 @@ export interface ScrollerProps {
   elRef?: Ref<HTMLElement>
 }
 
+const VISIBLE_HIDDEN_RE = /^(visible|hidden)$/
+
+
 export default class Scroller extends BaseComponent<ScrollerProps> implements ScrollerLike {
 
   private el: HTMLElement // TODO: just use this.base?
@@ -59,7 +62,7 @@ export default class Scroller extends BaseComponent<ScrollerProps> implements Sc
 
 
   needsXScrolling() {
-    if (this.props.overflowX === 'hidden') {
+    if (VISIBLE_HIDDEN_RE.test(this.props.overflowX)) {
       return false
     }
 
@@ -84,7 +87,7 @@ export default class Scroller extends BaseComponent<ScrollerProps> implements Sc
 
 
   needsYScrolling() {
-    if (this.props.overflowY === 'hidden') {
+    if (VISIBLE_HIDDEN_RE.test(this.props.overflowY)) {
       return false
     }
 
@@ -109,7 +112,7 @@ export default class Scroller extends BaseComponent<ScrollerProps> implements Sc
 
 
   getXScrollbarWidth() {
-    if (this.props.overflowX === 'hidden') {
+    if (VISIBLE_HIDDEN_RE.test(this.props.overflowX)) {
       return 0
     } else {
       return this.el.offsetHeight - this.el.clientHeight // only works because we guarantee no borders. TODO: add to CSS with important?
@@ -118,7 +121,7 @@ export default class Scroller extends BaseComponent<ScrollerProps> implements Sc
 
 
   getYScrollbarWidth() {
-    if (this.props.overflowY === 'hidden') {
+    if (VISIBLE_HIDDEN_RE.test(this.props.overflowY)) {
       return 0
     } else {
       return this.el.offsetWidth - this.el.clientWidth // only works because we guarantee no borders. TODO: add to CSS with important?

diff --git a/packages/core/src/scrollgrid/SimpleScrollGrid.tsx b/packages/core/src/scrollgrid/SimpleScrollGrid.tsx
@@ -89,12 +89,16 @@ export default class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProp
       return chunkConfig.outerContent
     }
 
+    let { props } = this
     let { forceYScrollbars, scrollerClientWidths, scrollerClientHeights } = this.state
 
-    let needsYScrolling = getAllowYScrolling(this.props, sectionConfig) // TODO: do lazily. do in section config?
-    let isLiquid = getSectionHasLiquidHeight(this.props, sectionConfig)
+    let needsYScrolling = getAllowYScrolling(props, sectionConfig) // TODO: do lazily. do in section config?
+    let isLiquid = getSectionHasLiquidHeight(props, sectionConfig)
 
+    // for `!props.liquid` - is WHOLE scrollgrid natural height?
+    // TODO: do same thing in advanced scrollgrid? prolly not b/c always has horizontal scrollbars
     let overflowY: OverflowValue =
+      !props.liquid ? 'visible' :
       forceYScrollbars ? 'scroll' :
       !needsYScrolling ? 'hidden' :
       'auto'
@@ -117,7 +121,7 @@ export default class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProp
             ref={this.scrollerRefs.createRef(sectionI)}
             elRef={this.scrollerElRefs.createRef(sectionI)}
             overflowY={overflowY}
-            overflowX='hidden'
+            overflowX={!props.liquid ? 'visible' : 'hidden' /* natural height? */}
             maxHeight={sectionConfig.maxHeight}
             liquid={isLiquid}
             liquidIsAbsolute={true /* because its within a harness */}

diff --git a/packages/list/src/ListView.tsx b/packages/list/src/ListView.tsx
@@ -52,8 +52,8 @@ export default class ListView extends DateComponent<ViewProps> {
           <div ref={rootElRef} class={extraClassNames.concat(classNames).join(' ')}>
             <Scroller
               liquid={!props.isHeightAuto}
-              overflowX='hidden'
-              overflowY='auto'
+              overflowX={props.isHeightAuto ? 'visible' : 'hidden'}
+              overflowY={props.isHeightAuto ? 'visible' : 'auto'}
             >
               {eventSegs.length > 0 ?
                 this.renderSegList(eventSegs, dayDates) :