react-native-wagmi-charts/lib/module/charts/candle/Context.js

A sweet candlestick chart for React Native

import React from 'react';
import {
  runOnJS,
  useAnimatedReaction,
  useSharedValue,
} from 'react-native-reanimated';
import { getDomain } from './utils';
export const CandlestickChartContext = /*#__PURE__*/ React.createContext({
  currentX: {
    value: -1,
  },
  currentY: {
    value: -1,
  },
  currentIndex: {
    value: -1,
  },
  data: [],
  height: 0,
  width: 0,
  domain: [0, 0],
  step: 0,
  setWidth: () => undefined,
  setHeight: () => undefined,
});
export function CandlestickChartProvider({
  children,
  data = [],
  valueRangeY,
  onCurrentIndexChange,
}) {
  const [width, setWidth] = React.useState(0);
  const [height, setHeight] = React.useState(0);
  const currentX = useSharedValue(-1);
  const currentY = useSharedValue(-1);
  const currentIndex = useSharedValue(-1);
  const domain = React.useMemo(
    () => valueRangeY ?? getDomain(data),
    [data, valueRangeY]
  );
  const step = React.useMemo(() => width / data.length, [data.length, width]);
  const contextValue = React.useMemo(
    () => ({
      currentX,
      currentY,
      currentIndex,
      data,
      width,
      height,
      domain,
      step,
      setWidth,
      setHeight,
    }),
    [currentIndex, currentX, currentY, data, domain, height, step, width]
  );
  useAnimatedReaction(
    () => currentIndex.value,
    (x, prevX) => {
      if (x !== prevX && onCurrentIndexChange) {
        runOnJS(onCurrentIndexChange)(x);
      }
    },
    [currentIndex]
  );
  return /*#__PURE__*/ React.createElement(
    CandlestickChartContext.Provider,
    {
      value: contextValue,
    },
    children
  );
}
CandlestickChartProvider.displayName = 'CandlestickChartProvider';
//# sourceMappingURL=Context.js.map