Farmbot-Web-App/frontend/sequences/locals_list/location_form.tsx

import * as React from "react";
import { Row, Col, FBSelect, DropDownItem } from "../../ui";
import { locationFormList, NO_VALUE_SELECTED_DDI } from "./location_form_list";
import { convertDDItoVariable } from "../locals_list/handle_select";
import {
  LocationFormProps, PARENT, AllowedVariableNodes, VariableNode,
} from "../locals_list/locals_list_support";
import {
  determineVector, determineDropdown, SequenceMeta, determineVarDDILabel,
} from "../../resources/sequence_meta";
import { ResourceIndex, UUID } from "../../resources/interfaces";
import { Feature } from "../../devices/interfaces";
import { DefaultValueForm } from "./default_value_form";
import { t } from "../../i18next_wrapper";
import { CoordinateInputBoxes } from "./location_form_coordinate_input_boxes";

/**
 * If a variable with a matching label exists in local parameter applications
 * (step body, etc.), use it instead of the one in scope declarations.
 */
const maybeUseStepData = ({ resources, bodyVariables, variable, uuid }: {
  resources: ResourceIndex,
  bodyVariables: VariableNode[] | undefined,
  variable: SequenceMeta,
  uuid: UUID,
}): SequenceMeta => {
  if (bodyVariables) {
    const executeStepData = bodyVariables
      .filter(v => v.args.label === variable.celeryNode.args.label)[0];
    if (executeStepData) {
      return {
        celeryNode: executeStepData,
        vector: determineVector(executeStepData, resources, uuid),
        dropdown: determineDropdown(executeStepData, resources, uuid),
      };
    }
  }
  return variable;
};

/** Determine DropdownItem for the current LocationForm selection. */
const selectedLabelDDI = (ddi: DropDownItem, override?: string) => {
  const newDDI = Object.assign({}, ddi);
  newDDI.label = (ddi.value === "parameter_declaration" && override)
    ? override : newDDI.label;
  return newDDI;
};

/**
 * Form with an "import from" dropdown and coordinate input boxes.
 * Can be used to set a specific value, import a value, or declare a variable.
 */
export const LocationForm =
  (props: LocationFormProps) => {
    const { sequenceUuid, resources, bodyVariables, variable,
      allowedVariableNodes, disallowGroups } = props;
    const { celeryNode, dropdown, vector } = maybeUseStepData({
      resources, bodyVariables, variable, uuid: sequenceUuid
    });
    const displayVariables = props.shouldDisplay(Feature.variables) &&
      allowedVariableNodes !== AllowedVariableNodes.variable;
    const variableListItems = displayVariables ? [PARENT(props.listVarLabel ||
      determineVarDDILabel("parent", resources, sequenceUuid))] : [];
    const displayGroups = props.shouldDisplay(Feature.loops) && !disallowGroups;
    const list = locationFormList(resources, variableListItems, displayGroups);
    /** Variable name. */
    const { label } = celeryNode.args;
    const formTitleWithType =
      props.hideVariableLabel ? t("Location") : `${label} (${t("Location")})`;
    const formTitle = props.hideTypeLabel ? label : formTitleWithType;
    return <div className="location-form">
      <div className="location-form-header">
        <label>{formTitle}</label>
        {props.collapsible &&
          <i className={`fa fa-caret-${props.collapsed ? "down" : "up"}`}
            onClick={props.toggleVarShow} />}
      </div>
      {!props.collapsed &&
        <div className="location-form-content">
          <Row>
            <Col xs={12}>
              <FBSelect
                key={props.locationDropdownKey}
                list={list}
                selectedItem={selectedLabelDDI(dropdown, props.listVarLabel)}
                customNullLabel={NO_VALUE_SELECTED_DDI().label}
                onChange={ddi => props.onChange(convertDDItoVariable({
                  label, allowedVariableNodes
                })(ddi))} />
            </Col>
          </Row>
          <CoordinateInputBoxes
            variableNode={celeryNode}
            vector={vector}
            width={props.width}
            onChange={props.onChange} />
          <DefaultValueForm
            variableNode={celeryNode}
            resources={resources}
            onChange={props.onChange} />
        </div>}
    </div>;
  };