Merge pull request #1739 from wix/feat/TimelineNowIndicator

Support Timeline now indicator and fix UI for timeline grid

Author: ethanshar

example/src/screens/timelineCalendar.tsx

@@ -164,6 +164,7 @@ export default class TimelineCalendarScreen extends Component {
           scrollToFirst
           onBackgroundLongPress={this.createNewEvent}
           onBackgroundLongPressOut={this.approveNewEvent}
+          showNowIndicator
           // start={0}
           // end={24}
         />

src/timeline/NowIndicator.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {View, TextStyle, ViewStyle} from 'react-native';
+import {HOUR_BLOCK_HEIGHT} from './Packer';
+
+export {HOUR_BLOCK_HEIGHT} from './Packer';
+
+export interface NowIndicatorProps {
+  styles: {[key: string]: ViewStyle | TextStyle};
+}
+
+const NowIndicator = (props: NowIndicatorProps) => {
+  const {styles} = props;
+  const now = new Date();
+  const hour = now.getHours();
+  const minutes = now.getMinutes();
+
+  const indicatorPosition = (hour + minutes / 60) * HOUR_BLOCK_HEIGHT;
+
+  return (
+    <View style={[styles.nowIndicator, {top: indicatorPosition}]}>
+      <View style={styles.nowIndicatorLine} />
+      <View style={styles.nowIndicatorKnob} />
+    </View>
+  );
+};
+
+export default NowIndicator;

src/timeline/Timeline.tsx

@@ -4,12 +4,12 @@ import min from 'lodash/min';
 import map from 'lodash/map';
 
 import {Theme} from '../types';
-import styleConstructor from './style';
+import styleConstructor, {HOURS_SIDEBAR_WIDTH} from './style';
 import populateEvents, {HOUR_BLOCK_HEIGHT} from './Packer';
 import TimelineHours, {TimelineHoursProps} from './TimelineHours';
 import EventBlock, {Event, PackedEvent} from './EventBlock';
+import NowIndicator from './NowIndicator';
 
-const LEFT_MARGIN = 60 - 1;
 const {width: dimensionWidth} = Dimensions.get('window');
 
 export interface TimelineProps {
@@ -50,6 +50,10 @@ export interface TimelineProps {
    * Render a custom event block
    */
   renderEvent?: (event: PackedEvent) => JSX.Element;
+  /**
+   * Whether to show now indicator
+   */
+  showNowIndicator?: boolean;
 }
 
 const Timeline = (props: TimelineProps) => {
@@ -64,6 +68,7 @@ const Timeline = (props: TimelineProps) => {
     renderEvent,
     theme,
     scrollToFirst,
+    showNowIndicator,
     eventTapped
   } = props;
 
@@ -72,7 +77,7 @@ const Timeline = (props: TimelineProps) => {
   const styles = useRef(styleConstructor(theme || props.styles, calendarHeight.current));
 
   const packedEvents = useMemo(() => {
-    const width = dimensionWidth - LEFT_MARGIN;
+    const width = dimensionWidth - HOURS_SIDEBAR_WIDTH;
     return populateEvents(events, width, start);
   }, [events, start]);
 
@@ -123,7 +128,7 @@ const Timeline = (props: TimelineProps) => {
 
     return (
       <View>
-        <View style={{marginLeft: LEFT_MARGIN}}>{events}</View>
+        <View style={{marginLeft: HOURS_SIDEBAR_WIDTH}}>{events}</View>
       </View>
     );
   };
@@ -140,6 +145,7 @@ const Timeline = (props: TimelineProps) => {
         onBackgroundLongPressOut={onBackgroundLongPressOut}
       />
       {renderEvents()}
+      {showNowIndicator && <NowIndicator styles={styles.current} />}
     </ScrollView>
   );
 };

src/timeline/TimelineHours.tsx

@@ -95,6 +95,7 @@ const TimelineHours = (props: TimelineHoursProps) => {
           </React.Fragment>
         );
       })}
+      <View style={styles.verticalLine}/>
     </>
   );
 };

src/timeline/style.ts

@@ -3,7 +3,7 @@ import {Platform, StyleSheet} from 'react-native';
 import {Theme} from '../types';
 
 // const eventPaddingLeft = 4
-const leftMargin = 50 - 1;
+export const HOURS_SIDEBAR_WIDTH = 72;
 
 export default function styleConstructor(theme: Theme = {}, calendarHeight: number) {
   return StyleSheet.create({
@@ -86,24 +86,49 @@ export default function styleConstructor(theme: Theme = {}, calendarHeight: numb
     line: {
       height: 1,
       position: 'absolute',
-      left: leftMargin,
+      left: HOURS_SIDEBAR_WIDTH - 16,
       backgroundColor: 'rgb(216,216,216)',
       ...theme.line
     },
-    lineNow: {
+    verticalLine: {
+      position: 'absolute',
+      width: 1,
+      height: '105%',
+      backgroundColor: 'rgb(216,216,216)',
+      left: HOURS_SIDEBAR_WIDTH
+    },
+    nowIndicator: {
+      position: 'absolute',
+      left: HOURS_SIDEBAR_WIDTH,
+      right: 0,
+    },
+    nowIndicatorLine: {
       height: 1,
       position: 'absolute',
-      left: leftMargin,
+      left: 0,
+      right: 0,
+      backgroundColor: 'red',
+      ...theme.nowIndicatorLine
+    },
+    nowIndicatorKnob: {
+      position: 'absolute',
+      left: -3,
+      top: -3,
+      width: 7,
+      height: 7,
+      borderRadius: 4,
       backgroundColor: 'red',
-      ...theme.lineNow
+      ...theme.nowIndicatorKnob
     },
     timeLabel: {
       position: 'absolute',
-      left: 15,
       color: 'rgb(170,170,170)',
       fontSize: 10,
       fontFamily: Platform.OS === 'ios' ? 'Helvetica Neue' : 'Roboto',
       fontWeight: '500',
+      paddingLeft: 12,
+      textAlign: 'center',
+      width: HOURS_SIDEBAR_WIDTH - 16,
       ...theme.timeLabel
     }
   });

src/types.ts

@@ -23,7 +23,8 @@ export interface Theme {
   eventSummary?: object;
   eventTimes?: object;
   line?: object;
-  lineNow?: object;
+  nowIndicatorLine?: object;
+  nowIndicatorKnob?: object;
   timeLabel?: object;
   todayTextColor?: string;
   calendarBackground?: string;