be smarter about where event-color css is attached

fullcalendar · May 19, 2020 · 0cd006b · 0cd006b
1 parent 112d273
commit 0cd006b
Show file tree

Hide file tree

Showing 7 changed files with 26 additions and 32 deletions.
diff --git a/packages-premium b/packages-premium
diff --git a/packages/common/src/common/EventRoot.tsx b/packages/common/src/common/EventRoot.tsx
@@ -2,7 +2,7 @@ import { Seg } from '../component/DateComponent'
 import { ComponentChildren, createElement, Ref, createRef } from '../vdom'
 import { EventApi } from '../api/EventApi'
 import { computeSegDraggable, computeSegStartResizable, computeSegEndResizable, setElSeg } from '../component/event-rendering'
-import { EventMeta, getSkinCss, getEventClassNames } from '../component/event-rendering'
+import { EventMeta, getEventClassNames } from '../component/event-rendering'
 import { RenderHook } from './render-hook'
 import { BaseComponent } from '../vdom-util'
 
@@ -26,7 +26,6 @@ export interface EventRootProps extends MinimalEventProps {
   children: (
     rootElRef: Ref<any>,
     classNames: string[],
-    style: any,
     innerElRef: Ref<any>,
     innerContent: ComponentChildren,
     hookProps: EventMeta
@@ -67,7 +66,6 @@ export class EventRoot extends BaseComponent<EventRootProps> {
       isResizing: Boolean(props.isResizing)
     }
 
-    let style = getSkinCss(ui)
     let standardClassNames = getEventClassNames(hookProps).concat(ui.classNames)
 
     return (
@@ -81,7 +79,7 @@ export class EventRoot extends BaseComponent<EventRootProps> {
         elRef={this.elRef}
       >
         {(rootElRef, customClassNames, innerElRef, innerContent) => props.children(
-          rootElRef, standardClassNames.concat(customClassNames), style, innerElRef, innerContent, hookProps
+          rootElRef, standardClassNames.concat(customClassNames), innerElRef, innerContent, hookProps
         )}
       </RenderHook>
     )

diff --git a/packages/common/src/common/StandardEvent.tsx b/packages/common/src/common/StandardEvent.tsx
@@ -23,13 +23,13 @@ export class StandardEvent extends BaseComponent<StandardEventProps> {
 
   render() {
     let { props, context } = this
-
+    let { seg } = props
     let timeFormat = context.options.eventTimeFormat || props.defaultTimeFormat
-    let timeText = buildSegTimeText(props.seg, timeFormat, context, props.defaultDisplayEventTime, props.defaultDisplayEventEnd)
+    let timeText = buildSegTimeText(seg, timeFormat, context, props.defaultDisplayEventTime, props.defaultDisplayEventEnd)
 
     return (
       <EventRoot
-        seg={props.seg}
+        seg={seg}
         timeText={timeText}
         disableDragging={props.disableDragging}
         disableResizing={props.disableResizing}
@@ -42,14 +42,17 @@ export class StandardEvent extends BaseComponent<StandardEventProps> {
         isFuture={props.isFuture}
         isToday={props.isToday}
       >
-        {(rootElRef, classNames, style, innerElRef, innerContent, hookProps) => (
+        {(rootElRef, classNames, innerElRef, innerContent, hookProps) => (
           <a
             className={props.extraClassNames.concat(classNames).join(' ')}
-            style={style}
+            style={{
+              borderColor: hookProps.borderColor,
+              backgroundColor: hookProps.backgroundColor
+            }}
             ref={rootElRef}
-            {...getSegAnchorAttrs(props.seg)}
+            {...getSegAnchorAttrs(seg)}
           >
-            <div className='fc-event-main' ref={innerElRef}>
+            <div className='fc-event-main' ref={innerElRef} style={{ color: hookProps.textColor }}>
               {innerContent}
             </div>
             {hookProps.isStartResizable &&

diff --git a/packages/common/src/common/bg-fill.tsx b/packages/common/src/common/bg-fill.tsx
@@ -33,8 +33,14 @@ export const BgEvent = (props: BgEventProps) => (
     isFuture={props.isFuture}
     isToday={props.isToday}
   >
-    {(rootElRef, classNames, style, innerElRef, innerContent) => (
-      <div ref={rootElRef} className={[ 'fc-bg-event' ].concat(classNames).join(' ')} style={style}>
+    {(rootElRef, classNames, innerElRef, innerContent, hookProps) => (
+      <div
+        ref={rootElRef}
+        className={[ 'fc-bg-event' ].concat(classNames).join(' ')}
+        style={{
+          backgroundColor: hookProps.backgroundColor
+        }}
+      >
         {innerContent}
       </div>
     )}

diff --git a/packages/common/src/component/event-rendering.ts b/packages/common/src/component/event-rendering.ts
@@ -349,12 +349,3 @@ export function getEventClassNames(props: EventMeta) { // weird that we use this
 
   return classNames
 }
-
-
-export function getSkinCss(ui: EventUi) {
-  return {
-    backgroundColor: ui.backgroundColor,
-    borderColor: ui.borderColor,
-    color: ui.textColor
-  }
-}
diff --git a/packages/daygrid/src/TableListItemEvent.tsx b/packages/daygrid/src/TableListItemEvent.tsx
@@ -16,8 +16,6 @@ export class TableListItemEvent extends BaseComponent<DotTableEventProps> {
 
   render() {
     let { props, context } = this
-
-
     let timeFormat = context.options.eventTimeFormat || DEFAULT_TABLE_EVENT_TIME_FORMAT
     let timeText = buildSegTimeText(props.seg, timeFormat, context, true, props.defaultDisplayEventEnd)
 
@@ -34,11 +32,11 @@ export class TableListItemEvent extends BaseComponent<DotTableEventProps> {
         isFuture={props.isFuture}
         isToday={props.isToday}
       >
-        {(rootElRef, classNames, style, innerElRef, innerContent, innerProps) => ( // we don't use styles!
+        {(rootElRef, classNames, innerElRef, innerContent, hookProps) => ( // we don't use styles!
           <a
             className={[ 'fc-daygrid-event', 'fc-daygrid-dot-event' ].concat(classNames).join(' ')}
             ref={rootElRef}
-            style={{ color: innerProps.textColor }}
+            style={{ color: hookProps.textColor }}
             {...getSegAnchorAttrs(props.seg)}
           >
             {innerContent}

diff --git a/packages/list/src/ListViewEventRow.tsx b/packages/list/src/ListViewEventRow.tsx
@@ -34,15 +34,13 @@ export class ListViewEventRow extends BaseComponent<MinimalEventProps> {
         isResizing={props.isResizing}
         isDateSelecting={props.isDateSelecting}
       >
-        {(rootElRef, classNames, style, innerElRef, innerContent, hookProps) => (
+        {(rootElRef, classNames, innerElRef, innerContent, hookProps) => (
           <tr className={[ 'fc-list-event', hookProps.event.url ? 'fc-event-forced-url' : '' ].concat(classNames).join(' ')} ref={rootElRef}>
             {buildTimeContent(seg, timeFormat, context)}
             <td className='fc-list-event-graphic'>
-              <span className='fc-list-event-dot' style={{
-                backgroundColor: hookProps.event.backgroundColor
-              }} />
+              <span className='fc-list-event-dot' style={{ backgroundColor: hookProps.backgroundColor }} />
             </td>
-            <td className='fc-list-event-title' ref={innerElRef}>
+            <td className='fc-list-event-title' ref={innerElRef} style={{ color: hookProps.textColor }}>
               {innerContent}
             </td>
           </tr>