piral-core/lib/components/wrapComponent.js

The core library for creating a Piral instance.

import * as React from 'react';
import { PortalRenderer } from './PortalRenderer';
import { ForeignComponentContainer } from './ForeignComponentContainer';
import { useGlobalStateContext } from '../hooks';
import { convertComponent, none } from '../utils';
// this is an arbitrary start number to have 6 digits
let portalIdBase = 123456;
function wrapReactComponent(Component, captured, Wrapper) {
    return (props) => (React.createElement(Wrapper, { ...props },
        React.createElement(Component, { ...props, ...captured })));
}
function wrapForeignComponent(component, captured, Wrapper) {
    return React.memo((props) => {
        const { destroyPortal, navigation } = useGlobalStateContext();
        const id = React.useMemo(() => (portalIdBase++).toString(26), none);
        // router added for backwards compatibility
        const context = React.useMemo(() => ({ publicPath: navigation.publicPath, navigation, router: navigation.router }), []);
        const innerProps = React.useMemo(() => ({ ...props, ...captured }), [props]);
        React.useEffect(() => () => destroyPortal(id), none);
        return (React.createElement(Wrapper, { ...props },
            React.createElement(PortalRenderer, { id: id }),
            React.createElement(ForeignComponentContainer, { innerProps: innerProps, "$portalId": id, "$component": component, "$context": context })));
    });
}
function isNotExotic(component) {
    return !component.$$typeof;
}
export function wrapComponent(converters, component, captured, Wrapper) {
    if (!component) {
        const pilet = captured.piral.meta.name;
        console.error(`[${pilet}] The given value is not a valid component.`);
        // tslint:disable-next-line:no-null-keyword
        component = () => null;
    }
    if (typeof component === 'object' && isNotExotic(component)) {
        const result = convertComponent(converters[component.type], component);
        return wrapForeignComponent(result, captured, Wrapper);
    }
    return wrapReactComponent(component, captured, Wrapper);
}
//# sourceMappingURL=wrapComponent.js.map