wehub-resource-sync
58 lines
1.2 KiB
TypeScript
58 lines
1.2 KiB
TypeScript
/**
|
|
* An example for a custom SelectionDot component.
|
|
*
|
|
* Usage:
|
|
*
|
|
* ```jsx
|
|
* <LineGraph
|
|
* points={priceHistory}
|
|
* animated={true}
|
|
* enablePanGesture={true}
|
|
* SelectionDot={CustomSelectionDot}
|
|
* />
|
|
* ```
|
|
*
|
|
* This example has removed the outer ring and light
|
|
* shadow from the default one to make it more flat.
|
|
*/
|
|
import React, { useCallback } from 'react';
|
|
import {
|
|
runOnJS,
|
|
useAnimatedReaction,
|
|
withSpring,
|
|
useSharedValue,
|
|
} from 'react-native-reanimated';
|
|
import { Circle } from '@shopify/react-native-skia';
|
|
import type { SelectionDotProps } from 'react-native-graph';
|
|
|
|
export function SelectionDot({
|
|
isActive,
|
|
color,
|
|
circleX,
|
|
circleY,
|
|
}: SelectionDotProps): React.ReactElement {
|
|
const circleRadius = useSharedValue(0);
|
|
|
|
const setIsActive = useCallback(
|
|
(active: boolean) => {
|
|
circleRadius.value = withSpring(active ? 5 : 0, {
|
|
mass: 1,
|
|
stiffness: 1000,
|
|
damping: 50,
|
|
velocity: 0,
|
|
});
|
|
},
|
|
[circleRadius]
|
|
);
|
|
|
|
useAnimatedReaction(
|
|
() => isActive.value,
|
|
(active) => {
|
|
runOnJS(setIsActive)(active);
|
|
},
|
|
[isActive, setIsActive]
|
|
);
|
|
|
|
return <Circle cx={circleX} cy={circleY} r={circleRadius} color={color} />;
|
|
}
|