# All files / image image.tsx

100% Statements 27/27
100% Branches 27/27
100% Functions 4/4
100% Lines 27/27

    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
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    1232x

    2x
    2x

    2x

    2x

    58x

    58x
    1x

    57x
    54x

    3x

    60x

    60x
    57x

    60x
    3x

    57x

    18x
    18x
    18x

    18x
    9x

    9x

    9x

    2x
    2x
    2x
     import * as React from "react";
    import * as ReactDOM from "react-dom";
    import { get } from "lodash-es";
    import Foundation, { HandledProps } from "../foundation";
    import { IImageHandledProps, IImageManagedClasses, IImageUnhandledProps } from "./image.props";
    import { IImageClassNameContract, IManagedClasses } from "@microsoft/fast-components-class-name-contracts-base";

    /**
     * TODO #239 #240: Hook viewports values into Styles
     */
    export interface IBreakpoints {
        vp1: number;
        vp2: number;
        vp3: number;
        vp4: number;
        vp5: number;
        vp6: number;
    }

    const breakpoints: IBreakpoints = {
        vp1: 0,
        vp2: 540,
        vp3: 768,
        vp4: 1084,
        vp5: 1400,
        vp6: 1779
    };

    /* tslint:disable-next-line */
    class Image extends Foundation<IImageHandledProps & IManagedClasses<IImageClassNameContract>, React.HTMLAttributes<HTMLImageElement | HTMLPictureElement>, {}> {
        protected handledProps: HandledProps<IImageHandledProps & IManagedClasses<IImageClassNameContract>> = {
            managedClasses: void 0,
            alt: void(0),
            itemScope: void(0),
            round: void(0),
            sizes: void(0),
            src: void(0),
            srcSet: void(0),
            vp1: void(0),
            vp2: void(0),
            vp3: void(0),
            vp4: void(0),
            vp5: void(0),
            vp6: void(0)
        };

        /**
         * Renders the component
         */
        public render(): React.ReactElement<HTMLImageElement | HTMLPictureElement> {
            if (!this.props.src && !this.props.vp1) {
                return;
            }

            if (this.props.src) {
                return (
                    <img
                        {...this.unhandledProps()}
                        className={this.generateClasses()}
                        alt={this.props.alt}
                        sizes={this.props.sizes ? this.props.sizes : null}
                        src={this.props.src}
                        srcSet={this.props.srcSet ? this.props.srcSet : null}
                    />
                );
            } else {
                return (
                    <picture
                        {...this.unhandledProps()}
                        className={this.generateClasses()}
                    >
                        {this.generateSourceElement(6)}
                        {this.generateSourceElement(5)}
                        {this.generateSourceElement(4)}
                        {this.generateSourceElement(3)}
                        {this.generateSourceElement(2)}
                        {this.generateSourceElement(1)}
                        <img src={this.props.vp1} alt={this.props.alt} className={this.generateClasses(true)}/>
                    </picture>
                );
            }
        }

        /**
         * Generates class names using optional props
         */
        protected generateClasses(isNestedImage: boolean = false): string {
            let classNames: string = this.props.src || isNestedImage ?
                get(this.props, "managedClasses.image") : get(this.props, "managedClasses.picture");

            if (this.props.src || isNestedImage) {
                classNames = this.props.round ? `${classNames} ${get(this.props, "managedClasses.image_round")}` : classNames;
            }

            if (isNestedImage) {
                return classNames;
            }

            return super.generateClassNames(classNames);
        }

        /**
         * Generate a source element
         */
        private generateSourceElement(breakpointsId: number): any {
            const srcset: string = this.props[`vp${breakpointsId}`];
            const vp: number = breakpoints[`vp${breakpointsId}`];
            const minWidth: number = vp;

            if (!srcset) {
                return null;
            }

            const minWidthString: string = minWidth === 0 ? "0" : `${minWidth}px`;

            return <source srcSet={srcset} media={`(min-width: ${minWidthString})`} />;
        }
    }

    export default Image;
    export * from "./image.props";
    export {IImageClassNameContract};