Reuse timeline for activity log (#2851)

* allow to provide width prop to line

* allow to pass icon props to point

* update types

* unify line styles

* fix lint

* rm extra comma - lint

* update dependencies list

Author: alwaysintune

src/components/timeline/Line.tsx

@@ -13,14 +13,14 @@ type LinePropsInternal = LineProps & {
 };
 
 const Line = React.memo((props: LinePropsInternal) => {
-  const {type, color = 'transparent', entry, top, style} = props;
+  const {type, color = 'transparent', entry, top, style, width = LINE_WIDTH} = props;
 
   const solidLineStyle = useMemo(() => {
-    return [style, styles.solidLine, {backgroundColor: color}];
-  }, [color, style]);
+    return [style, styles.line, {width, backgroundColor: color}];
+  }, [color, style, width]);
 
   const dashedLineStyle = useMemo(() => {
-    return [style, styles.dashedLine];
+    return [style, styles.line];
   }, [style]);
 
   const renderStartPoint = () => {
@@ -52,11 +52,7 @@ const styles = StyleSheet.create({
     width: 12,
     height: ENTRY_POINT_HEIGHT
   },
-  solidLine: {
-    width: LINE_WIDTH,
-    overflow: 'hidden'
-  },
-  dashedLine: {
+  line: {
     overflow: 'hidden'
   }
 });

src/components/timeline/Point.tsx

@@ -20,7 +20,7 @@ type PointPropsInternal = PointProps & {
 };
 
 const Point = (props: PointPropsInternal) => {
-  const {icon, label, type, color, onLayout} = props;
+  const {icon, iconProps, label, type, color, onLayout} = props;
 
   const pointStyle = useMemo(() => {
     const hasOutline = type === PointTypes.OUTLINE;
@@ -43,7 +43,7 @@ const Point = (props: PointPropsInternal) => {
 
   const renderPointContent = () => {
     if (icon) {
-      return <Icon source={icon} size={ICON_SIZE} tintColor={Colors.$iconDefaultLight}/>;
+      return <Icon size={ICON_SIZE} tintColor={Colors.$iconDefaultLight} {...iconProps} source={icon}/>;
     } else if (label) {
       return <Text recorderTag={'unmask'} $textDefaultLight subtextBold>{label}</Text>;
     }

src/components/timeline/types.ts

@@ -1,5 +1,6 @@
 import React, {PropsWithChildren} from 'react';
 import {ImageRequireSource} from 'react-native';
+import {IconProps} from '../icon';
 
 export enum StateTypes {
   CURRENT = 'current', // default
@@ -25,13 +26,15 @@ export type LineProps = {
   color?: string;
   /** to mark as entry point */
   entry?: boolean;
+  width?: number;
 }
 
 export type PointProps = {
   state?: StateTypes;
   type?: PointTypes;
   color?: string;
   icon?: ImageRequireSource;
+  iconProps?: IconProps;
   label?: number;
   /** to align point to this view's center */
   anchorRef?: React.MutableRefObject<undefined>;