react-native-wagmi-charts/lib/commonjs/charts/line/PriceText.js

A sweet candlestick chart for React Native

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true,
});
exports.LineChartPriceText = LineChartPriceText;
var _react = _interopRequireWildcard(require('react'));
var _reactNative = require('react-native');
var _reactNativeReanimated = require('react-native-reanimated');
var _usePrice = require('./usePrice');
var _useLineChart = require('./useLineChart');
var _AnimatedText = require('../../components/AnimatedText');
function _interopRequireWildcard(e, t) {
  if ('function' == typeof WeakMap)
    var r = new WeakMap(),
      n = new WeakMap();
  return (_interopRequireWildcard = function (e, t) {
    if (!t && e && e.__esModule) return e;
    var o,
      i,
      f = { __proto__: null, default: e };
    if (null === e || ('object' != typeof e && 'function' != typeof e))
      return f;
    if ((o = t ? n : r)) {
      if (o.has(e)) return o.get(e);
      o.set(e, f);
    }
    for (const t in e)
      'default' !== t &&
        {}.hasOwnProperty.call(e, t) &&
        ((i =
          (o = Object.defineProperty) &&
          Object.getOwnPropertyDescriptor(e, t)) &&
        (i.get || i.set)
          ? o(f, t, i)
          : (f[t] = e[t]));
    return f;
  })(e, t);
}
LineChartPriceText.displayName = 'LineChartPriceText';
function LineChartPriceText({
  format,
  precision = 2,
  variant = 'formatted',
  style,
  index,
  useOptimizedRendering = false,
  getTextColor,
}) {
  const price = (0, _usePrice.useLineChartPrice)({
    format,
    precision,
    index,
  });

  // If we have a custom format function and optimized rendering is enabled,
  // use regular React state instead of AnimatedText
  if (format && useOptimizedRendering) {
    const { currentIndex, data } = (0, _useLineChart.useLineChart)();
    const [displayText, setDisplayText] = (0, _react.useState)('');
    const [textColor, setTextColor] = (0, _react.useState)('#000000');
    const updateText = (newText) => {
      setDisplayText(newText);
      // Update color if getTextColor function is provided
      if (getTextColor) {
        setTextColor(getTextColor(newText));
      }
    };
    const textValue = (0, _reactNativeReanimated.useDerivedValue)(() => {
      if (!data) {
        return '';
      }
      if (
        (typeof currentIndex.value === 'undefined' ||
          currentIndex.value === -1) &&
        index == null
      ) {
        return '';
      }
      let price = 0;
      price =
        data[Math.min(index ?? currentIndex.value, data.length - 1)].value;
      const valueString = price.toFixed(precision).toString();

      // Call format function directly in worklet
      return format({
        value: valueString,
        formatted: valueString,
      });
    }, [currentIndex, data, precision]);

    // Use useAnimatedReaction to update React state with runOnJS
    (0, _reactNativeReanimated.useAnimatedReaction)(
      () => textValue.value,
      (current, previous) => {
        if (current !== previous) {
          (0, _reactNativeReanimated.runOnJS)(updateText)(current);
        }
      },
      [textValue]
    );

    // Merge the text color with the provided style
    const dynamicStyle = [
      style,
      {
        color: textColor,
      },
    ];
    return /*#__PURE__*/ _react.default.createElement(
      _reactNative.Text,
      {
        style: dynamicStyle,
      },
      displayText
    );
  }

  // For non-custom format, use the original approach
  return /*#__PURE__*/ _react.default.createElement(
    _AnimatedText.AnimatedText,
    {
      text: price[variant],
      style: style,
    }
  );
}
//# sourceMappingURL=PriceText.js.map