# All files / src/viewer-content viewer-content.base.tsx

96.67% Statements 29/30
64.29% Branches 9/14
100% Functions 7/7
96.67% Lines 29/30

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    1101x
    1x
    1x

    1x

    1x

    1x

    3x

    3x

    3x

    3x
    3x

    6x

    3x

    3x
    3x

    6x

    6x

    4x

    4x

    4x

    3x

    3x

    3x
    3x

    2x

    2x

    1x

    1x

    1x
     import * as React from "react";
    import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react";
    import {
        ChildOptionItem,
        mapDataToComponent,
    } from "@microsoft/fast-data-utilities-react";
    import {
        ViewerContentHandledProps,
        ViewerContentUnhandledProps,
    } from "./viewer-content.props";
    import {
        ComponentData,
        ViewerMessage,
        ViewerMessageTarget,
        ViewerMessageType,
    } from "../utilities/message-system";

    export interface ViewerContentState {
        componentData?: ComponentData[];
    }

    export default class ViewerContent extends Foundation<
        ViewerContentHandledProps,
        ViewerContentUnhandledProps,
        ViewerContentState
    > {
        public static displayName: string = "ViewerContent";

        protected handledProps: HandledProps<ViewerContentHandledProps> = {
            managedClasses: void 0,
            components: void 0,
        };

        constructor(props: ViewerContentHandledProps) {
            super(props);

            this.state = {
                componentData: [],
            };

            Eif (window) {
                window.addEventListener("message", this.handleMessage);
            }
        }

        public render(): JSX.Element {
            return <React.Fragment>{this.renderComponents()}</React.Fragment>;
        }

        public componentDidMount(): void {
            const initMessage: ViewerMessage = {
                target: ViewerMessageTarget.viewer,
                type: ViewerMessageType.initializeComponent,
            };

            Eif (window) {
                window.postMessage(JSON.stringify(initMessage), "*");
            }
        }

        private renderComponents(): React.ReactNode {
            Iif (!this.state.componentData) {
                return null;
            }

            return this.state.componentData.map(
                (componentDataItem: ComponentData, index: number) => {
                    const mappedComponent: any = this.props.components.find(
                        (component: ChildOptionItem) => {
                            return componentDataItem.id === component.schema.id;
                        }
                    );

                    return (
                        <mappedComponent.component
                            key={`${mappedComponent.schema.id}${index}`}
                            {...mapDataToComponent(
                                mappedComponent.schema,
                                componentDataItem.props,
                                this.props.components
                            )}
                        />
                    );
                }
            );
        }

        private handleMessage = (e: MessageEvent): void => {
            const message: ViewerMessage =
                typeof e.data === "string" ? JSON.parse(e.data) : undefined;

            Eif (message && message.target === ViewerMessageTarget.viewerContent) {
                switch (message.type) {
                    case ViewerMessageType.initializeComponent:
                        this.setState({
                            componentData: message.componentData,
                        });
                        break;
                    case ViewerMessageType.updateComponentData:
                        this.setState({
                            componentData: message.componentData,
                        });
                        break;
                }
            }
        };
    }

    export { ViewerContent };