mirror of
https://github.com/casdoor/casdoor.git
synced 2025-07-16 10:43:35 +08:00
101 lines
2.8 KiB
JavaScript
101 lines
2.8 KiB
JavaScript
// Copyright 2023 The Casdoor Authors. All Rights Reserved.
|
|
//
|
|
// Licensed under the Apache License, Version 2.0 (the "License");
|
|
// you may not use this file except in compliance with the License.
|
|
// You may obtain a copy of the License at
|
|
//
|
|
// http://www.apache.org/licenses/LICENSE-2.0
|
|
//
|
|
// Unless required by applicable law or agreed to in writing, software
|
|
// distributed under the License is distributed on an "AS IS" BASIS,
|
|
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
|
// See the License for the specific language governing permissions and
|
|
// limitations under the License.
|
|
|
|
import React from "react";
|
|
import {Menu} from "antd";
|
|
import {LayoutOutlined} from "@ant-design/icons";
|
|
|
|
class ChatMenu extends React.Component {
|
|
constructor(props) {
|
|
super(props);
|
|
|
|
const items = this.chatsToItems(this.props.chats);
|
|
const openKeys = items.map((item) => item.key);
|
|
|
|
this.state = {
|
|
openKeys: openKeys,
|
|
selectedKeys: ["0-0"],
|
|
};
|
|
}
|
|
|
|
chatsToItems(chats) {
|
|
const categories = {};
|
|
chats.forEach((chat) => {
|
|
if (!categories[chat.category]) {
|
|
categories[chat.category] = [];
|
|
}
|
|
categories[chat.category].push(chat);
|
|
});
|
|
|
|
return Object.keys(categories).map((category, index) => {
|
|
return {
|
|
key: `${index}`,
|
|
icon: <LayoutOutlined />,
|
|
label: category,
|
|
children: categories[category].map((chat, chatIndex) => {
|
|
const globalChatIndex = chats.indexOf(chat);
|
|
return {
|
|
key: `${index}-${chatIndex}`,
|
|
dataIndex: globalChatIndex,
|
|
label: chat.displayName,
|
|
};
|
|
}),
|
|
};
|
|
});
|
|
}
|
|
|
|
onSelect = (info) => {
|
|
const [categoryIndex, chatIndex] = info.selectedKeys[0].split("-").map(Number);
|
|
const selectedItem = this.chatsToItems(this.props.chats)[categoryIndex].children[chatIndex];
|
|
this.setState({selectedKeys: [`${categoryIndex}-${chatIndex}`]});
|
|
|
|
if (this.props.onSelect) {
|
|
this.props.onSelect(selectedItem.dataIndex);
|
|
}
|
|
};
|
|
|
|
getRootSubmenuKeys(items) {
|
|
return items.map((item, index) => `${index}`);
|
|
}
|
|
|
|
onOpenChange = (keys) => {
|
|
const items = this.chatsToItems(this.props.chats);
|
|
const rootSubmenuKeys = this.getRootSubmenuKeys(items);
|
|
const latestOpenKey = keys.find((key) => this.state.openKeys.indexOf(key) === -1);
|
|
|
|
if (rootSubmenuKeys.indexOf(latestOpenKey) === -1) {
|
|
this.setState({openKeys: keys});
|
|
} else {
|
|
this.setState({openKeys: latestOpenKey ? [latestOpenKey] : []});
|
|
}
|
|
};
|
|
|
|
render() {
|
|
const items = this.chatsToItems(this.props.chats);
|
|
|
|
return (
|
|
<Menu
|
|
mode="inline"
|
|
openKeys={this.state.openKeys}
|
|
selectedKeys={this.state.selectedKeys}
|
|
onOpenChange={this.onOpenChange}
|
|
onSelect={this.onSelect}
|
|
items={items}
|
|
/>
|
|
);
|
|
}
|
|
}
|
|
|
|
export default ChatMenu;
|