/**
* Copyright (c) OpenSpug Organization. https://github.com/openspug/spug
* Copyright (c) <spug.dev@gmail.com>
* Released under the AGPL-3.0 License.
*/
import React from 'react';
import { Link } from 'react-router-dom';
import { observer } from 'mobx-react';
import { Modal, Button, Menu, Spin, Icon, Input, Tree } from 'antd';
import store from './store';
import styles from './index.module.css';
import envStore from 'pages/config/environment/store';
import lds from 'lodash';
const TreeNode = Tree.TreeNode;
@observer
class SelectApp extends React.Component {
constructor(props) {
super(props);
this.state = {
env_id: 0,
search: '',
expandedKeys: [],
searchValue: '',
autoExpandParent: true,
treeData: [],
dataList: [],
}
}
componentDidMount() {
store.loadDeploys()
if (envStore.records.length === 0) {
envStore.fetchRecords().then(this._initEnv)
} else {
this._initEnv()
}
}
componentWillUnmount() {
store.refs = {}
}
_initEnv = () => {
if (envStore.records.length) {
this.setState({ env_id: envStore.records[0].id })
}
};
generateList = () => {
const data = store.deploys
//console.log(data)
//this.setState({treeData:data})
for (let i = 0; i < data.length; i++) {
const node = data[i];
const key = node.key;
this.state.dataList.push({ key, title: key });
if (node.children) {
this.generateList(node.children);
}
}
};
getParentKey = (key, tree) => {
let parentKey;
for (let i = 0; i < tree.length; i++) {
const node = tree[i];
if (node.children) {
if (node.children.some(item => item.key === key)) {
parentKey = node.key;
} else if (this.getParentKey(key, node.children)) {
parentKey = this.getParentKey(key, node.children);
}
}
}
return parentKey;
};
onExpand = (expandedKeys) => {
this.setState({
expandedKeys,
autoExpandParent: false,
});
}
onChange = (e) => {
const value = e.target.value;
const treeData = store.deploys;
const dataList = store.deploys;
const expandedKeys = dataList.map((item) => {
if (item.key.indexOf(value) > -1) {
return this.getParentKey(item.key, treeData);
}
return null;
}).filter((item, i, self) => item && self.indexOf(item) === i);
this.setState({
expandedKeys,
searchValue: value,
autoExpandParent: true,
});
};
renderTreeNode = data => data.map((item) => {
const { searchValue } = this.state;
const index = item.key.indexOf(searchValue);
const beforeStr = item.key.substr(0, index);
const afterStr = item.key.substr(index + searchValue.length);
const title = index > -1 ? (
<span>
{beforeStr}
<span style={{ color: '#f50' }}>{searchValue}</span>
{afterStr}
</span>
) : <span>{item.key}</span>;
if (item.children) {
return (
<TreeNode key={item.key} title={title}>
{this.renderTreeNode(item.children)}
</TreeNode>
);
}
return <TreeNode key={item.key} title={title} />;
});
render() {
const { env_id } = this.state;
const treeData = store.deploys;
const { expandedKeys, autoExpandParent } = this.state;
return (
<Modal
visible
width={800}
maskClosable={false}
title="选择应用"
bodyStyle={{ padding: 0 }}
onCancel={() => store.addVisible = false}
footer={null}>
<div className={styles.container}>
<div className={styles.left}>
<Spin spinning={envStore.isFetching}>
<Menu
mode="inline"
selectedKeys={[String(env_id)]}
style={{ border: 'none' }}
onSelect={({ selectedKeys }) => this.setState({ env_id: selectedKeys[0] })}>
{envStore.records.map(item => <Menu.Item key={item.id}>{item.name}</Menu.Item>)}
</Menu>
</Spin>
</div>
<div className={styles.right}>
<Spin spinning={store.isLoading}>
<Input.Search style={{ marginBottom: 8 }} placeholder="Search" onChange={this.onChange} />
<Tree
onExpand={this.onExpand}
expandedKeys={expandedKeys}
autoExpandParent={autoExpandParent}
>
{this.renderTreeNode(treeData)}
</Tree>
</Spin>
</div>
</div >
</Modal >
)
}
}
export default SelectApp