yapi-next/vendors/client/components/ModalPostman/VariablesSelect.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Tree } from 'antd';
import { connect } from 'react-redux';
import { fetchVariableParamsList } from '../../reducer/modules/interfaceCol.js';

const TreeNode = Tree.TreeNode;
const CanSelectPathPrefix = 'CanSelectPath-';

function deleteLastObject(str) {
  return str
    .split('.')
    .slice(0, -1)
    .join('.');
}

function deleteLastArr(str) {
  return str.replace(/\[.*?\]/g, '');
}

@connect(
  state => {
    return {
      currColId: state.interfaceCol.currColId
    };
  },
  {
    fetchVariableParamsList
  }
)
class VariablesSelect extends Component {
  static propTypes = {
    click: PropTypes.func,
    currColId: PropTypes.number,
    fetchVariableParamsList: PropTypes.func,
    clickValue: PropTypes.string,
    id: PropTypes.number
  };
  state = {
    records: [],
    expandedKeys: [],
    selectedKeys: []
  };

  handleRecordsData(id) {
    let newRecords = [];
    this.id = id;
    for (let i = 0; i < this.records.length; i++) {
      if (this.records[i]._id === id) {
        break;
      }
      newRecords.push(this.records[i]);
    }
    this.setState({
      records: newRecords
    });
  }

  async componentDidMount() {
    const { currColId, fetchVariableParamsList, clickValue } = this.props;
    let result = await fetchVariableParamsList(currColId);
    let records = result.payload.data.data;
    this.records = records.sort((a, b) => {
      return a.index - b.index;
    });
    this.handleRecordsData(this.props.id);

    if (clickValue) {
      let isArrayParams = clickValue.lastIndexOf(']') === clickValue.length - 1;
      let key = isArrayParams ? deleteLastArr(clickValue) : deleteLastObject(clickValue);
      this.setState({
        expandedKeys: [key],
        selectedKeys: [CanSelectPathPrefix + clickValue]
      });
      // this.props.click(clickValue);
    }
  }

  async componentWillReceiveProps(nextProps) {
    if (this.records && nextProps.id && this.id !== nextProps.id) {
      this.handleRecordsData(nextProps.id);
    }
  }

  handleSelect = key => {
    this.setState({
      selectedKeys: [key]
    });
    if (key && key.indexOf(CanSelectPathPrefix) === 0) {
      key = key.substr(CanSelectPathPrefix.length);
      this.props.click(key);
    } else {
      this.setState({
        expandedKeys: [key]
      });
    }
  };

  onExpand = keys => {
    this.setState({ expandedKeys: keys });
  };

  render() {
    const pathSelctByTree = (data, elementKeyPrefix = '$', deepLevel = 0) => {
      let keys = Object.keys(data);
      let TreeComponents = keys.map((key, index) => {
        let item = data[key],
          casename;
        if (deepLevel === 0) {
          elementKeyPrefix = '$';
          elementKeyPrefix = elementKeyPrefix + '.' + item._id;
          casename = item.casename;
          item = {
            params: item.params,
            body: item.body
          };
        } else if (Array.isArray(data)) {
          elementKeyPrefix =
            index === 0
              ? elementKeyPrefix + '[' + key + ']'
              : deleteLastArr(elementKeyPrefix) + '[' + key + ']';
        } else {
          elementKeyPrefix =
            index === 0
              ? elementKeyPrefix + '.' + key
              : deleteLastObject(elementKeyPrefix) + '.' + key;
        }
        if (item && typeof item === 'object') {
          const isDisable = Array.isArray(item) && item.length === 0;
          return (
            <TreeNode key={elementKeyPrefix} disabled={isDisable} title={casename || key}>
              {pathSelctByTree(item, elementKeyPrefix, deepLevel + 1)}
            </TreeNode>
          );
        }
        return <TreeNode key={CanSelectPathPrefix + elementKeyPrefix} title={key} />;
      });

      return TreeComponents;
    };

    return (
      <div className="modal-postman-form-variable">
        <Tree
          expandedKeys={this.state.expandedKeys}
          selectedKeys={this.state.selectedKeys}
          onSelect={([key]) => this.handleSelect(key)}
          onExpand={this.onExpand}
        >
          {pathSelctByTree(this.state.records)}
        </Tree>
      </div>
    );
  }
}

export default VariablesSelect;