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;