react-native-graph-plus/lib/module/SelectionDot.js

📈 Beautiful, high-performance Graphs and Charts for React Native +

import React, { useCallback } from 'react';
import { runOnJS, useAnimatedReaction } from 'react-native-reanimated';
import { runSpring, useValue, useComputedValue, Circle, Group, Shadow } from '@shopify/react-native-skia';
export const CIRCLE_RADIUS = 5;
export const CIRCLE_RADIUS_MULTIPLIER = 6;
export function SelectionDot(_ref) {
  let {
    isActive,
    color,
    circleX,
    circleY
  } = _ref;
  const circleRadius = useValue(0);
  const circleStrokeRadius = useComputedValue(() => circleRadius.current * CIRCLE_RADIUS_MULTIPLIER, [circleRadius]);
  const setIsActive = useCallback(active => {
    runSpring(circleRadius, active ? CIRCLE_RADIUS : 0, {
      mass: 1,
      stiffness: 1000,
      damping: 50,
      velocity: 0
    });
  }, [circleRadius]);
  useAnimatedReaction(() => isActive.value, active => {
    runOnJS(setIsActive)(active);
  }, [isActive, setIsActive]);
  return /*#__PURE__*/React.createElement(Group, null, /*#__PURE__*/React.createElement(Circle, {
    opacity: 0.05,
    cx: circleX,
    cy: circleY,
    r: circleStrokeRadius,
    color: "#333333"
  }), /*#__PURE__*/React.createElement(Circle, {
    cx: circleX,
    cy: circleY,
    r: circleRadius,
    color: color
  }, /*#__PURE__*/React.createElement(Shadow, {
    dx: 0,
    dy: 0,
    color: "rgba(0,0,0,0.5)",
    blur: 4
  })));
}
//# sourceMappingURL=SelectionDot.js.map