@shakthillc/components/es/Dropdown/Dropdown.js

React generic components for shakthi products

import _Object$getPrototypeOf from "babel-runtime/core-js/object/get-prototype-of";
import _classCallCheck from "babel-runtime/helpers/classCallCheck";
import _createClass from "babel-runtime/helpers/createClass";
import _possibleConstructorReturn from "babel-runtime/helpers/possibleConstructorReturn";
import _inherits from "babel-runtime/helpers/inherits";
import React from "react";
import PropTypes from "prop-types";
import style from "./Dropdown.module.css";

var Dropdown = function (_React$Component) {
  _inherits(Dropdown, _React$Component);

  function Dropdown(props) {
    _classCallCheck(this, Dropdown);

    var _this = _possibleConstructorReturn(this, (Dropdown.__proto__ || _Object$getPrototypeOf(Dropdown)).call(this, props));

    _this.state = {
      selectedOption: props.selectedOption
    };
    _this.handleChange = _this.handleChange.bind(_this);
    return _this;
  }

  _createClass(Dropdown, [{
    key: "handleChange",
    value: function handleChange(e) {
      var onChange = this.props.onChange;

      this.setState({ selectedOption: e.target.value });
      onChange && onChange(e.target.value);
    }
  }, {
    key: "render",
    value: function render() {
      var _props = this.props,
          options = _props.options,
          _props$disabled = _props.disabled,
          disabled = _props$disabled === undefined ? false : _props$disabled;
      var selectedOption = this.state.selectedOption;

      var html = options.map(function (obj, i) {
        return React.createElement(
          "option",
          { key: i, className: style.optionStyle, value: obj.value },
          obj.label
        );
      });
      return React.createElement(
        "div",
        null,
        React.createElement(
          "select",
          {
            className: style.selectStyle,
            value: selectedOption,
            onChange: this.handleChange,
            disabled: disabled
          },
          React.createElement(
            "option",
            { value: "" },
            "select"
          ),
          html
        )
      );
    }
  }]);

  return Dropdown;
}(React.Component);

export default Dropdown;


Dropdown.defaultProps = {
  options: [{ value: "chocolate", label: "Chocolate" }, { value: "strawberry", label: "Strawberry" }, { value: "vanilla", label: "Vanilla" }],
  disabled: false,
  dataId: "dropdownComp",
  selectedOption: ""
};
Dropdown.propTypes = {
  dataId: PropTypes.string,
  disabled: PropTypes.bool,
  onChange: PropTypes.func,
  options: PropTypes.array,
  selectedOption: PropTypes.string
};