@coinbase/cds-mobile-visualization 3.3.0 → 3.4.0-beta.10

package/esm/chart/Path.js

@@ -0,0 +1,218 @@
+const _excluded = ["d", "initialPath", "fill", "fillOpacity", "stroke", "strokeOpacity", "strokeWidth", "strokeCap", "strokeJoin", "children", "transition"],
+  _excluded2 = ["animate", "clipRect", "clipPath", "clipOffset", "d", "initialPath", "fill", "fillOpacity", "stroke", "strokeOpacity", "strokeWidth", "strokeCap", "strokeJoin", "children", "transition"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import { memo, useEffect, useMemo } from 'react';
+import { useDerivedValue, useSharedValue, withTiming } from 'react-native-reanimated';
+import { Group, Path as SkiaPath, Skia, usePathInterpolation } from '@shopify/react-native-skia';
+import { usePathTransition } from './utils/transition';
+import { useCartesianChartContext } from './ChartProvider';
+import { unwrapAnimatedValue } from './utils';
+
+/**
+ * Duration in milliseconds for path enter transition.
+ */
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+export const pathEnterTransitionDuration = 500;
+const AnimatedPath = /*#__PURE__*/memo(_ref => {
+  let {
+      d = '',
+      initialPath,
+      fill,
+      fillOpacity,
+      stroke,
+      strokeOpacity,
+      strokeWidth,
+      strokeCap,
+      strokeJoin,
+      children,
+      transition
+    } = _ref,
+    pathProps = _objectWithoutPropertiesLoose(_ref, _excluded);
+  const isDAnimated = typeof d !== 'string';
+
+  // When d is animated, usePathTransition handles static path transitions.
+  // For animated d values, we skip usePathTransition and use useDerivedValue directly.
+  const animatedPath = usePathTransition({
+    currentPath: isDAnimated ? '' : d,
+    initialPath,
+    transition
+  });
+  const isFilled = fill !== undefined && fill !== 'none';
+  const isStroked = stroke !== undefined && stroke !== 'none';
+  const activePath = useDerivedValue(() => {
+    if (isDAnimated) {
+      var _d$value;
+      return (_d$value = d.value) != null ? _d$value : Skia.Path.Make();
+    }
+    return animatedPath.value;
+  });
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isFilled && /*#__PURE__*/_jsx(SkiaPath, _extends({
+      color: fill,
+      opacity: fillOpacity,
+      path: activePath,
+      style: "fill"
+    }, pathProps, {
+      children: children
+    })), isStroked && /*#__PURE__*/_jsx(SkiaPath, _extends({
+      color: stroke,
+      opacity: strokeOpacity,
+      path: activePath,
+      strokeCap: strokeCap,
+      strokeJoin: strokeJoin,
+      strokeWidth: strokeWidth,
+      style: "stroke"
+    }, pathProps, {
+      children: children
+    }))]
+  });
+});
+export const Path = /*#__PURE__*/memo(props => {
+  const {
+      animate: animateProp,
+      clipRect,
+      clipPath: clipPathProp,
+      clipOffset = 0,
+      d = '',
+      initialPath,
+      fill,
+      fillOpacity,
+      stroke,
+      strokeOpacity,
+      strokeWidth,
+      strokeCap,
+      strokeJoin,
+      children,
+      transition
+    } = props,
+    pathProps = _objectWithoutPropertiesLoose(props, _excluded2);
+  const context = useCartesianChartContext();
+  const rect = clipRect != null ? clipRect : context.drawingArea;
+  const animate = animateProp != null ? animateProp : context.animate;
+
+  // The clip offset provides extra padding to prevent path from being cut off
+  // Area charts typically use offset=0 for exact clipping, while lines use offset=2 for breathing room
+  const totalOffset = clipOffset * 2; // Applied on both sides
+
+  // Animation progress for clip path reveal
+  const clipProgress = useSharedValue(animate ? 0 : 1);
+
+  // Trigger clip path animation when component mounts and animate is true
+  useEffect(() => {
+    if (animate) {
+      clipProgress.value = withTiming(1, {
+        duration: pathEnterTransitionDuration
+      });
+    }
+  }, [animate, clipProgress]);
+
+  // Create initial and target clip paths for animation
+  const {
+    initialClipPath,
+    targetClipPath
+  } = useMemo(() => {
+    if (!rect) return {
+      initialClipPath: null,
+      targetClipPath: null
+    };
+
+    // Initial clip path (width = 0)
+    const initial = Skia.Path.Make();
+    initial.addRect({
+      x: rect.x - clipOffset,
+      y: rect.y - clipOffset,
+      width: 0,
+      height: rect.height + totalOffset
+    });
+
+    // Target clip path (full width)
+    const target = Skia.Path.Make();
+    target.addRect({
+      x: rect.x - clipOffset,
+      y: rect.y - clipOffset,
+      width: rect.width + totalOffset,
+      height: rect.height + totalOffset
+    });
+    return {
+      initialClipPath: initial,
+      targetClipPath: target
+    };
+  }, [rect, clipOffset, totalOffset]);
+
+  // Use usePathInterpolation for animated clip path
+  const animatedClipPath = usePathInterpolation(clipProgress, [0, 1], animate && initialClipPath && targetClipPath ? [initialClipPath, targetClipPath] : targetClipPath ? [targetClipPath, targetClipPath] : [Skia.Path.Make(), Skia.Path.Make()]);
+
+  // Resolve the final clip path:
+  // 1. If clipPath prop was explicitly provided, use it (even if null = no clipping)
+  // 2. If animating, use the interpolated clip path
+  // 3. Otherwise, use static target clip path
+  const resolvedClipPath = useMemo(() => {
+    // If clipPath was explicitly provided (null or string), use it directly
+    if (clipPathProp !== undefined) {
+      return clipPathProp;
+    }
+
+    // If not animating or paths are null, return target clip path
+    if (!animate || !targetClipPath) {
+      return targetClipPath;
+    }
+
+    // Return undefined here since we'll use animatedClipPath directly
+    return undefined;
+  }, [clipPathProp, animate, targetClipPath]);
+
+  // Convert SVG path string to SkPath for static rendering
+  const staticPath = useDerivedValue(() => {
+    var _Skia$Path$MakeFromSV;
+    const dValue = unwrapAnimatedValue(d);
+    if (!dValue) return Skia.Path.Make();
+    return (_Skia$Path$MakeFromSV = Skia.Path.MakeFromSVGString(dValue)) != null ? _Skia$Path$MakeFromSV : Skia.Path.Make();
+  }, [d]);
+  const isFilled = fill !== undefined && fill !== 'none';
+  const isStroked = stroke !== undefined && stroke !== 'none';
+  const content = !animate ? /*#__PURE__*/_jsxs(_Fragment, {
+    children: [isFilled && /*#__PURE__*/_jsx(SkiaPath, _extends({
+      color: fill,
+      opacity: fillOpacity,
+      path: staticPath,
+      style: "fill"
+    }, pathProps, {
+      children: children
+    })), isStroked && /*#__PURE__*/_jsx(SkiaPath, _extends({
+      color: stroke,
+      opacity: strokeOpacity,
+      path: staticPath,
+      strokeCap: strokeCap,
+      strokeJoin: strokeJoin,
+      strokeWidth: strokeWidth,
+      style: "stroke"
+    }, pathProps, {
+      children: children
+    }))]
+  }) : /*#__PURE__*/_jsx(AnimatedPath, {
+    d: d,
+    fill: fill,
+    fillOpacity: fillOpacity,
+    initialPath: initialPath,
+    stroke: stroke,
+    strokeCap: strokeCap,
+    strokeJoin: strokeJoin,
+    strokeOpacity: strokeOpacity,
+    strokeWidth: strokeWidth,
+    transition: transition,
+    children: children
+  });
+
+  // Determine which clip path to use
+  const finalClipPath = animate && resolvedClipPath === undefined ? animatedClipPath : resolvedClipPath;
+
+  // If finalClipPath is null, render without clipping
+  if (finalClipPath === null) {
+    return content;
+  }
+  return /*#__PURE__*/_jsx(Group, {
+    clip: finalClipPath,
+    children: content
+  });
+});

package/esm/chart/PeriodSelector.js

@@ -0,0 +1,136 @@
+const _excluded = ["color", "label", "font", "hideDot", "style"],
+  _excluded2 = ["background", "activeBackground", "width", "justifyContent", "TabComponent", "TabsActiveIndicatorComponent"];
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
+import React, { forwardRef, memo, useMemo } from 'react';
+import { StyleSheet, View } from 'react-native';
+import Animated, { useAnimatedStyle, useSharedValue, withSpring } from 'react-native-reanimated';
+import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
+import { SegmentedTabs } from '@coinbase/cds-mobile/tabs';
+import { SegmentedTab } from '@coinbase/cds-mobile/tabs/SegmentedTab';
+import { tabsSpringConfig } from '@coinbase/cds-mobile/tabs/Tabs';
+import { Text } from '@coinbase/cds-mobile/typography';
+
+// Animated active indicator to support smooth transition of background color
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const PeriodSelectorActiveIndicator = _ref => {
+  let {
+    activeTabRect,
+    background = 'bgPrimaryWash',
+    position = 'absolute',
+    borderRadius = 1000
+  } = _ref;
+  const theme = useTheme();
+  const {
+    width,
+    height,
+    x
+  } = activeTabRect;
+
+  // Get the target background color
+  const backgroundColorKey = background;
+  const targetColor = theme.color[backgroundColorKey] || background;
+
+  // Track previous values for first render detection
+  const previousActiveTabRect = React.useRef(activeTabRect);
+  const previousColor = React.useRef(targetColor);
+
+  // Combined animated value for position, size, and color
+  const newAnimatedValues = {
+    x,
+    width,
+    backgroundColor: targetColor
+  };
+  const animatedValues = useSharedValue(newAnimatedValues);
+  const isFirstRenderWithWidth = previousActiveTabRect.current.width === 0 && activeTabRect.width > 0;
+  if (previousActiveTabRect.current !== activeTabRect || previousColor.current !== targetColor) {
+    previousActiveTabRect.current = activeTabRect;
+    previousColor.current = targetColor;
+    animatedValues.value = isFirstRenderWithWidth ? newAnimatedValues : withSpring(newAnimatedValues, tabsSpringConfig);
+  }
+  const animatedStyles = useAnimatedStyle(() => ({
+    transform: [{
+      translateX: animatedValues.value.x
+    }],
+    width: animatedValues.value.width,
+    backgroundColor: animatedValues.value.backgroundColor
+  }), [animatedValues]);
+  if (!width) return;
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [{
+      position: position,
+      height,
+      borderRadius
+    }, animatedStyles],
+    testID: "period-selector-active-indicator"
+  });
+};
+const styles = StyleSheet.create({
+  liveContainer: {
+    flexDirection: 'row',
+    alignItems: 'center'
+  }
+});
+export const LiveTabLabel = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+      color = 'fgNegative',
+      label = 'LIVE',
+      font = 'label1',
+      hideDot,
+      style
+    } = _ref2,
+    props = _objectWithoutPropertiesLoose(_ref2, _excluded);
+  const theme = useTheme();
+  const colorKey = color;
+  const textColor = theme.color[colorKey] || color;
+  const dotStyle = useMemo(() => ({
+    width: theme.space[1],
+    height: theme.space[1],
+    borderRadius: 1000,
+    marginRight: theme.space[0.75],
+    backgroundColor: textColor
+  }), [theme.space, textColor]);
+  return /*#__PURE__*/_jsxs(View, {
+    ref: ref,
+    style: [styles.liveContainer, style],
+    children: [!hideDot && /*#__PURE__*/_jsx(View, {
+      style: dotStyle
+    }), /*#__PURE__*/_jsx(Text, _extends({
+      color: color,
+      font: font
+    }, props, {
+      children: label
+    }))]
+  });
+}));
+
+// Custom tab component with primary color for active state
+const PeriodSelectorTab = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(SegmentedTab, _extends({
+  ref: ref,
+  activeColor: "fgPrimary",
+  font: "label1"
+}, props))));
+/**
+ * PeriodSelector is a specialized version of SegmentedTabs optimized for chart period selection.
+ * It provides transparent background, primary wash active state, and full-width layout by default.
+ */
+export const PeriodSelector = /*#__PURE__*/memo(/*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+      background = 'transparent',
+      activeBackground = 'bgPrimaryWash',
+      width = '100%',
+      justifyContent = 'space-between',
+      TabComponent = PeriodSelectorTab,
+      TabsActiveIndicatorComponent = PeriodSelectorActiveIndicator
+    } = _ref3,
+    props = _objectWithoutPropertiesLoose(_ref3, _excluded2);
+  return /*#__PURE__*/_jsx(SegmentedTabs, _extends({
+    ref: ref,
+    TabComponent: TabComponent,
+    TabsActiveIndicatorComponent: TabsActiveIndicatorComponent,
+    activeBackground: activeBackground,
+    background: background,
+    justifyContent: justifyContent,
+    width: width
+  }, props));
+}));