# All files / app/components example.tsx

84.62% Statements 22/26
100% Branches 3/3
57.14% Functions 4/7
86.96% Lines 20/23

    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
    2x
    2x
    2x
    2x

    2x

    2x

    2x

    3x

    2x
    3x
    3x

    2x
    2x

    2x

    2x

    3x

    2x
    3x

    2x

    2x

    import * as React from "react";
    import jss from "jss";
    import preset from "jss-preset-default";
    import manager, { theme } from "../utilities/style-manager";

    jss.setup(preset());

    const styles: any = {
        "@media only screen and (min-width: 100px)": {
            div: {
                backgroundColor: "orange",
            },
        },
        "@media only screen and (min-width: 200px)": {
            div: {
                backgroundColor: "red",
            },
        },
        "@media only screen and (min-width: 300px)": {
            div: {
                backgroundColor: "purple",
            },
        },
    };

    const stylesheet: any = jss.createStyleSheet(styles, {link: true}).update(theme);

    export type update = (data: any) => void;

    export type styles = (style: string) => void;

    export interface IExampleProps {
        textValue: string;
        onChange: any;
        getStyles: styles;
    }

    class Example extends React.Component<IExampleProps, {}> {

        public componentWillMount(): void {
            manager.add("div", stylesheet);
            manager.manage("div");
        }

        public componentDidMount(): void {
            this.props.getStyles(stylesheet.toString());
        }

        public componentWillUnmount(): void {
            manager.unmanage("div");
        }

        public componentWillReceiveProps(nextProps: IExampleProps): void {
            nextProps.getStyles(stylesheet.toString());
        }

        public handleLabelUpdate = ({ target: { value } }: any): void => {
            this.props.onChange(value);
        }

        public render(): JSX.Element {
            return (
                <div className={stylesheet.classes.div} key={2}>
                    <input type="text" value={this.props.textValue} onChange={this.handleLabelUpdate} />
                    <img src="https://placehold.it/300x300" />
                    <link href="https://fluentweb.com/fw-d192a11b84ce02288037ba0722f3ee33.min.css" rel="stylesheet" />
                </div>
            );
        }
    }

    export default Example;