# All files / src/select-device select-device.base.tsx

92.86% Statements 13/14
66.67% Branches 4/6
100% Functions 6/6
92.86% Lines 13/14

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

    1x

    6x

    6x
    6x

    6x
    1x

    6x

    4x

    6x
    1x

    1x
     import * as React from "react";
    import Foundation, { HandledProps } from "@microsoft/fast-components-foundation-react";
    import { SelectDeviceProps } from "./select-device.props";
    import { Device } from "./devices";

    class SelectDevice extends Foundation<SelectDeviceProps, {}, {}> {
        public static displayName: string = "SelectDevice";

        protected handledProps: HandledProps<SelectDeviceProps> = {
            devices: void 0,
            activeDeviceId: void 0,
            onUpdateDevice: void 0,
        };

        public render(): JSX.Element {
            Eif (this.props.devices) {
                return (
                    <div className={this.props.managedClasses.selectDevice}>
                        {this.renderLabel()}
                        <span
                            className={this.props.managedClasses.selectDevice_contentRegion}
                        >
                            <select
                                className={
                                    this.props.managedClasses
                                        .selectDevice_contentRegion_select
                                }
                                onChange={this.handleOnChange}
                                value={this.props.activeDeviceId}
                                disabled={this.props.disabled}
                            >
                                {this.renderOptions()}
                            </select>
                        </span>
                    </div>
                );
            }

            return null;
        }

        private renderLabel(): React.ReactNode {
            if (this.props.label) {
                return (
                    <label className={this.props.managedClasses.selectDevice_label}>
                        {this.props.label}
                    </label>
                );
            }
        }

        private renderOptions(): React.ReactNode {
            return this.props.devices.map(
                (device: Device, index: number): React.ReactNode => {
                    return (
                        <option value={device.id} key={device.id + index}>
                            {device.displayName}
                        </option>
                    );
                }
            );
        }

        private handleOnChange = (e: React.ChangeEvent<HTMLSelectElement>): void => {
            this.props.onUpdateDevice(e.target.value || "");
        };
    }

    export default SelectDevice;