react-native-wagmi-charts 2.9.0 → 2.10.0

package/lib/module/charts/line/ChartPath.js

@@ -1,37 +1,14 @@
-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 _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 { StyleSheet, View, Platform } from 'react-native';
 import { Svg, Defs, ClipPath, Rect, G } from 'react-native-svg';
-import Animated, {
-  useAnimatedProps,
-  useSharedValue,
-  withTiming,
-} from 'react-native-reanimated';
+import Animated, { useAnimatedProps, useSharedValue, withTiming } from 'react-native-reanimated';
 import flattenChildren from 'react-keyed-flatten-children';
 import { LineChartDimensionsContext } from './Chart';
 import { LineChartPathContext } from './LineChartPathContext';
 import { LineChartPath } from './Path';
 import { useLineChart } from './useLineChart';
-const BACKGROUND_COMPONENTS = [
-  'LineChartHighlight',
-  'LineChartHorizontalLine',
-  'LineChartGradient',
-  'LineChartDot',
-  'LineChartTooltip',
-];
+const BACKGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartHorizontalLine', 'LineChartGradient', 'LineChartDot', 'LineChartTooltip'];
 const FOREGROUND_COMPONENTS = ['LineChartHighlight', 'LineChartDot'];
 const AnimatedSVG = Animated.createAnimatedComponent(Svg);
 const AnimatedRect = Animated.createAnimatedComponent(Rect);
@@ -48,12 +25,17 @@ export function LineChartPathWrapper({
   showInactivePath = true,
   animateOnMount,
   mountAnimationDuration = animationDuration,
-  mountAnimationProps = animationProps,
+  mountAnimationProps = animationProps
 }) {
-  const { height, pathWidth, width } = React.useContext(
-    LineChartDimensionsContext
-  );
-  const { currentX, isActive } = useLineChart();
+  const {
+    height,
+    pathWidth,
+    width
+  } = React.useContext(LineChartDimensionsContext);
+  const {
+    currentX,
+    isActive
+  } = useLineChart();
   const isMounted = useSharedValue(false);
   const hasMountedAnimation = useSharedValue(false);
   React.useEffect(() => {
@@ -65,63 +47,30 @@ export function LineChartPathWrapper({
 
   ////////////////////////////////////////////////
 
-  const clipId = React.useMemo(
-    () => `clip-foreground-${Math.random().toString(36).substring(2, 11)}`,
-    []
-  );
+  const clipId = React.useMemo(() => `clip-foreground-${Math.random().toString(36).substring(2, 11)}`, []);
   const clipProps = useAnimatedProps(() => {
     const shouldAnimateOnMount = animateOnMount === 'foreground';
-    const inactiveWidth =
-      !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;
-    let duration =
-      shouldAnimateOnMount && !hasMountedAnimation.value
-        ? mountAnimationDuration
-        : animationDuration;
-    const props =
-      shouldAnimateOnMount && !hasMountedAnimation.value
-        ? mountAnimationProps
-        : animationProps;
+    const inactiveWidth = !isMounted.value && shouldAnimateOnMount ? 0 : pathWidth;
+    let duration = shouldAnimateOnMount && !hasMountedAnimation.value ? mountAnimationDuration : animationDuration;
+    const props = shouldAnimateOnMount && !hasMountedAnimation.value ? mountAnimationProps : animationProps;
     if (isActive.value) {
       duration = 0;
     }
     return {
-      width: withTiming(
-        isActive.value
-          ? // on Web, <svg /> elements don't support negative widths
-            // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904
-            Math.max(currentX.value, 0)
-          : inactiveWidth + widthOffset,
-        Object.assign(
-          {
-            duration,
-          },
-          props
-        ),
-        () => {
-          hasMountedAnimation.value = true;
-        }
-      ),
+      width: withTiming(isActive.value ?
+      // on Web, <svg /> elements don't support negative widths
+      // https://github.com/coinjar/react-native-wagmi-charts/issues/24#issuecomment-955789904
+      Math.max(currentX.value, 0) : inactiveWidth + widthOffset, Object.assign({
+        duration
+      }, props), () => {
+        hasMountedAnimation.value = true;
+      })
     };
-  }, [
-    animateOnMount,
-    animationDuration,
-    animationProps,
-    currentX,
-    hasMountedAnimation,
-    isActive,
-    isMounted,
-    mountAnimationDuration,
-    mountAnimationProps,
-    pathWidth,
-    widthOffset,
-  ]);
-  const viewSize = React.useMemo(
-    () => ({
-      width,
-      height,
-    }),
-    [width, height]
-  );
+  }, [animateOnMount, animationDuration, animationProps, currentX, hasMountedAnimation, isActive, isMounted, mountAnimationDuration, mountAnimationProps, pathWidth, widthOffset]);
+  const viewSize = React.useMemo(() => ({
+    width,
+    height
+  }), [width, height]);
 
   ////////////////////////////////////////////////
 
@@ -129,165 +78,68 @@ export function LineChartPathWrapper({
   let foregroundChildren;
   if (children) {
     const iterableChildren = flattenChildren(children);
-    backgroundChildren = iterableChildren.filter((child) =>
-      BACKGROUND_COMPONENTS.includes(child?.type?.displayName || '')
-    );
-    foregroundChildren = iterableChildren.filter((child) =>
-      FOREGROUND_COMPONENTS.includes(child?.type?.displayName || '')
-    );
+    backgroundChildren = iterableChildren.filter(child => BACKGROUND_COMPONENTS.includes(child?.type?.displayName || ''));
+    foregroundChildren = iterableChildren.filter(child => FOREGROUND_COMPONENTS.includes(child?.type?.displayName || ''));
   }
 
   ////////////////////////////////////////////////
 
-  return /*#__PURE__*/ React.createElement(
-    React.Fragment,
-    null,
-    /*#__PURE__*/ React.createElement(
-      LineChartPathContext.Provider,
-      {
-        value: {
-          color,
-          isInactive: showInactivePath,
-          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,
-        },
-      },
-      /*#__PURE__*/ React.createElement(
-        View,
-        {
-          style: viewSize,
-        },
-        /*#__PURE__*/ React.createElement(
-          Svg,
-          {
-            width: width,
-            height: height,
-          },
-          /*#__PURE__*/ React.createElement(
-            LineChartPath,
-            _extends(
-              {
-                color: color,
-                inactiveColor: inactiveColor,
-                width: strokeWidth,
-              },
-              pathProps
-            )
-          )
-        ),
-        /*#__PURE__*/ React.createElement(
-          Svg,
-          {
-            style: StyleSheet.absoluteFill,
-          },
-          backgroundChildren
-        )
-      )
-    ),
-    /*#__PURE__*/ React.createElement(
-      LineChartPathContext.Provider,
-      {
-        value: {
-          color,
-          isInactive: false,
-          isTransitionEnabled: pathProps.isTransitionEnabled ?? true,
-        },
-      },
-      /*#__PURE__*/ React.createElement(
-        View,
-        {
-          style: StyleSheet.absoluteFill,
-        },
-        Platform.OS === 'web'
-          ? /*#__PURE__*/ React.createElement(
-              React.Fragment,
-              null,
-              /*#__PURE__*/ React.createElement(
-                Svg,
-                {
-                  width: width,
-                  height: height,
-                },
-                /*#__PURE__*/ React.createElement(
-                  Defs,
-                  null,
-                  /*#__PURE__*/ React.createElement(
-                    ClipPath,
-                    {
-                      id: clipId,
-                    },
-                    /*#__PURE__*/ React.createElement(AnimatedRect, {
-                      x: 0,
-                      y: 0,
-                      animatedProps: clipProps,
-                      height: height,
-                    })
-                  )
-                ),
-                /*#__PURE__*/ React.createElement(
-                  G,
-                  {
-                    clipPath: `url(#${clipId})`,
-                  },
-                  /*#__PURE__*/ React.createElement(
-                    LineChartPath,
-                    _extends(
-                      {
-                        color: color,
-                        width: strokeWidth,
-                      },
-                      pathProps
-                    )
-                  )
-                )
-              ),
-              /*#__PURE__*/ React.createElement(
-                Svg,
-                {
-                  width: width,
-                  height: height,
-                  style: StyleSheet.absoluteFill,
-                },
-                /*#__PURE__*/ React.createElement(
-                  G,
-                  {
-                    clipPath: `url(#${clipId})`,
-                  },
-                  foregroundChildren
-                )
-              )
-            )
-          : /*#__PURE__*/ React.createElement(
-              React.Fragment,
-              null,
-              /*#__PURE__*/ React.createElement(
-                AnimatedSVG,
-                {
-                  animatedProps: clipProps,
-                  height: height,
-                },
-                /*#__PURE__*/ React.createElement(
-                  LineChartPath,
-                  _extends(
-                    {
-                      color: color,
-                      width: strokeWidth,
-                    },
-                    pathProps
-                  )
-                )
-              ),
-              /*#__PURE__*/ React.createElement(
-                AnimatedSVG,
-                {
-                  animatedProps: clipProps,
-                  height: height,
-                  style: StyleSheet.absoluteFill,
-                },
-                foregroundChildren
-              )
-            )
-      )
-    )
-  );
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(LineChartPathContext.Provider, {
+    value: {
+      color,
+      isInactive: showInactivePath,
+      isTransitionEnabled: pathProps.isTransitionEnabled ?? true
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: viewSize
+  }, /*#__PURE__*/React.createElement(Svg, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement(LineChartPath, _extends({
+    color: color,
+    inactiveColor: inactiveColor,
+    width: strokeWidth
+  }, pathProps))), /*#__PURE__*/React.createElement(Svg, {
+    style: StyleSheet.absoluteFill
+  }, backgroundChildren))), /*#__PURE__*/React.createElement(LineChartPathContext.Provider, {
+    value: {
+      color,
+      isInactive: false,
+      isTransitionEnabled: pathProps.isTransitionEnabled ?? true
+    }
+  }, /*#__PURE__*/React.createElement(View, {
+    style: StyleSheet.absoluteFill
+  }, Platform.OS === 'web' ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Svg, {
+    width: width,
+    height: height
+  }, /*#__PURE__*/React.createElement(Defs, null, /*#__PURE__*/React.createElement(ClipPath, {
+    id: clipId
+  }, /*#__PURE__*/React.createElement(AnimatedRect, {
+    x: 0,
+    y: 0,
+    animatedProps: clipProps,
+    height: height
+  }))), /*#__PURE__*/React.createElement(G, {
+    clipPath: `url(#${clipId})`
+  }, /*#__PURE__*/React.createElement(LineChartPath, _extends({
+    color: color,
+    width: strokeWidth
+  }, pathProps)))), /*#__PURE__*/React.createElement(Svg, {
+    width: width,
+    height: height,
+    style: StyleSheet.absoluteFill
+  }, /*#__PURE__*/React.createElement(G, {
+    clipPath: `url(#${clipId})`
+  }, foregroundChildren))) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(AnimatedSVG, {
+    animatedProps: clipProps,
+    height: height
+  }, /*#__PURE__*/React.createElement(LineChartPath, _extends({
+    color: color,
+    width: strokeWidth
+  }, pathProps))), /*#__PURE__*/React.createElement(AnimatedSVG, {
+    animatedProps: clipProps,
+    height: height,
+    style: StyleSheet.absoluteFill
+  }, foregroundChildren)))));
 }
-//# sourceMappingURL=ChartPath.js.map
+//# sourceMappingURL=ChartPath.js.map

package/lib/module/charts/line/Context.js

@@ -1,28 +1,24 @@
 import React, { createContext, useMemo } from 'react';
-import {
-  runOnJS,
-  useAnimatedReaction,
-  useSharedValue,
-} from 'react-native-reanimated';
+import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
 import { LineChartDataProvider } from './Data';
 import { getDomain, lineChartDataPropToArray } from './utils';
-export const LineChartContext = /*#__PURE__*/ createContext({
+export const LineChartContext = /*#__PURE__*/createContext({
   currentX: {
-    value: -1,
+    value: -1
   },
   currentIndex: {
-    value: -1,
+    value: -1
   },
   domain: [0, 0],
   isActive: {
-    value: false,
+    value: false
   },
   yDomain: {
     min: 0,
-    max: 0,
+    max: 0
   },
   xDomain: undefined,
-  xLength: 0,
+  xLength: 0
 });
 export function LineChartProvider({
   children,
@@ -30,26 +26,19 @@ export function LineChartProvider({
   yRange,
   onCurrentIndexChange,
   xLength,
-  xDomain,
+  xDomain
 }) {
   const currentX = useSharedValue(-1);
   const currentIndex = useSharedValue(-1);
   const isActive = useSharedValue(false);
-  const domain = useMemo(
-    () => getDomain(Array.isArray(data) ? data : Object.values(data)[0]),
-    [data]
-  );
-  const values = useMemo(
-    () => lineChartDataPropToArray(data).map(({ value }) => value),
-    [data]
-  );
-  const yDomainValues = useMemo(
-    () => ({
-      min: yRange?.min ?? Math.min(...values),
-      max: yRange?.max ?? Math.max(...values),
-    }),
-    [values, yRange?.min, yRange?.max]
-  );
+  const domain = useMemo(() => getDomain(Array.isArray(data) ? data : Object.values(data)[0]), [data]);
+  const values = useMemo(() => lineChartDataPropToArray(data).map(({
+    value
+  }) => value), [data]);
+  const yDomainValues = useMemo(() => ({
+    min: yRange?.min ?? Math.min(...values),
+    max: yRange?.max ?? Math.max(...values)
+  }), [values, yRange?.min, yRange?.max]);
   const contextValue = useMemo(() => {
     const domainRows = Array.isArray(data) ? data : Object.values(data)[0];
     return {
@@ -59,40 +48,19 @@ export function LineChartProvider({
       domain,
       yDomain: yDomainValues,
       xDomain,
-      xLength: xLength ?? domainRows.length,
+      xLength: xLength ?? domainRows.length
     };
-  }, [
-    currentIndex,
-    currentX,
-    data,
-    domain,
-    isActive,
-    yDomainValues,
-    xLength,
-    xDomain,
-  ]);
-  useAnimatedReaction(
-    () => currentIndex.value,
-    (x, prevX) => {
-      if (x !== prevX && onCurrentIndexChange) {
-        runOnJS(onCurrentIndexChange)(x);
-      }
-    },
-    [currentIndex]
-  );
-  return /*#__PURE__*/ React.createElement(
-    LineChartDataProvider,
-    {
-      data: data,
-    },
-    /*#__PURE__*/ React.createElement(
-      LineChartContext.Provider,
-      {
-        value: contextValue,
-      },
-      children
-    )
-  );
+  }, [currentIndex, currentX, data, domain, isActive, yDomainValues, xLength, xDomain]);
+  useAnimatedReaction(() => currentIndex.value, (x, prevX) => {
+    if (x !== prevX && onCurrentIndexChange) {
+      runOnJS(onCurrentIndexChange)(x);
+    }
+  }, [currentIndex]);
+  return /*#__PURE__*/React.createElement(LineChartDataProvider, {
+    data: data
+  }, /*#__PURE__*/React.createElement(LineChartContext.Provider, {
+    value: contextValue
+  }, children));
 }
 LineChartProvider.displayName = 'LineChartProvider';
-//# sourceMappingURL=Context.js.map
+//# sourceMappingURL=Context.js.map