{"size": 2751, "ext": "js", "max_stars_repo_path": "src/components/Pages/Widgets/MELightDropDown.js", "max_stars_repo_name": "massenergize/frontend-portal", "max_stars_repo_stars_event_min_datetime": "2020-07-07T09:28:38.000Z", "max_stars_repo_stars_event_max_datetime": "2021-10-02T23:34:49.000Z", "max_issues_repo_path": "src/components/Pages/Widgets/MELightDropDown.js", "max_issues_repo_name": "massenergize/frontend-portal", "max_issues_repo_issues_event_min_datetime": "2019-07-17T18:42:39.000Z", "max_issues_repo_issues_event_max_datetime": "2022-03-25T15:44:25.000Z", "max_forks_repo_path": "src/components/Pages/Widgets/MELightDropDown.js", "max_forks_repo_name": "massenergize/frontend-portal", "max_forks_repo_forks_event_min_datetime": "2021-05-19T21:01:35.000Z", "max_forks_repo_forks_event_max_datetime": "2022-03-07T05:53:52.000Z"}
{"max_stars_count": 3, "max_issues_count": 707, "max_forks_count": 2, "avg_line_length": 26.7087378641, "max_line_length": 132, "alphanum_fraction": 0.542348237}
import React, { Component } from "react";
import Dropdown from "react-bootstrap/esm/Dropdown";
// import PropTypes from "prop-types";
export const NONE = "------";
export default class MELightDropDown extends Component {
  static NONE = NONE;
  constructor(props) {
    super(props);
    this.onItemSelected = this.onItemSelected.bind(this);
  }
  onItemSelected(e, child) {
    e.preventDefault();
    const { onItemSelected, dataValues, data } = this.props;
    if (!onItemSelected) return;
    if (!dataValues || dataValues.length === 0) {
      onItemSelected(child, this.props.categoryType);
      return;
    }
    onItemSelected(dataValues[data.indexOf(child)], this.props.categoryType);
  }

  renderChildren(data) {
    if (!data) return;
    data = [NONE, ...data];
    return data.map((child, index) => {
      return (
        <div
          key={index.toString()}
          onClick={(e) => this.onItemSelected(e, child)}
        >
          <Dropdown.Item
            className="dropdown-item  me-dropdown-theme-item force-padding-15"
            style={{ fontWeight: "normal" }}
          >
            {child}
          </Dropdown.Item>
        </div>
      );
    });
  }
  render() {
    const {
      label,
      data,
      style,
      labelIcon,
      menuTextClick,
      labelClassNames,
      controlLabel,
      animate,
      customAnimation,
      direction,
    } = this.props;
    const toggleClassNames = controlLabel
      ? labelClassNames
      : `me-undefault-btn me-light-drop-clickable undo-dropdown-active clear-drop-after me-light-drop-fine-tune ${labelClassNames}`;
    return (
      <div>
        <Dropdown
          drop={direction}
          onSelect={() => null}
          style={{ display: "inline-block", padding: "0px 10px" }}
        >
          <Dropdown.Toggle style={{ ...style }} className={toggleClassNames}>
            <span
              onClick={() => {
                if (menuTextClick) menuTextClick();
              }}
            >
              {label}
              {labelIcon}
            </span>
          </Dropdown.Toggle>

          <Dropdown.Menu
            style={{
              borderTop: "5px solid #8dc63f",
              borderRadius: "0",
              padding: "0",
            }}
            className={`me-dropdown-theme ${
              animate && "me-anime-slide-from-top"
            } z-depth-1 ${customAnimation}`}
          >
            {this.renderChildren(data)}
          </Dropdown.Menu>
        </Dropdown>
      </div>
    );
  }
}

MELightDropDown.defaultProps = {
  controlLabel: false,
  label: "Clickable Header",
  data: ["Data", "Data Name", "Data Age"],
  dataValues: [],
  style: {},
  animate: true,
  customAnimation: "",
  direction: "down",
};
