react-native-leader-line/lib/components/MemoizedPath.js

React Native port of leader-line library for drawing arrow lines and connectors

/**
 * @fileoverview Memoized Path Component
 * @description Performance-optimized SVG path component for LeaderLine
 * @version 1.2.0
 * @author Federico Garcia
 */
import React from 'react';
import { Path } from 'react-native-svg';
/**
 * @component MemoizedPath
 * @description Performance-optimized SVG path component with React.memo
 *
 * This component is memoized with a custom comparison function to prevent
 * unnecessary re-renders when path properties haven't changed significantly.
 */
const MemoizedPath = React.memo(({ d, stroke = 'black', strokeWidth = 2, fill = 'none', strokeOpacity = 1, fillOpacity = 1, strokeDasharray, strokeDashoffset, strokeLinecap = 'round', strokeLinejoin = 'round', opacity = 1, transform, testID }) => {
    return (React.createElement(Path, { d: d, stroke: stroke, strokeWidth: strokeWidth, fill: fill, strokeOpacity: strokeOpacity, fillOpacity: fillOpacity, strokeDasharray: strokeDasharray, strokeDashoffset: strokeDashoffset, strokeLinecap: strokeLinecap, strokeLinejoin: strokeLinejoin, opacity: opacity, transform: transform, testID: testID }));
}, (prevProps, nextProps) => {
    // Custom comparison function with tolerance for floating point numbers
    const floatEquals = (a, b, tolerance = 0.001) => {
        if (a === undefined && b === undefined)
            return true;
        if (a === undefined || b === undefined)
            return false;
        return Math.abs(a - b) < tolerance;
    };
    // Check all props for equality
    return (prevProps.d === nextProps.d &&
        prevProps.stroke === nextProps.stroke &&
        floatEquals(prevProps.strokeWidth, nextProps.strokeWidth) &&
        prevProps.fill === nextProps.fill &&
        floatEquals(prevProps.strokeOpacity, nextProps.strokeOpacity) &&
        floatEquals(prevProps.fillOpacity, nextProps.fillOpacity) &&
        prevProps.strokeDasharray === nextProps.strokeDasharray &&
        floatEquals(prevProps.strokeDashoffset, nextProps.strokeDashoffset) &&
        prevProps.strokeLinecap === nextProps.strokeLinecap &&
        prevProps.strokeLinejoin === nextProps.strokeLinejoin &&
        floatEquals(prevProps.opacity, nextProps.opacity) &&
        prevProps.transform === nextProps.transform &&
        prevProps.testID === nextProps.testID);
});
// Set display name for debugging
MemoizedPath.displayName = 'MemoizedPath';
export default MemoizedPath;
//# sourceMappingURL=MemoizedPath.js.map