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

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

export default class FieldRuleArrayDisplay extends React.Component {
  constructor(props) {
    super(props);
    this.state = { showAddFieldForm: false };
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
    this.removeField = this.removeField.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", {
          "mongo-schema-is-hovering": isHovering,
          "mongo-schema-field-is-dirty": this.props.fieldRule.dirty,
          "mongo-schema-is-editing": isActive
        })}
      >
        <div className="mongo-schema-field">
          {depth > 0 &&
            <span>
              <Indent size={depth} />
              <span
                className={classNames("mongo-schema-mono", {
                  "mongo-schema-field-has-error": this.props.fieldRule.hasError
                })}
              >
                {fieldRule.path}
              </span>
              <span className="mongo-schema-colon">:</span>
            </span>}
          <span className="mongo-schema-mono">
            {"["}
          </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>
        <div>
          <ArrayElementsDisplay
            rule={rule}
            fieldRule={fieldRule}
            editingPath={editingPath}
            hoveringPath={hoveringPath}
            depth={depth}
            setEditingPath={setEditingPath}
            pushHoveringPath={this.props.pushHoveringPath}
            popHoveringPath={this.props.popHoveringPath}
          />
        </div>
        <span className="mongo-schema-mono">
          <Indent size={depth} />
          {"]"}
        </span>
      </div>
    );
  }
}

FieldRuleArrayDisplay.propTypes = baseFieldPropTypes;
FieldRuleArrayDisplay.defaultProps = baseFieldDefaultProps;