feat(time-indicator-wrapper): expose time indicator wrapper component (jquense#2747)

Co-authored-by: davidju <[email protected]>

Author: davidjudilla

src/Calendar.js

@@ -767,6 +767,7 @@ class Calendar extends React.Component {
      *   timeSlotWrapper: MyTimeSlotWrapper,
      *   timeGutterHeader: MyTimeGutterWrapper,
      *   timeGutterWrapper: MyTimeGutterWrapper,
+     *   timeIndicatorWrapper: MyTimeIndicatorWrapper,
      *   resourceHeader: MyResourceHeader,
      *   showMore: MyShowMoreEvent,
      *   toolbar: MyToolbar,
@@ -801,6 +802,7 @@ class Calendar extends React.Component {
       timeSlotWrapper: PropTypes.elementType,
       timeGutterHeader: PropTypes.elementType,
       timeGutterWrapper: PropTypes.elementType,
+      timeIndicatorWrapper: PropTypes.elementType,
       resourceHeader: PropTypes.elementType,
       showMore: PropTypes.elementType,
 
@@ -975,6 +977,7 @@ class Calendar extends React.Component {
         weekWrapper: NoopWrapper,
         timeSlotWrapper: NoopWrapper,
         timeGutterWrapper: NoopWrapper,
+        timeIndicatorWrapper: NoopWrapper,
       }),
       accessors: {
         start: wrapAccessor(startAccessor),

src/DayColumn.js

@@ -110,7 +110,11 @@ class DayColumn extends React.Component {
       accessors,
       localizer,
       getters: { dayProp, ...getters },
-      components: { eventContainerWrapper: EventContainer, ...components },
+      components: {
+        eventContainerWrapper: EventContainer,
+        timeIndicatorWrapper: TimeIndicatorWrapper,
+        ...components
+      },
     } = this.props
 
     this.slotMetrics = this.slotMetrics.update(this.props)
@@ -122,6 +126,13 @@ class DayColumn extends React.Component {
 
     const { className, style } = dayProp(max, resource)
 
+    const timeIndicatorProps = {
+      className: 'rbc-current-time-indicator',
+      style: {
+        top: `${this.state.timeIndicatorPosition}%`,
+      },
+    }
+
     const DayColumnWrapperComponent =
       components.dayColumnWrapper || DayColumnWrapper
 
@@ -173,10 +184,9 @@ class DayColumn extends React.Component {
           </div>
         )}
         {isNow && this.intervalTriggered && (
-          <div
-            className="rbc-current-time-indicator"
-            style={{ top: `${this.state.timeIndicatorPosition}%` }}
-          />
+          <TimeIndicatorWrapper {...timeIndicatorProps}>
+            <div {...timeIndicatorProps} />
+          </TimeIndicatorWrapper>
         )}
       </DayColumnWrapperComponent>
     )

stories/Calendar.stories.js

@@ -68,6 +68,20 @@ CustomTimeGutterWrapper.args = {
   },
 }
 
+export const CustomTimeIndicatorWrapper = Template.bind({})
+CustomTimeIndicatorWrapper.storyName = 'custom TimeIndicator wrapper'
+CustomTimeIndicatorWrapper.args = {
+  popup: true,
+  events: demoEvents,
+  onSelectEvent: action('event selected'),
+  defaultDate: new Date(2015, 3, 1),
+  defaultView: Views.WEEK,
+  views: [Views.WEEK, Views.DAY],
+  components: {
+    timeIndicatorWrapper: customComponents.timeIndicatorWrapper,
+  },
+}
+
 export const CustomDateCellWrapper = Template.bind({})
 CustomDateCellWrapper.storyName = 'add custom dateCellWrapper'
 CustomDateCellWrapper.args = {

stories/resources/customComponents.js

@@ -102,6 +102,20 @@ const customComponents = {
       </button>
     )
   },
+  timeIndicatorWrapper: (timeIndicatorWrapperProps) => {
+    return (
+      <div
+        {...timeIndicatorWrapperProps}
+        style={{
+          ...timeIndicatorWrapperProps.style,
+          backgroundColor: 'red',
+          height: '2px',
+        }}
+      >
+        Time Ex
+      </div>
+    )
+  },
 }
 
 export default customComponents