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

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

export default class ArrayElementsDisplay extends React.Component {
  constructor(props) {
    super(props);
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
  }
  handleMouseEnter() {
    this.props.pushHoveringPath(
      this.props.rule._id,
      this.props.fieldRule.dottedFullPath,
      true
    );
  }
  handleMouseLeave() {
    this.props.popHoveringPath(this.props.rule._id);
  }
  render() {
    const { depth, rule, fieldRule, editingPath, hoveringPath } = 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, true);
        }}
        className={classNames("mongo-schema-field", {
          "mongo-schema-is-hovering": isHovering,
          "mongo-schema-is-editing": isActive,
          "mongo-schema-field-has-error":
            fieldRule.elements.error &&
            Object.keys(fieldRule.elements.error).length > 0
        })}
      >
        <span className="mongo-field">
          <Indent size={depth + 2} />
          <span className="mongo-schema-arrayelem">
            {"<array elements>"}
          </span>
        </span>
        <FieldRuleValueDisplay
          perms={fieldRule.elements}
          shadows={rule.getShadows(fieldRule.dottedFullPath, true, false)}
        />
        <FontAwesome
          name="times-circle"
          className="mongo-schema-field-control-is-hidden"
        />
      </div>
    );
  }
}

ArrayElementsDisplay.propTypes = Object.assign({}, baseFieldPropTypes);
delete ArrayElementsDisplay.propTypes.setNewFieldInput;
delete ArrayElementsDisplay.propTypes.addField;
delete ArrayElementsDisplay.propTypes.removeField;

ArrayElementsDisplay.defaultProps = baseFieldDefaultProps;