fork from bc4552c5a8

client/components/ModalPostman/VariablesSelect.js

@@ -0,0 +1,157 @@
+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 UNSAFE_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;