react-native-ui-lib 7.40.1-snapshot.6872 → 7.41.0-snapshot.6877

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-ui-lib",
-  "version": "7.40.1-snapshot.6872",
+  "version": "7.41.0-snapshot.6877",
   "main": "src/index.js",
   "types": "src/index.d.ts",
   "author": "Ethan Sharabi <ethan.shar@gmail.com>",

package/src/components/timeline/Line.js

@@ -12,7 +12,8 @@ const Line = React.memo(props => {
     entry,
     top,
     style,
-    width = LINE_WIDTH
+    width = LINE_WIDTH,
+    testID
   } = props;
   const solidLineStyle = useMemo(() => {
     return [style, styles.line, {
@@ -27,14 +28,14 @@ const Line = React.memo(props => {
     if (entry) {
       return <View style={[styles.entryPoint, {
         backgroundColor: color
-      }]} />;
+      }]} testID={`${testID}.${top ? 'startPoint' : 'endPoint'}`} />;
     }
   };
   const renderLine = () => {
     if (type === LineTypes.DASHED) {
-      return <Dash vertical color={color} containerStyle={dashedLineStyle} />;
+      return <Dash vertical color={color} containerStyle={dashedLineStyle} testID={`${testID}.dashedLine`} />;
     }
-    return <View style={solidLineStyle} />;
+    return <View style={solidLineStyle} testID={`${testID}.solidLine`} />;
   };
   return <>
       {top && renderStartPoint()}

package/src/components/timeline/Point.js

@@ -20,7 +20,8 @@ const Point = props => {
     label,
     type,
     color,
-    onLayout
+    onLayout,
+    testID
   } = props;
   const pointStyle = useMemo(() => {
     const hasOutline = type === PointTypes.OUTLINE;
@@ -55,14 +56,14 @@ const Point = props => {
     const tintColor = removeIconBackground ? Colors.$iconDefault : Colors.$iconDefaultLight;
     const iconSize = removeIconBackground ? undefined : ICON_SIZE;
     if (icon) {
-      return <Icon tintColor={tintColor} {...iconProps} size={iconSize} source={icon} />;
+      return <Icon testID={`${testID}.icon`} tintColor={tintColor} {...iconProps} size={iconSize} source={icon} />;
     } else if (label) {
-      return <Text recorderTag={'unmask'} $textDefaultLight subtextBold color={labelColor}>
+      return <Text testID={`${testID}.label`} recorderTag={'unmask'} $textDefaultLight subtextBold color={labelColor}>
           {label}
         </Text>;
     }
   };
-  return <View center style={pointStyle} onLayout={onLayout}>
+  return <View center style={pointStyle} onLayout={onLayout} testID={`${testID}.container`}>
       {renderPointContent()}
     </View>;
 };

package/src/components/timeline/index.js

@@ -15,7 +15,8 @@ const Timeline = props => {
     topLine,
     bottomLine,
     point,
-    children
+    children,
+    testID
   } = themeProps;
   const [anchorMeasurements, setAnchorMeasurements] = useState();
   const [contentContainerMeasurements, setContentContainerMeasurements] = useState();
@@ -107,17 +108,17 @@ const Timeline = props => {
     });
   }, []);
   const renderTopLine = () => {
-    return <Line {...topLine} top style={topLineStyle} color={topLine ? topLine?.color || getStateColor(topLine?.state) : undefined} />;
+    return <Line testID={`${testID}.topLine`} {...topLine} top style={topLineStyle} color={topLine ? topLine?.color || getStateColor(topLine?.state) : undefined} />;
   };
   const renderBottomLine = () => {
     if (bottomLine) {
-      return <Line {...bottomLine} style={styles.bottomLine} color={bottomLine?.color || getStateColor(bottomLine?.state)} />;
+      return <Line testID={`${testID}.bottomLine`} {...bottomLine} style={styles.bottomLine} color={bottomLine?.color || getStateColor(bottomLine?.state)} />;
     }
   };
-  return <View row style={containerStyle}>
-      <View style={styles.timelineContainer}>
+  return <View row style={containerStyle} testID={testID}>
+      <View style={styles.timelineContainer} testID={`${testID}.timelineContainer`}>
         {renderTopLine()}
-        <Point {...point} onLayout={onPointLayout} color={point?.color || getStateColor(point?.state)} />
+        <Point {...point} onLayout={onPointLayout} color={point?.color || getStateColor(point?.state)} testID={`${testID}.point`} />
         {renderBottomLine()}
       </View>
       <View style={styles.contentContainer} onLayout={onContentContainerLayout} ref={contentContainerRef}>

package/src/components/timeline/types.d.ts

@@ -23,6 +23,7 @@ export type LineProps = {
     /** to mark as entry point */
     entry?: boolean;
     width?: number;
+    testID?: string;
 };
 export type PointProps = {
     state?: StateTypes | `${StateTypes}`;
@@ -35,6 +36,7 @@ export type PointProps = {
     labelColor?: string;
     /** to align point to this view's center */
     anchorRef?: React.MutableRefObject<undefined>;
+    testID?: string;
 };
 export type Layout = {
     x: number;