@buoy-gg/route-events 1.7.2

package/lib/commonjs/components/RouteEventItemCompact.js

@@ -0,0 +1,175 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.RouteEventItemCompact = RouteEventItemCompact;
+var _react = require("react");
+var _reactNative = require("react-native");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _RouteEventExpandedContent = require("./RouteEventExpandedContent");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * RouteEventItemCompact - Compact list item for route events
+ *
+ * Uses CompactRow pattern matching network/storage components
+ */
+
+// Route type for color coding
+
+// Infer route template from pathname and segments
+function getRouteTemplate(pathname, segments) {
+  if (!segments || segments.length === 0) return null;
+  const templateParts = segments.map(segment => {
+    // Check if this segment appears to be a dynamic parameter
+    if (/^\d+$/.test(segment)) {
+      return "[id]";
+    }
+    if (/^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i.test(segment)) {
+      return "[id]";
+    }
+    return segment;
+  });
+  const template = "/" + templateParts.join("/");
+  return template !== pathname ? template : null;
+}
+
+// Get route type for color coding
+function getRouteType(event) {
+  if (event.pathname === "/") {
+    return "home";
+  }
+  if (getRouteTemplate(event.pathname, event.segments)) {
+    return "dynamic";
+  }
+  if (event.params && Object.keys(event.params).length > 0) {
+    return "with-params";
+  }
+  return "default";
+}
+
+// Get color for route type
+function getRouteTypeColor(routeType) {
+  switch (routeType) {
+    case "home":
+      return _sharedUi.buoyColors.success;
+    // Teal
+    case "dynamic":
+      return _sharedUi.buoyColors.primary;
+    // Teal
+    case "with-params":
+      return _sharedUi.buoyColors.warning;
+    // Orange
+    default:
+      return _sharedUi.buoyColors.border;
+    // Gray
+  }
+}
+
+// Get status label (route type name)
+function getStatusLabel(routeType) {
+  switch (routeType) {
+    case "home":
+      return "Home";
+    case "dynamic":
+      return "Dynamic";
+    case "with-params":
+      return "Params";
+    default:
+      return "Static";
+  }
+}
+
+// Get secondary text (param count + route type)
+function getSecondaryText(event, routeType) {
+  const hasParams = event.params && Object.keys(event.params).length > 0;
+  if (!hasParams) {
+    return undefined;
+  }
+  const paramCount = Object.keys(event.params).length;
+  const paramText = `${paramCount} param${paramCount !== 1 ? 's' : ''}`;
+  return `${paramText} • ${getStatusLabel(routeType)}`;
+}
+function RouteEventItemCompact({
+  event,
+  visitNumber,
+  isExpanded,
+  onPress,
+  onNavigate
+}) {
+  const routeType = (0, _react.useMemo)(() => getRouteType(event), [event]);
+  const routeTemplate = (0, _react.useMemo)(() => getRouteTemplate(event.pathname, event.segments), [event.pathname, event.segments]);
+  const statusColor = (0, _react.useMemo)(() => getRouteTypeColor(routeType), [routeType]);
+  const statusLabel = (0, _react.useMemo)(() => getStatusLabel(routeType), [routeType]);
+  const secondaryText = (0, _react.useMemo)(() => getSecondaryText(event, routeType), [event, routeType]);
+  const timeLabel = (0, _react.useMemo)(() => (0, _sharedUi.formatRelativeTime)(new Date(event.timestamp)), [event.timestamp]);
+  const expandedContent = (0, _react.useMemo)(() => {
+    if (!isExpanded) return undefined;
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_RouteEventExpandedContent.RouteEventExpandedContent, {
+      event: event,
+      visitNumber: visitNumber,
+      routeTemplate: routeTemplate
+    });
+  }, [isExpanded, event, visitNumber, routeTemplate]);
+  const customBadge = (0, _react.useMemo)(() => {
+    if (!onNavigate) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.timeText,
+        children: timeLabel
+      });
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
+      style: styles.badgeContainer,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+        style: styles.timeText,
+        children: timeLabel
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
+        style: styles.goButton,
+        onPress: e => {
+          e.stopPropagation();
+          onNavigate(event.pathname);
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
+          style: styles.goButtonText,
+          children: "Go"
+        })
+      })]
+    });
+  }, [timeLabel, onNavigate, event.pathname]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_sharedUi.CompactRow, {
+    statusDotColor: statusColor,
+    statusLabel: statusLabel,
+    primaryText: event.pathname,
+    secondaryText: secondaryText,
+    customBadge: customBadge,
+    showChevron: true,
+    expandedContent: expandedContent,
+    isExpanded: isExpanded,
+    expandedGlowColor: statusColor,
+    onPress: onPress
+  });
+}
+const styles = _reactNative.StyleSheet.create({
+  badgeContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  timeText: {
+    fontSize: 10,
+    color: _sharedUi.buoyColors.textMuted,
+    fontFamily: "monospace"
+  },
+  goButton: {
+    backgroundColor: _sharedUi.buoyColors.primary,
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 4
+  },
+  goButtonText: {
+    fontSize: 10,
+    fontWeight: "600",
+    color: "#FFFFFF",
+    fontFamily: "monospace"
+  }
+});