better classnames for scrollgrid

packages-premium

@@ -1 +1 @@
-Subproject commit 9f09518bd1af107211bb9a3c69c21eb2cfc83410
+Subproject commit c9a13555b2f4c2b9704e3f6421892f90e3ca701f

packages/__tests__/src/event-drag/between-calendars.js

@@ -131,7 +131,7 @@ describe('dragging events between calendars', function() {
 
     let eventEl = getSingleEl()[0]
     let point0 = getRectCenter(eventEl.getBoundingClientRect())
-    let point1 = getRectCenter(el1.querySelector('.fc-time-grid-container').getBoundingClientRect())
+    let point1 = getRectCenter(el1.querySelector('.fc-scrollgrid .fc-body:last-child .fc-scroller').getBoundingClientRect())
 
     $(eventEl).simulate('drag', {
       point: point0,

packages/__tests__/src/legacy/height-and-contentHeight.js

@@ -95,7 +95,7 @@ import { getFirstDateEl } from '../lib/ViewUtils'
                       init(testInfo.height)
                       diff = Math.abs(heightElm.outerHeight() - 600)
                       expect(diff).toBeLessThan(2)
-                      expect('.fc-day-grid-container').not.toHaveScrollbars()
+                      expect('.fc-scrollgrid .fc-body:last-child .fc-scroller').not.toHaveScrollbars()
                     })
                   })
 
@@ -120,7 +120,7 @@ import { getFirstDateEl } from '../lib/ViewUtils'
                       })
 
                       expect(tallRow.outerHeight()).toBeGreaterThan(shortHeight * 2) // much taller
-                      expect('.fc-day-grid-container').not.toHaveScrollbars()
+                      expect('.fc-scrollgrid .fc-body:last-child .fc-scroller').not.toHaveScrollbars()
                     })
                   })
 
@@ -139,7 +139,7 @@ import { getFirstDateEl } from '../lib/ViewUtils'
                     it('height is correct and scrollbars show up', function() {
                       init(testInfo.height)
                       expectHeight(600)
-                      expect($('.fc-day-grid-container')).toHaveScrollbars()
+                      expect($('.fc-scrollgrid .fc-body:last-child .fc-scroller')).toHaveScrollbars()
                     })
                   })
                 })
@@ -159,7 +159,7 @@ import { getFirstDateEl } from '../lib/ViewUtils'
                 it('height is really tall and there are no scrollbars', function() {
                   init('auto')
                   expect(heightElm.outerHeight()).toBeGreaterThan(1000) // pretty tall
-                  expect($('.fc-day-grid-container')).not.toHaveScrollbars()
+                  expect($('.fc-scrollgrid .fc-body:last-child .fc-scroller')).not.toHaveScrollbars()
                 })
               })
             });
@@ -185,7 +185,7 @@ import { getFirstDateEl } from '../lib/ViewUtils'
                       it('should be the specified height, with no scrollbars', function() {
                         init(testInfo.height)
                         expectHeight(600)
-                        expect('.fc-day-grid-container').not.toHaveScrollbars()
+                        expect('.fc-scrollgrid .fc-body:last-child .fc-scroller').not.toHaveScrollbars()
                       })
                     })
 
@@ -196,7 +196,7 @@ import { getFirstDateEl } from '../lib/ViewUtils'
                       it('should have the correct height, with scrollbars', function() {
                         init(testInfo.height)
                         expectHeight(600)
-                        expect('.fc-day-grid-container').toHaveScrollbars()
+                        expect('.fc-scrollgrid .fc-body:last-child .fc-scroller').toHaveScrollbars()
                       })
                     })
                   })
@@ -209,7 +209,7 @@ import { getFirstDateEl } from '../lib/ViewUtils'
                   it('should be really tall with no scrollbars', function() {
                     init('auto')
                     expect(heightElm.outerHeight()).toBeGreaterThan(1000) // pretty tall
-                    expect('.fc-day-grid-container').not.toHaveScrollbars()
+                    expect('.fc-scrollgrid .fc-body:last-child .fc-scroller').not.toHaveScrollbars()
                   })
                 })
               })
@@ -258,7 +258,7 @@ import { getFirstDateEl } from '../lib/ViewUtils'
                         it('should be the correct height, with scrollbars and no filler hr', function() {
                           init(testInfo.height)
                           expectHeight(600)
-                          expect($('.fc-time-grid-container')).toHaveScrollbars()
+                          expect($('.fc-scrollgrid .fc-body:last-child .fc-scroller')).toHaveScrollbars()
                           expect($('.fc-time-grid > hr')).not.toBeVisible()
                         })
                       })
@@ -273,7 +273,7 @@ import { getFirstDateEl } from '../lib/ViewUtils'
                     it('should be really short with no scrollbars nor horizontal rule', function() {
                       init('auto')
                       expect(heightElm.outerHeight()).toBeLessThan(500) // pretty short
-                      expect($('.fc-time-grid-container')).not.toHaveScrollbars()
+                      expect($('.fc-scrollgrid .fc-body:last-child .fc-scroller')).not.toHaveScrollbars()
                       expect($('.fc-time-grid > hr')).not.toBeVisible()
                     })
                   })
@@ -286,7 +286,7 @@ import { getFirstDateEl } from '../lib/ViewUtils'
                     it('should be really tall with no scrollbars nor horizontal rule', function() {
                       init('auto')
                       expect(heightElm.outerHeight()).toBeGreaterThan(900) // pretty tall
-                      expect($('.fc-time-grid-container')).not.toHaveScrollbars()
+                      expect($('.fc-scrollgrid .fc-body:last-child .fc-scroller')).not.toHaveScrollbars()
                       expect($('.fc-time-grid > hr')).not.toBeVisible()
                     })
                   })

packages/__tests__/src/legacy/refetchEvents.js

@@ -23,7 +23,7 @@ describe('refetchEvents', function() {
           }, 100)
         },
         _eventsPositioned: function() {
-          var scrollEl = $('.fc-time-grid-container.fc-scroller')
+          var scrollEl = $('.fc-scrollgrid .fc-body:last-child .fc-scroller')
           renderCalls++
           if (renderCalls === 1) {
             setTimeout(function() {

packages/__tests__/src/legacy/scrollTime.js

@@ -11,7 +11,7 @@ describe('scrollTime', function() {
     })
     var slotCell = $('.fc-slats tr:eq(4)') // 2am slot
     var slotTop = slotCell.position().top
-    var scrollContainer = $('.fc-time-grid-container')
+    var scrollContainer = $('.fc-scrollgrid .fc-body:last-child .fc-scroller')
     var scrollTop = scrollContainer.scrollTop()
     var diff = Math.abs(slotTop - scrollTop)
     expect(slotTop).toBeGreaterThan(0)
@@ -26,7 +26,7 @@ describe('scrollTime', function() {
     })
     var slotCell = $('.fc-slats tr:eq(4)') // 2am slot
     var slotTop = slotCell.position().top
-    var scrollContainer = $('.fc-time-grid-container')
+    var scrollContainer = $('.fc-scrollgrid .fc-body:last-child .fc-scroller')
     var scrollTop = scrollContainer.scrollTop()
     var diff = Math.abs(slotTop - scrollTop)
     expect(slotTop).toBeGreaterThan(0)

packages/__tests__/src/legacy/select-method.js

@@ -107,7 +107,7 @@ describe('select method', function() {
               initCalendar(options)
               currentCalendar.select('2014-05-26T06:00:00', '2014-05-26T08:00:00')
               expect($('.fc-highlight')).toBeVisible()
-              var slotAreaTop = $('.fc-time-grid-container').offset().top
+              var slotAreaTop = $('.fc-scrollgrid .fc-body:last-child .fc-scroller').offset().top
               var overlayTop = $('.fc-highlight').offset().top
               expect(overlayTop).toBeGreaterThan(slotAreaTop)
             })
@@ -142,7 +142,7 @@ describe('select method', function() {
               initCalendar(options)
               currentCalendar.select('2014-05-26', '2014-05-28')
               expect($('.fc-highlight')).toBeVisible()
-              var slotAreaTop = $('.fc-time-grid-container').offset().top
+              var slotAreaTop = $('.fc-scrollgrid .fc-body:last-child .fc-scroller').offset().top
               var overlayTop = $('.fc-highlight').offset().top
               expect(overlayTop).toBeLessThan(slotAreaTop)
             })

packages/__tests__/src/lib/TimeGridViewUtils.js

@@ -1,6 +1,6 @@
 
 export function getTimeGridScroller() { // returns DOM node
-  return document.querySelector('.fc-scroller.fc-time-grid-container')
+  return document.querySelector('.fc-scrollgrid .fc-body:last-child .fc-scroller')
 }
 
 export function allDaySlotDisplayed() {

packages/__tests__/src/view-render/DayGridRenderUtils.js

@@ -15,9 +15,6 @@ const MORE_CLASS = 'fc-more'
 const HEADER_CLASS = 'fc-header'
 const TITLE_CLASS = 'fc-title'
 const MORE_POPOVER_CLASS = 'fc-more-popover'
-const DAY_HEADER_SELECTOR = '.fc-scrolltable th'
-const HEAD_CONTAINER_CLASS = 'fc-head-container'
-const DIVIDER_CLASS = 'fc-divider'
 const RESIZER_CLASS = 'fc-resizer'
 const NON_BUSINESS_CLASS = 'fc-nonbusiness'
 
@@ -119,10 +116,7 @@ export function getDayGridRowDayElAtIndex(index) {
 }
 
 export function getHeaderTopEls() {
-  return $(DAY_HEADER_SELECTOR)
-    .not(`.${ROW_CLASS}`)
-    .not(`.${HEAD_CONTAINER_CLASS}`)
-    .not(`.${DIVIDER_CLASS}`)
+  return $('.fc-scrollgrid .fc-head th')
 }
 
 export function getBackgroundEventElsResizerEls() {

packages/__tests__/src/view-render/scrollToTime.js

@@ -11,7 +11,7 @@ describe('scrollToTime method', function() {
     // NOTE: c&p'd from scrollTime tests
     var slotCell = $('.fc-slats tr:eq(4)') // 2am slot
     var slotTop = slotCell.position().top
-    var scrollContainer = $('.fc-time-grid-container')
+    var scrollContainer = $('.fc-scrollgrid .fc-body:last-child .fc-scroller')
     var scrollTop = scrollContainer.scrollTop()
     var diff = Math.abs(slotTop - scrollTop)
     expect(slotTop).toBeGreaterThan(0)

packages/core/src/scrollgrid/SimpleScrollGrid.tsx

@@ -77,12 +77,12 @@ export default class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProp
     // making it so there's never be scrollbars
     if (vGrow) {
       return (
-        <td class={getChunkClassNames(sectionConfig, this.context)} ref={chunkConfig.elRef}>
+        <td class={getChunkClassNames(sectionConfig, chunkConfig, this.context)} ref={chunkConfig.elRef}>
           <div style={{ position: 'relative' }} class='vgrow'>
             <Scroller
               ref={this.scrollerRefs.createRef(sectionI)}
               elRef={this.scrollerElRefs.createRef(sectionI, chunkConfig)}
-              className={[ chunkConfig.scrollerClassName, vGrow ? 'vgrow--absolute' : '' ].join(' ')}
+              className='vgrow--absolute'
               overflowY={overflowY}
               overflowX='hidden'
               maxHeight={sectionConfig.maxHeight}
@@ -93,11 +93,10 @@ export default class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProp
       )
     } else {
       return (
-        <td class={getChunkClassNames(sectionConfig, this.context)} ref={chunkConfig.elRef}>
+        <td class={getChunkClassNames(sectionConfig, chunkConfig, this.context)} ref={chunkConfig.elRef}>
           <Scroller
             ref={this.scrollerRefs.createRef(sectionI)}
             elRef={this.scrollerElRefs.createRef(sectionI, chunkConfig)}
-            className={[ chunkConfig.scrollerClassName ].join(' ')}
             overflowY={overflowY}
             overflowX='hidden'
             maxHeight={sectionConfig.maxHeight}

packages/core/src/scrollgrid/util.tsx

@@ -27,9 +27,9 @@ export interface ChunkConfig {
   rowContent?: VNode
   vGrowRows?: boolean
   needsSizing?: boolean
-  scrollerClassName?: string // give this to NormalScrollGrid too ... make a classname for the <td> too
   scrollerElRef?: Ref<HTMLDivElement>
   elRef?: Ref<HTMLTableCellElement>
+  className?: string // on the <td>
 }
 
 export interface ChunkContentCallbackArgs {
@@ -166,7 +166,11 @@ export function getScrollGridClassNames(vGrow: boolean, context: ComponentContex
 
 
 export function getSectionClassNames(sectionConfig: SectionConfig, wholeTableVGrow: boolean) {
-  let classNames = [ 'scrollgrid__section', 'scrollgrid__' + sectionConfig.type, sectionConfig.className ]
+  let classNames = [
+    'scrollgrid__section',
+    'fc-' + sectionConfig.type, // fc-head, fc-body, fc-foot
+    sectionConfig.className
+  ]
 
   if (wholeTableVGrow && sectionConfig.vGrow && sectionConfig.maxHeight == null) {
     classNames.push('vgrow')
@@ -176,8 +180,9 @@ export function getSectionClassNames(sectionConfig: SectionConfig, wholeTableVGr
 }
 
 
-export function getChunkClassNames(sectionConfig: SectionConfig, context: ComponentContext) {
-  return context.theme.getClass(
-    sectionConfig.type === 'body' ? 'tableCellNormal' : 'tableCellHeader'
-  )
+export function getChunkClassNames(sectionConfig: SectionConfig, chunkConfig: ChunkConfig, context: ComponentContext) {
+  return [
+    chunkConfig.className,
+    context.theme.getClass(sectionConfig.type === 'body' ? 'tableCellNormal' : 'tableCellHeader')
+  ].join(' ')
 }

packages/daygrid/src/TableView.tsx

@@ -38,9 +38,7 @@ export default abstract class TableView<State={}> extends View<State> {
     if (headerRowContent) {
       sections.push({
         type: 'head',
-        className: 'fc-head',
         chunk: {
-          scrollerClassName: 'fc-head-container',
           rowContent: headerRowContent
         }
       })
@@ -48,9 +46,7 @@ export default abstract class TableView<State={}> extends View<State> {
 
     sections.push({
       type: 'body',
-      className: 'fc-body',
       chunk: {
-        scrollerClassName: 'fc-day-grid-container',
         content: bodyContent
       }
     })

packages/timegrid/src/TimeColsView.tsx

@@ -58,9 +58,7 @@ export default abstract class TimeColsView extends View {
     if (headerRowContent) {
       sections.push({
         type: 'head',
-        className: 'fc-head',
         chunk: {
-          scrollerClassName: 'fc-head-container', // needed for anything?
           rowContent: headerRowContent
         }
       })
@@ -80,10 +78,8 @@ export default abstract class TimeColsView extends View {
 
     sections.push({
       type: 'body',
-      className: 'fc-body', // should we use above?
       chunk: {
         scrollerElRef: this.scrollerElRef,
-        scrollerClassName: 'fc-time-grid-container',
         content: timeContent
       }
     })

packages/timegrid/src/styles/_time-grid.scss

@@ -37,7 +37,6 @@
 /* TimeGrid Structure
 --------------------------------------------------------------------------------------------------*/
 
-.fc-time-grid-container, /* so scroll container's z-index is below all-day */
 .fc-time-grid { /* so slats/bg/content/etc positions get scoped within here */
   position: relative;
   z-index: 1;