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

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

const mapStateToProps = (state, ownProps) => {
  let editState = state.service.serviceTypes.mongodb.rulesEditState.get(
    ownProps.rule._id
  );
  if (editState) {
    editState = editState.toJS();
    return {
      editingPath: editState.editingPath,
      hoveringPath: editState.hoveringPath
    };
  }
  return {};
};

const mapDispatchToProps = dispatch => ({
  setEditingPath: (ruleId, path, elements, other) =>
    dispatch(actions.setEditingPath({ ruleId, path, elements, other })),
  pushHoveringPath: (ruleId, path, elements, other) =>
    dispatch(actions.pushHoveringPath({ ruleId, path, elements, other })),
  popHoveringPath: ruleId => dispatch(actions.popHoveringPath({ ruleId }))
});

class OtherFieldsRuleDisplay extends React.Component {
  constructor(props) {
    super(props);
    this.setEditingPath = this.setEditingPath.bind(this);
    this.handleMouseEnter = this.handleMouseEnter.bind(this);
    this.handleMouseLeave = this.handleMouseLeave.bind(this);
  }
  setEditingPath(e) {
    e.stopPropagation();
    this.props.setEditingPath(
      this.props.rule._id,
      this.props.fieldRule.dottedFullPath,
      false,
      true
    );
  }
  handleMouseEnter() {
    this.props.pushHoveringPath(
      this.props.rule._id,
      this.props.fieldRule.dottedFullPath,
      false,
      true
    );
  }
  handleMouseLeave() {
    this.props.popHoveringPath(this.props.rule._id);
  }
  render() {
    const { rule, fieldRule, hoveringPath, editingPath, depth } = this.props;
    const otherIsHovering =
      hoveringPath &&
      hoveringPath.length > 0 &&
      hoveringPath[hoveringPath.length - 1].path === fieldRule.dottedFullPath &&
      hoveringPath[hoveringPath.length - 1].other;
    const otherIsActive =
      editingPath &&
      editingPath.path === fieldRule.dottedFullPath &&
      editingPath.other;
    return (
      <div
        onMouseEnter={this.handleMouseEnter}
        onMouseLeave={this.handleMouseLeave}
        onClick={this.setEditingPath}
        className={classNames("mongo-schema-field", {
          "mongo-schema-field-is-editing": otherIsActive,
          "mongo-schema-is-hovering": otherIsHovering,
          "mongo-schema-field-is-dirty":
            fieldRule.otherFields && fieldRule.otherFields.dirty,
          "mongo-schema-field-has-error":
            fieldRule.otherFields &&
            fieldRule.otherFields.error &&
            Object.keys(fieldRule.otherFields.error).length > 0
        })}
      >
        <Indent size={depth + 1} />
        <span
          className={classNames("mongo-schema-other", {
            "mongo-schema-field-has-error":
              fieldRule.otherFields &&
              fieldRule.otherFields.error &&
              Object.keys(fieldRule.otherFields.error).length > 0
          })}
        >
          all other fields {fieldRule.otherFields ? "(enabled)" : "(disabled)"}
        </span>
        <span className="mongo-schema-value">
          <FieldRuleValueDisplay
            perms={fieldRule.otherFields ? fieldRule.otherFields : null}
            shadows={rule.getShadows(fieldRule.dottedFullPath, false, true)}
          />
          <FontAwesome
            name="times-circle"
            className="mongo-schema-field-control mongo-schema-field-control-is-hidden"
          />
        </span>
      </div>
    );
  }
}

OtherFieldsRuleDisplay.propTypes = () => {
  const { setNewFieldInput: deletedKey, ...otherKeys } = baseFieldPropTypes;
  return otherKeys;
};
OtherFieldsRuleDisplay.defaultProps = baseFieldDefaultProps;

export default connect(mapStateToProps, mapDispatchToProps)(
  OtherFieldsRuleDisplay
);