# All files / app/components example.tsx

87.5% Statements 7/8
100% Branches 0/0
66.67% Functions 2/3
87.5% Lines 7/8

    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
    631x
    1x

    1x

    1x

    3x

    4x

    1x
     import * as React from "react";
    import Foundation from "@microsoft/fast-components-foundation-react";
    import { ComponentStyles } from "@microsoft/fast-jss-manager";
    import manageJss, { ManagedClasses } from "@microsoft/fast-jss-manager-react";

    const styles: ComponentStyles<ExampleClassNameContract, {}> = {
        example_input: {
            backgroundColor: "pink",
        },
        "@media only screen and (min-width: 320px)": {
            example: {
                backgroundColor: "orange",
            },
        },
        "@media only screen and (min-width: 540px)": {
            example: {
                backgroundColor: "red",
            },
        },
        "@media only screen and (min-width: 800px)": {
            example: {
                backgroundColor: "purple",
            },
        },
    };

    export interface ExampleProps {
        textValue?: string;
        onChange?: any;
    }

    export interface ExampleClassNameContract {
        example?: string;
        example_input?: string;
    }

    class Example extends Foundation<
        ExampleProps & ManagedClasses<ExampleClassNameContract>,
        {},
        {}
    > {
        public handleLabelUpdate = ({ target: { value } }: any): void => {
            this.props.onChange(value);
        };

        public render(): JSX.Element {
            return (
                <div className={this.props.managedClasses.example}>
                    <input
                        className={this.props.managedClasses.example_input}
                        type="text"
                        value={this.props.textValue}
                        onChange={this.handleLabelUpdate}
                    />
                    <img src="https://placehold.it/300x300" />
                    {this.props.children}
                </div>
            );
        }
    }

    export default manageJss(styles)(Example);