fix react warnings

fullcalendar · May 18, 2020 · ad14847 · ad14847
1 parent 2975ac7
commit ad14847
Show file tree

Hide file tree

Showing 20 changed files with 323 additions and 255 deletions.
diff --git a/examples/list-sticky-header.html b/examples/list-sticky-header.html
@@ -6,7 +6,6 @@
 <script src='../packages/bundle/main.js'></script>
 <script src='../node_modules/rrule/dist/es5/rrule.js'></script>
 <script src='../packages/bundle/main.js'></script>
-<script src='../packages/bundle/rrule.js'></script>
 <script>
 
   document.addEventListener('DOMContentLoaded', function() {
@@ -19,28 +18,34 @@
       headerToolbar: {
         left: 'prev,next today',
         center: 'title',
-        right: 'listDay,listWeek'
+        right: 'listMonth,listYear'
       },
 
       // customize the button names,
       // otherwise they'd all just say "list"
       views: {
-        listDay: { buttonText: 'list day' },
-        listWeek: { buttonText: 'list week' }
+        listMonth: { buttonText: 'list month' },
+        listYear: { buttonText: 'list year' }
       },
 
-      initialView: 'listWeek',
+      initialView: 'listYear',
       initialDate: '2020-02-12',
       navLinks: true, // can click day/week names to navigate views
       editable: true,
       events: [
         {
-          title: 'repeating event',
-          rrule: {
-            dtstart: '2020-02-09T13:00:00',
-            freq: 'hourly',
-            count: 50
-          },
+          title: 'repeating event 1',
+          daysOfWeek: [ 1, 2, 3 ],
+          duration: '00:30'
+        },
+        {
+          title: 'repeating event 2',
+          daysOfWeek: [ 1, 2, 3 ],
+          duration: '00:30'
+        },
+        {
+          title: 'repeating event 3',
+          daysOfWeek: [ 1, 2, 3 ],
           duration: '00:30'
         }
       ]

diff --git a/examples/timegrid-sticky-header.html b/examples/timegrid-sticky-header.html
@@ -11,7 +11,7 @@
 
     var calendar = new FullCalendar.Calendar(calendarEl, {
       height: 'auto', // enough to active sticky headers
-      dayMinWidth: 150,
+      dayMinWidth: 200,
 
       slotDuration: '00:05:00',
       initialDate: '2020-02-12',

diff --git a/packages-premium b/packages-premium
diff --git a/packages/common/src/CalendarContent.tsx b/packages/common/src/CalendarContent.tsx
@@ -9,7 +9,7 @@ import { DateMarker } from './datelib/marker'
 import { CalendarData } from './reducers/data-types'
 import { ViewPropsTransformerClass } from './plugin-system-struct'
 import { __assign } from 'tslib'
-import { h, createRef, Component, VUIEvent } from './vdom'
+import { h, createRef, Component, VUIEvent, Fragment } from './vdom'
 import { buildDelegationHandler } from './util/dom-event'
 import { ViewContainer } from './ViewContainer'
 import { CssDimValue } from './scrollgrid/util'
@@ -203,9 +203,11 @@ export class CalendarContent extends Component<CalendarContentProps, CalendarCon
   buildAppendContent() {
     let { props } = this
 
-    return props.pluginHooks.viewContainerAppends.map(
+    let children = props.pluginHooks.viewContainerAppends.map(
       (buildAppendContent) => buildAppendContent(props)
     )
+
+    return h(Fragment, {}, ...children)
   }
 
 

diff --git a/packages/common/src/NowTimer.ts b/packages/common/src/NowTimer.ts
@@ -8,7 +8,7 @@ import { getNow } from './reducers/current-date'
 
 export interface NowTimerProps {
   unit: string // TODO: add type of unit
-  content: (now: DateMarker, todayRange: DateRange) => ComponentChildren
+  children: (now: DateMarker, todayRange: DateRange) => ComponentChildren
 }
 
 interface NowTimerState {
@@ -39,7 +39,7 @@ export class NowTimer extends Component<NowTimerProps, NowTimerState> {
 
   render() {
     let { props, state } = this
-    return props.content(state.nowDate, state.todayRange)
+    return props.children(state.nowDate, state.todayRange)
   }
 
 

diff --git a/packages/common/src/Toolbar.tsx b/packages/common/src/Toolbar.tsx
@@ -1,4 +1,4 @@
-import { h } from './vdom'
+import { h, VNode } from './vdom'
 import { BaseComponent } from './vdom-util'
 import { ToolbarModel, ToolbarWidget } from './toolbar-struct'
 
@@ -81,59 +81,59 @@ interface ToolbarSectionProps extends ToolbarContent {
 class ToolbarSection extends BaseComponent<ToolbarSectionProps> {
 
   render() {
+    let children = this.props.widgetGroups.map((widgetGroup) => this.renderWidgetGroup(widgetGroup))
+
+    return h('div', { className: 'fc-toolbar-chunk' }, ...children)
+  }
+
+
+  renderWidgetGroup(widgetGroup: ToolbarWidget[]) {
     let { props } = this
     let { theme } = this.context
+    let children: VNode[] = []
+    let isOnlyButtons = true
+
+    for (let widget of widgetGroup) {
+      let { buttonName, buttonClick, buttonText, buttonIcon } = widget
+
+      if (buttonName === 'title') {
+        isOnlyButtons = false
+        children.push(
+          <h2 className='fc-toolbar-title'>{props.title}</h2>
+        )
+
+      } else {
+        let ariaAttrs = buttonIcon ? { 'aria-label': buttonName } : {}
+
+        let buttonClasses = [ 'fc-' + buttonName + '-button', theme.getClass('button') ]
+        if (buttonName === props.activeButton) {
+          buttonClasses.push(theme.getClass('buttonActive'))
+        }
+
+        let isDisabled =
+          (!props.isTodayEnabled && buttonName === 'today') ||
+          (!props.isPrevEnabled && buttonName === 'prev') ||
+          (!props.isNextEnabled && buttonName === 'next')
+
+        children.push(
+          <button
+            disabled={isDisabled}
+            className={buttonClasses.join(' ')}
+            onClick={buttonClick}
+            { ...ariaAttrs }
+          >{ buttonText || (buttonIcon ? <span className={buttonIcon} /> : '')}</button>
+        )
+      }
+    }
 
-    return (
-      <div className='fc-toolbar-chunk'>
-        {props.widgetGroups.map((widgetGroup: ToolbarWidget[]) => {
-          let children = []
-          let isOnlyButtons = true
-
-          for (let widget of widgetGroup) {
-            let { buttonName, buttonClick, buttonText, buttonIcon } = widget
-
-            if (buttonName === 'title') {
-              isOnlyButtons = false
-              children.push(
-                <h2 className='fc-toolbar-title'>{props.title}</h2>
-              )
-
-            } else {
-              let ariaAttrs = buttonIcon ? { 'aria-label': buttonName } : {}
-
-              let buttonClasses = [ 'fc-' + buttonName + '-button', theme.getClass('button') ]
-              if (buttonName === props.activeButton) {
-                buttonClasses.push(theme.getClass('buttonActive'))
-              }
-
-              let isDisabled =
-                (!props.isTodayEnabled && buttonName === 'today') ||
-                (!props.isPrevEnabled && buttonName === 'prev') ||
-                (!props.isNextEnabled && buttonName === 'next')
-
-              children.push(
-                <button
-                  disabled={isDisabled}
-                  className={buttonClasses.join(' ')}
-                  onClick={buttonClick}
-                  { ...ariaAttrs }
-                >{ buttonText || (buttonIcon ? <span className={buttonIcon} /> : '')}</button>
-              )
-            }
-          }
-
-          if (children.length > 1) {
-            let groupClasses = (isOnlyButtons && theme.getClass('buttonGroup')) || ''
-
-            return (<div className={groupClasses}>{children}</div>)
-          } else {
-            return children[0]
-          }
-
-        })}
-      </div>
-    )
+    if (children.length > 1) {
+      let groupClassName = (isOnlyButtons && theme.getClass('buttonGroup')) || ''
+
+      return h('div', { className: groupClassName }, ...children)
+
+    } else {
+      return children[0]
+    }
   }
 
 }
diff --git a/packages/common/src/common/DayHeader.tsx b/packages/common/src/common/DayHeader.tsx
@@ -34,27 +34,29 @@ export class DayHeader extends BaseComponent<DayHeaderProps> { // TODO: rename t
     )
 
     return (
-      <NowTimer unit='day' content={(nowDate: DateMarker, todayRange: DateRange) => (
-        <tr>
-          {renderIntro && renderIntro()}
-          {dates.map((date) => (
-            datesRepDistinctDays ?
-              <TableDateCell
-                key={date.toISOString()}
-                date={date}
-                dateProfile={dateProfile}
-                todayRange={todayRange}
-                colCnt={dates.length}
-                dayHeaderFormat={dayHeaderFormat}
-              /> :
-              <TableDowCell
-                key={date.getUTCDay()}
-                dow={date.getUTCDay()}
-                dayHeaderFormat={dayHeaderFormat}
-              />
-          ))}
-        </tr>
-      )} />
+      <NowTimer unit='day'>
+        {(nowDate: DateMarker, todayRange: DateRange) => (
+          <tr>
+            {renderIntro && renderIntro()}
+            {dates.map((date) => (
+              datesRepDistinctDays ?
+                <TableDateCell
+                  key={date.toISOString()}
+                  date={date}
+                  dateProfile={dateProfile}
+                  todayRange={todayRange}
+                  colCnt={dates.length}
+                  dayHeaderFormat={dayHeaderFormat}
+                /> :
+                <TableDowCell
+                  key={date.getUTCDay()}
+                  dow={date.getUTCDay()}
+                  dayHeaderFormat={dayHeaderFormat}
+                />
+            ))}
+          </tr>
+        )}
+      </NowTimer>
     )
   }
 

diff --git a/packages/common/src/common/StandardEvent.tsx b/packages/common/src/common/StandardEvent.tsx
@@ -68,14 +68,16 @@ export class StandardEvent extends BaseComponent<StandardEventProps> {
 
 
 function renderInnerContent(innerProps: EventMeta) {
-  return [
-    innerProps.timeText &&
-      <div className='fc-event-time'>{innerProps.timeText}</div>
-    ,
-    <div className='fc-event-title'>
-      {innerProps.event.title || <Fragment>&nbsp;</Fragment>}
-    </div>
-  ]
+  return (
+    <Fragment>
+      {innerProps.timeText &&
+        <div className='fc-event-time'>{innerProps.timeText}</div>
+      }
+      <div className='fc-event-title'>
+        {innerProps.event.title || <Fragment>&nbsp;</Fragment>}
+      </div>
+    </Fragment>
+  )
 }
 
 

diff --git a/packages/common/src/scrollgrid/ScrollGridImpl.ts b/packages/common/src/scrollgrid/ScrollGridImpl.ts
@@ -12,8 +12,12 @@ export interface ScrollGridProps {
 }
 
 export interface ScrollGridSectionConfig extends SectionConfig {
-  key?: string
-  chunks?: ChunkConfig[] // TODO: make this mandatory, somehow also accomodate outerContent
+  key: string
+  chunks?: ScrollGridChunkConfig[] // TODO: make this mandatory, somehow also accomodate outerContent
+}
+
+export interface ScrollGridChunkConfig extends ChunkConfig {
+  key: string
 }
 
 export interface ColGroupConfig {

diff --git a/packages/common/src/scrollgrid/SimpleScrollGrid.tsx b/packages/common/src/scrollgrid/SimpleScrollGrid.tsx
@@ -1,4 +1,4 @@
-import { VNode, h } from '../vdom'
+import { VNode, h, Fragment } from '../vdom'
 import { BaseComponent, setRef } from '../vdom-util'
 import { Scroller, OverflowValue } from './Scroller'
 import { RefMap } from '../util/RefMap'
@@ -21,7 +21,7 @@ export interface SimpleScrollGridProps {
 }
 
 export interface SimpleScrollGridSection extends SectionConfig {
-  key?: string
+  key: string
   chunk?: ChunkConfig
 }
 
@@ -72,7 +72,11 @@ export class SimpleScrollGrid extends BaseComponent<SimpleScrollGridProps, Simpl
   renderSection(sectionConfig: SimpleScrollGridSection, sectionI: number, microColGroupNode: VNode) {
 
     if ('outerContent' in sectionConfig) {
-      return sectionConfig.outerContent
+      return (
+        <Fragment key={sectionConfig.key}>
+          {sectionConfig.outerContent}
+        </Fragment>
+      )
     }
 
     return (

diff --git a/packages/common/src/scrollgrid/util.tsx b/packages/common/src/scrollgrid/util.tsx
@@ -89,20 +89,21 @@ export function renderChunkContent(sectionConfig: SectionConfig, chunkConfig: Ch
 
   let content: VNode = typeof chunkConfig.content === 'function' ?
     chunkConfig.content(arg) :
-    h('table', {
-      className: [
-        chunkConfig.tableClassName,
-        sectionConfig.syncRowHeights ? 'fc-scrollgrid-sync-table' : ''
-      ].join(' '),
-      style: {
-        minWidth: arg.tableMinWidth, // because colMinWidths arent enough
-        width: arg.clientWidth,
-        height: expandRows ? arg.clientHeight : '' // css `height` on a <table> serves as a min-height
-      }
-    }, [
+    h('table',
+      {
+        className: [
+          chunkConfig.tableClassName,
+          sectionConfig.syncRowHeights ? 'fc-scrollgrid-sync-table' : ''
+        ].join(' '),
+        style: {
+          minWidth: arg.tableMinWidth, // because colMinWidths arent enough
+          width: arg.clientWidth,
+          height: expandRows ? arg.clientHeight : '' // css `height` on a <table> serves as a min-height
+        }
+      },
       arg.tableColGroupNode,
       h('tbody', {}, typeof chunkConfig.rowContent === 'function' ? chunkConfig.rowContent(arg) : chunkConfig.rowContent)
-    ])
+    )
 
   return content
 }
@@ -136,7 +137,7 @@ export function renderMicroColGroup(cols: ColProps[], shrinkWidth?: number) {
     }
   }
 
-  return (<colgroup>{colNodes}</colgroup>)
+  return h('colgroup', {}, ...colNodes)
 }