stitch-ui/src/services/mongodb/components/TypePicker.js

import React from "react";
import PropTypes from "prop-types";
import DropdownMenu from "react-dd-menu";
import FontAwesome from "react-fontawesome";
import { TYPE_ARRAY, TYPE_OBJECT, TYPE_UNTYPED } from "../constants";

const getTypeName = t => {
  switch (t) {
    case TYPE_OBJECT:
      return "Object";
    case TYPE_ARRAY:
      return "Array";
    case TYPE_UNTYPED:
      return "Any";
    default:
      return "Any";
  }
};

export default class TypePicker extends React.Component {
  constructor(props) {
    super(props);
    this.changeFieldType = this.changeFieldType.bind(this);
    this.state = { dropdownOpen: false };
  }
  changeFieldType(newType) {
    this.props.setFieldType(
      this.props.editingFieldRule.dottedFullPath,
      newType
    );
  }
  render() {
    const { editingFieldRule } = this.props;
    if (!editingFieldRule) {
      return null;
    }

    const menuOptions = {
      isOpen: this.state.dropdownOpen,
      close: () => {
        this.setState({ dropdownOpen: false });
      },
      toggle: (
        <span
          className="mongo-schema-typepicker"
          onClick={() => {
            this.setState({ dropdownOpen: !this.state.dropdownOpen });
          }}
        >
          <span>{getTypeName(editingFieldRule.getFieldType())}</span>
          <FontAwesome name="caret-down" />{" "}
        </span>
      ),
      align: "center"
    };

    /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
    return (
      <DropdownMenu {...menuOptions}>
        <li onClick={() => this.changeFieldType(TYPE_OBJECT)}>
          <a>Object</a>
        </li>
        <li onClick={() => this.changeFieldType(TYPE_ARRAY)}>
          <a>Array</a>
        </li>
        <li onClick={() => this.changeFieldType(TYPE_UNTYPED)}>
          <a>Any</a>
        </li>
      </DropdownMenu>
    );
  }
}

TypePicker.propTypes = {
  setFieldType: PropTypes.func.isRequired,
  editingFieldRule: PropTypes.object // eslint-disable-line react/forbid-prop-types
};
TypePicker.defaultProps = {
  editingFieldRule: null,
  ruleEditState: {}
};