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

import React from "react"; // eslint-disable-line no-unused-vars
import PropTypes from "prop-types";
import classNames from "classnames";
import { FieldRule } from "../mongodb_rule";

function PermissionLetter({ letter, hidden, shadow }) {
  return (
    <span
      className={classNames("mongo-schema-value-preview", {
        "mongo-schema-value-preview-is-hidden": !!hidden,
        "mongo-schema-value-preview-is-shadowed": !!shadow
      })}
    >
      {hidden ? "-" : letter}
    </span>
  );
}
PermissionLetter.propTypes = {
  letter: PropTypes.oneOf(["r", "w", "v"]).isRequired,
  hidden: PropTypes.bool,

  shadow: PropTypes.instanceOf(FieldRule)
};

PermissionLetter.defaultProps = {
  shadow: null,
  hidden: false
};

export default function FieldRuleValueDisplay({ perms, shadows }) {
  return (
    <span
      className={classNames("mongo-schema-value", {
        "mongo-schema-value-has-error": perms && perms.hasError()
      })}
    >
      <PermissionLetter
        letter={"r"}
        shadow={shadows.read}
        hidden={!perms || (perms.read.input && perms.read.input.length === 0)}
      />
      <PermissionLetter
        letter={"w"}
        shadow={shadows.write}
        hidden={!perms || (perms.write.input && perms.write.input.length === 0)}
      />
      <PermissionLetter
        letter={"v"}
        hidden={!perms || (perms.valid.input && perms.valid.input.length === 0)}
      />
    </span>
  );
}

/* eslint-disable react/forbid-prop-types */
FieldRuleValueDisplay.propTypes = {
  shadows: PropTypes.object.isRequired,
  perms: PropTypes.object
};

FieldRuleValueDisplay.defaultProps = {
  perms: null
};