removeIconBackground prop added to TimeLine, fixed Icon size (#2923)

Author: adids1221

demo/src/screens/componentScreens/TimelineScreen.tsx

@@ -7,6 +7,7 @@ const contents = [
   'SUCCESS state with label.',
   'ERROR state with icon.',
   'Custom color with icon and outline.\nAligned to title',
+  'Icon without background.',
   'NEXT state with outline.',
   'NEXT state with circle point and entry point.'
 ];
@@ -27,8 +28,10 @@ const TimelineScreen = () => {
   const renderExtraContent = () => {
     return (
       <View style={{flex: 1, marginTop: 10, backgroundColor: Colors.grey70}}>
-        <Text>Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
-          Lorem Ipsum is simply dummy text of the printing and typesetting industry</Text>
+        <Text>
+          Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum is simply dummy text of
+          the printing and typesetting industry
+        </Text>
       </View>
     );
   };
@@ -62,7 +65,7 @@ const TimelineScreen = () => {
         <Timeline
           // key={String(expand)}
           // topLine={{
-          //   type: Timeline.lineTypes.DASHED, 
+          //   type: Timeline.lineTypes.DASHED,
           //   entry: true
           // }}
           bottomLine={{type: Timeline.lineTypes.DASHED}}
@@ -107,10 +110,23 @@ const TimelineScreen = () => {
         >
           {renderContent(3)}
         </Timeline>
+        <Timeline
+          topLine={{type: Timeline.lineTypes.DASHED, color: Colors.purple30}}
+          bottomLine={{
+            type: Timeline.lineTypes.DASHED,
+            color: Colors.blue30
+          }}
+          point={{
+            icon: Assets.icons.demo.camera,
+            removeIconBackground: true
+          }}
+        >
+          {renderContent(4)}
+        </Timeline>
         <Timeline
           topLine={{
             type: Timeline.lineTypes.DASHED,
-            color: Colors.purple30
+            color: Colors.blue30
           }}
           bottomLine={{
             state: Timeline.states.NEXT,
@@ -121,7 +137,7 @@ const TimelineScreen = () => {
             type: Timeline.pointTypes.OUTLINE
           }}
         >
-          {renderContent(4)}
+          {renderContent(5)}
         </Timeline>
 
         <Timeline
@@ -138,7 +154,7 @@ const TimelineScreen = () => {
             type: Timeline.pointTypes.CIRCLE
           }}
         >
-          {renderContent(5)}
+          {renderContent(6)}
         </Timeline>
       </ScrollView>
     </>

src/components/timeline/Point.tsx

@@ -13,14 +13,14 @@ const POINT_MARGINS = Spacings.s1;
 const CIRCLE_WIDTH = 2;
 const OUTLINE_WIDTH = 4;
 const OUTLINE_TINT = 70;
-const ICON_SIZE = 12;
+const ICON_SIZE = 16;
 
 type PointPropsInternal = PointProps & {
   onLayout?: (event: LayoutChangeEvent) => void;
 };
 
 const Point = (props: PointPropsInternal) => {
-  const {icon, iconProps, label, type, color, onLayout} = props;
+  const {icon, iconProps, removeIconBackground, label, type, color, onLayout} = props;
 
   const pointStyle = useMemo(() => {
     const hasOutline = type === PointTypes.OUTLINE;
@@ -38,12 +38,15 @@ const Point = (props: PointPropsInternal) => {
     const circleStyle = !hasContent && isCircle && 
       {backgroundColor: 'transparent', borderWidth: CIRCLE_WIDTH, borderColor: color};
 
-    return [styles.point, pointSizeStyle, pointColorStyle, outlineStyle, circleStyle];
-  }, [type, color, label, icon]);
+    return [styles.point, pointSizeStyle, !removeIconBackground && pointColorStyle, outlineStyle, circleStyle];
+  }, [type, color, label, removeIconBackground, icon]);
 
   const renderPointContent = () => {
+    const {removeIconBackground} = props;
+    const tintColor = removeIconBackground ? Colors.$iconDefault : Colors.$iconDefaultLight;
+    const iconSize = removeIconBackground ? undefined : ICON_SIZE;
     if (icon) {
-      return <Icon size={ICON_SIZE} tintColor={Colors.$iconDefaultLight} {...iconProps} source={icon}/>;
+      return <Icon tintColor={tintColor} {...iconProps} size={iconSize} source={icon}/>;
     } else if (label) {
       return <Text recorderTag={'unmask'} $textDefaultLight subtextBold>{label}</Text>;
     }

src/components/timeline/types.ts

@@ -35,6 +35,7 @@ export type PointProps = {
   color?: string;
   icon?: ImageRequireSource;
   iconProps?: IconProps;
+  removeIconBackground?: boolean;
   label?: number;
   /** to align point to this view's center */
   anchorRef?: React.MutableRefObject<undefined>;