stitch-ui/src/services/mongodb/components/FieldRuleRootDisplay.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";

export default function FieldRuleRootDisplay({
  rule,
  fieldRule,
  editingPath,
  setEditingPath,
  hoveringPath
}) {
  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 className="mongo-schema mongo-schema-root">
      <div
        onClick={e => {
          e.stopPropagation();
          setEditingPath(rule._id, null, false);
        }}
        className={classNames("mongo-schema-field", {
          "mongo-schema-is-hovering": isHovering,
          "mongo-schema-field-is-dirty": fieldRule.permissions.dirty,
          "mongo-schema-field-is-editing": isActive
        })}
      >
        <span className="mongo-schema-fieldname">
          <Indent size={1} />
          <span
            className={classNames("mongo-schema-mono", {
              "mongo-schema-field-has-error": fieldRule.hasError
            })}
          >
            Top-Level Document
          </span>
        </span>
        <span className="mongo-schema-value">
          <FieldRuleValueDisplay
            perms={fieldRule.permissions}
            shadows={rule.getShadows(fieldRule.dottedFullPath, false, false)}
          />
          <FontAwesome
            name="times-circle"
            className="mongo-schema-field-control mongo-schema-field-control-is-hidden"
          />
        </span>
      </div>
    </div>
  );
}

FieldRuleRootDisplay.propTypes = baseFieldPropTypes;
FieldRuleRootDisplay.defaultProps = baseFieldDefaultProps;