/**
 * @license
 * The MIT License (MIT)
 * Copyright 2015 Government of Canada
 *
 * @author
 * Ian Boyes
 *
 * @exports IsolateForm
 */

import React from "react";
import PropTypes from "prop-types";
import { toLower } from "lodash-es";
import { Row, Col } from "react-bootstrap";

import { formatIsolateName } from "../../../utils/utils";
import { InputError, SaveButton, DialogFooter, DialogBody } from "../../../base";
import { SourceTypeInput } from "./SourceTypeInput";

export class IsolateForm extends React.Component {
    static propTypes = {
        sourceType: PropTypes.string,
        sourceName: PropTypes.string,
        allowedSourceTypes: PropTypes.arrayOf(PropTypes.string),
        restrictSourceTypes: PropTypes.bool,
        onChange: PropTypes.func,
        onSubmit: PropTypes.func
    };

    changeSourceType = e => {
        this.props.onChange({
            sourceType: toLower(e.target.value),
            sourceName: e.target.value === "unknown" ? "" : this.props.sourceName
        });
    };

    changeSourceName = e => {
        this.props.onChange({
            sourceName: e.target.value,
            sourceType: this.props.sourceType
        });
    };

    render() {
        // If the is a restricted list of sourceTypes to choose from display a select field with the choices.
        return (
            <form onSubmit={this.props.onSubmit}>
                <DialogBody>
                    <Row>
                        <Col md={6}>
                            <SourceTypeInput
                                restrictSourceTypes={this.props.restrictSourceTypes}
                                allowedSourceTypes={this.props.allowedSourceTypes}
                                value={this.props.sourceType}
                                onChange={this.changeSourceType}
                            />
                        </Col>
                        <Col md={6}>
                            <InputError
                                label="Source Name"
                                value={this.props.sourceName}
                                onChange={this.changeSourceName}
                                disabled={this.props.sourceType === "unknown"}
                                spellCheck="off"
                            />
                        </Col>
                        <Col md={12}>
                            <InputError label="Isolate Name" value={formatIsolateName(this.props)} readOnly />
                        </Col>
                    </Row>
                </DialogBody>
                <DialogFooter>
                    <SaveButton />
                </DialogFooter>
            </form>
        );
    }
}

export default IsolateForm;

@@ -243,42 +243,38 @@
 ort 
-%7B Row, Col %7D from %22react-bootstrap
+styled from %22styled-components
 %22;%0A%0A
@@ -467,16 +467,129 @@
 nput%22;%0A%0A
+const TypeInputName = styled.div%60%0A    display: grid;%0A    grid-template-columns: 1fr 1fr;%0A    grid-gap: 16px;%0A%60;%0A%0A
 export c
@@ -1540,54 +1540,23 @@
    %3C
-Row%3E%0A                        %3CCol md=%7B6%7D%3E%0A    
+TypeInputName%3E%0A
     
@@ -1616,28 +1616,24 @@
             
- 
-   
 restrictSour
@@ -1697,28 +1697,24 @@
             
-    
 allowedSourc
@@ -1772,36 +1772,32 @@
                 
-  
-  
 value=%7Bthis.prop
@@ -1802,36 +1802,32 @@
 ops.sourceType%7D%0A
-    
                 
@@ -1899,87 +1899,12 @@
     
-   
- 
 /%3E%0A
-                        %3C/Col%3E%0A                        %3CCol md=%7B6%7D%3E%0A    
+%0A
     
@@ -1963,20 +1963,16 @@
         
- 
-   
 label=%22S
@@ -1983,20 +1983,16 @@
 e Name%22%0A
-    
         
@@ -2061,36 +2061,32 @@
                 
-   
- 
 onChange=%7Bthis.c
@@ -2094,36 +2094,32 @@
 angeSourceName%7D%0A
-    
                 
@@ -2177,20 +2177,16 @@
 known%22%7D%0A
-    
         
@@ -2246,20 +2246,16 @@
         
-    
 /%3E%0A     
@@ -2273,65 +2273,26 @@
     
-    %3C/Col%3E%0A                        %3CCol md=%7B12%7D%3E%0A        
+%3C/TypeInputName%3E%0A%0A
     
@@ -2394,66 +2394,8 @@
  /%3E%0A
-                        %3C/Col%3E%0A                    %3C/Row%3E%0A
     

Replace react-bootstrap in otu IsolateForm component