105 lines
3.5 KiB
TypeScript
105 lines
3.5 KiB
TypeScript
import Tree, { ExpandData, SelectData, TreeNode } from 'rc-tree';
|
|
import 'rc-tree/assets/index.css';
|
|
import React, { Component } from 'react';
|
|
import { RouteComponentProps, withRouter } from 'react-router';
|
|
import { MultiLang } from '../../config';
|
|
import Functions from '../../functions';
|
|
import IndexUtil, { Index, INDEX_ID_PUBLIC } from '../lib/IndexUtil';
|
|
import styles from './IndexTree.module.css';
|
|
|
|
interface Props extends RouteComponentProps {
|
|
lang: MultiLang;
|
|
}
|
|
|
|
interface State {
|
|
tree: JSX.Element[];
|
|
expandableKeys: string[];
|
|
expandedKeys: string[];
|
|
selectedKeys: string[];
|
|
}
|
|
|
|
class IndexTree extends Component<Props, State> {
|
|
|
|
constructor(props: Props) {
|
|
super(props);
|
|
this.handleClickOpenAll = this.handleClickOpenAll.bind(this);
|
|
this.handleClickCloseAll = this.handleClickCloseAll.bind(this);
|
|
this.handleExpand = this.handleExpand.bind(this);
|
|
this.handleSelect = this.handleSelect.bind(this);
|
|
const res = this.load();
|
|
this.state = {
|
|
tree: res.elements,
|
|
expandableKeys: res.keys,
|
|
expandedKeys: res.expandedKeys,
|
|
selectedKeys: [],
|
|
};
|
|
}
|
|
|
|
load() {
|
|
const { lang } = this.props;
|
|
let keys: string[] = [];
|
|
let eKeys: string[] = [];
|
|
const makeTreeNode = (index: Index, depth: number): JSX.Element => {
|
|
const title = Functions.mlang(index.title, lang) + (index.numOfItems > 0 ? ' (' + index.numOfItems + ')' : '');
|
|
const children = IndexUtil.getChildren(index.id);
|
|
if (children.length === 0) {
|
|
return (<TreeNode key={index.id} title={title} />)
|
|
}
|
|
const childTreeNodes = children.map((value: Index) => {
|
|
return makeTreeNode(value, depth + 1);
|
|
});
|
|
if (depth < 1) {
|
|
eKeys.push(String(index.id));
|
|
}
|
|
keys.push(String(index.id));
|
|
return (
|
|
<TreeNode key={index.id} title={title}>
|
|
{childTreeNodes}
|
|
</TreeNode >
|
|
);
|
|
};
|
|
let elements: JSX.Element[] = [];
|
|
const index = IndexUtil.get(INDEX_ID_PUBLIC);
|
|
if (index !== null) {
|
|
elements.push(makeTreeNode(index, 0));
|
|
}
|
|
return {
|
|
elements: elements,
|
|
keys: keys,
|
|
expandedKeys: eKeys,
|
|
}
|
|
}
|
|
|
|
handleClickOpenAll() {
|
|
this.setState({ expandedKeys: this.state.expandableKeys })
|
|
}
|
|
|
|
handleClickCloseAll() {
|
|
this.setState({ expandedKeys: [] })
|
|
}
|
|
|
|
handleExpand(expandedKeys: string[], e: ExpandData): void {
|
|
this.setState({ expandedKeys });
|
|
}
|
|
|
|
handleSelect(selectedKeys: string[], e: SelectData): void {
|
|
const url = IndexUtil.getUrl(parseInt(e.node.props.eventKey, 10));
|
|
this.props.history.push(url);
|
|
this.setState({ selectedKeys: [] });
|
|
}
|
|
|
|
render() {
|
|
return (
|
|
<div className={styles.container}>
|
|
<button className={styles.formButton} onClick={this.handleClickOpenAll}>open all</button>
|
|
<button className={styles.formButton} onClick={this.handleClickCloseAll}>close all</button>
|
|
<Tree className={styles.indexTree} expandedKeys={this.state.expandedKeys} selectedKeys={this.state.selectedKeys} onExpand={this.handleExpand} onSelect={this.handleSelect} showIcon={false}>
|
|
{this.state.tree}
|
|
</Tree>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default withRouter(IndexTree);
|