TODO: 推翻整个项目重新建立根基
This commit is contained in:
CrescentLeaf
@@ -1,281 +0,0 @@
|
||||
import Client from "../api/Client.ts"
|
||||
import data from "../Data.ts"
|
||||
import ChatFragment from "./chat/ChatFragment.tsx"
|
||||
import useEventListener from './useEventListener.ts'
|
||||
import User from "../api/client_data/User.ts"
|
||||
import Avatar from "./Avatar.tsx"
|
||||
|
||||
import * as React from 'react'
|
||||
import { Dialog, NavigationRail, TextField } from "mdui"
|
||||
import Split from 'split.js'
|
||||
import 'mdui/jsx.zh-cn.d.ts'
|
||||
import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
|
||||
|
||||
import RegisterDialog from "./dialog/RegisterDialog.tsx"
|
||||
import LoginDialog from "./dialog/LoginDialog.tsx"
|
||||
import MyProfileDialog from "./dialog/MyProfileDialog.tsx"
|
||||
import ContactsList from "./main/ContactsList.tsx"
|
||||
import RecentsList from "./main/RecentsList.tsx"
|
||||
import useAsyncEffect from "./useAsyncEffect.ts"
|
||||
import ChatInfoDialog from "./dialog/ChatInfoDialog.tsx"
|
||||
import Chat from "../api/client_data/Chat.ts"
|
||||
import AddContactDialog from './dialog/AddContactDialog.tsx'
|
||||
import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
|
||||
import DataCaches from "../api/DataCaches.ts"
|
||||
import getUrlForFileByHash from "../getUrlForFileByHash.ts"
|
||||
import Message from "../api/client_data/Message.ts"
|
||||
import EventBus from "../EventBus.ts"
|
||||
import AllChatsList from "./main/AllChatsList.tsx";
|
||||
|
||||
declare global {
|
||||
namespace React {
|
||||
namespace JSX {
|
||||
interface IntrinsicAttributes {
|
||||
id?: string
|
||||
slot?: string
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default function App() {
|
||||
const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
|
||||
|
||||
const navigationRailRef = React.useRef<NavigationRail>(null)
|
||||
useEventListener(navigationRailRef, 'change', (event) => {
|
||||
setNavigationItemSelected((event.target as HTMLElement as NavigationRail).value as string)
|
||||
})
|
||||
|
||||
const loginDialogRef = React.useRef<Dialog>(null)
|
||||
const loginInputAccountRef = React.useRef<TextField>(null)
|
||||
const loginInputPasswordRef = React.useRef<TextField>(null)
|
||||
|
||||
const registerDialogRef = React.useRef<Dialog>(null)
|
||||
const registerInputUserNameRef = React.useRef<TextField>(null)
|
||||
const registerInputNickNameRef = React.useRef<TextField>(null)
|
||||
const registerInputPasswordRef = React.useRef<TextField>(null)
|
||||
|
||||
const myProfileDialogRef = React.useRef<Dialog>(null)
|
||||
const openMyProfileDialogButtonRef = React.useRef<HTMLElement>(null)
|
||||
useEventListener(openMyProfileDialogButtonRef, 'click', (_event) => {
|
||||
myProfileDialogRef.current!.open = true
|
||||
})
|
||||
|
||||
const addContactDialogRef = React.useRef<Dialog>(null)
|
||||
const createGroupDialogRef = React.useRef<Dialog>(null)
|
||||
|
||||
const chatInfoDialogRef = React.useRef<Dialog>(null)
|
||||
const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
|
||||
|
||||
const [myUserProfileCache, setMyUserProfileCache] = React.useState(null as unknown as User)
|
||||
|
||||
const [isShowChatFragment, setIsShowChatFragment] = React.useState(false)
|
||||
|
||||
const [currentChatId, setCurrentChatId] = React.useState('')
|
||||
|
||||
const [sharedFavouriteChats, setSharedFavouriteChats] = React.useState<Chat[]>([])
|
||||
|
||||
useAsyncEffect(async () => {
|
||||
const split = Split(['#SideBar', '#ChatFragment'], {
|
||||
sizes: data.split_sizes ? data.split_sizes : [25, 75],
|
||||
minSize: [200, 400],
|
||||
gutterSize: 2,
|
||||
onDragEnd: function () {
|
||||
data.split_sizes = split.getSizes()
|
||||
data.apply()
|
||||
}
|
||||
})
|
||||
|
||||
Client.connect()
|
||||
const re = await Client.auth(data.access_token || "")
|
||||
if (re.code == 401)
|
||||
loginDialogRef.current!.open = true
|
||||
else if (re.code != 200) {
|
||||
if (checkApiSuccessOrSncakbar(re, "验证失败")) return
|
||||
} else if (re.code == 200) {
|
||||
setMyUserProfileCache(Client.myUserProfile as User)
|
||||
}
|
||||
})
|
||||
|
||||
function openChatInfoDialog(chat: Chat) {
|
||||
setChatInfo(chat)
|
||||
chatInfoDialogRef.current!.open = true
|
||||
}
|
||||
|
||||
function openChatFragment(chatId: string) {
|
||||
setCurrentChatId(chatId)
|
||||
setIsShowChatFragment(true)
|
||||
}
|
||||
|
||||
async function openUserInfoDialog(user: User | string) {
|
||||
const re = await Client.invoke("Chat.getIdForPrivate", {
|
||||
token: data.access_token,
|
||||
target: typeof user == 'object' ? user.id : user,
|
||||
})
|
||||
if (re.code != 200) {
|
||||
checkApiSuccessOrSncakbar(re, '获取对话失败')
|
||||
return
|
||||
}
|
||||
|
||||
openChatInfoDialog(re.data as Chat)
|
||||
/* if (typeof user == 'object') {
|
||||
setUserInfo(user)
|
||||
} else {
|
||||
setUserInfo(await DataCaches.getUserProfile(user))
|
||||
|
||||
}
|
||||
userProfileDialogRef.current!.open = true */
|
||||
}
|
||||
// deno-lint-ignore no-window
|
||||
window.openUserInfoDialog = openUserInfoDialog
|
||||
// deno-lint-ignore no-window
|
||||
window.openChatInfoDialog = openChatInfoDialog
|
||||
|
||||
if ('Notification' in window) {
|
||||
Notification.requestPermission()
|
||||
React.useEffect(() => {
|
||||
interface OnMessageData {
|
||||
chat: string
|
||||
msg: Message
|
||||
}
|
||||
async function onMessage(_event: unknown) {
|
||||
EventBus.emit('RecentsList.updateRecents')
|
||||
|
||||
const event = _event as OnMessageData
|
||||
if (currentChatId != event.chat) {
|
||||
const chat = await DataCaches.getChatInfo(event.chat)
|
||||
const user = await DataCaches.getUserProfile(event.msg.user_id)
|
||||
const notification = new Notification(`${user.nickname} (对话: ${chat.title})`, {
|
||||
icon: getUrlForFileByHash(chat.avatar_file_hash),
|
||||
body: event.msg.text,
|
||||
})
|
||||
notification.addEventListener('click', () => {
|
||||
setCurrentChatId(chat.id)
|
||||
setIsShowChatFragment(true)
|
||||
notification.close()
|
||||
})
|
||||
}
|
||||
}
|
||||
Client.on('Client.onMessage', onMessage)
|
||||
return () => {
|
||||
Client.off('Client.onMessage', onMessage)
|
||||
}
|
||||
}, [currentChatId])
|
||||
}
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
display: "flex",
|
||||
position: 'relative',
|
||||
width: 'calc(var(--whitesilk-window-width) - 80px)',
|
||||
height: 'var(--whitesilk-window-height)',
|
||||
}}>
|
||||
<LoginDialog
|
||||
loginDialogRef={loginDialogRef}
|
||||
loginInputAccountRef={loginInputAccountRef}
|
||||
loginInputPasswordRef={loginInputPasswordRef}
|
||||
registerDialogRef={registerDialogRef} />
|
||||
|
||||
<RegisterDialog
|
||||
registerDialogRef={registerDialogRef}
|
||||
registerInputUserNameRef={registerInputUserNameRef}
|
||||
registerInputNickNameRef={registerInputNickNameRef}
|
||||
registerInputPasswordRef={registerInputPasswordRef}
|
||||
loginInputAccountRef={loginInputAccountRef}
|
||||
loginInputPasswordRef={loginInputPasswordRef} />
|
||||
|
||||
<ChatInfoDialog
|
||||
chatInfoDialogRef={chatInfoDialogRef as any}
|
||||
openChatFragment={openChatFragment}
|
||||
sharedFavouriteChats={sharedFavouriteChats}
|
||||
chat={chatInfo} />
|
||||
|
||||
<MyProfileDialog
|
||||
myProfileDialogRef={myProfileDialogRef as any}
|
||||
user={myUserProfileCache} />
|
||||
|
||||
<AddContactDialog
|
||||
addContactDialogRef={addContactDialogRef} />
|
||||
|
||||
<CreateGroupDialog
|
||||
createGroupDialogRef={createGroupDialogRef} />
|
||||
|
||||
<mdui-navigation-rail contained value="Recents" ref={navigationRailRef}>
|
||||
<mdui-button-icon slot="top">
|
||||
<Avatar src={getUrlForFileByHash(myUserProfileCache?.avatar_file_hash)} text={myUserProfileCache?.nickname} avatarRef={openMyProfileDialogButtonRef} />
|
||||
</mdui-button-icon>
|
||||
|
||||
<mdui-navigation-rail-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents"></mdui-navigation-rail-item>
|
||||
<mdui-navigation-rail-item icon="favorite_border" active-icon="favorite" value="Contacts"></mdui-navigation-rail-item>
|
||||
<mdui-navigation-rail-item icon="chat--outlined" active-icon="chat--filled" value="AllChats"></mdui-navigation-rail-item>
|
||||
|
||||
<mdui-button-icon icon="refresh" slot="bottom" onClick={() => {
|
||||
EventBus.emit('RecentsList.updateRecents')
|
||||
EventBus.emit('ContactsList.updateContacts')
|
||||
EventBus.emit('AllChatsList.updateAllChats')
|
||||
}}></mdui-button-icon>
|
||||
<mdui-dropdown trigger="hover" slot="bottom">
|
||||
<mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
|
||||
<mdui-menu>
|
||||
<mdui-menu-item icon="person_add" onClick={() => addContactDialogRef.current!.open = true}>添加收藏对话</mdui-menu-item>
|
||||
<mdui-menu-item icon="group_add" onClick={() => createGroupDialogRef.current!.open = true}>创建群组</mdui-menu-item>
|
||||
</mdui-menu>
|
||||
</mdui-dropdown>
|
||||
<mdui-button-icon icon="settings" slot="bottom"></mdui-button-icon>
|
||||
</mdui-navigation-rail>
|
||||
{
|
||||
// 侧边列表
|
||||
}
|
||||
<div id="SideBar">
|
||||
{
|
||||
// 最近聊天
|
||||
<RecentsList
|
||||
openChatFragment={openChatFragment}
|
||||
display={navigationItemSelected == "Recents"}
|
||||
currentChatId={currentChatId} />
|
||||
}
|
||||
{
|
||||
// 最近聊天
|
||||
<AllChatsList
|
||||
openChatInfoDialog={openChatInfoDialog}
|
||||
display={navigationItemSelected == "AllChats"}
|
||||
currentChatId={currentChatId} />
|
||||
}
|
||||
{
|
||||
// 對話列表
|
||||
<ContactsList
|
||||
currentChatId={currentChatId}
|
||||
openChatInfoDialog={openChatInfoDialog}
|
||||
setSharedFavouriteChats={setSharedFavouriteChats}
|
||||
addContactDialogRef={addContactDialogRef as any}
|
||||
createGroupDialogRef={createGroupDialogRef as any}
|
||||
display={navigationItemSelected == "Contacts"} />
|
||||
}
|
||||
</div>
|
||||
{
|
||||
// 聊天页面
|
||||
}
|
||||
<div id="ChatFragment" style={{
|
||||
display: "flex",
|
||||
width: '100%'
|
||||
}}>
|
||||
{
|
||||
!isShowChatFragment && <div style={{
|
||||
width: '100%',
|
||||
textAlign: 'center',
|
||||
alignSelf: 'center',
|
||||
}}>
|
||||
选择以开始对话......
|
||||
</div>
|
||||
}
|
||||
{
|
||||
isShowChatFragment && <ChatFragment
|
||||
target={currentChatId}
|
||||
openUserInfoDialog={openUserInfoDialog}
|
||||
openChatInfoDialog={openChatInfoDialog}
|
||||
key={currentChatId} />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,275 +0,0 @@
|
||||
import Client from "../api/Client.ts"
|
||||
import data from "../Data.ts"
|
||||
import ChatFragment from "./chat/ChatFragment.tsx"
|
||||
import useEventListener from './useEventListener.ts'
|
||||
import User from "../api/client_data/User.ts"
|
||||
import Avatar from "./Avatar.tsx"
|
||||
|
||||
import * as React from 'react'
|
||||
import { Dialog, NavigationBar, TextField } from "mdui"
|
||||
import 'mdui/jsx.zh-cn.d.ts'
|
||||
import { checkApiSuccessOrSncakbar } from "./snackbar.ts"
|
||||
|
||||
import RegisterDialog from "./dialog/RegisterDialog.tsx"
|
||||
import LoginDialog from "./dialog/LoginDialog.tsx"
|
||||
import MyProfileDialog from "./dialog/MyProfileDialog.tsx"
|
||||
import ContactsList from "./main/ContactsList.tsx"
|
||||
import RecentsList from "./main/RecentsList.tsx"
|
||||
import useAsyncEffect from "./useAsyncEffect.ts"
|
||||
import ChatInfoDialog from "./dialog/ChatInfoDialog.tsx"
|
||||
import Chat from "../api/client_data/Chat.ts"
|
||||
import AddContactDialog from './dialog/AddContactDialog.tsx'
|
||||
import CreateGroupDialog from './dialog/CreateGroupDialog.tsx'
|
||||
import getUrlForFileByHash from "../getUrlForFileByHash.ts"
|
||||
import AllChatsList from "./main/AllChatsList.tsx";
|
||||
import EventBus from "../EventBus.ts";
|
||||
|
||||
declare global {
|
||||
namespace React {
|
||||
namespace JSX {
|
||||
interface IntrinsicAttributes {
|
||||
id?: string
|
||||
slot?: string
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default function AppMobile() {
|
||||
const [navigationItemSelected, setNavigationItemSelected] = React.useState('Recents')
|
||||
|
||||
const navigationBarRef = React.useRef<NavigationBar>(null)
|
||||
useEventListener(navigationBarRef, 'change', (event) => {
|
||||
setNavigationItemSelected((event.target as HTMLElement as NavigationBar).value as string)
|
||||
})
|
||||
|
||||
const loginDialogRef = React.useRef<Dialog>(null)
|
||||
const loginInputAccountRef = React.useRef<TextField>(null)
|
||||
const loginInputPasswordRef = React.useRef<TextField>(null)
|
||||
|
||||
const registerDialogRef = React.useRef<Dialog>(null)
|
||||
const registerInputUserNameRef = React.useRef<TextField>(null)
|
||||
const registerInputNickNameRef = React.useRef<TextField>(null)
|
||||
const registerInputPasswordRef = React.useRef<TextField>(null)
|
||||
|
||||
const myProfileDialogRef = React.useRef<Dialog>(null)
|
||||
const openMyProfileDialogButtonRef = React.useRef<HTMLElement>(null)
|
||||
useEventListener(openMyProfileDialogButtonRef, 'click', (_event) => {
|
||||
myProfileDialogRef.current!.open = true
|
||||
})
|
||||
|
||||
const addContactDialogRef = React.useRef<Dialog>(null)
|
||||
const createGroupDialogRef = React.useRef<Dialog>(null)
|
||||
|
||||
const chatInfoDialogRef = React.useRef<Dialog>(null)
|
||||
const [chatInfo, setChatInfo] = React.useState(null as unknown as Chat)
|
||||
|
||||
const [myUserProfileCache, setMyUserProfileCache] = React.useState(null as unknown as User)
|
||||
|
||||
const [isShowChatFragment, setIsShowChatFragment] = React.useState(false)
|
||||
|
||||
const [currentChatId, setCurrentChatId] = React.useState('')
|
||||
|
||||
const [sharedFavouriteChats, setSharedFavouriteChats] = React.useState<Chat[]>([])
|
||||
|
||||
const chatFragmentDialogRef = React.useRef<Dialog>(null)
|
||||
React.useEffect(() => {
|
||||
const shadow = chatFragmentDialogRef.current!.shadowRoot as ShadowRoot
|
||||
const panel = shadow.querySelector(".panel") as HTMLElement
|
||||
panel.style.padding = '0'
|
||||
panel.style.color = 'inherit'
|
||||
panel.style.backgroundColor = 'rgb(var(--mdui-color-background))'
|
||||
panel.style.setProperty('--mdui-color-background', 'inherit')
|
||||
const body = shadow.querySelector(".body") as HTMLElement
|
||||
body.style.height = '100%'
|
||||
body.style.display = 'flex'
|
||||
})
|
||||
|
||||
useAsyncEffect(async () => {
|
||||
Client.connect()
|
||||
const re = await Client.auth(data.access_token || "")
|
||||
if (re.code == 401)
|
||||
loginDialogRef.current!.open = true
|
||||
else if (re.code != 200) {
|
||||
if (checkApiSuccessOrSncakbar(re, "验证失败")) return
|
||||
} else if (re.code == 200) {
|
||||
setMyUserProfileCache(Client.myUserProfile as User)
|
||||
}
|
||||
})
|
||||
|
||||
function openChatInfoDialog(chat: Chat) {
|
||||
setChatInfo(chat)
|
||||
chatInfoDialogRef.current!.open = true
|
||||
}
|
||||
|
||||
function openChatFragment(chatId: string) {
|
||||
setCurrentChatId(chatId)
|
||||
setIsShowChatFragment(true)
|
||||
}
|
||||
|
||||
async function openUserInfoDialog(user: User | string) {
|
||||
const re = await Client.invoke("Chat.getIdForPrivate", {
|
||||
token: data.access_token,
|
||||
target: typeof user == 'object' ? user.id : user,
|
||||
})
|
||||
if (re.code != 200) {
|
||||
checkApiSuccessOrSncakbar(re, '获取对话失败')
|
||||
return
|
||||
}
|
||||
|
||||
openChatInfoDialog(re.data as Chat)
|
||||
/* if (typeof user == 'object') {
|
||||
setUserInfo(user)
|
||||
} else {
|
||||
setUserInfo(await DataCaches.getUserProfile(user))
|
||||
|
||||
}
|
||||
userProfileDialogRef.current!.open = true */
|
||||
}
|
||||
// deno-lint-ignore no-window
|
||||
window.openUserInfoDialog = openUserInfoDialog
|
||||
// deno-lint-ignore no-window
|
||||
window.openChatInfoDialog = openChatInfoDialog
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
display: "flex",
|
||||
position: 'relative',
|
||||
flexDirection: 'column',
|
||||
width: 'var(--whitesilk-window-width)',
|
||||
height: 'var(--whitesilk-window-height)',
|
||||
}}>
|
||||
<mdui-dialog fullscreen open={isShowChatFragment} ref={chatFragmentDialogRef}>
|
||||
{
|
||||
// 聊天页面
|
||||
}
|
||||
<div id="ChatFragment" style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}}>
|
||||
<ChatFragment
|
||||
showReturnButton={true}
|
||||
openUserInfoDialog={openUserInfoDialog}
|
||||
onReturnButtonClicked={() => setIsShowChatFragment(false)}
|
||||
key={currentChatId}
|
||||
openChatInfoDialog={openChatInfoDialog}
|
||||
target={currentChatId} />
|
||||
</div>
|
||||
</mdui-dialog>
|
||||
|
||||
<LoginDialog
|
||||
loginDialogRef={loginDialogRef}
|
||||
loginInputAccountRef={loginInputAccountRef}
|
||||
loginInputPasswordRef={loginInputPasswordRef}
|
||||
registerDialogRef={registerDialogRef} />
|
||||
|
||||
<RegisterDialog
|
||||
registerDialogRef={registerDialogRef}
|
||||
registerInputUserNameRef={registerInputUserNameRef}
|
||||
registerInputNickNameRef={registerInputNickNameRef}
|
||||
registerInputPasswordRef={registerInputPasswordRef}
|
||||
loginInputAccountRef={loginInputAccountRef}
|
||||
loginInputPasswordRef={loginInputPasswordRef} />
|
||||
|
||||
<ChatInfoDialog
|
||||
chatInfoDialogRef={chatInfoDialogRef as any}
|
||||
sharedFavouriteChats={sharedFavouriteChats}
|
||||
openChatFragment={(id) => {
|
||||
setCurrentChatId(id)
|
||||
setIsShowChatFragment(true)
|
||||
}}
|
||||
chat={chatInfo} />
|
||||
|
||||
<MyProfileDialog
|
||||
myProfileDialogRef={myProfileDialogRef as any}
|
||||
user={myUserProfileCache} />
|
||||
|
||||
<AddContactDialog
|
||||
addContactDialogRef={addContactDialogRef} />
|
||||
|
||||
<CreateGroupDialog
|
||||
createGroupDialogRef={createGroupDialogRef} />
|
||||
|
||||
<mdui-top-app-bar style={{
|
||||
position: 'sticky',
|
||||
marginTop: '3px',
|
||||
marginRight: '6px',
|
||||
marginLeft: '15px',
|
||||
top: '0px',
|
||||
}}>
|
||||
<mdui-top-app-bar-title>{
|
||||
({
|
||||
Recents: "最近对话",
|
||||
Contacts: "收藏对话",
|
||||
AllChats: "所有对话",
|
||||
})[navigationItemSelected]
|
||||
}</mdui-top-app-bar-title>
|
||||
<div style={{
|
||||
flexGrow: 1,
|
||||
}}></div>
|
||||
<mdui-button-icon icon="refresh" onClick={() => {
|
||||
EventBus.emit('RecentsList.updateRecents')
|
||||
EventBus.emit('ContactsList.updateContacts')
|
||||
EventBus.emit('AllChatsList.updateAllChats')
|
||||
}} style={{
|
||||
margin: "0",
|
||||
}}></mdui-button-icon>
|
||||
<mdui-dropdown trigger="hover">
|
||||
<mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
|
||||
<mdui-menu>
|
||||
<mdui-menu-item icon="person_add" onClick={() => addContactDialogRef.current!.open = true}>添加收藏对话</mdui-menu-item>
|
||||
<mdui-menu-item icon="group_add" onClick={() => createGroupDialogRef.current!.open = true}>创建群组</mdui-menu-item>
|
||||
</mdui-menu>
|
||||
</mdui-dropdown>
|
||||
<mdui-button-icon icon="settings"></mdui-button-icon>
|
||||
<mdui-button-icon>
|
||||
<Avatar src={getUrlForFileByHash(myUserProfileCache?.avatar_file_hash)} text={myUserProfileCache?.nickname} avatarRef={openMyProfileDialogButtonRef} />
|
||||
</mdui-button-icon>
|
||||
</mdui-top-app-bar>
|
||||
{
|
||||
// 侧边列表
|
||||
}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
height: 'calc(100% - 80px - 67px)',
|
||||
width: '100%',
|
||||
}} id="SideBar">
|
||||
{
|
||||
// 最近聊天
|
||||
<RecentsList
|
||||
openChatFragment={(id) => {
|
||||
setCurrentChatId(id)
|
||||
setIsShowChatFragment(true)
|
||||
}}
|
||||
display={navigationItemSelected == "Recents"}
|
||||
currentChatId={currentChatId} />
|
||||
}
|
||||
{
|
||||
// 最近聊天
|
||||
<AllChatsList
|
||||
openChatInfoDialog={openChatInfoDialog}
|
||||
display={navigationItemSelected == "AllChats"}
|
||||
currentChatId={currentChatId} />
|
||||
}
|
||||
{
|
||||
// 對話列表
|
||||
<ContactsList
|
||||
currentChatId={currentChatId}
|
||||
openChatInfoDialog={openChatInfoDialog}
|
||||
setSharedFavouriteChats={setSharedFavouriteChats}
|
||||
addContactDialogRef={addContactDialogRef as any}
|
||||
createGroupDialogRef={createGroupDialogRef as any}
|
||||
display={navigationItemSelected == "Contacts"} />
|
||||
}
|
||||
</div>
|
||||
<mdui-navigation-bar label-visibility="selected" value="Recents" ref={navigationBarRef} style={{
|
||||
position: 'sticky',
|
||||
bottom: '0',
|
||||
}}>
|
||||
<mdui-navigation-bar-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents">最近对话</mdui-navigation-bar-item>
|
||||
<mdui-navigation-bar-item icon="favorite_border" active-icon="favorite" value="Contacts">收藏对话</mdui-navigation-bar-item>
|
||||
<mdui-navigation-bar-item icon="chat--outlined" active-icon="chat--filled" value="AllChats">全部对话</mdui-navigation-bar-item>
|
||||
</mdui-navigation-bar>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
31
client/ui/AvatarMySelf.tsx
Normal file
31
client/ui/AvatarMySelf.tsx
Normal file
@@ -0,0 +1,31 @@
|
||||
import { UserMySelf } from "lingchair-client-protocol"
|
||||
import useAsyncEffect from "../utils/useAsyncEffect.ts"
|
||||
import Avatar from "./Avatar.tsx"
|
||||
import getClient from "../getClient.ts"
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
avatarRef?: React.LegacyRef<HTMLElement>
|
||||
}
|
||||
export default function AvatarMySelf({
|
||||
avatarRef,
|
||||
...props
|
||||
}: Args) {
|
||||
if (!avatarRef) avatarRef = React.useRef<HTMLElement>(null)
|
||||
const [args, setArgs] = React.useState<{
|
||||
text: string,
|
||||
src: string,
|
||||
}>({
|
||||
text: '',
|
||||
src: '',
|
||||
})
|
||||
|
||||
useAsyncEffect(async () => {
|
||||
const mySelf = await UserMySelf.getMySelfOrThrow(getClient())
|
||||
setArgs({
|
||||
text: mySelf.getNickName(),
|
||||
src: getClient().getUrlForFileByHash(mySelf.getAvatarFileHash(), '')!
|
||||
})
|
||||
})
|
||||
|
||||
return <Avatar avatarRef={avatarRef} {...props} {...args}></Avatar>
|
||||
}
|
||||
103
client/ui/Main.tsx
Normal file
103
client/ui/Main.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
import isMobileUI from "../utils/isMobileUI.ts"
|
||||
import AvatarMySelf from "./AvatarMySelf.tsx"
|
||||
import MainSharedContext from './MainSharedContext.ts'
|
||||
|
||||
export default function Main() {
|
||||
const sharedContext = {
|
||||
openChatFragment: React.useRef()
|
||||
}
|
||||
return (
|
||||
<MainSharedContext.Provider value={{}}>
|
||||
<div style={{
|
||||
display: "flex",
|
||||
position: 'relative',
|
||||
width: 'calc(var(--whitesilk-window-width) - 80px)',
|
||||
height: 'var(--whitesilk-window-height)',
|
||||
}}>
|
||||
{
|
||||
/**
|
||||
* Default: 侧边列表提供列表切换
|
||||
*/
|
||||
!isMobileUI() ?
|
||||
<mdui-navigation-rail contained value="Recents">
|
||||
<mdui-button-icon slot="top">
|
||||
<AvatarMySelf />
|
||||
</mdui-button-icon>
|
||||
|
||||
<mdui-navigation-rail-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents"></mdui-navigation-rail-item>
|
||||
<mdui-navigation-rail-item icon="favorite_border" active-icon="favorite" value="Contacts"></mdui-navigation-rail-item>
|
||||
<mdui-navigation-rail-item icon="chat--outlined" active-icon="chat--filled" value="AllChats"></mdui-navigation-rail-item>
|
||||
|
||||
|
||||
<mdui-dropdown trigger="hover" slot="bottom">
|
||||
<mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
|
||||
<mdui-menu>
|
||||
<mdui-menu-item icon="person_add">添加收藏对话</mdui-menu-item>
|
||||
<mdui-menu-item icon="group_add">创建群组</mdui-menu-item>
|
||||
</mdui-menu>
|
||||
</mdui-dropdown>
|
||||
</mdui-navigation-rail>
|
||||
/**
|
||||
* Mobile: 底部导航栏提供列表切换
|
||||
*/
|
||||
: <mdui-top-app-bar style={{
|
||||
position: 'sticky',
|
||||
marginTop: '3px',
|
||||
marginRight: '6px',
|
||||
marginLeft: '15px',
|
||||
top: '0px',
|
||||
}}>
|
||||
<mdui-top-app-bar-title>{
|
||||
({
|
||||
Recents: "最近对话",
|
||||
Contacts: "收藏对话",
|
||||
AllChats: "所有对话",
|
||||
})['Recents']
|
||||
}</mdui-top-app-bar-title>
|
||||
<div style={{
|
||||
flexGrow: 1,
|
||||
}}></div>
|
||||
<mdui-dropdown trigger="hover">
|
||||
<mdui-button-icon icon="add" slot="trigger"></mdui-button-icon>
|
||||
<mdui-menu>
|
||||
<mdui-menu-item icon="person_add">添加收藏对话</mdui-menu-item>
|
||||
<mdui-menu-item icon="group_add">创建群组</mdui-menu-item>
|
||||
</mdui-menu>
|
||||
</mdui-dropdown>
|
||||
<mdui-button-icon icon="settings"></mdui-button-icon>
|
||||
<mdui-button-icon>
|
||||
<AvatarMySelf />
|
||||
</mdui-button-icon>
|
||||
</mdui-top-app-bar>
|
||||
}
|
||||
{
|
||||
/**
|
||||
* Mobile: 指定高度的容器
|
||||
* Default: 侧边列表
|
||||
*/
|
||||
<div style={isMobileUI() ? {
|
||||
display: 'flex',
|
||||
height: 'calc(100% - 80px - 67px)',
|
||||
width: '100%',
|
||||
} : {}} id="SideBar">
|
||||
|
||||
</div>
|
||||
}
|
||||
{
|
||||
/**
|
||||
* Mobile: 底部导航栏提供列表切换
|
||||
* Default: 侧边列表提供列表切换
|
||||
*/
|
||||
isMobileUI() && <mdui-navigation-bar label-visibility="selected" value="Recents" style={{
|
||||
position: 'sticky',
|
||||
bottom: '0',
|
||||
}}>
|
||||
<mdui-navigation-bar-item icon="watch_later--outlined" active-icon="watch_later--filled" value="Recents">最近对话</mdui-navigation-bar-item>
|
||||
<mdui-navigation-bar-item icon="favorite_border" active-icon="favorite" value="Contacts">收藏对话</mdui-navigation-bar-item>
|
||||
<mdui-navigation-bar-item icon="chat--outlined" active-icon="chat--filled" value="AllChats">全部对话</mdui-navigation-bar-item>
|
||||
</mdui-navigation-bar>
|
||||
}
|
||||
</div>
|
||||
</MainSharedContext.Provider>
|
||||
)
|
||||
}
|
||||
5
client/ui/MainSharedContext.ts
Normal file
5
client/ui/MainSharedContext.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
import { createContext } from 'react'
|
||||
|
||||
const MainSharedContext = createContext({})
|
||||
|
||||
export default MainSharedContext
|
||||
@@ -1,18 +0,0 @@
|
||||
import * as React from 'react'
|
||||
import { $, TextField } from "mdui"
|
||||
|
||||
interface Args extends React.HTMLAttributes<TextField & HTMLElement> {
|
||||
|
||||
}
|
||||
|
||||
export default function TextFieldCustom({ ...prop }: Args) {
|
||||
// deno-lint-ignore no-explicit-any
|
||||
const textField = React.useRef<any>(null)
|
||||
|
||||
React.useEffect(() => {
|
||||
const shadow = (textField.current as TextField).shadowRoot
|
||||
// $(shadow).find('textarea')
|
||||
})
|
||||
|
||||
return <mdui-text-field {...prop} ref={textField}></mdui-text-field>
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import openImageViewer from "../openImageViewer.ts"
|
||||
import openImageViewer from "../../utils/openImageViewer.ts"
|
||||
|
||||
import { $ } from 'mdui/jq'
|
||||
|
||||
@@ -56,37 +56,3 @@ customElements.define('chat-image', class extends HTMLElement {
|
||||
this.update()
|
||||
}
|
||||
})
|
||||
|
||||
document.body.appendChild(new DOMParser().parseFromString(`
|
||||
<mdui-dialog id="image-viewer-dialog" fullscreen="fullscreen">
|
||||
<style>
|
||||
#image-viewer-dialog::part(panel) {
|
||||
background: rgba(0, 0, 0, 0) !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
#image-viewer-dialog>mdui-button-icon[icon=close] {
|
||||
z-index: 114514;
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
right: 15px;
|
||||
color: #ffffff
|
||||
}
|
||||
|
||||
#image-viewer-dialog>mdui-button-icon[icon=open_in_new] {
|
||||
z-index: 114514;
|
||||
position: fixed;
|
||||
top: 15px;
|
||||
right: 65px;
|
||||
color: #ffffff
|
||||
}
|
||||
</style>
|
||||
<mdui-button-icon icon="open_in_new"
|
||||
onclick="window.open(document.querySelector('#image-viewer-dialog-inner > *').src, '_blank')">
|
||||
</mdui-button-icon>
|
||||
<mdui-button-icon icon="close" onclick="this.parentNode.open = false">
|
||||
</mdui-button-icon>
|
||||
<pinch-zoom id="image-viewer-dialog-inner" style="width: var(--whitesilk-window-width); height: var(--whitesilk-window-height);">
|
||||
</pinch-zoom>
|
||||
</mdui-dialog>
|
||||
`, 'text/html').body.firstChild as Node)
|
||||
@@ -1,7 +1,5 @@
|
||||
import { $ } from 'mdui'
|
||||
import DataCaches from "../../api/DataCaches.ts"
|
||||
import { snackbar } from "../snackbar.ts"
|
||||
|
||||
import showSnackbar from "../../utils/showSnackbar.ts";
|
||||
customElements.define('chat-mention', class extends HTMLElement {
|
||||
declare link: HTMLAnchorElement
|
||||
static observedAttributes = ['user-id']
|
||||
@@ -32,20 +30,18 @@ customElements.define('chat-mention', class extends HTMLElement {
|
||||
const text = $(this).attr('text')
|
||||
this.link.style.fontStyle = ''
|
||||
if (chatId) {
|
||||
const chat = await DataCaches.getChatInfo(chatId)
|
||||
this.link.textContent = chat?.title
|
||||
|
||||
this.link.onclick = (e) => {
|
||||
e.stopPropagation()
|
||||
// deno-lint-ignore no-window
|
||||
window.openChatInfoDialog(chat)
|
||||
|
||||
}
|
||||
} else if (userId) {
|
||||
const user = await DataCaches.getUserProfile(userId)
|
||||
this.link.textContent = user?.nickname
|
||||
|
||||
this.link.onclick = (e) => {
|
||||
e.stopPropagation()
|
||||
// deno-lint-ignore no-window
|
||||
window.openUserInfoDialog(user)
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@@ -55,9 +51,8 @@ customElements.define('chat-mention', class extends HTMLElement {
|
||||
this.link.style.fontStyle = 'italic'
|
||||
this.link.onclick = (e) => {
|
||||
e.stopPropagation()
|
||||
snackbar({
|
||||
showSnackbar({
|
||||
message: "该提及没有指定用户或者对话！",
|
||||
placement: 'top',
|
||||
})
|
||||
}
|
||||
}
|
||||
@@ -1,730 +0,0 @@
|
||||
import { Tab, Tabs, TextField } from "mdui"
|
||||
import { $ } from "mdui/jq"
|
||||
import useEventListener from "../useEventListener.ts"
|
||||
import Element_Message from "./Message.tsx"
|
||||
import MessageContainer from "./MessageContainer.tsx"
|
||||
|
||||
import * as React from 'react'
|
||||
import Client from "../../api/Client.ts"
|
||||
import Message from "../../api/client_data/Message.ts"
|
||||
import Chat from "../../api/client_data/Chat.ts"
|
||||
import data from "../../Data.ts"
|
||||
import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
|
||||
import useAsyncEffect from "../useAsyncEffect.ts"
|
||||
import * as marked from 'marked'
|
||||
import DOMPurify from 'dompurify'
|
||||
import randomUUID from "../../randomUUID.ts"
|
||||
import EventBus from "../../EventBus.ts"
|
||||
import User from "../../api/client_data/User.ts"
|
||||
|
||||
import PreferenceLayout from '../preference/PreferenceLayout.tsx'
|
||||
import PreferenceHeader from '../preference/PreferenceHeader.tsx'
|
||||
import PreferenceStore from '../preference/PreferenceStore.ts'
|
||||
import SwitchPreference from '../preference/SwitchPreference.tsx'
|
||||
import SelectPreference from '../preference/SelectPreference.tsx'
|
||||
import TextFieldPreference from '../preference/TextFieldPreference.tsx'
|
||||
import Preference from '../preference/Preference.tsx'
|
||||
import GroupSettings from "../../api/client_data/GroupSettings.ts"
|
||||
import PreferenceUpdater from "../preference/PreferenceUpdater.ts"
|
||||
import SystemMessage from "./SystemMessage.tsx"
|
||||
import JoinRequestsList from "./JoinRequestsList.tsx"
|
||||
import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
|
||||
import escapeHTML from "../../escapeHtml.ts"
|
||||
import GroupMembersList from "./GroupMembersList.tsx"
|
||||
import isMobileUI from "../isMobileUI.ts"
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
target: string
|
||||
showReturnButton?: boolean
|
||||
openChatInfoDialog: (chat: Chat) => void
|
||||
onReturnButtonClicked?: () => void
|
||||
openUserInfoDialog: (user: User | string) => void
|
||||
}
|
||||
|
||||
const sanitizeConfig = {
|
||||
ALLOWED_TAGS: [
|
||||
"chat-image",
|
||||
"chat-video",
|
||||
"chat-file",
|
||||
'chat-text',
|
||||
"chat-link",
|
||||
'chat-mention',
|
||||
'chat-quote',
|
||||
],
|
||||
ALLOWED_ATTR: [
|
||||
'underline',
|
||||
'em',
|
||||
'src',
|
||||
'alt',
|
||||
'href',
|
||||
'name',
|
||||
'user-id',
|
||||
'chat-id',
|
||||
],
|
||||
}
|
||||
|
||||
const markedInstance = new marked.Marked({
|
||||
renderer: {
|
||||
blockquote({ text }) {
|
||||
return `<chat-quote>${escapeHTML(text)}</chat-quote>`
|
||||
},
|
||||
text({ text }) {
|
||||
return `<chat-text>${escapeHTML(text)}</chat-text>`
|
||||
},
|
||||
em({ text }) {
|
||||
return `<chat-text em="true">${escapeHTML(text)}</chat-text>`
|
||||
},
|
||||
heading({ tokens, depth: _depth }) {
|
||||
const text = this.parser.parseInline(tokens)
|
||||
return `<chat-text>${escapeHTML(text)}</chat-text>`
|
||||
},
|
||||
image({ text, href }) {
|
||||
const type = /^(Video|File|UserMention|ChatMention)=.*/.exec(text)?.[1]
|
||||
const fileType = /^(Video|File)=.*/.exec(text)?.[1] || 'Image'
|
||||
if (fileType != null && /tws:\/\/file\?hash=[A-Za-z0-9]+$/.test(href)) {
|
||||
const url = getUrlForFileByHash(/^tws:\/\/file\?hash=(.*)/.exec(href)?.[1])
|
||||
return ({
|
||||
Image: `<chat-image src="${url}" alt="${escapeHTML(text)}"></chat-image>`,
|
||||
Video: `<chat-video src="${url}"></chat-video>`,
|
||||
File: `<chat-file href="${url}" name="${escapeHTML(/^Video|File=(.*)/.exec(text)?.[1] || 'Unnamed file')}"></chat-file>`,
|
||||
})?.[fileType] || ``
|
||||
} else
|
||||
switch (type) {
|
||||
case "UserMention":
|
||||
return `<chat-mention user-id="${escapeHTML(/^tws:\/\/user\?id=(.*)/.exec(href)?.[1] || '')}" text="${escapeHTML(/^UserMention=(.*)/.exec(text)?.[1] || '')}">PH</chat-mention>`
|
||||
case "ChatMention":
|
||||
return `<chat-mention chat-id="${escapeHTML(/^tws:\/\/chat\?id=(.*)/.exec(href)?.[1] || '')}" text="${escapeHTML(/^ChatMention=(.*)/.exec(text)?.[1] || '')}">PH</chat-mention>`
|
||||
}
|
||||
return `<chat-text em="true">${escapeHTML(`[无效数据 (<${text}>=${href})]`)}</chat-text>`
|
||||
},
|
||||
}
|
||||
})
|
||||
|
||||
interface MduiTabFitSizeArgs extends React.HTMLAttributes<HTMLElement & Tab> {
|
||||
value: string
|
||||
}
|
||||
function MduiTabFitSize({ children, ...props }: MduiTabFitSizeArgs) {
|
||||
return <mdui-tab {...props} style={{
|
||||
...props?.style,
|
||||
minWidth: 'fit-content',
|
||||
}}>
|
||||
{children}
|
||||
</mdui-tab>
|
||||
}
|
||||
|
||||
export default function ChatFragment({ target, showReturnButton, onReturnButtonClicked, openChatInfoDialog, openUserInfoDialog, ...props }: Args) {
|
||||
const [messagesList, setMessagesList] = React.useState([] as Message[])
|
||||
const [chatInfo, setChatInfo] = React.useState({
|
||||
title: '加载中...',
|
||||
is_member: true,
|
||||
is_admin: true,
|
||||
} as Chat)
|
||||
|
||||
const [tabItemSelected, setTabItemSelected] = React.useState('None')
|
||||
const tabRef = React.useRef<Tab>(null)
|
||||
const chatPanelRef = React.useRef<HTMLElement>(null)
|
||||
useEventListener(tabRef, 'change', () => {
|
||||
tabRef.current != null && setTabItemSelected(tabRef.current!.value as string)
|
||||
})
|
||||
|
||||
const containerTabRef = React.useRef<Tab>(null)
|
||||
React.useEffect(() => {
|
||||
$(containerTabRef.current!.shadowRoot).append(`<style>.container::after { height: 0 !important; }</style>`)
|
||||
$(tabRef.current!.shadowRoot).append(`<style>.container::after { height: 0 !important; }</style>`)
|
||||
; (!isMobileUI()) && $(tabRef.current!.shadowRoot).append(`<style>.no-scroll-bar::-webkit-scrollbar{width:0px !important}*::-webkit-scrollbar{width:7px;height:10px}*::-webkit-scrollbar-track{width:6px;background:rgba(#101f1c,0.1);-webkit-border-radius:2em;-moz-border-radius:2em;border-radius:2em}*::-webkit-scrollbar-thumb{background-color:rgba(144,147,153,0.5);background-clip:padding-box;min-height:28px;-webkit-border-radius:2em;-moz-border-radius:2em;border-radius:2em;transition:background-color 0.3s;cursor:pointer}*::-webkit-scrollbar-thumb:hover{background-color:rgba(144,147,153,0.3)}</style>`)
|
||||
}, [target])
|
||||
|
||||
async function getChatInfoAndInit() {
|
||||
setMessagesList([])
|
||||
page.current = 0
|
||||
const re = await Client.invoke('Chat.getInfo', {
|
||||
token: data.access_token,
|
||||
target: target,
|
||||
})
|
||||
if (re.code != 200)
|
||||
return target != '' && checkApiSuccessOrSncakbar(re, "获取对话信息失败")
|
||||
const chatInfo = re.data as Chat
|
||||
setChatInfo(chatInfo)
|
||||
|
||||
if (chatInfo.is_member)
|
||||
await loadMore()
|
||||
|
||||
setTabItemSelected(chatInfo.is_member ? "Chat" : "RequestJoin")
|
||||
if (re.data!.type == 'group') {
|
||||
groupPreferenceStore.setState(chatInfo.settings as GroupSettings)
|
||||
}
|
||||
setTimeout(() => {
|
||||
chatPanelRef.current!.scrollTo({
|
||||
top: 10000000000,
|
||||
behavior: "smooth",
|
||||
})
|
||||
}, 500)
|
||||
}
|
||||
useAsyncEffect(getChatInfoAndInit, [target])
|
||||
|
||||
const page = React.useRef(0)
|
||||
async function loadMore() {
|
||||
const re = await Client.invoke("Chat.getMessageHistory", {
|
||||
token: data.access_token,
|
||||
target,
|
||||
page: page.current,
|
||||
})
|
||||
|
||||
if (checkApiSuccessOrSncakbar(re, "拉取对话记录失败"))
|
||||
return
|
||||
const returnMsgs = (re.data!.messages as Message[]).reverse()
|
||||
page.current++
|
||||
if (returnMsgs.length == 0) {
|
||||
setShowNoMoreMessagesTip(true)
|
||||
setTimeout(() => setShowNoMoreMessagesTip(false), 1000)
|
||||
return
|
||||
}
|
||||
|
||||
const oldest = messagesList[0]
|
||||
setMessagesList(returnMsgs.concat(messagesList))
|
||||
oldest && setTimeout(() => chatPanelRef.current!.scrollTo({ top: $(`#chat_${target}_message_${oldest.id}`).get(0).offsetTop }), 200)
|
||||
}
|
||||
|
||||
React.useEffect(() => {
|
||||
interface OnMessageData {
|
||||
chat: string
|
||||
msg: Message
|
||||
}
|
||||
function callback(data: unknown) {
|
||||
const { chat, msg } = (data as OnMessageData)
|
||||
if (target == chat) {
|
||||
setMessagesList(messagesList.concat([msg]))
|
||||
if ((chatPanelRef.current!.scrollHeight - chatPanelRef.current!.scrollTop - chatPanelRef.current!.clientHeight) < 130)
|
||||
setTimeout(() => chatPanelRef.current!.scrollTo({
|
||||
top: 10000000000,
|
||||
behavior: "smooth",
|
||||
}), 100)
|
||||
}
|
||||
}
|
||||
|
||||
Client.on('Client.onMessage', callback)
|
||||
return () => {
|
||||
Client.off('Client.onMessage', callback)
|
||||
}
|
||||
})
|
||||
|
||||
const inputRef = React.useRef<TextField>(null)
|
||||
const [showLoadingMoreMessagesTip, setShowLoadingMoreMessagesTip] = React.useState(false)
|
||||
const [showNoMoreMessagesTip, setShowNoMoreMessagesTip] = React.useState(false)
|
||||
|
||||
const [isMessageSending, setIsMessageSending] = React.useState(false)
|
||||
|
||||
const cachedFiles = React.useRef({} as { [fileName: string]: ArrayBuffer })
|
||||
const cachedFileNamesCount = React.useRef({} as { [fileName: string]: number })
|
||||
async function sendMessage() {
|
||||
let text = inputRef.current!.value
|
||||
if (text.trim() == '') return
|
||||
const sendingFilesSnackbar = snackbar({
|
||||
message: `发送消息到 [${chatInfo.title}]...`,
|
||||
placement: 'top',
|
||||
autoCloseDelay: 0,
|
||||
})
|
||||
let i = 1
|
||||
let i2 = 0
|
||||
const sendingFilesSnackbarId = setInterval(() => {
|
||||
const len = Object.keys(cachedFiles.current).filter((fileName) => text.indexOf(fileName)).length
|
||||
sendingFilesSnackbar.textContent = i2 == len ? `发送消息到 [${chatInfo.title}]... (${i}s)` : `上传第 ${i2}/${len} 文件到 [${chatInfo.title}]... (${i}s)`
|
||||
i++
|
||||
}, 1000)
|
||||
function endSendingSnack() {
|
||||
clearTimeout(sendingFilesSnackbarId)
|
||||
sendingFilesSnackbar.open = false
|
||||
}
|
||||
Client.socket?.once('disconnect', () => endSendingSnack())
|
||||
try {
|
||||
setIsMessageSending(true)
|
||||
for (const fileName of Object.keys(cachedFiles.current)) {
|
||||
if (text.indexOf(fileName) != -1) {
|
||||
const re = await Client.uploadFileLikeApi(
|
||||
fileName,
|
||||
cachedFiles.current[fileName]
|
||||
)
|
||||
if (checkApiSuccessOrSncakbar(re, `文件[${fileName}] 上传失败`)) {
|
||||
endSendingSnack()
|
||||
return setIsMessageSending(false)
|
||||
}
|
||||
text = text.replaceAll('(' + fileName + ')', '(tws://file?hash=' + re.data!.file_hash as string + ')')
|
||||
i2++
|
||||
}
|
||||
}
|
||||
|
||||
const re = await Client.invoke("Chat.sendMessage", {
|
||||
token: data.access_token,
|
||||
target,
|
||||
text,
|
||||
}, 5000)
|
||||
if (checkApiSuccessOrSncakbar(re, "发送失败")) {
|
||||
endSendingSnack()
|
||||
return setIsMessageSending(false)
|
||||
}
|
||||
inputRef.current!.value = ''
|
||||
cachedFiles.current = {}
|
||||
} catch (e) {
|
||||
snackbar({
|
||||
message: '发送失败: ' + (e as Error).message,
|
||||
placement: 'top',
|
||||
})
|
||||
}
|
||||
setIsMessageSending(false)
|
||||
endSendingSnack()
|
||||
}
|
||||
|
||||
const attachFileInputRef = React.useRef<HTMLInputElement>(null)
|
||||
const uploadChatAvatarRef = React.useRef<HTMLInputElement>(null)
|
||||
|
||||
function insertText(text: string) {
|
||||
const input = inputRef.current!.shadowRoot!.querySelector('[part=input]') as HTMLTextAreaElement
|
||||
inputRef.current!.value = input.value!.substring(0, input.selectionStart as number) + text + input.value!.substring(input.selectionEnd as number, input.value.length)
|
||||
}
|
||||
async function addFile(type: string, name_: string, data: Blob | Response) {
|
||||
let name = name_
|
||||
while (cachedFiles.current[name] != null) {
|
||||
name = name_ + '_' + cachedFileNamesCount.current[name]
|
||||
cachedFileNamesCount.current[name]++
|
||||
}
|
||||
|
||||
cachedFiles.current[name] = await data.arrayBuffer()
|
||||
cachedFileNamesCount.current[name] = 1
|
||||
if (type.startsWith('image/'))
|
||||
insertText(``)
|
||||
else if (type.startsWith('video/'))
|
||||
insertText(``)
|
||||
else
|
||||
insertText(``)
|
||||
}
|
||||
useEventListener(attachFileInputRef, 'change', (_e) => {
|
||||
const files = attachFileInputRef.current!.files as unknown as File[]
|
||||
if (files?.length == 0) return
|
||||
|
||||
for (const file of files) {
|
||||
addFile(file.type, file.name, file)
|
||||
}
|
||||
attachFileInputRef.current!.value = ''
|
||||
})
|
||||
useEventListener(uploadChatAvatarRef, 'change', async (_e) => {
|
||||
const file = uploadChatAvatarRef.current!.files?.[0] as File
|
||||
if (file == null) return
|
||||
|
||||
let re = await Client.uploadFileLikeApi(
|
||||
'avatar',
|
||||
file
|
||||
)
|
||||
if (checkApiSuccessOrSncakbar(re, "上传失败")) return
|
||||
const hash = re.data!.file_hash
|
||||
re = await Client.invoke("Chat.setAvatar", {
|
||||
token: data.access_token,
|
||||
target: target,
|
||||
file_hash: hash,
|
||||
})
|
||||
uploadChatAvatarRef.current!.value = ''
|
||||
|
||||
if (checkApiSuccessOrSncakbar(re, "修改失败")) return
|
||||
snackbar({
|
||||
message: "修改成功 (刷新页面以更新)",
|
||||
placement: "top",
|
||||
})
|
||||
})
|
||||
|
||||
const groupPreferenceStore = new PreferenceStore<GroupSettings>()
|
||||
groupPreferenceStore.setOnUpdate(async (value, oldvalue) => {
|
||||
const re = await Client.invoke("Chat.updateSettings", {
|
||||
token: data.access_token,
|
||||
target,
|
||||
settings: value,
|
||||
})
|
||||
if (checkApiSuccessOrSncakbar(re, "更新设定失败")) return groupPreferenceStore.setState(oldvalue)
|
||||
})
|
||||
|
||||
return (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
overflowY: 'auto',
|
||||
}} {...props}>
|
||||
<mdui-tabs ref={containerTabRef} style={{
|
||||
position: 'sticky',
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
}}>
|
||||
{
|
||||
showReturnButton && <mdui-button-icon icon="arrow_back" onClick={onReturnButtonClicked} style={{
|
||||
alignSelf: 'center',
|
||||
marginLeft: '5px',
|
||||
marginRight: '5px',
|
||||
}}></mdui-button-icon>
|
||||
}
|
||||
<mdui-tabs ref={tabRef} value={tabItemSelected} style={{
|
||||
position: 'sticky',
|
||||
display: "flex",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
overflowX: 'auto',
|
||||
}}>
|
||||
{
|
||||
chatInfo.is_member ? <>
|
||||
<MduiTabFitSize value="Chat">{chatInfo.title}</MduiTabFitSize>
|
||||
{chatInfo.type == 'group' && chatInfo.is_admin && <MduiTabFitSize value="NewMemberRequests">加入请求</MduiTabFitSize>}
|
||||
{chatInfo.type == 'group' && <MduiTabFitSize value="GroupMembers">群组成员</MduiTabFitSize>}
|
||||
</>
|
||||
: <MduiTabFitSize value="RequestJoin">{chatInfo.title}</MduiTabFitSize>
|
||||
}
|
||||
{chatInfo.type == 'group' && <MduiTabFitSize value="Settings">设置</MduiTabFitSize>}
|
||||
<MduiTabFitSize value="None" style={{ display: 'none' }}></MduiTabFitSize>
|
||||
</mdui-tabs>
|
||||
<div style={{
|
||||
flexGrow: '1',
|
||||
}}></div>
|
||||
<mdui-button-icon icon="refresh" onClick={() => {
|
||||
page.current = 0
|
||||
getChatInfoAndInit()
|
||||
}} style={{
|
||||
alignSelf: 'center',
|
||||
marginLeft: '5px',
|
||||
marginRight: '5px',
|
||||
}}></mdui-button-icon>
|
||||
<mdui-button-icon icon="info" onClick={() => openChatInfoDialog(chatInfo)} style={{
|
||||
alignSelf: 'center',
|
||||
marginLeft: '5px',
|
||||
marginRight: '5px',
|
||||
}}></mdui-button-icon>
|
||||
|
||||
<mdui-tab-panel slot="panel" value="RequestJoin" style={{
|
||||
display: tabItemSelected == "RequestJoin" ? "flex" : "none",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<div>
|
||||
<mdui-button disabled={!groupPreferenceStore.state.allow_new_member_join} onClick={async () => {
|
||||
const re = await Client.invoke("Chat.sendJoinRequest", {
|
||||
token: data.access_token,
|
||||
target: target,
|
||||
})
|
||||
if (re.code != 200)
|
||||
return checkApiSuccessOrSncakbar(re, "发送加入请求失败")
|
||||
|
||||
snackbar({
|
||||
message: '发送成功!',
|
||||
placement: 'top',
|
||||
})
|
||||
}}>请求加入对话</mdui-button>
|
||||
</div>
|
||||
</mdui-tab-panel>
|
||||
<mdui-tab-panel slot="panel" value="Chat" ref={chatPanelRef} style={{
|
||||
display: tabItemSelected == "Chat" ? "flex" : "none",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
}} onScroll={async (e) => {
|
||||
if (!chatInfo.is_member) return
|
||||
const scrollTop = (e.target as HTMLDivElement).scrollTop
|
||||
if (scrollTop == 0 && !showLoadingMoreMessagesTip) {
|
||||
setShowNoMoreMessagesTip(false)
|
||||
setShowLoadingMoreMessagesTip(true)
|
||||
await loadMore()
|
||||
setShowLoadingMoreMessagesTip(false)
|
||||
}
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
justifyContent: "center",
|
||||
paddingTop: "15px",
|
||||
}}>
|
||||
<div style={{
|
||||
display: showLoadingMoreMessagesTip ? 'flex' : 'none',
|
||||
}}>
|
||||
<mdui-circular-progress style={{
|
||||
width: '30px',
|
||||
height: '30px',
|
||||
}}></mdui-circular-progress>
|
||||
<span style={{
|
||||
alignSelf: 'center',
|
||||
paddingLeft: '12px',
|
||||
}}>加载中...</span>
|
||||
</div>
|
||||
<div style={{
|
||||
display: showNoMoreMessagesTip ? undefined : 'none',
|
||||
alignSelf: 'center',
|
||||
}}>
|
||||
沒有更多消息啦~
|
||||
</div>
|
||||
</div>
|
||||
<MessageContainer style={{
|
||||
paddingTop: "15px",
|
||||
flexGrow: '1',
|
||||
}}>
|
||||
{
|
||||
(() => {
|
||||
let date = new Date(0)
|
||||
let user: string
|
||||
function timeAddZeroPrefix(t: number) {
|
||||
if (t >= 0 && t < 10)
|
||||
return '0' + t
|
||||
return t + ''
|
||||
}
|
||||
return messagesList.map((msg) => {
|
||||
const lastDate = date
|
||||
const lastUser = user
|
||||
date = new Date(msg.time)
|
||||
user = msg.user_id
|
||||
|
||||
const shouldShowTime = msg.user_id != null &&
|
||||
(date.getMinutes() != lastDate.getMinutes() || date.getDate() != lastDate.getDate() || date.getMonth() != lastDate.getMonth() || date.getFullYear() != lastDate.getFullYear())
|
||||
|
||||
const msgElement = msg.user_id == null ? <SystemMessage><div dangerouslySetInnerHTML={{
|
||||
__html: DOMPurify.sanitize(markedInstance.parse(msg.text) as string, {
|
||||
ALLOWED_ATTR: [
|
||||
...sanitizeConfig.ALLOWED_ATTR,
|
||||
],
|
||||
ALLOWED_TAGS: [
|
||||
...sanitizeConfig.ALLOWED_TAGS,
|
||||
],
|
||||
})
|
||||
}} /></SystemMessage> : <Element_Message
|
||||
noUserDisplay={lastUser == user && !shouldShowTime}
|
||||
rawData={msg.text}
|
||||
renderHTML={DOMPurify.sanitize(markedInstance.parse(msg.text) as string, sanitizeConfig)}
|
||||
message={msg}
|
||||
key={msg.id}
|
||||
slot="trigger"
|
||||
id={`chat_${target}_message_${msg.id}`}
|
||||
userId={msg.user_id}
|
||||
openUserInfoDialog={openUserInfoDialog} />
|
||||
|
||||
return (
|
||||
<>
|
||||
{
|
||||
shouldShowTime
|
||||
&& <mdui-tooltip content={`${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`}>
|
||||
<div style={{
|
||||
fontSize: '87%',
|
||||
marginTop: '13px',
|
||||
marginBottom: '10px',
|
||||
}}>
|
||||
{
|
||||
(date.getFullYear() != lastDate.getFullYear() ? `${date.getFullYear()}年` : '')
|
||||
+ `${date.getMonth() + 1}月`
|
||||
+ `${date.getDate()}日`
|
||||
+ ` ${timeAddZeroPrefix(date.getHours())}:${timeAddZeroPrefix(date.getMinutes())}`
|
||||
}
|
||||
</div>
|
||||
</mdui-tooltip>
|
||||
}
|
||||
{
|
||||
msgElement
|
||||
}
|
||||
</>
|
||||
)
|
||||
})
|
||||
})()
|
||||
}
|
||||
</MessageContainer>
|
||||
{
|
||||
// 输入框
|
||||
}
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
paddingBottom: '2px',
|
||||
paddingTop: '0.1rem',
|
||||
position: 'sticky',
|
||||
bottom: '0',
|
||||
paddingLeft: '5px',
|
||||
paddingRight: '4px',
|
||||
backgroundColor: 'rgb(var(--mdui-color-surface))',
|
||||
}} onDrop={(e) => {
|
||||
function getFileNameOrRandom(urlString: string) {
|
||||
const url = new URL(urlString)
|
||||
let filename = url.pathname.substring(url.pathname.lastIndexOf('/') + 1).trim()
|
||||
if (filename == '')
|
||||
filename = 'file_' + randomUUID()
|
||||
return filename
|
||||
}
|
||||
if (e.dataTransfer.items.length > 0) {
|
||||
// 基于当前的实现, 浏览器不会读取文件的字节流来确定其媒体类型, 其根据文件扩展名进行假设
|
||||
// https://developer.mozilla.org/zh-CN/docs/Web/API/Blob/type
|
||||
for (const item of e.dataTransfer.items) {
|
||||
if (item.type == 'text/uri-list') {
|
||||
item.getAsString(async (url) => {
|
||||
try {
|
||||
// 即便是 no-cors 還是殘廢, 因此暫時沒有什麽想法
|
||||
const re = await fetch(url)
|
||||
const type = re.headers.get("Content-Type")
|
||||
if (type && re.ok)
|
||||
addFile(type as string, getFileNameOrRandom(url), re)
|
||||
} catch (e) {
|
||||
snackbar({
|
||||
message: '无法解析链接: ' + (e as Error).message,
|
||||
placement: 'top',
|
||||
})
|
||||
}
|
||||
})
|
||||
} else if (item.kind == 'file') {
|
||||
e.preventDefault()
|
||||
const file = item.getAsFile() as File
|
||||
addFile(item.type, file.name, file)
|
||||
}
|
||||
}
|
||||
}
|
||||
}}>
|
||||
<mdui-text-field variant="outlined" placeholder="(｡･ω･｡)" autosize ref={inputRef as any} max-rows={6} onChange={() => {
|
||||
if (inputRef.current?.value.trim() == '')
|
||||
cachedFiles.current = {}
|
||||
}} onKeyDown={(event) => {
|
||||
if (event.ctrlKey && event.key == 'Enter')
|
||||
sendMessage()
|
||||
}} onPaste={(event) => {
|
||||
for (const item of event.clipboardData.items) {
|
||||
if (item.kind == 'file') {
|
||||
event.preventDefault()
|
||||
const file = item.getAsFile() as File
|
||||
addFile(item.type, file.name, file)
|
||||
}
|
||||
}
|
||||
}} style={{
|
||||
marginRight: '10px',
|
||||
marginTop: '3px',
|
||||
marginBottom: '3px',
|
||||
}}></mdui-text-field>
|
||||
<mdui-button-icon slot="end-icon" icon="attach_file" style={{
|
||||
marginRight: '6px',
|
||||
}} onClick={() => {
|
||||
attachFileInputRef.current!.click()
|
||||
}}></mdui-button-icon>
|
||||
<mdui-button-icon icon="send" style={{
|
||||
marginRight: '7px',
|
||||
}} onClick={() => sendMessage()} loading={isMessageSending}></mdui-button-icon>
|
||||
<div style={{
|
||||
display: 'none'
|
||||
}}>
|
||||
<input accept="*/*" type="file" name="添加文件" multiple ref={attachFileInputRef}></input>
|
||||
</div>
|
||||
</div>
|
||||
</mdui-tab-panel>
|
||||
{
|
||||
chatInfo.type == 'group' && <mdui-tab-panel slot="panel" value="GroupMembers" style={{
|
||||
display: tabItemSelected == "GroupMembers" ? "flex" : "none",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
}}>
|
||||
<GroupMembersList chat={chatInfo} />
|
||||
</mdui-tab-panel>
|
||||
}
|
||||
{
|
||||
chatInfo.type == 'group' && <mdui-tab-panel slot="panel" value="NewMemberRequests" style={{
|
||||
display: tabItemSelected == "NewMemberRequests" ? "flex" : "none",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
}}>
|
||||
{chatInfo.is_admin && <JoinRequestsList chat={chatInfo} />}
|
||||
</mdui-tab-panel>
|
||||
}
|
||||
<mdui-tab-panel slot="panel" value="Settings" style={{
|
||||
display: tabItemSelected == "Settings" ? "flex" : "none",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'none'
|
||||
}}>
|
||||
<input accept="image/*" type="file" name="上传对话头像" ref={uploadChatAvatarRef}></input>
|
||||
</div>
|
||||
{
|
||||
chatInfo.type == 'group' && <PreferenceLayout>
|
||||
<PreferenceUpdater.Provider value={groupPreferenceStore.createUpdater()}>
|
||||
<PreferenceHeader
|
||||
title="群组资料" />
|
||||
<Preference
|
||||
title="上传新的头像"
|
||||
icon="image"
|
||||
disabled={!chatInfo.is_admin}
|
||||
onClick={() => {
|
||||
uploadChatAvatarRef.current!.click()
|
||||
}} />
|
||||
<TextFieldPreference
|
||||
title="设置群名称"
|
||||
icon="edit"
|
||||
id="group_title"
|
||||
state={groupPreferenceStore.state.group_title || ''}
|
||||
disabled={!chatInfo.is_admin} />
|
||||
<TextFieldPreference
|
||||
title="设置群别名"
|
||||
icon="edit"
|
||||
id="group_name"
|
||||
description="以便于添加, 可留空"
|
||||
state={groupPreferenceStore.state.group_name || ''}
|
||||
disabled={!chatInfo.is_admin} />
|
||||
<PreferenceHeader
|
||||
title="入群设定" />
|
||||
<SwitchPreference
|
||||
title="允许入群"
|
||||
icon="person_add"
|
||||
id="allow_new_member_join"
|
||||
disabled={!chatInfo.is_admin}
|
||||
state={groupPreferenceStore.state.allow_new_member_join || false} />
|
||||
{/* <SwitchPreference
|
||||
title="允许成员邀请"
|
||||
description="目前压根没有这项功能, 甚至还不能查看成员列表, 以后再说吧"
|
||||
id="allow_new_member_from_invitation"
|
||||
icon="_"
|
||||
disabled={true || !chatInfo.is_admin}
|
||||
state={groupPreferenceStore.state.allow_new_member_from_invitation || false} />
|
||||
<SelectPreference
|
||||
title="入群验证方式"
|
||||
icon="_"
|
||||
id="new_member_join_method"
|
||||
selections={{
|
||||
disabled: "无需验证",
|
||||
allowed_by_admin: "只需要管理员批准 (WIP)",
|
||||
answered_and_allowed_by_admin: "需要回答问题并获得管理员批准 (WIP)",
|
||||
}}
|
||||
disabled={!chatInfo.is_admin || !groupPreferenceStore.state.allow_new_member_join}
|
||||
state={groupPreferenceStore.state.new_member_join_method || 'disabled'} />
|
||||
{
|
||||
groupPreferenceStore.state.new_member_join_method == 'answered_and_allowed_by_admin'
|
||||
&& <TextFieldPreference
|
||||
title="设置问题"
|
||||
icon="_"
|
||||
id="answered_and_allowed_by_admin_question"
|
||||
description="WIP"
|
||||
state={groupPreferenceStore.state.answered_and_allowed_by_admin_question || ''}
|
||||
disabled={true || !chatInfo.is_admin} />
|
||||
} */}
|
||||
</PreferenceUpdater.Provider>
|
||||
</PreferenceLayout>
|
||||
}
|
||||
{
|
||||
chatInfo.type == 'private' && (
|
||||
<div>
|
||||
未制作
|
||||
</div>
|
||||
)
|
||||
}
|
||||
</mdui-tab-panel>
|
||||
<mdui-tab-panel slot="panel" value="None" style={{
|
||||
display: tabItemSelected == "None" ? "flex" : "none",
|
||||
flexDirection: "column",
|
||||
height: "100%",
|
||||
}}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
}}>
|
||||
<mdui-circular-progress></mdui-circular-progress>
|
||||
</div>
|
||||
</mdui-tab-panel>
|
||||
</mdui-tabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,81 +0,0 @@
|
||||
import { TextField } from "mdui"
|
||||
import useEventListener from "../useEventListener.ts"
|
||||
import React from "react"
|
||||
import useAsyncEffect from "../useAsyncEffect.ts"
|
||||
import Client from "../../api/Client.ts"
|
||||
import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
|
||||
import data from "../../Data.ts"
|
||||
import EventBus from "../../EventBus.ts"
|
||||
import GroupMembersListItem from "./GroupMembersListItem.tsx"
|
||||
import User from "../../api/client_data/User.ts"
|
||||
import Chat from "../../api/client_data/Chat.ts"
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
chat: Chat
|
||||
}
|
||||
|
||||
export default function GroupMembersList({
|
||||
chat,
|
||||
...props
|
||||
}: Args) {
|
||||
const target = chat.id
|
||||
const searchRef = React.useRef<HTMLElement>(null)
|
||||
const [searchText, setSearchText] = React.useState('')
|
||||
const [groupMembers, setGroupMembers] = React.useState<User[]>([])
|
||||
|
||||
useEventListener(searchRef, 'input', (e) => {
|
||||
setSearchText((e.target as unknown as TextField).value)
|
||||
})
|
||||
|
||||
React.useEffect(() => {
|
||||
async function updateMembers() {
|
||||
const re = await Client.invoke("Chat.getMembers", {
|
||||
token: data.access_token,
|
||||
target: target,
|
||||
})
|
||||
if (re.code != 200)
|
||||
return checkApiSuccessOrSncakbar(re, "获取群组成员列表失败")
|
||||
|
||||
setGroupMembers(re.data!.members as User[])
|
||||
}
|
||||
updateMembers()
|
||||
EventBus.on('GroupMembersList.updateMembers', () => updateMembers())
|
||||
const id = setInterval(() => updateMembers(), 15 * 1000)
|
||||
return () => {
|
||||
clearInterval(id)
|
||||
EventBus.off('GroupMembersList.updateMembers')
|
||||
}
|
||||
}, [target])
|
||||
|
||||
return <mdui-list style={{
|
||||
overflowY: 'auto',
|
||||
paddingRight: '10px',
|
||||
paddingLeft: '10px',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}} {...props}>
|
||||
<mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
|
||||
marginTop: '5px',
|
||||
marginBottom: '13px',
|
||||
}}></mdui-text-field>
|
||||
|
||||
<mdui-list-item rounded style={{
|
||||
width: '100%',
|
||||
marginBottom: '15px',
|
||||
}} icon="refresh" onClick={() => EventBus.emit('GroupMembersList.updateMembers')}>刷新</mdui-list-item>
|
||||
|
||||
{
|
||||
groupMembers.filter((user) =>
|
||||
searchText == '' ||
|
||||
user.nickname.includes(searchText) ||
|
||||
user.username?.includes(searchText) ||
|
||||
user.id.includes(searchText)
|
||||
).map((v) =>
|
||||
<GroupMembersListItem
|
||||
key={v.id}
|
||||
chat={chat}
|
||||
user={v} />
|
||||
)
|
||||
}
|
||||
</mdui-list>
|
||||
}
|
||||
@@ -1,84 +0,0 @@
|
||||
import { $, dialog } from "mdui"
|
||||
import Avatar from "../Avatar.tsx"
|
||||
import React from 'react'
|
||||
import User from "../../api/client_data/User.ts"
|
||||
import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
|
||||
import Client from "../../api/Client.ts"
|
||||
import data from "../../Data.ts"
|
||||
import Chat from "../../api/client_data/Chat.ts"
|
||||
import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
|
||||
import EventBus from "../../EventBus.ts"
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
user: User
|
||||
chat: Chat
|
||||
}
|
||||
|
||||
export default function GroupMembersListItem({ user, chat }: Args) {
|
||||
const { id, nickname, avatar_file_hash } = user
|
||||
|
||||
const itemRef = React.useRef<HTMLElement>(null)
|
||||
return (
|
||||
<mdui-list-item rounded style={{
|
||||
marginTop: '3px',
|
||||
marginBottom: '3px',
|
||||
}} ref={itemRef} onClick={() => {
|
||||
// deno-lint-ignore no-window
|
||||
window.openUserInfoDialog(user)
|
||||
}}>
|
||||
{nickname}
|
||||
<Avatar src={getUrlForFileByHash(avatar_file_hash)} text={nickname} slot="icon" />
|
||||
<div slot="end-icon">
|
||||
<mdui-button-icon icon="delete" onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
dialog({
|
||||
headline: "移除群组成员",
|
||||
description: `确定要移除 ${nickname} 吗?`,
|
||||
closeOnEsc: true,
|
||||
closeOnOverlayClick: true,
|
||||
actions: [
|
||||
{
|
||||
text: "取消",
|
||||
onClick: () => {
|
||||
return true
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "确定",
|
||||
onClick: () => {
|
||||
; (async () => {
|
||||
const re = await Client.invoke("Chat.removeMembers", {
|
||||
token: data.access_token,
|
||||
chat_id: chat.id,
|
||||
user_ids: [
|
||||
id
|
||||
],
|
||||
})
|
||||
if (re.code != 200)
|
||||
checkApiSuccessOrSncakbar(re, "移除群组成员失败")
|
||||
EventBus.emit('GroupMembersList.updateMembers')
|
||||
snackbar({
|
||||
message: `已移除 ${nickname}`,
|
||||
placement: "top",
|
||||
/* action: "撤销操作",
|
||||
onActionClick: async () => {
|
||||
const re = await Client.invoke("User.addContacts", {
|
||||
token: data.access_token,
|
||||
targets: ls,
|
||||
})
|
||||
if (re.code != 200)
|
||||
checkApiSuccessOrSncakbar(re, "恢复所选收藏失败")
|
||||
EventBus.emit('ContactsList.updateContacts')
|
||||
} */
|
||||
})
|
||||
})()
|
||||
return true
|
||||
},
|
||||
}
|
||||
],
|
||||
})
|
||||
}}></mdui-button-icon>
|
||||
</div>
|
||||
</mdui-list-item>
|
||||
)
|
||||
}
|
||||
@@ -1,106 +0,0 @@
|
||||
import { TextField } from "mdui"
|
||||
import useEventListener from "../useEventListener.ts"
|
||||
import React from "react"
|
||||
import Client from "../../api/Client.ts"
|
||||
import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
|
||||
import data from "../../Data.ts"
|
||||
import EventBus from "../../EventBus.ts"
|
||||
import JoinRequest from "../../api/client_data/JoinRequest.ts"
|
||||
import JoinRequestsListItem from "./JoinRequestsListItem.tsx"
|
||||
import Chat from "../../api/client_data/Chat.ts"
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
chat: Chat
|
||||
}
|
||||
|
||||
export default function GroupMembersList({
|
||||
chat,
|
||||
...props
|
||||
}: Args) {
|
||||
const target = chat.id
|
||||
const searchRef = React.useRef<HTMLElement>(null)
|
||||
const [searchText, setSearchText] = React.useState('')
|
||||
const [updateJoinRequests, setUpdateJoinRequests] = React.useState<JoinRequest[]>([])
|
||||
|
||||
useEventListener(searchRef, 'input', (e) => {
|
||||
setSearchText((e.target as unknown as TextField).value)
|
||||
})
|
||||
|
||||
React.useEffect(() => {
|
||||
async function updateJoinRequests() {
|
||||
const re = await Client.invoke("Chat.getJoinRequests", {
|
||||
token: data.access_token,
|
||||
target: target,
|
||||
})
|
||||
if (re.code != 200)
|
||||
return checkApiSuccessOrSncakbar(re, "获取加入请求列表失败")
|
||||
|
||||
setUpdateJoinRequests(re.data!.join_requests as JoinRequest[])
|
||||
}
|
||||
updateJoinRequests()
|
||||
EventBus.on('JoinRequestsList.updateJoinRequests', () => updateJoinRequests())
|
||||
const id = setInterval(() => updateJoinRequests(), 15 * 1000)
|
||||
return () => {
|
||||
clearInterval(id)
|
||||
EventBus.off('JoinRequestsList.updateJoinRequests')
|
||||
}
|
||||
}, [target])
|
||||
|
||||
async function removeJoinRequest(userId: string) {
|
||||
const re = await Client.invoke("Chat.processJoinRequest", {
|
||||
token: data.access_token,
|
||||
chat_id: target,
|
||||
user_id: userId,
|
||||
action: 'remove',
|
||||
})
|
||||
if (re.code != 200)
|
||||
return checkApiSuccessOrSncakbar(re, "删除加入请求失败")
|
||||
|
||||
EventBus.emit('JoinRequestsList.updateJoinRequests')
|
||||
}
|
||||
async function acceptJoinRequest(userId: string) {
|
||||
const re = await Client.invoke("Chat.processJoinRequest", {
|
||||
token: data.access_token,
|
||||
chat_id: target,
|
||||
user_id: userId,
|
||||
action: 'accept',
|
||||
})
|
||||
if (re.code != 200)
|
||||
return checkApiSuccessOrSncakbar(re, "通过加入请求失败")
|
||||
|
||||
EventBus.emit('JoinRequestsList.updateJoinRequests')
|
||||
}
|
||||
|
||||
return <mdui-list style={{
|
||||
overflowY: 'auto',
|
||||
paddingRight: '10px',
|
||||
paddingLeft: '10px',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}} {...props}>
|
||||
<mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
|
||||
marginTop: '5px',
|
||||
marginBottom: '13px',
|
||||
}}></mdui-text-field>
|
||||
|
||||
<mdui-list-item rounded style={{
|
||||
width: '100%',
|
||||
marginBottom: '15px',
|
||||
}} icon="refresh" onClick={() => EventBus.emit('JoinRequestsList.updateJoinRequests')}>刷新</mdui-list-item>
|
||||
|
||||
{
|
||||
updateJoinRequests.filter((joinRequest) =>
|
||||
searchText == '' ||
|
||||
joinRequest.title.includes(searchText) ||
|
||||
joinRequest.reason?.includes(searchText) ||
|
||||
joinRequest.user_id.includes(searchText)
|
||||
).map((v) =>
|
||||
<JoinRequestsListItem
|
||||
key={v.user_id}
|
||||
acceptJoinRequest={acceptJoinRequest}
|
||||
removeJoinRequest={removeJoinRequest}
|
||||
joinRequest={v} />
|
||||
)
|
||||
}
|
||||
</mdui-list>
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
import { $ } from "mdui/jq"
|
||||
import Avatar from "../Avatar.tsx"
|
||||
import React from 'react'
|
||||
import JoinRequest from "../../api/client_data/JoinRequest.ts"
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
joinRequest: JoinRequest
|
||||
acceptJoinRequest: (userId: string) => any
|
||||
removeJoinRequest: (userId: string) => any
|
||||
}
|
||||
|
||||
export default function JoinRequestsListItem({ joinRequest, acceptJoinRequest, removeJoinRequest }: Args) {
|
||||
const { user_id, title, avatar, reason } = joinRequest
|
||||
|
||||
const itemRef = React.useRef<HTMLElement>(null)
|
||||
React.useEffect(() => {
|
||||
$(itemRef.current!.shadowRoot).find('.headline').css('margin-top', '3px')
|
||||
})
|
||||
return (
|
||||
<mdui-list-item rounded style={{
|
||||
marginTop: '3px',
|
||||
marginBottom: '3px',
|
||||
}} ref={itemRef}>
|
||||
{title}
|
||||
<Avatar src={avatar} text={title} slot="icon" />
|
||||
<span slot="description"
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "inline-block",
|
||||
whiteSpace: "nowrap", /* 禁止换行 */
|
||||
overflow: "hidden", /* 隐藏溢出内容 */
|
||||
textOverflow: "ellipsis", /* 显示省略号 */
|
||||
}}>请求原因: {reason || "无"}</span>
|
||||
<div slot="end-icon">
|
||||
<mdui-button-icon icon="check" onClick={() => acceptJoinRequest(user_id)}></mdui-button-icon>
|
||||
<mdui-button-icon icon="delete" onClick={() => removeJoinRequest(user_id)}></mdui-button-icon>
|
||||
</div>
|
||||
</mdui-list-item>
|
||||
)
|
||||
}
|
||||
@@ -1,222 +0,0 @@
|
||||
import { Dropdown, Dialog, dialog } from "mdui"
|
||||
import { $ } from "mdui/jq"
|
||||
import Client from "../../api/Client.ts"
|
||||
import Data_Message from "../../api/client_data/Message.ts"
|
||||
import DataCaches from "../../api/DataCaches.ts"
|
||||
import Avatar from "../Avatar.tsx"
|
||||
import copyToClipboard from "../copyToClipboard.ts"
|
||||
import useAsyncEffect from "../useAsyncEffect.ts"
|
||||
import useEventListener from "../useEventListener.ts"
|
||||
import React from "react"
|
||||
import isMobileUI from "../isMobileUI.ts"
|
||||
import User from "../../api/client_data/User.ts"
|
||||
import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
|
||||
import escapeHTML from "../../escapeHtml.ts"
|
||||
|
||||
function prettyFlatParsedMessage(html: string) {
|
||||
const elements = new DOMParser().parseFromString(html, 'text/html').body.children
|
||||
// 纯文本直接处理
|
||||
if (elements.length == 0)
|
||||
return `<chat-text-container><chat-text>${escapeHTML(html)}</chat-text></chat-text-container>`
|
||||
let ls: Element[] = []
|
||||
let ret = ''
|
||||
// 第一个元素时, 不会被聚合在一起
|
||||
let lastElementType = ''
|
||||
const textElementTags = [
|
||||
'chat-text',
|
||||
'chat-mention',
|
||||
'chat-quote',
|
||||
]
|
||||
function checkContinuousElement(tagName: string) {
|
||||
/* console.log('shangyige ', lastElementType)
|
||||
console.log("dangqian", tagName)
|
||||
console.log("上一个元素的类型和当前不一致?", lastElementType != tagName)
|
||||
console.log("上一个元素的类型和这个元素的类型都属于文本类型", (textElementTags.indexOf(lastElementType) != -1 && textElementTags.indexOf(tagName) != -1)) */
|
||||
// 如果上一个元素的类型和当前不一致, 或者上一个元素的类型和这个元素的类型都属于文本类型 (亦或者到最后一步时) 执行
|
||||
if ((lastElementType != tagName || (textElementTags.indexOf(lastElementType) != -1 && textElementTags.indexOf(tagName) != -1)) || tagName == 'LAST_CHICKEN') {
|
||||
/* console.log(tagName, '进入') */
|
||||
// 如果上一个元素类型为文本类型, 且当前不是文本类型时, 用文本包裹
|
||||
if (textElementTags.indexOf(lastElementType) != -1) {
|
||||
// 当前的文本类型不应该和上一个分离, 滚出去
|
||||
if (textElementTags.indexOf(tagName) != -1) return
|
||||
/* console.log(tagName, '文字和被') */
|
||||
// 由于 chat-mention 不是用内部元素实现的, 因此在这个元素的生成中必须放置占位字符串
|
||||
// 尽管显示上占位字符串不会显示, 但是在这里依然是会被处理的, 因为本身还是 innerHTML
|
||||
|
||||
// 当文本非空时, 将文字合并在一起
|
||||
if (ls.map((v) => v.innerHTML).join('').trim() != '')
|
||||
ret += `<chat-text-container>${ls.map((v) => v.outerHTML).join('')}</chat-text-container>`
|
||||
} else
|
||||
// 非文本类型元素, 各自成块
|
||||
ret += ls.map((v) => v.outerHTML).join('')
|
||||
ls = []
|
||||
}
|
||||
}
|
||||
for (const e of elements) {
|
||||
// 当出现非文本元素时, 将文本聚合在一起
|
||||
// 如果是其他类型, 虽然也执行聚合, 但是不会有外层包裹
|
||||
/* console.log("当前", e, "内容", e.innerHTML) */
|
||||
checkContinuousElement(e.nodeName.toLowerCase())
|
||||
ls.push(e)
|
||||
lastElementType = e.nodeName.toLowerCase()
|
||||
}
|
||||
// 最后将剩余的转换
|
||||
checkContinuousElement('LAST_CHICKEN')
|
||||
return ret
|
||||
}
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
userId: string
|
||||
noUserDisplay?: boolean
|
||||
rawData: string
|
||||
renderHTML: string
|
||||
message: Data_Message
|
||||
openUserInfoDialog: (user: User | string) => void
|
||||
}
|
||||
|
||||
export default function Message({ userId, rawData, renderHTML, message, openUserInfoDialog, noUserDisplay, ...props }: Args) {
|
||||
const isAtRight = Client.myUserProfile?.id == userId
|
||||
|
||||
const [nickName, setNickName] = React.useState("")
|
||||
const [avatarUrl, setAvatarUrl] = React.useState<string | undefined>("")
|
||||
|
||||
useAsyncEffect(async () => {
|
||||
const user = await DataCaches.getUserProfile(userId)
|
||||
setNickName(user.nickname)
|
||||
setAvatarUrl(getUrlForFileByHash(user?.avatar_file_hash))
|
||||
}, [userId])
|
||||
|
||||
const dropDownRef = React.useRef<Dropdown>(null)
|
||||
useEventListener(dropDownRef, 'closed', () => {
|
||||
setDropDownOpen(false)
|
||||
})
|
||||
|
||||
const [isDropDownOpen, setDropDownOpen] = React.useState(false)
|
||||
|
||||
/* const [isUsingFullDisplay, setIsUsingFullDisplay] = React.useState(false) */
|
||||
|
||||
/* React.useEffect(() => {
|
||||
const text = $(dropDownRef.current as HTMLElement).find('#msg').text().trim()
|
||||
setIsUsingFullDisplay(text == '' || (
|
||||
rawData.split("tws:\/\/file\?hash=").length == 2
|
||||
&& /\<\/chat\-(file|image|video)\>(\<\/span\>)?$/.test(renderHTML.trim())
|
||||
))
|
||||
}, [renderHTML]) */
|
||||
|
||||
return (
|
||||
<div
|
||||
slot="trigger"
|
||||
onContextMenu={(e) => {
|
||||
if (isMobileUI()) return
|
||||
e.preventDefault()
|
||||
setDropDownOpen(!isDropDownOpen)
|
||||
}}
|
||||
onClick={(e) => {
|
||||
if (!isMobileUI()) return
|
||||
e.preventDefault()
|
||||
setDropDownOpen(!isDropDownOpen)
|
||||
}}
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "flex",
|
||||
justifyContent: isAtRight ? "flex-end" : "flex-start",
|
||||
flexDirection: "column"
|
||||
}}
|
||||
{...props}>
|
||||
<div
|
||||
style={{
|
||||
display: noUserDisplay ? 'none' : "flex",
|
||||
justifyContent: isAtRight ? "flex-end" : "flex-start",
|
||||
}}>
|
||||
{
|
||||
// 发送者昵称(左)
|
||||
isAtRight && <span
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
fontSize: "90%"
|
||||
}}>
|
||||
{nickName}
|
||||
</span>
|
||||
}
|
||||
{
|
||||
// 发送者头像
|
||||
}
|
||||
<Avatar
|
||||
src={avatarUrl}
|
||||
text={nickName}
|
||||
style={{
|
||||
width: "43px",
|
||||
height: "43px",
|
||||
margin: "11px"
|
||||
}}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
openUserInfoDialog(userId)
|
||||
}} />
|
||||
{
|
||||
// 发送者昵称(右)
|
||||
!isAtRight && <span
|
||||
style={{
|
||||
alignSelf: "center",
|
||||
fontSize: "90%"
|
||||
}}>
|
||||
{nickName}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
<mdui-card
|
||||
variant="elevated"
|
||||
style={{
|
||||
maxWidth: 'var(--whitesilk-widget-message-maxwidth)', // (window.matchMedia('(pointer: fine)') && "50%") || (window.matchMedia('(pointer: coarse)') && "77%"),
|
||||
minWidth: "0%",
|
||||
[isAtRight ? "marginRight" : "marginLeft"]: "55px",
|
||||
marginTop: noUserDisplay ? '5px' : "-5px",
|
||||
alignSelf: isAtRight ? "flex-end" : "flex-start",
|
||||
// boxShadow: isUsingFullDisplay ? 'inherit' : 'var(--mdui-elevation-level1)',
|
||||
// padding: isUsingFullDisplay ? undefined : "13px",
|
||||
// paddingTop: isUsingFullDisplay ? undefined : "14px",
|
||||
// backgroundColor: isUsingFullDisplay ? "inherit" : undefined
|
||||
}}>
|
||||
<mdui-dropdown trigger="manual" ref={dropDownRef} open={isDropDownOpen}>
|
||||
<span
|
||||
slot="trigger"
|
||||
id="msg"
|
||||
style={{
|
||||
fontSize: "94%",
|
||||
wordBreak: 'break-word',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
}}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: prettyFlatParsedMessage(renderHTML)
|
||||
}} />
|
||||
<mdui-menu onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setDropDownOpen(false)
|
||||
}}>
|
||||
<mdui-menu-item icon="content_copy" onClick={() => copyToClipboard($(dropDownRef.current as HTMLElement).find('#msg').text().trim())}>复制文字</mdui-menu-item>
|
||||
<mdui-menu-item icon="content_copy" onClick={() => copyToClipboard(rawData)}>复制原文</mdui-menu-item>
|
||||
<mdui-menu-item icon="info" onClick={() => dialog({
|
||||
headline: "原始数据",
|
||||
body: `<span style="word-break: break-word;">${Object.keys(message)
|
||||
// @ts-ignore 懒
|
||||
.map((k) => `${k} = ${message[k]}`)
|
||||
.join('<br><br>')}<span>`,
|
||||
closeOnEsc: true,
|
||||
closeOnOverlayClick: true,
|
||||
actions: [
|
||||
{
|
||||
text: "关闭",
|
||||
onClick: () => {
|
||||
return true
|
||||
},
|
||||
}
|
||||
]
|
||||
}).addEventListener('click', (e) => e.stopPropagation())}>原始数据</mdui-menu-item>
|
||||
</mdui-menu>
|
||||
</mdui-dropdown>
|
||||
</mdui-card>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {}
|
||||
|
||||
export default function MessageContainer({ children, style, ...props }: Args) {
|
||||
return (
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'flex-end',
|
||||
alignItems: 'center',
|
||||
marginBottom: '20px',
|
||||
...style,
|
||||
}}
|
||||
{...props}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,24 +0,0 @@
|
||||
|
||||
export default function SystemMessage({ children }: React.HTMLAttributes<HTMLElement>) {
|
||||
return (
|
||||
<div style={{
|
||||
width: '100%',
|
||||
flexDirection: 'column',
|
||||
display: 'flex',
|
||||
marginTop: '25px',
|
||||
marginBottom: '20px',
|
||||
}}>
|
||||
<mdui-card variant="filled"
|
||||
style={{
|
||||
alignSelf: 'center',
|
||||
paddingTop: '8px',
|
||||
paddingBottom: '8px',
|
||||
paddingLeft: '17px',
|
||||
paddingRight: '17px',
|
||||
fontSize: '92%',
|
||||
}}>
|
||||
{children}
|
||||
</mdui-card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -1,20 +0,0 @@
|
||||
export default function copyToClipboard(text: string) {
|
||||
if (!("via" in window) && navigator.clipboard)
|
||||
return navigator.clipboard.writeText(text)
|
||||
return new Promise((res, rej) => {
|
||||
if (document.hasFocus()) {
|
||||
const a = document.createElement("textarea")
|
||||
document.body.appendChild(a)
|
||||
a.style.position = "fixed"
|
||||
a.style.clip = "rect(0 0 0 0)"
|
||||
a.style.top = "10px"
|
||||
a.value = text
|
||||
a.select()
|
||||
document.execCommand("cut", true)
|
||||
document.body.removeChild(a)
|
||||
res(null)
|
||||
} else {
|
||||
rej()
|
||||
}
|
||||
})
|
||||
}
|
||||
@@ -1,47 +0,0 @@
|
||||
import * as React from 'react'
|
||||
import { Button, Dialog, TextField } from "mdui"
|
||||
import useEventListener from "../useEventListener.ts"
|
||||
import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
|
||||
import Client from "../../api/Client.ts"
|
||||
|
||||
import * as CryptoJS from 'crypto-js'
|
||||
import data from "../../Data.ts"
|
||||
import EventBus from "../../EventBus.ts"
|
||||
|
||||
interface Refs {
|
||||
addContactDialogRef: React.MutableRefObject<Dialog | null>
|
||||
}
|
||||
|
||||
export default function AddContactDialog({
|
||||
addContactDialogRef,
|
||||
}: Refs) {
|
||||
const inputTargetRef = React.useRef<TextField>(null)
|
||||
|
||||
async function addContact() {
|
||||
const re = await Client.invoke("User.addContacts", {
|
||||
targets: [inputTargetRef.current!.value],
|
||||
token: data.access_token,
|
||||
})
|
||||
|
||||
if (checkApiSuccessOrSncakbar(re, "添加失敗")) return
|
||||
snackbar({
|
||||
message: re.msg,
|
||||
placement: "top",
|
||||
})
|
||||
EventBus.emit('ContactsList.updateContacts')
|
||||
|
||||
inputTargetRef.current!.value = ''
|
||||
addContactDialogRef.current!.open = false
|
||||
}
|
||||
|
||||
return (
|
||||
<mdui-dialog close-on-overlay-click close-on-esc headline="添加对话" ref={addContactDialogRef}>
|
||||
<mdui-text-field clearable label="对话 ID / 用户 ID / 用户名" ref={inputTargetRef as any} onKeyDown={(event) => {
|
||||
if (event.key == 'Enter')
|
||||
addContact()
|
||||
}}></mdui-text-field>
|
||||
<mdui-button slot="action" variant="text" onClick={() => addContactDialogRef.current!.open = false}>取消</mdui-button>
|
||||
<mdui-button slot="action" variant="text" onClick={() => addContact()}>添加</mdui-button>
|
||||
</mdui-dialog>
|
||||
)
|
||||
}
|
||||
@@ -1,111 +0,0 @@
|
||||
import React from 'react'
|
||||
import Chat from "../../api/client_data/Chat.ts"
|
||||
import useAsyncEffect from "../useAsyncEffect.ts"
|
||||
import Client from "../../api/Client.ts"
|
||||
import data from "../../Data.ts"
|
||||
import { dialog, Dialog } from "mdui"
|
||||
import Avatar from "../Avatar.tsx"
|
||||
import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
|
||||
import User from "../../api/client_data/User.ts"
|
||||
import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
|
||||
import openImageViewer from "../openImageViewer.ts"
|
||||
import EventBus from "../../EventBus.ts"
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
chat?: Chat
|
||||
openChatFragment: (id: string) => void
|
||||
chatInfoDialogRef: React.MutableRefObject<Dialog>
|
||||
sharedFavouriteChats: Chat[]
|
||||
}
|
||||
|
||||
export default function ChatInfoDialog({ chat, chatInfoDialogRef, openChatFragment, sharedFavouriteChats }: Args) {
|
||||
const [favourited, setIsFavourited] = React.useState(false)
|
||||
|
||||
React.useEffect(() => {
|
||||
setIsFavourited(sharedFavouriteChats.map((v) => v.id).indexOf(chat?.id || '') != -1)
|
||||
})
|
||||
|
||||
const [userId, setUserId] = React.useState<string | null>(null)
|
||||
useAsyncEffect(async () => {
|
||||
if (chat?.type == 'private') {
|
||||
const re = await Client.invoke("Chat.getAnotherUserIdFromPrivate", {
|
||||
token: data.access_token,
|
||||
target: chat.id,
|
||||
})
|
||||
if (re.code != 200)
|
||||
return checkApiSuccessOrSncakbar(re, '获取用户失败')
|
||||
setUserId(re.data!.user_id as string)
|
||||
}
|
||||
}, [chat, sharedFavouriteChats])
|
||||
|
||||
const avatarUrl = getUrlForFileByHash(chat?.avatar_file_hash as string)
|
||||
|
||||
return (
|
||||
<mdui-dialog close-on-overlay-click close-on-esc ref={chatInfoDialogRef}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<Avatar src={avatarUrl} text={chat?.nickname as string} style={{
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
}} onClick={() => avatarUrl && openImageViewer(avatarUrl)} />
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
marginLeft: '15px',
|
||||
marginRight: '15px',
|
||||
fontSize: '16.5px',
|
||||
flexDirection: 'column',
|
||||
}}>
|
||||
<span style={{
|
||||
fontSize: '16.5px'
|
||||
}}>{chat?.title}</span>
|
||||
<span style={{
|
||||
fontSize: '10.5px',
|
||||
marginTop: '3px',
|
||||
color: 'rgb(var(--mdui-color-secondary))',
|
||||
}}>({chat?.type}) ID: {chat?.type == 'private' ? userId : chat?.id}</span>
|
||||
</div>
|
||||
</div>
|
||||
<mdui-divider style={{
|
||||
marginTop: "10px",
|
||||
}}></mdui-divider>
|
||||
|
||||
<mdui-list>
|
||||
<mdui-list-item icon={favourited ? "favorite_border" : "favorite"} rounded onClick={() => dialog({
|
||||
headline: favourited ? "取消收藏对话" : "收藏对话",
|
||||
description: favourited ? "确定从收藏对话列表中移除吗? (虽然这不会导致聊天记录丢失)" : "确定要添加到收藏对话列表吗?",
|
||||
actions: [
|
||||
{
|
||||
text: "取消",
|
||||
onClick: () => {
|
||||
return true
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "确定",
|
||||
onClick: () => {
|
||||
; (async () => {
|
||||
const re = await Client.invoke(favourited ? "User.removeContacts" : "User.addContacts", {
|
||||
token: data.access_token,
|
||||
targets: [
|
||||
chat!.id
|
||||
],
|
||||
})
|
||||
if (re.code != 200)
|
||||
checkApiSuccessOrSncakbar(re, favourited ? "取消收藏失败" : "收藏失败")
|
||||
EventBus.emit('ContactsList.updateContacts')
|
||||
})()
|
||||
return true
|
||||
},
|
||||
}
|
||||
],
|
||||
})}>{favourited ? '取消收藏' : '收藏对话'}</mdui-list-item>
|
||||
<mdui-list-item icon="chat" rounded onClick={() => {
|
||||
chatInfoDialogRef.current!.open = false
|
||||
openChatFragment(chat!.id)
|
||||
}}>打开对话</mdui-list-item>
|
||||
</mdui-list>
|
||||
</mdui-dialog>
|
||||
)
|
||||
}
|
||||
@@ -1,54 +0,0 @@
|
||||
import * as React from 'react'
|
||||
import { Button, Dialog, TextField } from "mdui"
|
||||
import useEventListener from "../useEventListener.ts"
|
||||
import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
|
||||
import Client from "../../api/Client.ts"
|
||||
|
||||
import * as CryptoJS from 'crypto-js'
|
||||
import data from "../../Data.ts"
|
||||
import EventBus from "../../EventBus.ts"
|
||||
|
||||
interface Refs {
|
||||
createGroupDialogRef: React.MutableRefObject<Dialog | null>
|
||||
}
|
||||
|
||||
export default function CreateGroupDialog({
|
||||
createGroupDialogRef,
|
||||
}: Refs) {
|
||||
const inputGroupTitleRef = React.useRef<TextField>(null)
|
||||
const inputGroupNameRef = React.useRef<TextField>(null)
|
||||
|
||||
async function createGroup() {
|
||||
const re = await Client.invoke("Chat.createGroup", {
|
||||
title: inputGroupTitleRef.current!.value,
|
||||
name: inputGroupNameRef.current!.value,
|
||||
token: data.access_token,
|
||||
})
|
||||
|
||||
if (checkApiSuccessOrSncakbar(re, "添加失敗")) return
|
||||
snackbar({
|
||||
message: "创建成功!",
|
||||
placement: "top",
|
||||
})
|
||||
EventBus.emit('ContactsList.updateContacts')
|
||||
|
||||
inputGroupTitleRef.current!.value = ''
|
||||
inputGroupNameRef.current!.value = ''
|
||||
createGroupDialogRef.current!.open = false
|
||||
}
|
||||
|
||||
return (
|
||||
<mdui-dialog close-on-overlay-click close-on-esc headline="创建群组" ref={createGroupDialogRef}>
|
||||
<mdui-text-field clearable label="群组名称" ref={inputGroupTitleRef as any} onKeyDown={(event) => {
|
||||
if (event.key == 'Enter')
|
||||
inputGroupNameRef.current!.click()
|
||||
}}></mdui-text-field>
|
||||
<mdui-text-field style={{ marginTop: "10px", }} clearable label="群组别名 (可选, 供查询)" ref={inputGroupNameRef as any} onKeyDown={(event) => {
|
||||
if (event.key == 'Enter')
|
||||
createGroup()
|
||||
}}></mdui-text-field>
|
||||
<mdui-button slot="action" variant="text" onClick={() => createGroupDialogRef.current!.open = false}>取消</mdui-button>
|
||||
<mdui-button slot="action" variant="text" onClick={() => createGroup()}>创建</mdui-button>
|
||||
</mdui-dialog>
|
||||
)
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import * as React from 'react'
|
||||
import { Button, Dialog, TextField } from "mdui"
|
||||
import useEventListener from "../useEventListener.ts"
|
||||
import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
|
||||
import Client from "../../api/Client.ts"
|
||||
|
||||
import * as CryptoJS from 'crypto-js'
|
||||
import data from "../../Data.ts";
|
||||
|
||||
interface Refs {
|
||||
loginInputAccountRef: React.MutableRefObject<TextField | null>
|
||||
loginInputPasswordRef: React.MutableRefObject<TextField | null>
|
||||
loginDialogRef: React.MutableRefObject<Dialog | null>
|
||||
registerDialogRef: React.MutableRefObject<Dialog | null>
|
||||
}
|
||||
|
||||
export default function LoginDialog({
|
||||
loginInputAccountRef,
|
||||
loginInputPasswordRef,
|
||||
loginDialogRef,
|
||||
registerDialogRef
|
||||
}: Refs) {
|
||||
const loginButtonRef = React.useRef<Button>(null)
|
||||
const registerButtonRef = React.useRef<Button>(null)
|
||||
useEventListener(registerButtonRef, 'click', () => registerDialogRef.current!.open = true)
|
||||
useEventListener(loginButtonRef, 'click', async () => {
|
||||
const account = loginInputAccountRef.current!.value
|
||||
const password = loginInputPasswordRef.current!.value
|
||||
|
||||
const re = await Client.invoke("User.login", {
|
||||
account: account,
|
||||
password: CryptoJS.SHA256(password).toString(CryptoJS.enc.Hex),
|
||||
})
|
||||
|
||||
if (checkApiSuccessOrSncakbar(re, "登录失败")) return
|
||||
|
||||
data.access_token = re.data!.access_token as string
|
||||
data.refresh_token = re.data!.refresh_token as string
|
||||
data.apply()
|
||||
location.reload()
|
||||
})
|
||||
return (
|
||||
<mdui-dialog headline="登录" ref={loginDialogRef}>
|
||||
|
||||
<mdui-text-field label="用户 ID / 用户名" ref={loginInputAccountRef as any}></mdui-text-field>
|
||||
<div style={{
|
||||
height: "10px",
|
||||
}}></div>
|
||||
<mdui-text-field label="密码" type="password" toggle-password ref={loginInputPasswordRef as any}></mdui-text-field>
|
||||
|
||||
<mdui-button slot="action" variant="text" ref={registerButtonRef}>注册</mdui-button>
|
||||
<mdui-button slot="action" variant="text" ref={loginButtonRef}>登录</mdui-button>
|
||||
</mdui-dialog>
|
||||
)
|
||||
}
|
||||
@@ -1,198 +0,0 @@
|
||||
import * as React from 'react'
|
||||
import { Button, Dialog, TextField, dialog } from "mdui"
|
||||
import useEventListener from "../useEventListener.ts"
|
||||
import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
|
||||
import Client from "../../api/Client.ts"
|
||||
|
||||
import * as CryptoJS from 'crypto-js'
|
||||
import data from "../../Data.ts"
|
||||
import Avatar from "../Avatar.tsx"
|
||||
import User from "../../api/client_data/User.ts"
|
||||
import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
|
||||
|
||||
interface Refs {
|
||||
myProfileDialogRef: React.MutableRefObject<Dialog>
|
||||
user: User
|
||||
}
|
||||
|
||||
export default function MyProfileDialog({
|
||||
myProfileDialogRef,
|
||||
user
|
||||
}: Refs) {
|
||||
const editAvatarButtonRef = React.useRef<HTMLElement>(null)
|
||||
const chooseAvatarFileRef = React.useRef<HTMLInputElement>(null)
|
||||
useEventListener(editAvatarButtonRef, 'click', () => {
|
||||
chooseAvatarFileRef.current!.value = ''
|
||||
chooseAvatarFileRef.current!.click()
|
||||
})
|
||||
useEventListener(chooseAvatarFileRef, 'change', async (_e) => {
|
||||
const file = chooseAvatarFileRef.current!.files?.[0] as File
|
||||
if (file == null) return
|
||||
|
||||
let re = await Client.uploadFileLikeApi(
|
||||
'avatar',
|
||||
file
|
||||
)
|
||||
if (checkApiSuccessOrSncakbar(re, "上传失败")) return
|
||||
const hash = re.data!.file_hash
|
||||
re = await Client.invoke("User.setAvatar", {
|
||||
token: data.access_token,
|
||||
file_hash: hash
|
||||
})
|
||||
|
||||
if (checkApiSuccessOrSncakbar(re, "修改失败")) return
|
||||
snackbar({
|
||||
message: "修改成功 (刷新页面以更新)",
|
||||
placement: "top",
|
||||
})
|
||||
})
|
||||
|
||||
const userProfileEditDialogRef = React.useRef<Dialog>(null)
|
||||
const editNickNameRef = React.useRef<TextField>(null)
|
||||
const editUserNameRef = React.useRef<TextField>(null)
|
||||
|
||||
const accountSettingsDialogRef = React.useRef<Dialog>(null)
|
||||
|
||||
const editPasswordDialogRef = React.useRef<Dialog>(null)
|
||||
const editPasswordOldInputRef = React.useRef<TextField>(null)
|
||||
const editPasswordNewInputRef = React.useRef<TextField>(null)
|
||||
|
||||
return (<>
|
||||
{
|
||||
// 公用 - 資料卡
|
||||
}
|
||||
<mdui-dialog close-on-overlay-click close-on-esc ref={myProfileDialogRef}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<Avatar src={getUrlForFileByHash(user?.avatar_file_hash)} text={user?.nickname} style={{
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
}} />
|
||||
<span style={{
|
||||
marginLeft: "15px",
|
||||
fontSize: '16.5px',
|
||||
}}>{user?.nickname}</span>
|
||||
</div>
|
||||
<mdui-divider style={{
|
||||
marginTop: "10px",
|
||||
}}></mdui-divider>
|
||||
|
||||
<mdui-list>
|
||||
<mdui-list-item icon="edit" rounded onClick={() => userProfileEditDialogRef.current!.open = true}>编辑资料</mdui-list-item>
|
||||
<mdui-list-item icon="settings" rounded onClick={() => accountSettingsDialogRef.current!.open = true}>账号设定</mdui-list-item>
|
||||
{/*
|
||||
<mdui-list-item icon="lock" rounded>隱私設定</mdui-list-item>
|
||||
*/}
|
||||
<mdui-list-item icon="logout" rounded onClick={() => dialog({
|
||||
headline: "退出登录",
|
||||
description: "请确保在退出登录前, 设定了用户名或者已经记录下了用户 ID, 以免无法登录账号",
|
||||
actions: [
|
||||
{
|
||||
text: "取消",
|
||||
onClick: () => {
|
||||
return true
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "确定",
|
||||
onClick: () => {
|
||||
data.refresh_token = ''
|
||||
data.access_token = ''
|
||||
data.apply()
|
||||
location.reload()
|
||||
return true
|
||||
},
|
||||
}
|
||||
],
|
||||
closeOnEsc: true,
|
||||
closeOnOverlayClick: true,
|
||||
})}>退出登录</mdui-list-item>
|
||||
</mdui-list>
|
||||
</mdui-dialog>
|
||||
{
|
||||
// 账号设定
|
||||
}
|
||||
<mdui-dialog close-on-overlay-click close-on-esc ref={accountSettingsDialogRef} headline="账号设定">
|
||||
<mdui-list-item icon="edit" rounded onClick={() => editPasswordDialogRef.current!.open = true}>修改密码</mdui-list-item>
|
||||
<mdui-button slot="action" variant="text" onClick={() => accountSettingsDialogRef.current!.open = false}>关闭</mdui-button>
|
||||
</mdui-dialog>
|
||||
<mdui-dialog close-on-overlay-click close-on-esc ref={editPasswordDialogRef} headline="修改密码">
|
||||
<mdui-text-field label="旧密码" type="password" toggle-password ref={editPasswordOldInputRef as any}></mdui-text-field>
|
||||
<div style={{
|
||||
height: "10px",
|
||||
}}></div>
|
||||
<mdui-text-field label="新密码" type="password" toggle-password ref={editPasswordNewInputRef as any}></mdui-text-field>
|
||||
|
||||
<mdui-button slot="action" variant="text" onClick={() => editPasswordDialogRef.current!.open = false}>关闭</mdui-button>
|
||||
<mdui-button slot="action" variant="text" onClick={async () => {
|
||||
const re = await Client.invoke("User.resetPassword", {
|
||||
token: data.access_token,
|
||||
old_password: CryptoJS.SHA256(editPasswordOldInputRef.current?.value || '').toString(CryptoJS.enc.Hex),
|
||||
new_password: CryptoJS.SHA256(editPasswordNewInputRef.current?.value || '').toString(CryptoJS.enc.Hex),
|
||||
})
|
||||
|
||||
if (checkApiSuccessOrSncakbar(re, "修改失败")) return
|
||||
snackbar({
|
||||
message: "修改成功 (其他客户端需要重新登录)",
|
||||
placement: "top",
|
||||
})
|
||||
data.access_token = re.data!.access_token as string
|
||||
data.refresh_token = re.data!.refresh_token as string
|
||||
data.apply()
|
||||
editPasswordDialogRef.current!.open = false
|
||||
}}>确定</mdui-button>
|
||||
</mdui-dialog>
|
||||
{
|
||||
// 個人資料編輯
|
||||
}
|
||||
<mdui-dialog close-on-overlay-click close-on-esc ref={userProfileEditDialogRef}>
|
||||
<div style={{
|
||||
display: "none"
|
||||
}}>
|
||||
<input type="file" name="选择头像" ref={chooseAvatarFileRef}
|
||||
accept="image/*" />
|
||||
</div>
|
||||
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}}>
|
||||
<Avatar src={getUrlForFileByHash(user?.avatar_file_hash)} text={user?.nickname} avatarRef={editAvatarButtonRef} style={{
|
||||
width: '50px',
|
||||
height: '50px',
|
||||
}} />
|
||||
<mdui-text-field variant="outlined" placeholder="昵称" ref={editNickNameRef as any} style={{
|
||||
marginLeft: "15px",
|
||||
}} value={user?.nickname}></mdui-text-field>
|
||||
</div>
|
||||
<mdui-divider style={{
|
||||
marginTop: "10px",
|
||||
}}></mdui-divider>
|
||||
|
||||
<mdui-text-field style={{ marginTop: "10px", }} variant="outlined" label="用户 ID" value={user?.id || ''} readonly onClick={(e) => {
|
||||
const input = e.target as HTMLInputElement
|
||||
input.select()
|
||||
input.setSelectionRange(0, 1145141919810)
|
||||
}}></mdui-text-field>
|
||||
<mdui-text-field style={{ marginTop: "20px", }} variant="outlined" label="用户名" value={user?.username || ''} ref={editUserNameRef as any}></mdui-text-field>
|
||||
|
||||
<mdui-button slot="action" variant="text" onClick={() => userProfileEditDialogRef.current!.open = false}>取消</mdui-button>
|
||||
<mdui-button slot="action" variant="text" onClick={async () => {
|
||||
const re = await Client.invoke("User.updateProfile", {
|
||||
token: data.access_token,
|
||||
nickname: editNickNameRef.current?.value,
|
||||
username: editUserNameRef.current?.value,
|
||||
})
|
||||
|
||||
if (checkApiSuccessOrSncakbar(re, "修改失败")) return
|
||||
snackbar({
|
||||
message: "修改成功 (刷新页面以更新)",
|
||||
placement: "top",
|
||||
})
|
||||
userProfileEditDialogRef.current!.open = false
|
||||
}}>更新</mdui-button>
|
||||
</mdui-dialog>
|
||||
</>)
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
import * as React from 'react'
|
||||
import { Button, Dialog, TextField } from "mdui";
|
||||
import useEventListener from "../useEventListener.ts";
|
||||
import Client from "../../api/Client.ts";
|
||||
import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts";
|
||||
|
||||
import * as CryptoJS from 'crypto-js'
|
||||
|
||||
interface Refs {
|
||||
loginInputAccountRef: React.MutableRefObject<TextField | null>
|
||||
loginInputPasswordRef: React.MutableRefObject<TextField | null>
|
||||
registerInputUserNameRef: React.MutableRefObject<TextField | null>
|
||||
registerInputNickNameRef: React.MutableRefObject<TextField | null>
|
||||
registerInputPasswordRef: React.MutableRefObject<TextField | null>
|
||||
registerDialogRef: React.MutableRefObject<Dialog | null>
|
||||
}
|
||||
|
||||
export default function RegisterDialog({
|
||||
loginInputAccountRef,
|
||||
loginInputPasswordRef,
|
||||
registerInputUserNameRef,
|
||||
registerInputNickNameRef,
|
||||
registerInputPasswordRef,
|
||||
registerDialogRef
|
||||
}: Refs) {
|
||||
const registerBackButtonRef = React.useRef<Button>(null)
|
||||
const doRegisterButtonRef = React.useRef<Button>(null)
|
||||
useEventListener(registerBackButtonRef, 'click', () => registerDialogRef.current!.open = false)
|
||||
useEventListener(doRegisterButtonRef, 'click', async () => {
|
||||
const username = registerInputUserNameRef.current!.value
|
||||
const re = await Client.invoke("User.register", {
|
||||
username: username,
|
||||
nickname: registerInputNickNameRef.current!.value,
|
||||
password: CryptoJS.SHA256(registerInputPasswordRef.current!.value).toString(CryptoJS.enc.Hex),
|
||||
})
|
||||
|
||||
if (checkApiSuccessOrSncakbar(re, "注册失败")) return
|
||||
loginInputAccountRef.current!.value = username == "" ? re.data!.userid as string : username
|
||||
loginInputPasswordRef.current!.value = registerInputPasswordRef.current!.value
|
||||
|
||||
registerInputUserNameRef.current!.value = ""
|
||||
registerInputNickNameRef.current!.value = ""
|
||||
registerInputPasswordRef.current!.value = ""
|
||||
registerDialogRef.current!.open = false
|
||||
snackbar({
|
||||
message: "注册成功!",
|
||||
placement: "top",
|
||||
})
|
||||
})
|
||||
return (
|
||||
<mdui-dialog headline="注册" ref={registerDialogRef}>
|
||||
|
||||
<mdui-text-field label="用户名 (可选)" ref={registerInputUserNameRef as any}></mdui-text-field>
|
||||
<div style={{
|
||||
height: "10px",
|
||||
}}></div>
|
||||
<mdui-text-field label="昵称" ref={registerInputNickNameRef as any}></mdui-text-field>
|
||||
<div style={{
|
||||
height: "10px",
|
||||
}}></div>
|
||||
<mdui-text-field label="密码" type="password" toggle-password ref={registerInputPasswordRef as any}></mdui-text-field>
|
||||
|
||||
<mdui-button slot="action" variant="text" ref={registerBackButtonRef}>返回</mdui-button>
|
||||
<mdui-button slot="action" variant="text" ref={doRegisterButtonRef}>注册</mdui-button>
|
||||
</mdui-dialog>
|
||||
)
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export default function isMobileUI() {
|
||||
return new URL(location.href).searchParams.get('mobile') == 'true' || /Mobi|Android|iPhone/i.test(navigator.userAgent)
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
import { TextField } from "mdui"
|
||||
import useEventListener from "../useEventListener.ts"
|
||||
import RecentsListItem from "./RecentsListItem.tsx"
|
||||
import React from "react"
|
||||
import useAsyncEffect from "../useAsyncEffect.ts"
|
||||
import Client from "../../api/Client.ts"
|
||||
import { checkApiSuccessOrSncakbar } from "../snackbar.ts"
|
||||
import data from "../../Data.ts"
|
||||
import EventBus from "../../EventBus.ts"
|
||||
import isMobileUI from "../isMobileUI.ts"
|
||||
import Chat from "../../api/client_data/Chat.ts"
|
||||
import AllChatsListItem from "./AllChatsListItem.tsx"
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
display: boolean
|
||||
currentChatId: string
|
||||
openChatInfoDialog: (chat: Chat) => void
|
||||
}
|
||||
|
||||
export default function AllChatsList({
|
||||
currentChatId,
|
||||
display,
|
||||
openChatInfoDialog,
|
||||
...props
|
||||
}: Args) {
|
||||
const searchRef = React.useRef<HTMLElement>(null)
|
||||
const [searchText, setSearchText] = React.useState('')
|
||||
const [allChatsList, setAllChatsList] = React.useState<Chat[]>([])
|
||||
|
||||
useEventListener(searchRef, 'input', (e) => {
|
||||
setSearchText((e.target as unknown as TextField).value)
|
||||
})
|
||||
|
||||
useAsyncEffect(async () => {
|
||||
async function updateAllChats() {
|
||||
const re = await Client.invoke("User.getMyAllChats", {
|
||||
token: data.access_token,
|
||||
})
|
||||
if (re.code != 200) {
|
||||
if (re.code != 401 && re.code != 400) checkApiSuccessOrSncakbar(re, "获取所有对话列表失败")
|
||||
return
|
||||
}
|
||||
|
||||
setAllChatsList(re.data!.all_chats as Chat[])
|
||||
}
|
||||
updateAllChats()
|
||||
EventBus.on('AllChatsList.updateAllChats', () => updateAllChats())
|
||||
return () => {
|
||||
EventBus.off('AllChatsList.updateAllChats')
|
||||
}
|
||||
})
|
||||
|
||||
return <mdui-list style={{
|
||||
overflowY: 'auto',
|
||||
paddingRight: '10px',
|
||||
paddingLeft: '10px',
|
||||
paddingTop: '0',
|
||||
display: display ? undefined : 'none',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}} {...props}>
|
||||
<mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
|
||||
paddingTop: '12px',
|
||||
paddingBottom: '13px',
|
||||
position: 'sticky',
|
||||
top: '0',
|
||||
backgroundColor: 'rgb(var(--mdui-color-background))',
|
||||
zIndex: '10',
|
||||
}}></mdui-text-field>
|
||||
{
|
||||
allChatsList.filter((chat) =>
|
||||
searchText == '' ||
|
||||
chat.title.includes(searchText) ||
|
||||
chat.id.includes(searchText)
|
||||
).map((v) =>
|
||||
<AllChatsListItem
|
||||
active={isMobileUI() ? false : currentChatId == v.id}
|
||||
key={v.id}
|
||||
onClick={() => {
|
||||
openChatInfoDialog(v)
|
||||
}}
|
||||
chat={v} />
|
||||
)
|
||||
}
|
||||
</mdui-list>
|
||||
}
|
||||
@@ -1,29 +0,0 @@
|
||||
import { $ } from "mdui/jq"
|
||||
import Avatar from "../Avatar.tsx"
|
||||
import React from 'react'
|
||||
import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
|
||||
import Chat from "../../api/client_data/Chat.ts"
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
chat: Chat
|
||||
active?: boolean
|
||||
}
|
||||
|
||||
export default function AllChatsListItem({ chat, active, ...prop }: Args) {
|
||||
const { title, avatar_file_hash } = chat
|
||||
|
||||
const ref = React.useRef<HTMLElement>(null)
|
||||
|
||||
return (
|
||||
<mdui-list-item active={active} ref={ref} rounded style={{
|
||||
marginTop: '3px',
|
||||
marginBottom: '3px',
|
||||
width: '100%',
|
||||
}} {...prop as any}>
|
||||
<span style={{
|
||||
width: "100%",
|
||||
}}>{title}</span>
|
||||
<Avatar src={getUrlForFileByHash(avatar_file_hash as string)} text={title} slot="icon" />
|
||||
</mdui-list-item>
|
||||
)
|
||||
}
|
||||
@@ -1,171 +0,0 @@
|
||||
import React from "react"
|
||||
import ContactsListItem from "./ContactsListItem.tsx"
|
||||
import useEventListener from "../useEventListener.ts"
|
||||
import { dialog, Dialog, TextField } from "mdui"
|
||||
import Client from "../../api/Client.ts"
|
||||
import data from "../../Data.ts"
|
||||
import { checkApiSuccessOrSncakbar, snackbar } from "../snackbar.ts"
|
||||
import Chat from "../../api/client_data/Chat.ts"
|
||||
import EventBus from "../../EventBus.ts"
|
||||
import isMobileUI from "../isMobileUI.ts";
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
display: boolean
|
||||
openChatInfoDialog: (chat: Chat) => void
|
||||
addContactDialogRef: React.MutableRefObject<Dialog>
|
||||
createGroupDialogRef: React.MutableRefObject<Dialog>
|
||||
setSharedFavouriteChats: React.Dispatch<React.SetStateAction<Chat[]>>
|
||||
currentChatId: string
|
||||
}
|
||||
|
||||
export default function ContactsList({
|
||||
display,
|
||||
openChatInfoDialog,
|
||||
addContactDialogRef,
|
||||
createGroupDialogRef,
|
||||
setSharedFavouriteChats,
|
||||
currentChatId,
|
||||
...props
|
||||
}: Args) {
|
||||
const searchRef = React.useRef<HTMLElement>(null)
|
||||
const [isMultiSelecting, setIsMultiSelecting] = React.useState(false)
|
||||
const [searchText, setSearchText] = React.useState('')
|
||||
const [contactsList, setContactsList] = React.useState<Chat[]>([])
|
||||
const [checkedList, setCheckedList] = React.useState<{ [key: string]: boolean }>({})
|
||||
|
||||
useEventListener(searchRef, 'input', (e) => {
|
||||
setSearchText((e.target as unknown as TextField).value)
|
||||
})
|
||||
|
||||
React.useEffect(() => {
|
||||
async function updateContacts() {
|
||||
const re = await Client.invoke("User.getMyContacts", {
|
||||
token: data.access_token,
|
||||
})
|
||||
if (re.code != 200) {
|
||||
if (re.code != 401 && re.code != 400) checkApiSuccessOrSncakbar(re, "获取收藏对话列表失败")
|
||||
return
|
||||
}
|
||||
const ls = re.data!.contacts_list as Chat[]
|
||||
setContactsList(ls)
|
||||
setSharedFavouriteChats(ls)
|
||||
}
|
||||
updateContacts()
|
||||
EventBus.on('ContactsList.updateContacts', () => updateContacts())
|
||||
return () => {
|
||||
EventBus.off('ContactsList.updateContacts')
|
||||
}
|
||||
// 警告: 不添加 deps 導致無限執行
|
||||
}, [])
|
||||
|
||||
return <mdui-list style={{
|
||||
overflowY: 'auto',
|
||||
paddingLeft: '10px',
|
||||
paddingRight: '10px',
|
||||
paddingTop: '0',
|
||||
display: display ? undefined : 'none',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}} {...props}>
|
||||
<div style={{
|
||||
position: 'sticky',
|
||||
top: '0',
|
||||
backgroundColor: 'rgb(var(--mdui-color-background))',
|
||||
zIndex: '10',
|
||||
}}>
|
||||
<mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
|
||||
paddingTop: '12px',
|
||||
}}></mdui-text-field>
|
||||
<mdui-list-item rounded style={{
|
||||
marginTop: '13px',
|
||||
width: '100%',
|
||||
}} icon="person_add" onClick={() => addContactDialogRef.current!.open = true}>添加收藏对话</mdui-list-item>
|
||||
<mdui-list-item rounded style={{
|
||||
width: '100%',
|
||||
}} icon="refresh" onClick={() => EventBus.emit('ContactsList.updateContacts')}>刷新</mdui-list-item>
|
||||
<mdui-list-item rounded style={{
|
||||
width: '100%',
|
||||
}} icon={isMultiSelecting ? "done" : "edit"} onClick={() => {
|
||||
if (isMultiSelecting)
|
||||
setCheckedList({})
|
||||
setIsMultiSelecting(!isMultiSelecting)
|
||||
}}>{isMultiSelecting ? "关闭多选" : "多选模式"}</mdui-list-item>
|
||||
{
|
||||
isMultiSelecting && <>
|
||||
<mdui-list-item rounded style={{
|
||||
width: '100%',
|
||||
}} icon="delete" onClick={() => dialog({
|
||||
headline: "删除所选",
|
||||
description: "确定要删除所选的收藏对话吗? 这并不会删除您的聊天记录, 也不会丢失对话成员身份",
|
||||
closeOnEsc: true,
|
||||
closeOnOverlayClick: true,
|
||||
actions: [
|
||||
{
|
||||
text: "取消",
|
||||
onClick: () => {
|
||||
return true
|
||||
},
|
||||
},
|
||||
{
|
||||
text: "确定",
|
||||
onClick: async () => {
|
||||
const ls = Object.keys(checkedList).filter((chatId) => checkedList[chatId] == true)
|
||||
const re = await Client.invoke("User.removeContacts", {
|
||||
token: data.access_token,
|
||||
targets: ls,
|
||||
})
|
||||
if (re.code != 200)
|
||||
checkApiSuccessOrSncakbar(re, "删除所选收藏失败")
|
||||
else {
|
||||
setCheckedList({})
|
||||
setIsMultiSelecting(false)
|
||||
EventBus.emit('ContactsList.updateContacts')
|
||||
snackbar({
|
||||
message: "已删除所选",
|
||||
placement: "top",
|
||||
action: "撤销操作",
|
||||
onActionClick: async () => {
|
||||
const re = await Client.invoke("User.addContacts", {
|
||||
token: data.access_token,
|
||||
targets: ls,
|
||||
})
|
||||
if (re.code != 200)
|
||||
checkApiSuccessOrSncakbar(re, "恢复所选收藏失败")
|
||||
EventBus.emit('ContactsList.updateContacts')
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
}
|
||||
],
|
||||
})}>删除所选</mdui-list-item>
|
||||
</>
|
||||
}
|
||||
<div style={{
|
||||
height: "10px",
|
||||
}}></div>
|
||||
</div>
|
||||
|
||||
{
|
||||
contactsList.filter((chat) =>
|
||||
searchText == '' ||
|
||||
chat.title.includes(searchText) ||
|
||||
chat.id.includes(searchText)
|
||||
).map((v) =>
|
||||
<ContactsListItem
|
||||
active={isMultiSelecting ? checkedList[v.id] == true : (isMobileUI() ? false : currentChatId == v.id)}
|
||||
onClick={() => {
|
||||
if (isMultiSelecting)
|
||||
setCheckedList({
|
||||
...checkedList,
|
||||
[v.id]: !checkedList[v.id],
|
||||
})
|
||||
else
|
||||
openChatInfoDialog(v)
|
||||
}}
|
||||
key={v.id}
|
||||
contact={v} />
|
||||
)
|
||||
}
|
||||
</mdui-list>
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import Chat from "../../api/client_data/Chat.ts"
|
||||
import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
|
||||
import Avatar from "../Avatar.tsx"
|
||||
import React from 'react'
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
contact: Chat
|
||||
active?: boolean
|
||||
}
|
||||
|
||||
export default function ContactsListItem({ contact, ...prop }: Args) {
|
||||
const { id, title, avatar_file_hash } = contact
|
||||
const ref = React.useRef<HTMLElement>(null)
|
||||
|
||||
return (
|
||||
<mdui-list-item ref={ref} rounded style={{
|
||||
marginTop: '3px',
|
||||
marginBottom: '3px',
|
||||
width: '100%',
|
||||
}} {...prop as any}>
|
||||
<span style={{
|
||||
width: "100%",
|
||||
}}>{title}</span>
|
||||
<Avatar src={getUrlForFileByHash(avatar_file_hash as string)} text={title} slot="icon" />
|
||||
</mdui-list-item>
|
||||
)
|
||||
}
|
||||
@@ -1,86 +0,0 @@
|
||||
import { TextField } from "mdui"
|
||||
import RecentChat from "../../api/client_data/RecentChat.ts"
|
||||
import useEventListener from "../useEventListener.ts"
|
||||
import RecentsListItem from "./RecentsListItem.tsx"
|
||||
import React from "react"
|
||||
import useAsyncEffect from "../useAsyncEffect.ts"
|
||||
import Client from "../../api/Client.ts"
|
||||
import { checkApiSuccessOrSncakbar } from "../snackbar.ts";
|
||||
import data from "../../Data.ts";
|
||||
import EventBus from "../../EventBus.ts";
|
||||
import isMobileUI from "../isMobileUI.ts";
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
display: boolean
|
||||
currentChatId: string
|
||||
openChatFragment: (id: string) => void
|
||||
}
|
||||
|
||||
export default function RecentsList({
|
||||
currentChatId,
|
||||
display,
|
||||
openChatFragment,
|
||||
...props
|
||||
}: Args) {
|
||||
const searchRef = React.useRef<HTMLElement>(null)
|
||||
const [searchText, setSearchText] = React.useState('')
|
||||
const [recentsList, setRecentsList] = React.useState<RecentChat[]>([])
|
||||
|
||||
useEventListener(searchRef, 'input', (e) => {
|
||||
setSearchText((e.target as unknown as TextField).value)
|
||||
})
|
||||
|
||||
useAsyncEffect(async () => {
|
||||
async function updateRecents() {
|
||||
const re = await Client.invoke("User.getMyRecentChats", {
|
||||
token: data.access_token,
|
||||
})
|
||||
if (re.code != 200) {
|
||||
if (re.code != 401 && re.code != 400) checkApiSuccessOrSncakbar(re, "获取最近对话列表失败")
|
||||
return
|
||||
}
|
||||
|
||||
setRecentsList(re.data!.recent_chats as RecentChat[])
|
||||
}
|
||||
updateRecents()
|
||||
EventBus.on('RecentsList.updateRecents', () => updateRecents())
|
||||
const id = setInterval(() => updateRecents(), 15 * 1000)
|
||||
return () => {
|
||||
EventBus.off('RecentsList.updateRecents')
|
||||
clearInterval(id)
|
||||
}
|
||||
})
|
||||
|
||||
return <mdui-list style={{
|
||||
overflowY: 'auto',
|
||||
paddingRight: '10px',
|
||||
paddingLeft: '10px',
|
||||
paddingTop: '0',
|
||||
display: display ? undefined : 'none',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}} {...props}>
|
||||
<mdui-text-field icon="search" type="search" clearable ref={searchRef} variant="outlined" placeholder="搜索..." style={{
|
||||
paddingTop: '12px',
|
||||
marginBottom: '13px',
|
||||
position: 'sticky',
|
||||
top: '0',
|
||||
backgroundColor: 'rgb(var(--mdui-color-background))',
|
||||
zIndex: '10',
|
||||
}}></mdui-text-field>
|
||||
{
|
||||
recentsList.filter((chat) =>
|
||||
searchText == '' ||
|
||||
chat.title.includes(searchText) ||
|
||||
chat.id.includes(searchText) ||
|
||||
chat.content.includes(searchText)
|
||||
).map((v) =>
|
||||
<RecentsListItem
|
||||
active={isMobileUI() ? false : currentChatId == v.id}
|
||||
openChatFragment={() => openChatFragment(v.id)}
|
||||
key={v.id}
|
||||
recentChat={v} />
|
||||
)
|
||||
}
|
||||
</mdui-list>
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
import { $ } from "mdui/jq"
|
||||
import RecentChat from "../../api/client_data/RecentChat.ts"
|
||||
import Avatar from "../Avatar.tsx"
|
||||
import React from 'react'
|
||||
import getUrlForFileByHash from "../../getUrlForFileByHash.ts"
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
recentChat: RecentChat
|
||||
openChatFragment: (id: string) => void
|
||||
active?: boolean
|
||||
}
|
||||
|
||||
export default function RecentsListItem({ recentChat, openChatFragment, active }: Args) {
|
||||
const { id, title, avatar_file_hash, content } = recentChat
|
||||
|
||||
const itemRef = React.useRef<HTMLElement>(null)
|
||||
React.useEffect(() => {
|
||||
$(itemRef.current!.shadowRoot).find('.headline').css('margin-top', '3px')
|
||||
})
|
||||
return (
|
||||
<mdui-list-item rounded style={{
|
||||
marginTop: '3px',
|
||||
marginBottom: '3px',
|
||||
}} onClick={() => openChatFragment(id)} active={active} ref={itemRef}>
|
||||
{title}
|
||||
<Avatar src={getUrlForFileByHash(avatar_file_hash as string)} text={title} slot="icon" />
|
||||
<span slot="description"
|
||||
style={{
|
||||
width: "100%",
|
||||
display: "inline-block",
|
||||
whiteSpace: "nowrap", /* 禁止换行 */
|
||||
overflow: "hidden", /* 隐藏溢出内容 */
|
||||
textOverflow: "ellipsis", /* 显示省略号 */
|
||||
}}>{content}</span>
|
||||
</mdui-list-item>
|
||||
)
|
||||
}
|
||||
@@ -1,17 +0,0 @@
|
||||
import { $ } from 'mdui/jq'
|
||||
import 'pinch-zoom-element'
|
||||
export default function openImageViewer(src: string) {
|
||||
$('#image-viewer-dialog-inner').empty()
|
||||
|
||||
const e = new Image()
|
||||
e.onload = () => ($('#image-viewer-dialog-inner').get(0) as any).scaleTo(0.1, {
|
||||
// Transform origin. Can be a number, or string percent, eg "50%"
|
||||
originX: '50%',
|
||||
originY: '50%',
|
||||
// Should the transform origin be relative to the container, or content?
|
||||
relativeTo: 'container',
|
||||
})
|
||||
e.src = src
|
||||
$('#image-viewer-dialog-inner').append(e)
|
||||
$('#image-viewer-dialog').attr('open', 'true')
|
||||
}
|
||||
@@ -1,16 +0,0 @@
|
||||
import { ListItem } from "mdui"
|
||||
|
||||
interface Args extends React.HTMLAttributes<ListItem> {
|
||||
title: string
|
||||
description?: string
|
||||
icon: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export default function Preference({ title, icon, disabled, description, ...props }: Args) {
|
||||
// @ts-ignore: 为什么 ...props 要说参数不兼容呢?
|
||||
return <mdui-list-item disabled={disabled ? true : undefined} rounded icon={icon} {...props}>
|
||||
{title}
|
||||
{description && <span slot="description">{description}</span>}
|
||||
</mdui-list-item>
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
export default function PreferenceHeader({ title }: {
|
||||
title: string
|
||||
}) {
|
||||
return <mdui-list-subheader>{title}</mdui-list-subheader>
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
export default function PreferenceLayout({ children, ...props }: React.HTMLAttributes<HTMLElement>) {
|
||||
return <mdui-list style={{
|
||||
marginLeft: '15px',
|
||||
marginRight: '15px',
|
||||
}} {...props}>
|
||||
{children}
|
||||
</mdui-list>
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
export default class PreferenceStore<T extends object> {
|
||||
declare onUpdate: (value: T, oldvalue: T) => void
|
||||
declare state: T
|
||||
declare setState: React.Dispatch<React.SetStateAction<T>>
|
||||
constructor() {
|
||||
const _ = React.useState({} as T)
|
||||
this.state = _[0]
|
||||
this.setState = _[1]
|
||||
}
|
||||
|
||||
createUpdater() {
|
||||
return (key: string, value: unknown) => {
|
||||
const oldvalue = this.state
|
||||
const newValue = {
|
||||
...this.state,
|
||||
[key]: value,
|
||||
}
|
||||
this.setState(newValue)
|
||||
this.onUpdate?.(newValue, oldvalue)
|
||||
}
|
||||
}
|
||||
setOnUpdate(onUpdate: (value: T, oldvalue: T) => void) {
|
||||
this.onUpdate = onUpdate
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
import React from 'react'
|
||||
|
||||
// deno-lint-ignore no-explicit-any
|
||||
const PreferenceUpdater = React.createContext<(key: string, value: unknown) => void>(null as any)
|
||||
|
||||
export default PreferenceUpdater
|
||||
@@ -1,43 +0,0 @@
|
||||
import React from 'react'
|
||||
import { Dropdown } from 'mdui'
|
||||
import useEventListener from '../useEventListener.ts'
|
||||
import PreferenceUpdater from "./PreferenceUpdater.ts"
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
title: string
|
||||
icon: string
|
||||
id: string
|
||||
disabled?: boolean
|
||||
selections: { [id: string]: string }
|
||||
state: string
|
||||
}
|
||||
|
||||
export default function SelectPreference({ title, icon, id: preferenceId, selections, state, disabled }: Args) {
|
||||
const updater = React.useContext(PreferenceUpdater)
|
||||
|
||||
const dropDownRef = React.useRef<Dropdown>(null)
|
||||
const [isDropDownOpen, setDropDownOpen] = React.useState(false)
|
||||
|
||||
useEventListener(dropDownRef, 'closed', () => {
|
||||
setDropDownOpen(false)
|
||||
})
|
||||
return <mdui-list-item icon={icon} rounded disabled={disabled ? true : undefined} onClick={() => setDropDownOpen(!isDropDownOpen)}>
|
||||
<mdui-dropdown ref={dropDownRef} trigger="manual" open={isDropDownOpen}>
|
||||
<span slot="trigger">{title}</span>
|
||||
<mdui-menu onClick={(e) => {
|
||||
e.stopPropagation()
|
||||
setDropDownOpen(false)
|
||||
}}>
|
||||
{
|
||||
Object.keys(selections).map((id) =>
|
||||
// @ts-ignore: selected 确实存在, 但是并不对外公开使用
|
||||
<mdui-menu-item key={id} selected={state == id ? true : undefined} onClick={() => {
|
||||
updater(preferenceId, id)
|
||||
}}>{selections[id]}</mdui-menu-item>
|
||||
)
|
||||
}
|
||||
</mdui-menu>
|
||||
</mdui-dropdown>
|
||||
<span slot="description">{selections[state]}</span>
|
||||
</mdui-list-item>
|
||||
}
|
||||
@@ -1,30 +0,0 @@
|
||||
import { Switch } from 'mdui'
|
||||
import React from 'react'
|
||||
import PreferenceUpdater from "./PreferenceUpdater.ts"
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
title: string
|
||||
id: string
|
||||
description?: string
|
||||
icon: string
|
||||
state: boolean
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export default function SwitchPreference({ title, icon, id, disabled, description, state }: Args) {
|
||||
const updater = React.useContext(PreferenceUpdater)
|
||||
|
||||
const switchRef = React.useRef<Switch>(null)
|
||||
|
||||
React.useEffect(() => {
|
||||
switchRef.current!.checked = state
|
||||
}, [state])
|
||||
|
||||
return <mdui-list-item disabled={disabled ? true : undefined} rounded icon={icon} onClick={() => {
|
||||
updater(id, !state)
|
||||
}}>
|
||||
{title}
|
||||
{description && <span slot="description">{description}</span>}
|
||||
<mdui-switch slot="end-icon" checked-icon="" ref={switchRef} onClick={(e) => e.preventDefault()}></mdui-switch>
|
||||
</mdui-list-item>
|
||||
}
|
||||
@@ -1,37 +0,0 @@
|
||||
import React from 'react'
|
||||
import { prompt } from 'mdui'
|
||||
import PreferenceUpdater from "./PreferenceUpdater.ts"
|
||||
|
||||
interface Args extends React.HTMLAttributes<HTMLElement> {
|
||||
title: string
|
||||
description?: string
|
||||
icon: string
|
||||
id: string
|
||||
state: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
export default function TextFieldPreference({ title, icon, description, id, state, disabled }: Args) {
|
||||
const updater = React.useContext(PreferenceUpdater)
|
||||
|
||||
return <mdui-list-item icon={icon} rounded disabled={disabled ? true : undefined} onClick={() => {
|
||||
prompt({
|
||||
headline: title,
|
||||
confirmText: "确定",
|
||||
cancelText: "取消",
|
||||
onConfirm: (value) => {
|
||||
updater(id, value)
|
||||
},
|
||||
onCancel: () => { },
|
||||
textFieldOptions: {
|
||||
label: description,
|
||||
value: state,
|
||||
},
|
||||
closeOnEsc: true,
|
||||
closeOnOverlayClick: true,
|
||||
})
|
||||
}}>
|
||||
{title}
|
||||
{description && <span slot="description">{description}</span>}
|
||||
</mdui-list-item>
|
||||
}
|
||||
@@ -1,101 +0,0 @@
|
||||
import { snackbar as mduiSnackbar, Snackbar } from "mdui"
|
||||
import ApiCallbackMessage from "../api/ApiCallbackMessage.ts"
|
||||
|
||||
interface Options {
|
||||
/**
|
||||
* Snackbar 出现的位置。默认为 `bottom`。可选值为：
|
||||
* * `top`：位于顶部，居中对齐
|
||||
* * `top-start`：位于顶部，左对齐
|
||||
* * `top-end`：位于顶部，右对齐
|
||||
* * `bottom`：位于底部，居中对齐
|
||||
* * `bottom-start`：位于底部，左对齐
|
||||
* * `bottom-end`：位于底部，右对齐
|
||||
*/
|
||||
placement?: 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
|
||||
/**
|
||||
* 操作按钮的文本
|
||||
*/
|
||||
action?: string;
|
||||
/**
|
||||
* 是否在右侧显示关闭按钮
|
||||
*/
|
||||
closeable?: boolean;
|
||||
/**
|
||||
* 消息文本最多显示几行。默认不限制行数。可选值为
|
||||
* * `1`：消息文本最多显示一行
|
||||
* * `2`：消息文本最多显示两行
|
||||
*/
|
||||
messageLine?: 1 | 2;
|
||||
/**
|
||||
* 在多长时间后自动关闭（单位为毫秒）。设置为 0 时，不自动关闭。默认为 5 秒后自动关闭。
|
||||
*/
|
||||
autoCloseDelay?: number;
|
||||
/**
|
||||
* 点击或触摸 Snackbar 以外的区域时是否关闭 Snackbar
|
||||
*/
|
||||
closeOnOutsideClick?: boolean;
|
||||
/**
|
||||
* 队列名称。
|
||||
* 默认不启用队列，在多次调用该函数时，将同时显示多个 snackbar。
|
||||
* 可在该参数中传入一个队列名称，具有相同队列名称的 snackbar 函数，将在上一个 snackbar 关闭后才打开下一个 snackbar。
|
||||
*/
|
||||
queue?: string;
|
||||
/**
|
||||
* 点击 Snackbar 时的回调函数。
|
||||
* 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
|
||||
* @param snackbar
|
||||
*/
|
||||
onClick?: (snackbar: Snackbar) => void;
|
||||
/**
|
||||
* 点击操作按钮时的回调函数。
|
||||
* 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
|
||||
* 默认点击后会关闭 snackbar；若返回值为 false，则不关闭 snackbar；若返回值为 promise，则将在 promise 被 resolve 后，关闭 snackbar。
|
||||
* @param snackbar
|
||||
*/
|
||||
onActionClick?: (snackbar: Snackbar) => void | boolean | Promise<void>;
|
||||
/**
|
||||
* Snackbar 开始显示时的回调函数。
|
||||
* 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
|
||||
* @param snackbar
|
||||
*/
|
||||
onOpen?: (snackbar: Snackbar) => void;
|
||||
/**
|
||||
* Snackbar 显示动画完成时的回调函数。
|
||||
* 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
|
||||
* @param snackbar
|
||||
*/
|
||||
onOpened?: (snackbar: Snackbar) => void;
|
||||
/**
|
||||
* Snackbar 开始隐藏时的回调函数。
|
||||
* 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
|
||||
* @param snackbar
|
||||
*/
|
||||
onClose?: (snackbar: Snackbar) => void;
|
||||
/**
|
||||
* Snackbar 隐藏动画完成时的回调函数。
|
||||
* 函数参数为 snackbar 实例，`this` 也指向 snackbar 实例。
|
||||
* @param snackbar
|
||||
*/
|
||||
onClosed?: (snackbar: Snackbar) => void;
|
||||
}
|
||||
|
||||
interface SnackbarOptions extends Options {
|
||||
message: string
|
||||
}
|
||||
|
||||
export function checkApiSuccessOrSncakbar(re: ApiCallbackMessage, msg_ahead: string, opinions_override: Options = {}): Snackbar | null {
|
||||
return re.code != 200 ? snackbar(
|
||||
Object.assign({
|
||||
message: `${msg_ahead}: ${re.msg.indexOf("fetch") != -1
|
||||
? "HTTP 请求失败"
|
||||
: re.msg
|
||||
} [${re.code}]`,
|
||||
placement: "top",
|
||||
} as SnackbarOptions, opinions_override)
|
||||
) : null
|
||||
}
|
||||
|
||||
export function snackbar(opinions: SnackbarOptions) {
|
||||
opinions.autoCloseDelay == null && (opinions.autoCloseDelay = 3500)
|
||||
return mduiSnackbar(opinions)
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
import React from "react"
|
||||
|
||||
export default function useAsyncEffect(func: Function, deps?: React.DependencyList) {
|
||||
React.useEffect(() => {
|
||||
func()
|
||||
// 警告: 不添加 deps 有可能導致無限執行
|
||||
}, deps || [])
|
||||
}
|
||||
@@ -1,8 +0,0 @@
|
||||
import * as React from 'react'
|
||||
|
||||
export default function useEventListener<T extends HTMLElement | null>(ref: React.MutableRefObject<T>, eventName: string, callback: (event: Event) => void) {
|
||||
React.useEffect(() => {
|
||||
ref.current!.addEventListener(eventName, callback)
|
||||
return () => ref.current?.removeEventListener(eventName, callback)
|
||||
}, [ref, eventName, callback])
|
||||
}
|
||||
Reference in New Issue
Block a user