react-native-wagmi-charts
Version:
A sweet candlestick chart for React Native
66 lines • 1.98 kB
JavaScript
import React, { createContext, useMemo } from 'react';
import { runOnJS, useAnimatedReaction, useSharedValue } from 'react-native-reanimated';
import { LineChartDataProvider } from './Data';
import { getDomain, lineChartDataPropToArray } from './utils';
export const LineChartContext = /*#__PURE__*/createContext({
currentX: {
value: -1
},
currentIndex: {
value: -1
},
domain: [0, 0],
isActive: {
value: false
},
yDomain: {
min: 0,
max: 0
},
xDomain: undefined,
xLength: 0
});
export function LineChartProvider({
children,
data = [],
yRange,
onCurrentIndexChange,
xLength,
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 contextValue = useMemo(() => {
const domainRows = Array.isArray(data) ? data : Object.values(data)[0];
return {
currentX,
currentIndex,
isActive,
domain,
yDomain: yDomainValues,
xDomain,
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));
}
LineChartProvider.displayName = 'LineChartProvider';
//# sourceMappingURL=Context.js.map