@coinbase/cds-mobile-visualization 3.8.1 → 4.0.0

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

@@ -1,99 +0,0 @@
-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, useMemo } from 'react';
-import { Animated as RNAnimated, StyleSheet } from 'react-native';
-import Animated, { useAnimatedStyle } from 'react-native-reanimated';
-import { Line, Svg } from 'react-native-svg';
-import { maskOpacity } from '@coinbase/cds-common/tokens/sparkline';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
-import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
-import { useSparklineInteractiveLineStyles } from './useSparklineInteractiveLineStyles';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-const styles = StyleSheet.create({
-  wrapper: _extends({}, StyleSheet.absoluteFillObject, {
-    zIndex: 2
-  })
-});
-const SparklineInteractiveDottedLine = /*#__PURE__*/memo(_ref => {
-  let {
-    color,
-    showHoverDate
-  } = _ref;
-  const theme = useTheme();
-  const {
-    markerXPosition,
-    compact
-  } = useSparklineInteractiveContext();
-  const {
-    lineProps
-  } = useSparklineInteractiveLineStyles();
-  const {
-    chartHeight,
-    SparklineInteractiveMinMaxLabelHeight,
-    chartVerticalLineWidth,
-    chartWidth
-  } = useSparklineInteractiveConstants({
-    compact
-  });
-  const dottedLineHeight = chartHeight + SparklineInteractiveMinMaxLabelHeight * (showHoverDate ? 1 : 2);
-  const lineStyles = useMemo(() => {
-    return {
-      width: chartVerticalLineWidth,
-      height: dottedLineHeight,
-      top: showHoverDate ? 0 : -SparklineInteractiveMinMaxLabelHeight,
-      zIndex: 2
-    };
-  }, [SparklineInteractiveMinMaxLabelHeight, chartVerticalLineWidth, dottedLineHeight, showHoverDate]);
-  const animatedTranslateX = useAnimatedStyle(() => ({
-    transform: [{
-      translateX: markerXPosition.value
-    }]
-  }));
-  const dottedLinePositionStyles = useMemo(() => [lineStyles, animatedTranslateX], [lineStyles, animatedTranslateX]);
-  const maskStyles = useMemo(() => {
-    return _extends({}, StyleSheet.absoluteFillObject, {
-      height: dottedLineHeight,
-      width: chartWidth,
-      top: showHoverDate ? 0 : -SparklineInteractiveMinMaxLabelHeight,
-      backgroundColor: theme.color.bg,
-      opacity: maskOpacity,
-      zIndex: 1
-    });
-  }, [SparklineInteractiveMinMaxLabelHeight, chartWidth, dottedLineHeight, showHoverDate, theme.color.bg]);
-  const maskPositionStyles = useMemo(() => [maskStyles, animatedTranslateX], [maskStyles, animatedTranslateX]);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [/*#__PURE__*/_jsx(Animated.View, {
-      style: dottedLinePositionStyles,
-      children: /*#__PURE__*/_jsx(Svg, {
-        children: /*#__PURE__*/_jsx(Line, _extends({}, lineProps, {
-          stroke: color,
-          y2: dottedLineHeight
-        }))
-      })
-    }), /*#__PURE__*/_jsx(Animated.View, {
-      style: maskPositionStyles
-    })]
-  });
-});
-export const SparklineInteractiveLineVertical = /*#__PURE__*/memo(_ref2 => {
-  let {
-    color,
-    showHoverDate
-  } = _ref2;
-  const {
-    markerOpacity
-  } = useSparklineInteractiveContext();
-  const rootStyle = useMemo(() => {
-    return _extends({}, styles.wrapper, {
-      opacity: markerOpacity
-    });
-  }, [markerOpacity]);
-  return /*#__PURE__*/_jsx(RNAnimated.View, {
-    pointerEvents: "none",
-    style: rootStyle,
-    children: /*#__PURE__*/_jsx(SparklineInteractiveDottedLine, {
-      color: color,
-      showHoverDate: showHoverDate
-    })
-  });
-});

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

@@ -1,82 +0,0 @@
-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, useMemo } from 'react';
-import { Animated, StyleSheet } from 'react-native';
-import { useDateLookup } from '@coinbase/cds-common/visualizations/useDateLookup';
-import { useLayout } from '@coinbase/cds-mobile/hooks/useLayout';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { TextLabel2 } from '@coinbase/cds-mobile/typography';
-import times from 'lodash/times';
-import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
-import { jsx as _jsx } from "react/jsx-runtime";
-const numberOfLabels = 5;
-const styles = StyleSheet.create({
-  wrapper: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    zIndex: 1
-  },
-  label: {
-    width: 100 / numberOfLabels + "%"
-  }
-});
-const SparklineInteractiveMarkerDate = /*#__PURE__*/memo(_ref => {
-  let {
-    getFormattedDate
-  } = _ref;
-  const [label, onLayout] = useLayout();
-  const x = useMemo(() => {
-    return label.x + label.width / 2;
-  }, [label.width, label.x]);
-  return /*#__PURE__*/_jsx(TextLabel2, {
-    align: "center",
-    color: "fgMuted",
-    onLayout: onLayout,
-    paddingTop: 3,
-    style: styles.label,
-    children: getFormattedDate(x)
-  });
-});
-function SparklineInteractiveMarkerDatesWithGeneric(_ref2) {
-  let {
-    formatDate,
-    selectedPeriod,
-    getMarker,
-    timePeriodGutter
-  } = _ref2;
-  const {
-    markerOpacity
-  } = useSparklineInteractiveContext();
-  const theme = useTheme();
-  const getFormattedDate = useDateLookup({
-    getMarker,
-    formatDate,
-    selectedPeriod
-  });
-  const paddingHorizontalStyle = useMemo(() => {
-    const localStyle = {};
-    if (timePeriodGutter) {
-      localStyle.paddingHorizontal = theme.space[timePeriodGutter];
-    }
-    return localStyle;
-  }, [theme.space, timePeriodGutter]);
-  const rootStyle = useMemo(() => {
-    return _extends({}, styles.wrapper, {
-      opacity: markerOpacity,
-      backgroundColor: theme.color.bg
-    }, paddingHorizontalStyle);
-  }, [markerOpacity, paddingHorizontalStyle, theme.color.bg]);
-  return /*#__PURE__*/_jsx(Animated.View, {
-    pointerEvents: "none",
-    style: rootStyle,
-    children: times(numberOfLabels).map((_, i) => {
-      return /*#__PURE__*/_jsx(SparklineInteractiveMarkerDate, {
-        getFormattedDate: getFormattedDate
-      }, i);
-    })
-  });
-}
-export const SparklineInteractiveMarkerDates = /*#__PURE__*/memo(SparklineInteractiveMarkerDatesWithGeneric);

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

@@ -1,103 +0,0 @@
-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 } from 'react';
-import { Animated, StyleSheet } from 'react-native';
-import { useLayout } from '@coinbase/cds-mobile/hooks/useLayout';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { TextLabel2 } from '@coinbase/cds-mobile/typography';
-import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
-import { useMinMaxTransform } from './useMinMaxTransform';
-import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
-import { jsx as _jsx } from "react/jsx-runtime";
-const styles = StyleSheet.create({
-  outer: {
-    width: '100%',
-    alignItems: 'center'
-  },
-  caption: {
-    position: 'absolute',
-    left: 0,
-    top: 0
-  }
-});
-const SparklineInteractiveMinMaxContent = /*#__PURE__*/memo(_ref => {
-  let {
-    x,
-    children
-  } = _ref;
-  const theme = useTheme();
-  const [minMaxLayout, onMinMaxLayout] = useLayout();
-  const opacity = useRef(new Animated.Value(0)).current;
-  const transform = useRef(new Animated.ValueXY({
-    x: 0,
-    y: 0
-  })).current;
-  useMinMaxTransform({
-    minMaxLayout,
-    x,
-    transform,
-    opacity
-  });
-
-  // Only do the layout if there is a new child.
-  // This prevents jitter in the case where children is
-  // set to undefined, then returned to the previous value,
-  // as is the case for privacy mode (where we hide the value)
-  const onLayout = useCallback(event => {
-    if (!children) {
-      return;
-    }
-    return onMinMaxLayout(event);
-  }, [onMinMaxLayout, children]);
-  const rootStyle = useMemo(() => {
-    return _extends({}, styles.caption, {
-      height: theme.lineHeight.label2,
-      opacity,
-      transform: transform.getTranslateTransform()
-    });
-  }, [opacity, theme.lineHeight.label2, transform]);
-  const textLabelStyle = useMemo(() => {
-    return _extends({}, styles.caption, {
-      backgroundColor: theme.color.bg
-    });
-  }, [theme.color.bg]);
-  return /*#__PURE__*/_jsx(Animated.View, {
-    pointerEvents: "none",
-    style: rootStyle,
-    children: /*#__PURE__*/_jsx(TextLabel2, {
-      color: "fgMuted",
-      onLayout: onLayout,
-      padding: 0,
-      style: textLabelStyle,
-      children: children
-    })
-  });
-});
-export const SparklineInteractiveMinMax = /*#__PURE__*/memo(_ref2 => {
-  let {
-    formatMinMaxLabel,
-    dataPoint,
-    xFunction
-  } = _ref2;
-  const theme = useTheme();
-  const {
-    minMaxOpacity
-  } = useSparklineInteractiveContext();
-  const {
-    SparklineInteractiveMinMaxLabelHeight
-  } = useSparklineInteractiveConstants({});
-  const rootStyle = useMemo(() => {
-    return _extends({}, styles.outer, {
-      opacity: minMaxOpacity,
-      backgroundColor: theme.color.bg,
-      height: SparklineInteractiveMinMaxLabelHeight
-    });
-  }, [SparklineInteractiveMinMaxLabelHeight, minMaxOpacity, theme.color.bg]);
-  return /*#__PURE__*/_jsx(Animated.View, {
-    pointerEvents: "none",
-    style: rootStyle,
-    children: !!dataPoint && /*#__PURE__*/_jsx(SparklineInteractiveMinMaxContent, {
-      x: xFunction(dataPoint.date),
-      children: formatMinMaxLabel(dataPoint.value)
-    })
-  });
-});

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

@@ -1,104 +0,0 @@
-import React, { useCallback } from 'react';
-import { Animated as RNAnimated, Platform, View } from 'react-native';
-import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS } from 'react-native-reanimated';
-import { Haptics } from '@coinbase/cds-mobile/utils/haptics';
-import { noop } from '@coinbase/cds-utils';
-import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
-import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
-import { jsx as _jsx } from "react/jsx-runtime";
-const {
-  lightImpact
-} = Haptics;
-// Generics do not work with React.memo or forwardRef
-// https://stackoverflow.com/questions/58469229/react-with-typescript-generics-while-using-react-forwardref/58473012
-export const SparklineInteractivePanGestureHandler = function SparklineInteractivePanGestureHandler(_ref) {
-  let {
-    onScrubEnd = noop,
-    onScrubStart = noop,
-    onScrub = noop,
-    getMarker,
-    selectedPeriod,
-    children,
-    disabled,
-    allowOverflowGestures
-  } = _ref;
-  const {
-    markerXPosition,
-    markerGestureState,
-    animateMarkerIn,
-    animateMarkerOut,
-    animateMinMaxIn,
-    animateMinxMaxOut,
-    animateHoverDateIn,
-    animateHoverDateOut
-  } = useSparklineInteractiveContext();
-  const {
-    chartVerticalLineWidth,
-    endX,
-    startX
-  } = useSparklineInteractiveConstants({});
-  const handleOnStartJsThread = useCallback(() => {
-    void lightImpact();
-    onScrubStart();
-    RNAnimated.parallel([animateMarkerIn, animateMinxMaxOut, animateHoverDateIn]).start();
-  }, [animateHoverDateIn, animateMarkerIn, animateMinxMaxOut, onScrubStart]);
-  const handleOnUpdateJsThread = useCallback(() => {
-    const dataPoint = getMarker(markerXPosition.value);
-    if (dataPoint) {
-      onScrub({
-        point: dataPoint,
-        period: selectedPeriod
-      });
-    }
-  }, [getMarker, markerXPosition.value, onScrub, selectedPeriod]);
-  const handleOnEndOrCancelledJsThread = useCallback(() => {
-    onScrubEnd();
-    RNAnimated.parallel([animateMarkerOut, animateMinMaxIn, animateHoverDateOut]).start(_ref2 => {
-      let {
-        finished
-      } = _ref2;
-      if (finished) {
-        markerXPosition.value = -1;
-      }
-    });
-  }, [animateHoverDateOut, animateMarkerOut, animateMinMaxIn, markerXPosition, onScrubEnd]);
-  const handleOnEndJsThread = useCallback(() => {
-    void Haptics.lightImpact();
-    handleOnEndOrCancelledJsThread();
-  }, [handleOnEndOrCancelledJsThread]);
-  if (disabled) {
-    return /*#__PURE__*/_jsx(View, {
-      children: children
-    });
-  }
-  const longPressGesture = Gesture.Pan().activateAfterLongPress(110).shouldCancelWhenOutside(!allowOverflowGestures).onStart(function onStart(event) {
-    runOnJS(handleOnStartJsThread)();
-    markerGestureState.value = 1;
-
-    // Android does not trigger onUpdate when the gesture starts. This achieves consistent behavior across both iOS and Android
-    if (Platform.OS === 'android') {
-      const newMarkerXPosition = Math.min(endX, Math.max(startX, event.x - chartVerticalLineWidth / 2));
-      markerXPosition.value = newMarkerXPosition;
-      runOnJS(handleOnUpdateJsThread)();
-    }
-  }).onUpdate(function onUpdate(event) {
-    const newMarkerXPosition = Math.min(endX, Math.max(startX, event.x - chartVerticalLineWidth / 2));
-    markerXPosition.value = newMarkerXPosition;
-    if (markerGestureState.value === 1) {
-      runOnJS(handleOnUpdateJsThread)();
-    }
-  }).onEnd(function onEnd() {
-    markerGestureState.value = 0;
-    runOnJS(handleOnEndJsThread)();
-  }).onTouchesCancelled(function onTouchesCancelled() {
-    markerGestureState.value = 0;
-    runOnJS(handleOnEndOrCancelledJsThread)();
-  });
-  return /*#__PURE__*/_jsx(GestureDetector, {
-    gesture: longPressGesture,
-    children: /*#__PURE__*/_jsx(Animated.View, {
-      children: children
-    })
-  });
-};

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

@@ -1,57 +0,0 @@
-import React, { memo, useCallback, useRef } from 'react';
-import { SparklineInteractiveAnimatedPath } from './SparklineInteractiveAnimatedPath';
-import { SparklineInteractiveTimeseriesPaths } from './SparklineInteractiveTimeseriesPaths';
-import { useSparklineInteractiveConstants } from './useSparklineInteractiveConstants';
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-function SparklineInteractivePathsWithGeneric(_ref) {
-  let {
-    showHoverData,
-    fill,
-    fillType = 'gradient',
-    path,
-    area,
-    selectedPeriod,
-    yAxisScalingFactor,
-    strokeColor,
-    hoverData,
-    compact
-  } = _ref;
-  // Map 'dotted' to 'gradientDotted' for Sparkline
-  const sparklineFillType = fillType === 'dotted' ? 'gradientDotted' : 'gradient';
-  const hoverPathRef = useRef(undefined);
-  const hoverAreaRef = useRef(undefined);
-  const shouldShowFill = !!fill;
-  const {
-    chartWidth,
-    chartHeight
-  } = useSparklineInteractiveConstants({
-    compact
-  });
-  const handleMultiTimeseriesRender = useCallback(_ref2 => {
-    let {
-      area: timeseriesArea,
-      path: timeseriesPath
-    } = _ref2;
-    hoverPathRef.current = timeseriesPath;
-    hoverAreaRef.current = timeseriesArea;
-  }, []);
-  return /*#__PURE__*/_jsxs(_Fragment, {
-    children: [!showHoverData && /*#__PURE__*/_jsx(SparklineInteractiveAnimatedPath, {
-      area: shouldShowFill ? area : undefined,
-      color: strokeColor,
-      d: path,
-      fillType: sparklineFillType,
-      initialArea: hoverAreaRef.current,
-      initialPath: hoverPathRef.current,
-      selectedPeriod: selectedPeriod,
-      yAxisScalingFactor: yAxisScalingFactor
-    }), !!showHoverData && /*#__PURE__*/_jsx(SparklineInteractiveTimeseriesPaths, {
-      data: hoverData == null ? void 0 : hoverData[selectedPeriod],
-      height: chartHeight,
-      initialPath: path,
-      onRender: handleMultiTimeseriesRender,
-      width: chartWidth
-    })]
-  });
-}
-export const SparklineInteractivePaths = /*#__PURE__*/memo(SparklineInteractivePathsWithGeneric);

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

@@ -1,124 +0,0 @@
-import React, { memo, useCallback, useMemo } from 'react';
-import { ScrollView, StyleSheet } from 'react-native';
-import { periodLabelMap } from '@coinbase/cds-common/tokens/sparkline';
-import { getAccessibleColor } from '@coinbase/cds-common/utils/getAccessibleColor';
-import { useHorizontallyScrollingPressables } from '@coinbase/cds-mobile/hooks/useHorizontallyScrollingPressables';
-import { useTheme } from '@coinbase/cds-mobile/hooks/useTheme';
-import { Box } from '@coinbase/cds-mobile/layout/Box';
-import { HStack } from '@coinbase/cds-mobile/layout/HStack';
-import { OverflowGradient } from '@coinbase/cds-mobile/layout/OverflowGradient';
-import { Pressable } from '@coinbase/cds-mobile/system/Pressable';
-import { TextLabel1 } from '@coinbase/cds-mobile/typography';
-import { Haptics } from '@coinbase/cds-mobile/utils/haptics';
-import { useSparklineInteractiveContext } from './SparklineInteractiveProvider';
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-function SparklineInteractivePeriodWithGeneric(_ref) {
-  var _periodLabelMap$perio;
-  let {
-    period,
-    selectedPeriod,
-    setSelectedPeriod,
-    getLayoutHandler,
-    color
-  } = _ref;
-  const isSelected = period.value === selectedPeriod;
-  const periodLabel = (_periodLabelMap$perio = periodLabelMap[period.label]) != null ? _periodLabelMap$perio : period.label;
-  const periodHint = useMemo(() => isSelected ? "Currently showing data for the " + periodLabel + " timeframe" : "Show data for the " + periodLabel + " timeframe", [isSelected, periodLabel]);
-  const handleOnPress = useCallback(() => {
-    void Haptics.lightImpact();
-    setSelectedPeriod(period.value);
-  }, [period, setSelectedPeriod]);
-  const theme = useTheme();
-  const textStyle = useMemo(() => ({
-    color: isSelected ? color : theme.color.fgMuted
-  }), [color, isSelected, theme.color.fgMuted]);
-  const accessibilityState = useMemo(() => ({
-    selected: isSelected
-  }), [isSelected]);
-  return /*#__PURE__*/_jsx(Box, {
-    alignItems: "center",
-    justifyContent: "center",
-    onLayout: getLayoutHandler(period.value),
-    paddingY: 2,
-    children: /*#__PURE__*/_jsx(Pressable, {
-      accessibilityHint: periodHint,
-      accessibilityLabel: periodLabel,
-      accessibilityState: accessibilityState,
-      background: isSelected ? 'bgPrimaryWash' : 'bg',
-      borderColor: "transparent",
-      borderRadius: 1000,
-      onPress: handleOnPress,
-      children: /*#__PURE__*/_jsx(TextLabel1, {
-        paddingX: 2,
-        paddingY: 1,
-        style: textStyle,
-        children: period.label
-      })
-    })
-  }, period.value);
-}
-const periodSelectorStyles = StyleSheet.create({
-  scrollViewContainer: {
-    flexGrow: 1
-  },
-  hStackContainer: {
-    flex: 1
-  }
-});
-const SparklineInteractivePeriod = /*#__PURE__*/memo(SparklineInteractivePeriodWithGeneric);
-export const SparklineInteractivePeriodSelector = _ref2 => {
-  let {
-    selectedPeriod,
-    setSelectedPeriod,
-    periods,
-    color
-  } = _ref2;
-  const theme = useTheme();
-  const accessibleForeground = color !== 'auto' ? color : getAccessibleColor({
-    background: theme.color.bg,
-    foreground: 'auto'
-  });
-  const {
-    markerOpacity
-  } = useSparklineInteractiveContext();
-  const {
-    scrollRef,
-    isScrollContentOverflowing,
-    isScrollContentOffscreenRight,
-    handleScroll,
-    handleScrollContainerLayout,
-    handleScrollContentSizeChange,
-    getPressableLayoutHandler
-  } = useHorizontallyScrollingPressables(selectedPeriod);
-  const opacity = markerOpacity.interpolate({
-    inputRange: [0, 1],
-    outputRange: [1, 0]
-  });
-  return /*#__PURE__*/_jsxs(Box, {
-    animated: true,
-    background: "bg",
-    opacity: opacity,
-    children: [/*#__PURE__*/_jsx(ScrollView, {
-      ref: scrollRef,
-      horizontal: true,
-      contentContainerStyle: periodSelectorStyles.scrollViewContainer,
-      onContentSizeChange: handleScrollContentSizeChange,
-      onLayout: handleScrollContainerLayout,
-      onScroll: handleScroll,
-      scrollEventThrottle: 1,
-      showsHorizontalScrollIndicator: false,
-      children: /*#__PURE__*/_jsx(HStack, {
-        justifyContent: "space-between",
-        padding: 0,
-        style: periodSelectorStyles.hStackContainer,
-        children: periods.map(period => /*#__PURE__*/_jsx(SparklineInteractivePeriod, {
-          color: accessibleForeground,
-          getLayoutHandler: getPressableLayoutHandler,
-          period: period,
-          selectedPeriod: selectedPeriod,
-          setSelectedPeriod: setSelectedPeriod
-        }, period.value))
-      })
-    }), isScrollContentOverflowing && isScrollContentOffscreenRight && /*#__PURE__*/_jsx(OverflowGradient, {})]
-  });
-};

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

@@ -1,80 +0,0 @@
-import React, { createContext, memo, useCallback, useContext, useMemo, useRef, useState } from 'react';
-import { Animated } from 'react-native';
-import { makeMutable, useSharedValue } from 'react-native-reanimated';
-import { gutter } from '@coinbase/cds-common/tokens/sizing';
-import { noop } from '@coinbase/cds-utils';
-import { useOpacityAnimation } from './useOpacityAnimation';
-import { jsx as _jsx } from "react/jsx-runtime";
-const SparklineInteractiveContext = /*#__PURE__*/createContext({
-  isFallbackVisible: true,
-  markerXPosition: makeMutable(0),
-  markerGestureState: makeMutable(0),
-  showFallback: noop,
-  hideFallback: noop,
-  chartOpacity: new Animated.Value(0),
-  animateChartIn: noop,
-  markerOpacity: new Animated.Value(0),
-  animateMarkerIn: noop,
-  animateMarkerOut: noop,
-  minMaxOpacity: new Animated.Value(0),
-  animateMinMaxIn: noop,
-  animateMinxMaxOut: noop,
-  hoverDateOpacity: new Animated.Value(0),
-  animateHoverDateIn: noop,
-  animateHoverDateOut: noop,
-  compact: false,
-  gutter
-});
-export const SparklineInteractiveProvider = /*#__PURE__*/memo(_ref => {
-  let {
-    children,
-    compact = false,
-    gutter: propGutter
-  } = _ref;
-  const [isFallbackVisible, setIsFallbackVisible] = useState(true);
-  const markerXPosition = useSharedValue(-1);
-  const markerGestureState = useSharedValue(0);
-  const [chartOpacity, animateChartIn, animateChartOut] = useOpacityAnimation();
-  const [markerOpacity, animateMarkerIn, animateMarkerOut] = useOpacityAnimation();
-  const [minMaxOpacity, animateMinMaxIn, animateMinxMaxOut] = useOpacityAnimation();
-  const [hoverDateOpacity, animateHoverDateIn, animateHoverDateOut] = useOpacityAnimation();
-  const chartGutter = useRef(propGutter != null ? propGutter : gutter).current;
-  const showFallback = useCallback(() => {
-    animateChartOut.start();
-    setIsFallbackVisible(true);
-  }, [animateChartOut]);
-  const hideFallback = useCallback(() => {
-    animateChartIn.start();
-    animateMinMaxIn.start();
-    setIsFallbackVisible(false);
-  }, [animateChartIn, animateMinMaxIn]);
-  const sparklineProviderVal = useMemo(() => {
-    return {
-      isFallbackVisible,
-      markerXPosition,
-      markerGestureState,
-      showFallback,
-      hideFallback,
-      chartOpacity,
-      animateChartIn,
-      markerOpacity,
-      animateMarkerIn,
-      animateMarkerOut,
-      minMaxOpacity,
-      animateMinMaxIn,
-      animateMinxMaxOut,
-      hoverDateOpacity,
-      animateHoverDateIn,
-      animateHoverDateOut,
-      compact,
-      gutter: chartGutter
-    };
-  }, [animateChartIn, animateHoverDateIn, animateHoverDateOut, animateMarkerIn, animateMarkerOut, animateMinMaxIn, animateMinxMaxOut, chartOpacity, compact, hideFallback, hoverDateOpacity, isFallbackVisible, markerGestureState, markerOpacity, markerXPosition, minMaxOpacity, showFallback, chartGutter]);
-  return /*#__PURE__*/_jsx(SparklineInteractiveContext.Provider, {
-    value: sparklineProviderVal,
-    children: children
-  });
-});
-export function useSparklineInteractiveContext() {
-  return useContext(SparklineInteractiveContext);
-}