@arwes/react-frames/build/esm/FrameBase/FrameBase.js

Futuristic Sci-Fi UI Web Framework

import React, { useRef, useEffect } from 'react';
import { cx } from '@arwes/tools';
import { memo, mergeRefs, useUpdateEffect } from '@arwes/react-tools';
import { useAnimator } from '@arwes/react-animator';
import { createFrame } from '@arwes/frames';
import { positionedStyle } from '../internal/styles.js';
const FrameBase = memo((props) => {
    const { elementRef, positioned = true, settings, className, style, preserveAspectRatio = 'none', children } = props;
    const animator = useAnimator();
    const svgRef = useRef(null);
    const frameRef = useRef(null);
    const settingsRef = useRef(settings);
    Object.assign(settingsRef.current, settings, { animator: animator?.node });
    useEffect(() => {
        const svg = svgRef.current;
        if (!svg) {
            return;
        }
        frameRef.current = createFrame(svg, settingsRef.current);
        return () => frameRef.current?.remove();
    }, [animator]);
    useUpdateEffect(() => {
        frameRef.current?.render();
    }, [settings]);
    return (React.createElement("svg", { role: "presentation", ref: mergeRefs(svgRef, elementRef), className: cx('arwes-frames-frame', className), style: { ...(positioned ? positionedStyle : null), ...style }, xmlns: "http://www.w3.org/2000/svg", preserveAspectRatio: preserveAspectRatio }, children));
});
export { FrameBase };