PromucFlow_constructor/app/client/src/components/propertyControls/ChartDataControl.tsx

import React from "react";
import _ from "lodash";
import BaseControl, { ControlProps } from "./BaseControl";
import {
  ControlWrapper,
  StyledInputGroup,
  StyledPropertyPaneButton,
} from "./StyledControls";
import styled from "constants/DefaultTheme";
import { FormIcons } from "icons/FormIcons";
import { AnyStyledComponent } from "styled-components";
import DynamicAutocompleteInput from "components/editorComponents/DynamicAutocompleteInput";

const StyledOptionControlWrapper = styled(ControlWrapper)`
  display: flex;
  justify-content: flex-start;
  padding: 0;
  width: 100%;
`;

const StyledOptionControlInputGroup = styled(StyledInputGroup)`
  margin-right: 2px;
  width: 100%;
  margin-bottom: 0;
  &&& {
    input {
      border: none;
      color: ${props => props.theme.colors.textOnDarkBG};
      background: ${props => props.theme.colors.paneInputBG};
      &:focus {
        border: none;
        color: ${props => props.theme.colors.textOnDarkBG};
        background: ${props => props.theme.colors.paneInputBG};
      }
    }
  }
`;

const StyledDynamicInput = styled.div`
  width: 100%;
  &&& {
    input {
      border: none;
      color: ${props => props.theme.colors.textOnDarkBG};
      background: ${props => props.theme.colors.paneInputBG};
      &:focus {
        border: none;
        color: ${props => props.theme.colors.textOnDarkBG};
        background: ${props => props.theme.colors.paneInputBG};
      }
    }
  }
`;

const StyledDeleteIcon = styled(FormIcons.DELETE_ICON as AnyStyledComponent)`
  padding: 0;
  position: relative;
  margin-left: 15px;
  cursor: pointer;
`;

type RenderComponentProps = {
  index: number;
  item: {
    seriesName: string;
    data: Array<{ x: string; y: string }> | any;
  };
  length: number;
  isValid: boolean;
  validationMessage: string;
  deleteOption: Function;
  updateOption: Function;
  dataTreePath: string;
};

function DataControlComponent(props: RenderComponentProps) {
  const { deleteOption, updateOption, item, index, length, isValid } = props;
  return (
    <StyledOptionControlWrapper orientation={"VERTICAL"}>
      <StyledOptionControlWrapper orientation={"HORIZONTAL"}>
        <StyledOptionControlInputGroup
          type="text"
          placeholder="Series Name"
          onChange={(event: React.ChangeEvent<HTMLInputElement>) => {
            updateOption(index, "seriesName", event.target.value);
          }}
          defaultValue={item.seriesName}
        />
        {length > 1 && (
          <StyledDeleteIcon
            height={20}
            width={20}
            onClick={() => {
              deleteOption(index);
            }}
          />
        )}
      </StyledOptionControlWrapper>
      <StyledDynamicInput>
        <DynamicAutocompleteInput
          input={{
            value: item.data,
            onChange: (
              event: React.ChangeEvent<HTMLTextAreaElement> | string,
            ) => {
              let value = event;
              if (typeof event !== "string") {
                value = event.target.value;
              }
              updateOption(index, "data", value);
            },
          }}
          dataTreePath={`${props.dataTreePath}`}
          meta={{
            error: isValid ? "" : "There is an error",
            touched: true,
          }}
          theme={"DARK"}
          singleLine={false}
          placeholder=""
        />
      </StyledDynamicInput>
    </StyledOptionControlWrapper>
  );
}

class ChartDataControl extends BaseControl<ControlProps> {
  getValidations = (message: string, isValid: boolean, len: number) => {
    const validations: Array<{
      isValid: boolean;
      validationMessage: string;
    }> = [];
    let index = -1;
    let validationMessage = "";
    if (message.indexOf("##") !== -1) {
      const messages = message.split("##");
      index = Number(messages[0]);
      validationMessage = messages[1];
    }
    for (let i = 0; i < len; i++) {
      if (i === index) {
        validations.push({
          isValid: false,
          validationMessage: validationMessage,
        });
      } else {
        validations.push({
          isValid: true,
          validationMessage: "",
        });
      }
    }
    return validations;
  };

  render() {
    const chartData: Array<{
      seriesName: string;
      data: Array<{ x: string; y: string }> | any;
    }> =
      this.props.propertyValue && _.isString(this.props.propertyValue)
        ? JSON.parse(this.props.propertyValue)
        : this.props.propertyValue;
    const dataLength = chartData.length;
    const { validationMessage, isValid } = this.props;
    const validations: Array<{
      isValid: boolean;
      validationMessage: string;
    }> = this.getValidations(
      validationMessage || "",
      isValid,
      chartData.length,
    );
    return (
      <React.Fragment>
        {chartData.map((data, index) => {
          return (
            <DataControlComponent
              key={index}
              index={index}
              item={data}
              length={dataLength}
              deleteOption={this.deleteOption}
              updateOption={this.updateOption}
              isValid={validations[index].isValid}
              validationMessage={validations[index].validationMessage}
              dataTreePath={`${this.props.dataTreePath}`}
            />
          );
        })}
        <StyledPropertyPaneButton
          text="Add Series"
          icon="plus"
          color="#FFFFFF"
          minimal
          onClick={this.addOption}
        />
      </React.Fragment>
    );
  }

  deleteOption = (index: number) => {
    const chartData: object[] =
      this.props.propertyValue && _.isString(this.props.propertyValue)
        ? JSON.parse(this.props.propertyValue)
        : this.props.propertyValue;
    chartData.splice(index, 1);
    this.updateProperty(this.props.propertyName, JSON.stringify(chartData));
  };

  updateOption = (
    index: number,
    propertyName: string,
    updatedValue: string,
  ) => {
    const chartData: Array<{
      seriesName: string;
      data: Array<{ x: string; y: string }> | any;
    }> =
      this.props.propertyValue && _.isString(this.props.propertyValue)
        ? JSON.parse(this.props.propertyValue)
        : this.props.propertyValue;
    const updatedChartData = chartData.map((item, i) => {
      if (index === i) {
        if (propertyName === "seriesName") {
          item.seriesName = updatedValue;
        } else {
          try {
            item.data = JSON.parse(updatedValue);
          } catch (err) {
            item.data = updatedValue;
          }
        }
      }
      return item;
    });
    this.updateProperty(
      this.props.propertyName,
      JSON.stringify(updatedChartData),
    );
  };

  addOption = () => {
    const chartData: Array<{
      seriesName: string;
      data: Array<{ x: string; y: string }> | any;
    }> =
      this.props.propertyValue && _.isString(this.props.propertyValue)
        ? JSON.parse(this.props.propertyValue)
        : this.props.propertyValue;
    chartData.push({ seriesName: "", data: [{ x: "", y: "" }] });
    this.updateProperty(this.props.propertyName, JSON.stringify(chartData));
  };

  static getControlType() {
    return "CHART_DATA";
  }
}

export default ChartDataControl;