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

A sweet candlestick chart for React Native

'use strict';

Object.defineProperty(exports, '__esModule', {
  value: true,
});
exports.LineChartDot = LineChartDot;
var _react = _interopRequireDefault(require('react'));
var _reactNativeReanimated = _interopRequireWildcard(
  require('react-native-reanimated')
);
var _reactNativeSvg = require('react-native-svg');
var _Chart = require('./Chart');
var _LineChartPathContext = require('./LineChartPathContext');
var _getXPositionForCurve = require('./utils/getXPositionForCurve');
var _reactNativeRedash = require('react-native-redash');
var _useLineChart = require('./useLineChart');
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);
}
function _interopRequireDefault(e) {
  return e && e.__esModule ? e : { default: e };
}
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)
  );
}
const AnimatedCircle = _reactNativeReanimated.default.createAnimatedComponent(
  _reactNativeSvg.Circle
);
LineChartDot.displayName = 'LineChartDot';
function LineChartDot({
  at,
  color: defaultColor = 'black',
  dotProps,
  hasOuterDot: defaultHasOuterDot = false,
  hasPulse = false,
  inactiveColor,
  outerDotProps,
  pulseBehaviour = 'while-inactive',
  pulseDurationMs = 800,
  showInactiveColor = true,
  size = 4,
  outerSize = size * 4,
}) {
  const { isActive } = (0, _useLineChart.useLineChart)();
  const { parsedPath } = _react.default.useContext(
    _Chart.LineChartDimensionsContext
  );

  ////////////////////////////////////////////////////////////

  const { isInactive: _isInactive } = _react.default.useContext(
    _LineChartPathContext.LineChartPathContext
  );
  const isInactive = showInactiveColor && _isInactive;
  const color = isInactive ? inactiveColor || defaultColor : defaultColor;
  const opacity = isInactive && !inactiveColor ? 0.5 : 1;
  const hasOuterDot = defaultHasOuterDot || hasPulse;

  ////////////////////////////////////////////////////////////

  const x = (0, _reactNativeReanimated.useDerivedValue)(() => {
    return (0, _reactNativeReanimated.withTiming)(
      (0, _getXPositionForCurve.getXPositionForCurve)(parsedPath, at)
    );
  }, [at, parsedPath]);
  const y = (0, _reactNativeReanimated.useDerivedValue)(
    () =>
      (0, _reactNativeReanimated.withTiming)(
        (0, _reactNativeRedash.getYForX)(parsedPath, x.value) || 0
      ),
    [parsedPath, x]
  );

  ////////////////////////////////////////////////////////////

  const animatedDotProps = (0, _reactNativeReanimated.useAnimatedProps)(
    () => ({
      cx: x.value,
      cy: y.value,
    }),
    [x, y]
  );
  const animatedOuterDotProps = (0,
  _reactNativeReanimated.useAnimatedProps)(() => {
    const defaultProps = {
      cx: x.value,
      cy: y.value,
      opacity: 0.1,
      r: outerSize,
    };
    if (!hasPulse) {
      return defaultProps;
    }
    if (isActive.value && pulseBehaviour === 'while-inactive') {
      return {
        ...defaultProps,
        r: 0,
      };
    }
    const easing = _reactNativeReanimated.Easing.out(
      _reactNativeReanimated.Easing.sin
    );
    const animatedOpacity = (0, _reactNativeReanimated.withRepeat)(
      (0, _reactNativeReanimated.withSequence)(
        (0, _reactNativeReanimated.withTiming)(0),
        (0, _reactNativeReanimated.withTiming)(0.8),
        (0, _reactNativeReanimated.withTiming)(0, {
          duration: pulseDurationMs,
          easing,
        })
      ),
      -1,
      false
    );
    const scale = (0, _reactNativeReanimated.withRepeat)(
      (0, _reactNativeReanimated.withSequence)(
        (0, _reactNativeReanimated.withTiming)(0),
        (0, _reactNativeReanimated.withTiming)(0),
        (0, _reactNativeReanimated.withTiming)(outerSize, {
          duration: pulseDurationMs,
          easing,
        })
      ),
      -1,
      false
    );
    if (pulseBehaviour === 'while-inactive') {
      return {
        ...defaultProps,
        opacity: isActive.value
          ? (0, _reactNativeReanimated.withTiming)(0)
          : animatedOpacity,
        r: isActive.value ? (0, _reactNativeReanimated.withTiming)(0) : scale,
      };
    }
    return {
      ...defaultProps,
      opacity: animatedOpacity,
      r: scale,
    };
  }, [hasPulse, isActive, outerSize, pulseBehaviour, pulseDurationMs, x, y]);

  ////////////////////////////////////////////////////////////

  return /*#__PURE__*/ _react.default.createElement(
    _react.default.Fragment,
    null,
    /*#__PURE__*/ _react.default.createElement(
      AnimatedCircle,
      _extends(
        {
          animatedProps: animatedDotProps,
          r: size,
          fill: color,
          opacity: opacity,
        },
        dotProps
      )
    ),
    hasOuterDot &&
      /*#__PURE__*/ _react.default.createElement(
        AnimatedCircle,
        _extends(
          {
            animatedProps: animatedOuterDotProps,
            fill: color,
          },
          outerDotProps
        )
      )
  );
}
//# sourceMappingURL=Dot.js.map