feat(flat-component): add return to previous page button to MainPageN…

…avHorizontal.
netless-io · Jun 8, 2021 · 37302d8 · 37302d8
1 parent fc6cd73
commit 37302d8
Show file tree

Hide file tree

Showing 17 changed files with 116 additions and 89 deletions.
diff --git a/desktop/renderer-app/src/components/EditRoomPage/style.less b/desktop/renderer-app/src/components/EditRoomPage/style.less
@@ -7,7 +7,7 @@
     width: 100%;
     top: 0;
     z-index: 1;
-    // margin: 0 24px;
+    padding-top: 9px;
     background: #fff;
 }
 

diff --git a/desktop/renderer-app/src/pages/PeriodicRoomDetailPage/index.less b/desktop/renderer-app/src/pages/PeriodicRoomDetailPage/index.less
@@ -4,6 +4,7 @@
     top: 0;
     z-index: 1;
     margin: 0 24px;
+    padding-top: 12px;
     background: #fff;
 }
 

diff --git a/desktop/renderer-app/src/pages/RoomDetailPage/index.less b/desktop/renderer-app/src/pages/RoomDetailPage/index.less
@@ -1,5 +1,5 @@
 .room-detail-page-header-container {
-    margin-top: 24px;
+    margin-top: 12px;
     margin-left: 24px;
 }
 

diff --git a/packages/flat-components/src/components/MainPageLayout/MainPageHeader/index.less b/packages/flat-components/src/components/MainPageLayout/MainPageHeader/index.less
@@ -1,8 +1,7 @@
 .main-page-header-container {
     display: flex;
     align-items: center;
-    line-height: 24px;
-    margin-bottom: 16px;
+    line-height: 3;
 }
 
 .main-page-header-back {

diff --git a/packages/flat-components/src/components/MainPageLayout/MainPageHeader/index.tsx b/packages/flat-components/src/components/MainPageLayout/MainPageHeader/index.tsx
@@ -6,8 +6,8 @@ import { Divider } from "antd";
 import { useTranslation } from "react-i18next";
 
 export interface MainPageHeaderProps {
-    onBackPreviousPage: () => void;
-    title: React.ReactNode;
+    onBackPreviousPage?: () => void;
+    title?: React.ReactNode;
 }
 
 export const MainPageHeader: React.FC<MainPageHeaderProps> = ({ onBackPreviousPage, title }) => {

diff --git a/...nts/src/components/MainPageLayout/MainPageNavHorizontal/MainPageNavHorizontal.stories.tsx b/...nts/src/components/MainPageLayout/MainPageNavHorizontal/MainPageNavHorizontal.stories.tsx
@@ -89,6 +89,8 @@ Overview.args = {
     activeKeys: ["home"],
     avatarSrc: "http://placekitten.com/200/200",
     userName: "Flat Name",
+    title: <div>Title</div>,
+    onBackPreviousPage: () => null,
 };
 Overview.argTypes = {
     activeKeys: {

diff --git a/packages/flat-components/src/components/MainPageLayout/MainPageNavHorizontal/index.tsx b/packages/flat-components/src/components/MainPageLayout/MainPageNavHorizontal/index.tsx
@@ -4,8 +4,9 @@ import classNames from "classnames";
 import { MainPageLayoutItem } from "../types";
 import { MainPageNavAvatar, MainPageNavAvatarProps } from "../MainPageNavAvatar";
 import { Tabs } from "antd";
+import { MainPageHeader, MainPageHeaderProps } from "../MainPageHeader";
 
-export interface MainPageNavHorizontalProps extends MainPageNavAvatarProps {
+export interface MainPageNavHorizontalProps extends MainPageNavAvatarProps, MainPageHeaderProps {
     /** when an item is clicked */
     onClick: (mainPageLayoutItem: MainPageLayoutItem) => void;
     /** a list of keys to highlight the items */
@@ -14,6 +15,8 @@ export interface MainPageNavHorizontalProps extends MainPageNavAvatarProps {
     leftMenu: MainPageLayoutItem[];
     /** outside footer menu in MainPageLayout */
     rightMenu: MainPageLayoutItem[];
+    /** display return to previous page button if provided*/
+    onBackPreviousPage?: () => void;
 }
 
 export const MainPageNavHorizontal: React.FC<MainPageNavHorizontalProps> = ({
@@ -24,34 +27,42 @@ export const MainPageNavHorizontal: React.FC<MainPageNavHorizontalProps> = ({
     leftMenu,
     rightMenu,
     popMenu,
+    onBackPreviousPage,
+    title,
 }) => {
     const { TabPane } = Tabs;
 
     return (
         <div className="main-page-nav-horizontal-container">
             <div className="main-page-nav-horizontal-content">
                 <div className="main-page-nav-horizontal-left">
-                    <Tabs
-                        activeKey={
-                            activeKeys.find(key =>
-                                leftMenu.some(menuItem => menuItem.key === key),
-                            ) || "none"
-                        }
-                        onChange={key => {
-                            const item = leftMenu.find(e => e.key === key);
-                            if (item) {
-                                onClick(item);
-                            } else {
-                                if (process.env.NODE_ENV === "development") {
-                                    console.warn("[MainPageNav] tab missing key", key);
-                                }
+                    {onBackPreviousPage ? (
+                        <div className="main-page-nav-horizontal-left-header">
+                            <MainPageHeader title={title} onBackPreviousPage={onBackPreviousPage} />
+                        </div>
+                    ) : (
+                        <Tabs
+                            activeKey={
+                                activeKeys.find(key =>
+                                    leftMenu.some(menuItem => menuItem.key === key),
+                                ) || "none"
                             }
-                        }}
-                    >
-                        {leftMenu.map(menuItem => {
-                            return <TabPane tab={menuItem.title} key={menuItem.key}></TabPane>;
-                        })}
-                    </Tabs>
+                            onChange={key => {
+                                const item = leftMenu.find(e => e.key === key);
+                                if (item) {
+                                    onClick(item);
+                                } else {
+                                    if (process.env.NODE_ENV === "development") {
+                                        console.warn("[MainPageNav] tab missing key", key);
+                                    }
+                                }
+                            }}
+                        >
+                            {leftMenu.map(menuItem => {
+                                return <TabPane tab={menuItem.title} key={menuItem.key}></TabPane>;
+                            })}
+                        </Tabs>
+                    )}
                 </div>
                 <div className="main-page-nav-horizontal-right">
                     <div className="main-page-nav-horizontal-right-item">

diff --git a/packages/flat-components/src/components/MainPageLayout/MainPageNavHorizontal/style.less b/packages/flat-components/src/components/MainPageLayout/MainPageNavHorizontal/style.less
@@ -26,6 +26,9 @@
     }
 }
 
+.main-page-nav-horizontal-left-header {
+}
+
 .main-page-nav-horizontal-right {
     display: flex;
     flex-direction: row;

diff --git a/...s/flat-components/src/components/RoomDetailPage/RoomDetailBody/RoomDetailBody.stories.tsx b/...s/flat-components/src/components/RoomDetailPage/RoomDetailBody/RoomDetailBody.stories.tsx
@@ -24,5 +24,7 @@ Overview.args = {
         roomStatus: RoomStatus.Started,
         beginTime: 1619771930756,
         endTime: 1619775530756,
+        count: 7,
     },
+    showRoomCountVisible: true,
 };
diff --git a/packages/flat-components/src/components/RoomDetailPage/RoomDetailBody/index.less b/packages/flat-components/src/components/RoomDetailPage/RoomDetailBody/index.less
@@ -93,3 +93,11 @@
     font-size: 12px;
     color: #7a7b7c;
 }
+
+.room-detail-body-content-room-count {
+    margin-left: auto;
+    text-align: center;
+    margin-top: 16px;
+    cursor: pointer;
+    color: #3381ff;
+}
diff --git a/packages/flat-components/src/components/RoomDetailPage/RoomDetailBody/index.tsx b/packages/flat-components/src/components/RoomDetailPage/RoomDetailBody/index.tsx
@@ -9,12 +9,19 @@ import { zhCN } from "date-fns/locale";
 import { RoomInfo, RoomType } from "../../../types/room";
 import { RoomStatusElement } from "../../RoomStatusElement";
 import { useTranslation } from "react-i18next";
+import { observer } from "mobx-react-lite";
 
 export interface RoomDetailBodyProps {
     roomInfo: RoomInfo;
+    showRoomCountVisible?: boolean;
+    jumpToPeriodicRoomDetailPage?: () => void;
 }
 
-export const RoomDetailBody: React.FC<RoomDetailBodyProps> = ({ roomInfo }) => {
+export const RoomDetailBody = observer<RoomDetailBodyProps>(function RoomDetailBody({
+    roomInfo,
+    showRoomCountVisible,
+    jumpToPeriodicRoomDetailPage,
+}) {
     const { t } = useTranslation();
     const { beginTime, endTime } = roomInfo;
     const { i18n } = useTranslation();
@@ -23,10 +30,10 @@ export const RoomDetailBody: React.FC<RoomDetailBodyProps> = ({ roomInfo }) => {
         () => (beginTime ? formatTime(beginTime, i18n.language) : null),
         [beginTime, i18n.language],
     );
-    const formattedEndTime = useMemo(() => (endTime ? formatTime(endTime, i18n.language) : null), [
-        endTime,
-        i18n.language,
-    ]);
+    const formattedEndTime = useMemo(
+        () => (endTime ? formatTime(endTime, i18n.language) : null),
+        [endTime, i18n.language],
+    );
 
     return (
         <div className="room-detail-body">
@@ -65,6 +72,14 @@ export const RoomDetailBody: React.FC<RoomDetailBodyProps> = ({ roomInfo }) => {
                         </div>
                     )}
                 </div>
+                {showRoomCountVisible && (
+                    <div
+                        className="room-detail-body-content-room-count"
+                        onClick={jumpToPeriodicRoomDetailPage}
+                    >
+                        查看全部 {roomInfo.count} 场房间
+                    </div>
+                )}
                 <div className="room-detail-body-content-cut-line" />
                 <div className="room-detail-body-content-info">
                     <div>
@@ -87,4 +102,4 @@ export const RoomDetailBody: React.FC<RoomDetailBodyProps> = ({ roomInfo }) => {
             </div>
         </div>
     );
-};
+});
diff --git a/packages/flat-components/src/components/RoomDetailPage/index.tsx b/packages/flat-components/src/components/RoomDetailPage/index.tsx
@@ -6,11 +6,20 @@ import { RoomDetailFooter, RoomDetailFooterProps } from "./RoomDetailFooter";
 
 export type RoomDetailPanelProps = RoomDetailBodyProps & RoomDetailFooterProps;
 
-export const RoomDetailPanel: React.FC<RoomDetailPanelProps> = ({ roomInfo, ...restProps }) => {
+export const RoomDetailPanel: React.FC<RoomDetailPanelProps> = ({
+    roomInfo,
+    showRoomCountVisible,
+    jumpToPeriodicRoomDetailPage,
+    ...restProps
+}) => {
     return (
         <div className="room-detail-panel-container">
             <div className="room-detail-panel-body">
-                <RoomDetailBody roomInfo={roomInfo} />
+                <RoomDetailBody
+                    roomInfo={roomInfo}
+                    jumpToPeriodicRoomDetailPage={jumpToPeriodicRoomDetailPage}
+                    showRoomCountVisible={showRoomCountVisible}
+                />
             </div>
             <div className="room-detail-panel-footer">
                 <RoomDetailFooter {...restProps} />

diff --git a/web/flat-web/src/components/EditRoomPage/index.tsx b/web/flat-web/src/components/EditRoomPage/index.tsx
@@ -2,7 +2,7 @@ import "./style.less";
 
 import React from "react";
 import { observer } from "mobx-react-lite";
-import { EditRoomBody, EditRoomBodyProps, MainPageHeader } from "flat-components";
+import { EditRoomBody, EditRoomBodyProps } from "flat-components";
 import { useHistory } from "react-router";
 import { MainPageLayoutHorizontalContainer } from "../MainPageLayoutHorizontalContainer";
 
@@ -12,19 +12,16 @@ export const EditRoomPage = observer<EditRoomPageProps>(function EditRoomPage(pr
     const history = useHistory();
 
     return (
-        <MainPageLayoutHorizontalContainer>
-            <div className="edit-room-page">
-                <div className="edit-room-page-header-container">
-                    <MainPageHeader
-                        onBackPreviousPage={() => history.goBack()}
-                        title={
-                            <span className="edit-room-page-header-title">
-                                {props.type === "schedule" ? "预定房间" : "修改房间"}
-                            </span>
-                        }
-                    />
+        <MainPageLayoutHorizontalContainer
+            title={
+                <div className="edit-room-page-header-title">
+                    {props.type === "schedule" ? "预定房间" : "修改房间"}
                 </div>
-                <div className="edit-room-page-body fancy-scrollbar">
+            }
+            onBackPreviousPage={() => history.goBack()}
+        >
+            <div className="edit-room-page">
+                <div className="edit-room-page-body">
                     <div className="edit-room-page-body-content">
                         <EditRoomBody {...props} />
                     </div>

diff --git a/web/flat-web/src/components/MainPageLayoutHorizontalContainer/index.tsx b/web/flat-web/src/components/MainPageLayoutHorizontalContainer/index.tsx
@@ -16,10 +16,12 @@ export interface MainPageLayoutHorizontalContainerProps {
     subMenu?: MainPageLayoutItem[];
     activeKeys?: string[];
     onRouteChange?: MainPageLayoutProps["onClick"];
+    title?: React.ReactNode;
+    onBackPreviousPage?: () => void;
 }
 
 export const MainPageLayoutHorizontalContainer: React.FC<MainPageLayoutHorizontalContainerProps> =
-    ({ subMenu, children, activeKeys, onRouteChange }) => {
+    ({ subMenu, children, activeKeys, onRouteChange, title, onBackPreviousPage }) => {
         const leftMenu = [
             {
                 key: routeConfig[RouteNameType.HomePage].path,
@@ -97,6 +99,8 @@ export const MainPageLayoutHorizontalContainer: React.FC<MainPageLayoutHorizonta
 
         return (
             <MainPageLayoutHorizontal
+                title={title}
+                onBackPreviousPage={onBackPreviousPage}
                 leftMenu={leftMenu}
                 rightMenu={rightMenu}
                 popMenu={popMenu}

diff --git a/web/flat-web/src/pages/PeriodicRoomDetailPage/index.tsx b/web/flat-web/src/pages/PeriodicRoomDetailPage/index.tsx
@@ -5,7 +5,7 @@ import { observer } from "mobx-react-lite";
 import { useHistory, useParams } from "react-router-dom";
 import React, { useContext, useEffect, useState } from "react";
 import { useLastLocation } from "react-router-last-location";
-import { LoadingPage, MainPageHeader, PeriodicRoomPanel } from "flat-components";
+import { LoadingPage, PeriodicRoomPanel } from "flat-components";
 import { RoomStoreContext } from "../../components/StoreProvider";
 import { errorTips } from "../../components/Tips/ErrorTips";
 import { globalStore } from "../../stores/GlobalStore";
@@ -120,19 +120,12 @@ export const PeriodicRoomDetailPage = observer<{}>(function PeriodicRoomDetailPa
     }
 
     return (
-        <MainPageLayoutHorizontalContainer>
+        <MainPageLayoutHorizontalContainer
+            title={<h1 className="periodic-room-detail-page-header-title">{title}</h1>}
+            onBackPreviousPage={backPreviousPage}
+        >
             <div className="periodic-room-detail-page-container">
-                <div className="periodic-room-detail-page-header-container">
-                    <MainPageHeader
-                        title={
-                            <>
-                                <h1 className="periodic-room-detail-page-header-title">{title}</h1>
-                            </>
-                        }
-                        onBackPreviousPage={backPreviousPage}
-                    />
-                </div>
-                <div className="periodic-room-detail-page-panel-container fancy-scrollbar">
+                <div className="periodic-room-detail-page-panel-container">
                     <PeriodicRoomPanel
                         rooms={rooms}
                         userName={ownerUserName}