fk-react-ui-components/components/FormElements/Select/Select.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

import React from "react";
import FormElement from "../FormElement.js";
import styled from "styled-components";
import {colors} from "../../colorCodes";

let StyledSelect= styled.select`
    fontWeight: 500;
    display: block;
    padding: ${(props) => props.padding || "7px"};
    border-radius: 4px;
    border: ${(props) => props.border || `1px solid ${colors.inputBorder}`};
    height: 30px;
    width: ${(props) => props.width || "100%"};
    height: ${(props) => props.height || "100%"};
    max-width: ${(props) => props.maxWidth || "none"};
    margin: ${(props) => props.margin || "none"};
    font-size: ${(props) => props.fontSize || "13px"};
    -webkit-appearance: ${(props) => props.appearance || "normal"};
    -moz-appearance: ${(props) => props.appearance || "normal"};
    appearance: ${(props) => props.appearance || "normal"};
    outline: ${(props) => props.outline};
    color: ${(props) => props.color};
    float: ${(props) => props.float}; 
    text-transform: capitalize;
    &:disabled{
        background-color: #eeeeee75;
    }
`;


class Select extends FormElement {
    constructor(props) {
        super(props);
    }
    render() {
        return(
            <StyledSelect value={this.state.value} onChange={this.handleChange} {...this.props}>
            {this.props.children}
            </StyledSelect>
        )
    }
}

export default Select;