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

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

/**
 * @fileoverview Memoized Label Component
 * @description Performance-optimized label component for LeaderLine
 * @version 1.2.0
 * @author Federico Garcia
 */
import React from 'react';
import { Text } from 'react-native-svg';
/**
 * @component MemoizedLabel
 * @description Performance-optimized label component with React.memo
 *
 * This component is memoized to prevent unnecessary re-renders when
 * parent components update but label props haven't changed.
 */
const MemoizedLabel = React.memo(({ text, x, y, options = {}, testID }) => {
    const { color = '#000000', fontSize = 14, fontFamily = 'Arial', fontWeight = 'normal', textAnchor = 'middle', opacity = 1, rotation = 0, dx = 0, dy = 0, } = options;
    return (React.createElement(Text, { x: x + dx, y: y + dy, fill: color, fontSize: fontSize, fontFamily: fontFamily, fontWeight: fontWeight, textAnchor: textAnchor, opacity: opacity, transform: rotation !== 0 ? `rotate(${rotation} ${x} ${y})` : undefined, testID: testID }, text));
}, (prevProps, nextProps) => {
    // Custom comparison function for better memoization
    return (prevProps.text === nextProps.text &&
        prevProps.x === nextProps.x &&
        prevProps.y === nextProps.y &&
        JSON.stringify(prevProps.options) === JSON.stringify(nextProps.options) &&
        prevProps.testID === nextProps.testID);
});
// Set display name for debugging
MemoizedLabel.displayName = 'MemoizedLabel';
export default MemoizedLabel;
//# sourceMappingURL=MemoizedLabel.js.map