Timeline - new component (#2027)

* first commit

* point styles and props

* renderPointContent

* Dashed line and ref alignment

* testID, fix Android measure

* clean-up

* Rename 'Timeline' (remove as 'TimelineItem' in src/index and component alias in demo screen)

* adding comment link

* Fix error 'SyntaxError: Cannot use import statement outside a module' poiting to react-native-dash util.js file

* fix ts errors

* pr comments - renames, remove TimelineItem, no default line

* move to types file

* Removing 'renderContent', 'height' and 'targetContainerRef' props

* Moving to Point component

* Moving to Line component

* fix types

* fix ts error - ref

* Wrapping types with propWithChildren

* error

* support dynamic target ref

* Exporting types

* exporting props 2

* change alignment to anchor

* animate children update

* Demo - timeline under "layouts"

* remove animation

* remove MeasureMeHOC from Dash. Adjusting Dash defaults

* Fix layout issues

* Dash - cleaning code

* rename const

Co-authored-by: Ethan Sharabi <ethans@wix.com>

Author: Inbal-Tish

demo/src/screens/MenuStructure.js

@@ -97,6 +97,7 @@ export const navigationData = {
       {title: 'Modal', tags: 'modal topbar screen', screen: 'unicorn.screens.ModalScreen'},
       {title: 'StateScreen', tags: 'empty state screen', screen: 'unicorn.screens.EmptyStateScreen'},
       {title: 'TabController', tags: 'tabbar controller native', screen: 'unicorn.components.TabControllerScreen'},
+      {title: 'Timeline', tags: 'timeline', screen: 'unicorn.components.TimelineScreen'},
       {
         title: 'withScrollEnabler',
         tags: 'scroll enabled withScrollEnabler',

demo/src/screens/componentScreens/TimelineScreen.tsx

@@ -0,0 +1,143 @@
+import React, {useCallback, useRef, useState} from 'react';
+import {StyleSheet, ScrollView} from 'react-native';
+import {Assets, Colors, Timeline, View, Card, Text, Button} from 'react-native-ui-lib';
+
+const contents = [
+  'CURRENT (default) state with dashed line.\nAligned to title',
+  'SUCCESS state with label.',
+  'ERROR state with icon.',
+  'Custom color with icon and outline.\nAligned to title',
+  'NEXT state with outline.',
+  'NEXT state with circle point and entry point.'
+];
+
+const TimelineScreen = () => {
+  const [anchorIndex, setAnchorIndex] = useState(0);
+  const [expand, setExpand] = useState(false);
+  const anchor = useRef();
+
+  const onPress = useCallback(() => {
+    setAnchorIndex(anchorIndex === 0 ? 1 : 0);
+  }, [anchorIndex]);
+
+  const onPressExpand = useCallback(() => {
+    setExpand(!expand);
+  }, [expand]);
+
+  const renderContent = (index = 0, anchorRef?: any) => {
+    return (
+      <Card padding-page>
+        <Text text70BO ref={anchorRef}>
+          Step {index + 1}
+        </Text>
+        <View marginT-5 padding-8 bg-grey70 br30>
+          <Text>{contents[index]}</Text>
+          <Button marginT-10 size={'small'} label={!expand ? 'Expand' : 'Close'} onPress={onPressExpand}/>
+          {expand && <View style={{height: 100, marginTop: 10, backgroundColor: 'red'}}/>}
+        </View>
+      </Card>
+    );
+  };
+
+  return (
+    <>
+      <View row margin-20 spread>
+        <Text h1 $textDefault margin-20>
+          Timeline
+        </Text>
+        <Button margin-20 link size={'small'} label={'Change Points Anchor'} onPress={onPress}/>
+      </View>
+      <ScrollView contentContainerStyle={styles.container}>
+        <Timeline
+          // key={String(expand)}
+          // topLine={{
+          //   type: Timeline.lineTypes.DASHED, 
+          //   entry: true
+          // }}
+          bottomLine={{type: Timeline.lineTypes.DASHED}}
+          // bottomLine={{state: Timeline.states.SUCCESS}}
+          point={{anchorRef: anchorIndex === 0 ? anchor : undefined}}
+        >
+          {renderContent(0, anchorIndex === 0 ? anchor : undefined)}
+        </Timeline>
+        <Timeline
+          topLine={{type: Timeline.lineTypes.DASHED}}
+          bottomLine={{state: Timeline.states.SUCCESS}}
+          point={{
+            state: Timeline.states.SUCCESS,
+            label: 2,
+            anchorRef: anchorIndex === 1 ? anchor : undefined
+          }}
+        >
+          {renderContent(1, anchorIndex === 1 ? anchor : undefined)}
+        </Timeline>
+
+        <Timeline
+          topLine={{state: Timeline.states.SUCCESS}}
+          bottomLine={{state: Timeline.states.ERROR}}
+          point={{
+            state: Timeline.states.ERROR,
+            icon: Assets.icons.demo.settings
+          }}
+        >
+          {renderContent(2)}
+        </Timeline>
+        <Timeline
+          topLine={{state: Timeline.states.ERROR}}
+          bottomLine={{
+            type: Timeline.lineTypes.DASHED,
+            color: Colors.orange40
+          }}
+          point={{
+            type: Timeline.pointTypes.OUTLINE,
+            color: Colors.orange40,
+            icon: Assets.icons.demo.camera
+          }}
+        >
+          {renderContent(3)}
+        </Timeline>
+        <Timeline
+          topLine={{
+            type: Timeline.lineTypes.DASHED,
+            color: Colors.orange40
+          }}
+          bottomLine={{
+            state: Timeline.states.NEXT,
+            type: Timeline.lineTypes.DASHED
+          }}
+          point={{
+            state: Timeline.states.NEXT,
+            type: Timeline.pointTypes.OUTLINE
+          }}
+        >
+          {renderContent(4)}
+        </Timeline>
+
+        <Timeline
+          topLine={{
+            state: Timeline.states.NEXT,
+            type: Timeline.lineTypes.DASHED
+          }}
+          bottomLine={{
+            state: Timeline.states.NEXT,
+            entry: true
+          }}
+          point={{
+            state: Timeline.states.NEXT,
+            type: Timeline.pointTypes.CIRCLE
+          }}
+        >
+          {renderContent(5)}
+        </Timeline>
+      </ScrollView>
+    </>
+  );
+};
+
+export default TimelineScreen;
+
+const styles = StyleSheet.create({
+  container: {
+    paddingBottom: 20
+  }
+});

demo/src/screens/componentScreens/index.js

@@ -63,6 +63,7 @@ export function registerScreens(registrar) {
   registrar('unicorn.lists.BasicListScreen', () => require('./BasicListScreen').default);
   registrar('unicorn.lists.ContactsListScreen', () => require('./ContactsListScreen').default);
   registrar('unicorn.lists.ConversationListScreen', () => require('./ConversationListScreen').default);
+  registrar('unicorn.components.TimelineScreen', () => require('./TimelineScreen').default);
   // Full Screen components
   registrar('unicorn.screens.EmptyStateScreen', () => require('./EmptyStateScreen').default);
   registrar('unicorn.components.FaderScreen', () => require('./FaderScreen').default);

src/components/timeline/Dash.tsx

@@ -0,0 +1,78 @@
+import React, {useState, useCallback, useMemo} from 'react';
+import {StyleSheet, StyleProp, ViewProps, ViewStyle, LayoutChangeEvent} from 'react-native';
+import View from '../view';
+import {Colors} from '../../style';
+import {Layout} from './types';
+
+interface DashProps extends ViewProps {
+  vertical?: boolean;
+  dashGap: number;
+  dashLength: number;
+  dashThickness: number;
+  dashColor?: string;
+  style?: StyleProp<ViewStyle>;
+}
+
+const Dash = (props: DashProps) => {
+  const {style, vertical, dashGap, dashLength, dashThickness, dashColor} = props;
+  const [measurements, setMeasurements] = useState<Layout | undefined>();
+
+  const onDashLayout = useCallback((event: LayoutChangeEvent) => {
+    const {x, y, width, height} = event.nativeEvent.layout;
+    setMeasurements({x, y, width, height});
+  }, []);
+
+  const dashStyle = useMemo(() => {
+    return {
+      width: vertical ? dashThickness : dashLength,
+      height: vertical ? dashLength : dashThickness,
+      marginRight: vertical ? 0 : dashGap,
+      marginBottom: vertical ? dashGap : 0,
+      backgroundColor: dashColor
+    };
+  }, [vertical, dashLength, dashThickness, dashGap, dashColor]);
+
+  const lineStyle = useMemo(() => {
+    const directionStyle = vertical ? styles.column : styles.row;
+    const sizeStyle = {
+      width: vertical ? dashThickness : dashLength,
+      height: vertical ? dashLength : dashThickness
+    };
+    return [style, directionStyle, sizeStyle];
+  }, [style, vertical, dashThickness, dashLength]);
+
+  const renderDash = () => {
+    const length = (vertical ? measurements?.height : measurements?.width) || 0;
+    const n = Math.ceil(length / (dashGap + dashLength));
+    const dash = [];
+    
+    for (let i = 0; i < n; i++) {
+      dash.push(<View key={i} style={dashStyle}/>);
+    }
+
+    return dash;
+  };
+
+  return (
+    <View onLayout={onDashLayout} style={lineStyle}>
+      {renderDash()}
+    </View>
+  );
+};
+
+export default Dash;
+Dash.defaultProps = {
+  dashGap: 6,
+  dashLength: 6,
+  dashThickness: 2,
+  dashColor: Colors.black
+};
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row'
+  },
+  column: {
+    flexDirection: 'column'
+  }
+});

src/components/timeline/Line.tsx

@@ -0,0 +1,62 @@
+import React, {useMemo} from 'react';
+import {StyleSheet, ViewStyle} from 'react-native';
+import View from '../view';
+import Dash from './Dash';
+import {LineProps, LineTypes} from './types';
+
+const LINE_WIDTH = 2;
+const ENTRY_POINT_HEIGHT = 2;
+
+type LinePropsInternal = LineProps & {
+  top?: boolean;
+  style?: ViewStyle;
+};
+
+const Line = React.memo((props: LinePropsInternal) => {
+  const {type, color = 'transparent', entry, top, style} = props;
+
+  const solidLineStyle = useMemo(() => {
+    return [style, styles.solidLine, {backgroundColor: color}];
+  }, [color, style]);
+
+  const dashedLineStyle = useMemo(() => {
+    return [style, styles.dashedLine];
+  }, [style]);
+
+  const renderStartPoint = () => {
+    if (entry) {
+      return <View style={[styles.entryPoint, {backgroundColor: color}]}/>;
+    }
+  };
+
+  const renderLine = () => {
+    if (type === LineTypes.DASHED) {
+      return <Dash vertical dashColor={color} style={dashedLineStyle}/>;
+    }
+    return <View style={solidLineStyle}/>;
+  };
+
+  return (
+    <>
+      {top && renderStartPoint()}
+      {renderLine()}
+      {!top && renderStartPoint()}
+    </>
+  );
+});
+
+export default Line;
+
+const styles = StyleSheet.create({
+  entryPoint: {
+    width: 12,
+    height: ENTRY_POINT_HEIGHT
+  },
+  solidLine: {
+    width: LINE_WIDTH,
+    overflow: 'hidden'
+  },
+  dashedLine: {
+    overflow: 'hidden'
+  }
+});

src/components/timeline/Point.tsx

@@ -0,0 +1,65 @@
+
+import React, {useMemo} from 'react';
+import {StyleSheet, LayoutChangeEvent} from 'react-native';
+import {Colors, Spacings} from '../../style';
+import View from '../view';
+import Icon from '../icon';
+import Text from '../text';
+import {PointProps, PointTypes} from './types';
+
+const POINT_SIZE = 12;
+const CONTENT_POINT_SIZE = 20;
+const POINT_MARGINS = Spacings.s1;
+const CIRCLE_WIDTH = 2;
+const OUTLINE_WIDTH = 4;
+const OUTLINE_TINT = 70;
+const ICON_SIZE = 12;
+
+type PointPropsInternal = PointProps & {
+  onLayout?: (event: LayoutChangeEvent) => void;
+};
+
+const Point = (props: PointPropsInternal) => {
+  const {icon, label, type, color, onLayout} = props;
+
+  const pointStyle = useMemo(() => {
+    const hasOutline = type === PointTypes.OUTLINE;
+    const isCircle = type === PointTypes.CIRCLE;
+    const hasContent = label || icon;
+
+    const size = hasContent ? CONTENT_POINT_SIZE : POINT_SIZE;
+    const pointSize = hasOutline ? size + OUTLINE_WIDTH * 2 : size;
+    const pointSizeStyle = {width: pointSize, height: pointSize, borderRadius: pointSize / 2};
+
+    const pointColorStyle = {backgroundColor: color};
+
+    const outlineStyle = hasOutline && 
+      {borderWidth: OUTLINE_WIDTH, borderColor: color && Colors.getColorTint(color, OUTLINE_TINT)};
+    const circleStyle = !hasContent && isCircle && 
+      {backgroundColor: Colors.white, borderWidth: CIRCLE_WIDTH, borderColor: color};
+    
+    return [styles.point, pointSizeStyle, pointColorStyle, outlineStyle, circleStyle];
+  }, [type, color, label, icon]);
+
+  const renderPointContent = () => {
+    if (icon) {
+      return <Icon source={icon} size={ICON_SIZE} tintColor={Colors.white}/>;
+    } else if (label) {
+      return <Text white subtext>{label}</Text>;
+    }
+  };
+
+  return (
+    <View center style={pointStyle} onLayout={onLayout}>
+      {renderPointContent()}
+    </View>
+  );
+};
+
+export default Point;
+
+const styles = StyleSheet.create({
+  point: {
+    marginVertical: POINT_MARGINS
+  }
+});