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

import React from "react";
import { connect } from "react-redux";
import * as actions from "../actions";
import FieldRuleObjectDisplay from "./FieldRuleObjectDisplay";
import FieldRuleArrayDisplay from "./FieldRuleArrayDisplay";
import FieldRuleUntypedDisplay from "./FieldRuleUntypedDisplay";
import FieldRuleRootDisplay from "./FieldRuleRootDisplay";
import { baseFieldPropTypes, baseFieldDefaultProps } from "../proptypes";
import { TYPE_ARRAY, TYPE_OBJECT } from "../constants";

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) =>
    dispatch(actions.setEditingPath({ ruleId, path, elements })),
  pushHoveringPath: (ruleId, path, elements) =>
    dispatch(actions.pushHoveringPath({ ruleId, path, elements })),
  setFieldType: (ruleId, field, type) =>
    dispatch(actions.setFieldType({ ruleId, field, type })),
  setNewFieldInput: (ruleId, path, value) =>
    dispatch(actions.setNewFieldInput({ ruleId, path, value })),
  popHoveringPath: ruleId => dispatch(actions.popHoveringPath({ ruleId })),
  addField: (ruleId, path, field) =>
    dispatch(actions.addField({ ruleId, path, field })),
  removeField: (ruleId, path) => dispatch(actions.removeField({ ruleId, path }))
});

function FieldRuleDisplay(props) {
  const { rule, fieldRule, editingPath, hoveringPath, depth } = props;
  const {
    addField,
    setEditingPath,
    setFieldType,
    pushHoveringPath,
    popHoveringPath,
    removeField,
    setNewFieldInput
  } = props;
  const childProps = {
    setEditingPath,
    removeField,
    setFieldType,
    setNewFieldInput,
    hoveringPath,
    pushHoveringPath,
    popHoveringPath,
    editingPath,
    rule,
    fieldRule,
    depth,
    addField
  };
  switch (fieldRule.getFieldType()) {
    case TYPE_OBJECT:
      if (depth === 0) {
        return (
          <span>
            <FieldRuleRootDisplay {...childProps} />
            <FieldRuleObjectDisplay {...childProps} />
          </span>
        );
      }
      return <FieldRuleObjectDisplay {...childProps} />;
    case TYPE_ARRAY:
      return <FieldRuleArrayDisplay {...childProps} />;
    default:
      return <FieldRuleUntypedDisplay {...childProps} />;
  }
}

FieldRuleDisplay.propTypes = baseFieldPropTypes;
FieldRuleDisplay.defaultProps = baseFieldDefaultProps;

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