From 071e1a354cf9aafbd6d3d434cd2e712dffdf2325 Mon Sep 17 00:00:00 2001 From: hyrious Date: Wed, 21 Sep 2022 16:03:23 +0800 Subject: [PATCH] fix(flat-components): fix antd warnings, close #1547 --- .../src/components/ChatPanel/index.tsx | 47 +++++---- .../ExitRoomConfirmModal/index.tsx | 6 +- .../ClassroomPage/RecordHintTips/index.tsx | 2 +- .../CloudStorageFileListFileName.tsx | 17 ++-- .../EditRoomPage/EditRoomBody/index.tsx | 23 +++-- .../EditRoomPage/FullTimePicker/index.tsx | 3 +- .../RoomListItem/RoomListItemMenus.tsx | 14 +-- .../components/HomePage/RoomList/index.tsx | 14 +-- .../src/components/InviteModal/index.tsx | 2 +- .../MainPageNavAvatar/index.tsx | 4 +- .../MainPageNavHorizontal/index.tsx | 33 +++---- .../CancelPeriodicRoomModal.tsx | 2 +- .../CancelSubPeriodicRoomModal.tsx | 2 +- .../components/PeriodicRoomPage/MoreMenu.tsx | 98 +++++++++++-------- .../src/components/PresetsModal/index.tsx | 2 +- .../RemoveHistoryRoomModal/index.tsx | 2 +- .../src/components/RemoveRoomModal/index.tsx | 2 +- .../components/SaveAnnotationModal/index.tsx | 2 +- .../HomePage/MainRoomMenu/CreateRoomBox.tsx | 23 ++--- .../src/HomePage/MainRoomMenu/JoinRoomBox.tsx | 2 +- .../flat-pages/src/RoomDetailPage/index.tsx | 5 +- .../GeneralSettingPage/binding/WeChat.tsx | 2 +- .../src/components/AppStoreButton/index.tsx | 2 +- .../src/components/ChatPanelReplay/index.tsx | 18 +++- .../src/components/CloudStorageButton.tsx | 2 +- .../Modal/ExitReplayConfirmModal.tsx | 2 +- .../Modal/RemoveHistoryRoomModal.tsx | 2 +- 27 files changed, 171 insertions(+), 162 deletions(-) diff --git a/packages/flat-components/src/components/ChatPanel/index.tsx b/packages/flat-components/src/components/ChatPanel/index.tsx index ea0889398c3..d175626b48a 100644 --- a/packages/flat-components/src/components/ChatPanel/index.tsx +++ b/packages/flat-components/src/components/ChatPanel/index.tsx @@ -30,32 +30,31 @@ export const ChatPanel = /* @__PURE__ */ observer(function ChatP
+ {t("messages")} + + ), + children: , + }, + { + key: "users", + label: ( + + + {t("users")} {usersCount} + + + ), + children: , + }, + ]} tabBarGutter={0} onChange={setActiveTab as (key: string) => void} - > - - {t("messages")} - - } - > - - - - - {t("users")} {usersCount} - - - } - > - - - + >
); }); diff --git a/packages/flat-components/src/components/ClassroomPage/ExitRoomConfirmModal/index.tsx b/packages/flat-components/src/components/ClassroomPage/ExitRoomConfirmModal/index.tsx index 0c54b9d181a..0d595a8abbd 100644 --- a/packages/flat-components/src/components/ClassroomPage/ExitRoomConfirmModal/index.tsx +++ b/packages/flat-components/src/components/ClassroomPage/ExitRoomConfirmModal/index.tsx @@ -23,8 +23,8 @@ export const StopClassConfirmModal: FC = ({ return ( @@ -68,8 +68,8 @@ export const CloseRoomConfirmModal: FC = ({ {t("end-the-class")} , ]} + open={visible} title={t("close-option")} - visible={visible} onCancel={onCancel} onOk={onCancel} > @@ -96,8 +96,8 @@ export const ExitRoomConfirmModal: FC = ({ const t = useTranslate(); return ( diff --git a/packages/flat-components/src/components/ClassroomPage/RecordHintTips/index.tsx b/packages/flat-components/src/components/ClassroomPage/RecordHintTips/index.tsx index 9e2041414f5..d0600cf36fc 100644 --- a/packages/flat-components/src/components/ClassroomPage/RecordHintTips/index.tsx +++ b/packages/flat-components/src/components/ClassroomPage/RecordHintTips/index.tsx @@ -16,6 +16,7 @@ export const RecordHintTips: FC = ({ visible, onClose, chil return ( = ({ visible, onClose, chil /> } - visible={visible} > {children} diff --git a/packages/flat-components/src/components/CloudStorage/CloudStorageFileList/CloudStorageFileListFileName.tsx b/packages/flat-components/src/components/CloudStorage/CloudStorageFileList/CloudStorageFileListFileName.tsx index 72874bd326e..ea902c48f64 100644 --- a/packages/flat-components/src/components/CloudStorage/CloudStorageFileList/CloudStorageFileListFileName.tsx +++ b/packages/flat-components/src/components/CloudStorage/CloudStorageFileList/CloudStorageFileListFileName.tsx @@ -67,16 +67,13 @@ export const CloudStorageFileListFileName = getPopupContainer={getPopupContainer} overlay={ - onItemMenuClick && onItemMenuClick(file.fileUUID, key) - } - > - {menuItems.map(({ key, name, className = "" }) => ( - - {name} - - ))} - + items={menuItems.map(e => ({ + key: e.key, + className: e.className, + label: e.name, + }))} + onClick={({ key }) => onItemMenuClick?.(file.fileUUID, key)} + /> } overlayClassName="cloud-storage-file-list-menu" > diff --git a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/index.tsx b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/index.tsx index 6f1e0487c8d..27a570de343 100644 --- a/packages/flat-components/src/components/EditRoomPage/EditRoomBody/index.tsx +++ b/packages/flat-components/src/components/EditRoomPage/EditRoomBody/index.tsx @@ -16,6 +16,7 @@ import { renderBeginTimePicker } from "./renderBeginTimePicker"; import { renderEndTimePicker } from "./renderEndTimePicker"; import { renderPeriodicForm } from "./renderPeriodicForm"; import { ClassPicker } from "../../HomePage/ClassPicker"; +import { Fragment } from "react"; export enum Region { CN_HZ = "cn-hz", @@ -106,17 +107,19 @@ export const EditRoomBody: React.FC = ({ const regionMenu = ( ({ + key: region, + label: ( + + {region} + {t(`region-${region}`)} + + ), + }))} + prefix="hello" style={{ width: "auto" }} onClick={e => setRegion(e.key as Region)} - > -
{t("servers")}
- {regions.map(region => ( - - {region} - {t(`region-${region}`)} - - ))} - + /> ); return ( @@ -251,8 +254,8 @@ export const EditRoomBody: React.FC = ({ {t("confirm")} , ]} + open={isShowEditSubmitConfirm} title={renderModalTitle(type)} - visible={isShowEditSubmitConfirm} onCancel={hideEditSubmitConfirm} onOk={onSubmitForm} > diff --git a/packages/flat-components/src/components/EditRoomPage/FullTimePicker/index.tsx b/packages/flat-components/src/components/EditRoomPage/FullTimePicker/index.tsx index 059ba45edae..bad4dc26184 100644 --- a/packages/flat-components/src/components/EditRoomPage/FullTimePicker/index.tsx +++ b/packages/flat-components/src/components/EditRoomPage/FullTimePicker/index.tsx @@ -72,8 +72,7 @@ export const FullTimePicker: FC = ({ ({ disabledHours, disabledMinutes })} format="HH:mm" value={value} onChange={date => { diff --git a/packages/flat-components/src/components/HomePage/RoomList/RoomListItem/RoomListItemMenus.tsx b/packages/flat-components/src/components/HomePage/RoomList/RoomListItem/RoomListItemMenus.tsx index c9e90361d46..790cbe622bc 100644 --- a/packages/flat-components/src/components/HomePage/RoomList/RoomListItem/RoomListItemMenus.tsx +++ b/packages/flat-components/src/components/HomePage/RoomList/RoomListItem/RoomListItemMenus.tsx @@ -15,13 +15,13 @@ export function RoomListItemMenus({ return ( - {actions.map(action => ( - onAction(action.key)}> - {action.text} - - ))} - + ({ + key: action.key, + onClick: () => onAction(action.key), + label: action.text, + }))} + /> } overlayClassName="room-list-item-sub-menu" trigger={["click"]} diff --git a/packages/flat-components/src/components/HomePage/RoomList/index.tsx b/packages/flat-components/src/components/HomePage/RoomList/index.tsx index 3be5a5f5235..71d200efffd 100644 --- a/packages/flat-components/src/components/HomePage/RoomList/index.tsx +++ b/packages/flat-components/src/components/HomePage/RoomList/index.tsx @@ -42,13 +42,13 @@ export function RoomList({ {filters && ( - {filters.map(({ title, key }) => ( - onTabActive?.(key)}> - {title} - - ))} - + ({ + key, + onClick: () => onTabActive?.(key), + label: title, + }))} + /> } > diff --git a/packages/flat-components/src/components/InviteModal/index.tsx b/packages/flat-components/src/components/InviteModal/index.tsx index 811a1697639..ca146d76d34 100644 --- a/packages/flat-components/src/components/InviteModal/index.tsx +++ b/packages/flat-components/src/components/InviteModal/index.tsx @@ -77,7 +77,7 @@ export const InviteModal: React.FC = ({ cancelText={t("cancel")} className="invite-modal" okText={t("copy")} - visible={visible} + open={visible} width={460} onCancel={onCancel} onOk={onCopyClicked} diff --git a/packages/flat-components/src/components/MainPageLayout/MainPageNavAvatar/index.tsx b/packages/flat-components/src/components/MainPageLayout/MainPageNavAvatar/index.tsx index 59a1c71b31c..f0457aa2202 100644 --- a/packages/flat-components/src/components/MainPageLayout/MainPageNavAvatar/index.tsx +++ b/packages/flat-components/src/components/MainPageLayout/MainPageNavAvatar/index.tsx @@ -39,12 +39,12 @@ export const MainPageNavAvatar: React.FC = ({ return ( = ({ generateAvatar, title, }) => { - const { TabPane } = Tabs; - return (
@@ -48,6 +46,17 @@ export const MainPageNavHorizontal: React.FC = ({ leftMenu.some(menuItem => menuItem.key === key), ) || "none" } + items={leftMenu.map(menuItem => ({ + key: menuItem.key, + label: ( +
+
+ {menuItem.icon(activeKeys.includes(menuItem.key))} +
+ {menuItem.title} +
+ ), + }))} onChange={key => { const item = leftMenu.find(e => e.key === key); if (item) { @@ -58,25 +67,7 @@ export const MainPageNavHorizontal: React.FC = ({ } } }} - > - {leftMenu.map(menuItem => { - return ( - -
- {menuItem.icon( - activeKeys.includes(menuItem.key), - )} -
- {menuItem.title} -
- } - /> - ); - })} - + > )}
diff --git a/packages/flat-components/src/components/PeriodicRoomPage/CancelPeriodicRoomModal.tsx b/packages/flat-components/src/components/PeriodicRoomPage/CancelPeriodicRoomModal.tsx index b34273f0964..d9b713aad3c 100644 --- a/packages/flat-components/src/components/PeriodicRoomPage/CancelPeriodicRoomModal.tsx +++ b/packages/flat-components/src/components/PeriodicRoomPage/CancelPeriodicRoomModal.tsx @@ -42,8 +42,8 @@ export const CancelPeriodicRoomModal: React.FC = ( {t("confirm")} , ]} + open={visible} title={title} - visible={visible} onCancel={onCancel} > {content()} diff --git a/packages/flat-components/src/components/PeriodicRoomPage/CancelSubPeriodicRoomModal.tsx b/packages/flat-components/src/components/PeriodicRoomPage/CancelSubPeriodicRoomModal.tsx index 5e36857a483..e418b83de41 100644 --- a/packages/flat-components/src/components/PeriodicRoomPage/CancelSubPeriodicRoomModal.tsx +++ b/packages/flat-components/src/components/PeriodicRoomPage/CancelSubPeriodicRoomModal.tsx @@ -26,8 +26,8 @@ export const CancelSubPeriodicRoomModal: React.FC, ]} + open={visible} title={t("cancel-room")} - visible={visible} onCancel={onCancel} > {t("cancel-sub-periodic-room-tips")} diff --git a/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx b/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx index 66c56f867df..d8081d04990 100644 --- a/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx +++ b/packages/flat-components/src/components/PeriodicRoomPage/MoreMenu.tsx @@ -33,48 +33,62 @@ export const MoreMenu: React.FC = ({ const [inviteRoomVisible, setInviteRoomVisible] = useState(false); return ( - { - return ( - - {t("room-detail")} - {isCreator && ( - <> - - {t("modify-room")} - - setCancelSubPeriodicRoomVisible(true)}> - {t("cancel-room")} - - - )} - setInviteRoomVisible(true)}> - {t("invitation")} - - setCancelSubPeriodicRoomVisible(false)} - onCancelSubPeriodicRoom={onCancelSubPeriodicRoom} + <> + { + return ( + setCancelSubPeriodicRoomVisible(true), + }, + ] + : []), + { + key: "invitation", + label: t("invitation"), + onClick: () => setInviteRoomVisible(true), + }, + ]} /> - setInviteRoomVisible(false)} - onCopy={text => { - onCopyInvitation(text); - void message.success(t("copy-success")); - setInviteRoomVisible(false); - }} - /> - - ); - }} - trigger={["click"]} - > - {t("more")} - + ); + }} + trigger={["click"]} + > + {t("more")} + + setCancelSubPeriodicRoomVisible(false)} + onCancelSubPeriodicRoom={onCancelSubPeriodicRoom} + /> + setInviteRoomVisible(false)} + onCopy={text => { + onCopyInvitation(text); + void message.success(t("copy-success")); + setInviteRoomVisible(false); + }} + /> + ); }; diff --git a/packages/flat-components/src/components/PresetsModal/index.tsx b/packages/flat-components/src/components/PresetsModal/index.tsx index 79976dfe360..ceda60dfee7 100644 --- a/packages/flat-components/src/components/PresetsModal/index.tsx +++ b/packages/flat-components/src/components/PresetsModal/index.tsx @@ -34,8 +34,8 @@ export const PresetsModal: React.FC = ({ , ]} + open={visible} title={t("delete-room-records")} - visible={visible} wrapClassName="remove-history-room-modal-container" onCancel={onCancel} > diff --git a/packages/flat-components/src/components/RemoveRoomModal/index.tsx b/packages/flat-components/src/components/RemoveRoomModal/index.tsx index a0dfea74a08..c89daab5a9f 100644 --- a/packages/flat-components/src/components/RemoveRoomModal/index.tsx +++ b/packages/flat-components/src/components/RemoveRoomModal/index.tsx @@ -90,8 +90,8 @@ export const RemoveRoomModal: React.FC = ({ {t("confirm")} , ]} + open={cancelModalVisible} title={title} - visible={cancelModalVisible} wrapClassName="remove-room-modal-container" onCancel={onCancel} > diff --git a/packages/flat-components/src/components/SaveAnnotationModal/index.tsx b/packages/flat-components/src/components/SaveAnnotationModal/index.tsx index 4d8ccd19048..47f9aa4f000 100644 --- a/packages/flat-components/src/components/SaveAnnotationModal/index.tsx +++ b/packages/flat-components/src/components/SaveAnnotationModal/index.tsx @@ -43,8 +43,8 @@ export const SaveAnnotationModal: React.FC = ({ closable destroyOnClose footer={null} + open={visible} title={t("annotation.save-action")} - visible={visible} width={640} wrapClassName="save-annotation-modal-container" onCancel={onClose} diff --git a/packages/flat-pages/src/HomePage/MainRoomMenu/CreateRoomBox.tsx b/packages/flat-pages/src/HomePage/MainRoomMenu/CreateRoomBox.tsx index 156ae0d1452..bcc81b75adb 100644 --- a/packages/flat-pages/src/HomePage/MainRoomMenu/CreateRoomBox.tsx +++ b/packages/flat-pages/src/HomePage/MainRoomMenu/CreateRoomBox.tsx @@ -1,6 +1,6 @@ import "./CreateRoomBox.less"; -import React, { useContext, useEffect, useRef, useState } from "react"; +import React, { Fragment, useContext, useEffect, useRef, useState } from "react"; import { observer } from "mobx-react-lite"; import { Button, Input, Modal, Checkbox, Form, Dropdown, Menu, InputRef } from "antd"; import { RoomType } from "@netless/flat-server-api"; @@ -60,17 +60,18 @@ export const CreateRoomBox = observer(function CreateRoomBox const regionMenu = ( ({ + key: region, + label: ( + + {region} + {t(`region-${region}`)} + + ), + }))} style={{ width: "auto" }} onClick={e => setRoomRegion(e.key as Region)} - > -
{t("servers")}
- {regions.map(region => ( - - {region} - {t(`region-${region}`)} - - ))} - + > ); return ( @@ -99,8 +100,8 @@ export const CreateRoomBox = observer(function CreateRoomBox {t("begin")} , ]} + open={isShowModal} title={t("home-page-hero-button-type.begin")} - visible={isShowModal} width={400} wrapClassName="create-room-box-container" onCancel={handleCancel} diff --git a/packages/flat-pages/src/HomePage/MainRoomMenu/JoinRoomBox.tsx b/packages/flat-pages/src/HomePage/MainRoomMenu/JoinRoomBox.tsx index 2ad2c24259f..63b256d10b2 100644 --- a/packages/flat-pages/src/HomePage/MainRoomMenu/JoinRoomBox.tsx +++ b/packages/flat-pages/src/HomePage/MainRoomMenu/JoinRoomBox.tsx @@ -75,8 +75,8 @@ export const JoinRoomBox = observer(function JoinRoomBox({ onJ , ]} okText={t("join")} + open={isShowModal} title={t("home-page-hero-button-type.join")} - visible={isShowModal} width={400} wrapClassName="join-room-box-container" onCancel={handleCancel} diff --git a/packages/flat-pages/src/RoomDetailPage/index.tsx b/packages/flat-pages/src/RoomDetailPage/index.tsx index a0d21108f2c..fe56f40d08e 100644 --- a/packages/flat-pages/src/RoomDetailPage/index.tsx +++ b/packages/flat-pages/src/RoomDetailPage/index.tsx @@ -103,10 +103,7 @@ export const RoomDetailPage = observer(function RoomDetailPage() { function jumpToReplayPage(): void { if (roomInfo) { const { roomType, roomUUID, ownerUUID } = roomInfo; - window.open( - `${FLAT_WEB_BASE_URL}/replay/${roomType}/${roomUUID}/${ownerUUID}/`, - "_blank", - ); + window.open(`/replay/${roomType}/${roomUUID}/${ownerUUID}/`, "_blank"); } } diff --git a/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/binding/WeChat.tsx b/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/binding/WeChat.tsx index a79fa145bfe..107a2a10452 100644 --- a/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/binding/WeChat.tsx +++ b/packages/flat-pages/src/UserSettingPage/GeneralSettingPage/binding/WeChat.tsx @@ -96,8 +96,8 @@ export const BindWeChat: React.FC = ({ isBind, onRefresh, gl destroyOnClose className="binding-wechat-modal" footer={null} + open={!!qrCodeURL} title={t("bind-wechat")} - visible={!!qrCodeURL} onCancel={cancel} >