Using custom react grid

SearchForm_Classic.js

/* @flow weak */
/* eslint react/prop-types: 0 */
import React, {PropTypes} from "react";
import Relay from "react-relay";
import * as _ from "lodash";
import Radium from 'radium';
import formToUrl from "../../../../scripts/search-conv/objToUrl.js";
import urlToObj from "../../../../scripts/search-conv/urlToObj.js";
import encodeUrl from "../../../../scripts/search-conv/urlEncoder.js";
import {browserHistory} from "react-router";
import SearchCard_Classic from './search-form-classic-elements/SearchCard/SearchCard_Classic.js';
import SearchCard_Classic_Header from './search-form-classic-elements/SearchCard/SearchCard_Classic_Header.js';
import MaxPrice from './search-form-classic-elements/SelectClassic_MaxPrice.js';
import MinPrice from './search-form-classic-elements/SelectClassic_MinPrice.js';
import Beds from './search-form-classic-elements/SelectClassic_Beds.js';
import Baths from './search-form-classic-elements/SelectClassic_Baths.js';
import SelectClassic_Statuses from './search-form-classic-elements/SelectClassic_Statuses.js';
import AutoComplete_Simple from '../../sv-auto-complete/AutoComplete_Simple.js';
import PropertyType_Classic from './search-form-classic-elements/PropertyType_Classic.js';
import SearchFormClassic_Styles from "./SearchFormClassic_Styles";
import SearchButton_Classic from './search-form-classic-elements/SearchButton_Classic.js';
import searchPathname_Filter from '../../../../search-filters/searchPathname_Filter.js';
import Grid_3col from './search-form-classic-elements/SearchCard/Grid_3col.js';
import Grid_4col from './search-form-classic-elements/SearchCard/Grid_4col.js';

class SearchForm_Classic extends React.Component {
    static propTypes = {
        query: PropTypes.string,
        pathname: PropTypes.string
    };

    getStyles() {
        let styles = _.cloneDeepWith(SearchFormClassic_Styles);
        styles.liTab = Object.assign(styles.liTab, styles.searchResult.liTab);
        styles.tabLink = Object.assign(styles.tabLink, styles.searchResult.tabLink);
        return styles;
    }

    state = {
        index: 'sale',
        location: '',
        type: '',
        status: '',
        minPrice: 0,
        maxPrice: 0,
        beds: 0,
        baths: 0,
        noLocationErr: false
    };


    componentWillMount() {

        if (this.props.query) {
            let searchState = urlToObj(this.props.query);

            if (_.includes(this.props.pathname, "rent")) {
                searchState.index = "rent"
            } else {

                searchState.index = "sale"
            }
            this.setState(searchState);
        }

    }

    changeIndex = (e) => {
        e.preventDefault()
        let newIndex = e.target.text.toLowerCase();
        console.log(newIndex);
        this.setState({
            index: newIndex
        });

    };

    changeLocation = (newLocation) => {
        if (newLocation) {
            this.setState({
                location: newLocation,
                noLocationErr: false
            })
        } else {

            this.setState({
                location: newLocation
            })
        }
    };

    changePropType = (newType) => {
        this.setState({type: newType})
    };
    changePropStatus = (newStatus) => {
        this.setState({status: newStatus})
    };
    changeMinPrice = (newMinPrice) => {
        this.setState({minPrice: newMinPrice})
    };
    changeMaxPrice = (newMaxPrice) => {
        this.setState({maxPrice: newMaxPrice})
    };
    changeBeds = (newBeds) => {
        this.setState({beds: newBeds})
    };
    changeBaths = (newBaths) => {
        this.setState({baths: newBaths})
    };

    runSearch = () => {
        if (!this.state.location) {
            this.setState({
                noLocationErr: true
            });
        } else {
            let queryInUrl = formToUrl(this.state);

            const searchUrl = encodeUrl(`/search/${this.state.index}/${queryInUrl}/sort-date/1`);
            browserHistory.push(searchUrl);
        }
    };

    showSearchForm = () => {
        let {pathname} = this.props;
        const styles = this.getStyles();
        let activeSaleLink = this.state.index == "sale" && styles.searchResult.tabLink.active;
        let activeRentLink = this.state.index == "rent" && styles.searchResult.tabLink.active;
        let searchButtonLabel;
        let path = searchPathname_Filter(this.props.pathname);
        if (path === 'search') {
            searchButtonLabel = 'Refine Search';
        }
        if (path === 'advanced' || path === 'buy') {
            searchButtonLabel = 'Search';
        }
        let locationCol =
            <AutoComplete_Simple
                noLocationErr={this.state.noLocationErr}
                pathname={pathname}
                changeLocation={this.changeLocation}
                runSearch={this.runSearch}
                showOnHomeSearchClassic={true}
                Viewer={this.props.Viewer}
                searchState={this.state}
            />;
        let propTypeCol =
            <PropertyType_Classic
                index={this.state.index}
                type={this.state.type}
                changePropType={this.changePropType}
            />;
        let propStatusCol =
            <SelectClassic_Statuses
                changePropStatus={this.changePropStatus}
                status={this.state.status}
            />;

        let minPriceCol = <MinPrice
            index={this.state.index}
            minPrice={this.state.minPrice}
            changeMinPrice={this.changeMinPrice}

        />;
        let maxPriceCol = < MaxPrice
            index={this.state.index}
            maxPrice={this.state.maxPrice}
            changeMaxPrice={this.changeMaxPrice}
        />;
        let bedsCol = <Beds
            changeBeds={this.changeBeds}
            beds={this.state.beds}
        />;
        let bathsCol = <Baths
            changeBaths={this.changeBaths}
            baths={this.state.baths}
        />;
        return (
            <SearchCard_Classic primary={true}>
                <SearchCard_Classic_Header primary={true}>
                    <ul>
                        <li key="liSale}" style={styles.liTab}>
                            <a key="sale" style={[styles.tabLink, activeSaleLink, styles.addAnime]}
                               onClick={this.changeIndex} href="">Sale</a>
                        </li>
                        <li key="liRent}" style={styles.liTab}>
                            <a key="rent" style={[styles.tabLink, activeRentLink, styles.addAnime]}
                               onClick={this.changeIndex}>Rent</a>
                        </li>
                    </ul>
                </SearchCard_Classic_Header>
                <Grid_3col
                    gridCol_1={locationCol}
                    gridCol_2={propTypeCol}
                    gridCol_3={propStatusCol}
                />
                <Grid_4col
                    gridCol_1={minPriceCol}
                    gridCol_2={maxPriceCol}
                    gridCol_3={bedsCol}
                    gridCol_4={bathsCol}
                />
                <div style={{margin: '5px 5px 10px', textAlign: 'right'}}>
                    <SearchButton_Classic
                        primary={true}
                        btnLabel={searchButtonLabel}
                        handleClick={this.runSearch}
                    />
                </div>
            </SearchCard_Classic>
        );

    };

    render() {
        return (
            <div>
                {this.showSearchForm()}
            </div>
        );
    }
}

export default  Relay.createContainer(Radium(SearchForm_Classic), {
    fragments: {
        Viewer: () => Relay.QL`
            fragment on Viewer {
                User_IsAnonymous,
                ${AutoComplete_Simple.getFragment( 'Viewer' ) },
            }
        `,
    },
});