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

/* eslint-disable jsx-a11y/no-static-element-interactions */
import React from "react";
import FontAwesome from "react-fontawesome";
import classNames from "classnames";
import { baseFieldPropTypes, baseFieldDefaultProps } from "../proptypes";
import FieldRuleValueDisplay from "./FieldRuleValueDisplay";
import Indent from "./Indent";
import { Confirm } from "../../../core";
import TypePicker from "./TypePicker";

export default class FieldRuleUntypedDisplay extends React.Component {
  constructor(props) {
    super(props);
    this.removeField = this.removeField.bind(this);
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
  }
  removeField() {
    const { dottedFullPath } = this.props.fieldRule;
    return Confirm.confirm(
      `Are you sure you want to delete field ${dottedFullPath}?`
    ).then(
      () => this.props.removeField(this.props.rule._id, dottedFullPath),
      () => Promise.resolve()
    );
  }
  handleMouseEnter() {
    this.props.pushHoveringPath(
      this.props.rule._id,
      this.props.fieldRule.dottedFullPath,
      false
    );
  }
  handleMouseLeave() {
    this.props.popHoveringPath(this.props.rule._id);
  }
  render() {
    const {
      rule,
      fieldRule,
      depth,
      editingPath,
      hoveringPath,
      setFieldType
    } = this.props;
    const { setEditingPath } = this.props;
    const isActive =
      editingPath &&
      editingPath.path === fieldRule.dottedFullPath &&
      !editingPath.elements &&
      !editingPath.other;
    const isHovering =
      hoveringPath &&
      hoveringPath.length > 0 &&
      hoveringPath[hoveringPath.length - 1].path === fieldRule.dottedFullPath &&
      !hoveringPath[hoveringPath.length - 1].elements &&
      !hoveringPath[hoveringPath.length - 1].other;

    return (
      <div
        onMouseEnter={this.handleMouseEnter}
        onMouseLeave={this.handleMouseLeave}
        onClick={e => {
          e.stopPropagation();
          setEditingPath(rule._id, fieldRule.dottedFullPath, false);
        }}
        className={classNames("mongo-schema-field", {
          "mongo-schema-is-hovering": isHovering,
          "mongo-schema-field-is-dirty": fieldRule.dirty,
          "mongo-schema-field-is-editing": isActive
        })}
      >
        <span className="mongo-schema-fieldname">
          <Indent size={depth} />
          <span
            className={classNames("mongo-schema-mono", {
              "mongo-schema-field-has-error": fieldRule.hasError
            })}
          >
            {fieldRule.path}
          </span>
          <span className="mongo-schema-colon">:</span>
        </span>
        <span className="mongo-schema-value">
          <TypePicker
            editingFieldRule={fieldRule}
            setFieldType={(path, type) => setFieldType(rule._id, path, type)}
          />
          <FieldRuleValueDisplay
            perms={fieldRule.permissions}
            shadows={rule.getShadows(fieldRule.dottedFullPath, false, false)}
          />
          <FontAwesome
            name="times-circle"
            className={classNames("mongo-schema-field-control", {
              "mongo-schema-field-control-is-hidden": !isHovering
            })}
            onClick={this.removeField}
          />
        </span>
      </div>
    );
  }
}
FieldRuleUntypedDisplay.propTypes = baseFieldPropTypes;
FieldRuleUntypedDisplay.defaultProps = baseFieldDefaultProps;