fk-react-ui-components/lib/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

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

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 React.createElement(
            StyledSelect,
            _extends({ value: this.state.value, onChange: this.handleChange }, this.props),
            this.props.children
        );
    }
}

export default Select;
//# sourceMappingURL=Select.js.map