@coinbase/cds-mobile-visualization 0.0.0 → 3.4.0-beta.1

package/esm/sparkline/sparkline-interactive/__figma__/SparklineInteractive.figma.js

@@ -0,0 +1,85 @@
+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); }
+import React from 'react';
+import { figma } from '@figma/code-connect';
+import { SparklineInteractive } from '../SparklineInteractive';
+import { jsx as _jsx } from "react/jsx-runtime";
+figma.connect(SparklineInteractive, 'https://www.figma.com/design/k5CtyJccNQUGMI5bI4lJ2g/%E2%9C%A8-CDS-Components?node-id=320-14858&m=dev', {
+  imports: ["import { SparklineInteractive } from '@coinbase/cds-web-visualization';"],
+  props: {
+    compact: figma.boolean('compact'),
+    disableScrubbing: figma.boolean('scrubbing', {
+      false: true,
+      true: false
+    })
+  },
+  example: props => {
+    const periods = [{
+      label: '1H',
+      value: 'hour'
+    }, {
+      label: '1D',
+      value: 'day'
+    }, {
+      label: '1W',
+      value: 'week'
+    }, {
+      label: '1M',
+      value: 'month'
+    }, {
+      label: '1Y',
+      value: 'year'
+    }, {
+      label: 'All',
+      value: 'all'
+    }];
+    const data = {
+      hour: [],
+      day: [{
+        value: 49259.38,
+        date: new Date('2021-12-05T04:00:00.000Z')
+      }, {
+        value: 49163.79,
+        date: new Date('2021-12-05T04:05:00.000Z')
+      }, {
+        value: 49146.66,
+        date: new Date('2021-12-05T04:10:00.000Z')
+      }, {
+        value: 49083.92,
+        date: new Date('2021-12-05T04:15:00.000Z')
+      }, {
+        value: 49115.3,
+        date: new Date('2021-12-05T04:20:00.000Z')
+      }, {
+        value: 48992.14,
+        date: new Date('2021-12-05T04:25:00.000Z')
+      }, {
+        value: 49075.75,
+        date: new Date('2021-12-05T04:30:00.000Z')
+      }, {
+        value: 49025.78,
+        date: new Date('2021-12-05T04:35:00.000Z')
+      }, {
+        value: 49066.23,
+        date: new Date('2021-12-05T04:40:00.000Z')
+      }, {
+        value: 49247.82,
+        date: new Date('2021-12-05T04:45:00.000Z')
+      }],
+      week: [],
+      month: [],
+      year: [],
+      all: []
+    };
+    return /*#__PURE__*/_jsx(SparklineInteractive, _extends({
+      data: data,
+      defaultPeriod: "day",
+      formatDate: date => date.toLocaleString('en-US', {
+        timeZone: 'America/New_York',
+        hour: 'numeric',
+        minute: 'numeric'
+      }),
+      periods: periods,
+      strokeColor: "#cb51bb"
+    }, props));
+  }
+});

package/esm/sparkline/sparkline-interactive/__stories__/SparklineInteractive.stories.js

@@ -0,0 +1,501 @@
+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); }
+import React, { memo, useCallback, useMemo, useRef, useState } from 'react';
+import { sparklineInteractiveData, sparklineInteractiveHoverData, strokeColor } from '@coinbase/cds-common/internal/visualizations/SparklineInteractiveData';
+import { Example, ExampleScreen } from '@coinbase/cds-mobile/examples/ExampleScreen';
+import { Box } from '@coinbase/cds-mobile/layout';
+import { TextTitle3 } from '@coinbase/cds-mobile/typography/TextTitle3';
+import { SparklineInteractiveHeader } from '../../sparkline-interactive-header/SparklineInteractiveHeader';
+import { SparklineInteractive } from '../SparklineInteractive';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const DEFAULT_PERIOD = 'day';
+function numToLocaleString(num) {
+  return num.toLocaleString('en-US', {
+    maximumFractionDigits: 2
+  });
+}
+const getFormattingConfigForPeriod = period => {
+  switch (period) {
+    case 'hour':
+    case 'day':
+      return {
+        hour: 'numeric',
+        minute: 'numeric'
+      };
+    case 'week':
+    case 'month':
+      return {
+        month: 'numeric',
+        day: 'numeric'
+      };
+    case 'year':
+    case 'all':
+      return {
+        month: 'numeric',
+        year: 'numeric'
+      };
+  }
+};
+const getDateHoverOptions = period => {
+  switch (period) {
+    case 'hour':
+    case 'day':
+    case 'week':
+    case 'month':
+      return {
+        weekday: 'short',
+        month: 'short',
+        day: 'numeric',
+        hour: 'numeric',
+        minute: 'numeric'
+      };
+    default:
+      return {
+        weekday: 'short',
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric'
+      };
+  }
+};
+const periods = [{
+  label: '1H',
+  value: 'hour'
+}, {
+  label: '1D',
+  value: 'day'
+}, {
+  label: '1W',
+  value: 'week'
+}, {
+  label: '1M',
+  value: 'month'
+}, {
+  label: '1Y',
+  value: 'year'
+}, {
+  label: 'All',
+  value: 'all'
+}];
+const SparklineInteractiveBuild = /*#__PURE__*/memo(props => {
+  var _props$defaultPeriod;
+  const formatDateWithConfig = useCallback((value, period) => {
+    const config = getFormattingConfigForPeriod(period);
+    return value.toLocaleString('en-US', _extends({}, config));
+  }, []);
+  const formatHoverDate = useCallback((date, period) => {
+    return date.toLocaleString('en-US', _extends({}, getDateHoverOptions(period)));
+  }, []);
+  const formatMinMaxLabel = useCallback(amount => {
+    return "$" + numToLocaleString(parseInt(amount, 10));
+  }, []);
+  return /*#__PURE__*/_jsx(SparklineInteractive, _extends({
+    disableScrubbing: !__DEV__
+  }, props, {
+    defaultPeriod: (_props$defaultPeriod = props.defaultPeriod) != null ? _props$defaultPeriod : DEFAULT_PERIOD,
+    formatDate: formatDateWithConfig,
+    formatHoverDate: !props.hideHoverDate ? formatHoverDate : undefined,
+    formatMinMaxLabel: formatMinMaxLabel,
+    periods: periods
+  }));
+});
+const generateSubHead = (point, period, sparklineInteractiveData) => {
+  const data = sparklineInteractiveData[period];
+  const firstPoint = data[0];
+  const increase = point.value > firstPoint.value;
+  return {
+    percent: numToLocaleString(Math.abs((point.value - firstPoint.value) / firstPoint.value) * 100) + "%",
+    sign: increase ? 'upwardTrend' : 'downwardTrend',
+    variant: increase ? 'positive' : 'negative',
+    accessibilityLabel: "" + (increase ? 'up' : 'down'),
+    priceChange: "$" + numToLocaleString(Math.abs(point.value - firstPoint.value))
+  };
+};
+const SparklineInteractiveWithHeaderBuild = /*#__PURE__*/memo(props => {
+  var _props$defaultPeriod2;
+  const {
+    data: sparklineData,
+    trailing,
+    labelNode,
+    compact
+  } = props;
+  const sparklineInteractiveData = sparklineData;
+  const headerRef = useRef(null);
+  const [currentPeriod, setCurrentPeriod] = useState((_props$defaultPeriod2 = props.defaultPeriod) != null ? _props$defaultPeriod2 : DEFAULT_PERIOD);
+  const data = sparklineInteractiveData[currentPeriod];
+  const lastPoint = data[data.length - 1];
+  const handleScrub = useCallback(_ref => {
+    var _headerRef$current;
+    let {
+      point,
+      period
+    } = _ref;
+    (_headerRef$current = headerRef.current) == null || _headerRef$current.update({
+      title: "$" + point.value.toLocaleString('en-US'),
+      subHead: generateSubHead(point, period, sparklineInteractiveData)
+    });
+  }, [sparklineInteractiveData, headerRef]);
+  const handleScrubEnd = useCallback(() => {
+    var _headerRef$current2;
+    (_headerRef$current2 = headerRef.current) == null || _headerRef$current2.update({
+      title: "$" + numToLocaleString(lastPoint.value),
+      subHead: generateSubHead(lastPoint, currentPeriod, sparklineInteractiveData)
+    });
+  }, [currentPeriod, sparklineInteractiveData, lastPoint, headerRef]);
+  const handleOnPeriodChanged = useCallback(period => {
+    var _headerRef$current3;
+    setCurrentPeriod(period);
+    const newData = sparklineInteractiveData[period];
+    const newLastPoint = newData[newData.length - 1];
+    (_headerRef$current3 = headerRef.current) == null || _headerRef$current3.update({
+      title: "$" + numToLocaleString(newLastPoint.value),
+      subHead: generateSubHead(newLastPoint, period, sparklineInteractiveData)
+    });
+  }, [sparklineInteractiveData, headerRef]);
+  const header = useMemo(() => /*#__PURE__*/_jsx(SparklineInteractiveHeader, {
+    ref: headerRef,
+    compact: compact,
+    defaultLabel: labelNode ? 'CustomHeader' : 'Bitcoin Price',
+    defaultSubHead: generateSubHead(lastPoint, currentPeriod, sparklineInteractiveData),
+    defaultTitle: "$" + numToLocaleString(lastPoint.value),
+    labelNode: labelNode,
+    trailing: trailing
+  }), [compact, labelNode, lastPoint, currentPeriod, sparklineInteractiveData, trailing]);
+  return /*#__PURE__*/_jsx(SparklineInteractiveBuild, _extends({}, props, {
+    headerNode: header,
+    onPeriodChanged: handleOnPeriodChanged,
+    onScrub: handleScrub,
+    onScrubEnd: handleScrubEnd
+  }));
+});
+const rgbaStrokeColor = 'rgba(123, 1, 1, 5)';
+const rgbStrokeColor = 'rgb(123, 1, 121)';
+const autoStrokeColor = 'auto';
+const SparklineInteractiveScreen = () => {
+  return /*#__PURE__*/_jsxs(ExampleScreen, {
+    children: [/*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Default"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          data: sparklineInteractiveData,
+          strokeColor: strokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Compact"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          compact: true,
+          data: sparklineInteractiveData,
+          strokeColor: strokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Disable Scrubbing"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          disableScrubbing: true,
+          data: sparklineInteractiveData,
+          strokeColor: strokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Hide period selector"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          hidePeriodSelector: true,
+          data: sparklineInteractiveData,
+          strokeColor: strokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Hide min/max label"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          hideMinMaxLabel: true,
+          data: sparklineInteractiveData,
+          strokeColor: strokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Default period All"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          data: sparklineInteractiveData,
+          defaultPeriod: "all",
+          strokeColor: strokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Fill Disabled"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          data: sparklineInteractiveData,
+          fill: false,
+          strokeColor: strokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Y axis scaling"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          data: sparklineInteractiveData,
+          strokeColor: strokeColor,
+          yAxisScalingFactor: 0.1
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Fallback"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          strokeColor: strokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Fallback Negative"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          fallbackType: "negative",
+          strokeColor: strokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Fallback Compact"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          compact: true,
+          strokeColor: strokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "No Hover Date"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          hideHoverDate: true,
+          data: sparklineInteractiveData,
+          strokeColor: strokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "With Header Node"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveWithHeaderBuild, {
+          data: sparklineInteractiveData,
+          strokeColor: "#F7931A"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "No padding"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          data: sparklineInteractiveData,
+          gutter: 0,
+          strokeColor: "#F7931A",
+          timePeriodGutter: 3
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 4,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingY: 3,
+          children: "In Container With 4 padding"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveWithHeaderBuild, {
+          disableHorizontalPadding: true,
+          data: sparklineInteractiveData,
+          gutter: 4,
+          strokeColor: "#F7931A"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Custom screen padding 6"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          data: sparklineInteractiveData,
+          gutter: 6,
+          strokeColor: "#F7931A"
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Hover data"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          data: sparklineInteractiveData,
+          hoverData: sparklineInteractiveHoverData,
+          strokeColor: strokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Auto Stoke Color"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          data: sparklineInteractiveData,
+          strokeColor: autoStrokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Custom RGB Stoke Color"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          data: sparklineInteractiveData,
+          strokeColor: rgbStrokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Custom RGBA Stoke Color"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          data: sparklineInteractiveData,
+          strokeColor: rgbaStrokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "No Data In SelectedPeriod"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          data: _extends({}, sparklineInteractiveData, {
+            hour: []
+          }),
+          strokeColor: rgbaStrokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Enable Interaction When Outside"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          allowOverflowGestures: true,
+          data: sparklineInteractiveData,
+          strokeColor: strokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Custom Node Header Styles"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveWithHeaderBuild, {
+          data: sparklineInteractiveData,
+          strokeColor: "#F7931A",
+          styles: {
+            header: {
+              paddingBottom: 0
+            }
+          }
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Dotted Fill Type"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          data: sparklineInteractiveData,
+          fillType: "dotted",
+          strokeColor: strokeColor
+        })]
+      })
+    }), /*#__PURE__*/_jsx(Example, {
+      padding: 0,
+      children: /*#__PURE__*/_jsxs(Box, {
+        children: [/*#__PURE__*/_jsx(TextTitle3, {
+          paddingX: 3,
+          paddingY: 3,
+          children: "Y Scale Custom"
+        }), /*#__PURE__*/_jsx(SparklineInteractiveBuild, {
+          data: sparklineInteractiveData,
+          fillType: "dotted",
+          strokeColor: strokeColor,
+          yAxisScalingFactor: 0.1
+        })]
+      })
+    })]
+  });
+};
+export default SparklineInteractiveScreen;

package/esm/sparkline/sparkline-interactive/useInterruptiblePathAnimation.js

@@ -0,0 +1,58 @@
+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); }
+import { useCallback, useEffect, useRef } from 'react';
+import { Animated } from 'react-native';
+import { animatedPathConfig } from '@coinbase/cds-common/animation/sparkline';
+import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
+const animationConfig = _extends({}, animatedPathConfig, {
+  toValue: 1,
+  useNativeDriver: true
+});
+export const useInterruptiblePathAnimation = _ref => {
+  let {
+    animationListener,
+    onInterrupt,
+    ignoreMinMax
+  } = _ref;
+  const {
+    animateMinMaxIn
+  } = useSparklineInteractiveContext();
+  const isRunning = useRef(false);
+  const animationProgress = useRef(new Animated.Value(0)).current;
+  const animations = [Animated.timing(animationProgress, animationConfig)];
+  if (!ignoreMinMax) {
+    animations.push(animateMinMaxIn);
+  }
+  const animation = Animated.sequence(animations);
+  const onFinishAnimation = useCallback(_ref2 => {
+    let {
+      finished
+    } = _ref2;
+    if (finished) {
+      animationProgress.removeAllListeners();
+      animationProgress.setValue(0);
+      isRunning.current = false;
+    }
+  }, [animationProgress]);
+
+  // Clean up listeners
+  useEffect(() => {
+    return () => {
+      animationProgress.removeAllListeners();
+    };
+  }, [animationProgress]);
+  return useCallback(() => {
+    // If try to re-run animation while currently running
+    // we should interrupt it and start new one
+    if (isRunning.current) {
+      animation.stop();
+      onFinishAnimation({
+        finished: true
+      });
+      onInterrupt();
+    } else {
+      isRunning.current = true;
+      animationProgress.addListener(animationListener);
+      animation.start(onFinishAnimation);
+    }
+  }, [animation, animationListener, animationProgress, onFinishAnimation, onInterrupt]);
+};

package/esm/sparkline/sparkline-interactive/useInterruptiblePathAnimation.test.disable.js

@@ -0,0 +1,37 @@
+import { Animated } from 'react-native';
+import { renderHook } from '@testing-library/react-hooks';
+import { useInterruptiblePathAnimation } from './useInterruptiblePathAnimation';
+jest.useFakeTimers({
+  legacyFakeTimers: true
+});
+describe('useInterruptiblePathAnimation', () => {
+  const animationListenerSpy = jest.fn();
+  const onInterruptSpy = jest.fn();
+  it('plays correctly', () => {
+    const {
+      result
+    } = renderHook(() => {
+      return useInterruptiblePathAnimation({
+        animationListener: animationListenerSpy,
+        onInterrupt: onInterruptSpy
+      });
+    });
+    result.current();
+    expect(Animated.timing).toHaveBeenCalled();
+  });
+  it('interrupts correctly if triggering play while already playing', () => {
+    const {
+      result
+    } = renderHook(() => {
+      return useInterruptiblePathAnimation({
+        animationListener: animationListenerSpy,
+        onInterrupt: onInterruptSpy
+      });
+    });
+    result.current();
+    expect(Animated.timing).toHaveBeenCalled();
+    result.current();
+    expect(onInterruptSpy).toHaveBeenCalled();
+    jest.runAllTimers();
+  });
+});